feat: migrate to Fetch Proxy architecture (v1.5.0)

Replace DOM manipulation with Fetch Proxy - intercept HTTP responses
and trim conversation JSON BEFORE React renders. This eliminates flash
of untrimmed content and simplifies the codebase significantly.

Architecture change:
- BEFORE: API → React renders ALL → MutationObserver → [TRIM DOM]
- AFTER: API → [FETCH PROXY] → Trim JSON → React renders trimmed data

Key changes:
- Add page-script.ts: patches window.fetch to intercept /backend-api/
- Add page-inject.ts: injects page script at document_start
- Simplify content.ts: now only handles settings and status bar
- Count TURNS (role transitions) instead of individual nodes
- Add HIDDEN_ROLES: system, tool, thinking excluded from count
- Propagate debug flag to page script for diagnostics

Deleted (no longer needed):
- trimmer.ts, dom-helpers.ts, selectors.ts, observers.ts
- compactor.ts, stream-detector.ts, early-hide.ts/css
- Related test files

Code reduction: ~2850 lines → ~500 lines

Author: 11me

CLAUDE.md

@@ -17,46 +17,47 @@ npm run build:types  # TypeScript type check (no emit)
 
 ## Architecture
 
-**Firefox extension (Manifest V3)** that trims old DOM nodes from ChatGPT conversations to fix UI lag.
+**Firefox extension (Manifest V3)** that uses Fetch Proxy to trim ChatGPT conversations before React renders.
 
 ### Core Components
 
 | Component | Path | Purpose |
 |-----------|------|---------|
-| Content Script | `extension/src/content/` | Injected into ChatGPT pages, handles trimming |
-| Background | `extension/src/background/` | Settings storage, message routing |
+| Page Script | `extension/src/page/` | Fetch Proxy, intercepts API responses |
+| Content Script | `extension/src/content/` | Settings dispatch, status bar UI |
+| Background | `extension/src/background/` | Settings storage |
 | Popup | `extension/src/popup/` | Extension toolbar UI |
 | Shared | `extension/src/shared/` | Types, constants, storage, logger |
 
-### Content Script Flow
+### Fetch Proxy Flow
 
 ```
-content.ts (entry) → trimmer.ts (state machine) → dom-helpers.ts (find nodes)
-                                                 → observers.ts (MutationObserver)
+page-inject.ts (document_start) → injects page-script.ts
+page-script.ts → patches window.fetch → intercepts /backend-api/ responses
+content.ts → dispatches settings via CustomEvent → receives status updates
 ```
 
-**State machine:** `IDLE ↔ OBSERVING` (two states, `trimScheduled` flag controls trimming)
-
 **Trimming flow:**
-1. MutationObserver detects DOM changes (debounced 75ms)
-2. `evaluateTrim()` checks preconditions (enabled, not streaming, etc.)
-3. `buildActiveThread()` finds message nodes using tiered selectors
-4. `executeTrim()` removes excess nodes via `requestIdleCallback`
-
-### Selector Strategy
+1. Page script intercepts GET `/backend-api/` JSON responses
+2. Parses conversation `mapping` and `current_node`
+3. Builds path from current_node to root via parent links
+4. Counts TURNS (role transitions), not individual nodes
+5. Keeps last N turns, filters to user/assistant only
+6. Returns modified Response with trimmed JSON
 
-ChatGPT DOM selectors in `shared/constants.ts` → `SELECTOR_TIERS`:
-- **Tier A:** Data attributes (`[data-message-id]`)
-- **Tier B:** Test IDs and specific classes
-- **Tier C:** Structural fallbacks with heuristics
+### Turn-Based Counting
 
