@pixelated-tech/components 3.3.6 → 3.4.1

package/dist/components/admin/site-health/site-health-on-site-seo.js

@@ -0,0 +1,204 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { SiteHealthTemplate } from './site-health-template';
+import { getScoreIndicator } from './site-health-indicators';
+/**
+ * Restructure audits by type with all pages and their individual results
+ */
+function restructureAuditsByType(pagesAnalyzed) {
+    const auditMap = new Map();
+    // Collect all audit results by type
+    pagesAnalyzed.forEach(page => {
+        page.audits.forEach(audit => {
+            if (!auditMap.has(audit.id)) {
+                auditMap.set(audit.id, {
+                    audit: { ...audit },
+                    pageResults: []
+                });
+            }
+            auditMap.get(audit.id).pageResults.push({
+                pageUrl: page.url,
+                pageTitle: page.title,
+                score: audit.score,
+                displayValue: audit.displayValue,
+                details: audit.details
+            });
+        });
+    });
+    // Create restructured audits with all pages
+    const restructuredAudits = [];
+    auditMap.forEach(({ audit, pageResults }) => {
+        // Calculate overall score for this audit type
+        const validScores = pageResults.map(r => r.score).filter(score => score !== null);
+        const overallScore = validScores.length > 0 ? validScores.reduce((sum, score) => sum + score, 0) / validScores.length : null;
+        // Include ALL pages for this audit type (not just failed ones)
+        const allPageResults = [];
+        pageResults.forEach(result => {
+            allPageResults.push({
+                page: result.pageTitle || result.pageUrl,
+                url: result.pageUrl,
+                score: result.score,
+                displayValue: result.displayValue,
+                details: result.details
+            });
+        });
+        // Create restructured audit
+        const passCount = pageResults.filter(r => r.score === 1).length;
+        const totalCount = pageResults.length;
+        const restructuredAudit = {
+            id: audit.id,
+            title: audit.title,
+            score: overallScore,
+            scoreDisplayMode: audit.scoreDisplayMode,
+            displayValue: `${passCount}/${totalCount} pages pass`,
+            category: audit.category,
+            details: allPageResults.length > 0 ? {
+                items: allPageResults
+            } : undefined
+        };
+        restructuredAudits.push(restructuredAudit);
+    });
+    return restructuredAudits.sort((a, b) => (b.score || 0) - (a.score || 0));
+}
+// Fetch real SEO data from API
+async function fetchOnSiteSEOData(siteName) {
+    try {
+        const response = await fetch(`/api/site-health/on-site-seo?siteName=${encodeURIComponent(siteName)}`);
+        if (!response.ok) {
+            throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (data.status === 'error') {
+            throw new Error(data.error || 'SEO analysis failed');
+        }
+        // Process data to aggregate audits by type across all pages
+        // const aggregatedOnPageAudits = restructureAuditsByType(data.pagesAnalyzed);
+        return data;
+    }
+    catch (error) {
+        console.error('Error fetching SEO data:', error);
+        // Return error structure that the template can display
+        return {
+            site: siteName,
+            url: '',
+            overallScore: null,
+            pagesAnalyzed: [],
+            onSiteAudits: [],
+            totalPages: 0,
+            timestamp: new Date().toISOString(),
+            status: 'error',
+            error: error instanceof Error ? error.message : 'Failed to fetch SEO data'
+        };
+    }
+}
+export function SiteHealthOnSiteSEO({ siteName }) {
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "On-Site SEO", fetchData: fetchOnSiteSEOData, children: (data) => {
+            if (!data)
+                return null;
+            if (data.status === 'error') {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", data.error] }));
+            }
+            // Process data to aggregate audits by type across all pages
+            const aggregatedOnPageAudits = restructureAuditsByType(data.pagesAnalyzed);
+            const getScoreColor = (score) => {
+                return getScoreIndicator(score).color;
+            };
+            const getAuditScoreIcon = (score) => {
+                return getScoreIndicator(score).icon;
+            };
+            const formatPageIssue = (item) => {
+                // Handle page-specific results from restructured data
+                if (item.page && typeof item.page === 'string') {
+                    const pageName = item.page;
+                    const score = item.score;
+                    const displayValue = item.displayValue;
+                    const details = item.details;
+                    let result = `${pageName}: ${Math.round(score * 100)}%`;
+                    // Add display value if present
+                    if (displayValue) {
+                        result += ` (${displayValue})`;
+                    }
+                    // Add detailed breakdown for semantic tags
+                    if (details?.items && Array.isArray(details.items)) {
+                        const requiredSection = details.items.find(item => item.type === 'required');
+                        const optionalSection = details.items.find(item => item.type === 'optional');
+                        const summarySection = details.items.find(item => item.type === 'summary');
+                        if (requiredSection?.tags && Array.isArray(requiredSection.tags)) {
+                            const requiredTags = requiredSection.tags;
+                            const presentRequired = requiredTags.filter(t => t.present).map(t => t.tag);
+                            const missingRequired = requiredTags.filter(t => !t.present).map(t => t.tag);
+                            result += `\n  Required tags found: ${presentRequired.join(', ') || 'none'}`;
+                            if (missingRequired.length > 0) {
+                                result += `\n  Required tags missing: ${missingRequired.join(', ')}`;
+                            }
+                        }
+                        if (optionalSection?.tags && Array.isArray(optionalSection.tags)) {
+                            const optionalTags = optionalSection.tags;
+                            const presentOptional = optionalTags.filter(t => t.present).map(t => t.tag);
+                            if (presentOptional.length > 0) {
+                                result += `\n  Optional tags found: ${presentOptional.join(', ')}`;
+                            }
+                        }
+                        if (summarySection) {
+                            const totalCount = summarySection.totalCount;
+                            result += `\n  Total semantic tags: ${totalCount}`;
+                        }
+                    }
+                    return result;
+                }
+                // Fallback to original formatting
+                return formatAuditItem(item);
+            };
+            const formatAuditItem = (item) => {
+                // Handle specific SEO element formatting based on the user's list
+                // Title Tags
+                if (item.title && typeof item.title === 'string') {
+                    return `Title: "${item.title}" (${item.length || 'unknown'} chars)`;
+                }
+                // Meta tags
+                if (item.name && typeof item.name === 'string' && item.content) {
+                    return `${item.name}: ${String(item.content)}`;
+                }
+                // Headings
+                if (item.tag && typeof item.tag === 'string' && item.tag.match(/^h[1-6]$/i)) {
+                    return `${item.tag}: "${item.text || ''}"`;
+                }
+                // Links and URLs
+                if (item.url && typeof item.url === 'string') {
+                    if (item.issue && typeof item.issue === 'string') {
+                        return `${item.url} - ${item.issue}`;
+                    }
+                    return item.url;
+                }
+                // Images with alt tags
+                if (item.src && typeof item.src === 'string') {
+                    return `Image: ${item.src} ${item.alt ? '(has alt)' : '(missing alt)'}`;
+                }
+                // Robots.txt directives
+                if (item.directive && typeof item.directive === 'string') {
+                    return `${item.directive}: ${item.value || ''}`;
+                }
+                // Sitemap entries
+                if (item.loc && typeof item.loc === 'string') {
+                    return item.loc;
+                }
+                // Default formatting
+                return Object.entries(item)
+                    .map(([key, value]) => `${key}: ${String(value)}`)
+                    .join(', ');
+            };
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: data.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", data.url] }), data.overallScore !== null && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "On-Site SEO Score" }), _jsxs("div", { className: "health-score-value", style: { color: getScoreColor(data.overallScore) }, children: [Math.round((data.overallScore || 0) * 100), "%"] }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: `${(data.overallScore || 0) * 100}%`,
+                                            backgroundColor: getScoreColor(data.overallScore)
+                                        } }) })] }) })), aggregatedOnPageAudits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "On-Page SEO Audits" }), _jsx("div", { className: "space-y-2", children: aggregatedOnPageAudits
+                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title] }), audit.displayValue && audit.score !== 1 && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details && audit.details.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && audit.score !== 1 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items
+                                                            .filter((item) => item.score !== 1)
+                                                            .map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatPageIssue(item) }, idx))) }) }))] })] }, audit.id))) })] })), data.onSiteAudits.length > 0 && (_jsxs("div", { style: { marginTop: data.pagesAnalyzed.length > 0 ? '2rem' : '0' }, children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "On-Site SEO Audits" }), _jsx("div", { className: "space-y-2", children: data.onSiteAudits
+                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .sort((a, b) => (b.score || 0) - (a.score || 0))
+                                    .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title] }), audit.displayValue && audit.score !== 1 && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details && audit.details.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && audit.score !== 1 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items
+                                                            .filter((item) => item.score !== 1)
+                                                            .map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatAuditItem(item) }, idx))) }) }))] })] }, audit.id))) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(data.timestamp).toLocaleString()] })] }));
+        } }));
+}

