Skip to content

docs: update README #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
FuugaMo merged 1 commit into from
Mar 12, 2026
Merged

docs: update README #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 35 additions & 27 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
<div align="center">

# Chat Branch Visualizer

**Visualize your ChatGPT and Claude conversation branches as an interactive tree — in Chrome's native side panel.**

[![Chrome Web Store](https://img.shields.io/badge/Chrome%20Web%20Store-v0.3.1-blue?logo=googlechrome&logoColor=white)](https://chromewebstore.google.com/detail/chat-branch-visualizer/mahknjdihdpeceompocgcclnmjikmncb)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)

</div>

---

## What it does

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.

- **Branch tree** — renders every user and assistant turn as a 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
- **Snapshot** — restores your last tree when you reopen a tab
- **Standalone viewer** — pop the tree out into a full tab
| 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).

Expand All @@ -25,15 +30,19 @@ Supports **ChatGPT** (chatgpt.com) and **Claude** (claude.ai).
## Install

**From the Chrome Web Store (recommended)**

→ [Add to Chrome](https://chromewebstore.google.com/detail/chat-branch-visualizer/mahknjdihdpeceompocgcclnmjikmncb)

**Load unpacked (development)**

1. Clone this repo
2. Open `chrome://extensions`
3. Enable **Developer mode**
4. Click **Load unpacked** and select the repo folder
5. Open a ChatGPT or Claude conversation
```bash
git clone https://github.com/FuugaMo/chat-branch-visualizer.git
```

1. Open `chrome://extensions`
2. Enable **Developer mode**
3. Click **Load unpacked** and select the repo folder
4. Open a ChatGPT or Claude conversation

---

Expand All @@ -47,10 +56,9 @@ Supports **ChatGPT** (chatgpt.com) and **Claude** (claude.ai).
├── selectors.json CSS selector registry for both platforms
├── background.js Service worker — message routing + auto-reporting
├── sidepanel.html/js/css Side panel UI
├── viewer.html/js/css Standalone tree viewer
├── api/ Vercel serverless functions (reporting backend)
├── scripts/ Local automation scripts
└── .github/workflows/ Scheduled probe + report intake automation
└── .github/workflows/ CI/CD automation
```

---
Expand All @@ -64,7 +72,7 @@ When the parser can't read the page (e.g. after a platform update changes the DO

Users control reporting via the **⋯ menu → Send diagnostics** toggle. It is **off by default**.

Privacy policy: https://chat-branch-visualizer.vercel.app/privacy
→ [Privacy policy](https://chat-branch-visualizer.vercel.app/privacy)

### Reporting pipeline

Expand All @@ -76,23 +84,23 @@ Extension (content.js)
└─ report-intake.yml (creates/updates issue)
```

### Backend setup (Vercel)
### GitHub Actions workflows

Required environment variables:
| Workflow | Trigger | Purpose |
|----------|---------|---------|
| `probe.yml` | Daily / manual | Playwright probe against ChatGPT & Claude; opens issue on selector drift |
| `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 |

### Backend setup (Vercel)

| Variable | Description |
|---|---|
|----------|-------------|
| `GITHUB_TOKEN` | PAT with `repo` scope |
| `GITHUB_REPOSITORY` | e.g. `NogaUwU/chat-branch-visualizer` |
| `REPORT_PUBLIC_KEY` | Optional — low-trust key checked against extension requests |

### GitHub Actions workflows

| Workflow | Trigger | Purpose |
|---|---|---|
| `probe.yml` | Daily / manual | Runs Playwright against ChatGPT & Claude; opens issue on selector drift |
| `report-intake.yml` | `repository_dispatch` | Creates or updates an issue from incoming extension reports |
| `review.yml` | PR | Adds structural review comment on auto-fix PRs |
| `GITHUB_REPOSITORY` | e.g. `FuugaMo/chat-branch-visualizer` |
| `REPORT_PUBLIC_KEY` | Optional — checked against extension requests |

Secrets used by `probe.yml`: `TEST_CHATGPT_URL`, `TEST_CLAUDE_URL`, `CHATGPT_SESSION_COOKIE`, `CLAUDE_SESSION_COOKIE`

Expand Down