-If ChatGPT UI changes, update selectors in `SELECTOR_TIERS`.
+ChatGPT creates multiple nodes per assistant response (especially with Extended Thinking).
+LightSession counts **turns** (role changes) instead of nodes:
+- `[user, assistant, assistant, user, assistant]` = 4 turns
+- HIDDEN_ROLES: `system`, `tool`, `thinking` excluded from count
 
 ## Project Structure
 
 ```
 extension/src/
-├── content/         # Content scripts (trimmer, observers, dom-helpers)
+├── page/            # Page script (Fetch Proxy, runs in page context)
+├── content/         # Content scripts (settings, status bar)
 ├── background/      # Background service worker
 ├── popup/           # Popup HTML/CSS/TS
 └── shared/          # Types, constants, storage, logger

README.md

@@ -13,7 +13,7 @@ Local-only, privacy-first browser extension that fixes UI lag in long conversati
 
 Long ChatGPT threads are brutal for the browser: the UI keeps every message in the DOM and the tab slowly turns into molasses — scroll becomes choppy, typing lags, devtools crawl.
 
-**LightSession** fixes that by trimming old DOM nodes *on the client side* while keeping the actual conversation intact on OpenAI's side.
+**LightSession** fixes that by intercepting API responses and trimming conversation data *before* React renders it, keeping the actual conversation intact on OpenAI's side.
 
 - **Fixes UI lag** in long chats
 - **Keeps model context intact** (only the DOM is trimmed)
@@ -35,10 +35,10 @@ Built after too many coding sessions where a single ChatGPT tab would start eati
 
 **Performance**
 
-- **Automatic trimming** – keeps only the last _N_ messages visible (configurable range: 1–100 messages)
-- **DOM batching** – node removals are batched within the ~16 ms budget for 60 fps scrolling
-- **Smart timing** – waits for AI responses to fully finish streaming before trimming
-- **Ultra Lean Mode** _(Experimental)_ – aggressive optimizations: kills animations, applies CSS containment, dehighlights old code blocks
+- **Fetch Proxy** – intercepts API responses and trims JSON before React renders (no flash of untrimmed content)
+- **Turn-based counting** – counts conversation turns (user→assistant), not individual nodes, for accurate message limits
+- **Automatic trimming** – keeps only the last _N_ conversation turns visible (configurable range: 1–100)
+- **Ultra Lean Mode** _(Experimental)_ – aggressive CSS optimizations: kills animations, applies containment
 
 **User experience**
 
@@ -148,14 +148,14 @@ LightSession uses a multi-tier selector strategy and conservative fallbacks, but
 
 ## 🔧 How it works
 
-LightSession uses a non-destructive trimming pipeline:
+LightSession uses a **Fetch Proxy** architecture:
 
-1. **Detection** – finds ChatGPT message nodes with a multi-tier selector system
-   (data attributes → test IDs → structural + heuristic fallback).
-2. **Classification** – labels nodes as user / assistant / system / tool messages.
-3. **Calculation** – determines which messages to keep based on your settings.
-4. **Batching** – removes excess nodes in small chunks using `requestIdleCallback` to stay within the frame budget.
-5. **Markers** – optionally leaves comment markers in the DOM for debugging.
+1. **Injection** – at `document_start`, injects a script into the page context before ChatGPT loads.
+2. **Interception** – patches `window.fetch` to intercept `/backend-api/` JSON responses.
+3. **Trimming** – parses the conversation mapping, counts turns (role transitions), keeps the last N turns.
+4. **Response** – returns a modified Response with trimmed JSON; React renders only kept messages.
+
+**Turn counting**: A "turn" is a contiguous sequence of messages from the same role. This matches how ChatGPT renders messages — multiple assistant nodes may render as a single bubble.
 
 Trimming only affects what the browser renders. The conversation itself remains on OpenAI's side and is fully recoverable by reloading the page.
 
@@ -208,7 +208,8 @@ npm run clean
 ```
 extension/
 ├── src/
-│   ├── content/        # Content scripts (run on ChatGPT pages)
+│   ├── content/        # Content scripts (settings dispatch, status bar)
+│   ├── page/           # Page script (Fetch Proxy, runs in page context)
 │   ├── background/     # Background script (settings management)
 │   ├── popup/          # Popup UI (HTML/CSS/JS)
 │   └── shared/         # Shared types, constants, utilities
@@ -219,10 +220,10 @@ extension/
 
 ### Architecture
 
