+ {hasEntity && (
+
+ )}
+
+
+ );
+};
+
+export const ArenaCrownCards = ({
+ crowns,
+ loading,
+}: ArenaCrownCardsProps): ReactElement => {
+ return (
+
+
+
+
+
+
+
+ {crown.label}
+
+
+ {Array.from({ length: CROWN_SPARK_COUNT }, (_, i) => (
+
+ ))}
+
+ )}
+
+ {hasEntity && crown.type === 'most-controversial' && (
+ <>
+
+
+ {Array.from({ length: 10 }, (_, i) => (
+
+ ))}
+
+
+ )}
+
+ {hasEntity && crown.type === 'developers-choice' && (
+ <>
+
+
+
+
+ {Array.from({ length: 2 }, (_, i) => (
+
+ ))}
+
+
+ {Array.from({ length: 16 }, (_, i) => (
+
+ ))}
+
+
+ )}
+
+ {hasEntity && crown.type === 'most-discussed' && (
+
+ {Array.from({ length: 6 }, (_, i) => (
+
+ ))}
+
+ )}
+
+ {hasEntity && crown.type === 'most-loved' && (
+
+ )}
+
+ {loading ? (
+ <>
+ 
+
+ {crown.entity?.name}
+
+
+ )}
+
+
+
+ {loading ? (
+
+
+ {crowns.map((crown) => (
+
+ );
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightUtils.ts b/packages/shared/src/features/agents/arena/ArenaHighlightUtils.ts
new file mode 100644
index 0000000000..039daf8d2e
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightUtils.ts
@@ -0,0 +1,2 @@
+export const stripTcoLinks = (text: string): string =>
+ text.replace(/https?:\/\/t\.co\/\S+/g, '').trim();
diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
new file mode 100644
index 0000000000..3fbda369ed
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -0,0 +1,268 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { useViewSize, ViewSize } from '../../../hooks';
+import { getLastActivityDateFormat } from '../../../lib/dateFormat';
+import type { SentimentAnnotation, SentimentHighlightItem } from './types';
+import { stripTcoLinks } from './ArenaHighlightUtils';
+
+const decodeHtmlEntities = (text: string): string => {
+ const textarea =
+ typeof document !== 'undefined' && document.createElement('textarea');
+ if (!textarea) {
+ return text
+ .replace(/&/g, '&')
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, "'");
+ }
+
+ textarea.innerHTML = text;
+ return textarea.value;
+};
+
+const getSentimentColor = (score: number): string => {
+ if (score > 0.2) {
+ return 'bg-accent-avocado-default';
+ }
+ if (score < -0.2) {
+ return 'bg-accent-ketchup-default';
+ }
+ return 'bg-text-quaternary';
+};
+
+const Placeholder = ({ className }: { className?: string }): ReactElement => (
+
+);
+
+const SentimentPill = ({
+ sentiment,
+}: {
+ sentiment: SentimentAnnotation;
+}): ReactElement => {
+ return (
+
+
+ {sentiment.entity.replace(/_/g, ' ')}
+
+ );
+};
+
+const AuthorAvatar = ({
+ author,
+}: {
+ author?: SentimentHighlightItem['author'];
+}): ReactElement => {
+ if (author?.avatarUrl) {
+ return (
+
+ {initials}
+
+ );
+};
+
+const HighlightCard = ({
+ item,
+}: {
+ item: SentimentHighlightItem;
+}): ReactElement => {
+ const cleanText = decodeHtmlEntities(stripTcoLinks(item.text));
+
+ return (
+
+
+ );
+};
+
+const PlaceholderCard = (): ReactElement => (
+
+
+
+ {item.author?.name && (
+
+ {item.author.name}
+
+ )}
+ {item.author?.handle && (
+
+ @{item.author.handle}
+
+ )}
+
+ · {getLastActivityDateFormat(item.createdAt)}
+
+
+
+ + {cleanText} +
+ + {item.sentiments.length > 0 && ( +
+ {item.sentiments.map((sentiment) => (
+
+ )}
+
+
+);
+
+const MOBILE_FEED_LIMIT = 5;
+const MAX_HIGHLIGHTS = 100;
+
+interface ArenaHighlightsFeedProps {
+ items: SentimentHighlightItem[];
+ loading?: boolean;
+}
+
+export const ArenaHighlightsFeed = ({
+ items,
+ loading,
+}: ArenaHighlightsFeedProps): ReactElement => {
+ const [visibleItems, setVisibleItems] = useState
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
new file mode 100644
index 0000000000..9129c4d72c
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -0,0 +1,116 @@
+import type { ReactElement } from 'react';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { useQuery } from '@tanstack/react-query';
+import { ArenaIcon } from '../../../components/icons/Arena';
+import { IconSize } from '../../../components/Icon';
+import type { ArenaTab } from './types';
+import { ARENA_TABS } from './config';
+import { computeRankings, computeCrowns } from './arenaMetrics';
+import { ArenaCrownCards } from './ArenaCrownCards';
+import { ArenaRankings } from './ArenaRankings';
+import { ArenaHighlightsFeed } from './ArenaHighlightsFeed';
+import { arenaOptions } from './queries';
+
+interface ArenaPageProps {
+ activeTab: ArenaTab;
+ onTabChange?: (tab: ArenaTab) => void;
+}
+
+const LiveIndicator = (): ReactElement => (
+
+
+ Live Highlights
+
+
+
+ {!loading && pendingItems.length > 0 && (
+
+
+
+ )}
+
+
+ {loading
+ ? Array.from({ length: 4 }).map((_, i) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+
+ {!loading && hasMoreOnMobile && (
+
+ )}
+
+
+ Live
+
+);
+
+export const ArenaPage = ({
+ activeTab,
+ onTabChange,
+}: ArenaPageProps): ReactElement => {
+ const { data, isFetching } = useQuery(arenaOptions({ groupId: activeTab }));
+
+ const rankings = useMemo(
+ () =>
+ data?.sentimentTimeSeries && data.sentimentGroup
+ ? computeRankings(
+ data.sentimentTimeSeries.entities.nodes,
+ data.sentimentGroup.entities,
+ data.sentimentTimeSeries.resolutionSeconds,
+ )
+ : [],
+ [data?.sentimentTimeSeries, data?.sentimentGroup],
+ );
+
+ const crowns = useMemo(() => computeCrowns(rankings), [rankings]);
+ const loading = isFetching && !data;
+
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
new file mode 100644
index 0000000000..dfe514a174
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -0,0 +1,432 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import type { RankedTool } from './types';
+import { ArenaSparkline } from './ArenaSparkline';
+import { ArenaSentimentBar } from './ArenaSentimentBar';
+import { ArenaAnimatedCounter } from './ArenaAnimatedCounter';
+import { formatDIndex, formatVolume } from './arenaMetrics';
+import { Tooltip } from '../../../components/tooltip/Tooltip';
+import { InfoIcon } from '../../../components/icons/Info';
+import { MedalBadgeIcon } from '../../../components/icons/MedalBadge';
+import { IconSize } from '../../../components/Icon';
+
+interface ArenaRankingsProps {
+ tools: RankedTool[];
+ loading?: boolean;
+}
+
+const RANK_MEDAL_COLORS = [
+ 'text-accent-cheese-default', // gold
+ 'text-text-tertiary', // silver
+ 'text-accent-bacon-default', // bronze
+];
+
+const Placeholder = ({ className }: { className?: string }): ReactElement => (
+
+);
+
+const getMomentumDisplay = (
+ momentum: number,
+): { text: string; color: string; cssColor: string } => {
+ if (momentum > 0) {
+ return {
+ text: `+${momentum}%`,
+ color: 'text-accent-avocado-default',
+ cssColor: 'var(--theme-accent-avocado-default)',
+ };
+ }
+ if (momentum < 0) {
+ return {
+ text: `${momentum}%`,
+ color: 'text-accent-ketchup-default',
+ cssColor: 'var(--theme-accent-ketchup-default)',
+ };
+ }
+ return {
+ text: '0%',
+ color: 'text-text-quaternary',
+ cssColor: 'var(--theme-text-quaternary)',
+ };
+};
+
+const ChevronIcon = ({ expanded }: { expanded: boolean }): ReactElement => (
+
+);
+
+const RankingRow = ({
+ tool,
+ rank,
+ loading,
+ expanded,
+ onToggle,
+}: {
+ tool: RankedTool;
+ rank: number;
+ loading?: boolean;
+ expanded: boolean;
+ onToggle: () => void;
+}): ReactElement => {
+ const momentum = getMomentumDisplay(tool.momentum);
+ const medalColor = RANK_MEDAL_COLORS[rank - 1];
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ + The Arena +
++ Where AI tools fight for developer love +
+
+
+
+
+
+
+
+
+
+
+
+ {/* Main row — clickable on mobile to expand */}
+
+
+ {/* Expanded detail panel — mobile/tablet only */}
+ {expanded && !loading && (
+
+ );
+};
+
+const EmergingRow = ({
+ tool,
+ loading,
+}: {
+ tool: RankedTool;
+ loading?: boolean;
+}): ReactElement => (
+
+
+ )}
+
+ {/* Sentiment — shown on mobile (hidden on tablet since it's inline) */}
+
+
+
+ Sentiment
+
+
+
+
+ 24h Vol
+
+
+ {formatVolume(tool.volume24h)}
+
+
+
+
+ Momentum
+
+
+ {momentum.text}
+
+
+
+
+ 7d Trend
+
+
+
+ {loading ? (
+ <>
+ 
+
+ {tool.entity.name}
+
+
+ )}
+ {!loading && (
+
+ Not enough data yet
+
+ )}
+
+);
+
+const HeaderWithTooltip = ({
+ label,
+ tooltip,
+}: {
+ label: string;
+ tooltip: string;
+}): ReactElement => (
+
+
+);
+
+export const ArenaRankings = ({
+ tools,
+ loading,
+}: ArenaRankingsProps): ReactElement => {
+ const [expandedEntity, setExpandedEntity] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Header */}
+
+ );
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx b/packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx
new file mode 100644
index 0000000000..af3f0f3d5b
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx
@@ -0,0 +1,51 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+
+interface ArenaSentimentBarProps {
+ value: number;
+}
+
+const getSentimentColor = (value: number): string => {
+ if (value > 60) {
+ return 'bg-accent-avocado-default';
+ }
+ if (value >= 40) {
+ return 'bg-accent-cheese-default';
+ }
+ return 'bg-accent-ketchup-default';
+};
+
+const getSentimentTextColor = (value: number): string => {
+ if (value > 60) {
+ return 'text-accent-avocado-default';
+ }
+ if (value >= 40) {
+ return 'text-accent-cheese-default';
+ }
+ return 'text-accent-ketchup-default';
+};
+
+export const ArenaSentimentBar = ({
+ value,
+}: ArenaSentimentBarProps): ReactElement => (
+
+
+
+
+
+ Tool
+
+
+
+
+ {/* Ranked rows */}
+
+ {showPlaceholderRows
+ ? Array.from({ length: PLACEHOLDER_ROW_COUNT }).map((_, i) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+ setExpandedEntity((prev) =>
+ prev === tool.entity.entity ? null : tool.entity.entity,
+ )
+ }
+ />
+ ))}
+
+
+ {/* Emerging section */}
+ {emerging.length > 0 && (
+ <>
+
+
+ Emerging
+
+
+ {emerging.map((tool) => (
+
+
+);
diff --git a/packages/shared/src/features/agents/arena/ArenaSparkline.tsx b/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
new file mode 100644
index 0000000000..647e241414
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
@@ -0,0 +1,80 @@
+import type { ReactElement } from 'react';
+import React, { useId } from 'react';
+
+interface ArenaSparklineProps {
+ data: number[];
+ width?: number;
+ height?: number;
+ className?: string;
+ color?: string;
+}
+
+export const ArenaSparkline = ({
+ data,
+ width = 80,
+ height = 24,
+ className,
+ color,
+}: ArenaSparklineProps): ReactElement => {
+ const max = Math.max(...data, 1);
+ const padding = 2;
+ const chartWidth = width - padding * 2;
+ const chartHeight = height - padding * 2;
+ const step = chartWidth / Math.max(data.length - 1, 1);
+ const strokeColor = color || 'var(--theme-text-tertiary)';
+ const gradientId = `sparkGrad-${useId().replace(/:/g, '')}`;
+
+ const points = data.map((value, i) => ({
+ x: padding + i * step,
+ y: padding + chartHeight - (value / max) * chartHeight,
+ }));
+
+ const pathD = points.reduce(
+ (acc, point, i) => `${acc}${i === 0 ? 'M' : 'L'}${point.x},${point.y}`,
+ '',
+ );
+
+ const lastPoint = points[points.length - 1];
+ const areaD = `${pathD}L${lastPoint.x},${padding + chartHeight}L${padding},${
+ padding + chartHeight
+ }Z`;
+
+ return (
+
+ );
+};
diff --git a/packages/shared/src/features/agents/arena/arenaMetrics.ts b/packages/shared/src/features/agents/arena/arenaMetrics.ts
new file mode 100644
index 0000000000..9ba390d86c
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/arenaMetrics.ts
@@ -0,0 +1,408 @@
+import type {
+ SentimentTimeSeriesNode,
+ ArenaEntity,
+ CrownData,
+ RankedTool,
+} from './types';
+import { EMERGING_THRESHOLD } from './config';
+import { MedalBadgeIcon } from '../../../components/icons/MedalBadge';
+import { StarIcon } from '../../../components/icons/Star';
+import { TrendingIcon } from '../../../components/icons/Trending';
+import { MegaphoneIcon } from '../../../components/icons/Megaphone';
+import { HotIcon } from '../../../components/icons/Hot';
+
+const SECONDS_PER_DAY = 86400;
+
+interface WindowData {
+ volume: number;
+ sentimentScore: number;
+}
+
+/**
+ * Sum volume and compute weighted sentiment for points in a timestamp range.
+ * Timestamps are offsets (in seconds) from the series start.
+ */
+const sumWindowByTime = (
+ node: SentimentTimeSeriesNode,
+ fromOffset: number,
+ toOffset: number,
+): WindowData => {
+ let totalVolume = 0;
+ let weightedScore = 0;
+
+ for (let i = 0; i < node.timestamps.length; i += 1) {
+ const ts = node.timestamps[i];
+ if (ts >= fromOffset && ts < toOffset) {
+ totalVolume += node.volume[i];
+ weightedScore += node.scores[i] * node.volume[i];
+ }
+ }
+
+ if (totalVolume === 0) {
+ return { volume: 0, sentimentScore: 0 };
+ }
+
+ return { volume: totalVolume, sentimentScore: weightedScore / totalVolume };
+};
+
+/**
+ * Returns the total window span in seconds based on the sparse timestamps.
+ * For a 7d lookback the max offset should be ~604800.
+ */
+const getWindowSpan = (node: SentimentTimeSeriesNode): number => {
+ if (node.timestamps.length === 0) {
+ return 0;
+ }
+ return node.timestamps[node.timestamps.length - 1];
+};
+
+const getLatest24hWindow = (node: SentimentTimeSeriesNode): WindowData => {
+ const span = getWindowSpan(node);
+ if (span === 0) {
+ return { volume: 0, sentimentScore: 0 };
+ }
+
+ const cutoff = Math.max(0, span - SECONDS_PER_DAY);
+ return sumWindowByTime(node, cutoff, span + 1);
+};
+
+const assertSeriesShape = (node: SentimentTimeSeriesNode): void => {
+ const expectedLength = node.timestamps.length;
+ const series: Array<[string, number[]]> = [
+ ['scores', node.scores],
+ ['volume', node.volume],
+ ['scoreVariance', node.scoreVariance],
+ ['dIndex', node.dIndex],
+ ];
+
+ const invalidSeries = series.find(
+ ([, values]) => values.length !== expectedLength,
+ );
+ if (invalidSeries) {
+ const [name, values] = invalidSeries;
+ throw new Error(
+ `Arena sentiment series "${node.entity}" has invalid ${name} length: expected ${expectedLength}, got ${values.length}`,
+ );
+ }
+};
+
+const getWeightedAverageDIndexByTime = (
+ node: SentimentTimeSeriesNode,
+ fromOffset: number,
+ toOffset: number,
+ multiplier: number,
+): number => {
+ let totalWeight = 0;
+ let weightedDIndex = 0;
+
+ for (let i = 0; i < node.timestamps.length; i += 1) {
+ const ts = node.timestamps[i];
+ if (ts >= fromOffset && ts < toOffset) {
+ const volume = node.volume[i];
+ if (volume > 0) {
+ weightedDIndex += node.dIndex[i] * volume;
+ totalWeight += volume;
+ }
+ }
+ }
+
+ if (totalWeight === 0) {
+ return 0;
+ }
+
+ return (weightedDIndex / totalWeight) * multiplier;
+};
+
+const getLatest24hDIndex = (
+ node: SentimentTimeSeriesNode,
+ multiplier: number,
+): number => {
+ const span = getWindowSpan(node);
+ if (span === 0) {
+ return 0;
+ }
+
+ const cutoff = Math.max(0, span - SECONDS_PER_DAY);
+ return getWeightedAverageDIndexByTime(node, cutoff, span + 1, multiplier);
+};
+
+const getPrevious24hDIndex = (
+ node: SentimentTimeSeriesNode,
+ multiplier: number,
+): number => {
+ const span = getWindowSpan(node);
+ if (span <= SECONDS_PER_DAY) {
+ return 0;
+ }
+
+ const cutoff = Math.max(0, span - SECONDS_PER_DAY);
+ const prevStart = Math.max(0, cutoff - SECONDS_PER_DAY);
+ return getWeightedAverageDIndexByTime(node, prevStart, cutoff, multiplier);
+};
+
+const computeSentimentDisplay = (sentimentScore: number): number =>
+ Math.round(((sentimentScore + 1) / 2) * 100);
+
+const computeMomentum = (currentDIndex: number, prevDIndex: number): number => {
+ if (prevDIndex === 0) {
+ return currentDIndex > 0 ? 100 : 0;
+ }
+ return ((currentDIndex - prevDIndex) / prevDIndex) * 100;
+};
+
+interface ControversyData {
+ /** Total controversy: sum of volume × scoreVariance. Used for ranking. */
+ score: number;
+ /** Volume-weighted average scoreVariance. */
+ heat: number;
+}
+
+/**
+ * Compute controversy metrics from the API-provided scoreVariance.
+ */
+const computeControversy = (
+ node: SentimentTimeSeriesNode,
+ fromOffset: number,
+ toOffset: number,
+): ControversyData => {
+ let totalWeighted = 0;
+ let totalVolume = 0;
+
+ for (let i = 0; i < node.timestamps.length; i += 1) {
+ const ts = node.timestamps[i];
+ if (ts >= fromOffset && ts < toOffset && node.volume[i] > 0) {
+ totalWeighted += node.volume[i] * node.scoreVariance[i];
+ totalVolume += node.volume[i];
+ }
+ }
+
+ const avgVariance = totalVolume > 0 ? totalWeighted / totalVolume : 0;
+ return {
+ score: totalWeighted,
+ heat: Math.round(avgVariance * 100),
+ };
+};
+
+/**
+ * Build a 7-point sparkline across the available time window.
+ * Points 0-5 are fixed day-aligned buckets (complete days).
+ * Point 6 is a rolling 24h window ending at `span` so the in-progress day
+ * is compared against a full day of data instead of a partial one.
+ */
+const getSparklineData = (
+ node: SentimentTimeSeriesNode,
+ multiplier: number,
+): number[] => {
+ const span = getWindowSpan(node);
+ if (span === 0) {
+ return [0, 0, 0, 0, 0, 0, 0];
+ }
+
+ return Array.from({ length: 7 }, (_, idx) => {
+ // Last point: rolling 24h window ending at the latest data point.
+ if (idx === 6) {
+ const from = Math.max(0, span - SECONDS_PER_DAY);
+ return getWeightedAverageDIndexByTime(node, from, span + 1, multiplier);
+ }
+
+ // Points 0-5: fixed day-aligned buckets.
+ const from = idx * SECONDS_PER_DAY;
+ const to = (idx + 1) * SECONDS_PER_DAY;
+ return getWeightedAverageDIndexByTime(node, from, to, multiplier);
+ });
+};
+
+export const computeRankings = (
+ nodes: SentimentTimeSeriesNode[],
+ entityMetadata: ArenaEntity[],
+ resolutionSeconds = 3600,
+): RankedTool[] => {
+ if (!entityMetadata.length) {
+ throw new Error('Arena entity metadata is empty');
+ }
+
+ const entityMap = new Map(
+ entityMetadata.map((entity) => [entity.entity, entity]),
+ );
+
+ const multiplier =
+ resolutionSeconds > 0 ? SECONDS_PER_DAY / resolutionSeconds : 1;
+
+ const tools: RankedTool[] = nodes.map((node) => {
+ const entityMeta = entityMap.get(node.entity);
+ if (!entityMeta) {
+ throw new Error(
+ `Arena sentiment series contains unknown entity "${node.entity}"`,
+ );
+ }
+ assertSeriesShape(node);
+
+ const current = getLatest24hWindow(node);
+ const dIndex = getLatest24hDIndex(node, multiplier);
+ const prevDIndex = getPrevious24hDIndex(node, multiplier);
+
+ const span = getWindowSpan(node);
+ const cutoff24h = Math.max(0, span - SECONDS_PER_DAY);
+ const controversy = computeControversy(node, cutoff24h, span + 1);
+
+ return {
+ entity: entityMeta,
+ dIndex: Math.round(dIndex),
+ sentimentDisplay: computeSentimentDisplay(current.sentimentScore),
+ momentum: Math.round(computeMomentum(dIndex, prevDIndex)),
+ volume24h: current.volume,
+ controversyScore: controversy.score,
+ heat: controversy.heat,
+ sparkline: getSparklineData(node, multiplier),
+ isEmerging: current.volume < EMERGING_THRESHOLD,
+ };
+ });
+ // Include entities with no data as emerging
+ const presentEntities = new Set(tools.map((t) => t.entity.entity));
+ entityMetadata.forEach((entity) => {
+ if (!presentEntities.has(entity.entity)) {
+ tools.push({
+ entity,
+ dIndex: 0,
+ sentimentDisplay: 50,
+ momentum: 0,
+ volume24h: 0,
+ controversyScore: 0,
+ heat: 0,
+ sparkline: [0, 0, 0, 0, 0, 0, 0],
+ isEmerging: true,
+ });
+ }
+ });
+
+ return tools.sort((a, b) => b.dIndex - a.dIndex);
+};
+
+export const formatDIndex = (value: number): string => {
+ if (value >= 1_000_000) {
+ return `${(value / 1_000_000).toFixed(1)}M`;
+ }
+ if (value >= 1_000) {
+ return `${(value / 1_000).toFixed(1)}k`;
+ }
+ return value.toLocaleString();
+};
+
+export const formatVolume = (value: number): string => {
+ if (value >= 1_000_000) {
+ return `${(value / 1_000_000).toFixed(1)}M`;
+ }
+ if (value >= 1_000) {
+ return `${(value / 1_000).toFixed(1)}k`;
+ }
+ return value.toString();
+};
+
+interface CrownThresholds {
+ minVolume: number;
+}
+
+const CROWN_CONFIG: Record<
+ string,
+ {
+ icon: CrownData['icon'];
+ iconColor: string;
+ glowColor: string;
+ label: string;
+ thresholds: CrownThresholds;
+ getValue: (t: RankedTool) => number;
+ formatStat: (t: RankedTool) => string;
+ }
+> = {
+ 'developers-choice': {
+ icon: MedalBadgeIcon,
+ iconColor: 'text-accent-cheese-default',
+ glowColor: 'var(--theme-accent-cheese-default)',
+ label: "Developer's choice",
+ thresholds: { minVolume: 10 },
+ getValue: (t) => t.dIndex,
+ formatStat: (t) => `${formatDIndex(t.dIndex)} D-Index`,
+ },
+ 'most-loved': {
+ icon: StarIcon,
+ iconColor: 'text-accent-cabbage-default',
+ glowColor: 'var(--theme-accent-cabbage-default)',
+ label: 'Most loved',
+ thresholds: { minVolume: 10 },
+ getValue: (t) => t.sentimentDisplay,
+ formatStat: (t) => `${t.sentimentDisplay} / 100`,
+ },
+ 'fastest-rising': {
+ icon: TrendingIcon,
+ iconColor: 'text-accent-avocado-default',
+ glowColor: 'var(--theme-accent-avocado-default)',
+ label: 'Fastest rising',
+ thresholds: { minVolume: 5 },
+ getValue: (t) => t.momentum,
+ formatStat: (t) =>
+ `${t.momentum > 0 ? '+' : ''}${t.momentum}% vs prior 24h`,
+ },
+ 'most-discussed': {
+ icon: MegaphoneIcon,
+ iconColor: 'text-accent-blueCheese-default',
+ glowColor: 'var(--theme-accent-blueCheese-default)',
+ label: 'Most discussed',
+ thresholds: { minVolume: 0 },
+ getValue: (t) => t.volume24h,
+ formatStat: (t) => `${formatVolume(t.volume24h)} mentions`,
+ },
+ 'most-controversial': {
+ icon: HotIcon,
+ iconColor: 'text-accent-ketchup-default',
+ glowColor: 'var(--theme-accent-ketchup-default)',
+ label: 'Most controversial',
+ thresholds: { minVolume: 10 },
+ getValue: (t) => t.controversyScore,
+ formatStat: (t) => `Heat ${t.heat}`,
+ },
+};
+
+export const computeCrowns = (tools: RankedTool[]): CrownData[] => {
+ const established = tools.filter((t) => !t.isEmerging);
+
+ return (
+ [
+ 'developers-choice',
+ 'most-loved',
+ 'fastest-rising',
+ 'most-discussed',
+ 'most-controversial',
+ ] as const
+ ).map((type) => {
+ const config = CROWN_CONFIG[type];
+ const eligible = established.filter(
+ (t) => t.volume24h >= config.thresholds.minVolume,
+ );
+
+ if (eligible.length === 0) {
+ return {
+ type,
+ icon: config.icon,
+ iconColor: config.iconColor,
+ glowColor: config.glowColor,
+ label: config.label,
+ entity: null,
+ stat: '',
+ };
+ }
+
+ const winner = eligible.reduce((best, current) =>
+ config.getValue(current) > config.getValue(best) ? current : best,
+ );
+
+ return {
+ type,
+ icon: config.icon,
+ iconColor: config.iconColor,
+ glowColor: config.glowColor,
+ label: config.label,
+ entity: winner.entity,
+ stat: config.formatStat(winner),
+ };
+ });
+};
diff --git a/packages/shared/src/features/agents/arena/config.ts b/packages/shared/src/features/agents/arena/config.ts
new file mode 100644
index 0000000000..8bf48430f9
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/config.ts
@@ -0,0 +1,13 @@
+import type { ArenaGroupId, ArenaTab } from './types';
+
+export const ARENA_TABS: { label: string; value: ArenaTab }[] = [
+ { label: 'Coding Agents', value: 'coding-agents' },
+ { label: 'LLMs', value: 'llms' },
+];
+
+export const ARENA_GROUP_IDS: Record
+
+
+
+ {value}
+
+