Trace
Trace is a website interaction inspector. I rebuilt a single-page analyzer into a focused workspace for exploring controls, comparing before-and-after captures, and keeping the evidence in a report you can return to.
The idea
A screenshot shows what an interface looks like, but not what happens when you use it. The original analyzer could explore a page, but its long list of small captures made those changes hard to review. I brought the page, the interaction, and the resulting evidence into one workspace, with a quieter visual system and a clear place for every tool.
The workspace
Each run opens into a searchable interaction list and a detailed inspector. Before-and-after captures can be compared, enlarged, and read alongside the observed state changes and element selector. Run history, saved reports, preferences, and documentation live in the sidebar. Reports stay in the browser, can be exported as JSON, and remain easy to find on desktop or mobile.
How it’s built
Next.js, React, and TypeScript provide the workspace; Playwright opens an isolated browser context and captures the interactions. Evidence mode compares accessible page states without an API key, with optional OpenAI summaries layered over the observations. IndexedDB stores reports and screenshots locally. Automated checks exercise URL validation and real desktop and mobile captures, while browser checks cover navigation, comparison, preferences, and report management.
