From d2882aaa8f2a7bbd7d206c480e06f90c7c871b0c Mon Sep 17 00:00:00 2001
From: Will Scott <will@webboss.com>
Date: Tue, 21 Jul 2026 13:12:12 -0500
Subject: [PATCH 1/3] Harden API, fix bugs, remove build-time GTM injection
 (v3.1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Security:
- SSRF guards in api/chunk.js: http/https only, DNS-resolve + reject
  private/reserved IP ranges (incl. 169.254 metadata, CGNAT, IPv6 ULA),
  per-hop redirect re-validation, 5MB body cap, content-type allowlist
- escapeHtml now escapes quotes — closes title="${fragment}" attribute
  XSS from scraped heading ids
- Slack mrkdwn escaping in feedback.js kills <!channel> pings + link
  spoofing; pageUrl scheme-checked and length-capped
- Input validation with allowlists (400 not 500); error details no longer
  leak to clients

Bugs:
- Overlap slider was permanently stuck on Auto (unreachable else branch)
- Dead node-fetch timeout replaced with native fetch + AbortSignal.timeout;
  node-fetch dependency removed
- extract=defuddle now fails 422 instead of silently falling back to cheerio

Housekeeping:
- Removed scripts/build.js + vercel buildCommand; GTM-4G43 (shared SI
  container, matches grader/ontologizer) hardcoded; GTM_SETUP.md rewritten
- Deleted ~1,900 lines of unused root design-system files
- README: MIT license, searchinfluence/getchunks URLs, v3/v3.1 history,
  honest data-security FAQ

Verified locally: SSRF/scheme/validation rejections, live extraction,
http->https redirect following, slider fix, and XSS containment.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 GTM_SETUP.md                       |  54 +-
 IMPLEMENTATION_GUIDE.md            | 371 --------------
 LOOK_AND_FEEL_GUIDE.md             | 461 -----------------
 README.md                          |  24 +-
 api/chunk.js                       | 173 ++++++-
 api/feedback.js                    |  26 +-
 getchunks-patterns.js              | 569 ---------------------
 getchunks-styles.css               | 765 -----------------------------
 package-lock.json                  |  97 +---
 package.json                       |   6 +-
 public/index.html                  |  24 +-
 scripts/build.js                   |  36 --
 search-influence-components.html   | 244 ---------
 search-influence-design-system.css | 472 ------------------
 tasks/todo.md                      |  29 +-
 vercel.json                        |   1 -
 16 files changed, 242 insertions(+), 3110 deletions(-)
 delete mode 100644 IMPLEMENTATION_GUIDE.md
 delete mode 100644 LOOK_AND_FEEL_GUIDE.md
 delete mode 100644 getchunks-patterns.js
 delete mode 100644 getchunks-styles.css
 delete mode 100755 scripts/build.js
 delete mode 100644 search-influence-components.html
 delete mode 100644 search-influence-design-system.css

diff --git a/GTM_SETUP.md b/GTM_SETUP.md
index d5e809a..9555179 100644
--- a/GTM_SETUP.md
+++ b/GTM_SETUP.md
@@ -1,48 +1,12 @@
-# Google Tag Manager Setup
+# Google Tag Manager
 
-This project uses environment variables to inject the Google Tag Manager ID at build time, so your GTM ID is never committed to the repository.
+getchunks uses the **shared Search Influence GTM container `GTM-4G43`** — the same
+container as AI Website Grader and Ontologizer.
 
-## How It Works
-
-1. The HTML file contains placeholder `GTM-XXXXXXX` values
-2. A build script (`scripts/build.js`) replaces these placeholders with the actual GTM ID from the `GTM_ID` environment variable
-3. The build script runs automatically on Vercel deployments via the `buildCommand` in `vercel.json`
-
-## Setting Up Your GTM ID
-
-**Important**: This project uses `GTM_ID` (NOT `NEXT_PUBLIC_GTM_ID`). The build script runs server-side, so it doesn't need the Next.js `NEXT_PUBLIC_` prefix.
-
-### For Vercel Deployments
-
-1. Go to your Vercel project settings
-2. Navigate to **Settings** → **Environment Variables**
-3. Add a new environment variable:
-   - **Name**: `GTM_ID` (no prefix needed - this is NOT a Next.js project)
-   - **Value**: Your actual GTM ID (e.g., `GTM-4G43`)
-   - **Environment**: Production, Preview, and Development (as needed)
-4. Redeploy your project
-
-The build script will automatically inject your GTM ID during the build process.
-
-### For Local Development
-
-Set the environment variable before running the build:
-
-```bash
-export GTM_ID=GTM-4G43
-npm run build
-```
-
-Or run it inline:
-
-```bash
-GTM_ID=GTM-4G43 npm run build
-```
-
-## Important Notes
-
-- **Never commit your real GTM ID** to the repository
-- The placeholder `GTM-XXXXXXX` is safe to commit
-- The build script will use `GTM-XXXXXXX` as a fallback if `GTM_ID` is not set
-- Make sure to set the `GTM_ID` environment variable in your Vercel project settings
+The ID is hardcoded in [public/index.html](public/index.html) (script tag in `<head>`
+plus the `<noscript>` iframe). There is no build-time injection; the old
+`scripts/build.js` + `GTM_ID` env var mechanism was removed in v3.1 because it
+mutated the source file in place, and GTM container IDs are public in page
+source anyway.
 
+To change the container, edit both occurrences of the ID in `public/index.html`.
diff --git a/IMPLEMENTATION_GUIDE.md b/IMPLEMENTATION_GUIDE.md
deleted file mode 100644
index f073a00..0000000
--- a/IMPLEMENTATION_GUIDE.md
+++ /dev/null
@@ -1,371 +0,0 @@
-# GetChunks Look & Feel - Implementation Guide
-
-## Quick Start
-
-### 1. Include the CSS
-```html
-<link rel="stylesheet" href="getchunks-styles.css">
-```
-
-### 2. Include the JavaScript Patterns
-```html
-<script src="getchunks-patterns.js"></script>
-```
-
-### 3. Basic HTML Structure
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Your App</title>
-    <link rel="stylesheet" href="getchunks-styles.css">
-</head>
-<body>
-    <!-- Header -->
-    <div class="header">
-        <div class="container">
-            <div class="header-content">
-                <div class="logo-section">
-                    <div class="logo-container">
-                        <img src="your-logo.png" alt="Your Brand" class="si-logo">
-                    </div>
-                    <h1>Your App Title</h1>
-                    <div class="tagline">Your tagline here</div>
-                </div>
-                <div class="header-description">
-                    <p>Your app description goes here.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Main Content -->
-    <div class="main-section">
-        <div class="container">
-            <!-- Form Card -->
-            <div class="form-card">
-                <form id="your-form">
-                    <div class="form-group">
-                        <label for="your-input">Your Label</label>
-                        <div class="url-input-group">
-                            <input type="text" id="your-input" placeholder="Your placeholder" required>
-                            <button type="submit" class="extract-btn">Submit</button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-
-            <!-- Loading State -->
-            <div class="loading" id="loading">
-                <div class="loading-spinner"></div>
-                <h3>Processing...</h3>
-                <p>Please wait while we process your request.</p>
-            </div>
-
-            <!-- Error State -->
-            <div class="error" id="error">
-                <h3>⚠️ Error</h3>
-                <p id="error-message"></p>
-            </div>
-
-            <!-- Results -->
-            <div class="results" id="results">
-                <div class="results-header">
-                    <h2>📄 Results</h2>
-                    <div class="view-controls">
-                        <div class="view-toggle">
-                            <button id="view1-btn" class="active">View 1</button>
-                            <button id="view2-btn">View 2</button>
-                            <button id="view3-btn">View 3</button>
-                        </div>
-                        <div class="results-actions">
-                            <button class="action-btn" id="action1">Action 1</button>
-                            <button class="action-btn" id="action2">Action 2</button>
-                        </div>
-                    </div>
-                </div>
-                
-                <div class="content-area">
-                    <div class="webpage-view show" id="view1">
-                        <div class="webpage-content" id="content1"></div>
-                    </div>
-                    <div class="chunks-view" id="view2">
-                        <div class="chunks-content" id="content2"></div>
-                    </div>
-                    <pre class="json-output" id="view3">
-                        <div class="json-content" id="content3"></div>
-                    </pre>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Features Section -->
-    <div class="features">
-        <div class="container">
-            <div class="feature">
-                <div class="feature-icon">🎯</div>
-                <h3>Feature 1</h3>
-                <p>Feature description goes here.</p>
-            </div>
-            <div class="feature">
-                <div class="feature-icon">⚡</div>
-                <h3>Feature 2</h3>
-                <p>Feature description goes here.</p>
-            </div>
-            <div class="feature">
-                <div class="feature-icon">🧹</div>
-                <h3>Feature 3</h3>
-                <p>Feature description goes here.</p>
-            </div>
-        </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="footer">
-        <div class="container">
-            <p>Your footer content • <a href="#" target="_blank">Link</a></p>
-        </div>
-    </div>
-
-    <script src="getchunks-patterns.js"></script>
-    <script>
-        // Your custom JavaScript here
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initialize your app
-        });
-    </script>
-</body>
-</html>
-```
-
-## Color Palette Usage
-
-### Primary Colors
-```css
-/* Dark Blue - Main background */
-background: #2c3e50;
-
-/* Lighter Blue - Header gradient */
-background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
-
-/* Orange Accent - Buttons, highlights */
-color: #e67e22;
-background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
-
-/* Success Green - Success states */
-background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
-
-/* Error Red - Error states */
-color: #e74c3c;
-border: 2px solid #e74c3c;
-```
-
-### Content Colors
-```css
-/* Content background */
-background: #ffffff;
-color: #2c3e50;
-
-/* Secondary content */
-color: #34495e;
-
-/* Muted text */
-color: #7f8c8d;
-
-/* Borders */
-border: 1px solid #dee2e6;
-```
-
-## Component Usage
-
-### Buttons
-```html
-<!-- Primary button -->
-<button class="extract-btn">Primary Action</button>
-
-<!-- Secondary button -->
-<button class="action-btn">Secondary Action</button>
-
-<!-- View toggle button -->
-<button class="view-toggle-btn">View</button>
-```
-
-### Cards
-```html
-<!-- Form card -->
-<div class="form-card">
-    <!-- Your form content -->
-</div>
-
-<!-- Feature card -->
-<div class="feature">
-    <div class="feature-icon">🎯</div>
-    <h3>Title</h3>
-    <p>Description</p>
-</div>
-
-<!-- Content chunk -->
-<div class="big-chunk">
-    <div class="big-chunk-header">
-        <h3 class="big-chunk-title">Title</h3>
-        <div class="big-chunk-meta">Meta info</div>
-    </div>
-    <div class="small-chunks-container">
-        <div class="small-chunk">
-            <div class="small-chunk-index">1</div>
-            <div class="small-chunk-content">Content</div>
-        </div>
-    </div>
-</div>
-```
-
-### Loading States
-```html
-<div class="loading" id="loading">
-    <div class="loading-spinner"></div>
-    <h3>Processing...</h3>
-    <p>Please wait...</p>
-</div>
-```
-
-### Error States
-```html
-<div class="error" id="error">
-    <h3>⚠️ Error Title</h3>
-    <p id="error-message">Error message</p>
-</div>
-```
-
-## JavaScript Integration
-
-### Using the View Manager
-```javascript
-// Initialize view manager
-const viewManager = new ViewManager();
-
-// Show a specific view
-viewManager.showView('webpage');
-viewManager.showView('chunks');
-viewManager.showView('json');
-```
-
-### Using the Form Handler
-```javascript
-// Initialize form handler
-const formHandler = new FormHandler('your-form-id', '/your-api-endpoint');
-
-// Override display results method
-formHandler.displayResults = (data) => {
-    // Your custom display logic
-    console.log('Results:', data);
-};
-```
-
-### Using Utility Functions
-```javascript
-// Copy to clipboard
-await Utils.copyToClipboard('Text to copy');
-
-// Download file
-Utils.downloadFile('file content', 'filename.txt', 'text/plain');
-
-// Show notification
-Utils.showNotification('Success message', 'success', 3000);
-
-// Debounce function
-const debouncedFunction = Utils.debounce(() => {
-    // Your function
-}, 300);
-
-// Throttle function
-const throttledFunction = Utils.throttle(() => {
-    // Your function
-}, 1000);
-```
-
-### Using Content Display
-```javascript
-// Display webpage view
-ContentDisplay.displayWebpageView(data, 'container-id');
-
-// Display chunks view
-ContentDisplay.displayChunksView(data, 'container-id');
-
-// Display JSON view
-ContentDisplay.displayJsonView(data, 'container-id');
-
-// Escape HTML
-const safeHtml = ContentDisplay.escapeHtml('<script>alert("xss")</script>');
-```
-
-## Customization
-
-### Changing Colors
-```css
-:root {
-    --primary-color: #e67e22;
-    --primary-dark: #d35400;
-    --primary-light: #f39c12;
-    --background-dark: #2c3e50;
-    --background-light: #34495e;
-    --success-color: #27ae60;
-    --error-color: #e74c3c;
-    --info-color: #3498db;
-}
-```
-
-### Adding Custom Components
-```css
-/* Custom component using the design system */
-.custom-component {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    padding: 40px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
-}
-
-.custom-component:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-}
-```
-
-### Responsive Design
-```css
-@media (max-width: 768px) {
-    /* Mobile-specific styles */
-    .header-content {
-        grid-template-columns: 1fr;
-        text-align: center;
-    }
-    
-    .url-input-group {
-        flex-direction: column;
-    }
-}
-```
-
-## Best Practices
-
-1. **Consistency**: Use the provided color palette and spacing system
-2. **Accessibility**: Include proper focus states and ARIA labels
-3. **Performance**: Use the debounce/throttle utilities for frequent events
-4. **Error Handling**: Always handle API errors gracefully
-5. **Analytics**: Use the trackEvent function for user interaction tracking
-6. **Mobile First**: Test on mobile devices first, then enhance for desktop
-
-## File Structure
-```
-your-project/
-├── getchunks-styles.css      # Design system styles
-├── getchunks-patterns.js     # JavaScript patterns
-├── index.html               # Your main page
-├── LOOK_AND_FEEL_GUIDE.md  # Complete design guide
-└── IMPLEMENTATION_GUIDE.md  # This file
-```
-
-This implementation guide provides everything you need to quickly adopt the GetChunks look and feel in your own project while maintaining consistency and professional appearance. 
\ No newline at end of file
diff --git a/LOOK_AND_FEEL_GUIDE.md b/LOOK_AND_FEEL_GUIDE.md
deleted file mode 100644
index 5d77716..0000000
--- a/LOOK_AND_FEEL_GUIDE.md
+++ /dev/null
@@ -1,461 +0,0 @@
-# GetChunks Look & Feel Guide
-
-## Project Overview
-**Web Content Chunker** - A modern web application for extracting and structuring content from web pages into clean, organized JSON chunks. Built with Search Influence branding for professional content analysis and SEO research.
-
-## Design System
-
-### Color Palette
-
-#### Primary Colors
-- **Dark Blue**: `#2c3e50` (Main background)
-- **Lighter Blue**: `#34495e` (Header gradient)
-- **Orange Accent**: `#e67e22` (Primary accent, buttons, highlights)
-- **Orange Dark**: `#d35400` (Button hover states)
-- **Orange Light**: `#f39c12` (Hover effects)
-
-#### Secondary Colors
-- **White**: `#ffffff` (Text on dark backgrounds, content areas)
-- **Light Gray**: `#ecf0f1` (Subtle borders and backgrounds)
-- **Medium Gray**: `#bdc3c7` (Secondary text, placeholders)
-- **Dark Gray**: `#95a5a6` (Footer text)
-- **Success Green**: `#27ae60` (Success states)
-- **Error Red**: `#e74c3c` (Error states)
-- **Info Blue**: `#3498db` (Loading states, links)
-
-#### Content Area Colors
-- **Content Background**: `#ffffff` (White for readability)
-- **Content Text**: `#2c3e50` (Dark for contrast)
-- **Secondary Content**: `#34495e` (Slightly lighter text)
-- **Muted Text**: `#7f8c8d` (Meta information)
-- **Border Gray**: `#dee2e6` (Subtle borders)
-- **Background Gray**: `#f8f9fa` (Light backgrounds)
-
-### Typography
-
-#### Font Stack
-```css
-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-```
-
-#### Font Sizes
-- **Large Headings**: `4rem` (Main title)
-- **Medium Headings**: `2.5rem` (Section titles)
-- **Small Headings**: `1.8rem` (Subsection titles)
-- **Body Text**: `1.1rem` (Main content)
-- **Small Text**: `1rem` (Secondary content)
-- **Meta Text**: `0.95rem` (Labels, metadata)
-- **Code Text**: `14px` (JSON output)
-
-#### Font Weights
-- **Bold**: `800` (Main headings)
-- **Semi-bold**: `600` (Subheadings, buttons)
-- **Medium**: `500` (Labels, navigation)
-- **Regular**: `400` (Body text)
-- **Light**: `300` (Descriptions)
-
-### Layout & Spacing
-
-#### Container System
-- **Max Width**: `1200px`
-- **Side Padding**: `20px`
-- **Section Padding**: `60px 0`
-- **Card Padding**: `40px`
-
-#### Grid System
-- **Header Grid**: `1fr 1fr` (Two-column layout)
-- **Features Grid**: `repeat(auto-fit, minmax(300px, 1fr))`
-- **Responsive Breakpoint**: `768px`
-
-#### Spacing Scale
-- **Small**: `8px`, `12px`, `15px`
-- **Medium**: `20px`, `25px`, `30px`
-- **Large**: `40px`, `50px`, `60px`
-- **Extra Large**: `80px`
-
-### Component Styles
-
-#### Header Design
-```css
-.header {
-    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
-    padding: 80px 0;
-    border-bottom: 4px solid #e67e22;
-    position: relative;
-    overflow: hidden;
-}
-
-.header::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(45deg, transparent 0%, rgba(230, 126, 34, 0.1) 100%);
-}
-```
-
-#### Form Cards
-```css
-.form-card {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    padding: 40px;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-```
-
-#### Input Fields
-```css
-#url-input {
-    padding: 18px 24px;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-radius: 8px;
-    font-size: 16px;
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    transition: all 0.3s ease;
-}
-
-#url-input:focus {
-    outline: none;
-    border-color: #e67e22;
-    background: rgba(255, 255, 255, 0.15);
-    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
-}
-```
-
-#### Buttons
-```css
-.extract-btn {
-    padding: 18px 36px;
-    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.extract-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.4);
-    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
-}
-```
-
-#### Loading States
-```css
-.loading {
-    text-align: center;
-    padding: 50px;
-    background: rgba(52, 152, 219, 0.1);
-    border: 2px solid #3498db;
-    border-radius: 12px;
-}
-
-.loading-spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid rgba(52, 152, 219, 0.3);
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-```
-
-#### Results Display
-```css
-.results-header {
-    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
-    padding: 30px 40px;
-    border-radius: 12px 12px 0 0;
-}
-
-.content-area {
-    background: white;
-    color: #2c3e50;
-    border-radius: 0 0 12px 12px;
-    max-height: 75vh;
-    overflow-y: auto;
-}
-```
-
-#### View Toggle Buttons
-```css
-.view-toggle {
-    display: flex;
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.view-toggle button {
-    padding: 12px 20px;
-    background: transparent;
-    color: white;
-    border: none;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.view-toggle button.active {
-    background: rgba(255, 255, 255, 0.25);
-    color: white;
-    font-weight: 600;
-}
-```
-
-### Content Display Styles
-
-#### Chunks View
-```css
-.big-chunk {
-    background: #f8f9fa;
-    border: 2px solid #e9ecef;
-    border-radius: 12px;
-    margin-bottom: 30px;
-    overflow: hidden;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-.big-chunk-header {
-    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
-    color: white;
-    padding: 20px 30px;
-}
-
-.small-chunk {
-    background: white;
-    border: 1px solid #dee2e6;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 15px;
-    position: relative;
-    transition: all 0.3s ease;
-}
-
-.small-chunk:hover {
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-    transform: translateY(-2px);
-}
-
-.small-chunk-index {
-    position: absolute;
-    top: -8px;
-    left: 15px;
-    background: #e67e22;
-    color: white;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.8rem;
-    font-weight: 600;
-}
-```
-
-#### Webpage View
-```css
-.chunk-title.level-1 {
-    font-size: 2.5rem;
-    color: #2c3e50;
-    border-bottom: 4px solid #e67e22;
-    padding-bottom: 15px;
-}
-
-.chunk-title.level-2 {
-    font-size: 2rem;
-    color: #34495e;
-    border-bottom: 2px solid #3498db;
-    padding-bottom: 10px;
-}
-
-.chunk-title.level-3 {
-    font-size: 1.5rem;
-    color: #555;
-    border-bottom: 1px solid #bdc3c7;
-    padding-bottom: 8px;
-}
-
-.chunk-content {
-    font-size: 1.1rem;
-    line-height: 1.7;
-    color: #2c3e50;
-}
-
-.chunk-content blockquote {
-    border-left: 4px solid #e67e22;
-    padding-left: 25px;
-    margin: 25px 0;
-    font-style: italic;
-    color: #555;
-    background: #f8f9fa;
-    padding: 20px 25px;
-    border-radius: 0 6px 6px 0;
-}
-```
-
-#### JSON Output
-```css
-.json-output {
-    background: #1e1e1e;
-    color: #e6e6e6;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 14px;
-    line-height: 1.6;
-    padding: 0;
-    margin: 0;
-    overflow-x: auto;
-}
-```
-
-### Interactive Elements
-
-#### Hover Effects
-- **Buttons**: `transform: translateY(-2px)` with shadow
-- **Cards**: `transform: translateY(-5px)` for features
-- **Chunks**: `transform: translateY(-2px)` with enhanced shadow
-- **Links**: Color change with underline
-
-#### Transitions
-```css
-transition: all 0.3s ease;
-```
-
-#### Focus States
-- **Inputs**: Orange border with glow effect
-- **Buttons**: Enhanced shadow and color change
-
-### Responsive Design
-
-#### Mobile Breakpoints
-```css
-@media (max-width: 768px) {
-    .header-content {
-        grid-template-columns: 1fr;
-        gap: 30px;
-        text-align: center;
-    }
-    
-    .logo-section h1 {
-        font-size: 2.5rem;
-    }
-    
-    .url-input-group {
-        flex-direction: column;
-    }
-    
-    .results-header {
-        flex-direction: column;
-        text-align: center;
-    }
-}
-```
-
-### Branding Elements
-
-#### Search Influence Logo
-- **Container**: White background with padding and shadow
-- **Logo**: 40px height, auto width
-- **Position**: Top-left of header
-
-#### Color Usage by Brand
-- **Primary Brand**: Orange (`#e67e22`) for CTAs and highlights
-- **Professional**: Dark blues for backgrounds and structure
-- **Success**: Green for positive states
-- **Error**: Red for error states
-
-### Animation & Micro-interactions
-
-#### Loading Animation
-```css
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-```
-
-#### Button States
-- **Default**: Gradient background
-- **Hover**: Lighter gradient with shadow and lift
-- **Disabled**: Reduced opacity
-- **Active**: Enhanced shadow
-
-### Accessibility Features
-
-#### Color Contrast
-- **Text on Dark**: White text on dark backgrounds
-- **Text on Light**: Dark text on white backgrounds
-- **Accent Text**: Orange for important elements
-
-#### Focus Indicators
-- **Inputs**: Orange border with glow
-- **Buttons**: Enhanced shadow on focus
-- **Links**: Underline on hover
-
-### Content Hierarchy
-
-#### Visual Hierarchy
-1. **Main Title**: Large, bold, white
-2. **Tagline**: Medium, orange accent
-3. **Section Headers**: Medium, white
-4. **Content**: Regular weight, appropriate color
-5. **Meta Information**: Smaller, muted color
-
-#### Information Architecture
-- **Header**: Brand + Value Proposition
-- **Form**: Primary action (URL input)
-- **Results**: Three-view system (Webpage, Chunks, JSON)
-- **Features**: Supporting information
-- **Footer**: Links and attribution
-
-### Technical Implementation
-
-#### CSS Organization
-- **Reset**: Box-sizing, margins, padding
-- **Layout**: Container, grid, spacing
-- **Components**: Buttons, forms, cards
-- **States**: Loading, error, success
-- **Responsive**: Mobile adaptations
-
-#### JavaScript Patterns
-- **Event Handling**: Form submission, view toggles
-- **State Management**: Current data, view states
-- **API Integration**: Fetch with error handling
-- **Analytics**: Event tracking for user actions
-
-### File Structure Reference
-
-```
-getchunks/
-├── public/
-│   └── index.html          # Main application (1167 lines)
-├── api/
-│   └── chunk.js            # Backend processing (261 lines)
-├── package.json            # Dependencies and scripts
-├── vercel.json            # Deployment configuration
-└── README.md              # Project documentation
-```
-
-### Key Design Principles
-
-1. **Professional**: Clean, corporate aesthetic with Search Influence branding
-2. **Functional**: Clear hierarchy and intuitive navigation
-3. **Responsive**: Works seamlessly across all devices
-4. **Accessible**: High contrast and clear focus states
-5. **Modern**: Subtle animations and micro-interactions
-6. **Consistent**: Unified color palette and spacing system
-
-This design system creates a professional, trustworthy interface that emphasizes functionality while maintaining visual appeal and brand consistency. 
\ No newline at end of file
diff --git a/README.md b/README.md
index 7d853ba..d9eed03 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Web Content Chunker v3.0.0
+# Web Content Chunker v3.1.0
 
 A web application that extracts and structures content from web pages into clean, organized chunks for RAG, LLM pipelines, and content analysis. Zero AI/LLM dependencies — all improvements are pure code.
 
