@elementor/editor-audits 4.3.3 → 4.3.5

package/src/components/pages/overview-page.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { Box, Chip, Typography } from '@elementor/ui';
+import { Box, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { ALL_CATEGORIES, CATEGORY_LABELS } from '../../constants';
 import { type AuditCategory, type PageAuditReport } from '../../types';
 import { getPopulatedCategories } from '../../utils/audit-status-summary';
-import { getScoreTier } from '../../utils/score-thresholds';
+import { countSeverities } from '../../utils/severity-counts';
+import IssuesCategoryRow from '../issues-category-row';
 import Promotions from '../promotions';
-import ScoreBar from '../score-bar';
-import ScoreCircle from '../score-circle';
+import SeveritySummaryCards from '../severity-summary-cards';
 
 type Props = {
 	onCategoryClick: ( category: AuditCategory ) => void;
@@ -17,35 +17,30 @@ type Props = {
 
 export default function OverviewPage( { onCategoryClick, report }: Props ) {
 	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
-	const overallScore = getScoreTier( report.overall );
+
+	const categoryRows = populatedCategories
+		.map( ( category ) => ( { category, counts: countSeverities( report, category ) } ) )
+		.filter( ( { counts } ) => Object.values( counts ).some( ( count ) => count > 0 ) );
 
 	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
-			<Box sx={ { display: 'flex', alignItems: 'center', gap: 2 } }>
-				<ScoreCircle color={ overallScore.color } score={ report.overall } />
-				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 0.5 } }>
-					<Chip
-						label={ overallScore.label }
-						color={ overallScore.color }
-						variant="standard"
-						size="small"
-						sx={ { fontWeight: 600, alignSelf: 'flex-start' } }
-					/>
-					<Typography variant="body2" color="text.secondary">
-						{ __( 'Overall score', 'elementor' ) }
-					</Typography>
+		<Box display="flex" flexDirection="column" gap={ 3 } p={ 2 }>
+			<SeveritySummaryCards report={ report } />
+			<Box display="flex" flexDirection="column" gap={ 1 }>
+				<Typography variant="subtitle1" component="h2">
+					{ __( 'All issues', 'elementor' ) }
+				</Typography>
+				<Box display="flex" flexDirection="column" gap={ 1 }>
+					{ categoryRows.map( ( { category, counts } ) => (
+						<IssuesCategoryRow
+							key={ category }
+							category={ category }
+							label={ CATEGORY_LABELS[ category ] }
+							counts={ counts }
+							onClick={ () => onCategoryClick( category ) }
+						/>
+					) ) }
 				</Box>
 			</Box>
-			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 2 } }>
-				{ populatedCategories.map( ( category ) => (
-					<ScoreBar
-						key={ category }
-						label={ CATEGORY_LABELS[ category ] }
-						score={ report.categories[ category ].score }
-						onClick={ () => onCategoryClick( category ) }
-					/>
-				) ) }
-			</Box>
 			<Promotions report={ report } />
 		</Box>
 	);

package/src/components/report-shell.tsx

@@ -1,114 +1,33 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { Box, Divider, Tab, Tabs } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { Box } from '@elementor/ui';
 
 import { type AuditCategory, type PageAuditReport } from '../types';
-import { type AuditStatusGroup } from '../utils/audit-status-summary';
-import AllAuditsPage from './pages/all-audits-page';
 import CategoryPage from './pages/category-page';
-import IssuesPage from './pages/issues-page';
 import OverviewPage from './pages/overview-page';
 
-type TabId = 'overview' | 'issues';
-
-type ActivePage =
-	| 'overview'
-	| 'issues'
-	| { backTo: TabId; category: AuditCategory }
-	| { backTo: TabId; expand?: AuditStatusGroup; page: 'all-audits' };
+type ActivePage = 'overview' | { category: AuditCategory };
 
 type Props = {
 	report: PageAuditReport;
 };
 