package/dist/components/admin/site-health/site-health-overview.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SiteHealthTemplate } from './site-health-template';
+import { getScoreIndicator } from './site-health-indicators';
+export function SiteHealthOverview({ siteName }) {
+    const fetchCWVData = useCallback(async (site) => {
+        const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to fetch Core Web Vitals data');
+        }
+        return result;
+    }, []);
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Site Overview", fetchData: fetchCWVData, children: (data) => {
+            if (!data?.data || data.data.length === 0) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No site health data available for this site." }));
+            }
+            const siteData = data.data[0];
+            if (siteData.status === 'error') {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", siteData.error] }));
+            }
+            // Helper functions
+            const getScoreColor = (score) => {
+                return getScoreIndicator(score).color;
+            };
+            const formatScore = (score) => {
+                if (score === null)
+                    return 'N/A';
+                return `${Math.round(score * 100)}%`;
+            };
+            const getStatusColor = (status) => {
+                switch (status) {
+                    case 'good': return '#10b981'; // green
+                    case 'needs-improvement': return '#f59e0b'; // yellow
+                    case 'poor': return '#ef4444'; // red
+                    default: return '#6b7280'; // gray
+                }
+            };
+            const getMetricStatus = (value, thresholds) => {
+                if (value <= thresholds.good)
+                    return 'good';
+                if (value <= thresholds.poor)
+                    return 'needs-improvement';
+                return 'poor';
+            };
+            const formatMetric = (value, unit) => {
+                if (value === null || value === undefined)
+                    return 'N/A';
+                if (unit === 'ms') {
+                    return `${Math.round(value)}ms`;
+                }
+                if (unit === '') {
+                    return value.toFixed(3);
+                }
+                return `${value}${unit}`;
+            };
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteData.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", siteData.url] }), _jsx("div", { className: "health-score-container", children: Object.entries(siteData.scores)
+                            .filter(([, score]) => score !== null)
+                            .map(([category, score]) => (_jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: category.replace('-', ' ') }), _jsx("div", { className: "health-score-value", style: { color: getScoreColor(score) }, children: formatScore(score) }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: score !== null ? `${score * 100}%` : '0%',
+                                            backgroundColor: score !== null ? getScoreColor(score) : '#6b7280'
+                                        } }) })] }, category))) }), _jsxs("div", { style: { marginBottom: '1.5rem' }, children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Core Web Vitals" }), _jsxs("div", { className: "health-cwv-grid", children: [_jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Cumulative Layout Shift:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.cls, { good: 0.1, poor: 0.25 })) }, children: formatMetric(siteData.metrics.cls, '') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Input Delay:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.fid, { good: 100, poor: 300 })) }, children: formatMetric(siteData.metrics.fid, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Largest Contentful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.lcp, { good: 2500, poor: 4000 })) }, children: formatMetric(siteData.metrics.lcp, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Contentful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.fcp, { good: 1800, poor: 3000 })) }, children: formatMetric(siteData.metrics.fcp, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Time to First Byte:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.ttfb, { good: 800, poor: 1800 })) }, children: formatMetric(siteData.metrics.ttfb, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Speed Index:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.speedIndex, { good: 3400, poor: 5800 })) }, children: formatMetric(siteData.metrics.speedIndex, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Time to Interactive:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.interactive, { good: 3800, poor: 7300 })) }, children: formatMetric(siteData.metrics.interactive, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "Total Blocking Time:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.totalBlockingTime, { good: 200, poor: 600 })) }, children: formatMetric(siteData.metrics.totalBlockingTime, 'ms') })] }), _jsxs("div", { className: "health-cwv-item", children: [_jsx("span", { className: "health-cwv-label", children: "First Meaningful Paint:" }), _jsx("span", { className: "health-cwv-value", style: { color: getStatusColor(getMetricStatus(siteData.metrics.firstMeaningfulPaint, { good: 2000, poor: 4000 })) }, children: formatMetric(siteData.metrics.firstMeaningfulPaint, 'ms') })] })] })] }), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] }));
+        } }));
+}

