docs: add screenshots section to README with composed collage

Three-panel collage (popup, before, after) generated via Pillow script.
4:3 aspect ratio, 1200px max, gradient background with drop shadows.

Co-authored-by: Cursor <cursoragent@cursor.com>

chat-summaries/2026-08-28_02-23-readme-screenshots-summary.md

@@ -0,0 +1,28 @@
+# README Screenshots
+
+## Task
+
+Add a Screenshots section to the README featuring a composed collage hero image and links to each full-size original screenshot.
+
+## Changes Made
+
+### New files
+- `docs/make_collage.py` -- Python/Pillow script that composes the three source screenshots into an 800x600 collage image (popup left, disabled top-right, enabled bottom-right, light gray background, 4px gaps).
+- `docs/reddit-extension-collage.png` -- the generated collage output.
+
+### Modified files
+- `README.md` -- added a "Screenshots" section between "What it does" and "Installation" containing the collage image, a blockquote caption describing the layout and noting RES was active during capture, and a table linking to each full-size original.
+
+## Source screenshots
+- `docs/reddit-extension-popup.png` (645x2757) -- captured by user by opening `moz-extension://<uuid>/popup/popup.html` in a Firefox tab
+- `docs/reddit-extension-disabled.png` (2794x1671) -- old.reddit.com without extension
+- `docs/reddit-extension-enabled.png` (2794x1671) -- old.reddit.com with extension
+
+## Lessons Learned
+- Firefox extension popups close on focus loss. Opening the popup HTML directly via `moz-extension://` URL in a regular tab is the simplest workaround for full-page captures.
+- GitHub-flavored markdown cannot crop images, does not honor `rowspan`, and strips most CSS. A pre-composed collage image is the only way to get a multi-panel layout.
+- Pillow's `Image.LANCZOS` resampling produces clean downscaled screenshots even at significant reduction ratios (e.g., 2794px down to ~546px).
+
+## Follow-up
+- The `docs/make_collage.py` script can be re-run if source screenshots are updated.
+- Consider adding the collage script or output to `.gitignore` if the generated image shouldn't be tracked separately from sources.

chat-summaries/2026-08-28_03-07-readme-screenshots-summary.md

@@ -0,0 +1,36 @@
+# README Screenshots -- Final
+
+## Task
+
+Add a Screenshots section to the README with a composed collage hero image and links to full-size originals.
+
+## Changes Made
+
+### New files
+- `docs/reddit-extension-collage.png` -- 1200x900 (4:3) composed collage of all three screenshots.
+- `docs/make_collage.py` -- Pillow script that generates the collage. Configurable aspect ratio, max dimension, gradient, borders, and drop shadows.
+- `docs/reddit-extension-popup.png` -- full-page capture of the extension popup (captured manually via `moz-extension://` URL in a tab).
+- `docs/reddit-extension-disabled.png` -- old.reddit.com without the extension.
+- `docs/reddit-extension-enabled.png` -- old.reddit.com with the extension active.
+
+### Modified files
+- `README.md` -- added Screenshots section between "What it does" and "Installation". Contains the collage hero image, a blockquote caption, and a table linking to each full-size original.
+
+## Collage Details
+
+Final collage configuration after iterating through multiple options:
+- **Layout**: popup on left, disabled screenshot top-right, enabled screenshot bottom-right
+- **Aspect ratio**: 4:3, clamped to 1200px max dimension (chosen from 5:4, 4:3, 3:2, 16:10, 16:9, 6:5, 7:6 variants)
+- **Background**: 45-degree linear gradient from `#888888` to `#575757`
+- **Panel borders**: `#111111`, 1px, 4px corner radius
+- **Drop shadows**: offset (4,4), blur 8, rgba(0,0,0,0.43), cast bottom-right to complement the gradient angle
+- **Padding**: 20px outer, 14px gaps between panels (scaled proportionally when clamped)
+
+## Lessons Learned
+- Firefox extension popups close on focus loss. Opening `moz-extension://<uuid>/popup/popup.html` in a regular tab is the simplest workaround for full-page captures.
+- GitHub-flavored markdown cannot crop images, strips `rowspan`, and removes CSS. A pre-composed collage image is the only way to get a multi-panel layout in a README.
+- Iterating on visual output (colors, ratios, effects) works well as a rapid generate-and-review loop with Pillow.
+- Generating multiple aspect ratio variants at once and letting the user compare side-by-side is faster than guessing one at a time.
+
+## Follow-up
+- Run `python docs/make_collage.py` to regenerate the collage if source screenshots are updated.