-function activeTab( page: ActivePage ): TabId {
-	if ( page === 'overview' ) {
-		return 'overview';
-	}
-
-	if ( page === 'issues' ) {
-		return 'issues';
-	}
-
-	return page.backTo;
-}
-
-function isAllAuditsPage( page: ActivePage ): page is { backTo: TabId; expand?: AuditStatusGroup; page: 'all-audits' } {
-	return typeof page === 'object' && 'page' in page && page.page === 'all-audits';
-}
-
-function isCategoryPage( page: ActivePage ): page is { backTo: TabId; category: AuditCategory } {
+function isCategoryPage( page: ActivePage ): page is { category: AuditCategory } {
 	return typeof page === 'object' && 'category' in page;
 }
 
 export default function ReportShell( { report }: Props ) {
 	const [ activePage, setActivePage ] = useState< ActivePage >( 'overview' );
 
-	const currentTab = activeTab( activePage );
-
-	const handleTabChange = ( _: React.SyntheticEvent, value: TabId ) => {
-		setActivePage( value );
-	};
-
-	const openCategory = ( category: AuditCategory, backTo: TabId ) => {
-		setActivePage( { category, backTo } );
-	};
-
-	const openAllAudits = ( expand?: AuditStatusGroup, backTo: TabId = 'issues' ) => {
-		setActivePage( { page: 'all-audits', expand, backTo } );
-	};
-
-	const backFromSubPage = () => {
-		if ( isAllAuditsPage( activePage ) || isCategoryPage( activePage ) ) {
-			setActivePage( activePage.backTo );
-		}
-	};
+	const openCategory = ( category: AuditCategory ) => setActivePage( { category } );
+	const backToOverview = () => setActivePage( 'overview' );
 
 	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', flex: 1, minHeight: 0 } }>
-			<Box sx={ { flexShrink: 0 } }>
-				<Tabs
-					aria-label={ __( 'Audit navigation', 'elementor' ) }
-					value={ currentTab }
-					onChange={ handleTabChange }
-					textColor="secondary"
-					indicatorColor="secondary"
-					size="small"
-					centered={ true }
-					variant="fullWidth"
-				>
-					<Tab value="overview" label={ __( 'Overview', 'elementor' ) } />
-					<Tab value="issues" label={ __( 'Issues', 'elementor' ) } />
-				</Tabs>
-				<Divider />
-			</Box>
-			<Box sx={ { flex: 1, minHeight: 0, overflowY: 'auto' } }>
-				{ activePage === 'overview' && (
-					<OverviewPage
-						report={ report }
-						onCategoryClick={ ( category ) => openCategory( category, 'overview' ) }
-					/>
-				) }
-				{ activePage === 'issues' && (
-					<IssuesPage
-						report={ report }
-						onCategoryClick={ ( category ) => openCategory( category, 'issues' ) }
-						onAllAuditsClick={ () => openAllAudits() }
-						onStatusClick={ ( status ) => openAllAudits( status ) }
-					/>
-				) }
-				{ isAllAuditsPage( activePage ) && (
-					<AllAuditsPage
-						report={ report }
-						initialExpandedStatus={ activePage.expand }
-						onBack={ backFromSubPage }
-					/>
-				) }
-				{ isCategoryPage( activePage ) && (
-					<CategoryPage category={ activePage.category } report={ report } onBack={ backFromSubPage } />
-				) }
-			</Box>
+		<Box sx={ { flex: 1, minHeight: 0, overflowY: 'auto' } }>
+			{ activePage === 'overview' && <OverviewPage report={ report } onCategoryClick={ openCategory } /> }
+			{ isCategoryPage( activePage ) && (
+				<CategoryPage category={ activePage.category } report={ report } onBack={ backToOverview } />
+			) }
 		</Box>
 	);
 }

package/src/components/rescan-button.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
+import { ReloadIcon } from '@elementor/icons';
+import { Badge, Button, Tooltip } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { AUDIT_PANEL_ID } from '../constants';
+
+type Props = {
+	hasScanned: boolean;
+	isStale: boolean;
+	disabled: boolean;
+	onClick: () => void;
+};
+
+export default function RescanButton( { hasScanned, isStale, disabled, onClick }: Props ) {
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
+
+	return (
+		<Tooltip
+			title={ __( 'Page content changed - rescan advised', 'elementor' ) }
+			disableHoverListener={ ! isStale }
+			PopperProps={ { sx: { zIndex: panelZIndex } } }
+		>
+			<Badge variant="dot" color="warning" invisible={ ! isStale } overlap="rectangular">
+				<Button
+					variant="contained"
+					size="small"
+					startIcon={ hasScanned ? <ReloadIcon fontSize="small" /> : undefined }
+					onClick={ onClick }
+					disabled={ disabled }
+				>
+					{ hasScanned ? __( 'Rescan', 'elementor' ) : __( 'Run page audit', 'elementor' ) }
+				</Button>
+			</Badge>
+		</Tooltip>
+	);
+}

