feat(playground): add device options configuration for Android/iOS #1485
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This commit implements device-specific configuration options in the playground UI, allowing users to customize device behavior such as keyboard handling and IME strategy. Changes: - Add device options state management with localStorage persistence - Create UI controls for Android-specific options (imeStrategy, autoDismissKeyboard, keyboardDismissStrategy, alwaysRefreshScreenInfo) - Create UI controls for iOS-specific options (autoDismissKeyboard) - Extend execution pipeline to pass deviceOptions from frontend to backend - Update agent.interface.options on the server side when deviceOptions are received - Optimize parameter flattening to avoid delete operator performance issues Technical implementation: - Frontend: Store device options in Zustand with localStorage sync - SDK: Include deviceOptions in remote execution adapter payload - Server: Update agent.interface.options to apply settings globally - This ensures all actions (including those called by aiAct) use the updated options Fixes #1282 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR adds device-specific configuration options to the Android/iOS playground, allowing users to customize device behavior through a settings UI. The implementation includes state management with Zustand, localStorage persistence, and automatic agent interface option updates.
- Added device option controls for Android (
imeStrategy,autoDismissKeyboard,keyboardDismissStrategy,alwaysRefreshScreenInfo) and iOS (autoDismissKeyboard) - Implemented state management with localStorage persistence for device options
- Updated server to automatically apply deviceOptions to agent.interface.options
- Modified parameter handling to flatten deviceOptions into action parameters
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/visualizer/src/utils/constants.tsx | Added tooltip constants for Android device options |
| packages/visualizer/src/types.ts | Added DeviceType type and deviceType field to UniversalPlaygroundConfig |
| packages/visualizer/src/store/store.tsx | Added Zustand state management for device options with localStorage persistence |
| packages/visualizer/src/hooks/usePlaygroundExecution.ts | Updated to extract device options from state and include them in SDK calls |
| packages/visualizer/src/component/universal-playground/index.tsx | Passed deviceType config to PromptInput component |
| packages/visualizer/src/component/prompt-input/index.tsx | Added deviceType prop and passed it to ConfigSelector |
| packages/visualizer/src/component/config-selector/index.tsx | Implemented conditional rendering of device-specific options based on deviceType |
| packages/playground/src/types.ts | Defined DeviceOptions interface and added to ExecutionOptions |
| packages/playground/src/server.ts | Added logic to update agent.interface.options when deviceOptions are received |
| packages/playground/src/common.ts | Implemented deviceOptions flattening into action parameters using object destructuring |
| packages/playground/src/adapters/remote-execution.ts | Added deviceOptions to request payload |
| apps/android-playground/src/components/playground-panel/index.tsx | Configured deviceType as 'android' |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+120
to
+125
| const deviceOptionsToSend = { | ||
| imeStrategy, | ||
| autoDismissKeyboard, | ||
| keyboardDismissStrategy, | ||
| alwaysRefreshScreenInfo, | ||
| }; |
There was a problem hiding this comment.
The deviceOptions object always includes all 4 Android-specific options (imeStrategy, autoDismissKeyboard, keyboardDismissStrategy, alwaysRefreshScreenInfo) regardless of the device type. This could be problematic for iOS devices which only support autoDismissKeyboard.
Consider conditionally building the deviceOptions object based on the device type:
const deviceOptionsToSend = deviceType === 'ios'
? { autoDismissKeyboard }
: { imeStrategy, autoDismissKeyboard, keyboardDismissStrategy, alwaysRefreshScreenInfo };This would require passing deviceType from the component config to this hook.
…round The universal playground app now detects the device type from the connected server's /interface-info API and displays device-specific configuration options accordingly. This ensures that iOS playground users can see and configure iOS device options (autoDismissKeyboard), while web users see no device-specific options. Related to #1282
…tions The previous implementation used a swipe down gesture at a fixed screen position (1/3 from top) which could accidentally click on search results or other UI elements that appeared after text input. Changes: - Use WDA's dismissKeyboard API as the primary method (more reliable) - Fall back to safer swipe gesture (from bottom up) if API fails - Increase wait time from 300ms to 500ms for UI stability - Update autoDismissKeyboard documentation to reflect default behavior Technical details: - WDA API tries common keyboard button names: return, done, go, search, etc. - Swipe fallback uses safer coordinates: from 90% height to 50% height - This prevents accidental taps on UI elements in the upper portion of screen Related to #1282
…and functionality
quanru
force-pushed
the
feat/android-playground-device-options
branch
from
e3924b9 to
e600c5a
Compare
yuyutaotao
approved these changes
Nov 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements device-specific configuration options in the Android/iOS playground, allowing users to customize device behavior through the settings UI.
Changes
Frontend Changes
imeStrategy,autoDismissKeyboard,keyboardDismissStrategy,alwaysRefreshScreenInfoautoDismissKeyboardBackend Changes
deviceOptionsin request payloadagent.interface.optionswhen receivingdeviceOptionsTechnical Implementation
The solution works by updating the device options at the agent level:
deviceOptionsto the playground server via SDKagent.interface.optionswith the new settingsaiAct) use the updated optionsThis approach ensures that device options work even for complex actions like
aiAct, which internally plans and executes multiple sub-actions.Test Plan
autoDismissKeyboard: falseprevents keyboard dismissal inaiActflowsScreenshots
N/A - Configuration options accessible via settings gear icon in playground
Fixes #1282
🤖 Generated with Claude Code