Product View: live embedded browser with a PostHog analytics overlay

[DanielVisca]

Problem

Product owners using PostHog Code have all the data about their product — events, errors, latency, sessions, PRs — but no way to see it on the product itself. Answering "is this button healthy? who uses it? what breaks for them? which PR touched it?" means hopping between the app, PostHog cloud, and GitHub.

Changes

A new Product tab: a live embedded browser showing your own site (or a local checkout, e.g. hogli start) with your PostHog project's analytics overlaid per element, and a one-click Investigate that starts an agent task seeded with everything the panel knows.

┌────────────────────────────────────────────────────────────────────┐
│ ◀ ▶ ⟳  [ https://posthog.com ]  [Inspect]  [Production ▾]  Data: … │
├──────────────────────────────────────────────┬─────────────────────┤
│                                              │  <selected element> │
│   YOUR LIVE SITE (WebContentsView)           │  Usage · 30d  ▂▄▆█  │
│                                              │  Errors (sessions)  │
│   ┌──────────────┐   halos + badges          │  Latency p50/95/99  │
│   │ Get started  │◄─ rendered in-page by     │  Network trace      │
│   └──────────────┘   an isolated preload     │  Sessions (replay)  │
│                                              │  Pull requests      │
│                                              │  [ Investigate ]    │
└──────────────────────────────────────────────┴─────────────────────┘

How it flows (page source and data source are decoupled — a localhost checkout can render production analytics):

preload (isolated world, closed shadow root)      main process                 PostHog cloud
  enumerate interactive elements ───────────────▶ ProductViewService ────────▶ /elements/stats + HogQL
  ◀─────────────── display-ready halo items ───── match + health-score ◀────── (data project)
  clicks/requests ─▶ CDP capture (traceparent) ─▶ live latency + trace ids
  select element ──────────────────────────────▶ detail queries + PR impact ─▶ details panel

• Three interaction tiers: ambient (thin health halos only — unhealthy elements always shown, plus top-usage), inspect mode (hover badges, click to select), details panel (usage trend, correlated error issues, live latency percentiles, request waterfall with trace ids, replay links, PR impact).
• Element ↔ data matching uses the toolbar's own avenue: /elements/stats chains matched against live DOM descriptors, keyed data-attr > id > href > tag+text, with ambiguous keys dropped. Health comes from rage/dead-click share with a minimum-sample guard.
• PR impact is deterministic: git-grep the local checkout for the element's stable keys → merged PRs from squash-commit subjects (git log -- <files>), open PRs via gh pr list (degrades to git-only without gh).
• Investigate starts an auto-mode cloud task whose prompt seeds every concrete identifier (element keys, error issue ids, session ids, live trace ids, source files, PRs) and instructs the agent to re-derive the numbers with the posthog MCP tools before concluding.
• Security: fully sandboxed guest with its own cookie partition; PostHog credentials never enter the page (queries run host-side; only display-ready JSON crosses IPC); everything page-derived is capped, Zod-validated, and escaped before HogQL; CDP capture forwards only timing + traceparent (never cookies/auth headers); http(s)-only navigation, window.open denied.
• Purely additive: new @posthog/platform capability (IEmbeddedBrowser + HostCapabilities.embeddedBrowser, stubbed false on web), new product-view modules in core/workspace-server/host-router/ui, one additive sqlite migration, a product appView tab target, and a command-palette entry. No existing behavior changed.

How did you test this?

• TDD unit suites (all green): shared/core/workspace-server — element matching against a fixture captured from the live /elements/stats endpoint, health thresholds, HogQL builders incl. escaping of hostile page-derived values, overlay pipeline (reported elements → project-scoped stats fetch → halos pushed), environments persistence through the real sqlite migration, PR-subject parsing, investigate prompt content.
• Live query validation: every detail-panel HogQL shape (trend, session-correlated exceptions, sessions, web vitals) was run against the real posthog.com project via MCP before being baked into builders.
• Real overlay engine, live site: drove the built productViewPreload.js in a real WebContentsView loading live posthog.com under Xvfb, matched the reported DOM against real project element stats with the real matcher, and screenshotted both ambient halos and inspect-mode badges rendering correctly. (Screenshots carry usage figures, so they're in the task thread rather than this public PR; the steps below reproduce them.)
• pnpm typecheck (24/24 incl. web portability), biome lint packages/core (zero noRestrictedImports), node scripts/check-host-boundaries.mjs (no new violations), electron-vite build (both preload bundles), Playwright e2e: 12/13 passed, the one failure ("window minimum dimensions") reproduces on a clean tree under Xvfb — pre-existing environment issue, not this change.
• Signed-in app validation needs a real session (this sandbox can't complete OAuth) — see steps below.

Validate it yourself

1. gh pr checkout <this PR> && pnpm install && pnpm dev
2. Cmd/Ctrl+K → type "Product" → open the Product tab.
3. Pick the suggested origin (derived from your project's app_urls + pageview hosts) — e.g. posthog.com for the PostHog App + Website project. Green/amber/red halos appear on elements with autocapture history within a few seconds.
4. Toggle Inspect, hover elements to see usage badges, click one (e.g. the signup CTA) — the details panel opens with usage trend, correlated errors, sessions, and PRs touching its source.
5. Click around the page, re-open the panel: live latency percentiles + the network trace populate (with trace markers where traceparent is present).
6. Click Investigate — an auto-mode cloud task starts, seeded with the element's full context.
7. Local-mode proof: run your product locally (e.g. hogli start), add http://localhost:8010 as an environment via the switcher — the same production halos overlay the local page.

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

---

Created with PostHog Code

[trunk-io]

Merging to main in this repository is managed by Trunk.

• To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

[github-actions]

React Doctor found 1 issue in 1 file · 1 warning.

1 warning

src/features/product-view/ElementDetailsPanel.tsx

• ⚠️ src/features/product-view/ElementDetailsPanel.tsx:43 Role used instead of HTML tag prefer-tag-over-role

_{Reviewed by React Doctor for commit 15f5337.}