mcp-scraper 0.6.0 → 0.7.0

package/docs/specs/agent-ready-seo-packet-spec.md

@@ -1,237 +0,0 @@
-# Agent-Ready SEO Packet — Implementation Spec
-
-`agent-packet` turns live SEO evidence into a folder an AI agent can use without re-discovering context. It is both a CLI workflow and a product wedge: MCP Scraper becomes the evidence layer for Codex, Claude, Cursor, and other agents.
-
-## User promise
-
-```bash
-mcp-scraper-cli workflow run agent-packet \
-  --keyword "roof repair Denver" \
-  --domain example.com \
-  --location "Denver, CO"
-```
-
-Output:
-
-```text
-agent-packet/
-  report.html
-  brief.md
-  evidence.json
-  sources.csv
-  competitors.csv
-  tasks.md
-  agent-instructions.md
-  manifest.json
-```
-
-The packet should answer:
-
-- What does the live search landscape show?
-- Which sources and competitors matter?
-- What questions do people ask?
-- Is the target domain present?
-- What should an AI agent do next?
-
-## Inputs
-
-CLI flags:
-
-```bash
---keyword <query>             # required
---domain <domain>             # optional but recommended
---location <city,state>       # optional
---max-questions <n>           # default 40, max 150
---include-serp                # default true
---include-paa                 # default true
---include-ai-overview         # default true through search/PAA tools
---include-page-snapshots      # default false, cap 5
---output-dir <path>
---return-partial              # default true
-```
-
-Structured input:
-
-```ts
-interface AgentPacketInput {
-  keyword: string
-  domain?: string
-  location?: string
-  maxQuestions: number
-  includeSerp: boolean
-  includePaa: boolean
-  includeAiOverview: boolean
-  includePageSnapshots: boolean
-  pageSnapshotLimit: number
-  returnPartial: boolean
-}
-```
-
-## Evidence collection plan
-
-Use existing tools/API paths:
-
-1. `search_serp`
-   - Capture organic results, local pack when present, AI Overview detection/citations when available.
-   - Use `location` if provided.
-2. `harvest_paa`
-   - Capture PAA tree, answers, source titles/sites/cites, forums/videos when available.
-   - Use `maxQuestions`.
-3. Optional `extract_url`
-   - Extract target domain page if the target appears in SERP or user passes a URL later.
-   - Extract top source pages only when `includePageSnapshots` is true.
-
-No server-side LLM is required. The workflow produces structured evidence and instructions; the calling agent can synthesize if desired.
-
-## Artifact formats
-
-### `evidence.json`
-
-```ts
-interface AgentPacketEvidence {
-  input: AgentPacketInput
-  serp: {
-    status: 'ok' | 'failed' | 'skipped'
-    organic: Array<{ position: number; title: string; url: string; domain: string; snippet?: string | null }>
-    localPack: Array<{ position: number; name: string; rating?: string | null; reviewCount?: string | null; websiteUrl?: string | null }>
-    aiOverview: { detected: boolean; text?: string | null; citations: Array<{ title?: string; url?: string; domain?: string }> }
-  }
-  paa: {
-    status: 'ok' | 'failed' | 'skipped'
-    questions: Array<{ question: string; answer?: string | null; sourceTitle?: string | null; sourceSite?: string | null; sourceUrl?: string | null }>
-  }
-  target: {
-    domain: string | null
-    organicPositions: number[]
-    citedInAiOverview: boolean
-    citedInPaa: boolean
-    localPackPositions: number[]
-  }
-  competitors: Array<{
-    domain: string
-    organicPositions: number[]
-    paaMentions: number
-    aiOverviewCitations: number
-    sourceUrls: string[]
-  }>
-  warnings: string[]
-}
-```
-
-### `sources.csv`
-
-Columns:
-
-```text
-surface,position,title,url,domain,question,answer_excerpt,is_target,is_competitor
-```
-
-### `competitors.csv`
-
-Columns:
-
-```text
-domain,organic_best_position,organic_count,paa_mentions,ai_overview_citations,source_url_count
-```
-
-### `brief.md`
-
-Sections:
-
-```md
-# SEO Evidence Brief
-
-## Search Intent
-## SERP Evidence
-## PAA Evidence
-## AI Overview Evidence
-## Target Presence
-## Competitor Sources
-## Content Gaps
-## Recommended Page Additions
-```
-
-Content should be evidence-grounded. If the workflow cannot determine a gap deterministically, phrase it as an evidence prompt:
-
-```md
-- Review these competitor source URLs before writing: ...
-- The target was not found in the captured AI/PAA sources.
-```
-
-### `tasks.md`
-
-Action checklist for an AI/code agent:
-
-```md
-# Agent Tasks
-
-- [ ] Read `evidence.json`.
-- [ ] Compare the target domain against `competitors.csv`.
-- [ ] Draft or update page sections using only evidence from `sources.csv`.
-- [ ] Add citations/links where appropriate.
-- [ ] Preserve claims that can be traced to an evidence row.
-```
-
-### `agent-instructions.md`
-
-Stable instructions:
-
-```md
-You are working from an MCP Scraper SEO evidence packet. Use `evidence.json` and CSV files as source of truth. Do not invent citations. If a recommendation is not supported by evidence, mark it as an assumption.
-```
-
-## HTML report
-
-Report sections:
-
-1. Executive summary.
-2. Target visibility.
-3. SERP table.
-4. AI Overview citations.
-5. PAA source table.
-6. Competitor domains.
-7. Agent task list.
-8. Diagnostics and warnings.
-
-## Partial-result behavior
-
-The workflow should return partial artifacts when one surface fails.
-
-Examples:
-
-- SERP succeeds, PAA CAPTCHA-exhausts: write report with SERP evidence and PAA warning.
-- PAA succeeds, SERP fails: write PAA evidence and source table.
-- Target domain omitted: skip target-presence calculations and focus on market evidence.
-
-## Files
-
-New:
-
-- `src/workflows/workflows/agent-packet.ts`
-- `src/workflows/renderers/agent-packet-report.ts`
-- `tests/unit/workflow-agent-packet.test.ts`
-- `tests/fixtures/workflows/agent-packet/`
-
-Modified:
-
-- `src/workflows/registry.ts`
-- `docs/specs/seo-workflow-runner-and-reports-spec.md` when implemented.
-
-## Tests
-
-- Fixture SERP + PAA evidence produces stable `evidence.json`.
-- Target domain matching handles `www.` and protocol differences.
-- CSV escaping handles commas, quotes, and newlines.
-- Partial SERP/PAA failures still write manifest and report.
-- `agent-instructions.md` warns against unsupported citations.
-
-## Future MCP tool
-
-After the CLI workflow is proven, consider an MCP tool:
-
-```text
-seo_agent_packet
-```
-
-Description should say it creates an evidence packet for downstream AI agents and returns local artifact paths. It should use `outputSchema` and structured content containing artifact paths, counts, and warnings.
-