package/src/components/severity-icons.tsx

@@ -20,7 +20,11 @@ type Props = {
 	severity: AuditSeverity;
 };
 
+const INFO_ICON_VERTICAL_NUDGE = 'translateY(-2px)';
+
 export default function SeverityIcon( { severity }: Props ) {
 	const { Icon, color } = SEVERITY_CONFIG[ severity ];
-	return <Icon fontSize="small" color={ color } />;
+	const sx = 'info' === severity ? { transform: INFO_ICON_VERTICAL_NUDGE } : undefined;
+
+	return <Icon fontSize="small" color={ color } sx={ sx } />;
 }

package/src/components/severity-summary-cards.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Box, Typography } from '@elementor/ui';
+
+import { type AuditSeverity, type PageAuditReport } from '../types';
+import { ALL_SEVERITIES, countSeverities, severityPluralLabel } from '../utils/severity-counts';
+import SeverityIcon from './severity-icons';
+
+type Props = {
+	report: PageAuditReport;
+};
+
+export default function SeveritySummaryCards( { report }: Props ) {
+	const counts = countSeverities( report );
+
+	return (
+		<Box display="flex" gap={ 1.5 }>
+			{ ALL_SEVERITIES.map( ( severity ) => (
+				<SeverityCard key={ severity } severity={ severity } count={ counts[ severity ] } />
+			) ) }
+		</Box>
+	);
+}
+
+type SeverityCardProps = {
+	severity: AuditSeverity;
+	count: number;
+};
+
+function SeverityCard( { severity, count }: SeverityCardProps ) {
+	return (
+		<Box
+			display="flex"
+			flex={ 1 }
+			flexDirection="column"
+			gap={ 1 }
+			bgcolor="action.hover"
+			borderRadius={ 1.5 }
+			px={ 1.5 }
+			py={ 1 }
+		>
+			<SeverityIcon severity={ severity } />
+			<Box display="flex" flexDirection="column">
+				<Typography variant="h5" fontWeight={ 700 } component="span">
+					{ count }
+				</Typography>
+				<Typography variant="caption" color="text.secondary">
+					{ severityPluralLabel( severity ) }
+				</Typography>
+			</Box>
+		</Box>
+	);
+}

package/src/components/violation-cta-button.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
+import { WandIcon } from '@elementor/icons';
 import { Button } from '@elementor/ui';
 
 type Props = {
 	ctaLabel: string;
 	externalUrl: string;
+	variant?: 'outlined' | 'text';
+	withIcon?: boolean;
 };
 
