Add Android mobile client using Expo React Native

README.md

@@ -54,6 +54,22 @@ OpenCode is also available as a desktop application. Download directly from the
 brew install --cask opencode-desktop
 ```
 
+### Mobile App (Android - EXPERIMENTAL)
+
+OpenCode is also available as a mobile application for Android using Expo React Native. This is an experimental port that allows you to connect to your OpenCode server and manage sessions on the go.
+
+To run the mobile app:
+
+```bash
+cd packages/mobile-expo
+npm install --no-workspaces
+npm start
+```
+
+Then scan the QR code with the Expo Go app on your Android device, or run on an Android emulator with `npm run android`.
+
+See [packages/mobile-expo/README.md](packages/mobile-expo/README.md) for more details.
+
 #### Installation Directory
 
 The install script respects the following priority order for the installation path:

packages/mobile-expo/.gitignore

@@ -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

packages/mobile-expo/.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+save-exact=false

packages/mobile-expo/ARCHITECTURE.md

@@ -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

packages/mobile-expo/App.tsx

@@ -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>
+  );
+}