package/docs/specs/audit-visual-demo.md

@@ -1,309 +0,0 @@
-# Spec — Technical SEO Audit visual demo (marketing site)
-
-## 0. Problem & decision
-
-`audit_site` is a Screaming-Frog-class technical audit, but the marketing site only describes it in
-bullet text. There is **no visual** of its real output (internal/external link analysis, image audit,
-indexability, 30+ issue types). Competitors show their crawl UI; we show prose.
-
-**Decision:** Build a self-contained, tabbed **`AuditDemo`** React component with five tabs, each
-rendering a realistic visual (table + bars) of one audit dimension, using sample data whose shape
-mirrors real `audit_site` output. Render it (a) on the **Crawl & Audit feature page** (primary) and
-(b) a condensed 1-tab teaser on the **homepage** (secondary). Plain-language labels, complete, not
-deceptive — per `[[audience-non-technical-owner]]`.
-
-All work is in **`public/app.jsx`** (single SPA source) → rebuilt to `public/app.js` via
-`npm run build:ui`. No backend changes. Website-only deploy (no version bump, no npm publish).
-
-## 1. Ground truth — what audit_site really emits (cite when writing sample data)
-
-| Dimension | Source file | Fields the demo must mirror |
-|---|---|---|
-| Issues | `src/api/seo-issues.ts` (`computeIssues`, L34–66) | issue key (e.g. `title.duplicate`), `count`, severity (🔴 broken/error, 🟠 missing-title/h1/indexability/canonical, 🟡 else — see L85–87), example URLs |
-| Internal links | `src/api/seo-link-report.ts` (`LinkReportSummary.internal`, L6–15) | `totalLinks`, `pages`, `orphans`, `brokenInternal`, `avgInlinks`, `distribution{zero,oneToTwo,threeToTen,elevenPlus}`, `topByInlinks[]{url,inlinks,outlinksInternal,outlinksExternal}` (top 20) |
-| External links | `seo-link-report.ts` (`.external` + `ExtDomainRow` L3) | `totalLinks`, `uniqueDomains`, `domains[]{domain,links,nofollow,pages}` |
-| Images | `src/api/image-audit.ts` (`ImageRow` L8–12, `ImageAuditSummary` L17–24) | per-row `{url,size,format,over100kb,legacyFormat}`; summary `{unique,totalSize,avgSize,over100kb,legacyFormat}` |
-| Per-page indexability | `pages.jsonl` fields (`PageData`) | `url,status,indexable,canonicalUrl,wordCount,schemaTypes[],inlinks,crawlDepth` |
-
-Real headline line for reference (`mcp-response-formatter.ts:768`):
-`"{internal} internal / {external} external links · {orphans} orphans · {broken} broken · avg {n} inlinks/page · top external: {domain}"`.
-
-## 2. New data constant — `AUDIT_DEMO`
-
-Insert **immediately above** `function FeatureSection(` (currently near `public/app.jsx:2039`, just
-before `var f = FEATURES[slug]...`). One module-level const, no interpolation.
-
-```jsx
-var AUDIT_DEMO = {
-  site: 'example.com',
-  pagesCrawled: 1284,
-  stats: [
-    { k: 'Pages crawled', v: '1,284' },
-    { k: 'Issues found', v: '37 types' },
-    { k: 'Internal links', v: '18,402' },
-    { k: 'Images', v: '512' },
-  ],
-  issues: [
-    { sev: '🔴', label: 'Broken internal links (404)', key: 'links.brokenInternal', count: 23 },
-    { sev: '🔴', label: 'Pages returning 5xx errors', key: 'response.error5xx', count: 4 },
-    { sev: '🟠', label: 'Missing page title', key: 'title.missing', count: 11 },
-    { sev: '🟠', label: 'Missing H1', key: 'h1.missing', count: 19 },
-    { sev: '🟠', label: 'Set to noindex', key: 'indexability.noindex', count: 8 },
-    { sev: '🟠', label: 'Missing canonical tag', key: 'canonical.missing', count: 27 },
-    { sev: '🟡', label: 'Duplicate title', key: 'title.duplicate', count: 34 },
-    { sev: '🟡', label: 'Duplicate meta description', key: 'meta.duplicate', count: 41 },
-    { sev: '🟡', label: 'Thin content (under 200 words)', key: 'content.thin', count: 52 },
-    { sev: '🟡', label: 'Images missing alt text', key: 'images.missingAlt', count: 88 },
-    { sev: '🟡', label: 'Missing schema markup', key: 'schema.missing', count: 63 },
-    { sev: '🟡', label: 'Title longer than 60 chars', key: 'title.tooLong', count: 29 },
-  ],
-  internal: {
-    totalLinks: 18402, orphans: 14, brokenInternal: 23, avgInlinks: 9.7,
-    distribution: { zero: 14, oneToTwo: 121, threeToTen: 818, elevenPlus: 331 },
-    top: [
-      { url: '/', inlinks: 1284, out: 42 },
-      { url: '/pricing', inlinks: 1190, out: 28 },
-      { url: '/blog', inlinks: false ? 0 : 642, out: 35 },
-      { url: '/features/seo-audit', inlinks: 318, out: 22 },
-      { url: '/docs', inlinks: 291, out: 51 },
-      { url: '/blog/best-ramen-nyc', inlinks: 47, out: 18 },
-    ],
-  },
-  external: {
-    totalLinks: 1903, uniqueDomains: 142,
-    domains: [
-      { domain: 'twitter.com', links: 311, nofollow: 311, pages: 290 },
-      { domain: 'linkedin.com', links: 287, nofollow: 287, pages: 281 },
-      { domain: 'github.com', links: 142, nofollow: 0, pages: 96 },
-      { domain: 'youtube.com', links: 88, nofollow: 12, pages: 61 },
-      { domain: 'stripe.com', links: 54, nofollow: 0, pages: 40 },
-    ],
-  },
-  images: {
-    unique: 512, totalSize: '47.3 MB', avgSize: '94 KB', over100kb: 138, legacyFormat: 74,
-    heaviest: [
-      { url: '/img/hero-bg.png', size: '2.4 MB', format: 'png', over: true, legacy: true },
-      { url: '/img/team-photo.jpg', size: '1.1 MB', format: 'jpeg', over: true, legacy: true },
-      { url: '/img/product-shot.png', size: '870 KB', format: 'png', over: true, legacy: true },
-      { url: '/img/og-card.jpg', size: '512 KB', format: 'jpeg', over: true, legacy: true },
-      { url: '/img/icon-sprite.webp', size: '210 KB', format: 'webp', over: true, legacy: false },
-    ],
-  },
-  pages: [
-    { url: '/', status: 200, indexable: true, canonical: true, words: 842, schema: 3 },
-    { url: '/pricing', status: 200, indexable: true, canonical: true, words: 1190, schema: 2 },
-    { url: '/blog/best-ramen-nyc', status: 200, indexable: true, canonical: true, words: 2847, schema: 4 },
-    { url: '/old-landing', status: 301, indexable: false, canonical: false, words: 0, schema: 0 },
-    { url: '/checkout', status: 200, indexable: false, canonical: true, words: 120, schema: 1 },
-    { url: '/team', status: 404, indexable: false, canonical: false, words: 0, schema: 0 },
-  ],
-};
-```
-(Note: the `false ? 0 : 642` form avoids a literal `Math` call — keep plain literals; replace with `642`.)
-
-## 3. New component — `AuditDemo`
-
-Insert as a **standalone function** immediately above `function FeatureSection(`. Uses one
-`useState` for the active tab. Reuses existing tokens (`var(--surface)`, `var(--border)`,
-`var(--accent)`, `var(--text-muted)`, `var(--font-mono)`) and the existing `data-tab` /
-`data-tab--active` classes already in the stylesheet (used at `app.jsx:2384`). One small reusable
-`Bar` helper for the horizontal bars.
-
-```jsx
-function AuditBar({ value, max, color }) {
-  var pct = max > 0 ? Math.round((value / max) * 100) : 0;
-  return (
-    <div style={{height:7,background:'var(--bg-2)',borderRadius:99,overflow:'hidden',flex:1}}>
-      <div style={{width:pct+'%',height:'100%',background:color||'var(--accent)',borderRadius:99}}/>
-    </div>
-  );
-}
-
-function AuditDemo({ compact }) {
-  var TABS = compact
-    ? [['issues','Issues'],['internal','Internal links'],['images','Images']]
-    : [['issues','Issues'],['internal','Internal links'],['external','External domains'],['images','Images'],['pages','Indexability']];
-  var [tab, setTab] = useState('issues');
-  var d = AUDIT_DEMO;
-  var th = { textAlign:'left', fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.08em',
-             textTransform:'uppercase', color:'var(--text-subtle)', padding:'7px 10px', fontWeight:600 };
-  var td = { padding:'8px 10px', fontSize:12.5, borderTop:'1px solid var(--border)', color:'var(--text-muted)' };
-  var mono = { fontFamily:'var(--font-mono)', fontSize:12, color:'var(--text)' };
-  var distMax = Math.max(d.internal.distribution.zero, d.internal.distribution.oneToTwo,
-                         d.internal.distribution.threeToTen, d.internal.distribution.elevenPlus);
-  var issueMax = Math.max.apply(null, d.issues.map(function(i){ return i.count; }));
-
-  return (
-    <div style={{border:'1px solid var(--border)',borderRadius:'var(--radius-lg)',background:'var(--surface)',overflow:'hidden'}}>
-      {/* header */}
-      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:12,padding:'12px 14px',borderBottom:'1px solid var(--border)',flexWrap:'wrap'}}>
-        <div style={{fontFamily:'var(--font-mono)',fontSize:12.5,color:'var(--text-muted)'}}>
-          <span style={{color:'var(--accent)'}}>audit_site</span> {d.site} · {d.pagesCrawled.toLocaleString()} pages
-        </div>
-        <div style={{display:'flex',gap:14,flexWrap:'wrap'}}>
-          {d.stats.map(function(s){ return (
-            <div key={s.k} style={{fontSize:11.5,color:'var(--text-subtle)'}}>
-              <b style={{color:'var(--text)',fontFamily:'var(--font-mono)'}}>{s.v}</b> {s.k}
-            </div>
-          ); })}
-        </div>
-      </div>
-      {/* tab bar */}
-      <div style={{display:'flex',gap:6,padding:'10px 12px',borderBottom:'1px solid var(--border)',flexWrap:'wrap'}}>
-        {TABS.map(function(t){
-          var on = tab===t[0];
-          return <button key={t[0]} className={'data-tab'+(on?' data-tab--active':'')} onClick={function(){ setTab(t[0]); }}>{t[1]}</button>;
-        })}
-      </div>
-      {/* panels */}
-      <div style={{padding:'4px 6px 10px'}}>
-        {tab==='issues' && (
-          <table style={{width:'100%',borderCollapse:'collapse'}}>
-            <thead><tr><th style={th}></th><th style={th}>Issue</th><th style={Object.assign({},th,{textAlign:'right'})}>Pages</th><th style={Object.assign({},th,{width:'34%'})}></th></tr></thead>
-            <tbody>{d.issues.map(function(i){ return (
-              <tr key={i.key}>
-                <td style={Object.assign({},td,{width:24})}>{i.sev}</td>
-                <td style={td}>{i.label} <span style={{color:'var(--text-subtle)',fontFamily:'var(--font-mono)',fontSize:10.5}}>{i.key}</span></td>
-                <td style={Object.assign({},td,mono,{textAlign:'right'})}>{i.count}</td>
-                <td style={td}><AuditBar value={i.count} max={issueMax} color={i.sev==='🔴'?'#dc2626':i.sev==='🟠'?'#ea580c':'var(--accent)'}/></td>
-              </tr>
-            ); })}</tbody>
-          </table>
-        )}
-        {tab==='internal' && (
-          <div>
-            <div style={{display:'flex',gap:14,flexWrap:'wrap',padding:'8px 10px'}}>
-              {[['Total internal links',d.internal.totalLinks.toLocaleString()],['Orphan pages',d.internal.orphans],['Broken',d.internal.brokenInternal],['Avg inlinks / page',d.internal.avgInlinks]].map(function(s){
-                return <div key={s[0]} style={{fontSize:11.5,color:'var(--text-subtle)'}}><b style={{color:'var(--text)',fontFamily:'var(--font-mono)',fontSize:14,display:'block'}}>{s[1]}</b>{s[0]}</div>;
-              })}
-            </div>
-            <div style={{padding:'4px 10px 10px'}}>
-              <div style={{fontFamily:'var(--font-mono)',fontSize:10.5,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--text-subtle)',margin:'4px 0 8px'}}>Inlink distribution</div>
-              {[['0 (orphan)',d.internal.distribution.zero,'#dc2626'],['1–2',d.internal.distribution.oneToTwo,'#ea580c'],['3–10',d.internal.distribution.threeToTen,'var(--accent)'],['11+',d.internal.distribution.elevenPlus,'var(--accent)']].map(function(r){
-                return <div key={r[0]} style={{display:'flex',alignItems:'center',gap:10,marginBottom:6}}>
-                  <span style={{width:64,fontSize:11.5,color:'var(--text-muted)',fontFamily:'var(--font-mono)'}}>{r[0]}</span>
-                  <AuditBar value={r[1]} max={distMax} color={r[2]}/>
-                  <span style={{width:34,textAlign:'right',fontSize:11.5,fontFamily:'var(--font-mono)',color:'var(--text)'}}>{r[1]}</span>
-                </div>;
-              })}
-            </div>
-            <table style={{width:'100%',borderCollapse:'collapse',marginTop:6}}>
-              <thead><tr><th style={th}>Top pages by inlinks</th><th style={Object.assign({},th,{textAlign:'right'})}>Inlinks</th><th style={Object.assign({},th,{textAlign:'right'})}>Outlinks</th></tr></thead>
-              <tbody>{d.internal.top.map(function(p){ return (
-                <tr key={p.url}><td style={Object.assign({},td,mono)}>{p.url}</td><td style={Object.assign({},td,mono,{textAlign:'right'})}>{p.inlinks.toLocaleString()}</td><td style={Object.assign({},td,{textAlign:'right'})}>{p.out}</td></tr>
-              ); })}</tbody>
-            </table>
-          </div>
-        )}
-        {tab==='external' && (
-          <table style={{width:'100%',borderCollapse:'collapse'}}>
-            <thead><tr><th style={th}>External domain</th><th style={Object.assign({},th,{textAlign:'right'})}>Links</th><th style={Object.assign({},th,{textAlign:'right'})}>Nofollow</th><th style={Object.assign({},th,{textAlign:'right'})}>From pages</th></tr></thead>
-            <tbody>{d.external.domains.map(function(x){ return (
-              <tr key={x.domain}><td style={Object.assign({},td,mono)}>{x.domain}</td><td style={Object.assign({},td,mono,{textAlign:'right'})}>{x.links}</td><td style={Object.assign({},td,{textAlign:'right'})}>{x.nofollow}</td><td style={Object.assign({},td,{textAlign:'right'})}>{x.pages}</td></tr>
-            ); })}</tbody>
-          </table>
-        )}
-        {tab==='images' && (
-          <div>
-            <div style={{display:'flex',gap:14,flexWrap:'wrap',padding:'8px 10px'}}>
-              {[['Unique images',d.images.unique],['Total weight',d.images.totalSize],['Average',d.images.avgSize],['Over 100 KB',d.images.over100kb],['Legacy format',d.images.legacyFormat]].map(function(s){
-                return <div key={s[0]} style={{fontSize:11.5,color:'var(--text-subtle)'}}><b style={{color:'var(--text)',fontFamily:'var(--font-mono)',fontSize:14,display:'block'}}>{s[1]}</b>{s[0]}</div>;
-              })}
-            </div>
-            <table style={{width:'100%',borderCollapse:'collapse',marginTop:4}}>
-              <thead><tr><th style={th}>Heaviest images</th><th style={Object.assign({},th,{textAlign:'right'})}>Size</th><th style={th}>Format</th><th style={th}>Flags</th></tr></thead>
-              <tbody>{d.images.heaviest.map(function(im){ return (
-                <tr key={im.url}><td style={Object.assign({},td,mono)}>{im.url}</td><td style={Object.assign({},td,mono,{textAlign:'right'})}>{im.size}</td><td style={td}>{im.format}</td>
-                  <td style={td}>{im.over && <span style={{color:'#ea580c'}}>over 100KB</span>}{im.over && im.legacy ? ' · ' : ''}{im.legacy && <span style={{color:'#dc2626'}}>legacy</span>}</td></tr>
-              ); })}</tbody>
-            </table>
-          </div>
-        )}
-        {tab==='pages' && (
-          <table style={{width:'100%',borderCollapse:'collapse'}}>
-            <thead><tr><th style={th}>URL</th><th style={th}>Status</th><th style={th}>Indexable</th><th style={th}>Canonical</th><th style={Object.assign({},th,{textAlign:'right'})}>Words</th><th style={Object.assign({},th,{textAlign:'right'})}>Schema</th></tr></thead>
-            <tbody>{d.pages.map(function(p){ return (
-              <tr key={p.url}>
-                <td style={Object.assign({},td,mono)}>{p.url}</td>
-                <td style={Object.assign({},td,{color:p.status>=400?'#dc2626':p.status>=300?'#ea580c':'var(--text-muted)'})}>{p.status}</td>
-                <td style={td}>{p.indexable?'✓':'—'}</td>
-                <td style={td}>{p.canonical?'✓':'—'}</td>
-                <td style={Object.assign({},td,mono,{textAlign:'right'})}>{p.words.toLocaleString()}</td>
-                <td style={Object.assign({},td,{textAlign:'right'})}>{p.schema}</td>
-              </tr>
-            ); })}</tbody>
-          </table>
-        )}
-      </div>
-    </div>
-  );
-}
-```
-
-## 4. Wiring — render points
-
-### 4a. Feature page (primary)
-In `FeatureSection` (`app.jsx:2041` render), insert the demo **between** the `skill-section` block
-(closes ~`2079`) and the `More capabilities` block (opens ~`2081`). Gate to the audit feature only:
-
-```jsx
-{slug === 'web' && (
-  <div style={{marginTop:48}}>
-    <div className="section-kicker">See it in action</div>
-    <h2 className="how__title" style={{margin:'6px 0 16px'}}>A full technical SEO audit, not just a crawl</h2>
-    <AuditDemo />
-  </div>
-)}
-```
-`slug` is already in scope (`FeatureSection({ slug, ... })`, `var f = FEATURES[slug]`).
-
-### 4b. Homepage teaser (secondary, optional but recommended)
-On the landing page, after the existing data-tabs/source-tiles section, drop a compact instance:
-```jsx
-<div style={{maxWidth:760,margin:'28px auto 0'}}><AuditDemo compact /></div>
-```
-Place near the `sourceTiles` render (search `sourceTiles.map` in `app.jsx`) so it sits with the
-other "what you get" proof. Compact mode shows Issues / Internal links / Images only.
-
-## 5. Copy updates (same edit pass — make the claims match the visual)
-
-1. **Feature bullets** (`FEATURES.web.bullets`, `app.jsx:1955–1958`) — split the single audit bullet
-   into the specifics the demo now proves:
-   - `'Technical SEO audit: 30+ issue checks across titles, meta, headings, indexability, schema'`
-   - `'Internal link analysis: inlinks per page, orphan detection, link distribution, broken links'`
-   - `'External link profile: top linked domains, nofollow ratio, pages linking out'`
-   - `'Image audit: weight & format per image, over-100KB and legacy-format flags'`
-2. **Source tile** (`app.jsx:2386`) — keep, it's accurate.
-3. **`FEATURES.web.sub`** (`app.jsx:1952`) — already good; no change.
-
-## 6. CSS check
-`.data-tab` / `.data-tab--active` already exist (used at `app.jsx:2384`). Confirm they style a pill
-button; if `.data-tab` lacks base button reset, the inline usage still works because we only rely on
-its existing visual. **No new CSS required.** If tables need zebra/scroll on mobile, wrap each
-`<table>` in `<div style={{overflowX:'auto'}}>` (already safe at 414px since columns are few).
-
-## 7. Build, verify, deploy (website-only)
-
-```bash
-cd /Users/vilovieta/Desktop/mcp-scraper
-npm run build:ui                       # rebuild public/app.js from app.jsx
-grep -c "AuditDemo" public/app.js      # expect >=2 (def + render)
-git add public/app.jsx public/app.js
-git commit -m "feat(site): tabbed technical-SEO-audit visual demo (issues, links, images, indexability)"
-git push origin main
-/opt/homebrew/bin/vercel --prod --yes  # deploy; no version bump, no npm publish
-```
-Then load `https://mcpscraper.dev/features/web` (or whatever the audit feature route is — confirm via
-`FEATURE_ORDER` / the router) and click each tab; load the homepage for the compact teaser.
-
-## 8. Acceptance criteria
-- [ ] Feature page renders a 5-tab audit visual; every tab shows a populated table/bars.
-- [ ] Numbers in `AUDIT_DEMO` are internally consistent (e.g. distribution buckets sum ≈ pages).
-- [ ] Issue rows show severity color matching `seo-issues.ts` severity rules.
-- [ ] Homepage shows the 3-tab compact teaser.
-- [ ] Renders cleanly at 414px (mobile) — no horizontal overflow of the page.
-- [ ] No backend/test changes; `npm run build:ui` clean; deployed to prod.
-
-## 9. Out of scope / follow-ups
-- Live "run an audit on your URL" interactive demo (would hit `/extract-site` + cost credits).
-- Wiring the demo to real cached audit JSON instead of `AUDIT_DEMO` sample.