package/dist/components/admin/site-health/site-health-performance.js

@@ -0,0 +1,191 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SiteHealthTemplate } from './site-health-template';
+import { getScoreIndicator } from './site-health-indicators';
+export function SiteHealthPerformance({ siteName }) {
+    const fetchCWVData = useCallback(async (site) => {
+        const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to fetch Core Web Vitals data');
+        }
+        return result;
+    }, []);
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Performance", fetchData: fetchCWVData, children: (data) => {
+            if (!data?.data || data.data.length === 0) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No site health data available for this site." }));
+            }
+            const siteData = data.data[0];
+            if (siteData.status === 'error') {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", siteData.error] }));
+            }
+            const getAuditScoreIcon = (score) => {
+                return getScoreIndicator(score).icon;
+            };
+            const getScoreColor = (score) => {
+                return getScoreIndicator(score).color;
+            };
+            const formatScore = (score) => {
+                if (score === null)
+                    return 'N/A';
+                return `${Math.round(score * 100)}%`;
+            };
+            // Helper function to display audit item details
+            const formatAuditItem = (item, auditTitle) => {
+                // Handle URLs
+                if (item.url && typeof item.url === 'string') {
+                    return item.url;
+                }
+                // Handle sources (like JavaScript files)
+                if (item.source && typeof item.source === 'string') {
+                    return item.source;
+                }
+                // Handle text descriptions
+                if (item.text && typeof item.text === 'string') {
+                    return item.text;
+                }
+                // Handle entities (like "Google Tag Manager")
+                if (item.entity && typeof item.entity === 'string') {
+                    return item.entity;
+                }
+                // Handle nodes with selectors
+                if (item.node && typeof item.node === 'object' && 'selector' in item.node) {
+                    return `Element: ${item.node.selector}`;
+                }
+                // Handle nodes with snippets
+                if (item.node && typeof item.node === 'object' && 'snippet' in item.node) {
+                    const snippet = item.node.snippet;
+                    return `Element: ${snippet.length > 50 ? snippet.substring(0, 50) + '...' : snippet}`;
+                }
+                // Handle origins (like domains)
+                if (item.origin && typeof item.origin === 'string') {
+                    return item.origin;
+                }
+                // Handle labels
+                if (item.label && typeof item.label === 'string') {
+                    return item.label;
+                }
+                // Handle numeric values with units
+                if (item.value && typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                    const value = item.value;
+                    return `${value.value}${item.unit || ''}`;
+                }
+                // Handle statistics
+                if (item.statistic && typeof item.statistic === 'string' && item.value) {
+                    if (typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                        const value = item.value;
+                        return `${item.statistic}: ${value.value}`;
+                    }
+                    return item.statistic;
+                }
+                // Handle timing data with audit context
+                if (typeof item === 'number') {
+                    let context = '';
+                    if (auditTitle) {
+                        if (auditTitle.toLowerCase().includes('server') || auditTitle.toLowerCase().includes('backend')) {
+                            context = ' server response';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network') || auditTitle.toLowerCase().includes('request')) {
+                            context = ' network request';
+                        }
+                        else if (auditTitle.toLowerCase().includes('render') || auditTitle.toLowerCase().includes('blocking')) {
+                            context = ' render blocking';
+                        }
+                        else if (auditTitle.toLowerCase().includes('javascript') || auditTitle.toLowerCase().includes('js')) {
+                            context = ' JavaScript';
+                        }
+                        else if (auditTitle.toLowerCase().includes('image') || auditTitle.toLowerCase().includes('media')) {
+                            context = ' media resource';
+                        }
+                    }
+                    return `${item.toFixed(2)}ms${context}`;
+                }
+                if (item.value && typeof item.value === 'number') {
+                    const unit = item.unit || 'ms';
+                    let context = '';
+                    if (auditTitle && unit === 'ms') {
+                        if (auditTitle.toLowerCase().includes('server')) {
+                            context = ' server time';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network')) {
+                            context = ' network time';
+                        }
+                    }
+                    return `${item.value.toFixed(2)}${unit}${context}`;
+                }
+                // Handle timing data with more context
+                if (item.duration && typeof item.duration === 'number') {
+                    const duration = item.duration;
+                    let context = '';
+                    if (item.url && typeof item.url === 'string') {
+                        context = ` for ${item.url}`;
+                    }
+                    else if (item.source && typeof item.source === 'string') {
+                        context = ` for ${item.source}`;
+                    }
+                    else if (item.name && typeof item.name === 'string') {
+                        context = ` for ${item.name}`;
+                    }
+                    else if (item.path && typeof item.path === 'string') {
+                        context = ` for ${item.path}`;
+                    }
+                    else if (item.request && typeof item.request === 'string') {
+                        context = ` for ${item.request}`;
+                    }
+                    return `${duration.toFixed(2)}ms${context}`;
+                }
+                // Handle response times
+                if (item.responseTime && typeof item.responseTime === 'number') {
+                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
+                    return `${item.responseTime.toFixed(2)}ms response time${url}`;
+                }
+                // Handle start/end times
+                if ((item.startTime || item.endTime) && typeof (item.startTime || item.endTime) === 'number') {
+                    const start = item.startTime && typeof item.startTime === 'number' ? item.startTime.toFixed(2) : '?';
+                    const end = item.endTime && typeof item.endTime === 'number' ? item.endTime.toFixed(2) : '?';
+                    const url = (item.url && typeof item.url === 'string') ? ` for ${item.url}` : '';
+                    return `${start}ms - ${end}ms${url}`;
+                }
+                // Handle transfer size with timing
+                if (item.transferSize && typeof item.transferSize === 'number' && item.duration && typeof item.duration === 'number') {
+                    const size = (item.transferSize / 1024).toFixed(1);
+                    const time = item.duration.toFixed(2);
+                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
+                    return `${size} KB in ${time}ms${url}`;
+                }
+                // Handle main thread time
+                if (item.mainThreadTime && typeof item.mainThreadTime === 'number') {
+                    return `${item.mainThreadTime.toFixed(1)}ms`;
+                }
+                // For other objects, try to find a meaningful display
+                if (item.group && typeof item.group === 'string') {
+                    return item.group;
+                }
+                if (item.type && typeof item.type === 'string') {
+                    return item.type;
+                }
+                // If we can't find anything meaningful, provide a generic description
+                // This handles raw timing data that might be from various performance metrics
+                if (typeof item === 'number') {
+                    return `${item.toFixed(2)}ms`;
+                }
+                if (item.value && typeof item.value === 'number') {
+                    const unit = item.unit || 'ms';
+                    return `${item.value.toFixed(2)}${unit}`;
+                }
+                return 'Performance metric data available';
+            };
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteData.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", siteData.url] }), _jsx("div", { style: { marginBottom: '1.5rem' }, children: _jsxs("div", { className: "health-score-item", style: { width: '100%' }, children: [_jsx("div", { className: "health-score-label", children: "Performance Score" }), _jsx("div", { className: "health-score-value", style: { color: getScoreColor(siteData.scores.performance) }, children: formatScore(siteData.scores.performance) }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: siteData.scores.performance !== null ? `${siteData.scores.performance * 100}%` : '0%',
+                                            backgroundColor: siteData.scores.performance !== null ? getScoreColor(siteData.scores.performance) : '#6b7280'
+                                        } }) })] }) }), ((siteData.categories.performance?.audits?.length > 0) || (siteData.categories.pwa?.audits?.length > 0)) && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Performance Opportunities" }), _jsx("div", { className: "space-y-2", children: [
+                                    ...(siteData.categories.performance?.audits || []),
+                                    ...(siteData.categories.pwa?.audits || [])
+                                ]
+                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable' && audit.score !== null && !audit.id.includes('network-requests'))
+                                    .sort((a, b) => (b.score || 0) - (a.score || 0))
+                                    .slice(0, 20)
+                                    .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title, audit.displayValue ? `: ${audit.displayValue}` : ''] }), audit.details?.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && (audit.score || 0) < 0.9 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items.map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatAuditItem(item, audit.title) }, idx))) }) }))] })] }, audit.id))) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] }));
+        } }));
+}

