From f2434cd3520cecd58a676362819eff8bc6ffb291 Mon Sep 17 00:00:00 2001
From: germondai <germondai@gmail.com>
Date: Fri, 26 Jun 2026 22:05:54 +0200
Subject: [PATCH] feat(web): add custom headers feature card, code tab, and
 3-column grid layout

---
 apps/web/app/components/CodeExample.vue  | 26 +++++++++++++++++++++++-
 apps/web/app/components/FeaturesGrid.vue |  9 ++++++--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/components/CodeExample.vue b/apps/web/app/components/CodeExample.vue
index ca6ea9e..88f13c9 100644
--- a/apps/web/app/components/CodeExample.vue
+++ b/apps/web/app/components/CodeExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-type Tab = "curl" | "js" | "python" | "prowlarr"
+type Tab = "curl" | "js" | "python" | "prowlarr" | "headers"
 const active = shallowRef<Tab>("curl")
 
 const tabs: { id: Tab; label: string }[] = [
@@ -7,6 +7,7 @@ const tabs: { id: Tab; label: string }[] = [
   { id: "js", label: "javascript" },
   { id: "python", label: "python" },
   { id: "prowlarr", label: "prowlarr" },
+  { id: "headers", label: "custom headers" },
 ]
 
 const code: Record<Tab, string> = {
@@ -56,6 +57,29 @@ assert data[<span class="s">"status"</span>] == <span class="s">"ok"</span>
 html    = data[<span class="s">"solution"</span>][<span class="s">"response"</span>]
 cookies = data[<span class="s">"solution"</span>][<span class="s">"cookies"</span>]`,
 
+  headers: `<span class="c"># Pass any header — forwarded to the target across all tiers</span>
+curl -s -X POST http://localhost:8191/v1 \\
+  -H <span class="s">"Content-Type: application/json"</span> \\
+  -d <span class="s">'{
+    "url": "https://example.com/embed",
+    "headers": {
+      "Authorization": "Bearer my-token",
+      "Referer": "https://parent-site.com",
+      "Origin": "https://parent-site.com"
+    }
+  }'</span>
+
+<span class="c"># Native API — same headers field, richer response</span>
+curl -s -X POST http://localhost:8191/scrape \\
+  -H <span class="s">"Content-Type: application/json"</span> \\
+  -d <span class="s">'{
+    "url": "https://example.com/embed",
+    "headers": { "X-API-Key": "secret" }
+  }'</span>
+
+<span class="c"># Headers are scoped to the target URL only.</span>
+<span class="c"># CF challenge endpoints and subresources are never intercepted.</span>`,
+
   prowlarr: `<span class="c"># Prowlarr → Settings → Indexers → FlareSolverr</span>
 <span class="c"># Paste one of these into the FlareSolverr URL field:</span>
 
diff --git a/apps/web/app/components/FeaturesGrid.vue b/apps/web/app/components/FeaturesGrid.vue
index 3175026..52d184a 100644
--- a/apps/web/app/components/FeaturesGrid.vue
+++ b/apps/web/app/components/FeaturesGrid.vue
@@ -45,6 +45,11 @@ const features = [
     title: "FlareSolverr Compatible",
     desc: "Implements the FlareSolverr v2 API exactly — including response shape, cookie format, and version string. Prowlarr, Jackett, Sonarr, and Radarr connect with a single URL change.",
   },
+  {
+    icon: "⊕",
+    title: "Custom Headers",
+    desc: "Pass Authorization, Referer, Origin, or any header to the target. Forwarded through all four tiers — including CF challenge solving — via scoped route interception that never leaks to subresources or challenge endpoints.",
+  },
 ]
 </script>
 
@@ -98,7 +103,7 @@ const features = [
 
 .features-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--border);
 }
@@ -171,7 +176,7 @@ const features = [
   color: var(--text-muted);
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 900px) {
   .features-grid {
     grid-template-columns: repeat(2, 1fr);
   }