@@ -31,15 +31,6 @@ A web application that extracts and structures content from web pages into clean
    - **🧩 Chunks**: Structured view showing big chunks and small chunks
    - **📋 JSON**: Raw JSON data for developers
 
-## Recent Updates (v1.2.0)
-
-- ✅ **Enhanced Chunking Algorithm**: Improved content separation between headings
-- ✅ **Three-View Interface**: Added dedicated Chunks view alongside Webpage and JSON views
-- ✅ **Search Influence Branding**: Professional header with official logo and styling
-- ✅ **Analytics Integration**: Vercel Analytics with custom event tracking
-- ✅ **Version Tracking**: Added version comments to all files for better debugging
-- ✅ **Improved Error Handling**: Better error messages and debugging capabilities
-
 ### What Gets Extracted
 - Main article content organized by headings (H1-H6)
 - Paragraphs and text content
@@ -96,11 +87,10 @@ The application generates JSON with this structure:
 
 ## Technology Stack
 
-- **Frontend**: HTML5, CSS3, Vanilla JavaScript
-- **Backend**: Node.js serverless functions (Vercel)
-- **Processing**: Cheerio for HTML parsing, node-fetch for content retrieval
+- **Frontend**: HTML5, CSS3, Vanilla JavaScript (Search Influence design system, shared with AI Website Grader and Ontologizer)
+- **Backend**: Node.js serverless functions (Vercel), native fetch
+- **Processing**: Defuddle for main-content extraction, Cheerio for HTML parsing, gpt-tokenizer for BPE token counts, sbd for sentence boundaries
 - **Deployment**: Vercel edge network for global performance
