Before opening this PR: - [ ] I added a [Changeset Entry](https://spotlightjs.com/contribute/changesets/) with `pnpm changeset:add` - [x] I referenced issues that this PR addresses This PR implements event origin badges in the Spotlight UI to differentiate between browser-side, server-side, and mobile events, addressing [#654](#654). Previously, all events from meta-frameworks like Next.js would show "JS" as the platform, making it difficult to quickly identify the true origin. **Changes:** 1. **Server-side (`processEnvelope.ts`):** Infers the event's source (`browser`, `server`, `mobile`) and attaches it to the envelope header. 2. **UI Store (`envelopesSlice.ts`, `types.ts`):** Reads the inferred source from the envelope header and attaches it to the event object in the UI store. 3. **UI Components (`OriginBadge.tsx`, `EventList.tsx`, `TraceItem.tsx`):** A new `OriginBadge` component displays the source type with distinct color coding, integrated into the event list and trace item views. --- <a href="https://cursor.com/background-agent?bcId=bc-ea56a316-f89e-4c9c-a4d6-d813bb5c74a1"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-cursor-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-cursor-light.svg"><img alt="Open in Cursor" src="https://cursor.com/open-in-cursor.svg"></picture></a> <a href="https://cursor.com/agents?id=bc-ea56a316-f89e-4c9c-a4d6-d813bb5c74a1"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-web-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-web-light.svg"><img alt="Open in Web" src="https://cursor.com/open-in-web.svg"></picture></a> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: betegon <miguelbetegongarcia@gmail.com>

Uh oh!

Reduce confusion on where events originate from #654

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions