Add MōDevice peripherals configuration demo - #1
Merged
Conversation
…Stack to handle device updates
…ction status display
…r state management
…ing and error messaging
There was a problem hiding this comment.
Pull request overview
This PR adds a complete “MōDevice” reference application demonstrating a full MōBrowser stack: a React renderer, a TypeScript main process, and a simulated native (C++) device backend, including IPC/RPC schemas, UI flows, and packaging/CI workflows.
Changes:
- Introduces a full renderer UI for device discovery, pairing/removal, and per-device configuration (mouse + keyboard), plus app settings.
- Adds a native C++ simulated device stack exposed via MōBrowser native RPC, with a main-process bridge that persists paired devices and settings.
- Adds build tooling/config (Vite/TS/Tailwind/PostCSS/ESLint), release/check GitHub Actions workflows, and documentation.
Reviewed changes
Copilot reviewed 59 out of 79 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Vite configuration for main/renderer builds. |
| tsconfig.node.json | TypeScript project config for Vite config typing. |
| tsconfig.json | TypeScript config for main + renderer sources. |
| tailwind.config.js | Tailwind theme tokens and plugin setup. |
| src/renderer/proto/devices.proto | Renderer-side IPC schema for devices/settings. |
| src/renderer/proto/app.proto | Renderer-side IPC schema for app settings/navigation. |
| src/renderer/main.tsx | React entrypoint mounting <App />. |
| src/renderer/lib/utils.ts | Shared styling utilities and class helpers. |
| src/renderer/lib/use-carousel.ts | Hook for device carousel scrolling/measurement. |
| src/renderer/index.html | Renderer HTML shell. |
| src/renderer/index.css | Tailwind base/theme variables and utilities. |
| src/renderer/gateway/settings.ts | Renderer IPC gateway for app settings + open-device stream. |
| src/renderer/gateway/devices.ts | Renderer IPC gateway for device list/settings operations. |
| src/renderer/components/ui/toggle.tsx | Shared toggle component wrapper (Radix). |
| src/renderer/components/ui/toggle-group.tsx | Shared toggle-group wrapper (Radix). |
| src/renderer/components/switch.tsx | Accessible switch control component. |
| src/renderer/components/settings/settings-view.tsx | Settings screen UI and controls. |
| src/renderer/components/modal.tsx | Shared modal dialog component (HTML <dialog>). |
| src/renderer/components/home/home.tsx | Home/devices screen with carousel and actions. |
| src/renderer/components/home/add-device-dialog.tsx | Pairing/discovery modal flow. |
| src/renderer/components/device/remove-device-dialog.tsx | Removal confirmation modal flow. |
| src/renderer/components/device/mouse-editor.tsx | Mouse settings editor UI. |
| src/renderer/components/device/mouse-device.ts | Mouse presentation + defaults/mapping. |
| src/renderer/components/device/keyboard-editor.tsx | Keyboard settings editor UI. |
| src/renderer/components/device/keyboard-device.ts | Keyboard presentation + effects/mapping. |
| src/renderer/components/device/editor-controls.tsx | Shared editor controls (sliders, radios, binding editor). |
| src/renderer/components/device/device-view.tsx | Per-device screen composition (art + editor). |
| src/renderer/components/device/device-presentation.ts | Device-type presentation selection logic. |
| src/renderer/components/device/device-info.tsx | Device info panel and removal affordance. |
| src/renderer/components/device/controls.ts | Action label mapping + binding lookup. |
| src/renderer/components/device/control-editor.tsx | Editor switchboard by device type/segment. |
| src/renderer/components/device-status.tsx | Connection/battery indicators + accessibility labels. |
| src/renderer/components/art/mouse-art.tsx | Mouse artwork rendering and interactive callouts. |
| src/renderer/components/art/keyboard-art.tsx | Keyboard artwork, lighting effects, and selectable keys. |
| src/renderer/components/art/device-art.tsx | Device-art selection by modelId (mouse/keyboard). |
| src/renderer/App.tsx | Screen routing/state, theme application, focus restoration. |
| src/native/proto/events.proto | Native-to-main callback service definition. |
| src/native/proto/devices.proto | Native RPC schema for device stack operations. |
| src/native/main.cc | Native entrypoint wiring up the device stack service. |
| src/native/device_stack.h | Simulated device stack interface and storage. |
| src/native/device_stack.cc | Simulated devices, pairing/removal, settings persistence behavior. |
| src/native/device_service.h | Native RPC service registration interface. |
| src/native/device_service.cc | Native RPC service implementation + change event emission. |
| src/main/updates.ts | Main-process update check/download/restart flow. |
| src/main/settings.ts | Main-process preferences, theme/login settings, low-battery notifications. |
| src/main/menu.ts | macOS app menu + About dialog linking to repo. |
| src/main/index.ts | Main-process bootstrapping and window creation. |
| src/main/devices.ts | Main-process bridge: IPC service + native stack sync + persistence. |
| README.md | Demo documentation, structure, and extension guidance. |
| postcss.config.js | PostCSS config for Tailwind processing. |
| package.json | Project scripts/dependencies/tooling metadata. |
| mobrowser.conf.json | MōBrowser app configuration and packaging settings. |
| LICENSE | MIT license text. |
| eslint.config.mjs | ESLint configuration for TS/React/hooks. |
| components.json | shadcn/ui component tooling configuration. |
| CMakeLists.txt | Native module CMake build configuration for MōBrowser. |
| CLAUDE.md | Points to AGENTS instructions. |
| assets/entitlements.plist | macOS entitlements used for signing/notarization. |
| AGENTS.md | Agent/build/verification guidance for this repo. |
| .gitignore | Ignores build outputs, env files, and generated artifacts. |
| .github/workflows/release.yml | Release build/sign/package + draft GitHub Release workflow. |
| .github/workflows/check.yml | CI workflow to generate, lint, typecheck, and build. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
vladimir-ikryanov
approved these changes
Aug 4, 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
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.
This PR introduces a reference application showing how MōBrowser can power modern configuration software for mice and keyboards.
The demo connects an interactive React interface, a TypeScript main process, and a simulated C++ device stack. It provides a complete application flow without requiring real hardware.
Highlights
Issue: https://github.com/TeamDev-IP/Marketing/issues/910