Merge PR #332: Add Openpad mobile app

Author: shuv1337

bun.lock

@@ -22,7 +22,8 @@
       "packages/*",
       "packages/console/*",
       "packages/sdk/js",
-      "packages/slack"
+      "packages/slack",
+      "packages/mobile"
     ],
     "catalog": {
       "@types/bun": "1.3.9",
@@ -107,7 +108,9 @@
   ],
   "overrides": {
     "@types/bun": "catalog:",
-    "@types/node": "catalog:"
+    "@types/node": "catalog:",
+    "@types/react": "~19.1.10",
+    "react-native": "0.81.5"
   },
   "patchedDependencies": {
     "ghostty-opentui@1.3.7": "patches/ghostty-opentui@1.3.7.patch",

package.json

@@ -11,6 +11,7 @@ import type {
   SessionStatus,
   Todo,
 } from "@opencode-ai/sdk/v2/client"
+import { applyMessageEvent, type MessageStore } from "@opencode-ai/sdk/event-reducer"
 import type { State, VcsCache } from "./types"
 import { trimSessions } from "./session-trim"
 import { dropSessionCaches } from "./session-cache"
@@ -174,99 +175,41 @@ export function applyDirectoryEvent(input: {
       input.setStore("session_status", props.sessionID, reconcile(props.status))
       break
     }
-    case "message.updated": {
-      const info = (event.properties as { info: Message }).info
-      const messages = input.store.message[info.sessionID]
-      if (!messages) {
-        input.setStore("message", info.sessionID, [info])
-        break
+    case "message.updated":
+    case "message.removed":
+    case "message.part.updated":
+    case "message.part.removed":
+    case "message.part.delta": {
+      const currentStore: MessageStore = {
+        messages: input.store.message as Record<string, Message[]>,
+        parts: input.store.part as Record<string, Part[]>,
       }
-      const result = Binary.search(messages, info.id, (m) => m.id)
-      if (result.found) {
-        input.setStore("message", info.sessionID, result.index, reconcile(info))
-        break
+      const next = applyMessageEvent(currentStore, event)
+      if (!next) break
+      // Apply changed message lists to Solid store
+      for (const sessionID of Object.keys(next.messages) as string[]) {
+        if (next.messages[sessionID] !== currentStore.messages[sessionID]) {
+          input.setStore("message", sessionID, reconcile(next.messages[sessionID], { key: "id" }))
+        }
       }
-      input.setStore(
-        "message",
-        info.sessionID,
-        produce((draft) => {
-          draft.splice(result.index, 0, info)
-        }),
-      )
-      break
-    }
-    case "message.removed": {
-      const props = event.properties as { sessionID: string; messageID: string }
-      input.setStore(
-        produce((draft) => {
-          const messages = draft.message[props.sessionID]
-          if (messages) {
-            const result = Binary.search(messages, props.messageID, (m) => m.id)
-            if (result.found) messages.splice(result.index, 1)
-          }
-          delete draft.part[props.messageID]
-        }),
-      )
-      break
-    }
-    case "message.part.updated": {
-      const part = (event.properties as { part: Part }).part
-      const parts = input.store.part[part.messageID]
-      if (!parts) {
-        input.setStore("part", part.messageID, [part])
-        break
+      for (const sessionID of Object.keys(currentStore.messages) as string[]) {
+        if (!(sessionID in next.messages)) {
+          input.setStore(produce((draft) => { delete draft.message[sessionID] }))
+        }
       }
-      const result = Binary.search(parts, part.id, (p) => p.id)
-      if (result.found) {
-        input.setStore("part", part.messageID, result.index, reconcile(part))
-        break
+      // Apply changed part lists to Solid store
+      for (const messageID of Object.keys(next.parts) as string[]) {
+        if (next.parts[messageID] !== currentStore.parts[messageID]) {
+          input.setStore("part", messageID, reconcile(next.parts[messageID], { key: "id" }))
+        }
       }
-      input.setStore(
-        "part",
-        part.messageID,
-        produce((draft) => {
-          draft.splice(result.index, 0, part)
-        }),
-      )
-      break
-    }
-    case "message.part.removed": {
-      const props = event.properties as { messageID: string; partID: string }
-      const parts = input.store.part[props.messageID]
-      if (!parts) break
-      const result = Binary.search(parts, props.partID, (p) => p.id)
-      if (result.found) {
-        input.setStore(
-          produce((draft) => {
-            const list = draft.part[props.messageID]
-            if (!list) return
-            const next = Binary.search(list, props.partID, (p) => p.id)
-            if (!next.found) return
-            list.splice(next.index, 1)
-            if (list.length === 0) delete draft.part[props.messageID]
-          }),
-        )
+      for (const messageID of Object.keys(currentStore.parts) as string[]) {
+        if (!(messageID in next.parts)) {
+          input.setStore(produce((draft) => { delete draft.part[messageID] }))
+        }
       }
       break
     }
-    case "message.part.delta": {
-      const props = event.properties as { messageID: string; partID: string; field: string; delta: string }
-      const parts = input.store.part[props.messageID]
-      if (!parts) break
-      const result = Binary.search(parts, props.partID, (p) => p.id)
-      if (!result.found) break
-      input.setStore(
-        "part",
-        props.messageID,
-        produce((draft) => {
-          const part = draft[result.index]
-          const field = props.field as keyof typeof part
-          const existing = part[field] as string | undefined
-          ;(part[field] as string) = (existing ?? "") + props.delta
-        }),
-      )
-      break
-    }
     case "vcs.branch.updated": {
       const props = event.properties as { branch: string }
       if (input.store.vcs?.branch === props.branch) break

packages/app/src/context/global-sync/event-reducer.ts

@@ -0,0 +1,41 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.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
+
+# generated native folders
+/ios
+/android

packages/mobile/.gitignore

@@ -0,0 +1,146 @@
+# OpenPad
+
+A mobile client for [OpenCode](https://opencode.ai) - the AI coding assistant. Built with Expo and React Native.
+
+## Features
+
+- Connect to any OpenCode server
+- View and manage chat sessions
+- Send messages and receive AI responses in real-time
+- View tool usage (file reads, edits, bash commands, etc.)
+- Expandable tool blocks with input/output details
+- Image attachment support
+- Dark/light theme support
+- Live polling for real-time updates
+
+## Screenshots
+
+*Coming soon*
+
+## Requirements
+
+- Bun 1.3+
+- iOS Simulator (Mac) or Android Emulator, or physical device with Expo Go
+
+## Installation
+
+This package is part of the shuvcode monorepo. From the repository root:
+
+```bash
+bun install
+```
+
+Start the development server:
+
+```bash
+bun run --cwd packages/mobile start
+```
+
+4. Run on your device:
+   - **iOS Simulator**: Press `i` in the terminal
+   - **Android Emulator**: Press `a` in the terminal
+   - **Physical Device**: Scan the QR code with Expo Go app
+
+## Connecting to OpenCode
+
+1. Make sure you have an OpenCode server running (default: `http://localhost:9034`)
+2. If running on a physical device, use your machine's local IP address instead of `localhost`
+3. Enter the server URL in the connect screen and tap "Connect"
+
+## Project Structure
+
+```
+openpad/
+├── App.tsx                 # Main app entry point with navigation
+├── src/
+│   ├── components/         # Reusable UI components
+│   │   ├── GlassCard.tsx   # Glass morphism card component
+│   │   ├── Icon.tsx        # Icon wrapper for lucide-react-native
+│   │   └── Markdown.tsx    # Markdown renderer for messages
+│   ├── hooks/              # Custom React hooks
+│   │   ├── useOpenCode.ts  # OpenCode SDK hook (legacy)
+│   │   └── useTheme.ts     # Theme hook for dark/light mode
+│   ├── providers/          # Context providers
+│   │   └── OpenCodeProvider.tsx  # OpenCode client & state management
+│   ├── screens/            # App screens
+│   │   ├── ChatScreen.tsx      # Chat conversation view
+│   │   ├── ConnectScreen.tsx   # Server connection screen
+│   │   ├── SessionsScreen.tsx  # Sessions list
+│   │   └── SettingsScreen.tsx  # App settings
+│   └── theme/              # Theme configuration
+│       └── index.ts        # Colors, typography, spacing
+├── assets/                 # App icons and images
+└── package.json
+```
+
+## Tech Stack
+
+- **Expo SDK 54** - React Native development platform
+- **React Navigation** - Native stack navigation
+- **@opencode-ai/sdk** - OpenCode API client
+- **lucide-react-native** - Icon library
+- **expo-blur** - Blur effects for iOS
+- **react-native-markdown-display** - Markdown rendering
+
+## Contributing
+
+We welcome contributions! Here's how you can help:
+
+### Getting Started
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/my-feature`
+3. Make your changes
+4. Run TypeScript check: `bun run typecheck`
+5. Commit your changes: `git commit -m "feat: Add my feature"`
+6. Push to your fork: `git push origin feature/my-feature`
+7. Open a Pull Request
+
+### Commit Convention
+
+We follow [Conventional Commits](https://www.conventionalcommits.org/):
+
+- `feat:` - New features
+- `fix:` - Bug fixes
+- `docs:` - Documentation changes
+- `style:` - Code style changes (formatting, etc.)
+- `refactor:` - Code refactoring
+- `test:` - Adding or updating tests
+- `chore:` - Maintenance tasks
+
+### Code Style
+
+- Use TypeScript for all new code
+- Follow existing patterns in the codebase
+- Use functional components with hooks
+- Keep components small and focused
+- Use the theme system for colors and spacing
+
+### Areas for Contribution
+
+- UI/UX improvements
+- New features (voice input, image upload, etc.)
+- Performance optimizations
+- Bug fixes
+- Documentation improvements
+- Tests
+
+### Reporting Issues
+
+Found a bug or have a feature request? [Open an issue](https://github.com/R44VC0RP/openpad/issues) with:
+
+- Clear description of the problem or feature
+- Steps to reproduce (for bugs)
+- Expected vs actual behavior
+- Screenshots if applicable
+- Device/OS information
+
+## License
+
+MIT
+
+## Acknowledgments
+
+- [OpenCode](https://opencode.ai) - The AI coding assistant this app connects to
+- [Expo](https://expo.dev) - React Native development platform
+- [Lucide](https://lucide.dev) - Beautiful icons

packages/mobile/README.md

@@ -0,0 +1,45 @@
+{
+  "expo": {
+    "name": "OpenPad",
+    "slug": "openpad",
+    "version": "1.0.0",
+    "scheme": "openpad",
+    "orientation": "default",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.openpad.app"
+    },
+    "android": {
+      "package": "com.openpad.app",
+      "softwareKeyboardLayoutMode": "resize",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#131010"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "favicon": "./assets/favicon.png",
+      "bundler": "metro"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "Allow OpenPad to access your photos so you can attach images to chats.",
+          "cameraPermission": "Allow OpenPad to use your camera so you can capture images to attach to chats."
+        }
+      ]
+    ]
+  }
+}