-export default function ViolationCtaButton( { ctaLabel, externalUrl }: Props ) {
+export default function ViolationCtaButton( { ctaLabel, externalUrl, variant = 'outlined', withIcon = false }: Props ) {
 	const handleClick = ( event: React.MouseEvent< HTMLButtonElement > ) => {
 		event.stopPropagation();
 		event.preventDefault();
@@ -15,7 +18,13 @@ export default function ViolationCtaButton( { ctaLabel, externalUrl }: Props ) {
 	};
 
 	return (
-		<Button variant="outlined" color="secondary" size="small" onClick={ handleClick }>
+		<Button
+			variant={ variant }
+			color="secondary"
+			size="small"
+			startIcon={ withIcon ? <WandIcon fontSize="tiny" aria-hidden={ true } /> : undefined }
+			onClick={ handleClick }
+		>
 			{ ctaLabel }
 		</Button>
 	);

package/src/components/violation-icons.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FileSettingsIcon, SettingsIcon, ShieldCheckIcon } from '@elementor/icons';
+import { FileSettingsIcon, SettingsIcon } from '@elementor/icons';
 import { Box } from '@elementor/ui';
 
 import { type AuditViolation } from '../types';
@@ -29,5 +29,5 @@ export default function ViolationIcon( { violation, widgetIcon }: Props ) {
 		return <SettingsIcon fontSize="inherit" aria-hidden={ true } />;
 	}
 
-	return <ShieldCheckIcon fontSize="inherit" aria-hidden={ true } />;
+	return <SettingsIcon fontSize="inherit" aria-hidden={ true } />;
 }

package/src/components/violation-row.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { useState } from 'react';
 import { getElementIcon, getElementTitle } from '@elementor/editor-elements';
-import { AlertCircleIcon, BulbIcon, CheckIcon, ChevronDownIcon, EyeIcon, HelpIcon } from '@elementor/icons';
-import { Alert, AlertTitle, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
+import { useFloatingPanelZIndex } from '@elementor/editor-floating-panels';
+import { CheckIcon, ChevronDownIcon, HelpIcon, InfoCircleIcon } from '@elementor/icons';
+import { Alert, Box, Collapse, IconButton, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { AUDIT_PANEL_ID } from '../constants';
 import { focusViolation } from '../hooks/focus-violation';
 import { type AuditMeta, type AuditViolation } from '../types';
 import { buildAngiePrompt } from '../utils/build-angie-prompt';
@@ -17,6 +18,8 @@ import ViolationIcon from './violation-icons';
 
 type Props = {
 	audit: AuditMeta;
+	expanded: boolean;
+	onToggleExpand: () => void;
 	skipReason?: string;
 	violations?: AuditViolation[];
 };
@@ -35,12 +38,12 @@ function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violati
 	if ( violations ) {
 		return (
 			<>
+				<SeverityIcon severity={ audit.severity } />
 				{ isScoredAudit( audit ) && (
 					<Typography variant="caption" color="text.secondary" fontWeight="bold">
 						{ violations.length }
 					</Typography>
 				) }
-				<SeverityIcon severity={ audit.severity } />
 			</>
 		);
 	}
@@ -48,10 +51,73 @@ function StatusIndicator( { audit, violations }: Pick< Props, 'audit' | 'violati
 	return <CheckIcon fontSize="small" color="success" />;
 }
 
-export default function ViolationRow( { audit, skipReason, violations }: Props ) {
-	const [ expanded, setExpanded ] = useState( false );
+function GuidanceAction( {
+	violation,
+	sharedAngiePrompt,
+	panelZIndex,
+}: {
+	violation: AuditViolation;
+	sharedAngiePrompt?: string;
+	panelZIndex: number;
+} ) {
+	const hasPrimaryCta = !! ( violation.ctaLabel && violation.externalUrl );
 
-	const toggleExpanded = () => setExpanded( ( value ) => ! value );
+	if ( ! hasPrimaryCta && ! sharedAngiePrompt ) {
+		return null;
+	}
+
+	return (
+		<Box display="flex" alignItems="center" gap={ 1 } mt={ 1 }>
+			{ hasPrimaryCta && (
+				<ViolationCtaButton
+					ctaLabel={ violation.ctaLabel as string }
+					externalUrl={ violation.externalUrl as string }
+					withIcon
+				/>
+			) }
+			{ hasPrimaryCta && violation.secondaryCtaLabel && violation.secondaryCtaUrl && (
+				<ViolationCtaButton
+					ctaLabel={ violation.secondaryCtaLabel }
+					externalUrl={ violation.secondaryCtaUrl }
+					variant="text"
+				/>
+			) }
+			{ sharedAngiePrompt && (
+				<FixViolationWithAngie prompt={ sharedAngiePrompt } panelZIndex={ panelZIndex } variant="button" />
+			) }
+		</Box>
+	);
+}
+
+function getSharedAngiePrompt( violations?: AuditViolation[] ): string | undefined {
+	if ( ! violations || violations.length < 2 ) {
+		return undefined;
+	}
+
+	const [ first, ...rest ] = violations;
+
+	if ( ! first.angieFix || ! first.angiePrompt ) {
+		return undefined;
+	}
+
+	const allShareTheSameFix = rest.every(
+		( violation ) => violation.angieFix && violation.angiePrompt === first.angiePrompt
+	);
+
+	return allShareTheSameFix ? first.angiePrompt : undefined;
+}
+
+export default function ViolationRow( { audit, expanded, onToggleExpand, skipReason, violations }: Props ) {
+	const primaryViolation = violations?.[ 0 ];
+	const isGuidanceFocusable = !! primaryViolation;
+	const panelZIndex = useFloatingPanelZIndex( AUDIT_PANEL_ID );
+	const sharedAngiePrompt = getSharedAngiePrompt( violations );
+
+	const handleGuidanceClick = () => {
+		if ( isGuidanceFocusable && primaryViolation ) {
+			focusViolation( primaryViolation );
+		}
+	};
 
 	return (
 		<Box sx={ { borderBottom: 1, borderColor: 'divider', paddingBlock: 0.5 } }>
@@ -65,9 +131,9 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 						gap: 0.5,
 						minWidth: 0,
 					} }
-					onClick={ toggleExpanded }
+					onClick={ onToggleExpand }
 				>
-					<Typography variant="body2" sx={ { flex: 1 } }>
+					<Typography variant="subtitle2" color="text.secondary" sx={ { flex: 1 } }>
 						{ audit.title }
 					</Typography>
 					{ ! skipReason && <StatusIndicator audit={ audit } violations={ violations } /> }
@@ -76,7 +142,7 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 				<IconButton
 					size="small"
 					aria-label={ expanded ? __( 'Collapse', 'elementor' ) : __( 'Expand', 'elementor' ) }
-					onClick={ toggleExpanded }
+					onClick={ onToggleExpand }
 				>
 					<ChevronDownIcon
 						fontSize="small"
@@ -88,44 +154,40 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 				</IconButton>
 			</Box>
 			<Collapse in={ expanded }>
-				<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1, paddingBlock: 1 } }>
-					<Alert
-						severity="secondary"
-						sx={ { p: 1 } }
-						icon={ <AlertCircleIcon fontSize="small" color="secondary" aria-hidden={ true } /> }
-					>
-						<AlertTitle>
-							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
-								{ __( "What's the issue", 'elementor' ) }
+				<Box paddingBlock={ 1 }>
+					<Tooltip title={ audit.fixHint } placement="top">
+						<Alert
+							severity="secondary"
+							sx={ { p: 1, cursor: isGuidanceFocusable ? 'pointer' : undefined } }
+							icon={ <InfoCircleIcon fontSize="small" aria-hidden={ true } /> }
+							role={ isGuidanceFocusable ? 'button' : undefined }
+							tabIndex={ isGuidanceFocusable ? 0 : undefined }
+							onClick={ isGuidanceFocusable ? handleGuidanceClick : undefined }
+							onKeyDown={ isGuidanceFocusable ? onKeyboardClick( handleGuidanceClick ) : undefined }
+						>
+							<Typography variant="caption" component="p" color="text.secondary">
+								{ audit.description }
 							</Typography>
-						</AlertTitle>
-						<Typography variant="caption" component="p" color="text.secondary">
-							{ audit.description }
-						</Typography>
-					</Alert>
-					<Alert
-						severity="info"
-						sx={ { p: 1 } }
-						icon={ <BulbIcon fontSize="small" color="info" aria-hidden={ true } /> }
-					>
-						<AlertTitle>
-							<Typography variant="caption" component="p" color="text.primary" fontWeight="bold">
-								{ __( 'How to resolve', 'elementor' ) }
-							</Typography>
-						</AlertTitle>
-						<Typography variant="caption" component="p" color="text.secondary">
-							{ audit.fixHint }
-						</Typography>
-					</Alert>
+							{ primaryViolation && (
+								<GuidanceAction
+									violation={ primaryViolation }
+									sharedAngiePrompt={ sharedAngiePrompt }
+									panelZIndex={ panelZIndex }
+								/>
+							) }
+						</Alert>
+					</Tooltip>
 				</Box>
 				{ violations && violations.length > 0 && (
-					<Box role="list" sx={ { paddingBlockEnd: 1, paddingInlineStart: 2 } }>
+					<Box role="list" sx={ { paddingBlockEnd: 1 } }>
 						{ violations.map( ( violation, idx ) => {
 							const widgetIcon = violation.elementId ? getElementIcon( violation.elementId ) : null;
 							const elementTitle = violation.elementId ? getElementTitle( violation.elementId ) : null;
-							const rowLabel = elementTitle
+							const displayLabel = elementTitle ?? violation.label;
+							const angiePromptContext = elementTitle
 								? `${ elementTitle } - ${ violation.label }`
 								: violation.label;
+							const showsOwnFixAction = !! violation.angieFix && ! sharedAngiePrompt;
 
 							return (
 								<Box
@@ -139,41 +201,37 @@ export default function ViolationRow( { audit, skipReason, violations }: Props )
 										alignItems: 'center',
 										gap: 1,
 										paddingBlock: 0.5,
-										paddingInline: 2,
+										paddingInline: 1,
 										borderRadius: 1,
 										cursor: 'pointer',
-										'& .violation-hover-icon': { opacity: 0, transition: 'opacity .15s' },
 										'&:hover': { bgcolor: 'action.hover' },
-										'&:hover .violation-hover-icon, &:focus-visible .violation-hover-icon': {
-											opacity: 1,
-										},
+										'&:hover .violation-row-fix-action, &:focus-visible .violation-row-fix-action':
+											{
+												opacity: 1,
+											},
 									} }
 								>
 									<ViolationIcon violation={ violation } widgetIcon={ widgetIcon } />
 									<Box sx={ { flex: 1 } }>
-										<Typography variant="caption">{ rowLabel }</Typography>
+										<Typography variant="caption">{ displayLabel }</Typography>
 										{ violation.detail && (
 											<Typography variant="caption" color="text.secondary">
 												{ violation.detail }
 											</Typography>
 										) }
 									</Box>
-									{ violation.angieFix && (
-										<FixViolationWithAngie
-											prompt={ violation.angiePrompt ?? buildAngiePrompt( rowLabel ) }
-										/>
-									) }
-									{ violation.ctaLabel && violation.externalUrl ? (
-										<ViolationCtaButton
-											ctaLabel={ violation.ctaLabel }
-											externalUrl={ violation.externalUrl }
-										/>
-									) : (
-										<EyeIcon
-											className="violation-hover-icon"
-											fontSize="tiny"
-											aria-hidden={ true }
-										/>
+									{ showsOwnFixAction && (
+										<Box
+											className="violation-row-fix-action"
+											sx={ { opacity: 0, transition: 'opacity .15s' } }
+										>
+											<FixViolationWithAngie
+												prompt={
+													violation.angiePrompt ?? buildAngiePrompt( angiePromptContext )
+												}
+												panelZIndex={ panelZIndex }
+											/>
+										</Box>
 									) }
 								</Box>
 							);

package/src/hooks/use-audit-report.ts

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { getCurrentDocumentId } from '@elementor/editor-elements';
+import { getHostDocumentId } from '@elementor/editor-elements';
 import { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
 
 import { runPageAudit } from '../runner';
-import { type GlobalState, selectError, selectReport, selectStatus, slice } from '../store';
+import { type GlobalState, selectError, selectIsStale, selectReport, selectStatus, slice } from '../store';
 import { getPersistedReport, persistReport } from '../utils/report-storage';
 import { SessionExpiredError } from '../utils/session-expiration';
 
@@ -11,8 +11,9 @@ export function useAuditReport() {
 	const status = useSelector( ( state: GlobalState ) => selectStatus( state ) );
 	const report = useSelector( ( state: GlobalState ) => selectReport( state ) );
 	const error = useSelector( ( state: GlobalState ) => selectError( state ) );
+	const isStale = useSelector( ( state: GlobalState ) => selectIsStale( state ) );
 	const dispatch = useDispatch();
-	const documentId = getCurrentDocumentId() ?? 0;
+	const documentId = getHostDocumentId() ?? 0;
 
 	useEffect( () => {
 		if ( ! documentId || report?.documentId === documentId ) {
@@ -45,5 +46,5 @@ export function useAuditReport() {
 		}
 	};
 
-	return { status, report, error, run };
+	return { status, report, error, isStale, run };
 }

package/src/hooks/use-audit-toggle-props.ts

@@ -1,7 +1,7 @@
 import { type ToggleActionProps } from '@elementor/editor-app-bar';
-import { ShieldCheckIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
+import AuditToggleIcon from '../components/audit-toggle-icon';
 import { auditPanel } from '../editor-panel';
 
 export function useAuditToggleProps(): ToggleActionProps {
@@ -10,7 +10,7 @@ export function useAuditToggleProps(): ToggleActionProps {
 
 	return {
 		title: __( 'Audit Page', 'elementor' ),
-		icon: ShieldCheckIcon,
+		icon: AuditToggleIcon,
 		selected: isOpen,
 		onClick: () => toggle(),
 	};