{/* Header — alert icon + title + score + "didn't count" badge. No toggle buttons on the right anymore — those move into the tabbed panel below. */}

Scan results may be incomplete · {score}/100 {wasBlocked && ( Didn't count toward your usage )}

{allAdvisories.length} issue{allAdvisories.length === 1 ? '' : 's'} found. Common causes: bot protection (Cloudflare, Wordfence, Sucuri, Defender), JavaScript-only content, login walls, or geo-blocked regions.

{/* 50/50 SPLIT: issues (left) + tabbed panel (right). Each side has flex:'1 1 320px', so they collapse to single column on viewports below ~720px wide via flexWrap. */}

{/* ── LEFT: Issue list ───────────────────────────────────── */}

{/* Header row: section label + general docs link. The docs link opens a guide that explains how to fix each type of advisory (Cloudflare allowlist, Wordfence allowlist, etc.) with screenshots and copy-paste rules. Opens in a new tab so users don't lose their scan view. */}

ISSUES FOUND

Troubleshooting guide ↗

{allAdvisories.map((a, i) => { const isCritical = a.severity === 'critical'; /* Per-advisory doc topic — match title fragments to known doc slugs. Lets us deep-link straight to the relevant fix article instead of the general troubleshooting page. Falls back to general guide for unmatched titles. */ const docSlug = (() => { const t = (a.title || '').toLowerCase(); if (/robots\.txt is blocked|sitemap\.xml is blocked/.test(t)) return 'security-allowlist'; if (/bot challenge|cloudflare|akamai|datadome|perimeter/.test(t)) return 'bot-protection'; if (/spa shell|javascript-only|empty body/.test(t)) return 'javascript-rendered-sites'; if (/few pages discovered|sitemap\.xml not found/.test(t)) return 'page-discovery'; if (/platform unidentified/.test(t)) return 'platform-detection'; if (/https|ssl/.test(t)) return 'ssl-issues'; return 'troubleshooting'; })(); return (

{isCritical && Critical} {a.title}

{a.action && (

→ {a.action}

)} {/* Per-issue "How do I fix this?" link — deep-links to the specific doc topic for this advisory. */}

How do I fix this? ↗

); })}

{/* ── RIGHT: Tabbed panel ─────────────────────────────────── Wrapped in a darker container so it visually separates from the rose-tinted left panel. Background uses --bg or near-black with subtle border. The tab strip sits inside this container with button-style pills (active = beam, inactive = ghost). */}

{/* Tab strip — pill-style buttons inside a header bar. Active tab uses the beam color (matches the SaaS button system); inactive tabs are ghost-style. The header bar has its own subtle bottom border separating it from content. */}

{tabs.map(t => { const isActive = activeTab === t.id; return ( ); })}

{/* Tab content — padded inner area so content doesn't touch the container edges. minHeight keeps the panel from jumping size as the user clicks between tabs. */}

{activeTab === 'breakdown' && signals.length > 0 && (

{signals.map(s => ( ))}

{s.met ? : ✗}

{s.label}

+{s.weight}

)} {activeTab === 'checklist' && pre_migration_checklist.length > 0 && (

{pre_migration_checklist.map((item, i) => (

{item.title || item}

{item.note && (

{item.note}

)}

))}

)} {activeTab === 'allowlist' && ( )}

{/* Header row — score + band label + progress bar. Hidden when skipScore=true (caller is rendering ScanConfidenceCompact inline in the page header instead, this widget just provides the expandable details below). */} {!skipScore && (

SCAN CONFIDENCE {score} /100 {bandLabel}

{/* Bar */}

{/* Toggle: signal breakdown */}

)} {/* When skipScore=true AND no external toggle setters were provided, we still need a "Show breakdown" toggle row inside the widget since the inline compact widget doesn't have one. When external setters ARE provided, the caller (e.g. the Actions toolbar) is rendering the toggle buttons themselves — skip the in-widget row. */} {skipScore && typeof setShowSignalsExternal !== 'function' && (

{pre_migration_checklist.length > 0 && ( )}

)} {/* Low-confidence consolidated card — when band='low', combines what was previously 4 separate stacked blocks (banner + 3 advisory cards) into a single compact card. Header line summarizes the situation; condensed issue list shows what failed + how to fix. Critical advisories get an inline alert badge. Click "What can I do?" to expand the full action plan instead of showing it inline. When band !== 'low', this whole block is skipped. Critical advisories still render in their own block below for high/medium band scans (where the score is acceptable but specific signals like bot challenges still need attention). */} {band === 'low' && (criticalAdvisories.length > 0 || otherAdvisories.length > 0) && ( )} {/* Critical advisories outside low-band — for high/medium scans where the cumulative score is fine but a specific critical signal (bot challenge, SPA shell) still needs attention. */} {band !== 'low' && criticalAdvisories.length > 0 && (

{criticalAdvisories.map((a, i) => (

{a.title}

{a.body}

{a.action && (

→ {a.action}

)}

))}

)} {/* Warn-level advisories outside low-band — only show when user clicks "Show breakdown" toggle (diagnostic info, not blocking). */} {band !== 'low' && showSignals && otherAdvisories.length > 0 && (

{otherAdvisories.map((a, i) => (

{a.title}

{a.body}

{a.action && (

→ {a.action}

)}

))}

)} {/* Signal breakdown table — always behind the toggle (it's diagnostic detail, not actionable info). Even when band=low, the table only appears once user clicks "Show breakdown". 2026-05-18 v2 per Jordan: wrap in a clearly-styled notice card with cyan accent + title so the diagnostic panel visually pops rather than blending into surrounding content. Was "informational but mis-placed and lost on the page". */} {showSignals && (

Scan Diagnostic — Signal Breakdown {signals.filter(s => s.met).length} of {signals.length} signals met

{/* Signal table — every check, met/unmet */} {signals.map(s => ( ))}

	Signal	Weight
{s.met ? : ✗}	{s.label}	{s.weight}

)} {/* Pre-migration checklist — separate toggle. Even on a 100% confident scan, the agency still has prep work to do before migrating. When skipScore=true, the toggle button is rendered in the unified toggles row above; here we only render the panel content. */} {pre_migration_checklist.length > 0 && (

{!skipScore && ( )} {showChecklist && (

Pre-Migration Action Items {pre_migration_checklist.length} items · review before migration

{pre_migration_checklist.map(item => { const sevColor = item.severity === 'must' ? 'var(--rose, #f43f5e)' : item.severity === 'should' ? 'var(--warn, #fbbf24)' : 'var(--dim)'; const sevLabel = item.severity === 'must' ? 'MUST' : item.severity === 'should' ? 'SHOULD' : 'FYI'; return (

{sevLabel} {item.title}

{item.action}

{item.autodetected_reason && (

Auto-flagged because: {item.autodetected_reason}

)}

); })}

)}

); } window.ScanConfidenceWidget = ScanConfidenceWidget; /* ── ScanConfidenceCompact ───────────────────────────────────────────── Slimmed-down score display for inline use in the Scan Overview header. Shows: SCAN CONFIDENCE label · score/100 · band tag · progress bar. No expand toggle, no advisories, no checklist — those are rendered below in . Reuses the same band color logic so the two pieces stay visually coordinated. */ function ScanConfidenceCompact({ confidence }) { if (!confidence || typeof confidence.score !== 'number') return null; const { score, band } = confidence; const bandColor = band === 'high' ? 'var(--green, #22c55e)' : band === 'medium' ? 'var(--warn, #fbbf24)' : 'var(--rose, #f43f5e)'; const bandBg = band === 'high' ? 'rgba(34, 197, 94, 0.08)' : band === 'medium' ? 'rgba(251, 191, 36, 0.08)' : 'rgba(244, 63, 94, 0.08)'; const bandBorder = band === 'high' ? 'rgba(34, 197, 94, 0.3)' : band === 'medium' ? 'rgba(251, 191, 36, 0.3)' : 'rgba(244, 63, 94, 0.3)'; const bandLabel = band === 'high' ? 'High' : band === 'medium' ? 'Medium' : 'Low'; return (

SCAN CONFIDENCE {score}/100 {bandLabel}

); } window.ScanConfidenceCompact = ScanConfidenceCompact; /* ── ConfirmDialog ──────────────────────────────────────────────────── Reusable confirmation modal that replaces native window.confirm(). Native confirm dialogs can't be styled or centered consistently across browsers/OSes — they look jarring next to our branded UI and appear in different positions on different platforms (top of viewport on iOS, center on macOS Chrome, etc.). This component: - Renders a fixed-position overlay covering the whole viewport - Centers the dialog vertically + horizontally via flexbox - Dims + blurs the page behind via rgba(0,0,0,.75) + backdrop-filter - Uses the same .modal / .btn-confirm / .btn-cancel classes the rest of the SaaS uses, so it inherits the brand's color tokens, fonts, and animations automatically - Closes on Escape key or backdrop click (standard a11y patterns) - Returns a Promise so callers can `await` the user's choice instead of writing callback chains Body scroll is locked while the dialog is open — prevents the page from scrolling under the overlay if the user happens to scroll wheel while reading the dialog. Usage (via hook): const confirm = useConfirmDialog(); const ok = await confirm({ title: 'Sign out', message: 'Are you sure?', confirmLabel: 'Sign out', cancelLabel: 'Cancel', danger: true, // optional, makes confirm button rose }); if (ok) doLogout(); For one-line text confirmations, message accepts plain string. For richer content with formatting, message can be a React node. */ function ConfirmDialog({ open, title, message, confirmLabel, cancelLabel, danger, onConfirm, onCancel }) { const { useEffect } = React; /* Body scroll lock + Escape key handler — only active while dialog is open. Cleanup function removes both on unmount or close. */ useEffect(() => { if (!open) return; const previousOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; function onKey(e) { if (e.key === 'Escape') onCancel?.(); } document.addEventListener('keydown', onKey); return () => { document.body.style.overflow = previousOverflow; document.removeEventListener('keydown', onKey); }; }, [open, onCancel]); if (!open) return null; return (

{ /* Backdrop click cancels (standard modal a11y). Only trigger if user clicked the overlay itself, not the dialog content — checking e.target === e.currentTarget prevents accidental cancels when clicking inside the modal. */ if (e.target === e.currentTarget) onCancel?.(); }} style={{ position:'fixed', inset:0, zIndex:10000, background:'rgba(0, 0, 0, 0.72)', backdropFilter:'blur(4px)', WebkitBackdropFilter:'blur(4px)', display:'flex', alignItems:'center', justifyContent:'center', padding:20, animation:'wpsbModalFadeIn .2s ease both', }} role="dialog" aria-modal="true" aria-labelledby="wpsb-confirm-title" > {/* Inline keyframes — defined once per render, no global CSS needed */}

e.stopPropagation()} style={{ background:'var(--surface, #0f1620)', border:'1px solid var(--border, rgba(255,255,255,.08))', borderRadius:12, width:'100%', maxWidth:480, padding:'22px 24px', boxShadow:'0 24px 60px rgba(0, 0, 0, 0.5)', animation:'wpsbModalSlideIn .25s ease both', }} >

{title}

{message}

); } window.ConfirmDialog = ConfirmDialog; /* ── useConfirmDialog hook ──────────────────────────────────────────── Replaces window.confirm() with our branded ConfirmDialog. Returns a function that takes options and returns Promise. The hook also returns the dialog state — caller renders once at the bottom of their tree, then uses the confirm() function freely throughout the component. */ function useConfirmDialog() { const { useState, useCallback, useMemo } = React; const [state, setState] = useState({ open:false }); const confirm = useCallback((opts) => { return new Promise((resolve) => { setState({ open: true, title: opts.title || 'Confirm', message: opts.message || '', confirmLabel: opts.confirmLabel || 'Confirm', cancelLabel: opts.cancelLabel || 'Cancel', danger: !!opts.danger, _resolve: resolve, }); }); }, []); const handleConfirm = useCallback(() => { state._resolve?.(true); setState({ open:false }); }, [state]); const handleCancel = useCallback(() => { state._resolve?.(false); setState({ open:false }); }, [state]); const dialogProps = useMemo(() => ({ open: state.open, title: state.title, message: state.message, confirmLabel: state.confirmLabel, cancelLabel: state.cancelLabel, danger: state.danger, onConfirm: handleConfirm, onCancel: handleCancel, }), [state, handleConfirm, handleCancel]); return { confirm, dialogProps }; } window.useConfirmDialog = useConfirmDialog; function ScanProgressBar({ modes }) { const { useState, useEffect } = React; const [pct, setPct] = useState(0); const [phaseIdx, setPhaseIdx] = useState(0); const [pageProgress, setPageProgress] = useState(null); // {index, total, label} /* Phases — tuned to what server actually does in parallel. Order matters: we cycle through them to show activity, but the user shouldn't assume linear progression (many happen concurrently). */ const phases = (() => { const base = [ 'Connecting to scanner service…', 'Fetching homepage + contact pages…', 'Detecting platform + CMS signatures…', ]; if (modes.brand) { base.push('Extracting colors, fonts, logo…'); base.push('Parsing contact info from pages…'); } if (modes.platform) { base.push('Crawling sitemap + navigation…'); base.push('Analyzing migration complexity…'); } if (modes.ada) { base.push('Running accessibility checks…'); base.push('Computing WCAG violations…'); } base.push('Extracting per-page content + images…'); base.push('Finalizing scan report…'); return base; })(); useEffect(() => { let mounted = true; /* Progress animation — tick every 400ms. Acceleration curve: moves faster early (user sees immediate motion), slows as it approaches 90% (caps there until real completion). Expected total scan duration is ~40-80s with per-page enrichment, so we aim for a slower curve that reaches 90% at around 60s. */ const progressInterval = setInterval(() => { if (!mounted) return; setPct(prev => { if (prev >= 90) return prev; // hold at 90% const remaining = 90 - prev; const step = Math.max(0.2, remaining * 0.022); // slower curve for longer scans return Math.min(90, prev + step); }); }, 400); /* Phase text rotation — every 3s, advance to next phase. Stays on last phase when we run out. */ const phaseInterval = setInterval(() => { if (!mounted) return; setPhaseIdx(prev => Math.min(prev + 1, phases.length - 1)); }, 3000); /* Session pages-tab: listen for per-page enrichment progress events. enrichPagesData calls window.wpsbScanProgress({kind:'page', index, total, label}) for each URL it fetches. We display the live page name in place of the rotating phase text while enrichment is running. */ window.wpsbScanProgress = (evt) => { if (!mounted) return; if (evt && evt.kind === 'page') { setPageProgress({ index: evt.index, total: evt.total, label: evt.label }); } }; return () => { mounted = false; clearInterval(progressInterval); clearInterval(phaseInterval); /* Only detach if it's still our handler (defensive against race) */ if (window.wpsbScanProgress) { try { delete window.wpsbScanProgress; } catch { window.wpsbScanProgress = null; } } }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /* Per-page enrichment text overrides the phase rotation when active */ const currentPhase = pageProgress ? `Scanning page ${pageProgress.index + 1} of ${pageProgress.total}: ${pageProgress.label}…` : (phases[phaseIdx] || phases[0]); return (

{/* Status line: spinner + current phase */}

{/* Progress bar track + fill */}

{/* Subtle note so users know this isn't stuck. Only show after we've been at ~90% for a bit (pct stable for 2+ ticks). */} {pct >= 89 && (

Large sites can take up to a minute — still working…

)}

); } window.ScanProgressBar = ScanProgressBar; /* ── ScanEmptyState (moved from Scanner.jsx line 2663) ─── */ function ScanEmptyState({ tab, reason, bare = false }) { const note = reason || 'This data will appear here when a future scan engine update adds it.'; /* Map tab name → appropriate Icon. Falls back to 'search' for tabs we don't have a specific icon for. Using real icons (not Unicode glyphs like ◌) keeps the visual language consistent across the app. */ const iconFor = (() => { const t = (tab || '').toLowerCase(); if (t.includes('brand')) return 'palette'; if (t.includes('contact')) return 'phone'; if (t.includes('image')) return 'image'; if (t.includes('file') || t.includes('doc')) return 'file'; if (t.includes('sitemap') || t.includes('page')) return 'sitemap'; if (t.includes('tech') || t.includes('dns')) return 'server'; if (t.includes('seo')) return 'search'; if (t.includes('map')) return 'map-pin'; if (t.includes('icon')) return 'grid'; if (t.includes('ada')) return 'shield'; if (t.includes('rec')) return 'spark'; if (t.includes('plugin') || t.includes('form')) return 'layers'; if (t.includes('integration')) return 'server'; return 'search'; })(); /* When `bare` is true, the empty state is being rendered INSIDE another card-body (e.g. Plugins & Forms tab's per-section cards) — so we skip the outer card wrapper to prevent card-in-card visual nesting (which produces the rounded-corner gap artifact at the top edges of the parent card). The inner content is identical either way. */ const inner = (

No {tab} data in this scan yet

{note}

); if (bare) { return

{inner}

; } return (

{/* LEFT-ALIGNED LAYOUT: Icon circle sits on the left, text content sits to its right. All text is left-aligned, reducing the previous 60px vertical padding to a more compact 24px so the empty state doesn't dominate the tab. On narrow screens (<480px), the icon stacks above the text — both stay left-aligned. */}

{inner}

); } window.ScanEmptyState = ScanEmptyState;

⚠ {this.props.tabName || 'This tab'} failed to render