UI Screens

BrowseGenius ships with multiple chrome-extension surfaces under src/pages/. Each screen targets a specific workflow, from capture to monitoring. Use this guide to understand where each page lives in the codebase and how it behaves.

Popup (src/pages/Popup)

• Entry file: Popup.tsx renders the shared <App /> component from src/common/App.tsx.
• Purpose: Primary control centre for testers. Includes the Capture wizard, AI phase discovery, eval management, test generation, suite execution controls, and report downloads.
• Key subcomponents:
  • CapturePhase – captures up to five screens, manages saved evals, and handles eval selection.
  • SavedPlansSection – displays saved evals with "Select Eval" and quick-run actions.
  • DiscoveryPhase – AI-powered phase discovery identifying navigation sections.
  • PlanPhase – displays discovered phases with per-phase "Generate Tests" buttons (up to 10 tests per phase).
  • ExecutePhase – runs tests across all phases or per-phase with real-time status.
  • ReportsPhase – displays test results with summary stats and download options.
  • SetAPIKey and ModelDropdown – manage OpenAI/OpenPipe credentials and model selection.
• Hotkeys: Cmd+Shift+Y / Ctrl+Shift+Y opens the popup.

DevTools Panel (src/pages/Devtools)

• Entry file: index.js registers a DevTools panel labelled BrowseGenius.
• Purpose: Observability surface during test execution. The panel is populated by the same <App /> tree, giving parity with the popup while providing more real estate for logs and artifacts.
• Usage tips:
  • Open Chrome DevTools and switch to the BrowseGenius tab.
  • Monitor the GPT-4 action stream, inspect state via window.getState, and cross-check error toasts in the console.

Panel (src/pages/Panel)

• Entry file: Panel.tsx also renders <App />.
• Purpose: Hosts the extension inside a dedicated panel context (used when the popup is undocked). Functionally identical to the popup view, so code changes in App.tsx automatically propagate here.

Options Page (src/pages/Options)

• Entry file: Options.tsx (with index.jsx bootstrapping).
• Purpose: Placeholder page for Chrome’s “Options” link. Currently shows a minimal container ({title} Page). Extend this surface if you need a richer settings experience outside the popup (e.g., org-wide defaults, telemetry toggles).
• Styles: Options.css gives the page its basic layout.

New Tab Page (src/pages/Newtab)

• Entry files: Newtab.jsx + associated CSS/SCSS.
• Purpose: Development scaffold for an overridable new-tab experience. Today it mirrors the default React starter (logo, edit instructions, sample link). Replace this implementation if you want BrowseGenius to provide a custom new-tab dashboard.
• Note: The extension currently doesn’t register the new-tab override in manifest.json. To enable it, update the manifest’s chrome_url_overrides section.

Background Worker (src/pages/Background)

• Entry file: index.js, currently empty except for comments.
• Purpose: Service worker target for manifest V3. While not a visible screen, it’s the lifecycle hook that powers orchestrator tasks (src/background). Expand it when you need background listeners or alarms.

Content Scripts (src/pages/Content)

• Entry file: index.ts registers RPC watchers for DOM capture utilities.
• Purpose: Injected into web pages to annotate the DOM, support ripple effects, and service popup requests. Interaction happens via pageRPC.ts.
• Note: Although not a screen, this module underpins the capture experience; review it when troubleshooting DOM extraction issues.

Adding new screens

1. Scaffold under src/pages/<Name> with an index.(ts|js)x entry and HTML template.
2. Declare the surface in webpack.config.js and, if needed, update manifest.json.
3. Document the screen here so QA engineers know how to access it and what it does.

Keeping this guide up-to-date ensures contributors can navigate the extension quickly, understand ownership areas, and avoid duplicating UI work.