[Feat] PWA native mobile UI overhaul with gesture support and device identity fix#183
Merged
[Feat] PWA native mobile UI overhaul with gesture support and device identity fix#183
Conversation
…ntegration Complete implementation of @clawwork/pwa — an offline-first Progressive Web App mobile companion for ClawWork desktop. Architecture: - Service Worker precaches entire app shell (Workbox generateSW) - Zero runtime HTTP requests; all data flows through WebSocket - IndexedDB persistence via idb (5 object stores: identity, gateways, tasks, messages, preferences) - Port-based DI matching core's PlatformPorts interface Infrastructure: - BrowserGatewayClient: full WS protocol with Ed25519 device auth, structured debug logging, request tracking, exponential backoff reconnect - Port adapters: PersistencePort, GatewayTransportPort, SettingsPort, NotificationsPort — all wired through lazy Proxy pattern - Core store instantiation with ChatComposer bridge for circular deps - compactSession/resetSession bypass port adapter (matches desktop pattern) Security: - MarkdownContent: restricted allowedElements, input limited to checkbox, explicit javascript:/data: href guard, skipHtml enabled - QR payload validation with typed schema and auth mode checks - Device identity via Web Crypto Ed25519 (non-extractable keys) Quality: - ARIA labels on all interactive elements, focus traps on drawer/dialog, touch targets >= 44px, aria-live regions scoped to streaming content - All user-facing strings via i18next t() keys - Structured debug events (error/warn in prod, debug in dev only) - syncSessions resilient to per-client failures (continues, not aborts) - getDb() uses promise singleton to prevent concurrent initialization race - ChatInput restores text on send failure - QrScanner: mediaDevices guard, metadata race fix, error backoff Desktop changes: - PairMobileDialog: QR code generation with freshly minted Ed25519 identity - GeneralSection: pair mobile device button - theme.css: --surface-qr-bg semantic token - i18n: pairing keys added to all 8 locales Config: - Cloudflare Pages: immutable asset caching, must-revalidate index.html - Vite: vendor/markdown/motion chunk splitting, conditional basicSsl - Core: PersistedTask extended with 6 optional fields (model, tokens, etc.) - knip, e2e playwright, check-ui-contract updated for pwa workspace
…identity fix - OLED dark theme, pill input bar, user message bubbles, clean assistant layout - Swipe gestures: edge-swipe to open drawer, drag-to-dismiss bottom sheets - Settings sheet with theme toggle and 8-language i18n support - Authorization waiting screen with reconnect button after QR pairing - Fix device identity: separate auth identity per device, share scope ID for session filtering - Fix QR payload: encode auth mode properly (token/password/pairingCode) - Fix PWA icons: replace placeholder with desktop claw logo - Fix touch-action on bottom sheets so buttons are tappable - Desktop: fix PairMobileDialog UI contract violations, wire getDeviceIdentity IPC
Contributor
|
Hi @samzong, DetailsInstructions for interacting with me using comments are available here. |
This was referenced Mar 26, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Complete visual and functional overhaul of the PWA mobile companion. Transforms the generic web app into a native iOS chat app feel (ChatGPT-style) while fixing critical device identity, pairing, and i18n bugs.
Type of change
[Feat]new feature[Fix]bug fix[UI]UI or UX changeWhy is this needed?
The PWA was functionally complete but looked like a generic web app. Multiple bugs blocked real-world usage: shared device identity caused desktop disconnection, QR pairing auth mode was lost, settings button was non-functional, icons were placeholders, and i18n only had English.
What changed?
useDragControlsauthMode(m,t,p,cfields) in QR payload instead of sending everything as a tokenBrowserGatewayClient.reconnect()method resets attemptstouchAction: manipulation/pan-yto bottom sheet children to prevent framer-motion drag from swallowing tap eventsgetDeviceIdentityIPC handlerArchitecture impact
getDeviceIdentity, main registers IPC handler, desktop renderer generates QR with scope ID, PWA renderer consumes itdocs/architecture-invariants.md: QR payload format changed (v1dfield removed,sscope ID added,gentries gainm/p/cfields)qr-decode.tsvalidates new format. Old QR codes withoutsfield still work (PWA falls back to own device ID).Linked issues
close #97
close #5
Validation
pnpm lintpnpm testpnpm check:ui-contractpnpm typecheckCommands, screenshots, or notes:
Screenshots or recordings
N/A — mobile-only UI changes, requires device testing.
Token changes:
--bg-primaryto#000000,--bg-secondaryto#171717, shadows tonone, new--input-bar-bgand--user-bubble-bgtokens. All via CSS variables, no hardcoded values.touch-actionoverrides on bottom sheet children to restore tappability inside framer-motion drag containers.Release note
Checklist
[Feat],[Fix],[UI],[Docs],[Refactor],[Build], or[Chore]