{/* Round 7: removed the duplicate "Detected plugins" card from this
tab. Plugin enumeration with category, version, vendor link, and
forms detection lives in the dedicated Plugins & Forms tab.
Keeping it in two places caused: (a) confusion about which is
authoritative, (b) drift risk when one renderer was updated and
the other wasn't. Show a small navigation hint when plugins are
detected so users discover the dedicated tab. */}
{tech.plugins && tech.plugins.length > 0 && (
{tech.plugins.length} plugin{tech.plugins.length === 1 ? '' : 's'} detected
{' — see the '}
Plugins & Forms
{' tab for the full list with versions, categories, and vendor links.'}
)}
{/* DNS records — populated by enrichDnsData() post-scan */}
{dns.length === 0 ? (
DNS Records
DNS lookup returned no records
This can happen if the domain doesn't have public DNS records (uncommon), or the lookup timed out. Re-running the scan usually fixes it.
) : (
DNS Records ({dns.length})
Export to Cloudflare: downloads a BIND zone file you can upload at Cloudflare → DNS → Records → Import (for new domains) or paste record-by-record.
Type
Host
Value
{dns.map((r, i) => (
{r.type}
{r.host}
{r.val}
{/* Explicit Copy button — accessible affordance beyond
just "value is clickable." Replaces the old prose
"Click any value to copy" instruction per ADA best
practice (visible affordance > instructional text). */}
))}
)}
);
}
/* ── DNS helper functions (used by ScannerTechTab) ─────────────────────────
typeColor: returns color scheme per DNS record type for visual scanning.
dnsToCSV: fallback CSV builder if payloads.dnsCsv isn't populated.
exportDnsForCloudflare: builds a BIND zone file and triggers download.
Cloudflare's import expects BIND format (RFC 1035) — it's the de-facto
standard and our most reliable portability format. */
function typeColor(type) {
switch (type) {
case 'A': return { bg:'var(--beam-dim)', fg:'var(--beam)', border:'var(--beam-dim)' };
case 'AAAA': return { bg:'var(--beam-dim)', fg:'var(--beam)', border:'var(--beam-dim)' };
case 'CNAME': return { bg:'var(--purple-dim)', fg:'var(--purple)', border:'var(--purple-dim)' };
case 'MX': return { bg:'var(--warn-dim)', fg:'var(--warn)', border:'var(--warn-dim)' };
case 'NS': return { bg:'rgba(107,114,128,.12)', fg:'var(--muted)', border:'rgba(107,114,128,.3)' };
case 'TXT': return { bg:'var(--green-dim)', fg:'var(--green)', border:'var(--green-dim)' };
case 'SPF': return { bg:'var(--green-dim)', fg:'var(--green)', border:'var(--green-dim)' };
case 'DMARC': return { bg:'var(--rose-dim)', fg:'var(--rose)', border:'var(--rose-dim)' };
default: return { bg:'var(--surface-2)', fg:'var(--dim)', border:'var(--border)' };
}
}
function dnsToCSV(dns) {
const rows = [['Type', 'Host', 'Value']];
dns.forEach(r => rows.push([r.type, r.host, r.val]));
return rows.map(r => r.map(cell => {
const s = String(cell || '');
return /[,"\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
}).join(',')).join('\n');
}
function exportDnsForCloudflare(data, dns) {
/* Build a BIND zone file (RFC 1035 format). Cloudflare imports this
directly at DNS → Records → Import. We include a standard TTL of
3600 and the origin declaration at the top. */
const apex = data.site || 'example.com';
const ttl = 3600;
const lines = [
`; BIND zone file for ${apex}`,
`; Generated by WPSiteBeam scanner on ${new Date().toISOString()}`,
`; Import at Cloudflare: DNS → Records → Import and Export → Import`,
`;`,
`; NOTE: Review before import. Delete or edit any records that differ`,
`; from what you want in your new Cloudflare zone. Nameserver`,
`; (NS) records are NOT needed — Cloudflare provides its own.`,
`;`,
`$ORIGIN ${apex}.`,
`$TTL ${ttl}`,
``,
];
/* A records */
dns.filter(r => r.type === 'A').forEach(r => {
lines.push(`${r.host === apex ? '@' : r.host.replace('.' + apex, '')}\t${ttl}\tIN\tA\t${r.val}`);
});
/* AAAA records */
dns.filter(r => r.type === 'AAAA').forEach(r => {
lines.push(`${r.host === apex ? '@' : r.host.replace('.' + apex, '')}\t${ttl}\tIN\tAAAA\t${r.val}`);
});
/* CNAME records */
dns.filter(r => r.type === 'CNAME').forEach(r => {
const name = r.host.endsWith('.' + apex) ? r.host.slice(0, -(apex.length + 1)) : r.host;
const target = r.val.endsWith('.') ? r.val : r.val + '.';
lines.push(`${name}\t${ttl}\tIN\tCNAME\t${target}`);
});
/* MX records — value is "priority host" */
dns.filter(r => r.type === 'MX').forEach(r => {
const [priority, mxHost] = r.val.split(/\s+/);
const target = (mxHost || '').endsWith('.') ? mxHost : (mxHost || '') + '.';
lines.push(`@\t${ttl}\tIN\tMX\t${priority || 10}\t${target}`);
});
/* TXT / SPF — wrap value in quotes */
dns.filter(r => r.type === 'TXT' || r.type === 'SPF').forEach(r => {
const safe = r.val.replace(/"/g, '\\"');
lines.push(`@\t${ttl}\tIN\tTXT\t"${safe}"`);
});
/* DMARC — special TXT at _dmarc subdomain */
dns.filter(r => r.type === 'DMARC').forEach(r => {
const safe = r.val.replace(/"/g, '\\"');
lines.push(`_dmarc\t${ttl}\tIN\tTXT\t"${safe}"`);
});
/* Skip NS — Cloudflare assigns its own nameservers */
const zone = lines.join('\n') + '\n';
const filename = `${apex}-dns-cloudflare.zone`;
window.wpsbDownload?.(filename, zone, 'text/plain');
window.wpsbToast?.(`Downloaded ${filename} — upload at Cloudflare DNS Import`, 'ok');
}
/* ScannerMapsTab + ScannerIconsTab removed — content consolidated into
Contact tab (Maps) and Brand Kit tab (Icon Libraries). See the inline
blocks in those components. */
/* ── saveRecsToDashboard ─────────────────────────────────────────
Pushes scan recommendations to the user's dashboard queue via
Railway endpoint POST /dashboard/recommendations, which inserts
to Supabase table ai_recommendations.
Required Supabase schema (run manually — see docs):
CREATE TABLE ai_recommendations (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
account_id UUID REFERENCES accounts(id),
site TEXT NOT NULL,
message TEXT NOT NULL,
category TEXT NOT NULL,
priority TEXT CHECK (priority IN ('low','med','high')) DEFAULT 'med',
status TEXT CHECK (status IN ('pending','done','dismissed')) DEFAULT 'pending',
source TEXT DEFAULT 'scanner',
scan_id TEXT,
created_at TIMESTAMPTZ DEFAULT NOW(),
updated_at TIMESTAMPTZ DEFAULT NOW()
);
CREATE INDEX idx_ai_recs_account_status ON ai_recommendations(account_id, status);
Required Railway endpoint (pending — see task list):
POST /dashboard/recommendations
Auth: requireJWT('wpsb-app')
Body: { site, recs: [{message, category, priority}] }
Response: { count, ids: [...] }
*/
async function saveRecsToDashboard(data, recs) {
if (!recs || recs.length === 0) {
window.wpsbToast?.('No recommendations to save', 'warn');
return;
}
const RAILWAY = (typeof window !== 'undefined' && window.WPSB_API)
|| 'https://wpsitebeam-railway-api-production.up.railway.app';
const token = (typeof window !== 'undefined' && window.WPSB?.getToken?.()) || null;
if (!token) {
window.wpsbToast?.('Please sign in to save recommendations', 'warn');
return;
}
const payload = {
site: data?.site || 'unknown',
scan_id: data?.scanId || null,
recs: recs.map(([message, category, priority, type]) => ({
message,
category,
priority,
source: 'scanner',
type, /* 'migration' or 'warning' */
})),
};
try {
window.wpsbToast?.(`Saving ${recs.length} recommendation${recs.length === 1 ? '' : 's'}…`, 'ok');
const r = await fetch(`${RAILWAY}/dashboard/recommendations`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
body: JSON.stringify(payload),
});
if (r.status === 404) {
/* Endpoint not deployed yet — honest fallback */
window.wpsbToast?.('Dashboard integration coming soon — endpoint not yet deployed.', 'warn');
return;
}
if (!r.ok) {
const errText = await r.text().catch(() => 'Unknown error');
window.wpsbToast?.(`Save failed (${r.status}): ${errText.substring(0, 100)}`, 'warn');
return;
}
const j = await r.json();
window.wpsbToast?.(`Saved ${j.count || recs.length} recommendation${(j.count || recs.length) === 1 ? '' : 's'} to your dashboard`, 'ok');
} catch (e) {
if (typeof console !== 'undefined') console.warn('[saveRecsToDashboard] Network error:', e);
window.wpsbToast?.(`Couldn't save: ${e.message}`, 'warn');
}
}
function ScannerRecsTab({ data }) {
const { useState } = React;
/* Build recommendations list from real migration notes + warnings.
Fallback to a static "no recs yet" state if nothing returned. */
const realRecs = [];
(data?.migrationNotes || []).forEach(n => {
if (!n || !n.message) return;
const pri = n.severity === 'high' ? 'high'
: n.severity === 'medium' || n.severity === 'med' ? 'med'
: 'low';
realRecs.push([n.message, n.area || 'Migration', pri, 'migration']);
});
(data?.warnings || []).forEach(w => {
const txt = typeof w === 'string' ? w : (w.message || w.text || '');
if (!txt) return;
realRecs.push([txt, 'Warning', 'med', 'warning']);
});
/* Add AI summary as a "fix plan" if Brain 4 was active */
const hasAISummary = !!(data?.aiSummary);
const [expanded, setExpanded] = useState(null);
if (realRecs.length === 0 && !hasAISummary) {
return (
AI Recommendations
No issues found
✓
No migration issues detected
This site has no blockers or warnings flagged by the scanner. Enable AI-powered analysis in your account settings for deeper insights.
);
}
return (
<>
{hasAISummary && (
AI Summary
AI-POWERED
{data.aiSummary}
)}
{realRecs.length > 0 && (
Migration Notes & Warnings
{realRecs.length} item{realRecs.length === 1 ? '' : 's'}
{/* Save to Dashboard — pushes recs to Supabase ai_recommendations
table as a pending to-do queue. Target endpoint on Railway:
POST /dashboard/recommendations { site, recs[] }. See
saveRecsToDashboard() below for shape + error handling. */}
{realRecs.map(([txt, cat, pri, type], i) => (
{txt}
{cat}
{pri.toUpperCase()}
))}
)}
);
}
/* ScannerSeoTab removed — per-page SEO meta is shown inside Pages tab
(Identity · On-Page SEO · Page Structure sections). Aggregate SEO
scoring would require server-side changes that aren't in place yet;
re-add the tab if/when seoPages[] is populated by the scan engine. */
/* ── Scan Mode Help modal ─────────────────────────────────────── */
function ScanModeHelp({ onClose }) {
const rows = [
['Colors · fonts · logos', true, false],
['Images · favicon · typography', true, false],
['Contact info (emails/phones)', 'opt', false],
['SEO meta · per-page data', 'opt', false],
['Maps · icon libraries', 'opt', false],
['Platform detection (WP / Joomla / Drupal)', false, true],
['Platform version fingerprint', false, true],
['URL inventory (full crawl)', false, true],
['XML sitemap parsing', false, true],
['Navigation menu extraction', false, true],
['Document discovery (PDFs, Office)', false, true],
['Migration complexity score', false, true],
['Migration time estimate', false, true],
['CMS extensions / plugins', false, true],
['Counts against monthly scan limit', false, true],
];
const mark = v => v === true ? ✓
: v === 'opt' ? opt
: —;
return (