-- **Styling**: Search Influence branding and responsive design
 
 ## Local Development
 
@@ -108,7 +98,7 @@ If you want to run this locally or contribute:
 
 ```bash
 # Clone the repository
-git clone https://github.com/willscott-v2/getchunks.git
+git clone https://github.com/searchinfluence/getchunks.git
 cd getchunks
 
 # Install dependencies
@@ -170,13 +160,15 @@ We welcome contributions! Feel free to:
 
 ## Version History
 
+- **v3.1.0** (July 2026): Search Influence design system, SSRF guards, input validation, security hardening
+- **v3.0.0** (April 2026): Defuddle extraction, accurate BPE token counts, heading breadcrumbs, source metadata, multiple output formats, feedback widget
 - **v1.2.0** (July 2025): Enhanced chunking, three-view interface, analytics integration
 - **v1.1.0** (July 2025): Search Influence branding, improved UI/UX
 - **v1.0.0** (July 2025): Initial release with core extraction functionality
 
 ## License
 
-ISC License - free to use and modify
+MIT License - free to use and modify
 
 ## Credits
 
diff --git a/api/chunk.js b/api/chunk.js
index 66c1255..de49c79 100644
--- a/api/chunk.js
+++ b/api/chunk.js
@@ -1,9 +1,12 @@
-// Web Content Chunker API v3.0.0
+// Web Content Chunker API v3.1.0
 // Built by Search Influence
 // v3: Defuddle extraction, accurate token counts, sentence-aware splits,
 //     heading breadcrumbs, source metadata, multiple output formats.
+// v3.1: SSRF guards, redirect validation, size caps, input validation,
+//       native fetch with a real timeout.
 
-import fetch from 'node-fetch';
+import { lookup } from 'node:dns/promises';
+import { isIP } from 'node:net';
 import { load } from 'cheerio';
 import { parseHTML } from 'linkedom';
 import { Defuddle } from 'defuddle/node';
@@ -22,6 +25,27 @@ const CHUNK_SIZES = {
   large: { min: 500, max: 1000, target: 750 },
 };
 
+const VALID_OPTIONS = {
+  chunkSize: ['small', 'medium', 'large'],
+  strategy: ['auto', 'heading', 'recursive', 'fixed'],
+  extract: ['auto', 'defuddle', 'cheerio'],
+  format: ['json', 'markdown', 'jsonl', 'langchain'],
+  tokenizer: ['o200k_base', 'cl100k_base', 'none'],
+};
+
+const FETCH_TIMEOUT_MS = 25000;
+const MAX_RESPONSE_BYTES = 5 * 1024 * 1024; // 5MB
+const MAX_REDIRECTS = 5;
+const MAX_OVERLAP_WORDS = 200;
+
+// Errors safe to surface to the client, with an HTTP status.
+class ChunkError extends Error {
+  constructor(status, message) {
+    super(message);
+    this.status = status;
+  }
+}
+
 export default async function handler(req, res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
@@ -36,10 +60,26 @@ export default async function handler(req, res) {
   if (!url) return res.status(400).json({ error: 'URL is required' });
   try { new URL(url); } catch { return res.status(400).json({ error: 'Invalid URL format' }); }
 
+  for (const [key, allowed] of Object.entries(VALID_OPTIONS)) {
+    const value = body[key];
+    if (value !== undefined && value !== null && !allowed.includes(value)) {
+      return res.status(400).json({ error: `Invalid ${key} "${value}" — expected one of: ${allowed.join(', ')}` });
+    }
+  }
+
+  let overlap = null;
+  if (body.overlap !== undefined && body.overlap !== null) {
+    overlap = Number(body.overlap);
+    if (!Number.isFinite(overlap) || overlap < 0 || overlap > MAX_OVERLAP_WORDS) {
+      return res.status(400).json({ error: `Invalid overlap — expected a number between 0 and ${MAX_OVERLAP_WORDS}` });
+    }
+    overlap = Math.round(overlap);
+  }
+
   const options = {
     mode: body.mode || 'auto',
     chunkSize: body.chunkSize || null,
-    overlap: body.overlap !== undefined && body.overlap !== null ? parseInt(body.overlap, 10) : null,
+    overlap,
     strategy: body.strategy || 'auto',
     extract: body.extract || 'auto',
     format: body.format || 'json',
@@ -50,13 +90,116 @@ export default async function handler(req, res) {
     const result = await chunkUrl(url, options);
     return deliverResponse(res, result, options);
   } catch (error) {
+    if (error instanceof ChunkError) {
+      return res.status(error.status).json({ error: error.message });
+    }
+    // Log details server-side only — don't leak internals to the client.
     console.error('Chunking error:', error.message);
     console.error('URL:', url);
-    return res.status(500).json({
-      error: 'Failed to process URL',
-      details: error.message,
-    });
+    return res.status(500).json({ error: 'Failed to process URL' });
+  }
+}
+
+// --- SSRF-guarded fetch ----------------------------------------------------
+
+function isPrivateIp(ip) {
+  const v4 = ip.startsWith('::ffff:') ? ip.slice(7) : ip;
+  if (isIP(v4) === 4) {
+    const [a, b] = v4.split('.').map(Number);
+    return a === 0 || a === 10 || a === 127
+      || (a === 169 && b === 254)              // link-local / cloud metadata
+      || (a === 172 && b >= 16 && b <= 31)
+      || (a === 192 && b === 168)
+      || (a === 100 && b >= 64 && b <= 127);   // CGNAT
   }
+  const lower = ip.toLowerCase();
+  return lower === '::' || lower === '::1'
+    || /^f[cd]/.test(lower)                    // fc00::/7 unique-local
+    || /^fe[89ab]/.test(lower);                // fe80::/10 link-local
+}
+
+async function assertPublicHost(hostname) {
+  const bare = hostname.replace(/^\[|\]$/g, ''); // strip IPv6 brackets
+  if (bare === 'localhost' || bare.endsWith('.localhost') || bare.endsWith('.local') || bare.endsWith('.internal')) {
+    throw new ChunkError(400, 'URL points to a private or internal host');
+  }
+  if (isIP(bare)) {
+    if (isPrivateIp(bare)) throw new ChunkError(400, 'URL points to a private or internal host');
+    return;
+  }
+  let addresses;
+  try {
+    addresses = await lookup(bare, { all: true, verbatim: true });
+  } catch {
+    throw new ChunkError(400, 'Could not resolve the URL hostname');
+  }
+  if (!addresses.length || addresses.some((a) => isPrivateIp(a.address))) {
+    throw new ChunkError(400, 'URL points to a private or internal host');
+  }
+  // Note: a hostile DNS server could still rebind between this check and the
+  // fetch. Full pinning needs a custom dispatcher; this covers realistic abuse.
+}
+
+async function fetchPublicUrl(url) {
+  let current = url;
+  for (let hop = 0; hop <= MAX_REDIRECTS; hop++) {
+    const u = new URL(current);
+    if (u.protocol !== 'http:' && u.protocol !== 'https:') {
+      throw new ChunkError(400, 'Only http and https URLs are supported');
+    }
+    await assertPublicHost(u.hostname);
+
+    let res;
+    try {
+      res = await fetch(u, {
+        headers: { 'User-Agent': 'Web Content Chunker/3.1' },
+        redirect: 'manual',
+        signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+      });
+    } catch (err) {
+      if (err.name === 'TimeoutError' || err.name === 'AbortError') {
+        throw new ChunkError(504, 'The page took too long to respond');
+      }
+      throw new ChunkError(502, 'Could not fetch the URL');
+    }
+
+    if ([301, 302, 303, 307, 308].includes(res.status)) {
+      const location = res.headers.get('location');
+      await res.body?.cancel?.();
+      if (!location) throw new ChunkError(502, `Redirect without a location header (HTTP ${res.status})`);
+      current = new URL(location, u).href; // each hop re-validated at loop top
+      continue;
+    }
+
+    if (!res.ok) throw new ChunkError(502, `The page returned HTTP ${res.status}`);
+
+    const contentType = (res.headers.get('content-type') || '').split(';')[0].trim();
+    if (contentType && !/^(text\/(html|plain|xml)|application\/(xhtml\+xml|xml))$/.test(contentType)) {
+      await res.body?.cancel?.();
+      throw new ChunkError(415, `Unsupported content type: ${contentType}`);
+    }
+
+    return readBodyCapped(res);
+  }
+  throw new ChunkError(502, 'Too many redirects');
+}
+
+async function readBodyCapped(res) {
+  if (!res.body) return '';
+  const reader = res.body.getReader();
+  const chunks = [];
+  let total = 0;
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    total += value.byteLength;
+    if (total > MAX_RESPONSE_BYTES) {
+      await reader.cancel();
+      throw new ChunkError(413, 'Page is too large to process (5MB max)');
+    }
+    chunks.push(value);
+  }
+  return Buffer.concat(chunks).toString('utf-8');
 }
 
 function deliverResponse(res, result, options) {
@@ -79,12 +222,7 @@ function deliverResponse(res, result, options) {
 async function chunkUrl(url, options) {
   const warnings = [];
 
-  const res = await fetch(url, {
-    headers: { 'User-Agent': 'Web Content Chunker/3.0' },
-    timeout: 30000,
-  });
-  if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
-  const html = await res.text();
+  const html = await fetchPublicUrl(url);
 
   const $raw = load(html);
   const source = extractSourceMetadata($raw, url);
@@ -156,8 +294,17 @@ async function selectExtractor(html, url, options, warnings) {
         },
       };
     }
+    // extract=defuddle means defuddle — fail honestly instead of silently
+    // handing back cheerio output labeled as a fallback.
+    if (options.extract === 'defuddle') {
+      throw new ChunkError(422, 'Defuddle could not extract main content from this page — try extract "auto" or "cheerio"');
+    }
     warnings.push('Defuddle returned empty or thin content; falling back to cheerio extraction.');
   } catch (err) {
+    if (err instanceof ChunkError) throw err;
+    if (options.extract === 'defuddle') {
+      throw new ChunkError(422, 'Defuddle failed on this page — try extract "auto" or "cheerio"');
+    }
     warnings.push(`Defuddle failed (${err.message}); falling back to cheerio extraction.`);
   }
 
diff --git a/api/feedback.js b/api/feedback.js
index f945ed4..324c0dd 100644
--- a/api/feedback.js
+++ b/api/feedback.js
@@ -1,6 +1,14 @@
 // Feedback API — posts user feedback to a Slack Incoming Webhook.
 // Env: SLACK_FEEDBACK_WEBHOOK_URL (required to deliver), FEEDBACK_PROJECT_NAME (optional, defaults to "getchunks")
-import fetch from 'node-fetch';
+
+// Escape Slack mrkdwn control characters so user input can't inject
+// <!channel> pings, spoofed <url|label> links, or broken formatting.
+function escapeMrkdwn(text) {
+  return String(text)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
 
 const TYPE_EMOJI = {
   bug: ':bug:',
@@ -38,20 +46,21 @@ async function sendSlackNotification({ type, message, userEmail, pageUrl, userAg
     {
       type: 'section',
       fields: [
-        { type: 'mrkdwn', text: `*From:*\n${userEmail}` },
+        { type: 'mrkdwn', text: `*From:*\n${escapeMrkdwn(userEmail)}` },
         { type: 'mrkdwn', text: `*Type:*\n${TYPE_LABEL[type] || type}` },
       ],
     },
     {
       type: 'section',
-      text: { type: 'mrkdwn', text: `*Message:*\n${message}` },
+      text: { type: 'mrkdwn', text: `*Message:*\n${escapeMrkdwn(message)}` },
     },
   ];
 
   if (pageUrl) {
+    // Plain escaped text — Slack auto-links URLs; no <url|label> syntax to spoof.
     blocks.push({
       type: 'section',
-      text: { type: 'mrkdwn', text: `*Page:*\n<${pageUrl}|${pageUrl}>` },
+      text: { type: 'mrkdwn', text: `*Page:*\n${escapeMrkdwn(pageUrl)}` },
     });
   }
 
@@ -62,7 +71,7 @@ async function sendSlackNotification({ type, message, userEmail, pageUrl, userAg
       elements: [
         {
           type: 'mrkdwn',
-          text: `Submitted ${new Date().toISOString()}${userAgent ? ` · ${userAgent}` : ''}`,
+          text: `Submitted ${new Date().toISOString()}${userAgent ? ` · ${escapeMrkdwn(userAgent)}` : ''}`,
         },
       ],
     },
@@ -112,20 +121,21 @@ export default async function handler(req, res) {
       return res.status(400).json({ error: 'Invalid feedback type.' });
     }
 
-    const userEmail = typeof email === 'string' && email.trim() ? email.trim() : 'Anonymous';
+    const userEmail = typeof email === 'string' && email.trim() ? email.trim().slice(0, 200) : 'Anonymous';
     const userAgent = req.headers['user-agent'] || undefined;
+    const safePageUrl = typeof pageUrl === 'string' && /^https?:\/\//.test(pageUrl) ? pageUrl.slice(0, 500) : undefined;
 
     const result = await sendSlackNotification({
       type,
       message: message.trim(),
       userEmail,
-      pageUrl: typeof pageUrl === 'string' && pageUrl ? pageUrl : undefined,
+      pageUrl: safePageUrl,
       userAgent,
     });
 
     return res.status(200).json({ success: true, delivered: result.delivered });
   } catch (err) {
     console.error('[feedback] handler error:', err);
-    return res.status(500).json({ error: err?.message || 'Internal server error' });
+    return res.status(500).json({ error: 'Internal server error' });
   }
 }
diff --git a/getchunks-patterns.js b/getchunks-patterns.js
deleted file mode 100644
index 9a9bfcf..0000000
--- a/getchunks-patterns.js
+++ /dev/null
@@ -1,569 +0,0 @@
-// GetChunks Interaction Patterns - Extracted JavaScript Patterns
-
-// ===== ANALYTICS TRACKING =====
-function trackEvent(eventName, properties = {}) {
-    if (window.va && typeof window.va.track === 'function') {
-        window.va.track(eventName, properties);
-    } else {
-        // Queue the event for when analytics loads
-        setTimeout(() => {
-            if (window.va && typeof window.va.track === 'function') {
-                window.va.track(eventName, properties);
-            }
-        }, 1000);
-    }
-}
-
-// ===== VIEW TOGGLE SYSTEM =====
-class ViewManager {
-    constructor() {
-        this.currentView = 'webpage';
-        this.views = {
-            webpage: { element: null, button: null },
-            chunks: { element: null, button: null },
-            json: { element: null, button: null }
-        };
-        this.init();
-    }
-
-    init() {
-        // Initialize view elements
-        this.views.webpage.element = document.getElementById('webpage-view');
-        this.views.chunks.element = document.getElementById('chunks-view');
-        this.views.json.element = document.getElementById('json-output');
-        
-        // Initialize view buttons
-        this.views.webpage.button = document.getElementById('webpage-view-btn');
-        this.views.chunks.button = document.getElementById('chunks-view-btn');
-        this.views.json.button = document.getElementById('json-view-btn');
-        
-        // Add event listeners
-        this.views.webpage.button?.addEventListener('click', () => this.showView('webpage'));
-        this.views.chunks.button?.addEventListener('click', () => this.showView('chunks'));
-        this.views.json.button?.addEventListener('click', () => this.showView('json'));
-    }
-
-    showView(viewName) {
-        // Track view change
-        trackEvent('view_changed', { view: viewName });
-        
-        // Hide all views
-        Object.values(this.views).forEach(view => {
-            if (view.element) {
-                view.element.classList.remove('show');
-                view.element.style.display = 'none';
-            }
-            if (view.button) {
-                view.button.classList.remove('active');
-            }
-        });
-        
-        // Show selected view
-        const selectedView = this.views[viewName];
-        if (selectedView.element) {
-            selectedView.element.classList.add('show');
-            selectedView.element.style.display = 'block';
-        }
-        if (selectedView.button) {
-            selectedView.button.classList.add('active');
-        }
-        
-        this.currentView = viewName;
-    }
-}
-
-// ===== FORM HANDLING =====
-class FormHandler {
-    constructor(formId, apiEndpoint) {
-        this.form = document.getElementById(formId);
-        this.apiEndpoint = apiEndpoint;
-        this.submitButton = null;
-        this.loadingElement = null;
-        this.resultsElement = null;
-        this.errorElement = null;
-        this.init();
-    }
-
-    init() {
-        this.submitButton = this.form.querySelector('button[type="submit"]');
-        this.loadingElement = document.getElementById('loading');
-        this.resultsElement = document.getElementById('results');
-        this.errorElement = document.getElementById('error');
-        
-        this.form.addEventListener('submit', (e) => this.handleSubmit(e));
-    }
-
-    async handleSubmit(e) {
-        e.preventDefault();
-        
-        const formData = new FormData(this.form);
-        const url = formData.get('url') || document.getElementById('url-input')?.value;
-        
-        if (!url) return;
-
-        // Reset states
-        this.hideAll();
-        this.showLoading();
-        this.disableSubmit();
-
-        try {
-            const response = await fetch(this.apiEndpoint, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ url })
-            });
-
-            const data = await response.json();
-
-            if (data.success) {
-                this.displayResults(data.data);
-                
-                // Track successful submission
-                trackEvent('content_extracted', {
-                    url: url,
-                    chunks_count: data.data.big_chunks?.length || 0
-                });
-            } else {
-                this.showError(data.error || 'An error occurred while processing the request');
-            }
-        } catch (err) {
-            console.error('Request failed:', err);
-            this.showError('Network error. Please check your connection and try again.');
-        } finally {
-            this.enableSubmit();
-            this.hideLoading();
-        }
-    }
-
-    hideAll() {
-        this.loadingElement?.classList.remove('show');
-        this.resultsElement?.classList.remove('show');
-        this.errorElement?.classList.remove('show');
-    }
-
-    showLoading() {
-        this.loadingElement?.classList.add('show');
-    }
-
-    hideLoading() {
-        this.loadingElement?.classList.remove('show');
-    }
-
-    showError(message) {
-        const errorMessage = document.getElementById('error-message');
-        if (errorMessage) {
-            errorMessage.textContent = message;
-        }
-        this.errorElement?.classList.add('show');
-    }
-
-    disableSubmit() {
-        if (this.submitButton) {
-            this.submitButton.disabled = true;
-        }
-    }
-
-    enableSubmit() {
-        if (this.submitButton) {
-            this.submitButton.disabled = false;
-        }
-    }
-
-    displayResults(data) {
-        // This will be implemented by the specific application
-        console.log('Display results:', data);
-    }
-}
-
-// ===== CONTENT DISPLAY PATTERNS =====
-class ContentDisplay {
-    static displayWebpageView(data, containerId) {
-        const container = document.getElementById(containerId);
-        if (!container) return;
-
-        let html = '';
-        
-        if (data.big_chunks && data.big_chunks.length > 0) {
-            data.big_chunks.forEach(chunk => {
-                html += `<div class="chunk-section">`;
-                
-                // Add title
-                html += `<h${Math.min(chunk.level + 1, 6)} class="chunk-title level-${chunk.level}">${this.escapeHtml(chunk.title)}</h${Math.min(chunk.level + 1, 6)}>`;
-                
-                // Add meta info
-                html += `<div class="chunk-meta">Section Level ${chunk.level} • ${chunk.small_chunks.length} content ${chunk.small_chunks.length === 1 ? 'piece' : 'pieces'}</div>`;
-                
-                // Add content
-                html += `<div class="chunk-content">`;
-                chunk.small_chunks.forEach(content => {
-                    if (content.startsWith('- ')) {
-                        // Handle lists
-                        const listItems = content.split('\n').map(item => {
-                            if (item.startsWith('- ')) {
-                                return `<li>${this.escapeHtml(item.substring(2))}</li>`;
-                            }
-                            return '';
-                        }).filter(Boolean).join('');
-                        html += `<ul>${listItems}</ul>`;
-                    } else if (content.startsWith('> ')) {
-                        // Handle blockquotes
-                        html += `<blockquote>${this.escapeHtml(content.substring(2))}</blockquote>`;
-                    } else {
-                        // Handle regular paragraphs
-                        html += `<p>${this.escapeHtml(content)}</p>`;
-                    }
-                });
-                html += `</div>`;
-                
-                html += `</div>`;
-            });
-        } else {
-            html = '<div class="chunk-section"><p>No content chunks were extracted from this URL. The page may not have structured content or may be protected.</p></div>';
-        }
-        
-        container.innerHTML = html;
-    }
-
-    static displayChunksView(data, containerId) {
-        const container = document.getElementById(containerId);
-        if (!container) return;
-
-        let html = '';
-        
-        if (data.big_chunks && data.big_chunks.length > 0) {
-            data.big_chunks.forEach((chunk, chunkIndex) => {
-                html += `<div class="big-chunk">`;
-                
-                // Big chunk header
-                html += `<div class="big-chunk-header">`;
-                html += `<h3 class="big-chunk-title">${this.escapeHtml(chunk.title)}</h3>`;
-                html += `<div class="big-chunk-meta">Chunk ${chunk.big_chunk_index} • Level ${chunk.level} • ${chunk.small_chunks.length} sections</div>`;
-                html += `</div>`;
-                
-                // Small chunks container
-                html += `<div class="small-chunks-container">`;
-                chunk.small_chunks.forEach((smallChunk, smallIndex) => {
-                    html += `<div class="small-chunk">`;
-                    html += `<div class="small-chunk-index">${smallIndex + 1}</div>`;
-                    html += `<div class="small-chunk-content">`;
-                    
-                    if (smallChunk.startsWith('- ')) {
-                        // Handle lists
-                        const listItems = smallChunk.split('\n').map(item => {
-                            if (item.startsWith('- ')) {
-                                return `<li>${this.escapeHtml(item.substring(2))}</li>`;
-                            }
-                            return '';
-                        }).filter(Boolean).join('');
-                        html += `<ul>${listItems}</ul>`;
-                    } else if (smallChunk.startsWith('> ')) {
-                        // Handle blockquotes
-                        html += `<blockquote>${this.escapeHtml(smallChunk.substring(2))}</blockquote>`;
-                    } else {
-                        // Handle regular content
-                        html += this.escapeHtml(smallChunk);
-                    }
-                    
-                    html += `</div>`;
-                    html += `</div>`;
-                });
-                html += `</div>`;
-                
-                html += `</div>`;
-            });
-        } else {
-            html = '<div class="big-chunk"><div class="big-chunk-header"><h3 class="big-chunk-title">No Chunks Found</h3></div><div class="small-chunks-container"><p>No content chunks were extracted from this URL.</p></div></div>';
-        }
-        
-        container.innerHTML = html;
-    }
-
-    static displayJsonView(data, containerId) {
-        const container = document.getElementById(containerId);
-        if (!container) return;
-
-        const formattedJson = JSON.stringify(data, null, 2);
-        container.textContent = formattedJson;
-    }
-
-    static escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-}
-
-// ===== UTILITY FUNCTIONS =====
-class Utils {
-    static async copyToClipboard(text) {
-        try {
-            await navigator.clipboard.writeText(text);
-            return true;
-        } catch (err) {
-            console.error('Copy failed:', err);
-            // Fallback for older browsers
-            const textArea = document.createElement('textarea');
-            textArea.value = text;
-            document.body.appendChild(textArea);
-            textArea.select();
-            document.execCommand('copy');
-            document.body.removeChild(textArea);
-            return true;
-        }
-    }
-
-    static downloadFile(content, filename, mimeType = 'application/json') {
-        const blob = new Blob([content], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }
-
-    static showNotification(message, type = 'info', duration = 3000) {
-        const notification = document.createElement('div');
-        notification.className = `notification notification-${type}`;
-        notification.textContent = message;
-        
-        // Add styles
-        notification.style.cssText = `
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 12px 20px;
-            border-radius: 6px;
-            color: white;
-            font-weight: 500;
-            z-index: 1000;
-            animation: slideIn 0.3s ease-out;
-        `;
-
-        // Set background color based on type
-        const colors = {
-            success: '#27ae60',
-            error: '#e74c3c',
-            info: '#3498db',
-            warning: '#f39c12'
-        };
-        notification.style.backgroundColor = colors[type] || colors.info;
-
-        document.body.appendChild(notification);
-
-        // Auto remove after duration
-        setTimeout(() => {
-            notification.style.animation = 'slideOut 0.3s ease-in';
-            setTimeout(() => {
-                if (notification.parentNode) {
-                    notification.parentNode.removeChild(notification);
-                }
-            }, 300);
-        }, duration);
-
-        return notification;
-    }
-
-    static debounce(func, wait) {
-        let timeout;
-        return function executedFunction(...args) {
-            const later = () => {
-                clearTimeout(timeout);
-                func(...args);
-            };
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
-        };
-    }
-
-    static throttle(func, limit) {
-        let inThrottle;
-        return function() {
-            const args = arguments;
-            const context = this;
-            if (!inThrottle) {
-                func.apply(context, args);
-                inThrottle = true;
-                setTimeout(() => inThrottle = false, limit);
-            }
-        };
-    }
-}
-
-// ===== ACTION BUTTONS =====
-class ActionButtons {
-    constructor() {
-        this.currentData = null;
-        this.init();
-    }
-
-    init() {
-        // Copy JSON button
-        const copyBtn = document.getElementById('copy-json');
-        if (copyBtn) {
-            copyBtn.addEventListener('click', () => this.copyJson());
-        }
-
-        // Download JSON button
-        const downloadBtn = document.getElementById('download-json');
-        if (downloadBtn) {
-            downloadBtn.addEventListener('click', () => this.downloadJson());
-        }
-
-        // New extraction button
-        const newExtractionBtn = document.getElementById('new-extraction');
-        if (newExtractionBtn) {
-            newExtractionBtn.addEventListener('click', () => this.newExtraction());
-        }
-    }
-
-    setData(data) {
-        this.currentData = data;
-    }
-
-    async copyJson() {
-        if (!this.currentData) return;
-        
-        // Track copy action
-        trackEvent('json_copied');
-        
-        const success = await Utils.copyToClipboard(JSON.stringify(this.currentData, null, 2));
-        
-        if (success) {
-            const copyBtn = document.getElementById('copy-json');
-            if (copyBtn) {
-                copyBtn.textContent = '✅ Copied!';
-                setTimeout(() => {
-                    copyBtn.textContent = '📋 Copy JSON';
-                }, 2000);
-            }
-        }
-    }
-
-    downloadJson() {
-        if (!this.currentData) return;
-        
-        // Track download action
-        trackEvent('json_downloaded');
-        
-        Utils.downloadFile(
-            JSON.stringify(this.currentData, null, 2),
-            'page-chunks.json',
-            'application/json'
-        );
-    }
-
-    newExtraction() {
-        // Track new extraction action
-        trackEvent('new_extraction');
-        
-        // Hide all results
-        const results = document.getElementById('results');
-        const loading = document.getElementById('loading');
-        const error = document.getElementById('error');
-        
-        if (results) results.classList.remove('show');
-        if (loading) loading.classList.remove('show');
-        if (error) error.classList.remove('show');
-        
-        // Clear input
-        const urlInput = document.getElementById('url-input');
-        if (urlInput) {
-            urlInput.value = '';
-            urlInput.focus();
-        }
-        
-        // Reset data
-        this.currentData = null;
-    }
-}
-
-// ===== INITIALIZATION PATTERN =====
-class App {
-    constructor() {
-        this.viewManager = null;
-        this.formHandler = null;
-        this.actionButtons = null;
-        this.currentData = null;
-    }
-
-    init() {
-        // Initialize view manager
-        this.viewManager = new ViewManager();
-        
-        // Initialize form handler
-        this.formHandler = new FormHandler('chunker-form', '/api/chunk');
-        
-        // Initialize action buttons
-        this.actionButtons = new ActionButtons();
-        
-        // Override form handler's display results method
-        this.formHandler.displayResults = (data) => this.displayResults(data);
-        
-        // Focus on input when page loads
-        const urlInput = document.getElementById('url-input');
-        if (urlInput) {
-            urlInput.focus();
-        }
-    }
-
-    displayResults(data) {
-        this.currentData = data;
-        this.actionButtons.setData(data);
-        
-        // Display JSON
-        ContentDisplay.displayJsonView(data, 'json-content');
-        
-        // Display webpage view
-        ContentDisplay.displayWebpageView(data, 'webpage-content');
-        
-        // Display chunks view
-        ContentDisplay.displayChunksView(data, 'chunks-content');
-        
-        // Show results
-        const results = document.getElementById('results');
-        if (results) {
-            results.classList.add('show');
-        }
-        
-        // Show webpage view by default
-        this.viewManager.showView('webpage');
-        
-        // Scroll to results
-        results?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-}
-
-// ===== EXPORT FOR USE IN OTHER PROJECTS =====
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = {
-        ViewManager,
-        FormHandler,
-        ContentDisplay,
-        Utils,
-        ActionButtons,
-        App,
-        trackEvent
-    };
-} else {
-    // Browser environment
-    window.GetChunksPatterns = {
-        ViewManager,
-        FormHandler,
-        ContentDisplay,
-        Utils,
-        ActionButtons,
-        App,
-        trackEvent
-    };
-}
-
-// ===== AUTO-INITIALIZATION =====
-document.addEventListener('DOMContentLoaded', function() {
-    const app = new App();
-    app.init();
-}); 
\ No newline at end of file
diff --git a/getchunks-styles.css b/getchunks-styles.css
deleted file mode 100644
index 108672e..0000000
--- a/getchunks-styles.css
+++ /dev/null
@@ -1,765 +0,0 @@
-/* GetChunks Design System - Extracted Styles */
-
-/* ===== RESET & BASE ===== */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: #2c3e50;
-    color: white;
-    line-height: 1.6;
-}
-
-/* ===== LAYOUT & CONTAINERS ===== */
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-}
-
-/* ===== HEADER DESIGN ===== */
-.header {
-    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
-    padding: 80px 0;
-    text-align: left;
-    border-bottom: 4px solid #e67e22;
-    position: relative;
-    overflow: hidden;
-}
-
-.header::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(45deg, transparent 0%, rgba(230, 126, 34, 0.1) 100%);
-}
-
-.header-content {
-    position: relative;
-    z-index: 2;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 60px;
-    align-items: center;
-}
-
-.logo-container {
-    margin-bottom: 20px;
-    background: white;
-    padding: 12px 20px;
-    border-radius: 8px;
-    display: inline-block;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-}
-
-.si-logo {
-    height: 40px;
-    width: auto;
-    display: block;
-}
-
-.logo-section h1 {
-    font-size: 4rem;
-    font-weight: 800;
-    margin-bottom: 15px;
-    color: white;
-    line-height: 1.1;
-}
-
-.tagline {
-    font-size: 1.8rem;
-    color: #e67e22;
-    font-weight: 600;
-    margin-bottom: 20px;
-    line-height: 1.2;
-}
-
-.header-description {
-    font-size: 1.3rem;
-    color: #bdc3c7;
-    line-height: 1.6;
-    font-weight: 300;
-}
-
-.header-description p {
-    margin: 0;
-}
-
-/* ===== MAIN SECTIONS ===== */
-.main-section {
-    padding: 60px 0;
-}
-
-/* ===== FORM CARDS ===== */
-.form-card {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    padding: 40px;
-    margin-bottom: 40px;
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.form-group {
-    margin-bottom: 25px;
-}
-
-label {
-    display: block;
-    margin-bottom: 12px;
-    font-weight: 600;
-    color: #ecf0f1;
-    font-size: 1.1rem;
-}
-
-/* ===== INPUT FIELDS ===== */
-.url-input-group {
-    display: flex;
-    gap: 15px;
-    flex-wrap: wrap;
-}
-
-#url-input {
-    flex: 1;
-    min-width: 350px;
-    padding: 18px 24px;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-radius: 8px;
-    font-size: 16px;
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-    transition: all 0.3s ease;
-}
-
-#url-input:focus {
-    outline: none;
-    border-color: #e67e22;
-    background: rgba(255, 255, 255, 0.15);
-    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
-}
-
-#url-input::placeholder {
-    color: #bdc3c7;
-}
-
-/* ===== BUTTONS ===== */
-.extract-btn {
-    padding: 18px 36px;
-    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    white-space: nowrap;
-    min-width: 160px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-}
-
-.extract-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.4);
-    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
-}
-
-.extract-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-}
-
-/* ===== LOADING STATES ===== */
-.loading {
-    display: none;
-    text-align: center;
-    padding: 50px;
-    background: rgba(52, 152, 219, 0.1);
-    border: 2px solid #3498db;
-    border-radius: 12px;
-    margin: 30px 0;
-}
-
-.loading.show {
-    display: block;
-}
-
-.loading-spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid rgba(52, 152, 219, 0.3);
-    border-top: 4px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 25px;
-}
-
-.loading h3 {
-    color: #3498db;
-    margin-bottom: 10px;
-    font-size: 1.3rem;
-}
-
-.loading p {
-    color: #bdc3c7;
-    font-size: 1.1rem;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* ===== RESULTS DISPLAY ===== */
-.results {
-    display: none;
-}
-
-.results.show {
-    display: block;
-}
-
-.results-header {
-    background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
-    padding: 30px 40px;
-    border-radius: 12px 12px 0 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 20px;
-}
-
-.results-header h2 {
-    font-size: 1.8rem;
-    font-weight: 600;
-    color: white;
-}
-
-.view-controls {
-    display: flex;
-    gap: 20px;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.view-toggle {
-    display: flex;
-    background: rgba(255, 255, 255, 0.15);
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.view-toggle button {
-    padding: 12px 20px;
-    background: transparent;
-    color: white;
-    border: none;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-size: 14px;
-    font-weight: 500;
-}
-
-.view-toggle button.active {
-    background: rgba(255, 255, 255, 0.25);
-    color: white;
-    font-weight: 600;
-}
-
-.results-actions {
-    display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-}
-
-.action-btn {
-    padding: 10px 18px;
-    background: rgba(255, 255, 255, 0.15);
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 6px;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-weight: 500;
-}
-
-.action-btn:hover {
-    background: rgba(255, 255, 255, 0.25);
-}
-
-/* ===== CONTENT AREAS ===== */
-.content-area {
-    background: white;
-    color: #2c3e50;
-    border-radius: 0 0 12px 12px;
-    max-height: 75vh;
-    overflow-y: auto;
-}
-
-.chunks-view {
-    display: none;
-    padding: 0;
-}
-
-.content-area .webpage-view {
-    display: none;
-    padding: 0;
-}
-
-.content-area .webpage-view.show {
-    display: block !important;
-}
-
-/* ===== CHUNKS VIEW STYLES ===== */
-.chunks-content {
-    padding: 40px;
-}
-
-.big-chunk {
-    background: #f8f9fa;
-    border: 2px solid #e9ecef;
-    border-radius: 12px;
-    margin-bottom: 30px;
-    overflow: hidden;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-.big-chunk-header {
-    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
-    color: white;
-    padding: 20px 30px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.big-chunk-title {
-    font-size: 1.4rem;
-    font-weight: 600;
-    margin: 0;
-}
-
-.big-chunk-meta {
-    background: rgba(255, 255, 255, 0.15);
-    padding: 6px 12px;
-    border-radius: 20px;
-    font-size: 0.85rem;
-    font-weight: 500;
-}
-
-.small-chunks-container {
-    padding: 25px 30px;
-}
-
-.small-chunk {
-    background: white;
-    border: 1px solid #dee2e6;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 15px;
-    position: relative;
-    transition: all 0.3s ease;
-}
-
-.small-chunk:hover {
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-    transform: translateY(-2px);
-}
-
-.small-chunk:last-child {
-    margin-bottom: 0;
-}
-
-.small-chunk-index {
-    position: absolute;
-    top: -8px;
-    left: 15px;
-    background: #e67e22;
-    color: white;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.8rem;
-    font-weight: 600;
-}
-
-.small-chunk-content {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: #2c3e50;
-    margin-top: 8px;
-}
-
-.small-chunk-content ul {
-    margin: 10px 0;
-    padding-left: 20px;
-}
-
-.small-chunk-content li {
-    margin-bottom: 8px;
-    color: #34495e;
-}
-
-.small-chunk-content blockquote {
-    border-left: 3px solid #e67e22;
-    padding-left: 15px;
-    margin: 15px 0;
-    font-style: italic;
-    color: #555;
-    background: #f8f9fa;
-    padding: 15px;
-    border-radius: 0 6px 6px 0;
-}
-
-/* ===== WEBPAGE VIEW STYLES ===== */
-.webpage-content {
-    padding: 50px;
-}
-
-.chunk-section {
-    margin-bottom: 50px;
-    padding-bottom: 40px;
-    border-bottom: 2px solid #ecf0f1;
-}
-
-.chunk-section:last-child {
-    border-bottom: none;
-    margin-bottom: 0;
-}
-
-.chunk-title {
-    font-weight: 700;
-    color: #2c3e50;
-    margin-bottom: 25px;
-    line-height: 1.3;
-}
-
-.chunk-title.level-1 {
-    font-size: 2.5rem;
-    color: #2c3e50;
-    border-bottom: 4px solid #e67e22;
-    padding-bottom: 15px;
-}
-
-.chunk-title.level-2 {
-    font-size: 2rem;
-    color: #34495e;
-    border-bottom: 2px solid #3498db;
-    padding-bottom: 10px;
-}
-
-.chunk-title.level-3 {
-    font-size: 1.5rem;
-    color: #555;
-    border-bottom: 1px solid #bdc3c7;
-    padding-bottom: 8px;
-}
-
-.chunk-meta {
-    font-size: 0.95rem;
-    color: #7f8c8d;
-    margin-bottom: 20px;
-    font-weight: 500;
-    padding: 8px 16px;
-    background: #f8f9fa;
-    border-radius: 6px;
-    display: inline-block;
-}
-
-.chunk-content {
-    font-size: 1.1rem;
-    line-height: 1.7;
-    color: #2c3e50;
-}
-
-.chunk-content p {
-    margin-bottom: 20px;
-    font-weight: 400;
-}
-
-.chunk-content ul {
-    margin: 20px 0;
-    padding-left: 25px;
-}
-
-.chunk-content li {
-    margin-bottom: 12px;
-    color: #34495e;
-    font-weight: 400;
-}
-
-.chunk-content blockquote {
-    border-left: 4px solid #e67e22;
-    padding-left: 25px;
-    margin: 25px 0;
-    font-style: italic;
-    color: #555;
-    background: #f8f9fa;
-    padding: 20px 25px;
-    border-radius: 0 6px 6px 0;
-}
-
-/* ===== JSON OUTPUT ===== */
-.json-output {
-    display: none;
-    background: #1e1e1e;
-    color: #e6e6e6;
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 14px;
-    line-height: 1.6;
-    padding: 0;
-    margin: 0;
-    overflow-x: auto;
-}
-
-.json-content {
-    padding: 40px;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-
-/* ===== ERROR STATES ===== */
-.error {
-    display: none;
-    background: rgba(231, 76, 60, 0.1);
-    border: 2px solid #e74c3c;
-    border-radius: 12px;
-    padding: 25px;
-    margin: 30px 0;
-    color: #e74c3c;
-}
-
-.error.show {
-    display: block;
-}
-
-.error h3 {
-    margin-bottom: 12px;
-    font-size: 1.2rem;
-    font-weight: 600;
-}
-
-.error p {
-    font-size: 1rem;
-    line-height: 1.5;
-}
-
-/* ===== FEATURES SECTION ===== */
-.features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 30px;
-    margin-top: 60px;
-    padding: 60px 0;
-}
-
-.feature {
-    background: rgba(255, 255, 255, 0.05);
-    padding: 40px;
-    border-radius: 12px;
-    text-align: center;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: transform 0.3s ease;
-}
-
-.feature:hover {
-    transform: translateY(-5px);
-}
-
-.feature-icon {
-    font-size: 3rem;
-    margin-bottom: 25px;
-    color: #e67e22;
-}
-
-.feature h3 {
-    font-size: 1.4rem;
-    margin-bottom: 15px;
-    color: white;
-    font-weight: 600;
-}
-
-.feature p {
-    color: #bdc3c7;
-    line-height: 1.6;
-    font-size: 1rem;
-}
-
-/* ===== FOOTER ===== */
-.footer {
-    background: #1a252f;
-    text-align: center;
-    padding: 40px 20px;
-    margin-top: 60px;
-    border-top: 4px solid #e67e22;
-}
-
-.footer p {
-    color: #95a5a6;
-    font-size: 1rem;
-}
-
-.footer a {
-    color: #e67e22;
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.footer a:hover {
-    color: #f39c12;
-    text-decoration: underline;
-}
-
-/* ===== RESPONSIVE DESIGN ===== */
-@media (max-width: 768px) {
-    .header-content {
-        grid-template-columns: 1fr;
-        gap: 30px;
-        text-align: center;
-    }
-
-    .logo-section h1 {
-        font-size: 2.5rem;
-    }
-
-    .tagline {
-        font-size: 1.4rem;
-    }
-
-    .header-description {
-        font-size: 1.1rem;
-    }
-
-    .url-input-group {
-        flex-direction: column;
-    }
-
-    #url-input {
-        min-width: auto;
-    }
-
-    .results-header {
-        flex-direction: column;
-        text-align: center;
-    }
-
-    .view-controls {
-        flex-direction: column;
-        width: 100%;
-    }
-
-    .webpage-content {
-        padding: 30px 20px;
-    }
-
-    .chunk-title.level-1 {
-        font-size: 2rem;
-    }
-
-    .chunk-title.level-2 {
-        font-size: 1.6rem;
-    }
-
-    .features {
-        grid-template-columns: 1fr;
-    }
-}
-
-/* ===== UTILITY CLASSES ===== */
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-
-.mb-0 { margin-bottom: 0; }
-.mb-1 { margin-bottom: 8px; }
-.mb-2 { margin-bottom: 16px; }
-.mb-3 { margin-bottom: 24px; }
-.mb-4 { margin-bottom: 32px; }
-
-.mt-0 { margin-top: 0; }
-.mt-1 { margin-top: 8px; }
-.mt-2 { margin-top: 16px; }
-.mt-3 { margin-top: 24px; }
-.mt-4 { margin-top: 32px; }
-
-.p-0 { padding: 0; }
-.p-1 { padding: 8px; }
-.p-2 { padding: 16px; }
-.p-3 { padding: 24px; }
-.p-4 { padding: 32px; }
-
-/* ===== ANIMATIONS ===== */
-.fade-in {
-    animation: fadeIn 0.3s ease-in;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.slide-up {
-    animation: slideUp 0.3s ease-out;
-}
-
-@keyframes slideUp {
-    from { transform: translateY(20px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-}
-
-/* ===== ACCESSIBILITY ===== */
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-}
-
-/* Focus styles for better accessibility */
-button:focus,
-input:focus,
-textarea:focus,
-select:focus {
-    outline: 2px solid #e67e22;
-    outline-offset: 2px;
-}
-
-/* High contrast mode support */
-@media (prefers-contrast: high) {
-    .header {
-        border-bottom: 4px solid #ffffff;
-    }
-    
-    .extract-btn {
-        border: 2px solid #ffffff;
-    }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-    * {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-} 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fb2546e..e1decbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,22 +1,20 @@
 {
   "name": "@search-influence/web-content-chunker",
-  "version": "2.0.0",
+  "version": "3.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@search-influence/web-content-chunker",
-      "version": "2.0.0",
+      "version": "3.1.0",
       "license": "MIT",
       "dependencies": {
         "cheerio": "^1.0.0-rc.12",
         "defuddle": "^0.16.0",
         "gpt-tokenizer": "^3.4.0",
         "linkedom": "^0.18.12",
-        "node-fetch": "^3.3.2",
         "sbd": "^1.0.19"
       },
-      "devDependencies": {},
       "engines": {
         "node": ">=18.0.0"
       }
@@ -129,15 +127,6 @@
       "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
       "license": "MIT"
     },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
-      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -257,41 +246,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "license": "MIT",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
     "node_modules/gpt-tokenizer": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/gpt-tokenizer/-/gpt-tokenizer-3.4.0.tgz",
@@ -408,44 +362,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "deprecated": "Use your platform's native DOMException instead",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
-    "node_modules/node-fetch": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
-      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
-      "license": "MIT",
-      "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
-      }
-    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -624,15 +540,6 @@
         "node": ">=20.18.1"
       }
     },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
-      "integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
diff --git a/package.json b/package.json
index b9067a0..9d5d3e0 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,6 @@
   "type": "module",
   "main": "api/chunk.js",
   "scripts": {
-    "build": "node scripts/build.js",
     "serve": "python3 -m http.server 8080",
     "demo": "open public/index.html"
   },
@@ -24,17 +23,16 @@
   "homepage": "https://getchunks.searchinfluence.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/willscott-v2/getchunks"
+    "url": "https://github.com/searchinfluence/getchunks"
   },
   "bugs": {
-    "url": "https://github.com/willscott-v2/getchunks/issues"
+    "url": "https://github.com/searchinfluence/getchunks/issues"
   },
   "dependencies": {
     "cheerio": "^1.0.0-rc.12",
     "defuddle": "^0.16.0",
     "gpt-tokenizer": "^3.4.0",
     "linkedom": "^0.18.12",
-    "node-fetch": "^3.3.2",
     "sbd": "^1.0.19"
   },
   "engines": {
diff --git a/public/index.html b/public/index.html
index daf1a1e..840843a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,8 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
     <title>Web Content Chunker - Extract and Structure Web Content</title>
     <meta name="description" content="Extract and structure content from any web page into clean, organized JSON chunks. Perfect for content analysis, SEO research, and data processing.">
-    <!-- Google Tag Manager -->
-    <!-- GTM ID is injected at build time from GTM_ID environment variable -->
+    <!-- Google Tag Manager — shared Search Influence container (same ID as AI Website Grader / Ontologizer) -->
     <script>
         (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -1472,7 +1471,7 @@ <h3>What types of websites can I extract from?</h3>
                 </div>
                 <div class="faq-item">
                     <h3>Is my data secure?</h3>
-                    <p>Yes, we prioritize data security. The content extraction process happens on our secure servers, and we don't store any extracted content or URLs. All processing is done in real-time and results are only displayed in your browser session.</p>
+                    <p>Extraction happens on our servers in real time, and we don't keep the extracted content — results live only in your browser session. Like most web tools, submitted URLs do appear in our usage analytics and short-lived server logs, which we use to keep the service running.</p>
                 </div>
             </div>
         </div>
@@ -1480,7 +1479,7 @@ <h3>Is my data secure?</h3>
 
     <div class="footer">
         <div class="container">
-            <p>Built for content analysis and research • <a href="https://github.com/willscott-v2/getchunks" target="_blank">View Source on GitHub</a> • Open Source & Free to Use</p>
+            <p>Built for content analysis and research • <a href="https://github.com/searchinfluence/getchunks" target="_blank" rel="noopener noreferrer">View Source on GitHub</a> • Open Source & Free to Use</p>
         </div>
     </div>
 
@@ -1559,10 +1558,11 @@ <h3>Is my data secure?</h3>
                 });
             });
 
-            // Overlap slider handler
+            // Overlap slider handler — 0 means Auto; any other value is manual.
+            // (The old check on dataset.auto made manual mode unreachable.)
             overlapSlider.addEventListener('input', function() {
                 const value = parseInt(this.value);
-                if (value === 0 || this.dataset.auto === 'true') {
+                if (value === 0) {
                     overlapValue.textContent = 'Auto';
                     this.dataset.auto = 'true';
                 } else {
@@ -2031,9 +2031,15 @@ <h3>Is my data secure?</h3>
             }
 
             function escapeHtml(text) {
-                const div = document.createElement('div');
-                div.textContent = text;
-                return div.innerHTML;
+                // Escapes quotes too — this output lands in attribute values
+                // (title="", href=""), where the textContent/innerHTML trick
+                // would leave an attribute-injection hole.
+                return String(text)
+                    .replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .replace(/"/g, '&quot;')
+                    .replace(/'/g, '&#39;');
             }
 
             // Focus on input when page loads
diff --git a/scripts/build.js b/scripts/build.js
deleted file mode 100755
index da990b0..0000000
--- a/scripts/build.js
+++ /dev/null
@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-// Build script to inject GTM ID from environment variable into HTML
-import { readFileSync, writeFileSync } from 'fs';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const GTM_ID = process.env.GTM_ID || 'GTM-XXXXXXX';
-const HTML_PATH = join(__dirname, '../public/index.html');
-
-console.log(`Building with GTM ID: ${GTM_ID === 'GTM-XXXXXXX' ? 'PLACEHOLDER (set GTM_ID env var)' : GTM_ID}`);
-
-try {
-  let html = readFileSync(HTML_PATH, 'utf8');
-  
-  // Replace GTM ID in the script tag
-  html = html.replace(
-    /'GTM-XXXXXXX'|'GTM-[A-Z0-9]+'/g,
-    `'${GTM_ID}'`
-  );
-  
-  // Replace GTM ID in the noscript iframe src
-  html = html.replace(
-    /id=GTM-XXXXXXX|id=GTM-[A-Z0-9]+/g,
-    `id=${GTM_ID}`
-  );
-  
-  writeFileSync(HTML_PATH, html, 'utf8');
-  console.log('✓ GTM ID injected successfully');
-} catch (error) {
-  console.error('Error building HTML:', error);
-  process.exit(1);
-}
-
diff --git a/search-influence-components.html b/search-influence-components.html
deleted file mode 100644
index 64c96a3..0000000
--- a/search-influence-components.html
+++ /dev/null
@@ -1,244 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Search Influence Design System - Component Library</title>
-    <link rel="stylesheet" href="search-influence-design-system.css">
-    <style>
-        /* Demo page specific styles */
-        .demo-section {
-            margin: 40px 0;
-            padding: 40px;
-            background: rgba(255, 255, 255, 0.03);
-            border-radius: 12px;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .demo-title {
-            color: #e67e22;
-            font-size: 1.5rem;
-            margin-bottom: 20px;
-            font-weight: 600;
-        }
-        .demo-description {
-            color: #bdc3c7;
-            margin-bottom: 30px;
-            line-height: 1.6;
-        }
-        .code-snippet {
-            background: #1e1e1e;
-            color: #e6e6e6;
-            padding: 20px;
-            border-radius: 8px;
-            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-            font-size: 14px;
-            margin: 20px 0;
-            overflow-x: auto;
-        }
-    </style>
-</head>
-<body>
-    <!-- Header Component Demo -->
-    <div class="si-header">
-        <div class="si-container">
-            <div class="si-header-content">
-                <div class="si-logo-section">
-                    <div class="si-logo-container">
-                        <a href="https://www.searchinfluence.com/" target="_blank" rel="noopener noreferrer">
-                            <img src="https://www.searchinfluence.com/wp-content/uploads/2025/03/si-logo.png" alt="Search Influence" class="si-logo">
-                        </a>
-                    </div>
-                    <h1 class="si-title">Your Project Title</h1>
-                    <div class="si-tagline">Your Compelling Tagline Here</div>
-                </div>
-                <div class="si-description">
-                    <p>Your project description goes here. Describe what your tool or service does and how it helps users achieve their goals.</p>
-                    <a href="https://www.searchinfluence.com" target="_blank" rel="noopener noreferrer">Powered by Search Influence - AI SEO Experts</a>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Main Content -->
-    <div class="si-section">
-        <div class="si-container">
-            <div class="demo-section">
-                <h2 class="demo-title">Search Influence Design System</h2>
-                <p class="demo-description">
-                    This is a complete design system extracted from the Web Content Chunker project. 
-                    It includes all the components, styles, and patterns that make up the polished look and feel.
-                </p>
-            </div>
-
-            <!-- Card Component Demo -->
-            <div class="demo-section">
-                <h3 class="demo-title">Card Component</h3>
-                <p class="demo-description">Elegant cards with glassmorphism effect and hover animations.</p>
-                
-                <div class="si-card">
-                    <form>
-                        <div class="si-form-group">
-                            <label class="si-label" for="demo-input">Input Field Example</label>
-                            <div class="si-input-group">
-                                <input type="text" id="demo-input" class="si-input" placeholder="Enter your text here">
-                                <button type="submit" class="si-btn">Submit</button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-
-                <div class="code-snippet">
-&lt;div class="si-card"&gt;
-    &lt;form&gt;
-        &lt;div class="si-form-group"&gt;
-            &lt;label class="si-label" for="input"&gt;Label&lt;/label&gt;
-            &lt;div class="si-input-group"&gt;
-                &lt;input type="text" class="si-input" placeholder="Placeholder"&gt;
-                &lt;button type="submit" class="si-btn"&gt;Submit&lt;/button&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-    &lt;/form&gt;
-&lt;/div&gt;
-                </div>
-            </div>
-
-            <!-- Button Component Demo -->
-            <div class="demo-section">
-                <h3 class="demo-title">Button Components</h3>
-                <p class="demo-description">Professional buttons with gradient backgrounds and hover effects.</p>
-                
-                <div style="display: flex; gap: 20px; flex-wrap: wrap;">
-                    <button class="si-btn">Primary Button</button>
-                    <button class="si-btn" disabled>Disabled Button</button>
-                    <a href="#" class="si-btn">Link Button</a>
-                </div>
-
-                <div class="code-snippet">
-&lt;button class="si-btn"&gt;Primary Button&lt;/button&gt;
-&lt;button class="si-btn" disabled&gt;Disabled Button&lt;/button&gt;
-&lt;a href="#" class="si-btn"&gt;Link Button&lt;/a&gt;
-                </div>
-            </div>
-
-            <!-- Features Grid Demo -->
-            <div class="demo-section">
-                <h3 class="demo-title">Features Grid</h3>
-                <p class="demo-description">Three-column feature grid that stacks on mobile.</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="si-features">
-        <div class="si-container">
-            <div class="si-feature">
-                <div class="si-feature-icon">🎯</div>
-                <h3>Feature One</h3>
-                <p>Description of your first feature. Explain how it benefits users and what problems it solves.</p>
-            </div>
-            <div class="si-feature">
-                <div class="si-feature-icon">🧹</div>
-                <h3>Feature Two</h3>
-                <p>Description of your second feature. Highlight the key benefits and use cases.</p>
-            </div>
-            <div class="si-feature">
-                <div class="si-feature-icon">⚡</div>
-                <h3>Feature Three</h3>
-                <p>Description of your third feature. Show how it completes your offering.</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="si-section">
-        <div class="si-container">
-            <div class="code-snippet">
-&lt;div class="si-features"&gt;
-    &lt;div class="si-container"&gt;
-        &lt;div class="si-feature"&gt;
-            &lt;div class="si-feature-icon"&gt;🎯&lt;/div&gt;
-            &lt;h3&gt;Feature Title&lt;/h3&gt;
-            &lt;p&gt;Feature description...&lt;/p&gt;
-        &lt;/div&gt;
-        &lt;!-- Repeat for more features --&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-            </div>
-
-            <!-- FAQ Section Demo -->
-            <div class="demo-section">
-                <h3 class="demo-title">FAQ Section</h3>
-                <p class="demo-description">Two-column FAQ grid with hover effects.</p>
-            </div>
-        </div>
-    </div>
-
-    <div class="si-faq-section">
-        <div class="si-container">
-            <h2>Frequently Asked Questions</h2>
-            <div class="si-faq-grid">
-                <div class="si-faq-item">
-                    <h3>Why choose this design system?</h3>
-                    <p>This design system provides a consistent, professional look that's perfect for SaaS tools and corporate applications. It's based on proven design patterns from Search Influence.</p>
-                </div>
-                <div class="si-faq-item">
-                    <h3>How do I implement it?</h3>
-                    <p>Simply include the CSS file and use the provided class names. All components are self-contained and easy to customize through CSS variables.</p>
-                </div>
-                <div class="si-faq-item">
-                    <h3>Is it responsive?</h3>
-                    <p>Yes, all components are fully responsive and work perfectly on desktop, tablet, and mobile devices with thoughtful breakpoints.</p>
-                </div>
-                <div class="si-faq-item">
-                    <h3>Can I customize the colors?</h3>
-                    <p>Absolutely! All colors are defined as CSS variables at the top of the stylesheet, making customization simple and consistent.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="si-section">
-        <div class="si-container">
-            <div class="code-snippet">
-&lt;div class="si-faq-section"&gt;
-    &lt;div class="si-container"&gt;
-        &lt;h2&gt;Frequently Asked Questions&lt;/h2&gt;
-        &lt;div class="si-faq-grid"&gt;
-            &lt;div class="si-faq-item"&gt;
-                &lt;h3&gt;Question?&lt;/h3&gt;
-                &lt;p&gt;Answer...&lt;/p&gt;
-            &lt;/div&gt;
-            &lt;!-- Repeat for more questions --&gt;
-        &lt;/div&gt;
-    &lt;/div&gt;
-&lt;/div&gt;
-            </div>
-
-            <!-- Loading Component Demo -->
-            <div class="demo-section">
-                <h3 class="demo-title">Loading Component</h3>
-                <p class="demo-description">Animated loading spinner for async operations.</p>
-                
-                <div class="si-loading">
-                    <div class="si-loading-spinner"></div>
-                    <h3>Loading...</h3>
-                    <p>Please wait while we process your request.</p>
-                </div>
-
-                <div class="code-snippet">
-&lt;div class="si-loading"&gt;
-    &lt;div class="si-loading-spinner"&gt;&lt;/div&gt;
-    &lt;h3&gt;Loading...&lt;/h3&gt;
-    &lt;p&gt;Please wait while we process your request.&lt;/p&gt;
-&lt;/div&gt;
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Footer Component Demo -->
-    <div class="si-footer">
-        <div class="si-container">
-            <p>Built with the Search Influence Design System • <a href="https://github.com/your-repo" target="_blank">View Source</a> • Open Source & Free to Use</p>
-        </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/search-influence-design-system.css b/search-influence-design-system.css
deleted file mode 100644
index 90e992d..0000000
--- a/search-influence-design-system.css
+++ /dev/null
@@ -1,472 +0,0 @@
-/* Search Influence Design System v1.0.0 */
-/* Based on the Web Content Chunker - Optimized Layout */
-
-/* CSS Variables */
-:root {
-    --si-orange-accent: #e67e22;
-    --si-orange-dark: #d35400;
-    --si-orange-light: #f39c12;
-    --si-dark-blue: #2c3e50;
-    --si-lighter-blue: #34495e;
-    --si-white: #ffffff;
-    --si-light-gray: #ecf0f1;
-    --si-medium-gray: #bdc3c7;
-    --si-dark-gray: #95a5a6;
-    --si-success-green: #27ae60;
-    --si-error-red: #e74c3c;
-    --si-info-blue: #3498db;
-    --si-muted-text: #7f8c8d;
-    --si-border-gray: #dee2e6;
-    --si-background-gray: #f8f9fa;
-    
-    /* Typography */
-    --si-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    
-    /* Spacing Scale */
-    --si-space-xs: 8px;
-    --si-space-sm: 12px;
-    --si-space-md: 20px;
-    --si-space-lg: 30px;
-    --si-space-xl: 40px;
-    --si-space-xxl: 60px;
-    
-    /* Layout */
-    --si-container-max-width: 1200px;
-    --si-container-padding: 20px;
-    --si-border-radius: 8px;
-    --si-border-radius-lg: 12px;
-    
-    /* Transitions */
-    --si-transition: all 0.3s ease;
-}
-
-/* Reset & Base Styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: var(--si-font-stack);
-    background: var(--si-dark-blue);
-    color: var(--si-white);
-    line-height: 1.6;
-}
-
-/* Layout Components */
-.si-container {
-    max-width: var(--si-container-max-width);
-    margin: 0 auto;
-    padding: 0 var(--si-container-padding);
-}
-
-/* Header Component */
-.si-header {
-    background: linear-gradient(135deg, var(--si-lighter-blue) 0%, var(--si-dark-blue) 100%);
-    padding: 50px 0;
-    text-align: left;
-    border-bottom: 4px solid var(--si-orange-accent);
-    position: relative;
-    overflow: hidden;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-}
-
-.si-header::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: linear-gradient(45deg, transparent 0%, rgba(230, 126, 34, 0.1) 100%);
-}
-
-.si-header-content {
-    position: relative;
-    z-index: 2;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--si-space-xxl);
-    align-items: center;
-}
-
-/* Logo Component */
-.si-logo-container {
-    margin-bottom: var(--si-space-md);
-    background: var(--si-white);
-    padding: 12px var(--si-space-md);
-    border-radius: var(--si-border-radius);
-    display: inline-block;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    transition: var(--si-transition);
-}
-
-.si-logo-container:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
-}
-
-.si-logo-container a {
-    text-decoration: none;
-    display: block;
-}
-
-.si-logo {
-    height: 40px;
-    width: auto;
-    display: block;
-    transition: var(--si-transition);
-}
-
-/* Typography Components */
-.si-title {
-    font-size: 4rem;
-    font-weight: 800;
-    margin-bottom: 15px;
-    color: var(--si-white);
-    line-height: 1.1;
-    letter-spacing: -0.02em;
-}
-
-.si-tagline {
-    font-size: 1.8rem;
-    color: var(--si-orange-accent);
-    font-weight: 600;
-    margin-bottom: var(--si-space-md);
-    line-height: 1.2;
-    letter-spacing: -0.01em;
-}
-
-.si-description {
-    font-size: 1.3rem;
-    color: var(--si-medium-gray);
-    line-height: 1.6;
-    font-weight: 300;
-    letter-spacing: 0.01em;
-}
-
-.si-description p {
-    margin: 0;
-    margin-bottom: 15px;
-}
-
-.si-description a {
-    color: var(--si-orange-accent);
-    text-decoration: underline;
-    font-size: 1rem;
-    font-weight: 500;
-    transition: var(--si-transition);
-}
-
-.si-description a:hover {
-    color: var(--si-orange-light);
-    text-decoration: none;
-}
-
-/* Section Components */
-.si-section {
-    padding: var(--si-space-lg) 0;
-}
-
-.si-section--compact {
-    padding: var(--si-space-lg) 0;
-}
-
-/* Card Components */
-.si-card {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: var(--si-border-radius-lg);
-    padding: var(--si-space-xl);
-    margin-bottom: var(--si-space-xl);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-    transition: var(--si-transition);
-}
-
-.si-card:hover {
-    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
-    transform: translateY(-2px);
-}
-
-/* Form Components */
-.si-form-group {
-    margin-bottom: 25px;
-}
-
-.si-label {
-    display: block;
-    margin-bottom: var(--si-space-sm);
-    font-weight: 600;
-    color: var(--si-light-gray);
-    font-size: 1.1rem;
-}
-
-.si-input-group {
-    display: flex;
-    gap: 15px;
-    flex-wrap: wrap;
-}
-
-.si-input {
-    flex: 1;
-    min-width: 350px;
-    padding: 18px 24px;
-    border: 2px solid rgba(255, 255, 255, 0.2);
-    border-radius: var(--si-border-radius);
-    font-size: 16px;
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--si-white);
-    transition: var(--si-transition);
-}
-
-.si-input:focus {
-    outline: none;
-    border-color: var(--si-orange-accent);
-    background: rgba(255, 255, 255, 0.15);
-    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
-}
-
-.si-input::placeholder {
-    color: rgba(255, 255, 255, 0.6);
-}
-
-/* Button Components */
-.si-btn {
-    padding: 18px 36px;
-    background: linear-gradient(135deg, var(--si-orange-accent) 0%, var(--si-orange-dark) 100%);
-    color: var(--si-white);
-    border: none;
-    border-radius: var(--si-border-radius);
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: var(--si-transition);
-    white-space: nowrap;
-    min-width: 160px;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
-    text-decoration: none;
-    display: inline-block;
-    text-align: center;
-}
-
-.si-btn:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.4);
-    background: linear-gradient(135deg, var(--si-orange-light) 0%, var(--si-orange-accent) 100%);
-}
-
-.si-btn:active {
-    transform: translateY(0);
-    box-shadow: 0 2px 10px rgba(230, 126, 34, 0.3);
-}
-
-.si-btn:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    transform: none;
-}
-
-/* Feature Grid Components */
-.si-features {
-    margin-top: var(--si-space-xs);
-    padding: var(--si-space-xl) 0;
-}
-
-.si-features .si-container {
-    display: grid !important;
-    grid-template-columns: repeat(3, 1fr) !important;
-    gap: var(--si-space-lg) !important;
-}
-
-.si-feature {
-    background: rgba(255, 255, 255, 0.05);
-    padding: var(--si-space-xl);
-    border-radius: var(--si-border-radius-lg);
-    text-align: center;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: var(--si-transition);
-    width: 100% !important;
-}
-
-.si-feature:hover {
-    transform: translateY(-5px);
-}
-
-.si-feature-icon {
-    font-size: 3rem;
-    margin-bottom: 25px;
-    color: var(--si-orange-accent);
-}
-
-.si-feature h3 {
-    font-size: 1.4rem;
-    margin-bottom: 15px;
-    color: var(--si-white);
-    font-weight: 600;
-}
-
-.si-feature p {
-    color: var(--si-medium-gray);
-    line-height: 1.6;
-    font-size: 1rem;
-}
-
-/* FAQ Components */
-.si-faq-section {
-    background: rgba(255, 255, 255, 0.02);
-    padding: 80px 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.si-faq-section h2 {
-    text-align: center;
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--si-white);
-    margin-bottom: 50px;
-}
-
-.si-faq-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--si-space-xl);
-}
-
-.si-faq-item {
-    background: rgba(255, 255, 255, 0.05);
-    padding: var(--si-space-lg);
-    border-radius: var(--si-border-radius-lg);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: var(--si-transition);
-}
-
-.si-faq-item:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
-}
-
-.si-faq-item h3 {
-    color: var(--si-orange-accent);
-    font-size: 1.3rem;
-    font-weight: 600;
-    margin-bottom: 15px;
-}
-
-.si-faq-item p {
-    color: var(--si-medium-gray);
-    line-height: 1.6;
-    font-size: 1rem;
-}
-
-/* Footer Component */
-.si-footer {
-    background: #1a252f;
-    text-align: center;
-    padding: var(--si-space-xl) var(--si-space-md);
-    margin-top: var(--si-space-xxl);
-    border-top: 4px solid var(--si-orange-accent);
-}
-
-.si-footer p {
-    color: var(--si-dark-gray);
-    font-size: 1rem;
-}
-
-.si-footer a {
-    color: var(--si-orange-accent);
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.si-footer a:hover {
-    color: var(--si-orange-light);
-    text-decoration: underline;
-}
-
-/* Loading States */
-.si-loading {
-    text-align: center;
-    padding: 50px;
-    background: rgba(52, 152, 219, 0.1);
-    border: 2px solid var(--si-info-blue);
-    border-radius: var(--si-border-radius-lg);
-}
-
-.si-loading-spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid rgba(52, 152, 219, 0.3);
-    border-top: 4px solid var(--si-info-blue);
-    border-radius: 50%;
-    animation: si-spin 1s linear infinite;
-}
-
-@keyframes si-spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-    .si-header-content {
-        grid-template-columns: 1fr;
-        gap: var(--si-space-lg);
-        text-align: center;
-    }
-    
-    .si-title {
-        font-size: 2.5rem;
-    }
-    
-    .si-tagline {
-        font-size: 1.4rem;
-    }
-    
-    .si-description {
-        font-size: 1.1rem;
-    }
-    
-    .si-input-group {
-        flex-direction: column;
-    }
-    
-    .si-input {
-        min-width: auto;
-    }
-    
-    .si-features .si-container {
-        grid-template-columns: 1fr !important;
-    }
-    
-    .si-faq-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .si-faq-section h2 {
-        font-size: 2rem;
-    }
-}
-
-/* Utility Classes */
-.si-text-center { text-align: center; }
-.si-text-left { text-align: left; }
-.si-text-right { text-align: right; }
-
-.si-mt-0 { margin-top: 0; }
-.si-mt-sm { margin-top: var(--si-space-sm); }
-.si-mt-md { margin-top: var(--si-space-md); }
-.si-mt-lg { margin-top: var(--si-space-lg); }
-.si-mt-xl { margin-top: var(--si-space-xl); }
-
-.si-mb-0 { margin-bottom: 0; }
-.si-mb-sm { margin-bottom: var(--si-space-sm); }
-.si-mb-md { margin-bottom: var(--si-space-md); }
-.si-mb-lg { margin-bottom: var(--si-space-lg); }
-.si-mb-xl { margin-bottom: var(--si-space-xl); }
-
-.si-hidden { display: none; }
-.si-visible { display: block; }
\ No newline at end of file
diff --git a/tasks/todo.md b/tasks/todo.md
index 29a23a7..dc5a051 100644
--- a/tasks/todo.md
+++ b/tasks/todo.md
@@ -71,4 +71,31 @@ Source of truth: `ai-website-grader/app/globals.css` + `ontologizer-next/app/sty
 - Headless rendering, batch mode, auth — unchanged known limitations
 
 ## Review section
