ramiy · Oct 5, 2026 · Oct 5, 2026 · Oct 5, 2026
diff --git a/config/webpack/webpack-js.ts b/config/webpack/webpack-js.ts
@@ -29,7 +29,7 @@ export const jsWebpackConfig: Configuration = {
 		'feedback': `${SOURCE_DIR}/feedback.ts`,
 		'feedback-capture': `${SOURCE_DIR}/feedback-capture.ts`,
 		'import': `${SOURCE_DIR}/import.ts`,
-		'insights': `${SOURCE_DIR}/insights.ts`,
+		'stats': `${SOURCE_DIR}/stats.ts`,
 		'manage': `${SOURCE_DIR}/manage.ts`,
 		'mce': `${SOURCE_DIR}/mce.ts`,
 		'prism': `${SOURCE_DIR}/prism.ts`,

diff --git a/src/css/settings.scss b/src/css/settings.scss
@@ -95,7 +95,7 @@ body.js {
 	.wrap[data-active-tab='version-switch'] .version-switch-settings,
 	.wrap[data-active-tab='editing'] .editing-settings,
 	.wrap[data-active-tab='running'] .running-settings,
-	.wrap[data-active-tab='insights'] .insights-settings,
+	.wrap[data-active-tab='stats'] .stats-settings,
 	.wrap[data-active-tab='library'] .library-settings,
 	.wrap[data-active-tab='interface'] .interface-settings,
 	.wrap[data-active-tab='advanced'] .advanced-settings {

diff --git a/src/css/insights.scss → src/css/stats.scss b/src/css/insights.scss → src/css/stats.scss
@@ -4,17 +4,17 @@
 @use 'common/wp-admin';
 @use 'common/page-header';
 
-#code-snippets-insights-container {
+#code-snippets-stats-container {
 	margin-block-start: 0;
 }
 
-.insights-chart-grid {
+.stats-chart-grid {
 	display: grid;
 	gap: 16px;
 	grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.insights-chart-card {
+.stats-chart-card {
 	min-block-size: 220px;
 	box-sizing: border-box;
 	border: 1px solid var(--cs-color-border-subtle);
@@ -23,7 +23,7 @@
 	color: var(--cs-color-text);
 	padding: 24px;
 
-	.insights-chart-card-header {
+	.stats-chart-card-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -37,31 +37,31 @@
 	}
 }
 
-.insights-number-chart {
+.stats-number-chart {
 	display: grid;
 	gap: 4px;
 	justify-items: center;
 	padding-block: 12px;
 	text-align: center;
 }
 
-.insights-number-chart-value {
+.stats-number-chart-value {
 	font-size: 140px;
 	font-variant-numeric: tabular-nums;
 	line-height: 1;
 }
 
-.insights-number-chart-label {
+.stats-number-chart-label {
 	color: var(--cs-color-text-muted);
 	font-size: 13px;
 }
 
-.insights-chart-view-toggle {
+.stats-chart-view-toggle {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 
-	.insights-chart-view-toggle-option {
+	.stats-chart-view-toggle-option {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -110,14 +110,14 @@
 	}
 }
 
-.insights-bar-chart,
-.insights-pie-chart-legend {
+.stats-bar-chart,
+.stats-pie-chart-legend {
 	padding: 0;
 	margin: 0;
 	list-style: none;
 }
 
-.insights-tags-cloud {
+.stats-tags-cloud {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: baseline;
@@ -132,7 +132,7 @@
 	}
 }
 
-.insights-chart-entry-link {
+.stats-chart-entry-link {
 	color: var(--cs-color-text);
 	text-decoration: none;
 
@@ -148,7 +148,7 @@
 	}
 }
 
-.insights-bar-chart {
+.stats-bar-chart {
 	display: grid;
 	gap: 10px;
 
@@ -166,25 +166,25 @@
 	}
 }
 
-.insights-bar-track {
+.stats-bar-track {
 	overflow: hidden;
 	block-size: 10px;
 	border-radius: 999px;
 	background: #e2e5e5;
 }
 
-.insights-bar-fill {
+.stats-bar-fill {
 	block-size: 100%;
 	border-radius: inherit;
 }
 
-.insights-pie-chart-content {
+.stats-pie-chart-content {
 	display: flex;
 	align-items: center;
 	gap: 24px;
 }
 
-.insights-pie-chart {
+.stats-pie-chart {
 	position: relative;
 	flex: 0 0 auto;
 	inline-size: 112px;
@@ -201,7 +201,7 @@
 	}
 }
 
-.insights-pie-chart-legend {
+.stats-pie-chart-legend {
 	display: grid;
 	gap: 12px;
 	inline-size: 100%;
@@ -229,11 +229,11 @@
 }
 
 @media (width <= 782px) {
-	.insights-chart-grid {
+	.stats-chart-grid {
 		grid-template-columns: 1fr;
 	}
 
-	.insights-bar-chart li {
+	.stats-bar-chart li {
 		grid-template-columns: minmax(90px, 1fr) minmax(64px, 2fr) auto;
 	}
 }
diff --git a/src/js/components/InsightsMenu/index.ts b/src/js/components/InsightsMenu/index.ts
diff --git a/.../InsightsMenu/InsightsChartViewToggle.tsx → ...onents/StatsMenu/StatsChartViewToggle.tsx b/.../InsightsMenu/InsightsChartViewToggle.tsx → ...onents/StatsMenu/StatsChartViewToggle.tsx
@@ -1,20 +1,20 @@
 import { __, sprintf } from '@wordpress/i18n'
 import classnames from 'classnames'
 import React from 'react'
-import type { InsightsChartView } from '../../types/Insights'
+import type { StatsChartView } from '../../types/Stats'
 
-interface ViewToggleButtonProps<View extends InsightsChartView> extends InsightsChartViewToggleProps<View> {
+interface ViewToggleButtonProps<View extends StatsChartView> extends StatsChartViewToggleProps<View> {
 	icon: string
 	label: string
 	currentView: View
 }
 
-const ViewToggleButton = <View extends InsightsChartView,>(
+const ViewToggleButton = <View extends StatsChartView,>(
 	{ icon, title, label, view, setView, currentView }: ViewToggleButtonProps<View>
 ) =>
 	<button
 		type="button"
-		className={classnames('insights-chart-view-toggle-option', { 'active-view': currentView === view })}
+		className={classnames('stats-chart-view-toggle-option', { 'active-view': currentView === view })}
 		aria-pressed={currentView === view}
 		title={title}
 		onClick={() => setView(view)}
@@ -23,14 +23,14 @@ const ViewToggleButton = <View extends InsightsChartView,>(
 		<span className="screen-reader-text">{label}</span>
 	</button>
 
-export interface InsightsChartViewToggleProps<View extends InsightsChartView> {
+export interface StatsChartViewToggleProps<View extends StatsChartView> {
 	title: string
 	view: View
 	setView: (view: View) => void
 	views: readonly View[]
 }
 
-const VIEW_OPTIONS: Readonly<Record<InsightsChartView, { icon: string, label: string, title: string }>> = {
+const VIEW_OPTIONS: Readonly<Record<StatsChartView, { icon: string, label: string, title: string }>> = {
 	pie: {
 		icon: 'chart-pie',
 		label: __('Chart view', 'code-snippets'),
@@ -48,11 +48,11 @@ const VIEW_OPTIONS: Readonly<Record<InsightsChartView, { icon: string, label: st
 	}
 }
 
-export const InsightsChartViewToggle = <View extends InsightsChartView,>(
-	{ title, view, setView, views }: InsightsChartViewToggleProps<View>
+export const StatsChartViewToggle = <View extends StatsChartView,>(
+	{ title, view, setView, views }: StatsChartViewToggleProps<View>
 ) =>
 	<div
-		className="insights-chart-view-toggle"
+		className="stats-chart-view-toggle"
 		role="group"
 		aria-label={sprintf(__('%s chart view', 'code-snippets'), title)}
 	>

diff --git a/...omponents/InsightsMenu/InsightsCharts.tsx → src/js/components/StatsMenu/StatsCharts.tsx b/...omponents/InsightsMenu/InsightsCharts.tsx → src/js/components/StatsMenu/StatsCharts.tsx
@@ -1,8 +1,8 @@
 import { _n, sprintf } from '@wordpress/i18n'
 import classnames from 'classnames'
 import React, { useMemo } from 'react'
-import { InsightsChartViewToggle } from './InsightsChartViewToggle'
-import type { InsightsChartEntry, InsightsChartKey, InsightsChartViews, InsightsConfigurableChartKey } from '../../types/Insights'
+import { StatsChartViewToggle } from './StatsChartViewToggle'
+import type { StatsChartEntry, StatsChartKey, StatsChartViews, StatsConfigurableChartKey } from '../../types/Stats'
 
 const PERCENTAGE_MAX = 100
 
@@ -13,7 +13,7 @@ const TAG_CLOUD_MIN_FONT_SIZE = 0.875
 const TAG_CLOUD_FONT_SIZE_RANGE = 0.625
 
 const getPieBackground = (
-	entries: Readonly<Record<string, InsightsChartEntry>>,
+	entries: Readonly<Record<string, StatsChartEntry>>,
 	colors: Readonly<Record<string, string>> | undefined,
 	totalCount: number
 ): string => {
@@ -32,12 +32,12 @@ const getPieBackground = (
 }
 
 interface ChartProps {
-	entries: Readonly<Record<string, InsightsChartEntry>>
+	entries: Readonly<Record<string, StatsChartEntry>>
 	colors?: Readonly<Record<string, string>>
 }
 
-const EntryLabel: React.FC<Pick<InsightsChartEntry, 'label' | 'url'>> = ({ label, url }) =>
-	url ? <a className="insights-chart-entry-link" href={url}>{label}</a> : <>{label}</>
+const EntryLabel: React.FC<Pick<StatsChartEntry, 'label' | 'url'>> = ({ label, url }) =>
+	url ? <a className="stats-chart-entry-link" href={url}>{label}</a> : <>{label}</>
 
 const BarChart: React.FC<ChartProps> = ({ colors, entries }) => {
 	const entryCounts = useMemo(() =>
@@ -46,13 +46,13 @@ const BarChart: React.FC<ChartProps> = ({ colors, entries }) => {
 	[entries])
 
 	return (
-		<ul className="insights-bar-chart">
+		<ul className="stats-bar-chart">
 			{Object.entries(entries).map(([key, entry]) =>
 				<li key={key}>
 					<span><EntryLabel {...entry} /></span>
-					<div className="insights-bar-track" aria-hidden="true">
+					<div className="stats-bar-track" aria-hidden="true">
 						<div
-							className="insights-bar-fill"
+							className="stats-bar-fill"
 							style={{
 								backgroundColor: colors?.[key] ?? DEFAULT_COLOR,
 								inlineSize: `${Number(entry.count) / Math.max(1, ...entryCounts) * PERCENTAGE_MAX}%`
@@ -72,13 +72,13 @@ const PieChart: React.FC<ChartProps> = ({ colors, entries }) => {
 	[entries])
 
 	return (
-		<div className="insights-pie-chart-content">
+		<div className="stats-pie-chart-content">
 			<div
-				className={classnames('insights-pie-chart', { 'is-empty': 0 === totalCount })}
+				className={classnames('stats-pie-chart', { 'is-empty': 0 === totalCount })}
 				aria-hidden="true"
 				style={0 === totalCount ? undefined : { background: getPieBackground(entries, colors, totalCount) }}
 			/>
-			<ul className="insights-pie-chart-legend">
+			<ul className="stats-pie-chart-legend">
 				{Object.entries(entries).map(([key, entry]) =>
 					<li key={key}>
 						<span>
@@ -98,7 +98,7 @@ const TagCloud: React.FC<ChartProps> = ({ entries }) => {
 	[entries])
 
 	return (
-		<ul className="insights-tags-cloud">
+		<ul className="stats-tags-cloud">
 			{Object.entries(entries).map(([key, entry]) =>
 				<li
 					key={key}
@@ -114,34 +114,34 @@ const TagCloud: React.FC<ChartProps> = ({ entries }) => {
 	)
 }
 
-export interface InsightsChartProps<Chart extends InsightsConfigurableChartKey> {
+export interface StatsChartProps<Chart extends StatsConfigurableChartKey> {
 	chart: Chart
-	entries: Readonly<Record<string, InsightsChartEntry>>
+	entries: Readonly<Record<string, StatsChartEntry>>
 	title: string
-	view: InsightsChartViews[Chart]
-	setView?: (view: InsightsChartViews[Chart]) => void
+	view: StatsChartViews[Chart]
+	setView?: (view: StatsChartViews[Chart]) => void
 	colors?: Readonly<Record<string, string>>
-	views: readonly InsightsChartViews[Chart][]
+	views: readonly StatsChartViews[Chart][]
 }
 
-export const InsightsChart = <Chart extends InsightsConfigurableChartKey,>({
+export const StatsChart = <Chart extends StatsConfigurableChartKey,>({
 	chart,
 	colors,
 	entries,
 	setView,
 	title,
 	view,
 	views
-}: InsightsChartProps<Chart>) =>
+}: StatsChartProps<Chart>) =>
 	<section
-		className="insights-chart-card"
-		data-insights-chart={chart}
+		className="stats-chart-card"
+		data-stats-chart={chart}
 		data-view={view}
-		aria-labelledby={`insights-chart-${chart}-heading`}
+		aria-labelledby={`stats-chart-${chart}-heading`}
 	>
-		<div className="insights-chart-card-header">
-			<h2 id={`insights-chart-${chart}-heading`}>{title}</h2>
-			{setView && <InsightsChartViewToggle title={title} view={view} setView={setView} views={views} />}
+		<div className="stats-chart-card-header">
+			<h2 id={`stats-chart-${chart}-heading`}>{title}</h2>
+			{setView && <StatsChartViewToggle title={title} view={view} setView={setView} views={views} />}
 		</div>
 		{'bar' === view
 			? <BarChart colors={colors} entries={entries} />
@@ -150,14 +150,14 @@ export const InsightsChart = <Chart extends InsightsConfigurableChartKey,>({
 				: <TagCloud entries={entries} />}
 	</section>
 
-export interface TotalsInsightsChartProps extends InsightsChartEntry {
-	chart: InsightsChartKey
+export interface TotalsStatsChartProps extends StatsChartEntry {
+	chart: StatsChartKey
 }
 
-export const TotalsInsightsChart: React.FC<TotalsInsightsChartProps> = ({ chart, count, label }) =>
-	<section className="insights-chart-card" data-insights-chart={chart} aria-label={label}>
-		<div className="insights-number-chart">
-			<strong className="insights-number-chart-value">{count}</strong>
-			<span className="insights-number-chart-label">{label}</span>
+export const TotalsStatsChart: React.FC<TotalsStatsChartProps> = ({ chart, count, label }) =>
+	<section className="stats-chart-card" data-stats-chart={chart} aria-label={label}>
+		<div className="stats-number-chart">
+			<strong className="stats-number-chart-value">{count}</strong>
+			<span className="stats-number-chart-label">{label}</span>
 		</div>
 	</section>