Largs Hub

More screenshots

Juggling a dozen browser tabs for the apps you use all day is noisy and easy to lose. Largs Hub gives each web app a dedicated home in a single, distraction-free window — with real unread badges, isolated logins, and a native desktop feel. It's fully open source, stores everything locally, and has no account, telemetry, or subscription.

Easiest way — one click:

That link always gives you the newest version. It needs 64-bit Windows 10 or later. Once it downloads:

1. Open the downloaded Largs Hub Setup.exe.
2. If Windows shows a "Windows protected your PC" prompt, click More info → Run anyway (this appears because the app isn't code-signed yet).
3. Follow the installer — that's it.

If the installer won't run: Windows marks files downloaded from the internet, and SmartScreen or your antivirus may block the installer, sometimes without showing Run anyway. Remove the mark instead, either way:

• Right-click Largs Hub Setup.exe → Properties, tick Unblock at the bottom of the General tab, and click OK.

• Or run this in PowerShell, from the folder you downloaded it to:

  Unblock-File -Path ".\Largs Hub Setup.exe"

Then open the installer again. You only need to do this once: in-app updates are downloaded by the app itself and install without the prompt.

Prefer to see all versions and release notes? Browse the Releases page. The installer is Largs Hub Setup.exe (NSIS), and it keeps itself up to date in-app.

It needs macOS 13 (Ventura) or later. Pick the build for your Mac:

• Apple Silicon (M1 and later): ⬇️ Largs-Hub-arm64.dmg
• Intel: ⬇️ Largs-Hub-x64.dmg

Once it downloads:

1. Open the .dmg and drag Largs Hub into Applications.
2. Open Largs Hub from Applications. The app isn't notarized by Apple yet, so macOS blocks it the first time. Go to System Settings → Privacy & Security, scroll down and click Open Anyway next to the Largs Hub message. (On macOS 14 and earlier you can right-click the app and choose Open instead.)

If macOS says "Largs Hub" Not Opened ("Apple could not verify 'Largs Hub' is free of malware…"), click Done, not Move to Trash. Then either use Open Anyway as in step 2, or run this once in Terminal:

xattr -dr com.apple.quarantine "/Applications/Largs Hub.app"

This removes the "downloaded from the internet" flag, so the app opens normally. You only need to do this once. In-app updates download without that flag, so they won't hit this dialog again.

When an update is available, the app downloads it, closes, replaces the old version in Applications and reopens, the same as on Windows. If it can't replace itself (for example, it's still running from the .dmg, or you don't have permission to change the Applications folder), it opens the new .dmg instead so you can drag Largs Hub into Applications.

Linux: There is no prebuilt Linux download yet. The packaging config includes an .AppImage target, so you can build it from source, but it's unofficial and untested.

1. Launch Largs Hub.
2. Click Add Your First Service (later, the Home button at the top of the sidebar brings you back to Add Service).
3. Pick a preset, or choose Custom and enter a name and the web app's address (e.g. https://mail.google.com), then save.
4. Sign in once. Your session is remembered and isolated from every other service.

Right-click a service in the sidebar for its options: enable, blur when inactive and privacy mode; a Permissions section with Notifications, Sound, Microphone and Camera; then edit, reload, clear data and remove. Microphone and Camera are separate switches. Both start on for services with calls (Messenger, WhatsApp, Slack, Discord, Telegram, Gmail and Google Chat) and off for everything else, so you can, for example, allow a service your microphone but not your camera. Either way, only the service's own pages can use them, never a sign-in page or embedded content from another site. App-wide settings are behind the gear icon in the title bar.

Report an issue (Changelog page) needs a GitHub personal access token, saved once in Settings → GitHub → GitHub token. It works the same on Windows and macOS. To create one:

1. On github.com, open Settings → Developer settings → Personal access tokens → Fine-grained tokens → Generate new token.
2. Set Resource owner to devlargs and Repository access to Only select repositories → largs-hub.
3. Under Permissions, set Issues and Contents to Read and write. Contents is where pasted images go: GitHub's API can't attach files to an issue, so each image is committed to an issue-images branch and linked from the issue.
4. Paste the token into Largs Hub and click Save. It's checked with GitHub, then stored encrypted by the system (Windows DPAPI or the macOS Keychain) and only ever used by the app's main process.

Repeat for each app you want in your workspace.

• Node.js 24.21.0, exactly. It's pinned in .nvmrc (nvm use or fnm use picks it up) and in package.json's engines, and .npmrc sets engine-strict, so npm install refuses to run on any other version. CI uses the same version.
• npm
• To package the macOS app: a Mac (the build ad-hoc signs the bundle with codesign)

git clone https://github.com/devlargs/largs-hub.git
cd largs-hub
npm install

npm run dev

Starts the Vite dev server, the Electron TypeScript watcher, and Electron itself (with hot reload) concurrently.

Windows packaging note: If you hit symlink errors during electron:build, enable Developer Mode in Settings → System → For developers.

macOS packaging note: electron:build on a Mac produces both DMGs (Apple Silicon and Intel). Releases build the Windows installer and both DMGs in GitHub Actions (release.yml).

• Electron 44 — desktop shell with a layered WebContentsView architecture. A weekly workflow (electron-support.yml) fails once the Electron major drops out of Electron's supported window
• React 19 + TypeScript — renderer UI, fully typed across main/preload/renderer
• Vite — dev server and bundler
• Tailwind CSS 4 — styling with Catppuccin-style theme variables
• Zustand — lightweight renderer state (notification counts)
• electron-store — local persistence for services and preferences
• electron-builder — packaging (NSIS installer on Windows, DMG on macOS)
• Vitest + ESLint + Prettier — testing and code quality, run in CI on every push and PR

Updates don't use electron-updater: electron/updater/ checks GitHub Releases itself and runs the installer (Windows) or swaps the app bundle in place (macOS, electron/macUpdate.ts), since neither build is code-signed.

Largs Hub is built on a three-layer WebContentsView stack hosted in a single frameless window:

• UI view — the React app (sidebar, titlebar, modals, settings), rendered transparently over the full window.
• Service views — one WebContentsView per enabled service, each with its own persist:service-<id> session partition for isolated logins. Only the active one is visible.
• Overlay views — the link preview, layered on top. (Messenger calls open in their own window.)

The main process owns all persistence, native menus, notification detection (via pluggable per-service badge adapters), download handling, and the auto-updater. The renderer holds only runtime UI state and communicates through a typed IPC bridge (a handler in electron/ipc/ or electron/window/ ⇄ the preload.ts API ⇄ the src/types.ts interface). Payload types are declared once, in electron/shared/types.ts.

largs-hub/
├── electron/                 # Main process & preload
│   ├── main.ts               # Entry point: module wiring and app lifecycle
│   ├── window/               # The window, UI layer, link-preview overlay and window IPC
│   ├── preload.ts            # Typed contextBridge API
│   ├── serviceViews/         # Service-view creation, switching, hibernation, calls, overlays
│   ├── store.ts              # electron-store schema & migrations
│   ├── downloads.ts          # Download session handling
│   ├── downloadToast.ts      # Download-complete toast
│   ├── updater/              # GitHub Releases auto-updater
│   ├── github/               # Report an issue: token storage, issue and image upload
│   ├── macUpdate.ts          # In-place app replacement on macOS
│   ├── notificationCounts.ts # Badge state, Windows taskbar badge
│   ├── tray.ts               # Tray / menu bar icon and menu
│   ├── messengerAutomation/  # Messenger automation scheduler, IPC & injected scripts
│   ├── badge-adapters/       # Per-service unread-count detection
│   ├── ipc/                  # services, settings, security & list-group IPC handlers
│   └── shared/               # Types and layout constants shared with the renderer
├── src/                      # React renderer
│   ├── components/           # UI components, with per-feature folders (settings/, sidebar/, …)
│   ├── hooks/                # React hooks, incl. the ones that mirror main-process state
│   ├── lib/                  # Pure renderer helpers
│   ├── store/                # Zustand stores
│   ├── types.ts              # The window.electronAPI interface
│   ├── App.tsx
│   └── index.css
├── scripts/                  # Build helpers (macOS ad-hoc signing, changelog stamping, Electron support check)
├── test/                     # Vitest unit tests
└── assets/                   # App & service icons

Contributions are welcome!

1. Fork the repository
2. Create a feature branch (git checkout -b feat/your-feature)
3. Make your changes
4. Verify locally: npm run typecheck, npm run lint, npm run format:check, and npm test (CI runs all four)
5. Commit with a descriptive message (git commit -m "feat: add your feature")
6. Push and open a Pull Request

• Follow the existing style — TypeScript throughout, functional React components, Tailwind + CSS-variable theming.
• Keep the main / preload / renderer layers cleanly separated; add IPC in all three places (a main-process handler, preload.ts, src/types.ts).
• Make changes work on both Windows and macOS, or say why only one is affected.
• Keep PRs focused — one feature or fix each.
• Update CHANGELOG.md with a short, user-facing note for your change, and this README when the change affects what it describes.

MIT © Ralph Largo