Lucas/onboarding browser activity

[lukitasxue]

Summary

This PR is stacked on top of lucas/onboarding.

Please review the base onboarding PR first, then review this PR.

This PR adds a new Browser Activity onboarding step, moves browser page rules into shared defaults, connects them to the focus environment settings hook, and cleans up camera lifecycle/comments.

Review order

Base PR first:

lucas/onboarding -> main

This PR second:

lucas/onboarding-browser-activity -> lucas/onboarding

This PR should only show the follow-up browser activity and cleanup work. If GitHub shows the whole onboarding implementation, the PR base is probably wrong.

What changed

New browser activity onboarding screen

electron/src/renderer/components/onboarding/BrowserActivitySelectionStep.tsx

Adds a new onboarding step for common websites/pages.

This screen lets the user mark browser activity as allowed or blocked.

Examples:

• YouTube
• YouTube Music
• Spotify Web
• WhatsApp Web
• Email
• Streaming services
• AI tools
• Social media
• Shopping

Important: this does not detect websites yet. It only lets the user configure rules that can later be matched against the active browser window title.

For example:

"YouTube - Google Chrome"

can later match:

["youtube"]

Shared browser activity rules

electron/src/shared/browserActivity/commonBrowserActivityRules.ts

Adds the default browser activity rule catalogue.

This is separate from commonApps.ts because browser activity rules are not installed desktop programs.

It includes:

• Rule id
• Label
• Description
• Match text
• Category
• Default status

Example distinction:

commonApps.ts
= installed desktop apps, like VS Code, Discord, Steam

commonBrowserActivityRules.ts
= websites/pages, like YouTube, Gmail, Netflix, ChatGPT

Focus environment settings integration

electron/src/renderer/hooks/useFocusEnvironmentSettings.ts

Updates the settings hook so it now owns both:

• Desktop app rules
• Browser activity rules

It now exposes:

• Blocked browser activity rules
• Flexible browser activity rules
• Browser activity rule status updater

The browser activity rules are saved in the same localStorage object:

taskmaster:focusEnvironmentSettings

This keeps the focus environment settings in one place.

Onboarding flow update

electron/src/renderer/pages/OnboardingPage.tsx

Adds the Browser Activity screen into the onboarding flow.

Updated flow:

Welcome -> Camera setup -> Desktop app whitelist -> Browser activity -> Distraction options -> Menu

Browser activity UI styling

electron/src/renderer/index.css

Adds styling for the new browser activity screen.

The layout was changed to a single-column list because website descriptions need more horizontal space than desktop app names.

Camera lifecycle cleanup

electron/src/renderer/hooks/useCameraDevices.ts

Improves the camera lifecycle so the preview stream is stopped when the camera setup step unmounts.

Expected behaviour:

Welcome:
camera off

Camera setup:
camera on

Continue to desktop app whitelist:
camera turns off after the transition

Back to camera setup:
camera turns on again

Because onboarding uses an exit animation, the camera may stay on briefly during the transition before the previous screen fully unmounts.

Camera setup comments and cleanup

electron/src/renderer/components/onboarding/OnboardingCameraSetup.tsx

Adds clearer comments and makes the video preview cleanup more explicit.

General comments and structure cleanup

Adds file headers and higher-level comments to make the onboarding code easier for new contributors to understand.

Suggested review focus

Please focus on:

1. BrowserActivitySelectionStep.tsx

   • UI structure
   • Whether browser activity rules are presented clearly
   • Whether toggles update the hook correctly

2. commonBrowserActivityRules.ts

   • Whether the default website groups make sense
   • Whether grouped rules like Email, Streaming, and AI tools are reasonable

3. useFocusEnvironmentSettings.ts

   • Whether app rules and browser activity rules are stored cleanly together
   • Whether the hook is still understandable with the added sections

4. OnboardingPage.tsx

   • Whether the new onboarding step is wired correctly

5. useCameraDevices.ts

   • Whether camera cleanup on unmount is safe and clear

Notes

This PR does not implement real browser tab detection yet.

For the MVP, browser activity will later be estimated from the active browser window title. A future browser extension can replace that with accurate tab URL detection.

[rxv801]

Should fix soon:

• ipc-handlers.ts — duplicate import { ipcMain } from 'electron' (build/lint risk)
• Remove leftover debug console.logs — detectCommonWindowsApps.ts (one marked "remove later"), ipc-handlers.ts, preload/index.js

Confirm / clarify:

• preload/index.ts deleted, raw index.js committed (skips type-check, uses CJS in an ESM app) — intentional?
  -- shared/protocol.ts looks deleted — intended?
• detectCommonWindowsApps is Windows-only + detects installed (not running) apps — flag as cross-platform / runtime-detection

overall seems fine to me