forked from anomalyco/opencode
-
Notifications
You must be signed in to change notification settings - Fork 0
Add Android mobile client using Expo React Native #1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draft
Draft
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
1a1f081
Initial plan
Copilot 952e38e
Add Expo React Native Android port for OpenCode
Copilot 39e77dc
Improve mobile app architecture and documentation
Copilot 0796fbc
Add comprehensive documentation and guides for mobile app
Copilot 4f1e502
Fix TypeScript type safety issues in mobile app
Copilot 2aab71e
Address final code review feedback
Copilot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
38 changes: 38 additions & 0 deletions
packages/mobile-expo/.gitignore
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| # Expo | ||
| .expo/ | ||
| dist/ | ||
| node_modules/ | ||
| npm-debug.* | ||
| *.jks | ||
| *.p8 | ||
| *.p12 | ||
| *.key | ||
| *.mobileprovision | ||
| *.orig.* | ||
| web-build/ | ||
|
|
||
| # Native | ||
| *.orig.* | ||
| *.jks | ||
| *.p8 | ||
| *.p12 | ||
| *.key | ||
| *.mobileprovision | ||
|
|
||
| # Metro | ||
| .metro-health-check* | ||
|
|
||
| # Debug | ||
| npm-debug.* | ||
| yarn-debug.* | ||
| yarn-error.* | ||
|
|
||
| # macOS | ||
| .DS_Store | ||
| *.pem | ||
|
|
||
| # local env files | ||
| .env*.local | ||
|
|
||
| # typescript | ||
| *.tsbuildinfo |
2 changes: 2 additions & 0 deletions
packages/mobile-expo/.npmrc
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| legacy-peer-deps=true | ||
| save-exact=false |
107 changes: 107 additions & 0 deletions
packages/mobile-expo/ARCHITECTURE.md
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| # OpenCode Mobile App Architecture | ||
|
|
||
| ## Overview | ||
|
|
||
| The OpenCode mobile app is an Android application built with Expo React Native that allows users to connect to an OpenCode server and manage coding sessions remotely. | ||
|
|
||
| ## Architecture | ||
|
|
||
| ### Client-Server Model | ||
|
|
||
| The mobile app follows the same client-server architecture as the desktop and web applications: | ||
|
|
||
| ``` | ||
| ┌─────────────────────┐ ┌──────────────────────┐ | ||
| │ Mobile App │ │ OpenCode Server │ | ||
| │ (Expo/RN) │ ◄─────► │ (packages/opencode)│ | ||
| │ │ HTTP │ │ | ||
| └─────────────────────┘ └──────────────────────┘ | ||
| ``` | ||
|
|
||
| ### Components | ||
|
|
||
| 1. **ServerContext**: Manages the connection to the OpenCode server | ||
| - Handles server URL configuration | ||
| - Tests connection health | ||
| - Provides API methods for fetching sessions and data | ||
|
|
||
| 2. **Navigation**: React Navigation stack navigator | ||
| - HomeScreen: Server connection and session list | ||
| - SessionScreen: View and interact with coding sessions | ||
| - SettingsScreen: App configuration and information | ||
|
|
||
| 3. **UI Components**: React Native components styled with StyleSheet | ||
| - Dark theme consistent with OpenCode branding | ||
| - Responsive layouts optimized for mobile screens | ||
|
|
||
| ## API Communication | ||
|
|
||
| The mobile app communicates with the OpenCode server via REST API endpoints: | ||
|
|
||
| - `GET /api/health` - Check server health | ||
| - `GET /api/session` - List all sessions | ||
| - `GET /api/session/{id}` - Get session details | ||
| - `POST /api/session/{id}/message` - Send message to session (planned) | ||
|
|
||
| ## Development Workflow | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| - Node.js 20+ | ||
| - Expo CLI | ||
| - Android Studio (for emulator) or physical Android device with Expo Go | ||
|
|
||
| ### Running the App | ||
|
|
||
| ```bash | ||
| cd packages/mobile-expo | ||
| npm install --no-workspaces | ||
| npm start | ||
| ``` | ||
|
|
||
| ### Building for Production | ||
|
|
||
| ```bash | ||
| # Install EAS CLI | ||
| npm install -g eas-cli | ||
|
|
||
| # Configure project | ||
| eas build:configure | ||
|
|
||
| # Build for Android | ||
| eas build --platform android | ||
| ``` | ||
|
|
||
| ## Known Limitations | ||
|
|
||
| - Currently read-only session viewing (writing messages not fully implemented) | ||
| - No terminal emulation (desktop feature) | ||
| - Limited file browsing | ||
| - iOS version not yet tested (should work but needs verification) | ||
|
|
||
| ## Future Enhancements | ||
|
|
||
| - [ ] Full WebSocket support for real-time updates | ||
| - [ ] Terminal emulation for mobile | ||
| - [ ] File browser and editor | ||
| - [ ] Offline mode | ||
| - [ ] Push notifications for session updates | ||
| - [ ] iOS App Store release | ||
| - [ ] Google Play Store release | ||
|
|
||
| ## Security Considerations | ||
|
|
||
| - Always use HTTPS when connecting to remote servers | ||
| - Server URL is stored in React Context (not persisted) | ||
| - No credentials are stored on the device | ||
| - Connection is established on-demand | ||
|
|
||
| ## Contributing | ||
|
|
||
| When adding features to the mobile app: | ||
|
|
||
| 1. Ensure consistency with desktop/web UX patterns | ||
| 2. Test on both Android emulator and physical device | ||
| 3. Consider mobile-specific UX patterns (touch, gestures, screen sizes) | ||
| 4. Keep the app lightweight and performant | ||
| 5. Follow React Native best practices |
51 changes: 51 additions & 0 deletions
packages/mobile-expo/App.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from 'react'; | ||
| import { StatusBar } from 'expo-status-bar'; | ||
| import { NavigationContainer } from '@react-navigation/native'; | ||
| import { createNativeStackNavigator } from '@react-navigation/native-stack'; | ||
| import { ServerProvider } from './src/contexts/ServerContext'; | ||
| import { HomeScreen } from './src/screens/HomeScreen'; | ||
| import { SessionScreen } from './src/screens/SessionScreen'; | ||
| import { SettingsScreen } from './src/screens/SettingsScreen'; | ||
| import type { RootStackParamList } from './src/types'; | ||
|
|
||
| const Stack = createNativeStackNavigator<RootStackParamList>(); | ||
|
|
||
| export default function App() { | ||
| return ( | ||
| <ServerProvider> | ||
| <NavigationContainer> | ||
| <Stack.Navigator | ||
| screenOptions={{ | ||
| headerStyle: { | ||
| backgroundColor: '#000', | ||
| }, | ||
| headerTintColor: '#fff', | ||
| headerTitleStyle: { | ||
| fontWeight: 'bold', | ||
| }, | ||
| contentStyle: { | ||
| backgroundColor: '#000', | ||
| }, | ||
| }} | ||
| > | ||
| <Stack.Screen | ||
| name="Home" | ||
| component={HomeScreen} | ||
| options={{ headerShown: false }} | ||
| /> | ||
| <Stack.Screen | ||
| name="Session" | ||
| component={SessionScreen} | ||
| options={{ title: 'Session' }} | ||
| /> | ||
| <Stack.Screen | ||
| name="Settings" | ||
| component={SettingsScreen} | ||
| options={{ title: 'Settings' }} | ||
| /> | ||
| </Stack.Navigator> | ||
| <StatusBar style="light" /> | ||
| </NavigationContainer> | ||
| </ServerProvider> | ||
| ); | ||
| } |
Oops, something went wrong.
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.