# Events Timeline Read supported events from installed and configured tools in one chronological timeline. Reproduce a problem, filter to the relevant sources, and open an event for its tool-specific details. The demo shows a mock checkout session. Exports contain the filtered captured events, not a complete record of everything the app did. ## Installation Events Timeline subscribes to supported event sources. Complete each source tool's setup first, including stores, providers, and account configuration. --- ## Event Sources > **Auto-detection** — If you have the tool installed, its events automatically appear in the timeline. --- ## What You Can Do --- ## Search Tap the magnifying glass in the header to filter the timeline as you type. Matches an event's title, its subtitle (status, duration, host, key), and the full URL of network events — so you can search a host, an action type, a storage key, or a query string value. > Search stacks with the source badges — filter to Network, then search for the failing endpoint. --- ## LLM Export Copy your event timeline in formats optimized for AI assistants. Reproduce a bug, export, and paste into Claude or ChatGPT with your question. **Presets:** - **LLM** — Markdown with smart formatting, strips noise - **Bug Report** — Includes timestamps and error details - **JSON** — Machine-readable for integrations - **Errors** — Just the failures - **Minimal** — Quick reference, one line per event - **Diagram** — Mermaid sequence diagram of the flow The export follows what's on screen: filter to a source or search the timeline first and you copy that slice, not the whole session. > **Smart formatting** — Automatically parses nested JSON, shows only changed Redux state, and removes verbose fields like image URLs. --- ## Correlation Related events are linked together. React Query fetch start → success events show as "1/2" badges so you can trace the full lifecycle. --- ## What's Next - [Network Monitor](./network) — Inspect request details - [Redux DevTools](./redux) — State inspection and time-travel - [Storage Explorer](./storage) — Browse and edit persisted data --- ## FAQ ### How do I see what my React Native app did before a bug? Open the Events timeline — the interleaved history of requests, state changes, storage writes, and navigation leading up to the bug is right there, exportable as structured text. ### What does "LLM-ready export" mean? The timeline exports in a compact structured format designed to paste into an AI assistant — so the model sees exactly what the app did, in order, with timestamps. ## Web support Register this package’s /web namespace in FloatingDevTools modules to use its shared panels and actions in a browser app. Import it from the package's `/web` entry (7.0.41 or later). See [Web installation](../web/installation#tool-setup) for registration, dependencies, and browser boundaries. ## Native Swift status The Swift timeline combines captured Network, UserDefaults/MMKV, and Routes events. It supports source selection, search, pause, clear, copy, JSON detail, and the three Events MCP actions. Native export supports a subset of RN's formatting settings and rejects unsupported settings. Copy Settings selects the export preset and event-data inclusion; on-device copy respects the selected sources. Interactive source detail pages remain pending. Highlight's draws show up as a Render source. It starts off, like React Native. React store sources do not apply to Swift. For Swift setup and what the native version covers, see the [Swift tools guide](../swift/tools#events). ## Scene file loads With `@buoy-gg/three`, this tool shows three.js file loads. Size and time come from the browser. Missing data stays unknown. Known cache hits show as cache hits. Buoy keeps its own saved keys and calls out of this view. They do not add to the row count.