package/dist/components/admin/site-health/site-health-security.integration.js

@@ -0,0 +1,109 @@
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import fs from 'fs';
+import path from 'path';
+const execAsync = promisify(exec);
+export async function analyzeSecurityHealth(localPath) {
+    try {
+        // Check if the local path exists and has package.json
+        if (!fs.existsSync(localPath)) {
+            return {
+                status: 'error',
+                error: 'Site directory not found'
+            };
+        }
+        const packageJsonPath = path.join(localPath, 'package.json');
+        if (!fs.existsSync(packageJsonPath)) {
+            return {
+                status: 'success',
+                data: {
+                    status: 'No Dependencies',
+                    message: 'No package.json found',
+                    vulnerabilities: [],
+                    summary: { info: 0, low: 0, moderate: 0, high: 0, critical: 0, total: 0 },
+                    dependencies: 0,
+                    totalDependencies: 0
+                }
+            };
+        }
+        // Run npm audit
+        const auditResult = await runNpmAudit(localPath);
+        // Process vulnerabilities
+        const vulnerabilities = [];
+        let totalVulns = 0;
+        if (auditResult.vulnerabilities) {
+            for (const [pkgName, vulnData] of Object.entries(auditResult.vulnerabilities)) {
+                const vuln = vulnData;
+                vulnerabilities.push({
+                    name: pkgName,
+                    severity: vuln.severity,
+                    title: Array.isArray(vuln.via) ? (typeof vuln.via[0] === 'string' ? vuln.via[0] : vuln.via[0]?.title || 'Unknown vulnerability') : vuln.title || 'Unknown vulnerability',
+                    url: vuln.url,
+                    range: vuln.range,
+                    fixAvailable: vuln.fixAvailable || false
+                });
+                totalVulns++;
+            }
+        }
+        // Calculate overall status
+        const metadata = auditResult.metadata?.vulnerabilities || { info: 0, low: 0, moderate: 0, high: 0, critical: 0 };
+        const hasCritical = metadata.critical > 0;
+        const hasHigh = metadata.high > 0;
+        const hasModerate = metadata.moderate > 0;
+        let overallStatus = 'Secure';
+        if (hasCritical) {
+            overallStatus = 'Critical';
+        }
+        else if (hasHigh) {
+            overallStatus = 'High Risk';
+        }
+        else if (hasModerate) {
+            overallStatus = 'Moderate Risk';
+        }
+        else if (metadata.low > 0 || metadata.info > 0) {
+            overallStatus = 'Low Risk';
+        }
+        return {
+            status: 'success',
+            data: {
+                status: overallStatus,
+                vulnerabilities,
+                summary: {
+                    ...metadata,
+                    total: totalVulns
+                },
+                dependencies: auditResult.metadata?.dependencies?.total || 0,
+                totalDependencies: auditResult.metadata?.totalDependencies || 0
+            }
+        };
+    }
+    catch (error) {
+        console.error('Error running npm audit:', error);
+        return {
+            status: 'error',
+            error: error instanceof Error ? error.message : 'Unknown error'
+        };
+    }
+}
+async function runNpmAudit(localPath) {
+    try {
+        const { stdout } = await execAsync('npm audit --json', {
+            cwd: localPath,
+            timeout: 30000 // 30 second timeout
+        });
+        return JSON.parse(stdout);
+    }
+    catch (error) {
+        // npm audit exits with code 1 when vulnerabilities are found, but still returns JSON
+        const execError = error;
+        if (execError.stdout) {
+            try {
+                return JSON.parse(execError.stdout);
+            }
+            catch (parseError) {
+                throw new Error(`Failed to parse npm audit output: ${parseError.message}`);
+            }
+        }
+        throw new Error(`npm audit failed: ${execError.message}`);
+    }
+}