-(to be filled in when work completes)
+
+**Decisions made (2026-07-21):**
+- GTM `GTM-4G43` verified against grader + ontologizer `.env.local` — it's the shared SI container (legacy short ID). Hardcoded; build-injection machinery deleted.
+- Rate limiting via Vercel WAF rule (dashboard config) — no code-level limiter. Still to be applied in the Vercel dashboard.
+- Legacy design files deleted (recoverable from git history).
+
+**PR 1 — `feature/si-design-system` (#5):** CSS-only token swap in public/index.html to the canonical SI palette; Open Sans; flat orange CTAs; report-green results header; light summary/source cards inside the white content area; logo served locally. Playwright QA at 1440px/375px across landing, advanced options, both result views, feedback modal — all pass.
+
+**PR 2 — `fix/hardening-and-bugs` (stacked on #5):**
+
+Security:
+- api/chunk.js SSRF guards: scheme allowlist (http/https); DNS resolve + private/reserved range block (127/10/172.16/192.168 + 169.254 metadata + 100.64 CGNAT + IPv6 ULA/link-local/loopback); per-hop redirect re-validation via manual redirect loop (max 5); 5MB response cap; content-type allowlist. Verified: localhost/127/metadata/10.x/ftp/file all rejected 400; wikipedia http→https redirect followed to a real 12/29-chunk result.
+- escapeHtml escapes `"` and `'` — closes the `title="${fragment}"` attribute-injection XSS from scraped heading ids. Verified: payload stays inside the title attr, no onmouseover created, hover doesn't fire.
+- Slack mrkdwn escaping in feedback.js (`&<>`) on message/email/pageUrl/user-agent — kills `<!channel>` pings + `<url|label>` spoofing; pageUrl scheme-checked + length-capped.
+- Input validation: allowlist chunkSize/strategy/extract/format/tokenizer → 400 not 500; overlap bounded 0–200.
+- Error leak closed: ChunkError carries safe client text; generic 500s; feedback no longer echoes err.message.
+
+Bugs:
+- Overlap slider Auto-lock fixed — dragging to nonzero exits auto and the value reaches the request body (verified 25→request, 0→Auto).
+- Dead node-fetch `timeout` replaced with native fetch + `AbortSignal.timeout(25s)`; node-fetch removed (6 packages pruned).
+- `extract=defuddle` fails 422 instead of silently falling back to cheerio.
+
+Housekeeping:
+- Deleted scripts/build.js + vercel buildCommand + node-fetch; GTM hardcoded; GTM_SETUP.md rewritten.
+- Deleted ~1,900 lines of unused root design files.
+- README: MIT, searchinfluence/getchunks URLs, stale v1.2 section removed, v3/v3.1 history added; footer link fixed; FAQ "data secure" reworded to acknowledge analytics/logs.
+
+**Deferred:** Vercel WAF rate-limit rule (apply in dashboard); fixture/snapshot tests for split/merge/overlap; nested-content extraction fix for the cheerio fallback path.
diff --git a/vercel.json b/vercel.json
index f72a341..d944391 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,5 +1,4 @@
 {
-  "buildCommand": "npm run build",
   "functions": {
     "api/chunk.js": {
       "maxDuration": 30

From be4d7580ac46e04151d9606743d466b431d11051 Mon Sep 17 00:00:00 2001
From: Will Scott <will@webboss.com>
Date: Tue, 21 Jul 2026 13:13:36 -0500
Subject: [PATCH 2/3] Update SESSION_LOG for v3.1 theme + hardening session

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 SESSION_LOG.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/SESSION_LOG.md b/SESSION_LOG.md
index b04790c..023ab41 100644
--- a/SESSION_LOG.md
+++ b/SESSION_LOG.md
@@ -1,5 +1,23 @@
 # getchunks Session Log
 
+## 2026-07-21 — Sync, full code review, SI theme + hardening (v3.1)
+
+**Started:** repo was 12 commits behind origin/main (org-wide gitleaks rollout, workflow-only). Fast-forwarded; deleted merged branches `feature/v3-modernization` + `fix/ui-polish-v3`. Confirmed `feature/enhanced-chunking` is fully merged (leftover pointer, not open work).
+
+**Full code review** of api/chunk.js, api/feedback.js, public/index.html, configs. Found: SSRF/open-proxy on /api/chunk, attribute-injection XSS via scraped heading ids (escapeHtml didn't escape quotes), Slack mrkdwn injection in feedback, permanently-stuck overlap slider, dead node-fetch timeout, dishonest `extract=defuddle` fallback, README/license drift, source-mutating build script.
+
+**Two stacked PRs opened:**
+- **#5 `feature/si-design-system`** — adopted the canonical SI design system from AI Website Grader + Ontologizer (the grader's stylesheet is literally titled "GetChunks Design System" — theme came home). CSS-only, class names unchanged. Full token block, Open Sans, hero gradient, flat orange CTAs, report-green results header, local logo. Playwright QA at 1440/375px.
+- **#6 `fix/hardening-and-bugs`** (stacked on #5) — SSRF guards (scheme allowlist, DNS + private-range block incl. metadata/CGNAT/IPv6, per-hop redirect validation, 5MB cap, content-type check), escapeHtml quote fix, Slack escaping, input validation (400s not 500s), native fetch + AbortSignal.timeout, extract=defuddle 422, removed node-fetch + build script + ~1,900 lines legacy files, README/GTM cleanup. Verified locally via harness + Playwright. Both PRs pass gitleaks + GitGuardian.
+
+**Decisions:** GTM `GTM-4G43` = shared SI container (verified vs grader/ontologizer .env). Legacy files deleted (git-recoverable). Rate limiting → Vercel WAF rule (dashboard, not yet applied).
+
+**Next steps / open items:**
+- Merge #5 then #6 (order matters — #6 retargets to main after #5 lands).
+- Apply Vercel WAF rate-limit rule on /api/* in the dashboard (deferred, not code).
+- Follow-ups: fixture/snapshot tests for split/merge/overlap; nested-content extraction fix for the cheerio fallback path.
+- `feature/enhanced-chunking` still exists locally + on origin (fully merged) — safe to delete when convenient.
+
 ## 2026-04-14 — Research session: code-only improvements
 
 **Goal:** Determine whether the current `getchunks` solution (cheerio + heading-based chunking) is still a strong approach, or whether code-only improvements (no AI tokens) could make it more useful.

From e4e2ee3c828acd92c05b10914bf635c708b9b77e Mon Sep 17 00:00:00 2001
From: Will Scott <will@webboss.com>
Date: Tue, 21 Jul 2026 18:45:56 -0500
Subject: [PATCH 3/3] =?UTF-8?q?Mark=20rate-limiting=20done=20=E2=80=94=20V?=
 =?UTF-8?q?ercel=20WAF=20rules=20live=20via=20Firewall=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 SESSION_LOG.md | 2 +-
 tasks/todo.md  | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/SESSION_LOG.md b/SESSION_LOG.md
index 023ab41..4c13f93 100644
--- a/SESSION_LOG.md
+++ b/SESSION_LOG.md
@@ -14,7 +14,7 @@
 
 **Next steps / open items:**
 - Merge #5 then #6 (order matters — #6 retargets to main after #5 lands).
-- Apply Vercel WAF rate-limit rule on /api/* in the dashboard (deferred, not code).
+- ~~Apply Vercel WAF rate-limit rule~~ **DONE** — two custom rules live via the Firewall API (`/api/chunk` 20/60s/IP, `/api/feedback` 5/600s/IP, both deny-on-exceed, keyed by IP). Applied with `PATCH /v1/security/firewall/config` after refreshing `vercel login`; the CLI has no firewall command. Managed WAF ruleset untouched.
 - Follow-ups: fixture/snapshot tests for split/merge/overlap; nested-content extraction fix for the cheerio fallback path.
 - `feature/enhanced-chunking` still exists locally + on origin (fully merged) — safe to delete when convenient.
 
diff --git a/tasks/todo.md b/tasks/todo.md
index dc5a051..d98d015 100644
--- a/tasks/todo.md
+++ b/tasks/todo.md
@@ -98,4 +98,6 @@ Housekeeping:
 - Deleted ~1,900 lines of unused root design files.
 - README: MIT, searchinfluence/getchunks URLs, stale v1.2 section removed, v3/v3.1 history added; footer link fixed; FAQ "data secure" reworded to acknowledge analytics/logs.
 
-**Deferred:** Vercel WAF rate-limit rule (apply in dashboard); fixture/snapshot tests for split/merge/overlap; nested-content extraction fix for the cheerio fallback path.
+**Rate limiting — DONE (2026-07-21, via Vercel Firewall API):** Two additive custom rules live on prj_wOIeC5... (team will-scotts-projects, Pro). `chunk-rate-limit`: path pre `/api/chunk`, 20 req/60s/IP → deny. `feedback-rate-limit`: path pre `/api/feedback`, 5 req/600s/IP → deny. firewallEnabled=true, config version 2. Managed WAF ruleset untouched. Applied via `PATCH /v1/security/firewall/config` (rules.insert) after `vercel login` refresh; the CLI has no firewall command. To tune later: edit in the dashboard Firewall tab or re-PATCH.
+
+**Deferred:** fixture/snapshot tests for split/merge/overlap; nested-content extraction fix for the cheerio fallback path.