From 6ec40857c21bcd7023af0e958a7ae96bccad204c Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Wed, 4 Mar 2026 16:57:20 +0000
Subject: [PATCH] feat: add new components and backend updates for full
 Scrapling functionality

Extend types and create new components: BodyEditor, CookiesEditor, AdvancedOptions, BulkScrapePanel, CurlImportModal, ScrapeHistory, ExportMenu, ProxyManager. Update App.tsx, OptionsPanel, ResponsePanel. Extend backend with new API endpoints and fields.

Co-authored-by: Marty Reed <317507+martyr280@users.noreply.github.com>
---
 backend/main.py                             | 280 ++++++++++-
 frontend/src/App.tsx                        | 532 ++++++++++++++------
 frontend/src/components/AdvancedOptions.tsx | 204 ++++++++
 frontend/src/components/BodyEditor.tsx      | 131 +++++
 frontend/src/components/BulkScrapePanel.tsx | 302 +++++++++++
 frontend/src/components/CookiesEditor.tsx   | 152 ++++++
 frontend/src/components/CurlImportModal.tsx | 305 +++++++++++
 frontend/src/components/ExportMenu.tsx      | 136 +++++
 frontend/src/components/OptionsPanel.tsx    |  30 +-
 frontend/src/components/ProxyManager.tsx    | 228 +++++++++
 frontend/src/components/ResponsePanel.tsx   |   6 +-
 frontend/src/components/ScrapeHistory.tsx   | 123 +++++
 frontend/src/types.ts                       |  86 ++++
 13 files changed, 2358 insertions(+), 157 deletions(-)
 create mode 100644 frontend/src/components/AdvancedOptions.tsx
 create mode 100644 frontend/src/components/BodyEditor.tsx
 create mode 100644 frontend/src/components/BulkScrapePanel.tsx
 create mode 100644 frontend/src/components/CookiesEditor.tsx
 create mode 100644 frontend/src/components/CurlImportModal.tsx
 create mode 100644 frontend/src/components/ExportMenu.tsx
 create mode 100644 frontend/src/components/ProxyManager.tsx
 create mode 100644 frontend/src/components/ScrapeHistory.tsx

diff --git a/backend/main.py b/backend/main.py
index 3f4022aa..1cf40558 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -2,6 +2,7 @@
 import os
 import time
 import traceback
+import re
 
 # Add the project root to Python path so Scrapling can be imported
 sys.path.insert(0, os.path.join(os.path.dirname(__file__), ".."))
@@ -9,7 +10,7 @@
 import fastapi
 import fastapi.middleware.cors
 from pydantic import BaseModel
-from typing import Optional
+from typing import Optional, List, Literal
 
 app = fastapi.FastAPI()
 
@@ -34,6 +35,9 @@ class ScrapeRequest(BaseModel):
     proxy: Optional[str] = None
     headers: Optional[dict] = None
     cookies: Optional[dict] = None
+    # Body data
+    body: Optional[str] = None
+    body_type: Optional[str] = None  # json, form, raw
     # Fetcher-specific
     retries: Optional[int] = 3
     retry_delay: Optional[int] = 1
@@ -47,12 +51,38 @@ class ScrapeRequest(BaseModel):
     wait: Optional[int] = None
     disable_resources: bool = False
     wait_selector: Optional[str] = None
+    wait_selector_state: Optional[str] = "visible"  # visible, hidden, attached, detached
     google_search: bool = True
     # StealthyFetcher-specific
     solve_cloudflare: bool = False
     hide_canvas: bool = False
     block_webrtc: bool = False
     allow_webgl: bool = False
+    # Advanced options
+    verify_ssl: bool = True
+    locale: Optional[str] = None
+    useragent: Optional[str] = None
+    real_chrome: bool = False
+    cdp_url: Optional[str] = None
+    timezone_id: Optional[str] = None
+    max_redirects: Optional[int] = 10
+
+
+class BulkScrapeRequest(BaseModel):
+    urls: List[str]
+    fetcher_type: str = "fetcher"
+    method: str = "get"
+    extraction_type: str = "markdown"
+    css_selector: Optional[str] = None
+    main_content_only: bool = True
+    timeout: Optional[int] = 30
+    proxy: Optional[str] = None
+    headers: Optional[dict] = None
+    cookies: Optional[dict] = None
+
+
+class ParseCurlRequest(BaseModel):
+    curl_command: str
 
 
 @app.get("/api/health")
@@ -86,6 +116,19 @@ async def scrape(req: ScrapeRequest):
                 method_kwargs["headers"] = req.headers
             if req.cookies:
                 method_kwargs["cookies"] = req.cookies
+            if not req.verify_ssl:
+                method_kwargs["verify"] = False
+            if req.useragent:
+                method_kwargs["useragent"] = req.useragent
+            if req.max_redirects:
+                method_kwargs["max_redirects"] = req.max_redirects
+            
+            # Handle body data for POST/PUT
+            if req.body and req.method.lower() in ("post", "put"):
+                if req.body_type == "json":
+                    method_kwargs["json"] = req.body
+                else:
+                    method_kwargs["data"] = req.body
 
             method_fn = getattr(Fetcher, req.method.lower(), Fetcher.get)
             response = method_fn(req.url, **method_kwargs)
@@ -104,6 +147,14 @@ async def scrape(req: ScrapeRequest):
                 fetch_kwargs["wait"] = req.wait
             if req.wait_selector:
                 fetch_kwargs["wait_selector"] = req.wait_selector
+                if req.wait_selector_state:
+                    fetch_kwargs["wait_selector_state"] = req.wait_selector_state
+            if req.locale:
+                fetch_kwargs["locale"] = req.locale
+            if req.timezone_id:
+                fetch_kwargs["timezone_id"] = req.timezone_id
+            if req.useragent:
+                fetch_kwargs["useragent"] = req.useragent
 
             response = DynamicFetcher.fetch(req.url, **fetch_kwargs)
 
@@ -124,8 +175,20 @@ async def scrape(req: ScrapeRequest):
                 fetch_kwargs["wait"] = req.wait
             if req.wait_selector:
                 fetch_kwargs["wait_selector"] = req.wait_selector
+                if req.wait_selector_state:
+                    fetch_kwargs["wait_selector_state"] = req.wait_selector_state
             if req.solve_cloudflare:
                 fetch_kwargs["solve_cloudflare"] = True
+            if req.locale:
+                fetch_kwargs["locale"] = req.locale
+            if req.timezone_id:
+                fetch_kwargs["timezone_id"] = req.timezone_id
+            if req.useragent:
+                fetch_kwargs["useragent"] = req.useragent
+            if req.real_chrome:
+                fetch_kwargs["real_chrome"] = True
+            if req.cdp_url:
+                fetch_kwargs["cdp_url"] = req.cdp_url
 
             response = StealthyFetcher.fetch(req.url, **fetch_kwargs)
 
@@ -183,3 +246,218 @@ async def scrape(req: ScrapeRequest):
                 "elapsed": elapsed,
             },
         )
+
+
+@app.post("/api/bulk-scrape")
+async def bulk_scrape(req: BulkScrapeRequest):
+    """
+    Scrape multiple URLs sequentially.
+    Returns a list of results for each URL.
+    """
+    results = []
+    
+    for url in req.urls:
+        start_time = time.time()
+        
+        try:
+            from scrapling.fetchers import Fetcher, DynamicFetcher, StealthyFetcher
+            from scrapling.core.shell import Convertor
+
+            response = None
+
+            if req.fetcher_type == "fetcher":
+                method_kwargs = {
+                    "timeout": req.timeout,
+                }
+                if req.proxy:
+                    method_kwargs["proxy"] = req.proxy
+                if req.headers:
+                    method_kwargs["headers"] = req.headers
+                if req.cookies:
+                    method_kwargs["cookies"] = req.cookies
+
+                method_fn = getattr(Fetcher, req.method.lower(), Fetcher.get)
+                response = method_fn(url, **method_kwargs)
+
+            elif req.fetcher_type == "dynamic":
+                fetch_kwargs = {
+                    "timeout": req.timeout,
+                }
+                if req.proxy:
+                    fetch_kwargs["proxy"] = {"server": req.proxy}
+
+                response = DynamicFetcher.fetch(url, **fetch_kwargs)
+
+            elif req.fetcher_type == "stealthy":
+                fetch_kwargs = {
+                    "timeout": req.timeout,
+                }
+                if req.proxy:
+                    fetch_kwargs["proxy"] = {"server": req.proxy}
+
+                response = StealthyFetcher.fetch(url, **fetch_kwargs)
+
+            else:
+                results.append({
+                    "url": url,
+                    "status": "error",
+                    "error": f"Unknown fetcher type: {req.fetcher_type}",
+                })
+                continue
+
+            # Extract content
+            content_parts = list(
+                Convertor._extract_content(
+                    response,
+                    extraction_type=req.extraction_type,
+                    css_selector=req.css_selector,
+                    main_content_only=req.main_content_only,
+                )
+            )
+            content = "".join(content_parts)
+
+            elapsed = round(time.time() - start_time, 3)
+
+            # Serialize cookies
+            cookies_data = {}
+            if response.cookies:
+                if isinstance(response.cookies, dict):
+                    cookies_data = response.cookies
+                elif isinstance(response.cookies, (list, tuple)):
+                    for c in response.cookies:
+                        if isinstance(c, dict):
+                            cookies_data.update(c)
+
+            # Serialize headers
+            headers_data = {}
+            if response.headers:
+                headers_data = dict(response.headers) if not isinstance(response.headers, dict) else response.headers
+
+            results.append({
+                "url": url,
+                "status": "success",
+                "response": {
+                    "status": response.status,
+                    "reason": response.reason,
+                    "url": response.url,
+                    "content": content,
+                    "headers": headers_data,
+                    "cookies": cookies_data,
+                    "elapsed": elapsed,
+                }
+            })
+
+        except Exception as e:
+            elapsed = round(time.time() - start_time, 3)
+            results.append({
+                "url": url,
+                "status": "error",
+                "error": str(e),
+                "elapsed": elapsed,
+            })
+
+    return {"results": results}
+
+
+@app.post("/api/parse-curl")
+async def parse_curl(req: ParseCurlRequest):
+    """
+    Parse a curl command and extract URL, method, headers, cookies, and body.
+    This is a simple parser - the frontend has a more complete one.
+    """
+    try:
+        curl_str = req.curl_command.strip()
+        
+        if not curl_str.lower().startswith('curl'):
+            return fastapi.responses.JSONResponse(
+                status_code=400,
+                content={"error": "Command must start with 'curl'"},
+            )
+
+        result = {
+            "url": "",
+            "method": "get",
+            "headers": {},
+            "cookies": {},
+            "body": "",
+            "body_type": "none",
+        }
+
+        # Normalize the command (remove line continuations)
+        normalized = re.sub(r'\\\r?\n', ' ', curl_str)
+        normalized = re.sub(r'\s+', ' ', normalized)
+
+        # Extract URL
+        url_match = re.search(r'curl\s+(?:-[^\s]+\s+)*[\'"]?(https?://[^\s\'"]+)[\'"]?', normalized, re.IGNORECASE)
+        if url_match:
+            result["url"] = url_match.group(1).strip('"\'')
+
+        # Extract method
+        method_match = re.search(r'-X\s+[\'"]?(\w+)[\'"]?', normalized, re.IGNORECASE)
+        if not method_match:
+            method_match = re.search(r'--request\s+[\'"]?(\w+)[\'"]?', normalized, re.IGNORECASE)
+        if method_match:
+            result["method"] = method_match.group(1).lower()
+
+        # Extract headers
+        header_pattern = re.compile(r'(?:-H|--header)\s+[\'"]([^\'"]+)[\'"]', re.IGNORECASE)
+        for match in header_pattern.finditer(normalized):
+            header_line = match.group(1)
+            colon_idx = header_line.find(':')
+            if colon_idx != -1:
+                key = header_line[:colon_idx].strip()
+                value = header_line[colon_idx + 1:].strip()
+                
+                if key.lower() == 'cookie':
+                    # Parse cookie header
+                    for cookie_pair in value.split(';'):
+                        eq_idx = cookie_pair.find('=')
+                        if eq_idx != -1:
+                            c_key = cookie_pair[:eq_idx].strip()
+                            c_value = cookie_pair[eq_idx + 1:].strip()
+                            result["cookies"][c_key] = c_value
+                else:
+                    result["headers"][key] = value
+
+        # Extract body data
+        data_match = re.search(r'(?:-d|--data(?:-raw|-binary)?)\s+[\'"]([^\'"]+)[\'"]', normalized, re.IGNORECASE)
+        if not data_match:
+            data_match = re.search(r'(?:-d|--data(?:-raw|-binary)?)\s+([^\s]+)', normalized, re.IGNORECASE)
+        
+        if data_match:
+            result["body"] = data_match.group(1)
+            
+            if result["body"].startswith('{') or result["body"].startswith('['):
+                result["body_type"] = "json"
+            elif '=' in result["body"]:
+                result["body_type"] = "form"
+            else:
+                result["body_type"] = "raw"
+            
+            # If there's body data and method is GET, assume POST
+            if result["method"] == "get":
+                result["method"] = "post"
+
+        # Extract cookies from -b or --cookie
+        cookie_match = re.search(r'(?:-b|--cookie)\s+[\'"]([^\'"]+)[\'"]', normalized, re.IGNORECASE)
+        if cookie_match:
+            for cookie_pair in cookie_match.group(1).split(';'):
+                eq_idx = cookie_pair.find('=')
+                if eq_idx != -1:
+                    c_key = cookie_pair[:eq_idx].strip()
+                    c_value = cookie_pair[eq_idx + 1:].strip()
+                    result["cookies"][c_key] = c_value
+
+        if not result["url"]:
+            return fastapi.responses.JSONResponse(
+                status_code=400,
+                content={"error": "Could not extract URL from curl command"},
+            )
+
+        return result
+
+    except Exception as e:
+        return fastapi.responses.JSONResponse(
+            status_code=500,
+            content={"error": str(e), "traceback": traceback.format_exc()},
+        )
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1099f862..26af3286 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,13 +1,32 @@
-import { useState, useCallback } from 'react'
-import { Send, RotateCcw, FileCode, Hash, SlidersHorizontal, Braces } from 'lucide-react'
+import { useState, useCallback, useEffect } from 'react'
+import { Send, RotateCcw, FileCode, SlidersHorizontal, Braces, FileText, Terminal, History, Shield, Cookie, Layers } from 'lucide-react'
 import FetcherSelector from './components/FetcherSelector'
 import HeaderEditor from './components/HeaderEditor'
 import OptionsPanel from './components/OptionsPanel'
 import ResponsePanel from './components/ResponsePanel'
