-
feat(playground): extract playground UI into reusable @trycua/playground package (#1013)
frostbyte_neo 发布于
2026-02-05 14:47:18 +00:00 | 1766 次提交 在此版本后已推送到 main- feat(playground): add package foundation and type definitions
Set up @trycua/playground package structure with:
- package.json with React peer deps and build tooling
- tsconfig.json and tsdown.config.ts for TypeScript/bundling
- Type definitions copied from cloud repo (Chat, Computer, etc.)
- Adapter interface contracts (PlaygroundAdapters, PersistenceAdapter,
ComputerAdapter, InferenceAdapter) - Re-exports of message types from @trycua/agent
This establishes the foundation for the playground migration,
enabling Agents B, C, D to build adapters, components, and hooks.Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- feat(playground): implement local and cloud adapters
Add adapter implementations for the playground package:
Local adapter (src/adapters/local.ts):
- LocalPersistenceAdapter: localStorage-based chat persistence
- LocalComputerAdapter: user-provided computer URLs with health checks
- LocalInferenceAdapter: user-provided API keys (Anthropic, OpenAI)
- createLocalAdapter() factory function
Cloud adapter (src/adapters/cloud.ts):
- CloudPersistenceAdapter: CUA API calls to /v1/playground/*
- CloudComputerAdapter: CUA API calls to /v1/vms
- CloudInferenceAdapter: cloud-managed API keys with /v1/models
- createCloudAdapter() factory function
Also includes:
- localStorage utilities copied from cloud repo (verbatim)
- Barrel exports for adapters and utilities
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- feat(playground): add primitive UI components
Add reusable primitive components copied from cloud repo:
- ChatMessage: renders user/assistant messages with tool call display
- ChatInput: textarea with model/computer selectors
- ToolCallsGroup: expandable tool call viewer with screenshots
- VNCViewer: memoized iframe for VNC display
- ThinkingIndicator: animated thinking state with scrambled text
- ThinkingCompleteAnimation: completion animation
- ScrambledText: typewriter effect component
Also add utilities:
- cn: tailwind class merging (clsx + tailwind-merge)
- processMessagesForRendering: groups messages and tool calls
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- feat(playground): add state management, hooks, and composed components
Add context providers, hooks, and composed components for the playground:
Context:
- PlaygroundContext: Global state types and context definitions
- PlaygroundProvider: Manages chats, computers, models via adapters
- ChatProvider: Per-chat state with message processing
Hooks:
- usePlayground: Access playground context (adapters, state, dispatch)
- useChat/useChatDispatch: Per-chat state access
- useAgentRequest: Agent loop with abort/retry handling
- Helper hooks: useActiveChat, useIsChatGenerating, etc.
Composed Components:
- ChatPanel: Main chat interface with model/computer selection
- ChatList: Chat sidebar with create/delete functionality
- ComputerList: Computer sidebar with status display
Modals:
- SettingsModal: Placeholder settings dialog
- CustomComputerModal: Add custom computer dialog
Main Component:
- Playground: Composition component with slot support for customization
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- feat(playground): add link:global convenience script
Adds a convenience script for developers to register the playground
package globally for cross-repo development with the cloud repo.Usage: pnpm link:global
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- feat(playground): add trajectory viewer, modals, and telemetry
Add components for viewing and exporting agent trajectories:
- TrajectoryViewer: Replay agent actions with cursor animations
- ExportTrajectoryModal: Export trajectories as ZIP files
- ReplayTrajectoryModal: In-browser trajectory replay
- Modal and Button UI components
Add telemetry integration:
- TelemetryProvider with PostHog
- usePlaygroundTelemetry hook for tracking events
Add trajectory utilities:
- inferRuns: Extract runs from message arrays
- TrajectoryRun type definitions
New dependencies: posthog-js, @radix-ui/react-slot, class-variance-authority
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
- feat(playground): add cloud-compatible components and local example
Components:
- Add PlaygroundContent and PlaygroundLayout for cloud integration
- Add ChatContent, ChatArea, ChatSidebar components
- Add VMStatusBanner, VNCOverlayPanel, DeferredChatsLoader
- Add UI primitives: dialog, dropdown-menu, select, tooltip, skeleton
- Add CountdownTimer for request timing display
Local example:
- Add examples/local with Vite setup for standalone testing
- Support API key configuration via settings modal
- Enable local development without cloud infrastructure
Improvements:
- Export ChatProvider for nested usage in cloud route
- Add proper TypeScript exports for all new components
- Update telemetry provider with simplified interface
Co-Authored-By: Claude Sonnet 4.5 (1M context) noreply@anthropic.com
- ci(playground): add npm release automation
Add release infrastructure for @trycua/playground:
- .bumpversion.cfg for version management
- cd-ts-playground.yml workflow triggered by npm-playground-v* tags
- Add npm/playground to release-bump-version.yml options
To publish:
- First release: manually trigger cd-ts-playground workflow
- Future releases: use bump version workflow with npm/playground
Co-Authored-By: Claude Opus 4.5 noreply@anthropic.com
-
fix api key issues, toast errors, improve telemetry callbacks
-
fix(playground): fix VNC iframe not updating when VM changes
The VNC iframe was not updating when switching VMs from the dropdown due to
three issues:-
Iframe not remounting: Browsers don't always reload iframe content when
only the src attribute changes. Added key={src} to force React to remount
the iframe when the URL changes. -
State sync mismatch: The Select dropdown used selectedComputer from chat
state while the VNC viewer used currentComputerId from playground state.
Updated ChatContent to prefer currentComputerId from playground state as
the source of truth, ensuring both stay in sync. -
Missing state dispatch: ChatPanel and EmptyState weren't dispatching
SET_CURRENT_COMPUTER to playground state when the computer changed.
Added the dispatch calls to keep playground state updated.
Changes:
- Add key={src} to iframe elements in VNCIframe and VNCViewer
- Sync Select dropdown with playground state's currentComputerId
- Dispatch SET_CURRENT_COMPUTER in ChatPanel and EmptyState handlers
- feat(playground): add renderThemeToggle prop for animated theme switching
- Add renderThemeToggle prop to PlaygroundLayout and PlaygroundContent
- Allows consumers to provide custom animated theme toggle buttons
- Falls back to default button if not provided
Co-Authored-By: Claude Sonnet 4.5 (1M context) noreply@anthropic.com
Co-authored-by: Claude Opus 4.5 noreply@anthropic.com
下载附件