Visualize your ChatGPT and Claude conversation branches as an interactive tree — in Chrome's native side panel.
Every time you regenerate a response or edit a message in ChatGPT or Claude, the conversation splits into a new branch. These branches are invisible by default — Chat Branch Visualizer makes them a navigable tree.
| Feature | Description |
|---|---|
| Branch tree | Renders every user and assistant turn as an interactive node graph |
| Build full tree | Auto-traverses all branches to build a complete map |
| Navigate | Click any node to jump to that point in the conversation |
| Fit / Zoom / Locate | Pan and zoom freely; jump to your current position with one click |
| Snapshot | Restores your last tree when you reopen a tab |
Supports ChatGPT (chatgpt.com) and Claude (claude.ai).
From the Chrome Web Store (recommended)
Load unpacked (development)
git clone https://github.com/FuugaMo/chat-branch-visualizer.git- Open
chrome://extensions - Enable Developer mode
- Click Load unpacked and select the repo folder
- Open a ChatGPT or Claude conversation
├── manifest.json Extension manifest (MV3)
├── content.js DOM parser + branch navigator (runs in chat pages)
├── platform-config.js Platform detection shared across contexts
├── reporting-config.js Diagnostics reporting config
├── selectors.json CSS selector registry for both platforms
├── background.js Service worker — message routing + auto-reporting
├── sidepanel.html/js/css Side panel UI
├── api/ Vercel serverless functions (reporting backend)
├── scripts/ Local automation scripts
└── .github/workflows/ CI/CD automation
When the parser can't read the page (e.g. after a platform update changes the DOM), the extension captures a diagnostic snapshot and — if the user has opted in — sends it automatically to help identify and fix the breakage.
What's captured: CSS selectors, data-testid attributes, short text signatures (≤120 chars), extension version, page URL.
What's never captured: full chat content, account information, or any data outside chatgpt.com / claude.ai.
Users control reporting via the ⋯ menu → Send diagnostics toggle. It is off by default.
When breakage is detected and the user has opted in, a report flows through:
content.js detects selector breakage / build error
└─ PROBE_RESULT → background.js
├─ Consent check (cbv_consent.autoSend must be true)
├─ Deduplication (same platform+reason+broken selectors+url within 30 min → skip)
└─ POST ──▶ api/reports.js (Vercel)
└─ repository_dispatch: extension_breakage_report
└─ report-intake.yml
└─ Buffer: 3 identical reports → promoted to visible issue
└─ OpenClaw opens fix PR (auto-fix label)
└─ Codex reviews → human approves → auto-merge
| Workflow | Trigger | Purpose |
|---|---|---|
report-intake.yml |
repository_dispatch |
Aggregates extension reports into issues (buffer → 3 reports → visible) |
review.yml |
PR opened | Structural review comment on auto-fix PRs |
codex-trigger.yml |
PR opened | Posts @codex mention to trigger AI review on auto-fix PRs |
auto-merge.yml |
PR approved | Squash merges auto-fix PRs after human approval |
npm run pack # Build dist/chat-branch-visualizer-<version>.zip
npm run probe # Run selector health probe locally
npm run check:reporting # Syntax-check API filesBug reports and selector fixes are welcome. If the extension breaks after a ChatGPT or Claude update, open an issue — the diagnostics pipeline is designed to catch these automatically.