--- name: pr-review-canvas disable-model-invocation: true description: Generate an interactive PR review walkthrough as an HTML page. Fetches PR data via gh API, categorizes files into core vs mechanical changes, adds reviewer annotations, and renders diffs with moved-code detection. Use when the user pastes a GitHub PR URL and asks for a review, walkthrough, or summary, or says "review this PR". --- # PR Review Canvas Generate an interactive HTML review of a GitHub PR that reads like a peer walking you through what matters. ## Workflow ### 1. Fetch PR data Run these `gh api` calls in parallel: ```bash gh api repos/{owner}/{repo}/pulls/{number} --jq '{title, body, user: .user.login, state, additions, deletions, changed_files, base: .base.ref, head: .head.ref}' gh api repos/{owner}/{repo}/pulls/{number}/files --paginate --jq '.[] | {filename, status, additions, deletions, patch}' gh api repos/{owner}/{repo}/pulls/{number}/comments --jq '.[] | {user: .user.login, body, path, line}' ``` ### 2. Analyze the PR and write the body HTML Read the diffs, understand the PR, and write the `` content directly as HTML. You have full creative freedom -- the goal is to explain the PR clearly to a reviewer. Use whatever structure best fits the PR. **Typical structure** (adapt as needed): - Header with title, PR number, author, stats - Summary box explaining what the PR does in plain English - Core file sections with annotations and diffs - Mechanical/boilerplate files collapsed by default - Review checklist at the bottom **But you can also add:** - **Pseudocode summaries** for verbose code -- show the algorithm in plain English or short pseudocode, with the real diff collapsed below (use a `.bp-section` card labeled "Show full implementation"). Great when 150 lines of retry/backoff/error-handling code is really just "fetch with exponential backoff and circuit breaker." - Diagrams (inline SVG, mermaid via CDN, ASCII art in `

`)
- Flowcharts showing before/after control flow
- Tables comparing old vs new behavior
- Callout boxes for warnings, questions, or gotchas
- Interactive widgets if they help
- Anything else that makes the review clearer

**Pseudocode pattern example:**
```html

  
    retryClient.ts
    +173−11▶
  
  
    
      What this does in plain English:
      fetch(url):
  if circuit breaker is open → fail fast
  retry up to N times:
    try fetch with timeout
    on success → close circuit breaker, return
    on retryable error → wait (exponential backoff + jitter)
    on non-retryable error → throw
  circuit breaker records failure
    
    
      
        Show full implementation (+173 lines)▶
      
      
    
  

```

### 3. Available CSS classes and JS utilities

Read [styles.css](styles.css) and [renderer.js](renderer.js) from this skill directory. These give you a prebuilt dark-themed toolkit. Inject them into [template.html](template.html) verbatim.

**CSS classes you can use:**

| Class | Purpose |
|-------|---------|
| `.header`, `.header h1`, `.header-meta` | Page header |
| `.pill.add`, `.pill.del`, `.pill.files` | Stat badges (+N, -N, N files) |
| `.content` | Centered content wrapper (max 900px) |
| `.summary` | Summary/TL;DR box |
| `.section-title` | Section heading with bottom border |
| `.ic` | Inline code reference (mono, blue, dark bg) |
| `.file-card`, `.file-hdr`, `.file-body` | Collapsible file card (use `onclick="toggle(this)"` on `.file-hdr`) |
| `.file-note` | Sticky reviewer annotation inside a file card |
| `.bp-section`, `.bp-hdr`, `.bp-body` | Collapsed boilerplate card (use `onclick="toggleBP(this)"`) |
| `.bp-note` | Note inside a boilerplate card |
| `.verdict` | Review checklist box |

**JS functions available:**

| Function | Usage |
|----------|-------|
| `toggle(hdrElement)` | Toggle a `.file-body` open/closed |
| `toggleBP(hdrElement)` | Toggle a `.bp-body` open/closed |
| `renderDiff(target, diffInput)` | Render a unified diff. `target` can be a DOM element, string ID, or CSS selector. `diffInput` can be a raw patch string OR an array of lines -- both work. Automatically filters imports, collapses whitespace-only changes, detects moved code (blue/purple tint). |
| `esc(string)` | HTML-escape a string |

**Rendering diffs -- use `data-diff` attributes with auto-discovery.**
Put `
` placeholders in your body HTML wherever you want a diff rendered. The renderer finds them automatically after DOM load and fills them from the `` in addition to newlines, backslashes, and quotes.** Even `json.dumps(...)` is not enough if you paste raw output into executable ` from terminating HTML script tags early.
safe_json = json.dumps(patches).replace('<', '\\u003c').replace('>', '\\u003e').replace('&', '\\u0026')

out = (
  tmpl.replace('/* INJECT_CSS */', css)
      .replace('/* INJECT_JS */', js)
      .replace('', html)
      .replace('{"__PR_DIFFS_PLACEHOLDER__":true}', safe_json)
)

Path('/tmp/pr-review-{number}.html').write_text(out)
PY
```

This guarantees valid JSON and script-safe HTML embedding. The agent writes body HTML to a temp file, then Python assembles everything safely.

The diff data keys should match the `data-diff` attribute values in the HTML:
```html

```

Since renderer.js loads in ``, you can also call `renderDiff(target, lines)` directly from inline `

pr-review-canvas

Install this skill

Comments