-- **State machine** for the trimmer: `IDLE ↔ OBSERVING` (simplified two-state design)
-- **Debounced MutationObserver** (~75ms) to batch DOM changes
-- **Idle callback** (`requestIdleCallback`) for non-blocking node removal
-- **Fail-safe thresholds** (e.g. minimum message count) to avoid over-trimming
+- **Fetch Proxy** – patches `window.fetch` in page context to intercept API responses
+- **Turn-based trimming** – counts role transitions, not individual nodes
+- **Content ↔ Page communication** – CustomEvents for settings dispatch and status updates
+- **HIDDEN_ROLES** – system, tool, thinking nodes excluded from turn count
 
 ---
 

build.cjs

@@ -23,15 +23,14 @@ function copyStaticFiles() {
   const filesToCopy = [
     { src: 'extension/src/popup/popup.html', dest: 'extension/popup/popup.html' },
     { src: 'extension/src/popup/popup.css', dest: 'extension/popup/popup.css' },
-    { src: 'extension/src/content/early-hide.css', dest: 'extension/dist/early-hide.css' },
   ];
 
   for (const { src, dest } of filesToCopy) {
     if (fs.existsSync(src)) {
       fs.copyFileSync(src, dest);
     }
   }
-  console.log('✓ Copied static files (popup.html, popup.css, early-hide.css)');
+  console.log('✓ Copied static files (popup.html, popup.css)');
 }
 
 const buildOptions = {
@@ -65,10 +64,17 @@ async function build() {
 
     await esbuild.build({
       ...buildOptions,
-      entryPoints: ['extension/src/content/early-hide.ts'],
-      outfile: 'extension/dist/early-hide.js',
+      entryPoints: ['extension/src/page/page-script.ts'],
+      outfile: 'extension/dist/page-script.js',
     });
-    console.log('✓ Built early-hide script');
+    console.log('✓ Built page-script (fetch proxy)');
+
+    await esbuild.build({
+      ...buildOptions,
+      entryPoints: ['extension/src/content/page-inject.ts'],
+      outfile: 'extension/dist/page-inject.js',
+    });
+    console.log('✓ Built page-inject script');
 
     await esbuild.build({
       ...buildOptions,
@@ -104,8 +110,13 @@ async function watch() {
     }),
     esbuild.context({
       ...buildOptions,
-      entryPoints: ['extension/src/content/early-hide.ts'],
-      outfile: 'extension/dist/early-hide.js',
+      entryPoints: ['extension/src/page/page-script.ts'],
+      outfile: 'extension/dist/page-script.js',
+    }),
+    esbuild.context({
+      ...buildOptions,
+      entryPoints: ['extension/src/content/page-inject.ts'],
+      outfile: 'extension/dist/page-inject.js',
     }),
     esbuild.context({
       ...buildOptions,
@@ -135,7 +146,6 @@ async function watch() {
   const staticFiles = [
     'extension/src/popup/popup.html',
     'extension/src/popup/popup.css',
-    'extension/src/content/early-hide.css',
   ];
   for (const file of staticFiles) {
     fs.watchFile(file, { interval: 500 }, () => {

extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "LightSession for ChatGPT",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Keep ChatGPT fast by keeping only the last N messages in the DOM. Local-only.",
   "icons": {
     "16": "icons/icon-16.png",
@@ -24,8 +24,7 @@
         "*://chat.openai.com/*",
         "*://chatgpt.com/*"
       ],
-      "css": ["dist/early-hide.css"],
-      "js": ["dist/early-hide.js"],
+      "js": ["dist/page-inject.js"],
       "run_at": "document_start"
     },
     {
@@ -34,7 +33,7 @@
         "*://chatgpt.com/*"
       ],
       "js": ["dist/content.js"],
-      "run_at": "document_end"
+      "run_at": "document_idle"
     }
   ],
   "background": {
@@ -44,8 +43,8 @@
   },
   "web_accessible_resources": [
     {
-      "resources": [".dev"],
-      "matches": ["<all_urls>"]
+      "resources": ["dist/page-script.js", ".dev"],
+      "matches": ["*://chat.openai.com/*", "*://chatgpt.com/*"]
     }
   ],
   "browser_specific_settings": {