Mobile: ClawWork Mobile Client

[yankay]

Background

ClawWork is currently an Electron desktop client (three-column layout), macOS only. To allow users to check task progress, browse AI artifacts, and send messages on the go, we need a mobile client.

Goal

Build a ClawWork mobile app for iOS and Android with the following core experiences:

• Task list — Grouped by status (Active / Completed / Archived)
• Chat interaction — Send messages, view Agent streaming replies, tool call cards
• Artifact browsing — View AI-generated file artifacts with code/text/image preview
• Progress tracking — View task progress steps (checklist)
• Real-time sync — Receive events via Gateway WebSocket in real time

Technical Approach (To Be Discussed)

Option A: React Native

• Reuse @clawwork/shared types and protocol definitions
• Build with React Native + Expo
• Pros: Consistent with existing React tech stack, low learning curve for the team
• Cons: Slightly less native feel compared to Swift/Kotlin

Option B: Responsive Web App (PWA)

• Extract the renderer portion into a standalone Web App with responsive layout
• Pros: Highest code reuse, no separate app release needed
• Cons: Limited offline capability, restricted push notifications

Option C: Flutter

• Separate tech stack, UI layer needs to be reimplemented
• Pros: Good native performance, single codebase for both platforms
• Cons: Disconnected from the existing TypeScript ecosystem

Mobile Layout Design

The desktop three-column layout needs to be adapted for mobile:

1. Task List Screen — Full-screen task list (maps to LeftNav)
2. Chat Screen — Full-screen chat interface (maps to MainArea), top nav bar to go back
3. Details Screen — Bottom sheet or separate page for Progress / Artifacts (maps to RightPanel)

Navigation: Stack Navigation (Task List → Chat → Details)

Open Questions

• Decide on technical approach (A / B / C)
• Mobile authentication method (Gateway connection params)
• Offline / weak network strategy
• Push notifications (new messages, task completion)
• File preview adaptation for mobile
• Package organization in the monorepo (add packages/mobile?)

Priority

P2 — Start after desktop Phase 4 is complete

Related

• Current architecture: see CLAUDE.md
• Gateway WebSocket protocol: see type definitions in @clawwork/shared