-import type { ScrapeRequest, ScrapeResponse, ScrapeError, HeaderPair, HttpMethod, ExtractionType, FetcherType } from './types'
-import { DEFAULT_REQUEST } from './types'
+import BulkScrapePanel from './components/BulkScrapePanel'
+import CurlImportModal from './components/CurlImportModal'
+import BodyEditor from './components/BodyEditor'
+import CookiesEditor from './components/CookiesEditor'
+import ScrapeHistory from './components/ScrapeHistory'
+import ProxyManager from './components/ProxyManager'
+import type { 
+  ScrapeRequest, 
+  ScrapeResponse, 
+  ScrapeError, 
+  HeaderPair, 
+  HttpMethod, 
+  ExtractionType, 
+  FetcherType,
+  ParsedCurl,
+  ScrapeHistoryItem,
+  ProxyConfig,
+  BodyType,
+} from './types'
+import { DEFAULT_REQUEST, DEFAULT_PROXY_CONFIG } from './types'
 
-type ConfigTab = 'basic' | 'headers' | 'options'
+type MainMode = 'single' | 'bulk'
+type ConfigTab = 'basic' | 'headers' | 'cookies' | 'body' | 'options' | 'proxies'
 
 const HTTP_METHODS: { value: HttpMethod; label: string; color: string }[] = [
   { value: 'get', label: 'GET', color: 'text-status-success' },
@@ -16,13 +35,44 @@ const HTTP_METHODS: { value: HttpMethod; label: string; color: string }[] = [
   { value: 'delete', label: 'DELETE', color: 'text-status-error' },
 ]
 
+const HISTORY_STORAGE_KEY = 'scrapling_history'
+const MAX_HISTORY_ITEMS = 20
+
+function loadHistory(): ScrapeHistoryItem[] {
+  try {
+    const stored = localStorage.getItem(HISTORY_STORAGE_KEY)
+    return stored ? JSON.parse(stored) : []
+  } catch {
+    return []
+  }
+}
+
+function saveHistory(history: ScrapeHistoryItem[]) {
+  try {
+    localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(history.slice(0, MAX_HISTORY_ITEMS)))
+  } catch {
+    // localStorage might be full or disabled
+  }
+}
+
 export default function App() {
+  const [mainMode, setMainMode] = useState<MainMode>('single')
   const [request, setRequest] = useState<ScrapeRequest>({ ...DEFAULT_REQUEST })
   const [response, setResponse] = useState<ScrapeResponse | null>(null)
   const [error, setError] = useState<ScrapeError | null>(null)
   const [loading, setLoading] = useState(false)
   const [configTab, setConfigTab] = useState<ConfigTab>('basic')
   const [headerPairs, setHeaderPairs] = useState<HeaderPair[]>([])
+  const [cookiePairs, setCookiePairs] = useState<HeaderPair[]>([])
+  const [showCurlModal, setShowCurlModal] = useState(false)
+  const [history, setHistory] = useState<ScrapeHistoryItem[]>(loadHistory)
+  const [showHistory, setShowHistory] = useState(false)
+  const [proxyConfig, setProxyConfig] = useState<ProxyConfig>({ ...DEFAULT_PROXY_CONFIG })
+
+  // Save history to localStorage whenever it changes
+  useEffect(() => {
+    saveHistory(history)
+  }, [history])
 
   const updateRequest = useCallback((updates: Partial<ScrapeRequest>) => {
     setRequest((prev) => ({ ...prev, ...updates }))
@@ -37,6 +87,7 @@ export default function App() {
     setResponse(null)
     setError(null)
     setHeaderPairs([])
+    setCookiePairs([])
   }, [])
 
   const handleScrape = useCallback(async () => {
@@ -52,13 +103,31 @@ export default function App() {
       if (h.key.trim()) headersObj[h.key.trim()] = h.value
     }
 
+    // Build cookies from pairs
+    const cookiesObj: Record<string, string> = {}
+    for (const c of cookiePairs) {
+      if (c.key.trim()) cookiesObj[c.key.trim()] = c.value
+    }
+
+    // Get proxy from rotation if enabled
+    let proxy = request.proxy.trim() || undefined
+    if (proxyConfig.enabled && proxyConfig.proxies.length > 0) {
+      // Simple round-robin for now
+      const proxyIndex = Math.floor(Math.random() * proxyConfig.proxies.length)
+      const selectedProxy = proxyConfig.proxies[proxyIndex]
+      proxy = `${proxyConfig.protocol}://${selectedProxy}`
+    }
+
     const payload = {
       ...request,
       headers: Object.keys(headersObj).length > 0 ? headersObj : undefined,
+      cookies: Object.keys(cookiesObj).length > 0 ? cookiesObj : undefined,
       css_selector: request.css_selector.trim() || undefined,
-      proxy: request.proxy.trim() || undefined,
+      proxy,
       wait_selector: request.wait_selector.trim() || undefined,
       wait: request.wait || undefined,
+      body: request.body_type !== 'none' ? request.body_content : undefined,
+      body_type: request.body_type !== 'none' ? request.body_type : undefined,
     }
 
     try {
@@ -73,7 +142,22 @@ export default function App() {
       if (!res.ok) {
         setError(data as ScrapeError)
       } else {
-        setResponse(data as ScrapeResponse)
+        const responseData = data as ScrapeResponse
+        setResponse(responseData)
+        
+        // Add to history
+        const historyItem: ScrapeHistoryItem = {
+          id: crypto.randomUUID(),
+          url: request.url,
+          method: request.method,
+          fetcher_type: request.fetcher_type,
+          status: responseData.status,
+          elapsed: responseData.elapsed,
+          timestamp: Date.now(),
+          request: { ...request },
+          response: responseData,
+        }
+        setHistory((prev) => [historyItem, ...prev.slice(0, MAX_HISTORY_ITEMS - 1)])
       }
     } catch (err) {
       setError({
@@ -82,12 +166,57 @@ export default function App() {
     } finally {
       setLoading(false)
     }
-  }, [request, headerPairs])
+  }, [request, headerPairs, cookiePairs, proxyConfig])
+
+  const handleCurlImport = useCallback((parsed: ParsedCurl, newHeaders: HeaderPair[], newCookies: HeaderPair[]) => {
+    updateRequest({
+      url: parsed.url,
+      method: parsed.method,
+      body_type: parsed.body_type,
+      body_content: parsed.body,
+    })
+    setHeaderPairs(newHeaders)
+    setCookiePairs(newCookies)
+  }, [updateRequest])
+
+  const handleHistoryRestore = useCallback((item: ScrapeHistoryItem) => {
+    setRequest({ ...item.request })
+    setResponse(item.response)
+    setError(null)
+    setShowHistory(false)
+    
+    // Restore headers
+    const newHeaders: HeaderPair[] = Object.entries(item.request.headers || {}).map(([key, value]) => ({
+      key,
+      value,
+      id: crypto.randomUUID(),
+    }))
+    setHeaderPairs(newHeaders)
+    
+    // Restore cookies
+    const newCookies: HeaderPair[] = Object.entries(item.request.cookies || {}).map(([key, value]) => ({
+      key,
+      value,
+      id: crypto.randomUUID(),
+    }))
+    setCookiePairs(newCookies)
+  }, [])
+
+  const handleHistoryClear = useCallback(() => {
+    setHistory([])
+  }, [])
+
+  const handleHistoryRemove = useCallback((id: string) => {
+    setHistory((prev) => prev.filter((item) => item.id !== id))
+  }, [])
 
   const configTabs: { id: ConfigTab; label: string; icon: React.ReactNode }[] = [
     { id: 'basic', label: 'Basic', icon: <SlidersHorizontal size={14} /> },
     { id: 'headers', label: 'Headers', icon: <Braces size={14} /> },
+    { id: 'cookies', label: 'Cookies', icon: <Cookie size={14} /> },
+    { id: 'body', label: 'Body', icon: <FileText size={14} /> },
     { id: 'options', label: 'Options', icon: <SlidersHorizontal size={14} /> },
+    { id: 'proxies', label: 'Proxies', icon: <Shield size={14} /> },
   ]
 
   return (
@@ -103,168 +232,256 @@ export default function App() {
             <p className="text-[11px] text-zinc-500">Web Scraping Interface</p>
           </div>
         </div>
-        <button
-          onClick={handleReset}
-          className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 rounded-lg hover:bg-surface-200 transition-colors cursor-pointer"
-        >
-          <RotateCcw size={13} />
-          Reset
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowHistory(!showHistory)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg transition-colors cursor-pointer ${
+              showHistory 
+                ? 'bg-accent text-surface' 
+                : 'text-zinc-400 hover:text-zinc-200 hover:bg-surface-200'
+            }`}
+          >
+            <History size={13} />
+            History
+            {history.length > 0 && (
+              <span className="px-1.5 py-0.5 bg-surface-300 rounded text-[10px]">{history.length}</span>
+            )}
+          </button>
+          <button
+            onClick={handleReset}
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 rounded-lg hover:bg-surface-200 transition-colors cursor-pointer"
+          >
+            <RotateCcw size={13} />
+            Reset
+          </button>
+        </div>
       </header>
 
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col gap-4 p-6">
-        {/* Fetcher Selector */}
-        <section>
-          <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
-            Fetcher Type
-          </label>
-          <FetcherSelector selected={request.fetcher_type} onChange={handleFetcherChange} />
-        </section>
-
-        {/* URL Bar */}
-        <section className="flex gap-2">
-          {request.fetcher_type === 'fetcher' && (
-            <select
-              value={request.method}
-              onChange={(e) => updateRequest({ method: e.target.value as HttpMethod })}
-              className="bg-surface-100 border border-border rounded-xl px-3 py-3 text-sm font-mono font-medium focus:outline-none focus:border-accent/50 transition-colors cursor-pointer appearance-none min-w-[100px] text-center"
-              style={{ color: HTTP_METHODS.find((m) => m.value === request.method)?.color === 'text-status-success' ? '#22c55e' : HTTP_METHODS.find((m) => m.value === request.method)?.color === 'text-amber-400' ? '#fbbf24' : HTTP_METHODS.find((m) => m.value === request.method)?.color === 'text-blue-400' ? '#60a5fa' : '#ef4444' }}
-            >
-              {HTTP_METHODS.map((m) => (
-                <option key={m.value} value={m.value}>
-                  {m.label}
-                </option>
-              ))}
-            </select>
-          )}
-          <div className="flex-1 relative">
-            <input
-              type="url"
-              value={request.url}
-              onChange={(e) => updateRequest({ url: e.target.value })}
-              onKeyDown={(e) => e.key === 'Enter' && handleScrape()}
-              placeholder="https://example.com"
-              className="w-full bg-surface-100 border border-border rounded-xl px-4 py-3 text-sm font-mono text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors"
-            />
-          </div>
+      {/* Mode Tabs */}
+      <div className="px-6 pt-4">
+        <div className="inline-flex items-center p-1 bg-surface-100 rounded-xl border border-border">
+          <button
+            onClick={() => setMainMode('single')}
+            className={`
+              flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer
+              ${mainMode === 'single'
+                ? 'bg-accent text-surface'
+                : 'text-zinc-400 hover:text-zinc-200'
+              }
+            `}
+          >
+            <Send size={14} />
+            Single Request
+          </button>
           <button
-            onClick={handleScrape}
-            disabled={loading || !request.url.trim()}
-            className="flex items-center gap-2 px-6 py-3 bg-accent text-surface font-medium text-sm rounded-xl hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
+            onClick={() => setMainMode('bulk')}
+            className={`
+              flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer
+              ${mainMode === 'bulk'
+                ? 'bg-accent text-surface'
+                : 'text-zinc-400 hover:text-zinc-200'
+              }
+            `}
           >
-            <Send size={15} />
-            Scrape
+            <Layers size={14} />
+            Bulk Scrape
           </button>
-        </section>
-
-        {/* Two-column layout: Config + Response */}
-        <div className="flex-1 flex gap-4 min-h-0" style={{ height: 'calc(100vh - 320px)' }}>
-          {/* Config Panel */}
-          <aside className="w-80 shrink-0 flex flex-col bg-surface-100 rounded-xl border border-border overflow-hidden">
-            {/* Config Tabs */}
-            <div className="flex border-b border-border">
-              {configTabs.map((t) => (
-                <button
-                  key={t.id}
-                  onClick={() => setConfigTab(t.id)}
-                  className={`
-                    flex-1 flex items-center justify-center gap-1.5 px-3 py-2.5 text-xs font-medium transition-colors cursor-pointer
-                    ${configTab === t.id
-                      ? 'text-accent border-b-2 border-accent -mb-px'
-                      : 'text-zinc-500 hover:text-zinc-300'
-                    }
-                  `}
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col gap-4 p-6 pt-4">
+        {showHistory ? (
+          <div className="flex-1 bg-surface-100 rounded-xl border border-border overflow-hidden">
+            <ScrapeHistory
+              history={history}
+              onRestore={handleHistoryRestore}
+              onClear={handleHistoryClear}
+              onRemove={handleHistoryRemove}
+            />
+          </div>
+        ) : mainMode === 'bulk' ? (
+          <BulkScrapePanel 
+            baseRequest={request} 
+            onBaseRequestChange={updateRequest} 
+          />
+        ) : (
+          <>
+            {/* Fetcher Selector */}
+            <section>
+              <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
+                Fetcher Type
+              </label>
+              <FetcherSelector selected={request.fetcher_type} onChange={handleFetcherChange} />
+            </section>
+
+            {/* URL Bar */}
+            <section className="flex gap-2">
+              {request.fetcher_type === 'fetcher' && (
+                <select
+                  value={request.method}
+                  onChange={(e) => updateRequest({ method: e.target.value as HttpMethod })}
+                  className="bg-surface-100 border border-border rounded-xl px-3 py-3 text-sm font-mono font-medium focus:outline-none focus:border-accent/50 transition-colors cursor-pointer appearance-none min-w-[100px] text-center"
+                  style={{ color: HTTP_METHODS.find((m) => m.value === request.method)?.color === 'text-status-success' ? '#22c55e' : HTTP_METHODS.find((m) => m.value === request.method)?.color === 'text-amber-400' ? '#fbbf24' : HTTP_METHODS.find((m) => m.value === request.method)?.color === 'text-blue-400' ? '#60a5fa' : '#ef4444' }}
                 >
-                  {t.icon}
-                  {t.label}
-                </button>
-              ))}
-            </div>
+                  {HTTP_METHODS.map((m) => (
+                    <option key={m.value} value={m.value}>
+                      {m.label}
+                    </option>
+                  ))}
+                </select>
+              )}
+              <div className="flex-1 relative">
+                <input
+                  type="url"
+                  value={request.url}
+                  onChange={(e) => updateRequest({ url: e.target.value })}
+                  onKeyDown={(e) => e.key === 'Enter' && handleScrape()}
+                  placeholder="https://example.com"
+                  className="w-full bg-surface-100 border border-border rounded-xl px-4 py-3 text-sm font-mono text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors"
+                />
+              </div>
+              <button
+                onClick={() => setShowCurlModal(true)}
+                className="flex items-center gap-2 px-4 py-3 bg-surface-100 border border-border text-zinc-400 hover:text-zinc-200 font-medium text-sm rounded-xl hover:bg-surface-200 transition-colors cursor-pointer"
+                title="Import from cURL"
+              >
+                <Terminal size={15} />
+                cURL
+              </button>
+              <button
+                onClick={handleScrape}
+                disabled={loading || !request.url.trim()}
+                className="flex items-center gap-2 px-6 py-3 bg-accent text-surface font-medium text-sm rounded-xl hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
+              >
+                <Send size={15} />
+                Scrape
+              </button>
+            </section>
+
+            {/* Two-column layout: Config + Response */}
+            <div className="flex-1 flex gap-4 min-h-0" style={{ height: 'calc(100vh - 380px)' }}>
+              {/* Config Panel */}
+              <aside className="w-80 shrink-0 flex flex-col bg-surface-100 rounded-xl border border-border overflow-hidden">
+                {/* Config Tabs */}
+                <div className="flex flex-wrap border-b border-border">
+                  {configTabs.map((t) => (
+                    <button
+                      key={t.id}
+                      onClick={() => setConfigTab(t.id)}
+                      className={`
+                        flex items-center justify-center gap-1 px-3 py-2.5 text-xs font-medium transition-colors cursor-pointer
+                        ${configTab === t.id
+                          ? 'text-accent border-b-2 border-accent -mb-px'
+                          : 'text-zinc-500 hover:text-zinc-300'
+                        }
+                      `}
+                    >
+                      {t.icon}
+                      {t.label}
+                    </button>
+                  ))}
+                </div>
 
-            {/* Config Content */}
-            <div className="flex-1 overflow-auto p-4">
-              {configTab === 'basic' && (
-                <div className="flex flex-col gap-4">
-                  <div className="flex flex-col gap-1">
-                    <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
-                      Extraction Type
-                    </label>
-                    <div className="flex gap-1.5">
-                      {(['markdown', 'html', 'text'] as ExtractionType[]).map((type) => (
+                {/* Config Content */}
+                <div className="flex-1 overflow-auto p-4">
+                  {configTab === 'basic' && (
+                    <div className="flex flex-col gap-4">
+                      <div className="flex flex-col gap-1">
+                        <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
+                          Extraction Type
+                        </label>
+                        <div className="flex gap-1.5">
+                          {(['markdown', 'html', 'text'] as ExtractionType[]).map((type) => (
+                            <button
+                              key={type}
+                              onClick={() => updateRequest({ extraction_type: type })}
+                              className={`
+                                flex-1 py-2 text-xs font-mono rounded-lg transition-colors cursor-pointer
+                                ${request.extraction_type === type
+                                  ? 'bg-accent text-surface font-medium'
+                                  : 'bg-surface-200 text-zinc-400 hover:text-zinc-300 hover:bg-surface-300'
+                                }
+                              `}
+                            >
+                              {type}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="flex flex-col gap-1">
+                        <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
+                          CSS Selector
+                        </label>
+                        <input
+                          type="text"
+                          value={request.css_selector}
+                          onChange={(e) => updateRequest({ css_selector: e.target.value })}
+                          placeholder="body, .content, #main"
+                          className="bg-surface-50 border border-border rounded-lg px-3 py-2 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors"
+                        />
+                        <span className="text-[11px] text-zinc-600">Filter results to specific elements</span>
+                      </div>
+
+                      <label className="flex items-center justify-between gap-3 cursor-pointer group">
+                        <div className="flex flex-col">
+                          <span className="text-sm text-zinc-300 group-hover:text-zinc-200 transition-colors">Main Content Only</span>
+                          <span className="text-xs text-zinc-600">{'Extract from <body>, strip noise'}</span>
+                        </div>
                         <button
-                          key={type}
-                          onClick={() => updateRequest({ extraction_type: type })}
+                          type="button"
+                          role="switch"
+                          aria-checked={request.main_content_only}
+                          onClick={() => updateRequest({ main_content_only: !request.main_content_only })}
                           className={`
-                            flex-1 py-2 text-xs font-mono rounded-lg transition-colors cursor-pointer
-                            ${request.extraction_type === type
-                              ? 'bg-accent text-surface font-medium'
-                              : 'bg-surface-200 text-zinc-400 hover:text-zinc-300 hover:bg-surface-300'
-                            }
+                            relative w-9 h-5 rounded-full transition-colors shrink-0 cursor-pointer
+                            ${request.main_content_only ? 'bg-accent' : 'bg-surface-300'}
                           `}
                         >
-                          {type}
+                          <span
+                            className={`
+                              absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform
+                              ${request.main_content_only ? 'translate-x-4' : 'translate-x-0'}
+                            `}
+                          />
                         </button>
-                      ))}
+                      </label>
                     </div>
-                  </div>
-
-                  <div className="flex flex-col gap-1">
-                    <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
-                      CSS Selector
-                    </label>
-                    <input
-                      type="text"
-                      value={request.css_selector}
-                      onChange={(e) => updateRequest({ css_selector: e.target.value })}
-                      placeholder="body, .content, #main"
-                      className="bg-surface-50 border border-border rounded-lg px-3 py-2 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors"
+                  )}
+                  {configTab === 'headers' && (
+                    <HeaderEditor headers={headerPairs} onChange={setHeaderPairs} />
+                  )}
+                  {configTab === 'cookies' && (
+                    <CookiesEditor cookies={cookiePairs} onChange={setCookiePairs} />
+                  )}
+                  {configTab === 'body' && (
+                    <BodyEditor
+                      bodyType={request.body_type}
+                      bodyContent={request.body_content}
+                      onTypeChange={(type: BodyType) => updateRequest({ body_type: type })}
+                      onContentChange={(content: string) => updateRequest({ body_content: content })}
                     />
-                    <span className="text-[11px] text-zinc-600">Filter results to specific elements</span>
-                  </div>
-
-                  <label className="flex items-center justify-between gap-3 cursor-pointer group">
-                    <div className="flex flex-col">
-                      <span className="text-sm text-zinc-300 group-hover:text-zinc-200 transition-colors">Main Content Only</span>
-                      <span className="text-xs text-zinc-600">{'Extract from <body>, strip noise'}</span>
-                    </div>
-                    <button
-                      type="button"
-                      role="switch"
-                      aria-checked={request.main_content_only}
-                      onClick={() => updateRequest({ main_content_only: !request.main_content_only })}
-                      className={`
-                        relative w-9 h-5 rounded-full transition-colors shrink-0 cursor-pointer
-                        ${request.main_content_only ? 'bg-accent' : 'bg-surface-300'}
-                      `}
-                    >
-                      <span
-                        className={`
-                          absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform
-                          ${request.main_content_only ? 'translate-x-4' : 'translate-x-0'}
-                        `}
-                      />
-                    </button>
-                  </label>
+                  )}
+                  {configTab === 'options' && (
+                    <OptionsPanel request={request} onChange={updateRequest} />
+                  )}
+                  {configTab === 'proxies' && (
+                    <ProxyManager config={proxyConfig} onChange={setProxyConfig} />
+                  )}
                 </div>
-              )}
-              {configTab === 'headers' && (
-                <HeaderEditor headers={headerPairs} onChange={setHeaderPairs} />
-              )}
-              {configTab === 'options' && (
-                <OptionsPanel request={request} onChange={updateRequest} />
-              )}
+              </aside>
+
+              {/* Response Panel */}
+              <ResponsePanel
+                response={response}
+                error={error}
+                loading={loading}
+                extractionType={request.extraction_type}
+              />
             </div>
-          </aside>
-
-          {/* Response Panel */}
-          <ResponsePanel
-            response={response}
-            error={error}
-            loading={loading}
-            extractionType={request.extraction_type}
-          />
-        </div>
+          </>
+        )}
       </main>
 
       {/* Footer */}
@@ -282,6 +499,13 @@ export default function App() {
           {' '}v0.4.1
         </p>
       </footer>
+
+      {/* Curl Import Modal */}
+      <CurlImportModal
+        isOpen={showCurlModal}
+        onClose={() => setShowCurlModal(false)}
+        onImport={handleCurlImport}
+      />
     </div>
   )
 }
diff --git a/frontend/src/components/AdvancedOptions.tsx b/frontend/src/components/AdvancedOptions.tsx
new file mode 100644
index 00000000..640b4f12
--- /dev/null
+++ b/frontend/src/components/AdvancedOptions.tsx
@@ -0,0 +1,204 @@
+import type { ScrapeRequest, WaitSelectorState } from '../types'
+
+interface Props {
+  request: ScrapeRequest
+  onChange: (updates: Partial<ScrapeRequest>) => void
+}
+
+function Toggle({ label, checked, onChange, description }: {
+  label: string
+  checked: boolean
+  onChange: (v: boolean) => void
+  description?: string
+}) {
+  return (
+    <label className="flex items-center justify-between gap-3 cursor-pointer group">
+      <div className="flex flex-col">
+        <span className="text-sm text-zinc-300 group-hover:text-zinc-200 transition-colors">{label}</span>
+        {description && <span className="text-xs text-zinc-600">{description}</span>}
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        onClick={() => onChange(!checked)}
+        className={`
+          relative w-9 h-5 rounded-full transition-colors shrink-0 cursor-pointer
+          ${checked ? 'bg-accent' : 'bg-surface-300'}
+        `}
+      >
+        <span
+          className={`
+            absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform
+            ${checked ? 'translate-x-4' : 'translate-x-0'}
+          `}
+        />
+      </button>
+    </label>
+  )
+}
+
+function TextInput({ label, value, onChange, placeholder, description }: {
+  label: string
+  value: string
+  onChange: (v: string) => void
+  placeholder?: string
+  description?: string
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-sm text-zinc-300">{label}</label>
+      {description && <span className="text-xs text-zinc-600">{description}</span>}
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="bg-surface-50 border border-border rounded-lg px-3 py-1.5 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors w-full"
+      />
+    </div>
+  )
+}
+
+function NumberInput({ label, value, onChange, min, max, description }: {
+  label: string
+  value: number | null
+  onChange: (v: number | null) => void
+  min?: number
+  max?: number
+  description?: string
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-sm text-zinc-300">{label}</label>
+      {description && <span className="text-xs text-zinc-600">{description}</span>}
+      <input
+        type="number"
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value === '' ? null : Number(e.target.value))}
+        min={min}
+        max={max}
+        className="bg-surface-50 border border-border rounded-lg px-3 py-1.5 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors w-full"
+      />
+    </div>
+  )
+}
+
+function SelectInput<T extends string>({ label, value, onChange, options, description }: {
+  label: string
+  value: T
+  onChange: (v: T) => void
+  options: { label: string; value: T }[]
+  description?: string
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-sm text-zinc-300">{label}</label>
+      {description && <span className="text-xs text-zinc-600">{description}</span>}
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value as T)}
+        className="bg-surface-50 border border-border rounded-lg px-3 py-1.5 text-sm font-mono text-zinc-300 focus:outline-none focus:border-accent/50 transition-colors w-full appearance-none cursor-pointer"
+      >
+        {options.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+export default function AdvancedOptions({ request, onChange }: Props) {
+  const showBrowserOptions = request.fetcher_type === 'dynamic' || request.fetcher_type === 'stealthy'
+
+  return (
+    <div className="flex flex-col gap-4 pt-3 border-t border-border">
+      <span className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Advanced Options</span>
+
+      {/* SSL & Security */}
+      <Toggle
+        label="Verify SSL"
+        checked={request.verify_ssl}
+        onChange={(v) => onChange({ verify_ssl: v })}
+        description="Verify SSL certificates"
+      />
+
+      {/* Network */}
+      <NumberInput
+        label="Max Redirects"
+        value={request.max_redirects}
+        onChange={(v) => onChange({ max_redirects: v ?? 10 })}
+        min={0}
+        max={50}
+        description="Maximum number of redirects to follow"
+      />
+
+      {/* User Agent */}
+      <TextInput
+        label="User Agent"
+        value={request.useragent}
+        onChange={(v) => onChange({ useragent: v })}
+        placeholder="Custom user agent string"
+        description="Override default browser user agent"
+      />
+
+      {/* Browser-specific options */}
+      {showBrowserOptions && (
+        <>
+          <div className="h-px bg-border" />
+          <span className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Browser Options</span>
+
+          <SelectInput<WaitSelectorState>
+            label="Wait Selector State"
+            value={request.wait_selector_state}
+            onChange={(v) => onChange({ wait_selector_state: v })}
+            options={[
+              { label: 'Visible', value: 'visible' },
+              { label: 'Hidden', value: 'hidden' },
+              { label: 'Attached', value: 'attached' },
+              { label: 'Detached', value: 'detached' },
+            ]}
+            description="State to wait for when using wait selector"
+          />
+
+          <TextInput
+            label="Locale"
+            value={request.locale}
+            onChange={(v) => onChange({ locale: v })}
+            placeholder="en-US"
+            description="Browser locale for content negotiation"
+          />
+
+          <TextInput
+            label="Timezone ID"
+            value={request.timezone_id}
+            onChange={(v) => onChange({ timezone_id: v })}
+            placeholder="America/New_York"
+            description="Override browser timezone"
+          />
+
+          {request.fetcher_type === 'stealthy' && (
+            <>
+              <Toggle
+                label="Real Chrome"
+                checked={request.real_chrome}
+                onChange={(v) => onChange({ real_chrome: v })}
+                description="Use real Chrome installation instead of bundled"
+              />
+
+              <TextInput
+                label="CDP URL"
+                value={request.cdp_url}
+                onChange={(v) => onChange({ cdp_url: v })}
+                placeholder="ws://localhost:9222"
+                description="Connect to existing Chrome DevTools Protocol"
+              />
+            </>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/BodyEditor.tsx b/frontend/src/components/BodyEditor.tsx
new file mode 100644
index 00000000..c65cc87e
--- /dev/null
+++ b/frontend/src/components/BodyEditor.tsx
@@ -0,0 +1,131 @@
+import { useState, useEffect } from 'react'
+import { AlertCircle, Check } from 'lucide-react'
+import type { BodyType } from '../types'
+
+interface Props {
+  bodyType: BodyType
+  bodyContent: string
+  onTypeChange: (type: BodyType) => void
+  onContentChange: (content: string) => void
+}
+
+const BODY_TYPES: { value: BodyType; label: string }[] = [
+  { value: 'none', label: 'None' },
+  { value: 'json', label: 'JSON' },
+  { value: 'form', label: 'Form' },
+  { value: 'raw', label: 'Raw' },
+]
+
+function isValidJson(str: string): boolean {
+  if (!str.trim()) return true
+  try {
+    JSON.parse(str)
+    return true
+  } catch {
+    return false
+  }
+}
+
+export default function BodyEditor({ bodyType, bodyContent, onTypeChange, onContentChange }: Props) {
+  const [jsonValid, setJsonValid] = useState(true)
+
+  useEffect(() => {
+    if (bodyType === 'json') {
+      setJsonValid(isValidJson(bodyContent))
+    } else {
+      setJsonValid(true)
+    }
+  }, [bodyType, bodyContent])
+
+  const getPlaceholder = () => {
+    switch (bodyType) {
+      case 'json':
+        return '{\n  "key": "value"\n}'
+      case 'form':
+        return 'key1=value1&key2=value2'
+      case 'raw':
+        return 'Raw body content...'
+      default:
+        return ''
+    }
+  }
+
+  const formatJson = () => {
+    if (bodyType === 'json' && bodyContent.trim()) {
+      try {
+        const parsed = JSON.parse(bodyContent)
+        onContentChange(JSON.stringify(parsed, null, 2))
+      } catch {
+        // Invalid JSON, do nothing
+      }
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Request Body</span>
+        {bodyType === 'json' && (
+          <div className="flex items-center gap-2">
+            {bodyContent.trim() && (
+              <span className={`flex items-center gap-1 text-xs ${jsonValid ? 'text-status-success' : 'text-status-error'}`}>
+                {jsonValid ? <Check size={12} /> : <AlertCircle size={12} />}
+                {jsonValid ? 'Valid' : 'Invalid'}
+              </span>
+            )}
+            <button
+              onClick={formatJson}
+              disabled={!jsonValid || !bodyContent.trim()}
+              className="px-2 py-1 text-xs text-accent hover:text-accent-hover disabled:text-zinc-600 disabled:cursor-not-allowed rounded-md hover:bg-accent-muted transition-colors cursor-pointer"
+            >
+              Format
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Body type selector */}
+      <div className="flex gap-1">
+        {BODY_TYPES.map((type) => (
+          <button
+            key={type.value}
+            onClick={() => onTypeChange(type.value)}
+            className={`
+              flex-1 py-1.5 text-xs font-medium rounded-lg transition-colors cursor-pointer
+              ${bodyType === type.value
+                ? 'bg-accent text-surface'
+                : 'bg-surface-200 text-zinc-400 hover:text-zinc-300 hover:bg-surface-300'
+              }
+            `}
+          >
+            {type.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Body content editor */}
+      {bodyType !== 'none' && (
+        <textarea
+          value={bodyContent}
+          onChange={(e) => onContentChange(e.target.value)}
+          placeholder={getPlaceholder()}
+          rows={6}
+          className={`
+            w-full bg-surface-50 border rounded-lg px-3 py-2 text-sm font-mono text-zinc-300 
+            placeholder:text-zinc-600 focus:outline-none transition-colors resize-y min-h-[100px]
+            ${bodyType === 'json' && !jsonValid && bodyContent.trim()
+              ? 'border-status-error focus:border-status-error'
+              : 'border-border focus:border-accent/50'
+            }
+          `}
+        />
+      )}
+
+      {bodyType === 'form' && (
+        <span className="text-[11px] text-zinc-600">
+          Use key=value pairs separated by {'&'}
+        </span>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/BulkScrapePanel.tsx b/frontend/src/components/BulkScrapePanel.tsx
new file mode 100644
index 00000000..f0fa52e9
--- /dev/null
+++ b/frontend/src/components/BulkScrapePanel.tsx
@@ -0,0 +1,302 @@
+import { useState, useCallback } from 'react'
+import { Play, Square, CheckCircle2, XCircle, Clock, Download, Trash2 } from 'lucide-react'
+import type { ScrapeRequest, BulkScrapeResult, ExtractionType, FetcherType } from '../types'
+import FetcherSelector from './FetcherSelector'
+
+interface Props {
+  baseRequest: ScrapeRequest
+  onBaseRequestChange: (updates: Partial<ScrapeRequest>) => void
+}
+
+export default function BulkScrapePanel({ baseRequest, onBaseRequestChange }: Props) {
+  const [urlsText, setUrlsText] = useState('')
+  const [results, setResults] = useState<BulkScrapeResult[]>([])
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState({ current: 0, total: 0 })
+  const [abortController, setAbortController] = useState<AbortController | null>(null)
+
+  const urls = urlsText
+    .split('\n')
+    .map((u) => u.trim())
+    .filter((u) => u && (u.startsWith('http://') || u.startsWith('https://')))
+
+  const handleBulkScrape = useCallback(async () => {
+    if (urls.length === 0) return
+
+    const controller = new AbortController()
+    setAbortController(controller)
+    setLoading(true)
+    setResults([])
+    setProgress({ current: 0, total: urls.length })
+
+    const newResults: BulkScrapeResult[] = []
+
+    for (let i = 0; i < urls.length; i++) {
+      if (controller.signal.aborted) break
+
+      const url = urls[i]
+      setProgress({ current: i + 1, total: urls.length })
+
+      try {
+        const payload = {
+          ...baseRequest,
+          url,
+          css_selector: baseRequest.css_selector.trim() || undefined,
+          proxy: baseRequest.proxy.trim() || undefined,
+          wait_selector: baseRequest.wait_selector.trim() || undefined,
+          wait: baseRequest.wait || undefined,
+        }
+
+        const res = await fetch('/api/scrape', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+          signal: controller.signal,
+        })
+
+        const data = await res.json()
+
+        if (!res.ok) {
+          newResults.push({
+            url,
+            status: 'error',
+            error: data.error || 'Request failed',
+          })
+        } else {
+          newResults.push({
+            url,
+            status: 'success',
+            response: data,
+          })
+        }
+      } catch (err) {
+        if ((err as Error).name === 'AbortError') break
+        newResults.push({
+          url,
+          status: 'error',
+          error: err instanceof Error ? err.message : 'Unknown error',
+        })
+      }
+
+      setResults([...newResults])
+    }
+
+    setLoading(false)
+    setAbortController(null)
+  }, [urls, baseRequest])
+
+  const handleStop = useCallback(() => {
+    abortController?.abort()
+    setLoading(false)
+    setAbortController(null)
+  }, [abortController])
+
+  const handleClear = useCallback(() => {
+    setResults([])
+    setProgress({ current: 0, total: 0 })
+  }, [])
+
+  const handleExportAll = useCallback(() => {
+    const successResults = results.filter((r) => r.status === 'success' && r.response)
+    if (successResults.length === 0) return
+
+    const exportData = successResults.map((r) => ({
+      url: r.url,
+      status: r.response?.status,
+      content: r.response?.content,
+      elapsed: r.response?.elapsed,
+    }))
+
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `bulk-scrape-${Date.now()}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+  }, [results])
+
+  const successCount = results.filter((r) => r.status === 'success').length
+  const errorCount = results.filter((r) => r.status === 'error').length
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      {/* Config Section */}
+      <div className="flex flex-col gap-4">
+        <div>
+          <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
+            Fetcher Type
+          </label>
+          <FetcherSelector
+            selected={baseRequest.fetcher_type}
+            onChange={(type: FetcherType) => onBaseRequestChange({ fetcher_type: type })}
+          />
+        </div>
+
+        <div>
+          <label className="block text-xs font-medium text-zinc-400 uppercase tracking-wider mb-2">
+            Extraction Type
+          </label>
+          <div className="flex gap-1.5">
+            {(['markdown', 'html', 'text'] as ExtractionType[]).map((type) => (
+              <button
+                key={type}
+                onClick={() => onBaseRequestChange({ extraction_type: type })}
+                className={`
+                  flex-1 py-2 text-xs font-mono rounded-lg transition-colors cursor-pointer
+                  ${baseRequest.extraction_type === type
+                    ? 'bg-accent text-surface font-medium'
+                    : 'bg-surface-200 text-zinc-400 hover:text-zinc-300 hover:bg-surface-300'
+                  }
+                `}
+              >
+                {type}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* URL Input */}
+      <div className="flex-1 flex flex-col gap-2 min-h-0">
+        <div className="flex items-center justify-between">
+          <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
+            URLs (one per line)
+          </label>
+          <span className="text-xs text-zinc-500">{urls.length} valid URL{urls.length !== 1 ? 's' : ''}</span>
+        </div>
+        <textarea
+          value={urlsText}
+          onChange={(e) => setUrlsText(e.target.value)}
+          placeholder={'https://example.com\nhttps://example.org\nhttps://example.net'}
+          className="flex-1 min-h-[150px] bg-surface-100 border border-border rounded-xl px-4 py-3 text-sm font-mono text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors resize-none"
+          disabled={loading}
+        />
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        {loading ? (
+          <button
+            onClick={handleStop}
+            className="flex items-center gap-2 px-4 py-2.5 bg-status-error text-white font-medium text-sm rounded-xl hover:bg-status-error/90 transition-colors cursor-pointer"
+          >
+            <Square size={15} />
+            Stop
+          </button>
+        ) : (
+          <button
+            onClick={handleBulkScrape}
+            disabled={urls.length === 0}
+            className="flex items-center gap-2 px-4 py-2.5 bg-accent text-surface font-medium text-sm rounded-xl hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
+          >
+            <Play size={15} />
+            Scrape All ({urls.length})
+          </button>
+        )}
+
+        {results.length > 0 && (
+          <>
+            <button
+              onClick={handleExportAll}
+              disabled={successCount === 0}
+              className="flex items-center gap-2 px-4 py-2.5 bg-surface-200 text-zinc-300 font-medium text-sm rounded-xl hover:bg-surface-300 disabled:opacity-40 disabled:cursor-not-allowed transition-colors cursor-pointer"
+            >
+              <Download size={15} />
+              Export
+            </button>
+            <button
+              onClick={handleClear}
+              className="flex items-center gap-2 px-4 py-2.5 bg-surface-200 text-zinc-300 font-medium text-sm rounded-xl hover:bg-surface-300 transition-colors cursor-pointer"
+            >
+              <Trash2 size={15} />
+              Clear
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Progress */}
+      {loading && (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-zinc-400">Progress</span>
+            <span className="text-zinc-300 font-mono">{progress.current} / {progress.total}</span>
+          </div>
+          <div className="h-2 bg-surface-200 rounded-full overflow-hidden">
+            <div
+              className="h-full bg-accent transition-all duration-300"
+              style={{ width: `${(progress.current / progress.total) * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Results */}
+      {results.length > 0 && (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Results</span>
+            <div className="flex items-center gap-3 text-xs">
+              <span className="flex items-center gap-1 text-status-success">
+                <CheckCircle2 size={12} />
+                {successCount}
+              </span>
+              <span className="flex items-center gap-1 text-status-error">
+                <XCircle size={12} />
+                {errorCount}
+              </span>
+            </div>
+          </div>
+
+          <div className="max-h-[300px] overflow-auto rounded-lg border border-border">
+            <table className="w-full text-sm">
+              <thead className="sticky top-0 bg-surface-100">
+                <tr className="border-b border-border">
+                  <th className="text-left py-2 px-3 text-xs font-medium text-zinc-400 uppercase tracking-wider">Status</th>
+                  <th className="text-left py-2 px-3 text-xs font-medium text-zinc-400 uppercase tracking-wider">URL</th>
+                  <th className="text-left py-2 px-3 text-xs font-medium text-zinc-400 uppercase tracking-wider">Time</th>
+                </tr>
+              </thead>
+              <tbody>
+                {results.map((r, i) => (
+                  <tr key={i} className="border-b border-border/50 hover:bg-surface-100 transition-colors">
+                    <td className="py-2 px-3">
+                      {r.status === 'success' ? (
+                        <span className="flex items-center gap-1.5 text-status-success">
+                          <CheckCircle2 size={14} />
+                          {r.response?.status}
+                        </span>
+                      ) : (
+                        <span className="flex items-center gap-1.5 text-status-error">
+                          <XCircle size={14} />
+                          Error
+                        </span>
+                      )}
+                    </td>
+                    <td className="py-2 px-3 font-mono text-xs text-zinc-400 max-w-[300px] truncate" title={r.url}>
+                      {r.url}
+                    </td>
+                    <td className="py-2 px-3">
+                      {r.response?.elapsed && (
+                        <span className="flex items-center gap-1 text-xs text-zinc-500">
+                          <Clock size={12} />
+                          {r.response.elapsed}s
+                        </span>
+                      )}
+                      {r.error && (
+                        <span className="text-xs text-status-error" title={r.error}>
+                          {r.error.slice(0, 30)}...
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/CookiesEditor.tsx b/frontend/src/components/CookiesEditor.tsx
new file mode 100644
index 00000000..9a897959
--- /dev/null
+++ b/frontend/src/components/CookiesEditor.tsx
@@ -0,0 +1,152 @@
+import { useState } from 'react'
+import { Plus, X, FileText } from 'lucide-react'
+
+interface CookiePair {
+  key: string
+  value: string
+  id: string
+}
+
+interface Props {
+  cookies: CookiePair[]
+  onChange: (cookies: CookiePair[]) => void
+}
+
+export default function CookiesEditor({ cookies, onChange }: Props) {
+  const [showImport, setShowImport] = useState(false)
+  const [importValue, setImportValue] = useState('')
+
+  const addPair = () => {
+    onChange([...cookies, { key: '', value: '', id: crypto.randomUUID() }])
+  }
+
+  const removePair = (id: string) => {
+    onChange(cookies.filter((c) => c.id !== id))
+  }
+
+  const updatePair = (id: string, field: 'key' | 'value', val: string) => {
+    onChange(cookies.map((c) => (c.id === id ? { ...c, [field]: val } : c)))
+  }
+
+  const handleImport = () => {
+    if (!importValue.trim()) return
+
+    // Parse cookie string format: "name1=value1; name2=value2"
+    const newCookies: CookiePair[] = []
+    const pairs = importValue.split(';')
+    
+    for (const pair of pairs) {
+      const trimmed = pair.trim()
+      if (!trimmed) continue
+      
+      const eqIndex = trimmed.indexOf('=')
+      if (eqIndex === -1) continue
+      
+      const key = trimmed.substring(0, eqIndex).trim()
+      const value = trimmed.substring(eqIndex + 1).trim()
+      
+      if (key) {
+        newCookies.push({ key, value, id: crypto.randomUUID() })
+      }
+    }
+
+    if (newCookies.length > 0) {
+      onChange([...cookies, ...newCookies])
+      setImportValue('')
+      setShowImport(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Cookies</span>
+        <div className="flex items-center gap-1">
+          <button
+            onClick={() => setShowImport(!showImport)}
+            className={`flex items-center gap-1 px-2 py-1 text-xs rounded-md transition-colors cursor-pointer ${
+              showImport ? 'text-accent bg-accent-muted' : 'text-zinc-500 hover:text-zinc-300 hover:bg-surface-200'
+            }`}
+            title="Import from cookie string"
+          >
+            <FileText size={12} />
+            Import
+          </button>
+          <button
+            onClick={addPair}
+            className="flex items-center gap-1 px-2 py-1 text-xs text-accent hover:text-accent-hover rounded-md hover:bg-accent-muted transition-colors cursor-pointer"
+          >
+            <Plus size={12} />
+            Add
+          </button>
+        </div>
+      </div>
+
+      {/* Import dialog */}
+      {showImport && (
+        <div className="flex flex-col gap-2 p-3 bg-surface-50 rounded-lg border border-border">
+          <label className="text-xs text-zinc-400">Paste cookie string (e.g., from browser DevTools)</label>
+          <textarea
+            value={importValue}
+            onChange={(e) => setImportValue(e.target.value)}
+            placeholder="name1=value1; name2=value2; ..."
+            rows={2}
+            className="w-full bg-surface-100 border border-border rounded-lg px-3 py-2 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors resize-none"
+          />
+          <div className="flex justify-end gap-2">
+            <button
+              onClick={() => {
+                setShowImport(false)
+                setImportValue('')
+              }}
+              className="px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 rounded-md hover:bg-surface-200 transition-colors cursor-pointer"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleImport}
+              disabled={!importValue.trim()}
+              className="px-3 py-1.5 text-xs text-surface bg-accent hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed rounded-md transition-colors cursor-pointer"
+            >
+              Import
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Cookie pairs */}
+      {cookies.length === 0 ? (
+        <p className="text-xs text-zinc-600 py-3 text-center">
+          No cookies added
+        </p>
+      ) : (
+        <div className="flex flex-col gap-1.5">
+          {cookies.map((c) => (
+            <div key={c.id} className="flex items-center gap-2">
+              <input
+                type="text"
+                value={c.key}
+                onChange={(e) => updatePair(c.id, 'key', e.target.value)}
+                placeholder="Name"
+                className="flex-1 bg-surface-50 border border-border rounded-lg px-3 py-1.5 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors"
+              />
+              <input
+                type="text"
+                value={c.value}
+                onChange={(e) => updatePair(c.id, 'value', e.target.value)}
+                placeholder="Value"
+                className="flex-1 bg-surface-50 border border-border rounded-lg px-3 py-1.5 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors"
+              />
+              <button
+                onClick={() => removePair(c.id)}
+                className="p-1.5 text-zinc-600 hover:text-status-error rounded-md hover:bg-status-error/10 transition-colors cursor-pointer"
+              >
+                <X size={14} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/CurlImportModal.tsx b/frontend/src/components/CurlImportModal.tsx
new file mode 100644
index 00000000..d1c60a9a
--- /dev/null
+++ b/frontend/src/components/CurlImportModal.tsx
@@ -0,0 +1,305 @@
+import { useState, useCallback } from 'react'
+import { X, FileCode, AlertCircle } from 'lucide-react'
+import type { ParsedCurl, HttpMethod, BodyType, HeaderPair } from '../types'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  onImport: (parsed: ParsedCurl, headerPairs: HeaderPair[], cookiePairs: HeaderPair[]) => void
+}
+
+function parseCurlCommand(curlStr: string): ParsedCurl | null {
+  try {
+    const trimmed = curlStr.trim()
+    if (!trimmed.toLowerCase().startsWith('curl')) {
+      return null
+    }
+
+    const result: ParsedCurl = {
+      url: '',
+      method: 'get',
+      headers: {},
+      cookies: {},
+      body: '',
+      body_type: 'none',
+    }
+
+    // Remove line continuations and normalize
+    const normalized = trimmed
+      .replace(/\\\r?\n/g, ' ')
+      .replace(/\s+/g, ' ')
+
+    // Extract URL (handle both quoted and unquoted)
+    const urlMatch = normalized.match(/curl\s+(?:-[^\s]+\s+)*['"]?(https?:\/\/[^\s'"]+)['"]?/i)
+      || normalized.match(/['"]?(https?:\/\/[^\s'"]+)['"]?/)
+    
+    if (urlMatch) {
+      result.url = urlMatch[1].replace(/['"]/g, '')
+    }
+
+    // Extract method (-X or --request)
+    const methodMatch = normalized.match(/-X\s+['"]?(\w+)['"]?/i)
+      || normalized.match(/--request\s+['"]?(\w+)['"]?/i)
+    
+    if (methodMatch) {
+      result.method = methodMatch[1].toLowerCase() as HttpMethod
+    }
+
+    // Extract headers (-H or --header)
+    const headerRegex = /(?:-H|--header)\s+['"]([^'"]+)['"]/gi
+    let headerMatch
+    while ((headerMatch = headerRegex.exec(normalized)) !== null) {
+      const headerLine = headerMatch[1]
+      const colonIndex = headerLine.indexOf(':')
+      if (colonIndex !== -1) {
+        const key = headerLine.substring(0, colonIndex).trim()
+        const value = headerLine.substring(colonIndex + 1).trim()
+        
+        // Handle Cookie header specially
+        if (key.toLowerCase() === 'cookie') {
+          const cookiePairs = value.split(';')
+          for (const pair of cookiePairs) {
+            const eqIndex = pair.indexOf('=')
+            if (eqIndex !== -1) {
+              const cookieKey = pair.substring(0, eqIndex).trim()
+              const cookieValue = pair.substring(eqIndex + 1).trim()
+              result.cookies[cookieKey] = cookieValue
+            }
+          }
+        } else {
+          result.headers[key] = value
+        }
+      }
+    }
+
+    // Extract body data (-d, --data, --data-raw, --data-binary)
+    const dataMatch = normalized.match(/(?:-d|--data(?:-raw|-binary)?)\s+['"]([^'"]+)['"]/i)
+      || normalized.match(/(?:-d|--data(?:-raw|-binary)?)\s+([^\s]+)/i)
+    
+    if (dataMatch) {
+      result.body = dataMatch[1]
+      
+      // Determine body type
+      if (result.body.startsWith('{') || result.body.startsWith('[')) {
+        result.body_type = 'json'
+      } else if (result.body.includes('=')) {
+        result.body_type = 'form'
+      } else {
+        result.body_type = 'raw'
+      }
+
+      // If POST/PUT without explicit method, set it
+      if (result.method === 'get' && result.body) {
+        result.method = 'post'
+      }
+    }
+
+    // Extract cookies from -b or --cookie
+    const cookieMatch = normalized.match(/(?:-b|--cookie)\s+['"]([^'"]+)['"]/i)
+    if (cookieMatch) {
+      const cookiePairs = cookieMatch[1].split(';')
+      for (const pair of cookiePairs) {
+        const eqIndex = pair.indexOf('=')
+        if (eqIndex !== -1) {
+          const key = pair.substring(0, eqIndex).trim()
+          const value = pair.substring(eqIndex + 1).trim()
+          result.cookies[key] = value
+        }
+      }
+    }
+
+    return result.url ? result : null
+  } catch {
+    return null
+  }
+}
+
+export default function CurlImportModal({ isOpen, onClose, onImport }: Props) {
+  const [curlCommand, setCurlCommand] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [preview, setPreview] = useState<ParsedCurl | null>(null)
+
+  const handleParse = useCallback(() => {
+    setError(null)
+    const parsed = parseCurlCommand(curlCommand)
+    
+    if (!parsed) {
+      setError('Could not parse curl command. Make sure it starts with "curl" and includes a valid URL.')
+      setPreview(null)
+      return
+    }
+
+    setPreview(parsed)
+  }, [curlCommand])
+
+  const handleImport = useCallback(() => {
+    if (!preview) return
+
+    // Convert headers and cookies to pairs format
+    const headerPairs: HeaderPair[] = Object.entries(preview.headers).map(([key, value]) => ({
+      key,
+      value,
+      id: crypto.randomUUID(),
+    }))
+
+    const cookiePairs: HeaderPair[] = Object.entries(preview.cookies).map(([key, value]) => ({
+      key,
+      value,
+      id: crypto.randomUUID(),
+    }))
+
+    onImport(preview, headerPairs, cookiePairs)
+    handleClose()
+  }, [preview, onImport])
+
+  const handleClose = useCallback(() => {
+    setCurlCommand('')
+    setError(null)
+    setPreview(null)
+    onClose()
+  }, [onClose])
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div 
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={handleClose}
+      />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-2xl mx-4 bg-surface-100 rounded-2xl border border-border shadow-2xl">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center justify-center w-8 h-8 bg-accent/10 rounded-lg">
+              <FileCode size={18} className="text-accent" />
+            </div>
+            <div>
+              <h2 className="text-base font-semibold text-zinc-100">Import from cURL</h2>
+              <p className="text-xs text-zinc-500">Paste a curl command to auto-fill request options</p>
+            </div>
+          </div>
+          <button
+            onClick={handleClose}
+            className="p-2 text-zinc-500 hover:text-zinc-300 rounded-lg hover:bg-surface-200 transition-colors cursor-pointer"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 flex flex-col gap-4">
+          <div className="flex flex-col gap-2">
+            <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
+              cURL Command
+            </label>
+            <textarea
+              value={curlCommand}
+              onChange={(e) => {
+                setCurlCommand(e.target.value)
+                setError(null)
+                setPreview(null)
+              }}
+              placeholder={'curl -X GET "https://api.example.com/data" \\\n  -H "Authorization: Bearer token" \\\n  -H "Content-Type: application/json"'}
+              rows={6}
+              className="w-full bg-surface-50 border border-border rounded-lg px-4 py-3 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors resize-none"
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-start gap-2 p-3 bg-status-error/10 border border-status-error/20 rounded-lg">
+              <AlertCircle size={16} className="text-status-error shrink-0 mt-0.5" />
+              <p className="text-sm text-status-error">{error}</p>
+            </div>
+          )}
+
+          {preview && (
+            <div className="flex flex-col gap-3 p-4 bg-surface-50 rounded-lg border border-border">
+              <span className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Preview</span>
+              
+              <div className="grid grid-cols-2 gap-3 text-sm">
+                <div>
+                  <span className="text-zinc-500">Method:</span>
+                  <span className="ml-2 font-mono text-accent uppercase">{preview.method}</span>
+                </div>
+                <div>
+                  <span className="text-zinc-500">Body Type:</span>
+                  <span className="ml-2 font-mono text-zinc-300">{preview.body_type}</span>
+                </div>
+              </div>
+
+              <div>
+                <span className="text-zinc-500 text-sm">URL:</span>
+                <p className="font-mono text-xs text-zinc-300 mt-1 break-all">{preview.url}</p>
+              </div>
+
+              {Object.keys(preview.headers).length > 0 && (
+                <div>
+                  <span className="text-zinc-500 text-sm">Headers ({Object.keys(preview.headers).length}):</span>
+                  <div className="mt-1 text-xs font-mono text-zinc-400 max-h-20 overflow-auto">
+                    {Object.entries(preview.headers).map(([k, v]) => (
+                      <div key={k} className="truncate">
+                        <span className="text-accent">{k}:</span> {v}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {Object.keys(preview.cookies).length > 0 && (
+                <div>
+                  <span className="text-zinc-500 text-sm">Cookies ({Object.keys(preview.cookies).length}):</span>
+                  <div className="mt-1 text-xs font-mono text-zinc-400">
+                    {Object.entries(preview.cookies).map(([k, v]) => (
+                      <div key={k} className="truncate">
+                        <span className="text-accent">{k}:</span> {v}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {preview.body && (
+                <div>
+                  <span className="text-zinc-500 text-sm">Body:</span>
+                  <pre className="mt-1 text-xs font-mono text-zinc-400 max-h-20 overflow-auto whitespace-pre-wrap">
+                    {preview.body}
+                  </pre>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-border">
+          <button
+            onClick={handleClose}
+            className="px-4 py-2 text-sm text-zinc-400 hover:text-zinc-200 rounded-lg hover:bg-surface-200 transition-colors cursor-pointer"
+          >
+            Cancel
+          </button>
+          {preview ? (
+            <button
+              onClick={handleImport}
+              className="px-4 py-2 text-sm font-medium text-surface bg-accent hover:bg-accent-hover rounded-lg transition-colors cursor-pointer"
+            >
+              Import
+            </button>
+          ) : (
+            <button
+              onClick={handleParse}
+              disabled={!curlCommand.trim()}
+              className="px-4 py-2 text-sm font-medium text-surface bg-accent hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors cursor-pointer"
+            >
+              Parse
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/ExportMenu.tsx b/frontend/src/components/ExportMenu.tsx
new file mode 100644
index 00000000..29c8d50b
--- /dev/null
+++ b/frontend/src/components/ExportMenu.tsx
@@ -0,0 +1,136 @@
+import { useState, useRef, useEffect } from 'react'
+import { Download, FileText, Code, FileJson, FileType } from 'lucide-react'
+import type { ScrapeResponse } from '../types'
+
+interface Props {
+  response: ScrapeResponse
+}
+
+type ExportFormat = 'html' | 'markdown' | 'text' | 'json'
+
+const EXPORT_OPTIONS: { format: ExportFormat; label: string; icon: React.ReactNode; ext: string }[] = [
+  { format: 'html', label: 'HTML', icon: <Code size={14} />, ext: '.html' },
+  { format: 'markdown', label: 'Markdown', icon: <FileText size={14} />, ext: '.md' },
+  { format: 'text', label: 'Plain Text', icon: <FileType size={14} />, ext: '.txt' },
+  { format: 'json', label: 'JSON', icon: <FileJson size={14} />, ext: '.json' },
+]
+
+function getFilename(url: string, ext: string): string {
+  try {
+    const urlObj = new URL(url)
+    const hostname = urlObj.hostname.replace(/\./g, '-')
+    const timestamp = new Date().toISOString().slice(0, 10)
+    return `${hostname}-${timestamp}${ext}`
+  } catch {
+    return `scrape-${Date.now()}${ext}`
+  }
+}
+
+function prepareContent(response: ScrapeResponse, format: ExportFormat): string {
+  switch (format) {
+    case 'json':
+      return JSON.stringify({
+        url: response.url,
+        status: response.status,
+        reason: response.reason,
+        content: response.content,
+        headers: response.headers,
+        cookies: response.cookies,
+        elapsed: response.elapsed,
+        exportedAt: new Date().toISOString(),
+      }, null, 2)
+    case 'html':
+      // Wrap in basic HTML structure if content doesn't have html/body tags
+      if (response.content.includes('<html') || response.content.includes('<!DOCTYPE')) {
+        return response.content
+      }
+      return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Scraped from ${response.url}</title>
+</head>
+<body>
+${response.content}
+</body>
+</html>`
+    case 'markdown':
+    case 'text':
+    default:
+      return response.content
+  }
+}
+
+function downloadFile(content: string, filename: string, mimeType: string) {
+  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)
+}
+
+export default function ExportMenu({ response }: Props) {
+  const [isOpen, setIsOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+      return () => document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  const handleExport = (format: ExportFormat, ext: string) => {
+    const content = prepareContent(response, format)
+    const filename = getFilename(response.url, ext)
+    
+    const mimeTypes: Record<ExportFormat, string> = {
+      html: 'text/html',
+      markdown: 'text/markdown',
+      text: 'text/plain',
+      json: 'application/json',
+    }
+
+    downloadFile(content, filename, mimeTypes[format])
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 rounded-lg hover:bg-surface-200 transition-colors cursor-pointer"
+      >
+        <Download size={14} />
+        Export
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-full mt-1 w-44 py-1 bg-surface-100 border border-border rounded-lg shadow-xl z-10">
+          {EXPORT_OPTIONS.map((option) => (
+            <button
+              key={option.format}
+              onClick={() => handleExport(option.format, option.ext)}
+              className="flex items-center gap-2 w-full px-3 py-2 text-sm text-zinc-300 hover:text-zinc-100 hover:bg-surface-200 transition-colors cursor-pointer"
+            >
+              {option.icon}
+              <span>{option.label}</span>
+              <span className="ml-auto text-xs text-zinc-600">{option.ext}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/OptionsPanel.tsx b/frontend/src/components/OptionsPanel.tsx
index 63f45c44..45c90d6b 100644
--- a/frontend/src/components/OptionsPanel.tsx
+++ b/frontend/src/components/OptionsPanel.tsx
@@ -1,4 +1,5 @@
-import type { ScrapeRequest, FetcherType } from '../types'
+import type { ScrapeRequest, FetcherType, WaitSelectorState } from '../types'
+import AdvancedOptions from './AdvancedOptions'
 
 interface Props {
   request: ScrapeRequest
@@ -136,6 +137,7 @@ function FetcherOptions({ request, onChange }: Props) {
         <Toggle label="HTTP/3" checked={request.http3} onChange={(v) => onChange({ http3: v })} description="May conflict with impersonate" />
         <Toggle label="Stealthy Headers" checked={request.stealthy_headers} onChange={(v) => onChange({ stealthy_headers: v })} description="Add realistic browser headers" />
       </div>
+      <AdvancedOptions request={request} onChange={onChange} />
     </div>
   )
 }
@@ -146,6 +148,18 @@ function DynamicOptions({ request, onChange }: Props) {
       <NumberInput label="Timeout (ms)" value={request.timeout} onChange={(v) => onChange({ timeout: v ?? 30000 })} min={1000} max={300000} />
       <NumberInput label="Wait (ms)" value={request.wait} onChange={(v) => onChange({ wait: v })} min={0} description="Extra time to wait after page load" />
       <TextInput label="Wait for Selector" value={request.wait_selector} onChange={(v) => onChange({ wait_selector: v })} placeholder="CSS selector to wait for" description="Wait until this element appears" />
+      <SelectInput
+        label="Wait Selector State"
+        value={request.wait_selector_state}
+        onChange={(v) => onChange({ wait_selector_state: v as WaitSelectorState })}
+        options={[
+          { label: 'Visible', value: 'visible' },
+          { label: 'Hidden', value: 'hidden' },
+          { label: 'Attached', value: 'attached' },
+          { label: 'Detached', value: 'detached' },
+        ]}
+        description="State to wait for when using wait selector"
+      />
       <TextInput label="Proxy" value={request.proxy} onChange={(v) => onChange({ proxy: v })} placeholder="http://user:pass@host:port" />
       <div className="flex flex-col gap-3 pt-2 border-t border-border">
         <Toggle label="Headless" checked={request.headless} onChange={(v) => onChange({ headless: v })} description="Run browser without visible window" />
@@ -153,6 +167,7 @@ function DynamicOptions({ request, onChange }: Props) {
         <Toggle label="Disable Resources" checked={request.disable_resources} onChange={(v) => onChange({ disable_resources: v })} description="Block images, CSS, fonts" />
         <Toggle label="Google Search" checked={request.google_search} onChange={(v) => onChange({ google_search: v })} description="Navigate via Google search first" />
       </div>
+      <AdvancedOptions request={request} onChange={onChange} />
     </div>
   )
 }
@@ -163,6 +178,18 @@ function StealthyOptions({ request, onChange }: Props) {
       <NumberInput label="Timeout (ms)" value={request.timeout} onChange={(v) => onChange({ timeout: v ?? 30000 })} min={1000} max={300000} />
       <NumberInput label="Wait (ms)" value={request.wait} onChange={(v) => onChange({ wait: v })} min={0} description="Extra time to wait after page load" />
       <TextInput label="Wait for Selector" value={request.wait_selector} onChange={(v) => onChange({ wait_selector: v })} placeholder="CSS selector to wait for" />
+      <SelectInput
+        label="Wait Selector State"
+        value={request.wait_selector_state}
+        onChange={(v) => onChange({ wait_selector_state: v as WaitSelectorState })}
+        options={[
+          { label: 'Visible', value: 'visible' },
+          { label: 'Hidden', value: 'hidden' },
+          { label: 'Attached', value: 'attached' },
+          { label: 'Detached', value: 'detached' },
+        ]}
+        description="State to wait for when using wait selector"
+      />
       <TextInput label="Proxy" value={request.proxy} onChange={(v) => onChange({ proxy: v })} placeholder="http://user:pass@host:port" />
       <div className="flex flex-col gap-3 pt-2 border-t border-border">
         <Toggle label="Headless" checked={request.headless} onChange={(v) => onChange({ headless: v })} description="Run browser without visible window" />
@@ -177,6 +204,7 @@ function StealthyOptions({ request, onChange }: Props) {
         <Toggle label="Block WebRTC" checked={request.block_webrtc} onChange={(v) => onChange({ block_webrtc: v })} description="Prevent IP leak via WebRTC" />
         <Toggle label="Allow WebGL" checked={request.allow_webgl} onChange={(v) => onChange({ allow_webgl: v })} description="Enable WebGL rendering" />
       </div>
+      <AdvancedOptions request={request} onChange={onChange} />
     </div>
   )
 }
diff --git a/frontend/src/components/ProxyManager.tsx b/frontend/src/components/ProxyManager.tsx
new file mode 100644
index 00000000..f90f5162
--- /dev/null
+++ b/frontend/src/components/ProxyManager.tsx
@@ -0,0 +1,228 @@
+import { useState } from 'react'
+import { Plus, Trash2, Shield, RefreshCw } from 'lucide-react'
+import type { ProxyConfig, ProxyProtocol, RotationStrategy } from '../types'
+
+interface Props {
+  config: ProxyConfig
+  onChange: (config: ProxyConfig) => void
+}
+
+const PROTOCOLS: { value: ProxyProtocol; label: string }[] = [
+  { value: 'http', label: 'HTTP' },
+  { value: 'https', label: 'HTTPS' },
+  { value: 'socks4', label: 'SOCKS4' },
+  { value: 'socks5', label: 'SOCKS5' },
+]
+
+const STRATEGIES: { value: RotationStrategy; label: string; description: string }[] = [
+  { value: 'round-robin', label: 'Round Robin', description: 'Cycle through proxies in order' },
+  { value: 'random', label: 'Random', description: 'Select proxies randomly' },
+  { value: 'least-used', label: 'Least Used', description: 'Prioritize less-used proxies' },
+]
+
+function Toggle({ label, checked, onChange, description }: {
+  label: string
+  checked: boolean
+  onChange: (v: boolean) => void
+  description?: string
+}) {
+  return (
+    <label className="flex items-center justify-between gap-3 cursor-pointer group">
+      <div className="flex flex-col">
+        <span className="text-sm text-zinc-300 group-hover:text-zinc-200 transition-colors">{label}</span>
+        {description && <span className="text-xs text-zinc-600">{description}</span>}
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        onClick={() => onChange(!checked)}
+        className={`
+          relative w-9 h-5 rounded-full transition-colors shrink-0 cursor-pointer
+          ${checked ? 'bg-accent' : 'bg-surface-300'}
+        `}
+      >
+        <span
+          className={`
+            absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white transition-transform
+            ${checked ? 'translate-x-4' : 'translate-x-0'}
+          `}
+        />
+      </button>
+    </label>
+  )
+}
+
+export default function ProxyManager({ config, onChange }: Props) {
+  const [proxyInput, setProxyInput] = useState('')
+
+  const handleAddProxy = () => {
+    if (!proxyInput.trim()) return
+    
+    // Parse multiple proxies (one per line or comma-separated)
+    const newProxies = proxyInput
+      .split(/[\n,]/)
+      .map((p) => p.trim())
+      .filter((p) => p && !config.proxies.includes(p))
+
+    if (newProxies.length > 0) {
+      onChange({
+        ...config,
+        proxies: [...config.proxies, ...newProxies],
+      })
+      setProxyInput('')
+    }
+  }
+
+  const handleRemoveProxy = (index: number) => {
+    onChange({
+      ...config,
+      proxies: config.proxies.filter((_, i) => i !== index),
+    })
+  }
+
+  const handleClearAll = () => {
+    onChange({
+      ...config,
+      proxies: [],
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-2">
+        <Shield size={16} className="text-accent" />
+        <span className="text-sm font-medium text-zinc-300">Proxy Rotation</span>
+      </div>
+
+      {/* Enable Toggle */}
+      <Toggle
+        label="Enable Proxy Rotation"
+        checked={config.enabled}
+        onChange={(v) => onChange({ ...config, enabled: v })}
+        description="Rotate through multiple proxies for requests"
+      />
+
+      {config.enabled && (
+        <>
+          {/* Protocol */}
+          <div className="flex flex-col gap-1">
+            <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Protocol</label>
+            <div className="flex gap-1">
+              {PROTOCOLS.map((p) => (
+                <button
+                  key={p.value}
+                  onClick={() => onChange({ ...config, protocol: p.value })}
+                  className={`
+                    flex-1 py-1.5 text-xs font-medium rounded-lg transition-colors cursor-pointer
+                    ${config.protocol === p.value
+                      ? 'bg-accent text-surface'
+                      : 'bg-surface-200 text-zinc-400 hover:text-zinc-300 hover:bg-surface-300'
+                    }
+                  `}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Rotation Strategy */}
+          <div className="flex flex-col gap-2">
+            <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">Rotation Strategy</label>
+            {STRATEGIES.map((s) => (
+              <label
+                key={s.value}
+                className={`
+                  flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors
+                  ${config.rotation_strategy === s.value
+                    ? 'border-accent bg-accent/5'
+                    : 'border-border hover:border-border/80 hover:bg-surface-50'
+                  }
+                `}
+              >
+                <input
+                  type="radio"
+                  name="rotation_strategy"
+                  value={s.value}
+                  checked={config.rotation_strategy === s.value}
+                  onChange={() => onChange({ ...config, rotation_strategy: s.value })}
+                  className="mt-0.5 accent-accent"
+                />
+                <div className="flex flex-col">
+                  <span className="text-sm text-zinc-300">{s.label}</span>
+                  <span className="text-xs text-zinc-600">{s.description}</span>
+                </div>
+              </label>
+            ))}
+          </div>
+
+          {/* Proxy List */}
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <label className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
+                Proxies ({config.proxies.length})
+              </label>
+              {config.proxies.length > 0 && (
+                <button
+                  onClick={handleClearAll}
+                  className="flex items-center gap-1 px-2 py-1 text-xs text-zinc-500 hover:text-status-error rounded-md hover:bg-status-error/10 transition-colors cursor-pointer"
+                >
+                  <Trash2 size={12} />
+                  Clear All
+                </button>
+              )}
+            </div>
+
+            {/* Add proxy input */}
+            <div className="flex gap-2">
+              <textarea
+                value={proxyInput}
+                onChange={(e) => setProxyInput(e.target.value)}
+                placeholder={'host:port\nuser:pass@host:port'}
+                rows={2}
+                className="flex-1 bg-surface-50 border border-border rounded-lg px-3 py-2 text-sm font-mono text-zinc-300 placeholder:text-zinc-600 focus:outline-none focus:border-accent/50 transition-colors resize-none"
+              />
+              <button
+                onClick={handleAddProxy}
+                disabled={!proxyInput.trim()}
+                className="px-3 py-2 bg-accent text-surface font-medium text-sm rounded-lg hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer self-start"
+              >
+                <Plus size={16} />
+              </button>
+            </div>
+
+            {/* Proxy list */}
+            {config.proxies.length > 0 && (
+              <div className="flex flex-col gap-1 max-h-40 overflow-auto">
+                {config.proxies.map((proxy, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between gap-2 px-3 py-2 bg-surface-50 rounded-lg group"
+                  >
+                    <div className="flex items-center gap-2 min-w-0">
+                      <RefreshCw size={12} className="text-zinc-600 shrink-0" />
+                      <span className="text-sm font-mono text-zinc-400 truncate">{proxy}</span>
+                    </div>
+                    <button
+                      onClick={() => handleRemoveProxy(index)}
+                      className="p-1 text-zinc-600 hover:text-status-error rounded opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
+                    >
+                      <Trash2 size={12} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {config.proxies.length === 0 && (
+              <p className="text-xs text-zinc-600 py-2 text-center">
+                No proxies added. Add proxies one per line.
+              </p>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/components/ResponsePanel.tsx b/frontend/src/components/ResponsePanel.tsx
index 481714c4..30166f40 100644
--- a/frontend/src/components/ResponsePanel.tsx
+++ b/frontend/src/components/ResponsePanel.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Clock, Copy, Check, FileText, Code, Globe, Cookie } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import StatusBadge from './StatusBadge'
+import ExportMenu from './ExportMenu'
 import type { ScrapeResponse, ScrapeError, ExtractionType } from '../types'
 
 type ResponseTab = 'content' | 'headers' | 'cookies' | 'raw'
@@ -143,7 +144,10 @@ export default function ResponsePanel({ response, error, loading, extractionType
             {response.elapsed}s
           </div>
         </div>
-        <CopyButton text={response.content} />
+        <div className="flex items-center gap-2">
+          <ExportMenu response={response} />
+          <CopyButton text={response.content} />
+        </div>
       </div>
 
       {/* Tabs */}
diff --git a/frontend/src/components/ScrapeHistory.tsx b/frontend/src/components/ScrapeHistory.tsx
new file mode 100644
index 00000000..44fae7c8
--- /dev/null
+++ b/frontend/src/components/ScrapeHistory.tsx
@@ -0,0 +1,123 @@
+import { Clock, Trash2, RotateCcw, ChevronRight, CheckCircle2, XCircle } from 'lucide-react'
+import type { ScrapeHistoryItem } from '../types'
+
+interface Props {
+  history: ScrapeHistoryItem[]
+  onRestore: (item: ScrapeHistoryItem) => void
+  onClear: () => void
+  onRemove: (id: string) => void
+}
+
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return 'Just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+  
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+function getMethodColor(method: string): string {
+  switch (method.toLowerCase()) {
+    case 'get': return 'text-status-success'
+    case 'post': return 'text-amber-400'
+    case 'put': return 'text-blue-400'
+    case 'delete': return 'text-status-error'
+    default: return 'text-zinc-400'
+  }
+}
+
+function getStatusIcon(status: number) {
+  if (status >= 200 && status < 300) {
+    return <CheckCircle2 size={14} className="text-status-success" />
+  }
+  return <XCircle size={14} className="text-status-error" />
+}
+
+export default function ScrapeHistory({ history, onRestore, onClear, onRemove }: Props) {
+  if (history.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-center">
+        <Clock size={32} className="text-zinc-700 mb-3" />
+        <p className="text-sm text-zinc-500">No scrape history yet</p>
+        <p className="text-xs text-zinc-600 mt-1">Your recent scrapes will appear here</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <span className="text-xs font-medium text-zinc-400 uppercase tracking-wider">
+          History ({history.length})
+        </span>
+        <button
+          onClick={onClear}
+          className="flex items-center gap-1 px-2 py-1 text-xs text-zinc-500 hover:text-status-error rounded-md hover:bg-status-error/10 transition-colors cursor-pointer"
+        >
+          <Trash2 size={12} />
+          Clear
+        </button>
+      </div>
+
+      {/* History List */}
+      <div className="flex-1 overflow-auto">
+        {history.map((item) => (
+          <div
+            key={item.id}
+            className="flex items-center gap-3 px-4 py-3 border-b border-border/50 hover:bg-surface-50 transition-colors group"
+          >
+            {/* Status & Method */}
+            <div className="flex items-center gap-2 shrink-0">
+              {getStatusIcon(item.status)}
+              <span className={`text-xs font-mono font-medium uppercase ${getMethodColor(item.method)}`}>
+                {item.method}
+              </span>
+            </div>
+
+            {/* URL & Meta */}
+            <div className="flex-1 min-w-0">
+              <p className="text-sm text-zinc-300 truncate" title={item.url}>
+                {item.url}
+              </p>
+              <div className="flex items-center gap-3 mt-0.5 text-xs text-zinc-600">
+                <span className="capitalize">{item.fetcher_type}</span>
+                <span>{item.elapsed}s</span>
+                <span>{formatTimestamp(item.timestamp)}</span>
+              </div>
+            </div>
+
+            {/* Actions */}
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={() => onRestore(item)}
+                className="flex items-center gap-1 px-2 py-1 text-xs text-accent hover:text-accent-hover rounded-md hover:bg-accent-muted transition-colors cursor-pointer"
+                title="Restore this request"
+              >
+                <RotateCcw size={12} />
+                Restore
+              </button>
+              <button
+                onClick={() => onRemove(item.id)}
+                className="p-1 text-zinc-600 hover:text-status-error rounded-md hover:bg-status-error/10 transition-colors cursor-pointer"
+                title="Remove from history"
+              >
+                <Trash2 size={12} />
+              </button>
+            </div>
+
+            <ChevronRight size={14} className="text-zinc-700 shrink-0" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index a1837c6b..3b06afcb 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -1,6 +1,8 @@
 export type FetcherType = 'fetcher' | 'dynamic' | 'stealthy'
 export type HttpMethod = 'get' | 'post' | 'put' | 'delete'
 export type ExtractionType = 'markdown' | 'html' | 'text'
+export type BodyType = 'none' | 'json' | 'form' | 'raw'
+export type WaitSelectorState = 'visible' | 'hidden' | 'attached' | 'detached'
 
 export interface ScrapeRequest {
   url: string
@@ -13,6 +15,9 @@ export interface ScrapeRequest {
   proxy: string
   headers: Record<string, string>
   cookies: Record<string, string>
+  // Body data
+  body_type: BodyType
+  body_content: string
   // Fetcher-specific
   retries: number
   retry_delay: number
@@ -26,12 +31,76 @@ export interface ScrapeRequest {
   wait: number | null
   disable_resources: boolean
   wait_selector: string
+  wait_selector_state: WaitSelectorState
   google_search: boolean
   // StealthyFetcher-specific
   solve_cloudflare: boolean
   hide_canvas: boolean
   block_webrtc: boolean
   allow_webgl: boolean
+  // Advanced options
+  verify_ssl: boolean
+  locale: string
+  useragent: string
+  real_chrome: boolean
+  cdp_url: string
+  timezone_id: string
+  max_redirects: number
+}
+
+// Bulk scraping
+export interface BulkScrapeRequest {
+  urls: string[]
+  fetcher_type: FetcherType
+  method: HttpMethod
+  extraction_type: ExtractionType
+  css_selector: string
+  main_content_only: boolean
+  timeout: number
+  proxy: string
+  headers: Record<string, string>
+  cookies: Record<string, string>
+}
+
+export interface BulkScrapeResult {
+  url: string
+  status: 'success' | 'error'
+  response?: ScrapeResponse
+  error?: string
+}
+
+// Proxy management
+export type ProxyProtocol = 'http' | 'https' | 'socks4' | 'socks5'
+export type RotationStrategy = 'round-robin' | 'random' | 'least-used'
+
+export interface ProxyConfig {
+  enabled: boolean
+  proxies: string[]
+  protocol: ProxyProtocol
+  rotation_strategy: RotationStrategy
+}
+
+// Scrape history
+export interface ScrapeHistoryItem {
+  id: string
+  url: string
+  method: HttpMethod
+  fetcher_type: FetcherType
+  status: number
+  elapsed: number
+  timestamp: number
+  request: ScrapeRequest
+  response: ScrapeResponse
+}
+
+// Curl import
+export interface ParsedCurl {
+  url: string
+  method: HttpMethod
+  headers: Record<string, string>
+  cookies: Record<string, string>
+  body: string
+  body_type: BodyType
 }
 
 export interface ScrapeResponse {
@@ -67,6 +136,8 @@ export const DEFAULT_REQUEST: ScrapeRequest = {
   proxy: '',
   headers: {},
   cookies: {},
+  body_type: 'none',
+  body_content: '',
   retries: 3,
   retry_delay: 1,
   follow_redirects: true,
@@ -78,9 +149,24 @@ export const DEFAULT_REQUEST: ScrapeRequest = {
   wait: null,
   disable_resources: false,
   wait_selector: '',
+  wait_selector_state: 'visible',
   google_search: true,
   solve_cloudflare: false,
   hide_canvas: false,
   block_webrtc: false,
   allow_webgl: false,
+  verify_ssl: true,
+  locale: '',
+  useragent: '',
+  real_chrome: false,
+  cdp_url: '',
+  timezone_id: '',
+  max_redirects: 10,
+}
+
+export const DEFAULT_PROXY_CONFIG: ProxyConfig = {
+  enabled: false,
+  proxies: [],
+  protocol: 'http',
+  rotation_strategy: 'round-robin',
 }