From 0ea9da886e554b3e59ce9492133c088d14c4d031 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 15:55:18 +0200
Subject: [PATCH 01/24] feat: add Arena leaderboard page for AI coding agents
 and LLMs

Introduces the Arena page with D-Index rankings, crown cards, sentiment bars,
sparkline charts, highlights feed, and live ticker. Uses SSR with Cache-Control
headers (s-maxage=60) to avoid rate-limiting the endpoint.
---
 docs/spec-agents-arena.md                     | 279 +++++++++++++++
 .../agents/arena/ArenaAnimatedCounter.tsx     |  54 +++
 .../features/agents/arena/ArenaCrownCards.tsx | 124 +++++++
 .../agents/arena/ArenaHighlightsFeed.tsx      | 233 ++++++++++++
 .../features/agents/arena/ArenaLiveTicker.tsx | 145 ++++++++
 .../src/features/agents/arena/ArenaPage.tsx   | 183 ++++++++++
 .../features/agents/arena/ArenaRankings.tsx   | 308 ++++++++++++++++
 .../agents/arena/ArenaSentimentBar.tsx        |  51 +++
 .../features/agents/arena/ArenaSparkline.tsx  |  81 +++++
 .../src/features/agents/arena/config.ts       | 166 +++++++++
 .../src/features/agents/arena/dindex.ts       | 332 ++++++++++++++++++
 .../src/features/agents/arena/graphql.ts      |  62 ++++
 .../src/features/agents/arena/mockData.ts     | 222 ++++++++++++
 .../src/features/agents/arena/queries.ts      |  23 ++
 .../shared/src/features/agents/arena/types.ts |  96 +++++
 packages/shared/src/lib/query.ts              |   1 +
 packages/shared/src/styles/utilities.css      |  18 +
 packages/webapp/pages/agents/arena.tsx        |  69 ++++
 18 files changed, 2447 insertions(+)
 create mode 100644 docs/spec-agents-arena.md
 create mode 100644 packages/shared/src/features/agents/arena/ArenaAnimatedCounter.tsx
 create mode 100644 packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
 create mode 100644 packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
 create mode 100644 packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
 create mode 100644 packages/shared/src/features/agents/arena/ArenaPage.tsx
 create mode 100644 packages/shared/src/features/agents/arena/ArenaRankings.tsx
 create mode 100644 packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx
 create mode 100644 packages/shared/src/features/agents/arena/ArenaSparkline.tsx
 create mode 100644 packages/shared/src/features/agents/arena/config.ts
 create mode 100644 packages/shared/src/features/agents/arena/dindex.ts
 create mode 100644 packages/shared/src/features/agents/arena/graphql.ts
 create mode 100644 packages/shared/src/features/agents/arena/mockData.ts
 create mode 100644 packages/shared/src/features/agents/arena/queries.ts
 create mode 100644 packages/shared/src/features/agents/arena/types.ts
 create mode 100644 packages/webapp/pages/agents/arena.tsx

diff --git a/docs/spec-agents-arena.md b/docs/spec-agents-arena.md
new file mode 100644
index 0000000000..176e2a1d2f
--- /dev/null
+++ b/docs/spec-agents-arena.md
@@ -0,0 +1,279 @@
+# Spec: Agents Arena (`/agents/arena`)
+
+## What it is
+
+A live leaderboard showing which AI coding agents and LLMs are winning the
+developer mindshare race right now. Powered by real-time sentiment + mention
+volume, crowned category winners, and a competitive energy that makes it worth
+checking daily and sharing when your tool is on top.
+
+The hook: **"Who's winning the race?"** — not a boring sentiment dashboard, but
+a live arena where tools compete for developer love, and the D-Index tells you
+who's ahead.
+
+---
+
+## URL Structure
+
+```
+/agents/arena                    → main page (Coding Agents tab default)
+/agents/arena?tab=llms           → LLMs tab
+/agents/arena/[slug]             → per-tool detail page
+```
+
+---
+
+## Entity Groups
+
+Each tab maps to a `groupId` on the `sentimentTimeSeries` API.
+
+**Tab: Coding Agents** (`groupId: "coding-agents"`)
+```
+cursor, copilot, windsurf, cline, claude_code,
+codex, aider, opencode, antigravity, kilocode
+```
+
+**Tab: LLMs** (`groupId: "llms"`)
+```
+claude_sonnet, claude_opus, gpt_5, gpt_codex,
+deepseek, gemini, llama, qwen, kimi
+```
+
+---
+
+## The D-Index
+
+The D-Index is daily.dev's proprietary developer mindshare score. It measures
+how much **positive attention** a tool is generating right now — combining raw
+mention volume with sentiment polarity.
+
+### Formulas
+
+```typescript
+// Raw from API: sentimentScore ∈ [-1, +1], volume = mention count per window
+
+// Headline number — unbounded, rewards viral moments
+dIndex = volume_24h × ((sentimentScore + 1) / 2)
+
+// Love score — 0-100, used for bar fill and "Most Loved" crown
+sentimentDisplay = Math.round(((sentimentScore + 1) / 2) × 100)
+
+// Momentum — % change vs same 24h window yesterday
+momentum = (dIndex_now - dIndex_24h_ago) / dIndex_24h_ago × 100
+
+// Controversy — peaks at high volume + perfectly split sentiment
+controversyScore = volume_24h × (1 - Math.abs(sentimentScore))
+```
+
+### Why unbounded
+
+The D-Index has no ceiling. When a tool ships something huge or goes viral,
+the number should explode — e.g. DeepSeek at peak: `180,000 × 0.62 = 111,600`.
+This is intentional. Dramatic spikes are the point.
+
+---
+
+## Crown Categories
+
+Four spotlight titles awarded to the current leader in each category.
+Evaluated on a **rolling 24h window** — crowns can change at any moment.
+
+| Crown | Awarded to | Minimum threshold |
+|---|---|---|
+| 👑 Most Loved | Highest `sentimentDisplay` | 100 mentions/24h |
+| 🚀 Fastest Rising | Highest positive `momentum` | 50 mentions/24h |
+| 🔥 Most Discussed | Highest raw `volume_24h` | — |
+| ⚡ Most Controversial | Highest `controversyScore` | 200 mentions/24h |
+
+**Unclaimed crowns:** If no tool meets the minimum threshold for a category,
+the card displays "Unclaimed" with a grayed crown — not hidden. This signals
+the category is actively contested and creates anticipation.
+
+**Held for:** Each crown card shows how long the current holder has held it
+(e.g. "Held for 31h") — adds drama and a reason to check back.
+
+---
+
+## Page Layout
+
+### Header
+
+Sticky. Shows page title, live freshness indicator, and tab switcher.
+
+```
+⚔️  THE ARENA                              ● Live · 2m ago
+Real-time developer sentiment · Powered by the D-Index
+
+[ Coding Agents ]  [ LLMs ]
+```
+
+- Pulsing green dot when data is fresh (<5min)
+- Dot turns amber + "stale" label if last update was >5min ago
+- Auto-refreshes every 30s
+
+---
+
+### Tier 1: The Crowns
+
+Four cards in a horizontal scroll row (mobile) or 4-column grid (desktop).
+These are the shareable trophies — the reason companies check this page.
+
+```
+┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
+│  👑 MOST LOVED   │ │  🚀 FASTEST      │ │  🔥 MOST         │ │  ⚡ MOST         │
+│                  │ │     RISING       │ │     DISCUSSED    │ │     CONTROVERSIAL│
+│  [Tool Logo]     │ │  [Tool Logo]     │ │  [Tool Logo]     │ │  [Tool Logo]     │
+│  Cursor          │ │  Claude Code     │ │  DeepSeek        │ │  Copilot         │
+│                  │ │                  │ │                  │ │                  │
+│  94 / 100        │ │  ▲ +187%         │ │  111,600 D-Index │ │  Split: 51/49    │
+│  Held for 31h    │ │  Held for 4h     │ │  Held for 12h    │ │  Held for 2h     │
+└──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘
+```
+
+Each crown card:
+- Crown emoji + category label
+- Tool logo + name
+- The stat that won it the crown (different per category)
+- "Held for Xh" timestamp
+- Subtle glow border in the tool's brand color
+- Click → `/agents/arena/[slug]`
+
+---
+
+### Tier 2: Full Rankings
+
+Sorted by D-Index descending. Rank positions animate when order changes.
+
+```
+ #    Tool           D-Index    Sentiment    Momentum    24h Vol
+──────────────────────────────────────────────────────────────────
+ 1 🥇  Cursor         2,088     ████░ 87     ▲ +12%      2.4k
+       ▁▂▃▄▅▆▇▇▆▅
+──────────────────────────────────────────────────────────────────
+ 2 🥈  Claude Code    1,547     ███░░ 71     ▲  +5%      1.8k
+       ▁▁▂▃▄▄▅▆▇▇
+──────────────────────────────────────────────────────────────────
+ 3 🥉  Copilot        1,203     ███░░ 68      ━   0%     1.5k
+       ▃▃▃▃▃▄▄▄▄▄
+──────────────────────────────────────────────────────────────────
+ 4     Windsurf         454     ██░░░ 51     ▼  -8%       890
+       ▅▄▄▃▃▂▂▂▁▁
+──────────────────────────────────────────────────────────────────
+
+─── EMERGING ──────────────────────────────────────────────────────
+      Antigravity     Not enough data yet              < 50 mentions
+      Kilocode        Not enough data yet
+```
+
+Each established row:
+- Rank + medal (🥇🥈🥉 for top 3)
+- Tool logo + name
+- **D-Index** — the headline number, ticks live on update
+- Sentiment bar (colored: green >70, amber 40–70, red <40) + numeric score
+- Momentum delta with colored arrow (green/red/gray)
+- 24h mention volume
+- 7-point sparkline (7-day daily trend)
+
+Live update behavior:
+- D-Index number briefly flashes green (up) or red (down) on change
+- Row slides up/down with transition when rank order changes
+
+---
+
+### Emerging Tools Section
+
+Tools below the minimum data threshold are shown at the bottom, separated by
+a divider, with no D-Index score. As volume crosses the threshold, they
+graduate into the main rankings with an animation.
+
+---
+
+## Data Layer
+
+### Primary query (on mount + every 30s)
+
+```graphql
+query ArenaData($groupId: ID!, $lookback: String!) {
+  sentimentTimeSeries(
+    resolution: QUARTER_HOUR
+    groupId: $groupId
+    lookback: $lookback
+  ) {
+    start
+    resolutionSeconds
+    entities {
+      nodes {
+        entity
+        timestamps
+        scores    # sentiment [-1, +1]
+        volume    # mention count
+      }
+    }
+  }
+}
+```
+
+- Called twice on mount: once per tab group (`coding-agents`, `llms`)
+- `lookback: "48h"` to have enough history for momentum calculation
+- Refetched every 30s via TanStack Query `refetchInterval`
+
+From the response we derive:
+- **Current window** (latest data point) → `dIndex`, `sentimentDisplay`
+- **Previous window** (latest point from 24h prior) → `momentum`
+- **Last 7 daily buckets** → sparkline data
+
+### Highlights query (lazy, on tool card click)
+
+```graphql
+query ToolHighlights($entity: String!, $after: String) {
+  sentimentHighlights(entity: $entity, first: 20, after: $after) {
+    items {
+      url
+      text
+      author { handle avatarUrl }
+      metrics { likeCount retweetCount impressionCount }
+      createdAt
+      sentiments { score highlightScore }
+    }
+    cursor
+  }
+}
+```
+
+Only fired when navigating to `/agents/arena/[slug]`.
+
+---
+
+## Real-Time Behavior
+
+| Event | Behavior |
+|---|---|
+| Data refresh (every 30s) | D-Index values update; changed values flash green/red |
+| Rank position change | Row slides up/down with CSS transition |
+| New crown holder | Crown card updates; brief confetti burst on the card |
+| Tool graduates from Emerging | Animates into main rankings with highlight flash |
+| Stale data (>5min) | Live dot → amber; "Last updated" text goes muted |
+| API down / error | Show last known data with timestamp; no error state shown |
+
+---
+
+## Per-Tool Detail Page: `/agents/arena/[slug]`
+
+High-level shape (full spec separate):
+
+- **Hero:** tool name, logo, current crown(s) if held
+- **Live stats:** D-Index, sentiment score, current rank, 24h volume
+- **Sentiment chart:** 48h time series (line chart, 15min resolution)
+- **Top highlights:** paginated list of top tweets/posts, sorted by
+  `highlightScore`, showing author, text, engagement metrics
+- **Back:** breadcrumb to `/agents/arena`
+
+---
+
+## Open Questions
+
+- **Slug mapping:** The API uses entity keys like `claude_code`. We need a
+  mapping from slug (URL-safe) to entity key and display name/logo.
+  Define this as a static config file.
+- **Crown sharing:** OG image generation per crown card deferred to future
+  iteration.
diff --git a/packages/shared/src/features/agents/arena/ArenaAnimatedCounter.tsx b/packages/shared/src/features/agents/arena/ArenaAnimatedCounter.tsx
new file mode 100644
index 0000000000..680343f003
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaAnimatedCounter.tsx
@@ -0,0 +1,54 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+interface ArenaAnimatedCounterProps {
+  value: number;
+  format?: (n: number) => string;
+  className?: string;
+  duration?: number;
+}
+
+export const ArenaAnimatedCounter = ({
+  value,
+  format,
+  className,
+  duration = 800,
+}: ArenaAnimatedCounterProps): ReactElement => {
+  const [display, setDisplay] = useState(value);
+  const prevRef = useRef(value);
+  const frameRef = useRef<number>(0);
+
+  useEffect(() => {
+    const from = prevRef.current;
+    const to = value;
+    prevRef.current = value;
+
+    if (from === to) {
+      return undefined;
+    }
+
+    const startTime = performance.now();
+    const animate = (now: number) => {
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      // ease-out cubic
+      const eased = 1 - (1 - progress) * (1 - progress) * (1 - progress);
+      const current = Math.round(from + (to - from) * eased);
+      setDisplay(current);
+
+      if (progress < 1) {
+        frameRef.current = requestAnimationFrame(animate);
+      }
+    };
+
+    frameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(frameRef.current);
+    };
+  }, [value, duration]);
+
+  const formatted = format ? format(display) : display.toLocaleString();
+
+  return <span className={className}>{formatted}</span>;
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
new file mode 100644
index 0000000000..611a71b20a
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -0,0 +1,124 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import type { CrownData } from './types';
+
+interface ArenaCrownCardsProps {
+  crowns: CrownData[];
+  loading?: boolean;
+}
+
+const Placeholder = ({ className }: { className?: string }): ReactElement => (
+  <div
+    className={classNames(
+      'animate-pulse rounded-8 bg-surface-float',
+      className,
+    )}
+  />
+);
+
+const CrownCard = ({
+  crown,
+  loading,
+}: {
+  crown: CrownData;
+  loading?: boolean;
+}): ReactElement => (
+  <div
+    className={classNames(
+      'group relative flex min-w-[180px] flex-1 flex-col items-center gap-3 overflow-hidden rounded-16 border p-5 transition-all duration-300',
+      loading
+        ? 'border-border-subtlest-tertiary bg-surface-float'
+        : 'border-border-subtlest-secondary bg-surface-float hover:-translate-y-1 hover:shadow-2',
+    )}
+    style={
+      !loading && crown.entity?.brandColor
+        ? {
+            boxShadow: `0 0 30px ${crown.entity.brandColor}20, inset 0 1px 0 ${crown.entity.brandColor}30`,
+          }
+        : undefined
+    }
+  >
+    {/* Animated gradient glow that breathes */}
+    {!loading && crown.entity?.brandColor && (
+      <>
+        <div
+          className="pointer-events-none absolute -top-10 left-1/2 h-28 w-28 -translate-x-1/2 rounded-full blur-2xl"
+          style={{
+            backgroundColor: crown.entity.brandColor,
+            animation: 'pulse 3s ease-in-out infinite',
+            opacity: 0.15,
+          }}
+        />
+        <div
+          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+          style={{
+            background: `linear-gradient(105deg, transparent 40%, ${crown.entity.brandColor}15 50%, transparent 60%)`,
+            backgroundSize: '200% 100%',
+            animation: 'shimmer 2s ease-in-out infinite',
+          }}
+        />
+      </>
+    )}
+
+    {/* Crown emoji + label */}
+    <div className="flex flex-col items-center gap-1">
+      <span
+        className="text-2xl"
+        style={
+          !loading && crown.entity
+            ? { filter: 'drop-shadow(0 0 8px rgba(255,200,0,0.4))' }
+            : undefined
+        }
+      >
+        {crown.emoji}
+      </span>
+      <span className="font-bold uppercase tracking-wider text-text-quaternary typo-caption1">
+        {crown.label}
+      </span>
+    </div>
+
+    {/* Tool info */}
+    <div className="flex h-8 items-center gap-2">
+      {loading ? (
+        <>
+          <Placeholder className="h-8 w-8 shrink-0 rounded-8" />
+          <Placeholder className="h-5 w-20" />
+        </>
+      ) : (
+        <>
+          <img
+            src={crown.entity?.logo}
+            alt={crown.entity?.name}
+            className="h-8 w-8 shrink-0 rounded-8 bg-surface-float object-cover"
+          />
+          <span className="font-bold text-text-primary typo-title3">
+            {crown.entity?.name}
+          </span>
+        </>
+      )}
+    </div>
+
+    {/* Stat line */}
+    <div className="flex h-5 items-center">
+      {loading ? (
+        <Placeholder className="h-4 w-16" />
+      ) : (
+        <span className="font-bold text-text-secondary typo-callout">
+          {crown.stat}
+        </span>
+      )}
+    </div>
+  </div>
+);
+
+export const ArenaCrownCards = ({
+  crowns,
+  loading,
+}: ArenaCrownCardsProps): ReactElement => (
+  <div className="flex gap-3 overflow-x-auto pb-2 tablet:grid tablet:grid-cols-5 tablet:overflow-visible">
+    {crowns.map((crown) => (
+      <CrownCard key={crown.type} crown={crown} loading={loading} />
+    ))}
+  </div>
+);
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..8c9d2cd133
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -0,0 +1,233 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import type { SentimentAnnotation, SentimentHighlightItem } from './types';
+import { stripTcoLinks, formatTimeAgo } from './ArenaLiveTicker';
+
+const decodeHtmlEntities = (text: string): string => {
+  const textarea =
+    typeof document !== 'undefined' && document.createElement('textarea');
+  if (!textarea) {
+    return text
+      .replace(/&amp;/g, '&')
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&quot;/g, '"')
+      .replace(/&#39;/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 => (
+  <div
+    className={classNames(
+      'animate-pulse rounded-8 bg-surface-float',
+      className,
+    )}
+  />
+);
+
+const SentimentPill = ({
+  sentiment,
+}: {
+  sentiment: SentimentAnnotation;
+}): ReactElement => {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-8 bg-surface-float px-2 py-0.5 leading-none text-text-secondary typo-caption2">
+      <span
+        className={classNames(
+          'inline-block h-1.5 w-1.5 shrink-0 rounded-full',
+          getSentimentColor(sentiment.score),
+        )}
+      />
+      <span className="capitalize">{sentiment.entity.replace(/_/g, ' ')}</span>
+    </span>
+  );
+};
+
+const AuthorAvatar = ({
+  author,
+}: {
+  author?: SentimentHighlightItem['author'];
+}): ReactElement => {
+  if (author?.avatarUrl) {
+    return (
+      <img
+        src={author.avatarUrl}
+        alt={author.name ?? author.handle ?? ''}
+        className="h-8 w-8 rounded-full bg-surface-float object-cover"
+      />
+    );
+  }
+
+  const initials = (author?.name ?? author?.handle ?? '?')
+    .split(' ')
+    .map((w) => w[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-surface-tertiary text-text-tertiary typo-caption2">
+      {initials}
+    </div>
+  );
+};
+
+const HighlightCard = ({
+  item,
+}: {
+  item: SentimentHighlightItem;
+}): ReactElement => {
+  const cleanText = decodeHtmlEntities(stripTcoLinks(item.text));
+
+  return (
+    <div className="flex gap-3 px-4 py-3">
+      <AuthorAvatar author={item.author} />
+      <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+        {/* Author info */}
+        <div className="flex min-w-0 items-center gap-1.5">
+          {item.author?.name && (
+            <span className="shrink truncate font-bold text-text-primary typo-caption1">
+              {item.author.name}
+            </span>
+          )}
+          {item.author?.handle && (
+            <span className="shrink truncate text-text-quaternary typo-caption2">
+              @{item.author.handle}
+            </span>
+          )}
+          <span className="shrink-0 text-text-disabled typo-caption2">
+            &middot; {formatTimeAgo(item.createdAt)}
+          </span>
+        </div>
+
+        {/* Full text */}
+        <p className="break-words whitespace-pre-wrap text-text-secondary typo-footnote">
+          {cleanText}
+        </p>
+
+        {/* Sentiment pills */}
+        {item.sentiments.length > 0 && (
+          <div className="flex flex-wrap gap-1.5">
+            {item.sentiments.map((s) => (
+              <SentimentPill key={s.entity} sentiment={s} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const PlaceholderCard = (): ReactElement => (
+  <div className="flex gap-3 px-4 py-3">
+    <Placeholder className="h-8 w-8 shrink-0 rounded-full" />
+    <div className="flex flex-1 flex-col gap-1.5">
+      <div className="flex items-center gap-1.5">
+        <Placeholder className="h-3 w-16" />
+        <Placeholder className="h-3 w-12" />
+      </div>
+      <Placeholder className="h-10 w-full" />
+      <div className="flex gap-1.5">
+        <Placeholder className="h-5 w-16 rounded-8" />
+        <Placeholder className="h-5 w-14 rounded-8" />
+      </div>
+    </div>
+  </div>
+);
+
+interface ArenaHighlightsFeedProps {
+  items: SentimentHighlightItem[];
+  loading?: boolean;
+}
+
+export const ArenaHighlightsFeed = ({
+  items,
+  loading,
+}: ArenaHighlightsFeedProps): ReactElement => {
+  const [visibleItems, setVisibleItems] = useState<SentimentHighlightItem[]>(
+    [],
+  );
+  const [pendingItems, setPendingItems] = useState<SentimentHighlightItem[]>(
+    [],
+  );
+  const initializedRef = useRef(false);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (items.length === 0) {
+      return;
+    }
+
+    // First load — show everything
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+      setVisibleItems(items);
+      return;
+    }
+
+    // Subsequent updates — find new items not in visible set
+    const visibleIds = new Set(visibleItems.map((i) => i.externalItemId));
+    const newItems = items.filter((i) => !visibleIds.has(i.externalItemId));
+    if (newItems.length > 0) {
+      setPendingItems((prev) => [...newItems, ...prev]);
+    }
+  }, [items]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const showPending = (): void => {
+    setVisibleItems((prev) => [...pendingItems, ...prev]);
+    setPendingItems([]);
+    scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
+      {/* eslint-disable-next-line react/no-danger */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `@keyframes slide-down{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}`,
+        }}
+      />
+      {/* New posts badge — floats over feed */}
+      {!loading && pendingItems.length > 0 && (
+        <div className="pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center">
+          <button
+            type="button"
+            onClick={showPending}
+            className="pointer-events-auto rounded-12 bg-accent-cabbage-default px-4 py-1.5 font-bold text-white shadow-2 transition-transform typo-caption1 hover:scale-105 active:scale-95"
+            style={{ animation: 'slide-down 0.3s ease-out' }}
+          >
+            &#x2191; +{pendingItems.length} new post
+            {pendingItems.length !== 1 ? 's' : ''}
+          </button>
+        </div>
+      )}
+
+      <div
+        ref={scrollRef}
+        className="slim-scrollbar flex min-h-0 flex-1 flex-col divide-y divide-border-subtlest-tertiary overflow-y-auto"
+      >
+        {loading
+          ? Array.from({ length: 4 }).map((_, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <PlaceholderCard key={i} />
+            ))
+          : visibleItems.map((item) => (
+              <HighlightCard key={item.externalItemId} item={item} />
+            ))}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx b/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
new file mode 100644
index 0000000000..99dd19d041
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
@@ -0,0 +1,145 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { SentimentHighlightItem } from './types';
+
+const SCROLL_SPEED = 0.5;
+
+export const stripTcoLinks = (text: string): string =>
+  text.replace(/https?:\/\/t\.co\/\S+/g, '').trim();
+
+export const formatTimeAgo = (createdAt: string): string => {
+  const diffMs = Date.now() - new Date(createdAt).getTime();
+  const diffSeconds = Math.floor(diffMs / 1000);
+  if (diffSeconds < 60) {
+    return `${diffSeconds}s ago`;
+  }
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  if (diffMinutes < 60) {
+    return `${diffMinutes}m ago`;
+  }
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  }
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}d ago`;
+};
+
+const getSentiment = (
+  item: SentimentHighlightItem,
+): 'positive' | 'negative' | 'neutral' => {
+  if (item.sentiments.length === 0) {
+    return 'neutral';
+  }
+  const avgScore =
+    item.sentiments.reduce((sum, s) => sum + s.score, 0) /
+    item.sentiments.length;
+  if (avgScore > 0.2) {
+    return 'positive';
+  }
+  if (avgScore < -0.2) {
+    return 'negative';
+  }
+  return 'neutral';
+};
+
+const SENTIMENT_DOT: Record<string, string> = {
+  positive: 'bg-accent-avocado-default',
+  negative: 'bg-accent-ketchup-default',
+  neutral: 'bg-accent-cheese-default',
+};
+
+const TickerItemView = ({
+  item,
+}: {
+  item: SentimentHighlightItem;
+}): ReactElement => {
+  const sentiment = getSentiment(item);
+  const cleanText = stripTcoLinks(item.text);
+
+  return (
+    <div className="flex shrink-0 items-center gap-2 whitespace-nowrap">
+      <span
+        className={`inline-block h-1.5 w-1.5 rounded-full ${SENTIMENT_DOT[sentiment]}`}
+      />
+      <span className="max-w-xs truncate text-text-secondary typo-caption2">
+        {cleanText}
+      </span>
+      {item.author?.handle && (
+        <span className="text-text-quaternary typo-caption2">
+          — @{item.author.handle}
+        </span>
+      )}
+      <span className="text-text-disabled typo-caption2">
+        {formatTimeAgo(item.createdAt)}
+      </span>
+    </div>
+  );
+};
+
+interface ArenaLiveTickerProps {
+  items: SentimentHighlightItem[];
+}
+
+export const ArenaLiveTicker = ({
+  items,
+}: ArenaLiveTickerProps): ReactElement | null => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const offsetRef = useRef(0);
+  const rafRef = useRef<number>();
+
+  const tick = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) {
+      rafRef.current = requestAnimationFrame(tick);
+      return;
+    }
+
+    offsetRef.current += SCROLL_SPEED;
+
+    const halfWidth = el.scrollWidth / 2;
+    if (halfWidth > 0 && offsetRef.current >= halfWidth) {
+      offsetRef.current -= halfWidth;
+    }
+
+    el.style.transform = `translateX(-${offsetRef.current}px)`;
+    rafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  useEffect(() => {
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [tick]);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="relative overflow-hidden rounded-12 border border-border-subtlest-tertiary bg-surface-float">
+      <div className="pointer-events-none absolute left-0 top-0 z-1 h-full w-8 bg-gradient-to-r from-surface-float to-transparent" />
+      <div className="pointer-events-none absolute right-0 top-0 z-1 h-full w-8 bg-gradient-to-l from-surface-float to-transparent" />
+
+      <div className="flex items-center gap-4 overflow-hidden px-4 py-2">
+        <div
+          ref={scrollRef}
+          className="flex items-center gap-6 will-change-transform"
+        >
+          {items.map((item) => (
+            <TickerItemView key={item.externalItemId} item={item} />
+          ))}
+          {items.map((item) => (
+            <TickerItemView
+              key={`dup-${item.externalItemId}`}
+              item={item}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
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..c3a52534ad
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -0,0 +1,183 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { ArenaTab } from './types';
+import { ARENA_TABS } from './config';
+import { computeRankings, computeCrowns, formatVolume } from './dindex';
+import { ArenaCrownCards } from './ArenaCrownCards';
+import { ArenaRankings } from './ArenaRankings';
+import { ArenaHighlightsFeed } from './ArenaHighlightsFeed';
+import { ArenaAnimatedCounter } from './ArenaAnimatedCounter';
+import { arenaOptions } from './queries';
+
+interface ArenaPageProps {
+  initialTab?: ArenaTab;
+  onTabChange?: (tab: ArenaTab) => void;
+}
+
+const LiveIndicator = ({
+  mentionsPerHour,
+}: {
+  mentionsPerHour: number;
+}): ReactElement => (
+  <div className="flex items-center gap-3">
+    <div className="flex items-center gap-1.5">
+      <span className="inline-block h-2 w-2 animate-scale-down-pulse rounded-full bg-accent-avocado-default shadow-[0_0_6px_var(--theme-accent-avocado-default)]" />
+      <span className="text-accent-avocado-default typo-caption2">Live</span>
+    </div>
+    {mentionsPerHour > 0 && (
+      <div className="flex items-center gap-1 text-text-quaternary typo-caption2">
+        <ArenaAnimatedCounter
+          value={mentionsPerHour}
+          format={formatVolume}
+          className="tabular-nums text-text-tertiary"
+        />
+        <span>/hr</span>
+      </div>
+    )}
+  </div>
+);
+
+export const ArenaPage = ({
+  initialTab = 'coding-agents',
+  onTabChange,
+}: ArenaPageProps): ReactElement => {
+  const [activeTab, setActiveTab] = useState<ArenaTab>(initialTab);
+  const queryClient = useQueryClient();
+
+  const { data, isFetching } = useQuery(arenaOptions({ groupId: activeTab }));
+
+  const timeSeries = data?.sentimentTimeSeries;
+
+  const rankings = useMemo(
+    () =>
+      timeSeries
+        ? computeRankings(
+            timeSeries.entities.nodes,
+            timeSeries.resolutionSeconds,
+            activeTab,
+          )
+        : [],
+    [timeSeries, activeTab],
+  );
+
+  const crowns = useMemo(() => computeCrowns(rankings), [rankings]);
+
+  // Total mentions per hour across all tools
+  const mentionsPerHour = useMemo(() => {
+    const total = rankings.reduce((sum, t) => sum + t.volume24h, 0);
+    return Math.round(total / 24);
+  }, [rankings]);
+
+  const loading = isFetching && !data;
+
+  const handleTabChange = (tab: ArenaTab): void => {
+    setActiveTab(tab);
+    onTabChange?.(tab);
+  };
+
+  return (
+    <div className="relative mx-auto flex w-full max-w-6xl flex-col">
+      {/* Animated ambient glows that drift */}
+      <div
+        className="bg-accent-cabbage-default/10 pointer-events-none absolute -left-32 -top-32 h-96 w-96 rounded-full blur-3xl"
+        style={{
+          animation: 'float-slow 20s ease-in-out infinite',
+        }}
+      />
+      <div
+        className="bg-accent-onion-default/[0.08] pointer-events-none absolute -right-32 -top-16 h-64 w-64 rounded-full blur-3xl"
+        style={{
+          animation: 'float-slow 25s ease-in-out infinite reverse',
+        }}
+      />
+      <div
+        className="bg-accent-water-default/[0.06] pointer-events-none absolute -bottom-20 left-1/3 h-48 w-48 rounded-full blur-3xl"
+        style={{
+          animation: 'float-slow 18s ease-in-out infinite 5s',
+        }}
+      />
+
+      {/* Inline keyframes for custom animations */}
+      <style
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes float-slow {
+              0%, 100% { transform: translate(0, 0) scale(1); }
+              33% { transform: translate(15px, -10px) scale(1.05); }
+              66% { transform: translate(-10px, 8px) scale(0.95); }
+            }
+            @keyframes shimmer {
+              0% { background-position: 200% 0; }
+              100% { background-position: -200% 0; }
+            }
+          `,
+        }}
+      />
+
+      {/* Header */}
+      <header className="px-4 pt-10 laptop:px-0">
+        <div className="flex items-start justify-between">
+          <div className="flex flex-col gap-1">
+            <h1 className="flex items-center gap-2 font-bold text-text-primary typo-title1">
+              <span aria-hidden="true">&#x2694;&#xFE0F;</span>
+              The Arena
+            </h1>
+            <p className="text-text-tertiary typo-footnote">
+              Real-time developer sentiment &middot; Powered by the D-Index
+            </p>
+          </div>
+          <LiveIndicator mentionsPerHour={mentionsPerHour} />
+        </div>
+      </header>
+
+      {/* Tab switcher */}
+      <nav className="mt-4 flex gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-0">
+        {ARENA_TABS.map((tab) => (
+          <button
+            key={tab.value}
+            type="button"
+            onClick={() => handleTabChange(tab.value)}
+            className={classNames(
+              'relative rounded-t-12 px-4 py-2.5 font-bold transition-colors typo-callout',
+              activeTab === tab.value
+                ? 'bg-surface-float text-text-primary'
+                : 'text-text-tertiary hover:text-text-secondary',
+            )}
+          >
+            {tab.label}
+            {activeTab === tab.value && (
+              <div className="absolute bottom-0 left-1/2 h-0.5 w-12 -translate-x-1/2 rounded-4 bg-text-primary" />
+            )}
+          </button>
+        ))}
+      </nav>
+
+      {/* Content */}
+      <div className="flex flex-col gap-6 px-4 py-6 laptop:px-0">
+        {/* Crown cards — full width */}
+        <section>
+          <ArenaCrownCards crowns={crowns} loading={loading} />
+        </section>
+
+        {/* Side-by-side: Rankings + Highlights feed */}
+        <div className="flex flex-col gap-6 laptop:grid laptop:grid-cols-[3fr_2fr]">
+          <section className="min-w-0">
+            <ArenaRankings tools={rankings} loading={loading} />
+          </section>
+          <aside className="relative">
+            <div className="laptop:absolute laptop:inset-0">
+              <ArenaHighlightsFeed
+                key={activeTab}
+                items={data?.sentimentHighlights?.items ?? []}
+                loading={loading}
+              />
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+};
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..4a75845d41
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -0,0 +1,308 @@
+import type { ReactElement } from 'react';
+import React 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 './dindex';
+
+interface ArenaRankingsProps {
+  tools: RankedTool[];
+  loading?: boolean;
+}
+
+const RANK_MEDALS = ['\uD83E\uDD47', '\uD83E\uDD48', '\uD83E\uDD49'];
+
+const Placeholder = ({ className }: { className?: string }): ReactElement => (
+  <div
+    className={classNames(
+      'animate-pulse rounded-8 bg-surface-float',
+      className,
+    )}
+  />
+);
+
+const getMomentumDisplay = (
+  momentum: number,
+): { text: string; color: string } => {
+  if (momentum > 0) {
+    return {
+      text: `\u25B2 +${momentum}%`,
+      color: 'text-accent-avocado-default',
+    };
+  }
+  if (momentum < 0) {
+    return {
+      text: `\u25BC ${momentum}%`,
+      color: 'text-accent-ketchup-default',
+    };
+  }
+  return { text: '\u2501 0%', color: 'text-text-quaternary' };
+};
+
+const RankingRow = ({
+  tool,
+  rank,
+  loading,
+}: {
+  tool: RankedTool;
+  rank: number;
+  loading?: boolean;
+}): ReactElement => {
+  const momentum = getMomentumDisplay(tool.momentum);
+  const medal = RANK_MEDALS[rank - 1] || '';
+  const isHot = !loading && tool.volume24h > 500;
+
+  return (
+    <div
+      className={classNames(
+        'group relative flex min-h-[52px] items-center gap-3 border-b border-border-subtlest-tertiary px-4 py-3 transition-all duration-500 hover:bg-surface-hover',
+        rank <= 3 && 'bg-surface-float',
+      )}
+      style={{
+        order: rank,
+        transition: 'transform 0.5s ease, background-color 0.3s ease',
+      }}
+    >
+      {/* Activity heat - left border glow */}
+      {isHot && (
+        <div
+          className="absolute bottom-0 left-0 top-0 w-0.5 animate-pulse rounded-full"
+          style={{ backgroundColor: tool.entity.brandColor }}
+        />
+      )}
+
+      {/* Rank */}
+      <div className="flex w-10 shrink-0 items-center justify-center">
+        {medal ? (
+          <span className="text-lg">{medal}</span>
+        ) : (
+          <span className="font-bold text-text-quaternary typo-callout">
+            {rank}
+          </span>
+        )}
+      </div>
+
+      {/* Tool info */}
+      <div className="flex w-[140px] shrink-0 items-center gap-2.5">
+        {loading ? (
+          <>
+            <Placeholder className="h-7 w-7 shrink-0 rounded-8" />
+            <Placeholder className="h-4 w-20" />
+          </>
+        ) : (
+          <>
+            <img
+              src={tool.entity.logo}
+              alt={tool.entity.name}
+              className="h-7 w-7 shrink-0 rounded-8 bg-surface-float object-cover"
+            />
+            <span className="truncate font-bold text-text-primary typo-callout">
+              {tool.entity.name}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* D-Index */}
+      <div className="flex min-w-[80px] shrink-0 items-center">
+        {loading ? (
+          <Placeholder className="h-5 w-12" />
+        ) : (
+          <ArenaAnimatedCounter
+            value={tool.dIndex}
+            format={formatDIndex}
+            className="font-bold tabular-nums text-text-primary typo-title3"
+          />
+        )}
+      </div>
+
+      {/* Sentiment */}
+      <div className="hidden min-w-[100px] shrink-0 items-center tablet:flex">
+        {loading ? (
+          <Placeholder className="h-4 w-20" />
+        ) : (
+          <ArenaSentimentBar value={tool.sentimentDisplay} />
+        )}
+      </div>
+
+      {/* Momentum */}
+      <div className="hidden min-w-[80px] shrink-0 items-center laptop:flex">
+        {loading ? (
+          <Placeholder className="h-4 w-14" />
+        ) : (
+          <span
+            className={classNames('font-bold typo-caption1', momentum.color)}
+          >
+            {momentum.text}
+          </span>
+        )}
+      </div>
+
+      {/* Volume */}
+      <div className="hidden min-w-[60px] shrink-0 items-center laptop:flex">
+        {loading ? (
+          <Placeholder className="h-4 w-10" />
+        ) : (
+          <span className="text-text-tertiary typo-caption1">
+            {formatVolume(tool.volume24h)}
+          </span>
+        )}
+      </div>
+
+      {/* Sparkline */}
+      <div className="ml-auto hidden items-center laptop:flex">
+        {loading ? (
+          <Placeholder className="h-6 w-16" />
+        ) : (
+          <ArenaSparkline data={tool.sparkline} color={tool.entity.brandColor} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const EmergingRow = ({
+  tool,
+  loading,
+}: {
+  tool: RankedTool;
+  loading?: boolean;
+}): ReactElement => (
+  <div className="flex items-center gap-3 px-4 py-2.5 opacity-50">
+    <div className="w-10 shrink-0" />
+    <div className="flex items-center gap-2.5">
+      {loading ? (
+        <>
+          <Placeholder className="h-6 w-6 rounded-8" />
+          <Placeholder className="h-4 w-20" />
+        </>
+      ) : (
+        <>
+          <img
+            src={tool.entity.logo}
+            alt={tool.entity.name}
+            className="h-6 w-6 rounded-8 bg-surface-float object-cover opacity-60"
+          />
+          <span className="text-text-tertiary typo-callout">
+            {tool.entity.name}
+          </span>
+        </>
+      )}
+    </div>
+    {!loading && (
+      <span className="ml-auto text-text-disabled typo-caption2">
+        Not enough data yet
+      </span>
+    )}
+  </div>
+);
+
+const PLACEHOLDER_ROW_COUNT = 6;
+
+const PlaceholderRow = ({ rank }: { rank: number }): ReactElement => (
+  <div
+    className={classNames(
+      'flex min-h-[52px] items-center gap-3 border-b border-border-subtlest-tertiary px-4 py-3',
+      rank <= 3 && 'bg-surface-float',
+    )}
+  >
+    <div className="flex w-10 shrink-0 items-center justify-center">
+      <Placeholder className="h-5 w-5" />
+    </div>
+    <div className="flex w-[140px] shrink-0 items-center gap-2.5">
+      <Placeholder className="h-7 w-7 shrink-0 rounded-8" />
+      <Placeholder className="h-4 w-20" />
+    </div>
+    <div className="min-w-[80px] shrink-0">
+      <Placeholder className="h-5 w-12" />
+    </div>
+    <div className="hidden min-w-[100px] shrink-0 tablet:block">
+      <Placeholder className="h-4 w-20" />
+    </div>
+    <div className="hidden min-w-[80px] shrink-0 laptop:block">
+      <Placeholder className="h-4 w-14" />
+    </div>
+    <div className="hidden min-w-[60px] shrink-0 laptop:block">
+      <Placeholder className="h-4 w-10" />
+    </div>
+    <div className="ml-auto hidden laptop:block">
+      <Placeholder className="h-6 w-16" />
+    </div>
+  </div>
+);
+
+export const ArenaRankings = ({
+  tools,
+  loading,
+}: ArenaRankingsProps): ReactElement => {
+  const established = tools.filter((t) => !t.isEmerging);
+  const emerging = tools.filter((t) => t.isEmerging);
+  const showPlaceholderRows = loading && established.length === 0;
+
+  return (
+    <div className="overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
+      {/* Header */}
+      <div className="flex items-center gap-3 border-b border-border-subtlest-secondary px-4 py-2.5">
+        <span className="w-10 shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+          #
+        </span>
+        <span className="w-[140px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+          Tool
+        </span>
+        <span className="min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+          D-Index
+        </span>
+        <span className="hidden min-w-[100px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 tablet:block">
+          Sentiment
+        </span>
+        <span className="hidden min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
+          Momentum
+        </span>
+        <span className="hidden min-w-[60px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
+          24h Vol
+        </span>
+        <span className="ml-auto hidden font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
+          7d Trend
+        </span>
+      </div>
+
+      {/* Ranked rows */}
+      <div className="flex flex-col">
+        {showPlaceholderRows
+          ? Array.from({ length: PLACEHOLDER_ROW_COUNT }).map((_, i) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <PlaceholderRow key={i} rank={i + 1} />
+            ))
+          : established.map((tool, idx) => (
+              <RankingRow
+                key={tool.entity.entity}
+                tool={tool}
+                rank={idx + 1}
+                loading={loading}
+              />
+            ))}
+      </div>
+
+      {/* Emerging section */}
+      {emerging.length > 0 && (
+        <>
+          <div className="flex items-center gap-3 border-t border-border-subtlest-secondary px-4 py-2">
+            <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+              Emerging
+            </span>
+            <div className="h-px flex-1 bg-border-subtlest-tertiary" />
+          </div>
+          {emerging.map((tool) => (
+            <EmergingRow
+              key={tool.entity.entity}
+              tool={tool}
+              loading={loading}
+            />
+          ))}
+        </>
+      )}
+    </div>
+  );
+};
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..7084b132df
--- /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 > 70) {
+    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 > 70) {
+    return 'text-accent-avocado-default';
+  }
+  if (value >= 40) {
+    return 'text-accent-cheese-default';
+  }
+  return 'text-accent-ketchup-default';
+};
+
+export const ArenaSentimentBar = ({
+  value,
+}: ArenaSentimentBarProps): ReactElement => (
+  <div className="flex items-center gap-2">
+    <div className="h-1.5 w-16 overflow-hidden rounded-4 bg-surface-float">
+      <div
+        className={classNames(
+          'h-full rounded-4 transition-all duration-500',
+          getSentimentColor(value),
+        )}
+        style={{ width: `${value}%` }}
+      />
+    </div>
+    <span
+      className={classNames(
+        'font-bold typo-caption1',
+        getSentimentTextColor(value),
+      )}
+    >
+      {value}
+    </span>
+  </div>
+);
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..0db7d1f8e2
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
@@ -0,0 +1,81 @@
+import type { ReactElement } from 'react';
+import React 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-accent-cabbage-default)';
+  const gradientId = `sparkGrad-${data.join('-').slice(0, 20)}`;
+
+  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 (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      className={className}
+    >
+      <defs>
+        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor={strokeColor} stopOpacity={0.25} />
+          <stop offset="100%" stopColor={strokeColor} stopOpacity={0} />
+        </linearGradient>
+      </defs>
+      <path d={areaD} fill={`url(#${gradientId})`} />
+      <path
+        d={pathD}
+        fill="none"
+        stroke={strokeColor}
+        strokeWidth={1.5}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* Breathing cursor dot at the end */}
+      <circle cx={lastPoint.x} cy={lastPoint.y} r={2.5} fill={strokeColor}>
+        <animate
+          attributeName="r"
+          values="2;3.5;2"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="opacity"
+          values="1;0.5;1"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
+  );
+};
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..24e5686242
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/config.ts
@@ -0,0 +1,166 @@
+import type { ArenaEntity, ArenaGroupId, ArenaTab } from './types';
+
+const CODING_AGENTS: ArenaEntity[] = [
+  {
+    entity: 'cursor',
+    name: 'Cursor',
+    slug: 'cursor',
+    logo: 'https://www.cursor.com/apple-touch-icon.png',
+    brandColor: '#00D4AA',
+  },
+  {
+    entity: 'copilot',
+    name: 'Copilot',
+    slug: 'copilot',
+    logo: 'https://github.com/apple-touch-icon.png',
+    brandColor: '#6366F1',
+  },
+  {
+    entity: 'windsurf',
+    name: 'Windsurf',
+    slug: 'windsurf',
+    logo: 'https://windsurf.com/favicon_192.png',
+    brandColor: '#06B6D4',
+  },
+  {
+    entity: 'cline',
+    name: 'Cline',
+    slug: 'cline',
+    logo: 'https://raw.githubusercontent.com/cline/cline/main/assets/icons/icon.png',
+    brandColor: '#F59E0B',
+  },
+  {
+    entity: 'claude_code',
+    name: 'Claude Code',
+    slug: 'claude-code',
+    logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
+    brandColor: '#D97706',
+  },
+  {
+    entity: 'codex',
+    name: 'Codex',
+    slug: 'codex',
+    logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
+    brandColor: '#10B981',
+  },
+  {
+    entity: 'aider',
+    name: 'Aider',
+    slug: 'aider',
+    logo: 'https://aider.chat/assets/logo.svg',
+    brandColor: '#8B5CF6',
+  },
+  {
+    entity: 'opencode',
+    name: 'OpenCode',
+    slug: 'opencode',
+    logo: 'https://opencode.ai/favicon.ico',
+    brandColor: '#EC4899',
+  },
+  {
+    entity: 'antigravity',
+    name: 'Antigravity',
+    slug: 'antigravity',
+    logo: 'https://antigravity.google/favicon.ico',
+    brandColor: '#EF4444',
+  },
+  {
+    entity: 'kilocode',
+    name: 'Kilocode',
+    slug: 'kilocode',
+    logo: 'https://kilocode.ai/favicon.ico',
+    brandColor: '#14B8A6',
+  },
+];
+
+const LLMS: ArenaEntity[] = [
+  {
+    entity: 'claude_sonnet',
+    name: 'Claude Sonnet',
+    slug: 'claude-sonnet',
+    logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
+    brandColor: '#D97706',
+  },
+  {
+    entity: 'claude_opus',
+    name: 'Claude Opus',
+    slug: 'claude-opus',
+    logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
+    brandColor: '#D97706',
+  },
+  {
+    entity: 'gpt_5',
+    name: 'GPT-5',
+    slug: 'gpt-5',
+    logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
+    brandColor: '#10B981',
+  },
+  {
+    entity: 'gpt_codex',
+    name: 'GPT Codex',
+    slug: 'gpt-codex',
+    logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
+    brandColor: '#10B981',
+  },
+  {
+    entity: 'deepseek',
+    name: 'DeepSeek',
+    slug: 'deepseek',
+    logo: 'https://deepseek.com/favicon.ico',
+    brandColor: '#3B82F6',
+  },
+  {
+    entity: 'gemini',
+    name: 'Gemini',
+    slug: 'gemini',
+    logo: 'https://www.gstatic.com/lamda/images/gemini_favicon_f069958c85030456e93de685481c559f160ea06b.png',
+    brandColor: '#4285F4',
+  },
+  {
+    entity: 'llama',
+    name: 'Llama',
+    slug: 'llama',
+    logo: 'https://ai.meta.com/favicon.ico',
+    brandColor: '#6366F1',
+  },
+  {
+    entity: 'qwen',
+    name: 'Qwen',
+    slug: 'qwen',
+    logo: 'https://chat.qwen.ai/favicon.ico',
+    brandColor: '#7C3AED',
+  },
+  {
+    entity: 'kimi',
+    name: 'Kimi',
+    slug: 'kimi',
+    logo: 'https://statics.moonshot.cn/kimi-chat/favicon.ico',
+    brandColor: '#0EA5E9',
+  },
+];
+
+const ENTITIES_BY_GROUP: Record<ArenaGroupId, ArenaEntity[]> = {
+  'coding-agents': CODING_AGENTS,
+  llms: LLMS,
+};
+
+export const getEntitiesByGroup = (groupId: ArenaGroupId): ArenaEntity[] =>
+  ENTITIES_BY_GROUP[groupId];
+
+export const getEntityByKey = (
+  groupId: ArenaGroupId,
+  entityKey: string,
+): ArenaEntity | undefined =>
+  ENTITIES_BY_GROUP[groupId].find((e) => e.entity === entityKey);
+
+export const ARENA_TABS: { label: string; value: ArenaTab }[] = [
+  { label: 'Coding Agents', value: 'coding-agents' },
+  { label: 'LLMs', value: 'llms' },
+];
+
+export const ARENA_GROUP_IDS: Record<ArenaGroupId, string> = {
+  'coding-agents': '385404b4-f0f4-4e81-a338-bdca851eca31',
+  llms: '970ab2c9-f845-4822-82f0-02169713b814',
+};
+
+export const EMERGING_THRESHOLD = 50;
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/dindex.ts
new file mode 100644
index 0000000000..e5ec4c943b
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/dindex.ts
@@ -0,0 +1,332 @@
+import type {
+  SentimentTimeSeriesNode,
+  ArenaGroupId,
+  CrownData,
+  RankedTool,
+} from './types';
+import {
+  getEntitiesByGroup,
+  getEntityByKey,
+  EMERGING_THRESHOLD,
+} from './config';
+
+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,
+  _resolutionSeconds: number,
+): 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 getPrevious24hWindow = (
+  node: SentimentTimeSeriesNode,
+  _resolutionSeconds: number,
+): WindowData => {
+  const span = getWindowSpan(node);
+  if (span <= SECONDS_PER_DAY) {
+    return { volume: 0, sentimentScore: 0 };
+  }
+
+  const cutoff = Math.max(0, span - SECONDS_PER_DAY);
+  const prevStart = Math.max(0, cutoff - SECONDS_PER_DAY);
+  return sumWindowByTime(node, prevStart, cutoff);
+};
+
+const SENTIMENT_EXPONENT = 1.7;
+
+const computeDIndex = (volume: number, sentimentScore: number): number =>
+  volume * ((sentimentScore + 1) / 2) ** SENTIMENT_EXPONENT;
+
+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;
+};
+
+/**
+ * Controversy = totalVolume × sentimentVariance across hourly buckets.
+ * High variance means scores swing between positive and negative,
+ * indicating genuine polarization rather than bland neutrality.
+ */
+const computeControversy = (
+  node: SentimentTimeSeriesNode,
+  fromOffset: number,
+  toOffset: number,
+): number => {
+  const bucketScores: { score: number; volume: number }[] = [];
+
+  for (let i = 0; i < node.timestamps.length; i += 1) {
+    const ts = node.timestamps[i];
+    if (ts >= fromOffset && ts < toOffset && node.volume[i] > 0) {
+      bucketScores.push({ score: node.scores[i], volume: node.volume[i] });
+    }
+  }
+
+  if (bucketScores.length < 2) {
+    return 0;
+  }
+
+  const totalVolume = bucketScores.reduce((sum, b) => sum + b.volume, 0);
+  const weightedMean =
+    bucketScores.reduce((sum, b) => sum + b.score * b.volume, 0) / totalVolume;
+  const variance =
+    bucketScores.reduce(
+      (sum, b) => sum + b.volume * (b.score - weightedMean) ** 2,
+      0,
+    ) / totalVolume;
+
+  return totalVolume * variance;
+};
+
+/**
+ * Build a sparkline with 7 equal buckets across the available time window.
+ * With a 7d lookback each bucket represents ~1 day.
+ */
+const getSparklineData = (
+  node: SentimentTimeSeriesNode,
+  _resolutionSeconds: number,
+): number[] => {
+  const span = getWindowSpan(node);
+  if (span === 0) {
+    return [0, 0, 0, 0, 0, 0, 0];
+  }
+
+  const bucketSize = span / 7;
+  return Array.from({ length: 7 }, (_, idx) => {
+    const from = idx * bucketSize;
+    const to = (idx + 1) * bucketSize;
+    const window = sumWindowByTime(node, from, to);
+    return computeDIndex(window.volume, window.sentimentScore);
+  });
+};
+
+export const computeRankings = (
+  nodes: SentimentTimeSeriesNode[],
+  resolutionSeconds: number,
+  groupId: ArenaGroupId,
+): RankedTool[] => {
+  const tools: RankedTool[] = nodes
+    .map((node) => {
+      const entityMeta = getEntityByKey(groupId, node.entity);
+      if (!entityMeta) {
+        return null;
+      }
+
+      const current = getLatest24hWindow(node, resolutionSeconds);
+      const previous = getPrevious24hWindow(node, resolutionSeconds);
+      const dIndex = computeDIndex(current.volume, current.sentimentScore);
+      const prevDIndex = computeDIndex(
+        previous.volume,
+        previous.sentimentScore,
+      );
+
+      const span = getWindowSpan(node);
+      const cutoff24h = Math.max(0, span - SECONDS_PER_DAY);
+
+      return {
+        entity: entityMeta,
+        dIndex: Math.round(dIndex),
+        sentimentDisplay: computeSentimentDisplay(current.sentimentScore),
+        momentum: Math.round(computeMomentum(dIndex, prevDIndex)),
+        volume24h: current.volume,
+        controversyScore: computeControversy(node, cutoff24h, span + 1),
+        sparkline: getSparklineData(node, resolutionSeconds),
+        isEmerging: current.volume < EMERGING_THRESHOLD,
+      };
+    })
+    .filter((t): t is RankedTool => t !== null);
+
+  // Include entities with no data as emerging
+  const presentEntities = new Set(tools.map((t) => t.entity.entity));
+  const allEntities = getEntitiesByGroup(groupId);
+  allEntities.forEach((entity) => {
+    if (!presentEntities.has(entity.entity)) {
+      tools.push({
+        entity,
+        dIndex: 0,
+        sentimentDisplay: 50,
+        momentum: 0,
+        volume24h: 0,
+        controversyScore: 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,
+  {
+    emoji: string;
+    label: string;
+    thresholds: CrownThresholds;
+    getValue: (t: RankedTool) => number;
+    formatStat: (t: RankedTool) => string;
+  }
+> = {
+  'developers-choice': {
+    emoji: '\uD83C\uDFC6',
+    label: "Developer's Choice",
+    thresholds: { minVolume: 10 },
+    getValue: (t) => t.dIndex,
+    formatStat: (t) => `${formatDIndex(t.dIndex)} D-Index`,
+  },
+  'most-loved': {
+    emoji: '\uD83D\uDC9C',
+    label: 'Most Loved',
+    thresholds: { minVolume: 10 },
+    getValue: (t) => t.sentimentDisplay,
+    formatStat: (t) => `${t.sentimentDisplay} / 100`,
+  },
+  'fastest-rising': {
+    emoji: '\uD83D\uDE80',
+    label: 'Fastest Rising',
+    thresholds: { minVolume: 5 },
+    getValue: (t) => t.momentum,
+    formatStat: (t) =>
+      `${t.momentum > 0 ? '\u25B2' : '\u25BC'} ${t.momentum > 0 ? '+' : ''}${
+        t.momentum
+      }% vs prior 24h`,
+  },
+  'most-discussed': {
+    emoji: '\uD83D\uDCE2',
+    label: 'Most Discussed',
+    thresholds: { minVolume: 0 },
+    getValue: (t) => t.volume24h,
+    formatStat: (t) => `${formatVolume(t.volume24h)} mentions`,
+  },
+  'most-controversial': {
+    emoji: '\uD83D\uDCA5',
+    label: 'Most Controversial',
+    thresholds: { minVolume: 10 },
+    getValue: (t) => t.controversyScore,
+    formatStat: (t) => {
+      const split = t.sentimentDisplay;
+      return `Split: ${split}/${100 - split}`;
+    },
+  },
+};
+
+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,
+        emoji: config.emoji,
+        label: config.label,
+        entity: null,
+        stat: '',
+        heldSince: null,
+      };
+    }
+
+    const winner = eligible.reduce((best, current) =>
+      config.getValue(current) > config.getValue(best) ? current : best,
+    );
+
+    return {
+      type,
+      emoji: config.emoji,
+      label: config.label,
+      entity: winner.entity,
+      stat: config.formatStat(winner),
+      heldSince: Date.now(),
+    };
+  });
+};
diff --git a/packages/shared/src/features/agents/arena/graphql.ts b/packages/shared/src/features/agents/arena/graphql.ts
new file mode 100644
index 0000000000..035bb27aec
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/graphql.ts
@@ -0,0 +1,62 @@
+import { gql } from 'graphql-request';
+
+export const ARENA_QUERY = gql`
+  query ArenaData(
+    $groupId: ID!
+    $lookback: String!
+    $resolution: SentimentResolution!
+    $highlightsFirst: Int
+    $highlightsOrderBy: SentimentHighlightsOrderBy
+  ) {
+    sentimentTimeSeries(
+      resolution: $resolution
+      groupId: $groupId
+      lookback: $lookback
+    ) {
+      start
+      resolutionSeconds
+      entities {
+        nodes {
+          entity
+          timestamps
+          scores
+          volume
+        }
+      }
+    }
+    sentimentHighlights(
+      groupId: $groupId
+      first: $highlightsFirst
+      orderBy: $highlightsOrderBy
+    ) {
+      items {
+        provider
+        externalItemId
+        url
+        text
+        author {
+          ... on SentimentAuthorX {
+            id
+            name
+            handle
+            avatarUrl
+          }
+        }
+        metrics {
+          ... on SentimentMetricsX {
+            likeCount
+            replyCount
+            retweetCount
+          }
+        }
+        createdAt
+        sentiments {
+          entity
+          score
+          highlightScore
+        }
+      }
+      cursor
+    }
+  }
+`;
diff --git a/packages/shared/src/features/agents/arena/mockData.ts b/packages/shared/src/features/agents/arena/mockData.ts
new file mode 100644
index 0000000000..67544dc015
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/mockData.ts
@@ -0,0 +1,222 @@
+import type { ArenaGroupId, SentimentTimeSeriesNode } from './types';
+import { getEntitiesByGroup } from './config';
+
+const HOUR_SECONDS = 3600;
+const POINTS_PER_DAY = 24; // 24h / 1h
+const TOTAL_POINTS = POINTS_PER_DAY * 7; // 7d lookback
+
+// Deterministic pseudo-random from seed string (sin-based, no bitwise ops)
+const seedRandom = (seed: string): (() => number) => {
+  let s = Array.from(seed).reduce(
+    (acc, ch) => Math.imul(31, acc) + ch.charCodeAt(0),
+    0,
+  );
+  return () => {
+    s = (s + 1) * 1.0;
+    const x = Math.sin(s * 9301 + 49297) * 233280;
+    return x - Math.floor(x);
+  };
+};
+
+interface EntityProfile {
+  baseVolume: number;
+  baseSentiment: number;
+  volatility: number;
+  trend: number; // positive = growing
+}
+
+const CODING_AGENT_PROFILES: Record<string, EntityProfile> = {
+  cursor: {
+    baseVolume: 25,
+    baseSentiment: 0.74,
+    volatility: 0.15,
+    trend: 0.1,
+  },
+  copilot: {
+    baseVolume: 18,
+    baseSentiment: 0.36,
+    volatility: 0.2,
+    trend: -0.05,
+  },
+  windsurf: {
+    baseVolume: 10,
+    baseSentiment: 0.02,
+    volatility: 0.25,
+    trend: -0.08,
+  },
+  cline: {
+    baseVolume: 7,
+    baseSentiment: 0.45,
+    volatility: 0.18,
+    trend: 0.05,
+  },
+  claude_code: {
+    baseVolume: 20,
+    baseSentiment: 0.55,
+    volatility: 0.2,
+    trend: 0.25,
+  },
+  codex: {
+    baseVolume: 14,
+    baseSentiment: 0.3,
+    volatility: 0.22,
+    trend: 0.15,
+  },
+  aider: {
+    baseVolume: 5,
+    baseSentiment: 0.6,
+    volatility: 0.15,
+    trend: 0.02,
+  },
+  opencode: {
+    baseVolume: 3,
+    baseSentiment: 0.4,
+    volatility: 0.3,
+    trend: 0.1,
+  },
+  antigravity: {
+    baseVolume: 0.3,
+    baseSentiment: 0.2,
+    volatility: 0.4,
+    trend: 0,
+  },
+  kilocode: {
+    baseVolume: 0.2,
+    baseSentiment: 0.3,
+    volatility: 0.3,
+    trend: 0,
+  },
+};
+
+const LLM_PROFILES: Record<string, EntityProfile> = {
+  claude_sonnet: {
+    baseVolume: 22,
+    baseSentiment: 0.65,
+    volatility: 0.15,
+    trend: 0.12,
+  },
+  claude_opus: {
+    baseVolume: 15,
+    baseSentiment: 0.7,
+    volatility: 0.12,
+    trend: 0.08,
+  },
+  gpt_5: {
+    baseVolume: 28,
+    baseSentiment: 0.5,
+    volatility: 0.2,
+    trend: 0.05,
+  },
+  gpt_codex: {
+    baseVolume: 12,
+    baseSentiment: 0.45,
+    volatility: 0.18,
+    trend: 0.1,
+  },
+  deepseek: {
+    baseVolume: 35,
+    baseSentiment: 0.24,
+    volatility: 0.3,
+    trend: -0.1,
+  },
+  gemini: {
+    baseVolume: 20,
+    baseSentiment: 0.4,
+    volatility: 0.2,
+    trend: 0.03,
+  },
+  llama: {
+    baseVolume: 8,
+    baseSentiment: 0.55,
+    volatility: 0.15,
+    trend: 0.02,
+  },
+  qwen: {
+    baseVolume: 6,
+    baseSentiment: 0.5,
+    volatility: 0.2,
+    trend: 0.05,
+  },
+  kimi: {
+    baseVolume: 4,
+    baseSentiment: 0.35,
+    volatility: 0.25,
+    trend: -0.02,
+  },
+};
+
+const PROFILES_BY_GROUP: Record<string, Record<string, EntityProfile>> = {
+  'coding-agents': CODING_AGENT_PROFILES,
+  llms: LLM_PROFILES,
+};
+
+const generateEntityTimeSeries = (
+  entityKey: string,
+  profile: EntityProfile,
+): SentimentTimeSeriesNode => {
+  const rng = seedRandom(entityKey);
+  const now = Math.floor(Date.now() / 1000);
+  const start = now - TOTAL_POINTS * HOUR_SECONDS;
+
+  const timestamps: number[] = [];
+  const scores: number[] = [];
+  const volume: number[] = [];
+
+  Array.from({ length: TOTAL_POINTS }).forEach((_, i) => {
+    const t = start + i * HOUR_SECONDS;
+    const progress = i / TOTAL_POINTS; // 0..1 over 7d
+
+    // Volume with daily cycle (lower at night), trend, and noise
+    const hourOfDay = ((t / 3600) % 24) + 0; // rough hour
+    const dayCycle = 0.5 + 0.5 * Math.sin(((hourOfDay - 6) / 24) * Math.PI * 2);
+    const trendMultiplier = 1 + profile.trend * progress;
+    const noise = 0.5 + rng() * 1.0;
+    const vol = Math.max(
+      0,
+      Math.round(profile.baseVolume * dayCycle * trendMultiplier * noise),
+    );
+
+    // Sentiment with some drift and noise
+    const sentimentNoise = (rng() - 0.5) * profile.volatility * 2;
+    const score = Math.max(
+      -1,
+      Math.min(1, profile.baseSentiment + sentimentNoise),
+    );
+
+    timestamps.push(t);
+    scores.push(Math.round(score * 1000) / 1000);
+    volume.push(vol);
+  });
+
+  return { entity: entityKey, timestamps, scores, volume };
+};
+
+export const generateMockTimeSeriesData = (
+  groupId: ArenaGroupId,
+): {
+  start: string;
+  resolutionSeconds: number;
+  entities: { nodes: SentimentTimeSeriesNode[] };
+} => {
+  const entities = getEntitiesByGroup(groupId);
+  const profiles = PROFILES_BY_GROUP[groupId] || {};
+
+  const nodes = entities.map((e) => {
+    const profile = profiles[e.entity] || {
+      baseVolume: 1,
+      baseSentiment: 0.5,
+      volatility: 0.2,
+      trend: 0,
+    };
+    return generateEntityTimeSeries(e.entity, profile);
+  });
+
+  const now = Math.floor(Date.now() / 1000);
+  const start = now - TOTAL_POINTS * HOUR_SECONDS;
+
+  return {
+    start: new Date(start * 1000).toISOString(),
+    resolutionSeconds: HOUR_SECONDS, // 1h resolution
+    entities: { nodes },
+  };
+};
diff --git a/packages/shared/src/features/agents/arena/queries.ts b/packages/shared/src/features/agents/arena/queries.ts
new file mode 100644
index 0000000000..c153fa97d7
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/queries.ts
@@ -0,0 +1,23 @@
+import { generateQueryKey, RequestKey, StaleTime } from '../../../lib/query';
+import { gqlClient } from '../../../graphql/common';
+import type { ArenaGroupId, ArenaQueryResponse } from './types';
+import { ARENA_QUERY } from './graphql';
+import { ARENA_GROUP_IDS } from './config';
+
+const ARENA_REFETCH_INTERVAL = 60_000;
+
+export const arenaOptions = ({ groupId }: { groupId: ArenaGroupId }) => ({
+  queryKey: generateQueryKey(RequestKey.Arena, undefined, groupId),
+  queryFn: async () => {
+    const res = await gqlClient.request<ArenaQueryResponse>(ARENA_QUERY, {
+      groupId: ARENA_GROUP_IDS[groupId],
+      lookback: '7d',
+      resolution: 'HOUR',
+      highlightsFirst: 50,
+      highlightsOrderBy: 'RECENCY',
+    });
+    return res;
+  },
+  staleTime: StaleTime.Base,
+  refetchInterval: ARENA_REFETCH_INTERVAL,
+});
diff --git a/packages/shared/src/features/agents/arena/types.ts b/packages/shared/src/features/agents/arena/types.ts
new file mode 100644
index 0000000000..53b66a9f86
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/types.ts
@@ -0,0 +1,96 @@
+export type ArenaGroupId = 'coding-agents' | 'llms';
+
+export type ArenaTab = 'coding-agents' | 'llms';
+
+export interface SentimentTimeSeriesNode {
+  entity: string;
+  timestamps: number[];
+  scores: number[];
+  volume: number[];
+}
+
+export interface SentimentTimeSeries {
+  start: string;
+  resolutionSeconds: number;
+  entities: {
+    nodes: SentimentTimeSeriesNode[];
+  };
+}
+
+export interface ArenaQueryResponse {
+  sentimentTimeSeries: SentimentTimeSeries;
+  sentimentHighlights: SentimentHighlightsConnection;
+}
+
+export interface ArenaEntity {
+  entity: string;
+  name: string;
+  slug: string;
+  logo: string;
+  brandColor: string;
+}
+
+export type CrownType =
+  | 'developers-choice'
+  | 'most-loved'
+  | 'fastest-rising'
+  | 'most-discussed'
+  | 'most-controversial';
+
+export interface CrownData {
+  type: CrownType;
+  emoji: string;
+  label: string;
+  entity: ArenaEntity | null;
+  stat: string;
+  heldSince: number | null;
+}
+
+export interface RankedTool {
+  entity: ArenaEntity;
+  dIndex: number;
+  sentimentDisplay: number;
+  momentum: number;
+  volume24h: number;
+  controversyScore: number;
+  sparkline: number[];
+  isEmerging: boolean;
+}
+
+export interface SentimentHighlightAuthor {
+  id?: string;
+  name?: string;
+  handle?: string;
+  avatarUrl?: string;
+}
+
+export interface SentimentHighlightMetrics {
+  likeCount?: number;
+  replyCount?: number;
+  retweetCount?: number;
+  quoteCount?: number;
+  bookmarkCount?: number;
+  impressionCount?: number;
+}
+
+export interface SentimentAnnotation {
+  entity: string;
+  score: number;
+  highlightScore: number;
+}
+
+export interface SentimentHighlightItem {
+  provider: string;
+  externalItemId: string;
+  url: string;
+  text: string;
+  author?: SentimentHighlightAuthor;
+  metrics?: SentimentHighlightMetrics;
+  createdAt: string;
+  sentiments: SentimentAnnotation[];
+}
+
+export interface SentimentHighlightsConnection {
+  items: SentimentHighlightItem[];
+  cursor?: string;
+}
diff --git a/packages/shared/src/lib/query.ts b/packages/shared/src/lib/query.ts
index 0e974640a1..7437dd5df2 100644
--- a/packages/shared/src/lib/query.ts
+++ b/packages/shared/src/lib/query.ts
@@ -249,6 +249,7 @@ export enum RequestKey {
   UserAchievements = 'user_achievements',
   TrackedAchievement = 'tracked_achievement',
   AchievementSyncStatus = 'achievement_sync_status',
+  Arena = 'arena',
 }
 
 export const getPostByIdKey = (id: string): QueryKey => [RequestKey.Post, id];
diff --git a/packages/shared/src/styles/utilities.css b/packages/shared/src/styles/utilities.css
index e6dc7be5e2..8730572390 100644
--- a/packages/shared/src/styles/utilities.css
+++ b/packages/shared/src/styles/utilities.css
@@ -25,6 +25,24 @@
   }
 }
 
+.slim-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--theme-text-tertiary) transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: var(--theme-text-tertiary);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--theme-text-secondary);
+  }
+}
+
 .break-words {
   word-break: break-word;
 }
diff --git a/packages/webapp/pages/agents/arena.tsx b/packages/webapp/pages/agents/arena.tsx
new file mode 100644
index 0000000000..4b3cc76ebd
--- /dev/null
+++ b/packages/webapp/pages/agents/arena.tsx
@@ -0,0 +1,69 @@
+import type { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useRouter } from 'next/router';
+import type { DehydratedState } from '@tanstack/react-query';
+import { dehydrate, QueryClient } from '@tanstack/react-query';
+import { ArenaPage } from '@dailydotdev/shared/src/features/agents/arena/ArenaPage';
+import type { ArenaTab } from '@dailydotdev/shared/src/features/agents/arena/types';
+import { arenaOptions } from '@dailydotdev/shared/src/features/agents/arena/queries';
+import { getLayout as getFooterNavBarLayout } from '../../components/layouts/FooterNavBarLayout';
+import { getLayout } from '../../components/layouts/MainLayout';
+
+interface ArenaPageRouteProps {
+  initialTab: ArenaTab;
+  dehydratedState: DehydratedState;
+}
+
+const ArenaPageRoute = ({ initialTab }: ArenaPageRouteProps): ReactElement => {
+  const router = useRouter();
+
+  const handleTabChange = (tab: ArenaTab): void => {
+    const query = tab === 'coding-agents' ? {} : { tab };
+    router.replace({ pathname: router.pathname, query }, undefined, {
+      shallow: true,
+    });
+  };
+
+  return <ArenaPage initialTab={initialTab} onTabChange={handleTabChange} />;
+};
+
+export async function getServerSideProps({
+  query,
+  res,
+}: GetServerSidePropsContext): Promise<
+  GetServerSidePropsResult<ArenaPageRouteProps>
+> {
+  const initialTab: ArenaTab =
+    query.tab === 'llms' ? 'llms' : 'coding-agents';
+
+  res.setHeader(
+    'Cache-Control',
+    'public, s-maxage=60, stale-while-revalidate=120',
+  );
+
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery(arenaOptions({ groupId: initialTab }));
+
+  return {
+    props: {
+      initialTab,
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+}
+
+const getArenaLayout: typeof getLayout = (...props) =>
+  getFooterNavBarLayout(getLayout(...props));
+
+ArenaPageRoute.getLayout = getArenaLayout;
+ArenaPageRoute.layoutProps = {
+  screenCentered: false,
+  seo: {
+    title: 'The Arena - AI Coding Agent & LLM Leaderboard | daily.dev',
+    description:
+      'Live leaderboard tracking developer sentiment for AI coding agents and LLMs. See who is winning the developer mindshare race with the D-Index.',
+  },
+};
+
+export default ArenaPageRoute;

From 7fe269d985a91b13d1f782db0056c30bba48db1f Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 16:16:41 +0200
Subject: [PATCH 02/24] fix(arena): use rolling 24h window for last sparkline
 point and clean up lint

The last sparkline data point now uses a rolling 24h window instead of a
partial day-aligned bucket, preventing an artificial dip while the current
day is still in progress. Removed unused resolutionSeconds parameter and
queryClient variable.
---
 .../agents/arena/ArenaHighlightsFeed.tsx      |  6 +--
 .../features/agents/arena/ArenaLiveTicker.tsx |  5 +--
 .../src/features/agents/arena/ArenaPage.tsx   | 12 +-----
 .../features/agents/arena/ArenaRankings.tsx   |  7 +++-
 .../src/features/agents/arena/dindex.ts       | 41 +++++++++----------
 packages/webapp/pages/agents/arena.tsx        |  3 +-
 6 files changed, 32 insertions(+), 42 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
index 8c9d2cd133..59cec6dda6 100644
--- a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -79,7 +79,7 @@ const AuthorAvatar = ({
     .toUpperCase();
 
   return (
-    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-surface-tertiary text-text-tertiary typo-caption2">
+    <div className="bg-surface-tertiary flex h-8 w-8 items-center justify-center rounded-full text-text-tertiary typo-caption2">
       {initials}
     </div>
   );
@@ -114,7 +114,7 @@ const HighlightCard = ({
         </div>
 
         {/* Full text */}
-        <p className="break-words whitespace-pre-wrap text-text-secondary typo-footnote">
+        <p className="whitespace-pre-wrap break-words text-text-secondary typo-footnote">
           {cleanText}
         </p>
 
@@ -202,7 +202,7 @@ export const ArenaHighlightsFeed = ({
       />
       {/* New posts badge — floats over feed */}
       {!loading && pendingItems.length > 0 && (
-        <div className="pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center">
+        <div className="z-10 pointer-events-none absolute inset-x-0 top-3 flex justify-center">
           <button
             type="button"
             onClick={showPending}
diff --git a/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx b/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
index 99dd19d041..7ce39d05b2 100644
--- a/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
@@ -133,10 +133,7 @@ export const ArenaLiveTicker = ({
             <TickerItemView key={item.externalItemId} item={item} />
           ))}
           {items.map((item) => (
-            <TickerItemView
-              key={`dup-${item.externalItemId}`}
-              item={item}
-            />
+            <TickerItemView key={`dup-${item.externalItemId}`} item={item} />
           ))}
         </div>
       </div>
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index c3a52534ad..c95c2714b9 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import type { ArenaTab } from './types';
 import { ARENA_TABS } from './config';
 import { computeRankings, computeCrowns, formatVolume } from './dindex';
@@ -44,21 +44,13 @@ export const ArenaPage = ({
   onTabChange,
 }: ArenaPageProps): ReactElement => {
   const [activeTab, setActiveTab] = useState<ArenaTab>(initialTab);
-  const queryClient = useQueryClient();
-
   const { data, isFetching } = useQuery(arenaOptions({ groupId: activeTab }));
 
   const timeSeries = data?.sentimentTimeSeries;
 
   const rankings = useMemo(
     () =>
-      timeSeries
-        ? computeRankings(
-            timeSeries.entities.nodes,
-            timeSeries.resolutionSeconds,
-            activeTab,
-          )
-        : [],
+      timeSeries ? computeRankings(timeSeries.entities.nodes, activeTab) : [],
     [timeSeries, activeTab],
   );
 
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index 4a75845d41..399dd46bb9 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -156,7 +156,10 @@ const RankingRow = ({
         {loading ? (
           <Placeholder className="h-6 w-16" />
         ) : (
-          <ArenaSparkline data={tool.sparkline} color={tool.entity.brandColor} />
+          <ArenaSparkline
+            data={tool.sparkline}
+            color={tool.entity.brandColor}
+          />
         )}
       </div>
     </div>
@@ -183,7 +186,7 @@ const EmergingRow = ({
           <img
             src={tool.entity.logo}
             alt={tool.entity.name}
-            className="h-6 w-6 rounded-8 bg-surface-float object-cover opacity-60"
+            className="opacity-60 h-6 w-6 rounded-8 bg-surface-float object-cover"
           />
           <span className="text-text-tertiary typo-callout">
             {tool.entity.name}
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/dindex.ts
index e5ec4c943b..d6a776f087 100644
--- a/packages/shared/src/features/agents/arena/dindex.ts
+++ b/packages/shared/src/features/agents/arena/dindex.ts
@@ -55,10 +55,7 @@ const getWindowSpan = (node: SentimentTimeSeriesNode): number => {
   return node.timestamps[node.timestamps.length - 1];
 };
 
-const getLatest24hWindow = (
-  node: SentimentTimeSeriesNode,
-  _resolutionSeconds: number,
-): WindowData => {
+const getLatest24hWindow = (node: SentimentTimeSeriesNode): WindowData => {
   const span = getWindowSpan(node);
   if (span === 0) {
     return { volume: 0, sentimentScore: 0 };
@@ -68,10 +65,7 @@ const getLatest24hWindow = (
   return sumWindowByTime(node, cutoff, span + 1);
 };
 
-const getPrevious24hWindow = (
-  node: SentimentTimeSeriesNode,
-  _resolutionSeconds: number,
-): WindowData => {
+const getPrevious24hWindow = (node: SentimentTimeSeriesNode): WindowData => {
   const span = getWindowSpan(node);
   if (span <= SECONDS_PER_DAY) {
     return { volume: 0, sentimentScore: 0 };
@@ -133,22 +127,28 @@ const computeControversy = (
 };
 
 /**
- * Build a sparkline with 7 equal buckets across the available time window.
- * With a 7d lookback each bucket represents ~1 day.
+ * 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,
-  _resolutionSeconds: number,
-): number[] => {
+const getSparklineData = (node: SentimentTimeSeriesNode): number[] => {
   const span = getWindowSpan(node);
   if (span === 0) {
     return [0, 0, 0, 0, 0, 0, 0];
   }
 
-  const bucketSize = span / 7;
   return Array.from({ length: 7 }, (_, idx) => {
-    const from = idx * bucketSize;
-    const to = (idx + 1) * bucketSize;
+    // Last point: rolling 24h window ending at the latest data point.
+    if (idx === 6) {
+      const from = Math.max(0, span - SECONDS_PER_DAY);
+      const window = sumWindowByTime(node, from, span + 1);
+      return computeDIndex(window.volume, window.sentimentScore);
+    }
+
+    // Points 0-5: fixed day-aligned buckets.
+    const from = idx * SECONDS_PER_DAY;
+    const to = (idx + 1) * SECONDS_PER_DAY;
     const window = sumWindowByTime(node, from, to);
     return computeDIndex(window.volume, window.sentimentScore);
   });
@@ -156,7 +156,6 @@ const getSparklineData = (
 
 export const computeRankings = (
   nodes: SentimentTimeSeriesNode[],
-  resolutionSeconds: number,
   groupId: ArenaGroupId,
 ): RankedTool[] => {
   const tools: RankedTool[] = nodes
@@ -166,8 +165,8 @@ export const computeRankings = (
         return null;
       }
 
-      const current = getLatest24hWindow(node, resolutionSeconds);
-      const previous = getPrevious24hWindow(node, resolutionSeconds);
+      const current = getLatest24hWindow(node);
+      const previous = getPrevious24hWindow(node);
       const dIndex = computeDIndex(current.volume, current.sentimentScore);
       const prevDIndex = computeDIndex(
         previous.volume,
@@ -184,7 +183,7 @@ export const computeRankings = (
         momentum: Math.round(computeMomentum(dIndex, prevDIndex)),
         volume24h: current.volume,
         controversyScore: computeControversy(node, cutoff24h, span + 1),
-        sparkline: getSparklineData(node, resolutionSeconds),
+        sparkline: getSparklineData(node),
         isEmerging: current.volume < EMERGING_THRESHOLD,
       };
     })
diff --git a/packages/webapp/pages/agents/arena.tsx b/packages/webapp/pages/agents/arena.tsx
index 4b3cc76ebd..340f864e77 100644
--- a/packages/webapp/pages/agents/arena.tsx
+++ b/packages/webapp/pages/agents/arena.tsx
@@ -34,8 +34,7 @@ export async function getServerSideProps({
 }: GetServerSidePropsContext): Promise<
   GetServerSidePropsResult<ArenaPageRouteProps>
 > {
-  const initialTab: ArenaTab =
-    query.tab === 'llms' ? 'llms' : 'coding-agents';
+  const initialTab: ArenaTab = query.tab === 'llms' ? 'llms' : 'coding-agents';
 
   res.setHeader(
     'Cache-Control',

From dd5c3d439d4ba124d48358655d0cbcad6368e33f Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 16:40:00 +0200
Subject: [PATCH 03/24] feat(arena): add tooltips for D-Index metrics and
 enhance controversy calculation

Added tooltips to clarify D-Index metrics on the Arena leaderboard. Introduced revised controversy calculation with weighted averages and heat score for better insights. Updated page descriptions, titles, and messaging for improved clarity and engagement. Removed unused auto-lint script and associated settings.
---
 .claude/hooks/auto-lint.sh                    | 23 ---------
 .claude/settings.json                         | 11 -----
 .../src/features/agents/arena/ArenaPage.tsx   |  2 +-
 .../features/agents/arena/ArenaRankings.tsx   | 38 +++++++++++++--
 .../src/features/agents/arena/dindex.ts       | 48 +++++++++----------
 .../src/features/agents/arena/graphql.ts      |  1 +
 .../shared/src/features/agents/arena/types.ts |  2 +
 packages/webapp/pages/agents/arena.tsx        |  4 +-
 8 files changed, 63 insertions(+), 66 deletions(-)
 delete mode 100755 .claude/hooks/auto-lint.sh

diff --git a/.claude/hooks/auto-lint.sh b/.claude/hooks/auto-lint.sh
deleted file mode 100755
index 0946c58ef6..0000000000
--- a/.claude/hooks/auto-lint.sh
+++ /dev/null
@@ -1,23 +0,0 @@
-#!/bin/bash
-# Auto-lint TypeScript files after edits
-# Runs eslint --fix on the edited file for fast, single-file linting
-
-set -euo pipefail
-
-input_data=$(cat)
-file_path=$(echo "$input_data" | jq -r '.tool_input.file_path // empty')
-
-# Skip if no file path or not a TypeScript file
-if [[ -z "$file_path" ]] || [[ ! "$file_path" =~ \.(ts|tsx)$ ]]; then
-  exit 0
-fi
-
-# Only lint if file exists (skip for failed writes)
-if [[ ! -f "$file_path" ]]; then
-  exit 0
-fi
-
-# Run eslint fix on the single file (suppress errors to avoid blocking)
-cd "$CLAUDE_PROJECT_DIR" && pnpm eslint --fix "$file_path" 2>/dev/null || true
-
-exit 0
diff --git a/.claude/settings.json b/.claude/settings.json
index 9e271c0d8b..06cb38d861 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -112,17 +112,6 @@
           }
         ]
       }
-    ],
-    "PostToolUse": [
-      {
-        "matcher": "Edit|Write",
-        "hooks": [
-          {
-            "type": "command",
-            "command": "\"$CLAUDE_PROJECT_DIR\"/.claude/hooks/auto-lint.sh"
-          }
-        ]
-      }
     ]
   },
   "enabledPlugins": {
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index c95c2714b9..e412f3a89c 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -118,7 +118,7 @@ export const ArenaPage = ({
               The Arena
             </h1>
             <p className="text-text-tertiary typo-footnote">
-              Real-time developer sentiment &middot; Powered by the D-Index
+              Where AI tools fight for developer love
             </p>
           </div>
           <LiveIndicator mentionsPerHour={mentionsPerHour} />
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index 399dd46bb9..e4ab232309 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -6,6 +6,9 @@ import { ArenaSparkline } from './ArenaSparkline';
 import { ArenaSentimentBar } from './ArenaSentimentBar';
 import { ArenaAnimatedCounter } from './ArenaAnimatedCounter';
 import { formatDIndex, formatVolume } from './dindex';
+import { Tooltip } from '../../../components/tooltip/Tooltip';
+import { InfoIcon } from '../../../components/icons/Info';
+import { IconSize } from '../../../components/Icon';
 
 interface ArenaRankingsProps {
   tools: RankedTool[];
@@ -202,6 +205,21 @@ const EmergingRow = ({
   </div>
 );
 
+const HeaderWithTooltip = ({
+  label,
+  tooltip,
+}: {
+  label: string;
+  tooltip: string;
+}): ReactElement => (
+  <Tooltip content={tooltip}>
+    <span className="inline-flex cursor-help items-center gap-1">
+      {label}
+      <InfoIcon size={IconSize.XXSmall} className="text-text-disabled" />
+    </span>
+  </Tooltip>
+);
+
 const PLACEHOLDER_ROW_COUNT = 6;
 
 const PlaceholderRow = ({ rank }: { rank: number }): ReactElement => (
@@ -255,16 +273,28 @@ export const ArenaRankings = ({
           Tool
         </span>
         <span className="min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2">
-          D-Index
+          <HeaderWithTooltip
+            label="D-Index"
+            tooltip="Developer sentiment score combining mention volume and sentiment strength"
+          />
         </span>
         <span className="hidden min-w-[100px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 tablet:block">
-          Sentiment
+          <HeaderWithTooltip
+            label="Sentiment"
+            tooltip="How positively developers talk about this tool (0–100)"
+          />
         </span>
         <span className="hidden min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
-          Momentum
+          <HeaderWithTooltip
+            label="Momentum"
+            tooltip="D-Index change compared to the previous 24-hour window"
+          />
         </span>
         <span className="hidden min-w-[60px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
-          24h Vol
+          <HeaderWithTooltip
+            label="24h Vol"
+            tooltip="Total developer mentions in the last 24 hours"
+          />
         </span>
         <span className="ml-auto hidden font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
           7d Trend
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/dindex.ts
index d6a776f087..ef2d7795c5 100644
--- a/packages/shared/src/features/agents/arena/dindex.ts
+++ b/packages/shared/src/features/agents/arena/dindex.ts
@@ -91,39 +91,37 @@ const computeMomentum = (currentDIndex: number, prevDIndex: number): number => {
   return ((currentDIndex - prevDIndex) / prevDIndex) * 100;
 };
 
+interface ControversyData {
+  /** Total controversy: sum of volume × scoreVariance. Used for ranking. */
+  score: number;
+  /** Volume-weighted average scoreVariance. */
+  heat: number;
+}
+
 /**
- * Controversy = totalVolume × sentimentVariance across hourly buckets.
- * High variance means scores swing between positive and negative,
- * indicating genuine polarization rather than bland neutrality.
+ * Compute controversy metrics from the API-provided scoreVariance.
  */
 const computeControversy = (
   node: SentimentTimeSeriesNode,
   fromOffset: number,
   toOffset: number,
-): number => {
-  const bucketScores: { score: number; volume: 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) {
-      bucketScores.push({ score: node.scores[i], volume: node.volume[i] });
+      totalWeighted += node.volume[i] * node.scoreVariance[i];
+      totalVolume += node.volume[i];
     }
   }
 
-  if (bucketScores.length < 2) {
-    return 0;
-  }
-
-  const totalVolume = bucketScores.reduce((sum, b) => sum + b.volume, 0);
-  const weightedMean =
-    bucketScores.reduce((sum, b) => sum + b.score * b.volume, 0) / totalVolume;
-  const variance =
-    bucketScores.reduce(
-      (sum, b) => sum + b.volume * (b.score - weightedMean) ** 2,
-      0,
-    ) / totalVolume;
-
-  return totalVolume * variance;
+  const avgVariance = totalVolume > 0 ? totalWeighted / totalVolume : 0;
+  return {
+    score: totalWeighted,
+    heat: Math.round(avgVariance * 100),
+  };
 };
 
 /**
@@ -175,6 +173,7 @@ export const computeRankings = (
 
       const span = getWindowSpan(node);
       const cutoff24h = Math.max(0, span - SECONDS_PER_DAY);
+      const controversy = computeControversy(node, cutoff24h, span + 1);
 
       return {
         entity: entityMeta,
@@ -182,7 +181,8 @@ export const computeRankings = (
         sentimentDisplay: computeSentimentDisplay(current.sentimentScore),
         momentum: Math.round(computeMomentum(dIndex, prevDIndex)),
         volume24h: current.volume,
-        controversyScore: computeControversy(node, cutoff24h, span + 1),
+        controversyScore: controversy.score,
+        heat: controversy.heat,
         sparkline: getSparklineData(node),
         isEmerging: current.volume < EMERGING_THRESHOLD,
       };
@@ -201,6 +201,7 @@ export const computeRankings = (
         momentum: 0,
         volume24h: 0,
         controversyScore: 0,
+        heat: 0,
         sparkline: [0, 0, 0, 0, 0, 0, 0],
         isEmerging: true,
       });
@@ -280,10 +281,7 @@ const CROWN_CONFIG: Record<
     label: 'Most Controversial',
     thresholds: { minVolume: 10 },
     getValue: (t) => t.controversyScore,
-    formatStat: (t) => {
-      const split = t.sentimentDisplay;
-      return `Split: ${split}/${100 - split}`;
-    },
+    formatStat: (t) => `Heat ${t.heat}`,
   },
 };
 
diff --git a/packages/shared/src/features/agents/arena/graphql.ts b/packages/shared/src/features/agents/arena/graphql.ts
index 035bb27aec..5000fc6565 100644
--- a/packages/shared/src/features/agents/arena/graphql.ts
+++ b/packages/shared/src/features/agents/arena/graphql.ts
@@ -21,6 +21,7 @@ export const ARENA_QUERY = gql`
           timestamps
           scores
           volume
+          scoreVariance
         }
       }
     }
diff --git a/packages/shared/src/features/agents/arena/types.ts b/packages/shared/src/features/agents/arena/types.ts
index 53b66a9f86..a407b28d21 100644
--- a/packages/shared/src/features/agents/arena/types.ts
+++ b/packages/shared/src/features/agents/arena/types.ts
@@ -7,6 +7,7 @@ export interface SentimentTimeSeriesNode {
   timestamps: number[];
   scores: number[];
   volume: number[];
+  scoreVariance: number[];
 }
 
 export interface SentimentTimeSeries {
@@ -53,6 +54,7 @@ export interface RankedTool {
   momentum: number;
   volume24h: number;
   controversyScore: number;
+  heat: number;
   sparkline: number[];
   isEmerging: boolean;
 }
diff --git a/packages/webapp/pages/agents/arena.tsx b/packages/webapp/pages/agents/arena.tsx
index 340f864e77..277babd706 100644
--- a/packages/webapp/pages/agents/arena.tsx
+++ b/packages/webapp/pages/agents/arena.tsx
@@ -59,9 +59,9 @@ ArenaPageRoute.getLayout = getArenaLayout;
 ArenaPageRoute.layoutProps = {
   screenCentered: false,
   seo: {
-    title: 'The Arena - AI Coding Agent & LLM Leaderboard | daily.dev',
+    title: 'The Arena - Agents & LLM Leaderboard | daily.dev',
     description:
-      'Live leaderboard tracking developer sentiment for AI coding agents and LLMs. See who is winning the developer mindshare race with the D-Index.',
+      "No benchmarks. No hype. Just developers voting on which AI coding agents and LLMs actually deliver. See who's on top right now.",
   },
 };
 

From 2079169440f9423a60263b7408bcb150ff3786fb Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 14:49:56 +0000
Subject: [PATCH 04/24] fix(arena): update brand logos and colors for Copilot,
 Codex, Qwen, Llama and others

- Copilot: use official GitHub Copilot icon with black brand color
- Codex: update to OpenAI's official teal (#10A37F)
- Llama: use Meta Llama GitHub org avatar with Meta blue (#0467DF)
- Qwen: use QwenLM GitHub org avatar with blue-purple (#615EFF)
- Claude: update to official Anthropic orange (#D97757)
- GPT models: update to OpenAI teal (#10A37F)
- Gemini: update to Google Gemini purple (#8E75B2)
---
 .../src/features/agents/arena/config.ts       | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/config.ts b/packages/shared/src/features/agents/arena/config.ts
index 24e5686242..7f75318954 100644
--- a/packages/shared/src/features/agents/arena/config.ts
+++ b/packages/shared/src/features/agents/arena/config.ts
@@ -12,8 +12,8 @@ const CODING_AGENTS: ArenaEntity[] = [
     entity: 'copilot',
     name: 'Copilot',
     slug: 'copilot',
-    logo: 'https://github.com/apple-touch-icon.png',
-    brandColor: '#6366F1',
+    logo: 'https://github.githubassets.com/images/icons/copilot/cp-head-square.png',
+    brandColor: '#000000',
   },
   {
     entity: 'windsurf',
@@ -34,14 +34,14 @@ const CODING_AGENTS: ArenaEntity[] = [
     name: 'Claude Code',
     slug: 'claude-code',
     logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
-    brandColor: '#D97706',
+    brandColor: '#D97757',
   },
   {
     entity: 'codex',
     name: 'Codex',
     slug: 'codex',
     logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
-    brandColor: '#10B981',
+    brandColor: '#10A37F',
   },
   {
     entity: 'aider',
@@ -79,28 +79,28 @@ const LLMS: ArenaEntity[] = [
     name: 'Claude Sonnet',
     slug: 'claude-sonnet',
     logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
-    brandColor: '#D97706',
+    brandColor: '#D97757',
   },
   {
     entity: 'claude_opus',
     name: 'Claude Opus',
     slug: 'claude-opus',
     logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
-    brandColor: '#D97706',
+    brandColor: '#D97757',
   },
   {
     entity: 'gpt_5',
     name: 'GPT-5',
     slug: 'gpt-5',
     logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
-    brandColor: '#10B981',
+    brandColor: '#10A37F',
   },
   {
     entity: 'gpt_codex',
     name: 'GPT Codex',
     slug: 'gpt-codex',
     logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
-    brandColor: '#10B981',
+    brandColor: '#10A37F',
   },
   {
     entity: 'deepseek',
@@ -114,21 +114,21 @@ const LLMS: ArenaEntity[] = [
     name: 'Gemini',
     slug: 'gemini',
     logo: 'https://www.gstatic.com/lamda/images/gemini_favicon_f069958c85030456e93de685481c559f160ea06b.png',
-    brandColor: '#4285F4',
+    brandColor: '#8E75B2',
   },
   {
     entity: 'llama',
     name: 'Llama',
     slug: 'llama',
-    logo: 'https://ai.meta.com/favicon.ico',
-    brandColor: '#6366F1',
+    logo: 'https://avatars.githubusercontent.com/u/153379578?s=200&v=4',
+    brandColor: '#0467DF',
   },
   {
     entity: 'qwen',
     name: 'Qwen',
     slug: 'qwen',
-    logo: 'https://chat.qwen.ai/favicon.ico',
-    brandColor: '#7C3AED',
+    logo: 'https://avatars.githubusercontent.com/u/141221163?s=200&v=4',
+    brandColor: '#615EFF',
   },
   {
     entity: 'kimi',

From 2ae4282e14ef465e9880997d77b224a925958718 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 17:34:10 +0200
Subject: [PATCH 05/24] feat(arena): add mobile responsive layout with
 expandable rankings

- Compact header and crown cards for mobile viewports
- Sticky tab nav with proper z-index for scroll behavior
- Expandable ranking rows on mobile/tablet showing sentiment,
  momentum, volume, and sparkline in a detail panel
- Highlights feed truncated to 5 items on mobile with show-all button
- Wrap ambient glow divs to prevent horizontal overflow on mobile
- Crown cards min-width 170px to prevent label line breaks
---
 .../features/agents/arena/ArenaCrownCards.tsx |  16 +-
 .../agents/arena/ArenaHighlightsFeed.tsx      |  43 ++-
 .../src/features/agents/arena/ArenaPage.tsx   |  48 ++--
 .../features/agents/arena/ArenaRankings.tsx   | 272 ++++++++++++------
 4 files changed, 255 insertions(+), 124 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index 611a71b20a..5053f868e5 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -26,7 +26,7 @@ const CrownCard = ({
 }): ReactElement => (
   <div
     className={classNames(
-      'group relative flex min-w-[180px] flex-1 flex-col items-center gap-3 overflow-hidden rounded-16 border p-5 transition-all duration-300',
+      'group relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 transition-all duration-300 tablet:min-w-[180px] tablet:gap-3 tablet:p-5',
       loading
         ? 'border-border-subtlest-tertiary bg-surface-float'
         : 'border-border-subtlest-secondary bg-surface-float hover:-translate-y-1 hover:shadow-2',
@@ -64,7 +64,7 @@ const CrownCard = ({
     {/* Crown emoji + label */}
     <div className="flex flex-col items-center gap-1">
       <span
-        className="text-2xl"
+        className="text-lg tablet:text-2xl"
         style={
           !loading && crown.entity
             ? { filter: 'drop-shadow(0 0 8px rgba(255,200,0,0.4))' }
@@ -73,26 +73,26 @@ const CrownCard = ({
       >
         {crown.emoji}
       </span>
-      <span className="font-bold uppercase tracking-wider text-text-quaternary typo-caption1">
+      <span className="text-center font-bold uppercase tracking-wider text-text-quaternary typo-caption2 tablet:typo-caption1">
         {crown.label}
       </span>
     </div>
 
     {/* Tool info */}
-    <div className="flex h-8 items-center gap-2">
+    <div className="flex h-7 items-center gap-1.5 tablet:h-8 tablet:gap-2">
       {loading ? (
         <>
-          <Placeholder className="h-8 w-8 shrink-0 rounded-8" />
-          <Placeholder className="h-5 w-20" />
+          <Placeholder className="h-6 w-6 shrink-0 rounded-8 tablet:h-8 tablet:w-8" />
+          <Placeholder className="h-4 w-16 tablet:h-5 tablet:w-20" />
         </>
       ) : (
         <>
           <img
             src={crown.entity?.logo}
             alt={crown.entity?.name}
-            className="h-8 w-8 shrink-0 rounded-8 bg-surface-float object-cover"
+            className="h-6 w-6 shrink-0 rounded-8 bg-surface-float object-cover tablet:h-8 tablet:w-8"
           />
-          <span className="font-bold text-text-primary typo-title3">
+          <span className="truncate font-bold text-text-primary typo-callout tablet:typo-title3">
             {crown.entity?.name}
           </span>
         </>
diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
index 59cec6dda6..eaee46baa9 100644
--- a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -148,6 +148,8 @@ const PlaceholderCard = (): ReactElement => (
   </div>
 );
 
+const MOBILE_FEED_LIMIT = 5;
+
 interface ArenaHighlightsFeedProps {
   items: SentimentHighlightItem[];
   loading?: boolean;
@@ -163,6 +165,7 @@ export const ArenaHighlightsFeed = ({
   const [pendingItems, setPendingItems] = useState<SentimentHighlightItem[]>(
     [],
   );
+  const [mobileExpanded, setMobileExpanded] = useState(false);
   const initializedRef = useRef(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -192,6 +195,13 @@ export const ArenaHighlightsFeed = ({
     scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  // On mobile (no laptop:absolute), truncate items unless expanded
+  const displayItems = mobileExpanded
+    ? visibleItems
+    : visibleItems.slice(0, MOBILE_FEED_LIMIT);
+  const hasMoreOnMobile =
+    !mobileExpanded && visibleItems.length > MOBILE_FEED_LIMIT;
+
   return (
     <div className="flex h-full flex-col overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
       {/* eslint-disable-next-line react/no-danger */}
@@ -200,9 +210,25 @@ export const ArenaHighlightsFeed = ({
           __html: `@keyframes slide-down{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}`,
         }}
       />
-      {/* New posts badge — floats over feed */}
+      {/* Feed header — mobile only */}
+      <div className="flex items-center justify-between border-b border-border-subtlest-secondary px-4 py-2.5 laptop:hidden">
+        <span className="font-bold text-text-primary typo-callout">
+          Live Highlights
+        </span>
+        {!loading && pendingItems.length > 0 && (
+          <button
+            type="button"
+            onClick={showPending}
+            className="rounded-8 bg-accent-cabbage-default px-2.5 py-1 font-bold text-white typo-caption2 active:scale-95"
+          >
+            +{pendingItems.length} new
+          </button>
+        )}
+      </div>
+
+      {/* New posts badge — floats over feed (laptop only) */}
       {!loading && pendingItems.length > 0 && (
-        <div className="z-10 pointer-events-none absolute inset-x-0 top-3 flex justify-center">
+        <div className="z-10 pointer-events-none absolute inset-x-0 top-3 hidden justify-center laptop:flex">
           <button
             type="button"
             onClick={showPending}
@@ -224,10 +250,21 @@ export const ArenaHighlightsFeed = ({
               // eslint-disable-next-line react/no-array-index-key
               <PlaceholderCard key={i} />
             ))
-          : visibleItems.map((item) => (
+          : displayItems.map((item) => (
               <HighlightCard key={item.externalItemId} item={item} />
             ))}
       </div>
+
+      {/* Show all button — mobile only */}
+      {!loading && hasMoreOnMobile && (
+        <button
+          type="button"
+          onClick={() => setMobileExpanded(true)}
+          className="active:opacity-80 border-t border-border-subtlest-tertiary px-4 py-3 text-center font-bold text-text-link typo-callout laptop:hidden"
+        >
+          Show all {visibleItems.length} highlights
+        </button>
+      )}
     </div>
   );
 };
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index e412f3a89c..ac79034afa 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -71,25 +71,27 @@ export const ArenaPage = ({
 
   return (
     <div className="relative mx-auto flex w-full max-w-6xl flex-col">
-      {/* Animated ambient glows that drift */}
-      <div
-        className="bg-accent-cabbage-default/10 pointer-events-none absolute -left-32 -top-32 h-96 w-96 rounded-full blur-3xl"
-        style={{
-          animation: 'float-slow 20s ease-in-out infinite',
-        }}
-      />
-      <div
-        className="bg-accent-onion-default/[0.08] pointer-events-none absolute -right-32 -top-16 h-64 w-64 rounded-full blur-3xl"
-        style={{
-          animation: 'float-slow 25s ease-in-out infinite reverse',
-        }}
-      />
-      <div
-        className="bg-accent-water-default/[0.06] pointer-events-none absolute -bottom-20 left-1/3 h-48 w-48 rounded-full blur-3xl"
-        style={{
-          animation: 'float-slow 18s ease-in-out infinite 5s',
-        }}
-      />
+      {/* Animated ambient glows that drift — clipped to prevent mobile overflow */}
+      <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div
+          className="bg-accent-cabbage-default/10 absolute -left-32 -top-32 h-96 w-96 rounded-full blur-3xl"
+          style={{
+            animation: 'float-slow 20s ease-in-out infinite',
+          }}
+        />
+        <div
+          className="bg-accent-onion-default/[0.08] absolute -right-32 -top-16 h-64 w-64 rounded-full blur-3xl"
+          style={{
+            animation: 'float-slow 25s ease-in-out infinite reverse',
+          }}
+        />
+        <div
+          className="bg-accent-water-default/[0.06] absolute -bottom-20 left-1/3 h-48 w-48 rounded-full blur-3xl"
+          style={{
+            animation: 'float-slow 18s ease-in-out infinite 5s',
+          }}
+        />
+      </div>
 
       {/* Inline keyframes for custom animations */}
       <style
@@ -110,10 +112,10 @@ export const ArenaPage = ({
       />
 
       {/* Header */}
-      <header className="px-4 pt-10 laptop:px-0">
-        <div className="flex items-start justify-between">
+      <header className="px-4 pt-6 laptop:px-0 laptop:pt-10">
+        <div className="flex flex-col gap-2 tablet:flex-row tablet:items-start tablet:justify-between tablet:gap-0">
           <div className="flex flex-col gap-1">
-            <h1 className="flex items-center gap-2 font-bold text-text-primary typo-title1">
+            <h1 className="flex items-center gap-2 font-bold text-text-primary typo-title2 laptop:typo-title1">
               <span aria-hidden="true">&#x2694;&#xFE0F;</span>
               The Arena
             </h1>
@@ -126,7 +128,7 @@ export const ArenaPage = ({
       </header>
 
       {/* Tab switcher */}
-      <nav className="mt-4 flex gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-0">
+      <nav className="sticky top-0 z-3 mt-4 flex gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-0">
         {ARENA_TABS.map((tab) => (
           <button
             key={tab.value}
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index e4ab232309..3e66d584b6 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import type { RankedTool } from './types';
 import { ArenaSparkline } from './ArenaSparkline';
@@ -44,14 +44,39 @@ const getMomentumDisplay = (
   return { text: '\u2501 0%', color: 'text-text-quaternary' };
 };
 
+const ChevronIcon = ({ expanded }: { expanded: boolean }): ReactElement => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    className={classNames(
+      'shrink-0 text-text-quaternary transition-transform duration-200 laptop:hidden',
+      expanded && 'rotate-180',
+    )}
+  >
+    <path
+      d="M4 6l4 4 4-4"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
 const RankingRow = ({
   tool,
   rank,
   loading,
+  expanded,
+  onToggle,
 }: {
   tool: RankedTool;
   rank: number;
   loading?: boolean;
+  expanded: boolean;
+  onToggle: () => void;
 }): ReactElement => {
   const momentum = getMomentumDisplay(tool.momentum);
   const medal = RANK_MEDALS[rank - 1] || '';
@@ -60,7 +85,7 @@ const RankingRow = ({
   return (
     <div
       className={classNames(
-        'group relative flex min-h-[52px] items-center gap-3 border-b border-border-subtlest-tertiary px-4 py-3 transition-all duration-500 hover:bg-surface-hover',
+        'group relative border-b border-border-subtlest-tertiary transition-all duration-500 hover:bg-surface-hover',
         rank <= 3 && 'bg-surface-float',
       )}
       style={{
@@ -76,95 +101,152 @@ const RankingRow = ({
         />
       )}
 
-      {/* Rank */}
-      <div className="flex w-10 shrink-0 items-center justify-center">
-        {medal ? (
-          <span className="text-lg">{medal}</span>
-        ) : (
-          <span className="font-bold text-text-quaternary typo-callout">
-            {rank}
-          </span>
-        )}
-      </div>
+      {/* Main row — clickable on mobile to expand */}
+      <button
+        type="button"
+        className="flex min-h-[52px] w-full items-center gap-3 px-4 py-3 text-left laptop:cursor-default"
+        onClick={onToggle}
+      >
+        {/* Rank */}
+        <div className="flex w-8 shrink-0 items-center justify-center laptop:w-10">
+          {medal ? (
+            <span className="text-lg">{medal}</span>
+          ) : (
+            <span className="font-bold text-text-quaternary typo-callout">
+              {rank}
+            </span>
+          )}
+        </div>
 
-      {/* Tool info */}
-      <div className="flex w-[140px] shrink-0 items-center gap-2.5">
-        {loading ? (
-          <>
-            <Placeholder className="h-7 w-7 shrink-0 rounded-8" />
-            <Placeholder className="h-4 w-20" />
-          </>
-        ) : (
-          <>
-            <img
-              src={tool.entity.logo}
-              alt={tool.entity.name}
-              className="h-7 w-7 shrink-0 rounded-8 bg-surface-float object-cover"
+        {/* Tool info */}
+        <div className="flex min-w-0 flex-1 items-center gap-2.5 laptop:w-[140px] laptop:flex-none laptop:shrink-0">
+          {loading ? (
+            <>
+              <Placeholder className="h-7 w-7 shrink-0 rounded-8" />
+              <Placeholder className="h-4 w-20" />
+            </>
+          ) : (
+            <>
+              <img
+                src={tool.entity.logo}
+                alt={tool.entity.name}
+                className="h-7 w-7 shrink-0 rounded-8 bg-surface-float object-cover"
+              />
+              <span className="truncate font-bold text-text-primary typo-callout">
+                {tool.entity.name}
+              </span>
+            </>
+          )}
+        </div>
+
+        {/* D-Index */}
+        <div className="flex shrink-0 items-center laptop:min-w-[80px]">
+          {loading ? (
+            <Placeholder className="h-5 w-12" />
+          ) : (
+            <ArenaAnimatedCounter
+              value={tool.dIndex}
+              format={formatDIndex}
+              className="font-bold tabular-nums text-text-primary typo-title3"
             />
-            <span className="truncate font-bold text-text-primary typo-callout">
-              {tool.entity.name}
-            </span>
-          </>
-        )}
-      </div>
+          )}
+        </div>
 
-      {/* D-Index */}
-      <div className="flex min-w-[80px] shrink-0 items-center">
-        {loading ? (
-          <Placeholder className="h-5 w-12" />
-        ) : (
-          <ArenaAnimatedCounter
-            value={tool.dIndex}
-            format={formatDIndex}
-            className="font-bold tabular-nums text-text-primary typo-title3"
-          />
-        )}
-      </div>
+        {/* Sentiment — tablet+ inline */}
+        <div className="hidden min-w-[100px] shrink-0 items-center tablet:flex laptop:flex">
+          {loading ? (
+            <Placeholder className="h-4 w-20" />
+          ) : (
+            <ArenaSentimentBar value={tool.sentimentDisplay} />
+          )}
+        </div>
 
-      {/* Sentiment */}
-      <div className="hidden min-w-[100px] shrink-0 items-center tablet:flex">
-        {loading ? (
-          <Placeholder className="h-4 w-20" />
-        ) : (
-          <ArenaSentimentBar value={tool.sentimentDisplay} />
-        )}
-      </div>
+        {/* Momentum — laptop+ inline */}
+        <div className="hidden min-w-[80px] shrink-0 items-center laptop:flex">
+          {loading ? (
+            <Placeholder className="h-4 w-14" />
+          ) : (
+            <span
+              className={classNames('font-bold typo-caption1', momentum.color)}
+            >
+              {momentum.text}
+            </span>
+          )}
+        </div>
 
-      {/* Momentum */}
-      <div className="hidden min-w-[80px] shrink-0 items-center laptop:flex">
-        {loading ? (
-          <Placeholder className="h-4 w-14" />
-        ) : (
-          <span
-            className={classNames('font-bold typo-caption1', momentum.color)}
-          >
-            {momentum.text}
-          </span>
-        )}
-      </div>
+        {/* Volume — laptop+ inline */}
+        <div className="hidden min-w-[60px] shrink-0 items-center laptop:flex">
+          {loading ? (
+            <Placeholder className="h-4 w-10" />
+          ) : (
+            <span className="text-text-tertiary typo-caption1">
+              {formatVolume(tool.volume24h)}
+            </span>
+          )}
+        </div>
 
-      {/* Volume */}
-      <div className="hidden min-w-[60px] shrink-0 items-center laptop:flex">
-        {loading ? (
-          <Placeholder className="h-4 w-10" />
-        ) : (
-          <span className="text-text-tertiary typo-caption1">
-            {formatVolume(tool.volume24h)}
-          </span>
-        )}
-      </div>
+        {/* Sparkline — laptop+ inline */}
+        <div className="ml-auto hidden items-center laptop:flex">
+          {loading ? (
+            <Placeholder className="h-6 w-16" />
+          ) : (
+            <ArenaSparkline
+              data={tool.sparkline}
+              color={tool.entity.brandColor}
+            />
+          )}
+        </div>
 
-      {/* Sparkline */}
-      <div className="ml-auto hidden items-center laptop:flex">
-        {loading ? (
-          <Placeholder className="h-6 w-16" />
-        ) : (
-          <ArenaSparkline
-            data={tool.sparkline}
-            color={tool.entity.brandColor}
-          />
-        )}
-      </div>
+        {/* Expand chevron — mobile/tablet only */}
+        {!loading && <ChevronIcon expanded={expanded} />}
+      </button>
+
+      {/* Expanded detail panel — mobile/tablet only */}
+      {expanded && !loading && (
+        <div className="bg-surface-float/50 flex flex-col gap-3 border-t border-border-subtlest-tertiary px-4 py-3 laptop:hidden">
+          <div className="grid grid-cols-3 gap-3 tablet:grid-cols-2">
+            {/* Sentiment — shown on mobile (hidden on tablet since it's inline) */}
+            <div className="flex flex-col gap-1 tablet:hidden">
+              <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+                Sentiment
+              </span>
+              <ArenaSentimentBar value={tool.sentimentDisplay} />
+            </div>
+            <div className="flex flex-col gap-1">
+              <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+                Momentum
+              </span>
+              <span
+                className={classNames(
+                  'font-bold typo-caption1',
+                  momentum.color,
+                )}
+              >
+                {momentum.text}
+              </span>
+            </div>
+            <div className="flex flex-col gap-1">
+              <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+                24h Vol
+              </span>
+              <span className="text-text-tertiary typo-caption1">
+                {formatVolume(tool.volume24h)}
+              </span>
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+              7d Trend
+            </span>
+            <ArenaSparkline
+              data={tool.sparkline}
+              width={200}
+              height={32}
+              color={tool.entity.brandColor}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };
@@ -229,14 +311,14 @@ const PlaceholderRow = ({ rank }: { rank: number }): ReactElement => (
       rank <= 3 && 'bg-surface-float',
     )}
   >
-    <div className="flex w-10 shrink-0 items-center justify-center">
+    <div className="flex w-8 shrink-0 items-center justify-center laptop:w-10">
       <Placeholder className="h-5 w-5" />
     </div>
-    <div className="flex w-[140px] shrink-0 items-center gap-2.5">
+    <div className="flex min-w-0 flex-1 items-center gap-2.5 laptop:w-[140px] laptop:flex-none laptop:shrink-0">
       <Placeholder className="h-7 w-7 shrink-0 rounded-8" />
       <Placeholder className="h-4 w-20" />
     </div>
-    <div className="min-w-[80px] shrink-0">
+    <div className="shrink-0 laptop:min-w-[80px]">
       <Placeholder className="h-5 w-12" />
     </div>
     <div className="hidden min-w-[100px] shrink-0 tablet:block">
@@ -251,6 +333,7 @@ const PlaceholderRow = ({ rank }: { rank: number }): ReactElement => (
     <div className="ml-auto hidden laptop:block">
       <Placeholder className="h-6 w-16" />
     </div>
+    <div className="w-4 shrink-0 laptop:hidden" />
   </div>
 );
 
@@ -258,6 +341,7 @@ export const ArenaRankings = ({
   tools,
   loading,
 }: ArenaRankingsProps): ReactElement => {
+  const [expandedEntity, setExpandedEntity] = useState<string | null>(null);
   const established = tools.filter((t) => !t.isEmerging);
   const emerging = tools.filter((t) => t.isEmerging);
   const showPlaceholderRows = loading && established.length === 0;
@@ -266,13 +350,13 @@ export const ArenaRankings = ({
     <div className="overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
       {/* Header */}
       <div className="flex items-center gap-3 border-b border-border-subtlest-secondary px-4 py-2.5">
-        <span className="w-10 shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+        <span className="w-8 shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:w-10">
           #
         </span>
-        <span className="w-[140px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+        <span className="flex-1 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:w-[140px] laptop:flex-none laptop:shrink-0">
           Tool
         </span>
-        <span className="min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+        <span className="shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:min-w-[80px]">
           <HeaderWithTooltip
             label="D-Index"
             tooltip="Developer sentiment score combining mention volume and sentiment strength"
@@ -299,6 +383,8 @@ export const ArenaRankings = ({
         <span className="ml-auto hidden font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
           7d Trend
         </span>
+        {/* Spacer for chevron column on mobile */}
+        <span className="w-4 shrink-0 laptop:hidden" />
       </div>
 
       {/* Ranked rows */}
@@ -314,6 +400,12 @@ export const ArenaRankings = ({
                 tool={tool}
                 rank={idx + 1}
                 loading={loading}
+                expanded={expandedEntity === tool.entity.entity}
+                onToggle={() =>
+                  setExpandedEntity((prev) =>
+                    prev === tool.entity.entity ? null : tool.entity.entity,
+                  )
+                }
               />
             ))}
       </div>

From e0e50999e2de8c6fa6ce47202c4d79a16354f348 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 21:27:05 +0200
Subject: [PATCH 06/24] fix(arena): remove mentions/hr metric, crown hover
 effects, and fix Copilot color

---
 .../features/agents/arena/ArenaCrownCards.tsx | 12 ++-----
 .../src/features/agents/arena/ArenaPage.tsx   | 35 ++++---------------
 .../src/features/agents/arena/config.ts       |  2 +-
 3 files changed, 9 insertions(+), 40 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index 5053f868e5..852d375d60 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -26,10 +26,10 @@ const CrownCard = ({
 }): ReactElement => (
   <div
     className={classNames(
-      'group relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 transition-all duration-300 tablet:min-w-[180px] tablet:gap-3 tablet:p-5',
+      'relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 tablet:min-w-[180px] tablet:gap-3 tablet:p-5',
       loading
         ? 'border-border-subtlest-tertiary bg-surface-float'
-        : 'border-border-subtlest-secondary bg-surface-float hover:-translate-y-1 hover:shadow-2',
+        : 'border-border-subtlest-secondary bg-surface-float',
     )}
     style={
       !loading && crown.entity?.brandColor
@@ -50,14 +50,6 @@ const CrownCard = ({
             opacity: 0.15,
           }}
         />
-        <div
-          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-          style={{
-            background: `linear-gradient(105deg, transparent 40%, ${crown.entity.brandColor}15 50%, transparent 60%)`,
-            backgroundSize: '200% 100%',
-            animation: 'shimmer 2s ease-in-out infinite',
-          }}
-        />
       </>
     )}
 
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index ac79034afa..eb399a243a 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -4,11 +4,10 @@ import classNames from 'classnames';
 import { useQuery } from '@tanstack/react-query';
 import type { ArenaTab } from './types';
 import { ARENA_TABS } from './config';
-import { computeRankings, computeCrowns, formatVolume } from './dindex';
+import { computeRankings, computeCrowns } from './dindex';
 import { ArenaCrownCards } from './ArenaCrownCards';
 import { ArenaRankings } from './ArenaRankings';
 import { ArenaHighlightsFeed } from './ArenaHighlightsFeed';
-import { ArenaAnimatedCounter } from './ArenaAnimatedCounter';
 import { arenaOptions } from './queries';
 
 interface ArenaPageProps {
@@ -16,26 +15,10 @@ interface ArenaPageProps {
   onTabChange?: (tab: ArenaTab) => void;
 }
 
-const LiveIndicator = ({
-  mentionsPerHour,
-}: {
-  mentionsPerHour: number;
-}): ReactElement => (
-  <div className="flex items-center gap-3">
-    <div className="flex items-center gap-1.5">
-      <span className="inline-block h-2 w-2 animate-scale-down-pulse rounded-full bg-accent-avocado-default shadow-[0_0_6px_var(--theme-accent-avocado-default)]" />
-      <span className="text-accent-avocado-default typo-caption2">Live</span>
-    </div>
-    {mentionsPerHour > 0 && (
-      <div className="flex items-center gap-1 text-text-quaternary typo-caption2">
-        <ArenaAnimatedCounter
-          value={mentionsPerHour}
-          format={formatVolume}
-          className="tabular-nums text-text-tertiary"
-        />
-        <span>/hr</span>
-      </div>
-    )}
+const LiveIndicator = (): ReactElement => (
+  <div className="flex items-center gap-1.5">
+    <span className="inline-block h-2 w-2 animate-scale-down-pulse rounded-full bg-accent-avocado-default shadow-[0_0_6px_var(--theme-accent-avocado-default)]" />
+    <span className="text-accent-avocado-default typo-caption2">Live</span>
   </div>
 );
 
@@ -56,12 +39,6 @@ export const ArenaPage = ({
 
   const crowns = useMemo(() => computeCrowns(rankings), [rankings]);
 
-  // Total mentions per hour across all tools
-  const mentionsPerHour = useMemo(() => {
-    const total = rankings.reduce((sum, t) => sum + t.volume24h, 0);
-    return Math.round(total / 24);
-  }, [rankings]);
-
   const loading = isFetching && !data;
 
   const handleTabChange = (tab: ArenaTab): void => {
@@ -123,7 +100,7 @@ export const ArenaPage = ({
               Where AI tools fight for developer love
             </p>
           </div>
-          <LiveIndicator mentionsPerHour={mentionsPerHour} />
+          <LiveIndicator />
         </div>
       </header>
 
diff --git a/packages/shared/src/features/agents/arena/config.ts b/packages/shared/src/features/agents/arena/config.ts
index 7f75318954..002fe4c569 100644
--- a/packages/shared/src/features/agents/arena/config.ts
+++ b/packages/shared/src/features/agents/arena/config.ts
@@ -13,7 +13,7 @@ const CODING_AGENTS: ArenaEntity[] = [
     name: 'Copilot',
     slug: 'copilot',
     logo: 'https://github.githubassets.com/images/icons/copilot/cp-head-square.png',
-    brandColor: '#000000',
+    brandColor: '#6E40C9',
   },
   {
     entity: 'windsurf',

From fba8ef4692de216d0591d72f78523dd90a7ba644 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 21:39:14 +0200
Subject: [PATCH 07/24] fix(arena): migrate logo URLs to daily.dev CDN

Host all arena entity logos on our CDN for consistent sizing
and faster loading instead of fetching from various external sources.
---
 .../src/features/agents/arena/config.ts       | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/config.ts b/packages/shared/src/features/agents/arena/config.ts
index 002fe4c569..ea204ddffe 100644
--- a/packages/shared/src/features/agents/arena/config.ts
+++ b/packages/shared/src/features/agents/arena/config.ts
@@ -5,70 +5,70 @@ const CODING_AGENTS: ArenaEntity[] = [
     entity: 'cursor',
     name: 'Cursor',
     slug: 'cursor',
-    logo: 'https://www.cursor.com/apple-touch-icon.png',
+    logo: 'https://media.daily.dev/image/upload/s--OaZ4Et3s--/f_auto,q_auto/v1772048234/public/cursor',
     brandColor: '#00D4AA',
   },
   {
     entity: 'copilot',
     name: 'Copilot',
     slug: 'copilot',
-    logo: 'https://github.githubassets.com/images/icons/copilot/cp-head-square.png',
+    logo: 'https://media.daily.dev/image/upload/s--giOMGduf--/f_auto,q_auto/v1772048234/public/copilot',
     brandColor: '#6E40C9',
   },
   {
     entity: 'windsurf',
     name: 'Windsurf',
     slug: 'windsurf',
-    logo: 'https://windsurf.com/favicon_192.png',
+    logo: 'https://media.daily.dev/image/upload/s--yFe4w8pJ--/f_auto,q_auto/v1772048234/public/windsurf',
     brandColor: '#06B6D4',
   },
   {
     entity: 'cline',
     name: 'Cline',
     slug: 'cline',
-    logo: 'https://raw.githubusercontent.com/cline/cline/main/assets/icons/icon.png',
+    logo: 'https://media.daily.dev/image/upload/s--36tiYseE--/f_auto,q_auto/v1772048234/public/cline',
     brandColor: '#F59E0B',
   },
   {
     entity: 'claude_code',
     name: 'Claude Code',
     slug: 'claude-code',
-    logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
+    logo: 'https://media.daily.dev/image/upload/s--wo3RJzUi--/f_auto,q_auto/v1772048234/public/claude',
     brandColor: '#D97757',
   },
   {
     entity: 'codex',
     name: 'Codex',
     slug: 'codex',
-    logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
+    logo: 'https://media.daily.dev/image/upload/s--KxCFSmLf--/f_auto,q_auto/v1772048234/public/openai',
     brandColor: '#10A37F',
   },
   {
     entity: 'aider',
     name: 'Aider',
     slug: 'aider',
-    logo: 'https://aider.chat/assets/logo.svg',
+    logo: 'https://media.daily.dev/image/upload/s--Kg40cdB4--/f_auto,q_auto/v1772048234/public/aider',
     brandColor: '#8B5CF6',
   },
   {
     entity: 'opencode',
     name: 'OpenCode',
     slug: 'opencode',
-    logo: 'https://opencode.ai/favicon.ico',
+    logo: 'https://media.daily.dev/image/upload/s--szFvMrHs--/f_auto,q_auto/v1772048234/public/opencode',
     brandColor: '#EC4899',
   },
   {
     entity: 'antigravity',
     name: 'Antigravity',
     slug: 'antigravity',
-    logo: 'https://antigravity.google/favicon.ico',
+    logo: 'https://media.daily.dev/image/upload/s--5VnOo2GM--/f_auto,q_auto/v1772048234/public/antigravity',
     brandColor: '#EF4444',
   },
   {
     entity: 'kilocode',
     name: 'Kilocode',
     slug: 'kilocode',
-    logo: 'https://kilocode.ai/favicon.ico',
+    logo: 'https://media.daily.dev/image/upload/s--8eBUg8m2--/f_auto,q_auto/v1772048234/public/kilocode',
     brandColor: '#14B8A6',
   },
 ];
@@ -78,63 +78,63 @@ const LLMS: ArenaEntity[] = [
     entity: 'claude_sonnet',
     name: 'Claude Sonnet',
     slug: 'claude-sonnet',
-    logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
+    logo: 'https://media.daily.dev/image/upload/s--wo3RJzUi--/f_auto,q_auto/v1772048234/public/claude',
     brandColor: '#D97757',
   },
   {
     entity: 'claude_opus',
     name: 'Claude Opus',
     slug: 'claude-opus',
-    logo: 'https://cdn.prod.website-files.com/6889473510b50328dbb70ae6/68c33859cc6cd903686c66a2_apple-touch-icon.png',
+    logo: 'https://media.daily.dev/image/upload/s--wo3RJzUi--/f_auto,q_auto/v1772048234/public/claude',
     brandColor: '#D97757',
   },
   {
     entity: 'gpt_5',
     name: 'GPT-5',
     slug: 'gpt-5',
-    logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
+    logo: 'https://media.daily.dev/image/upload/s--KxCFSmLf--/f_auto,q_auto/v1772048234/public/openai',
     brandColor: '#10A37F',
   },
   {
     entity: 'gpt_codex',
     name: 'GPT Codex',
     slug: 'gpt-codex',
-    logo: 'https://cdn.oaistatic.com/assets/apple-touch-icon-mz9nytnj.webp',
+    logo: 'https://media.daily.dev/image/upload/s--KxCFSmLf--/f_auto,q_auto/v1772048234/public/openai',
     brandColor: '#10A37F',
   },
   {
     entity: 'deepseek',
     name: 'DeepSeek',
     slug: 'deepseek',
-    logo: 'https://deepseek.com/favicon.ico',
+    logo: 'https://media.daily.dev/image/upload/s--qf0Ls70z--/f_auto,q_auto/v1772048234/public/deepseek',
     brandColor: '#3B82F6',
   },
   {
     entity: 'gemini',
     name: 'Gemini',
     slug: 'gemini',
-    logo: 'https://www.gstatic.com/lamda/images/gemini_favicon_f069958c85030456e93de685481c559f160ea06b.png',
+    logo: 'https://media.daily.dev/image/upload/s--2shzqE5e--/f_auto,q_auto/v1772048234/public/gemini',
     brandColor: '#8E75B2',
   },
   {
     entity: 'llama',
     name: 'Llama',
     slug: 'llama',
-    logo: 'https://avatars.githubusercontent.com/u/153379578?s=200&v=4',
+    logo: 'https://media.daily.dev/image/upload/s--ApsuAYre--/f_auto,q_auto/v1772048234/public/llama',
     brandColor: '#0467DF',
   },
   {
     entity: 'qwen',
     name: 'Qwen',
     slug: 'qwen',
-    logo: 'https://avatars.githubusercontent.com/u/141221163?s=200&v=4',
+    logo: 'https://media.daily.dev/image/upload/s--FXxJSTLn--/f_auto,q_auto/v1772048234/public/qwen',
     brandColor: '#615EFF',
   },
   {
     entity: 'kimi',
     name: 'Kimi',
     slug: 'kimi',
-    logo: 'https://statics.moonshot.cn/kimi-chat/favicon.ico',
+    logo: 'https://media.daily.dev/image/upload/s--C_Z9JEzB--/f_auto,q_auto/v1772048234/public/kimi',
     brandColor: '#0EA5E9',
   },
 ];

From 96df9cc5c8836df1eb8b9a7794456f93debc55cf Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Wed, 25 Feb 2026 22:05:49 +0200
Subject: [PATCH 08/24] feat(arena): improve highlights feed behavior for
 laptop and mobile views

- Use `useViewSize` to determine layout behavior for different screen sizes.
- Show full feed on laptops while truncating on mobile unless expanded.
- Adjust `SENTIMENT_EXPONENT` to 2.5 for refined sentiment scaling in D-Index calculation.
---
 .../features/agents/arena/ArenaHighlightsFeed.tsx  | 14 +++++++++-----
 .../shared/src/features/agents/arena/dindex.ts     |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
index eaee46baa9..f2c03a7a19 100644
--- a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { useViewSize, ViewSize } from '../../../hooks';
 import type { SentimentAnnotation, SentimentHighlightItem } from './types';
 import { stripTcoLinks, formatTimeAgo } from './ArenaLiveTicker';
 
@@ -166,6 +167,7 @@ export const ArenaHighlightsFeed = ({
     [],
   );
   const [mobileExpanded, setMobileExpanded] = useState(false);
+  const isLaptop = useViewSize(ViewSize.Laptop);
   const initializedRef = useRef(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -195,12 +197,14 @@ export const ArenaHighlightsFeed = ({
     scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
-  // On mobile (no laptop:absolute), truncate items unless expanded
-  const displayItems = mobileExpanded
-    ? visibleItems
-    : visibleItems.slice(0, MOBILE_FEED_LIMIT);
+  // On laptop the feed scrolls inside a fixed-height container, so show all.
+  // On mobile, truncate unless the user taps "Show all".
+  const displayItems =
+    isLaptop || mobileExpanded
+      ? visibleItems
+      : visibleItems.slice(0, MOBILE_FEED_LIMIT);
   const hasMoreOnMobile =
-    !mobileExpanded && visibleItems.length > MOBILE_FEED_LIMIT;
+    !isLaptop && !mobileExpanded && visibleItems.length > MOBILE_FEED_LIMIT;
 
   return (
     <div className="flex h-full flex-col overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/dindex.ts
index ef2d7795c5..41c33c236f 100644
--- a/packages/shared/src/features/agents/arena/dindex.ts
+++ b/packages/shared/src/features/agents/arena/dindex.ts
@@ -76,7 +76,7 @@ const getPrevious24hWindow = (node: SentimentTimeSeriesNode): WindowData => {
   return sumWindowByTime(node, prevStart, cutoff);
 };
 
-const SENTIMENT_EXPONENT = 1.7;
+const SENTIMENT_EXPONENT = 2.5;
 
 const computeDIndex = (volume: number, sentimentScore: number): number =>
   volume * ((sentimentScore + 1) / 2) ** SENTIMENT_EXPONENT;

From 91074e5ad1fd0d57609a6b36b17452f9c1aad285 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 09:35:37 +0200
Subject: [PATCH 09/24] fix(arena): pause polling on background tabs and cap
 highlights in memory

---
 .../features/agents/arena/ArenaHighlightsFeed.tsx   | 13 +++++++++----
 .../shared/src/features/agents/arena/queries.ts     |  1 +
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
index f2c03a7a19..12d3671310 100644
--- a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -150,6 +150,7 @@ const PlaceholderCard = (): ReactElement => (
 );
 
 const MOBILE_FEED_LIMIT = 5;
+const MAX_HIGHLIGHTS = 100;
 
 interface ArenaHighlightsFeedProps {
   items: SentimentHighlightItem[];
@@ -176,10 +177,10 @@ export const ArenaHighlightsFeed = ({
       return;
     }
 
-    // First load — show everything
+    // First load — show everything (capped)
     if (!initializedRef.current) {
       initializedRef.current = true;
-      setVisibleItems(items);
+      setVisibleItems(items.slice(0, MAX_HIGHLIGHTS));
       return;
     }
 
@@ -187,12 +188,16 @@ export const ArenaHighlightsFeed = ({
     const visibleIds = new Set(visibleItems.map((i) => i.externalItemId));
     const newItems = items.filter((i) => !visibleIds.has(i.externalItemId));
     if (newItems.length > 0) {
-      setPendingItems((prev) => [...newItems, ...prev]);
+      setPendingItems((prev) =>
+        [...newItems, ...prev].slice(0, MAX_HIGHLIGHTS),
+      );
     }
   }, [items]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const showPending = (): void => {
-    setVisibleItems((prev) => [...pendingItems, ...prev]);
+    setVisibleItems((prev) =>
+      [...pendingItems, ...prev].slice(0, MAX_HIGHLIGHTS),
+    );
     setPendingItems([]);
     scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
   };
diff --git a/packages/shared/src/features/agents/arena/queries.ts b/packages/shared/src/features/agents/arena/queries.ts
index c153fa97d7..767a4502b5 100644
--- a/packages/shared/src/features/agents/arena/queries.ts
+++ b/packages/shared/src/features/agents/arena/queries.ts
@@ -20,4 +20,5 @@ export const arenaOptions = ({ groupId }: { groupId: ArenaGroupId }) => ({
   },
   staleTime: StaleTime.Base,
   refetchInterval: ARENA_REFETCH_INTERVAL,
+  refetchIntervalInBackground: false,
 });

From cae66685fd9b2349bbc03c4f20f2da42397e6edf Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 09:46:33 +0200
Subject: [PATCH 10/24] feat(arena): replace emoji with design system icons for
 crowns and rankings

Use MedalBadge, Star, Trending, Megaphone, and Hot icons with unique
accent colors instead of emoji characters for crown cards and ranking medals.
---
 .../features/agents/arena/ArenaCrownCards.tsx | 20 ++++++-------
 .../features/agents/arena/ArenaRankings.tsx   | 13 ++++++---
 .../src/features/agents/arena/dindex.ts       | 29 ++++++++++++++-----
 .../shared/src/features/agents/arena/types.ts |  6 +++-
 4 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index 852d375d60..d7dc476562 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -1,6 +1,7 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
+import { IconSize } from '../../../components/Icon';
 import type { CrownData } from './types';
 
 interface ArenaCrownCardsProps {
@@ -53,18 +54,17 @@ const CrownCard = ({
       </>
     )}
 
-    {/* Crown emoji + label */}
+    {/* Crown icon + label */}
     <div className="flex flex-col items-center gap-1">
-      <span
-        className="text-lg tablet:text-2xl"
-        style={
+      <crown.icon
+        size={IconSize.Large}
+        secondary={!loading && !!crown.entity}
+        className={classNames(
           !loading && crown.entity
-            ? { filter: 'drop-shadow(0 0 8px rgba(255,200,0,0.4))' }
-            : undefined
-        }
-      >
-        {crown.emoji}
-      </span>
+            ? crown.iconColor
+            : 'text-text-quaternary',
+        )}
+      />
       <span className="text-center font-bold uppercase tracking-wider text-text-quaternary typo-caption2 tablet:typo-caption1">
         {crown.label}
       </span>
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index 3e66d584b6..c8a759873e 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -8,6 +8,7 @@ import { ArenaAnimatedCounter } from './ArenaAnimatedCounter';
 import { formatDIndex, formatVolume } from './dindex';
 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 {
@@ -15,7 +16,11 @@ interface ArenaRankingsProps {
   loading?: boolean;
 }
 
-const RANK_MEDALS = ['\uD83E\uDD47', '\uD83E\uDD48', '\uD83E\uDD49'];
+const RANK_MEDAL_COLORS = [
+  'text-accent-cheese-default',   // gold
+  'text-text-tertiary',           // silver
+  'text-accent-bacon-default',    // bronze
+];
 
 const Placeholder = ({ className }: { className?: string }): ReactElement => (
   <div
@@ -79,7 +84,7 @@ const RankingRow = ({
   onToggle: () => void;
 }): ReactElement => {
   const momentum = getMomentumDisplay(tool.momentum);
-  const medal = RANK_MEDALS[rank - 1] || '';
+  const medalColor = RANK_MEDAL_COLORS[rank - 1];
   const isHot = !loading && tool.volume24h > 500;
 
   return (
@@ -109,8 +114,8 @@ const RankingRow = ({
       >
         {/* Rank */}
         <div className="flex w-8 shrink-0 items-center justify-center laptop:w-10">
-          {medal ? (
-            <span className="text-lg">{medal}</span>
+          {medalColor ? (
+            <MedalBadgeIcon size={IconSize.Small} secondary className={medalColor} />
           ) : (
             <span className="font-bold text-text-quaternary typo-callout">
               {rank}
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/dindex.ts
index 41c33c236f..72dd22a1d7 100644
--- a/packages/shared/src/features/agents/arena/dindex.ts
+++ b/packages/shared/src/features/agents/arena/dindex.ts
@@ -9,6 +9,11 @@ import {
   getEntityByKey,
   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;
 
@@ -238,7 +243,8 @@ interface CrownThresholds {
 const CROWN_CONFIG: Record<
   string,
   {
-    emoji: string;
+    icon: CrownData['icon'];
+    iconColor: string;
     label: string;
     thresholds: CrownThresholds;
     getValue: (t: RankedTool) => number;
@@ -246,21 +252,24 @@ const CROWN_CONFIG: Record<
   }
 > = {
   'developers-choice': {
-    emoji: '\uD83C\uDFC6',
+    icon: MedalBadgeIcon,
+    iconColor: 'text-accent-cheese-default',
     label: "Developer's Choice",
     thresholds: { minVolume: 10 },
     getValue: (t) => t.dIndex,
     formatStat: (t) => `${formatDIndex(t.dIndex)} D-Index`,
   },
   'most-loved': {
-    emoji: '\uD83D\uDC9C',
+    icon: StarIcon,
+    iconColor: 'text-accent-cabbage-default',
     label: 'Most Loved',
     thresholds: { minVolume: 10 },
     getValue: (t) => t.sentimentDisplay,
     formatStat: (t) => `${t.sentimentDisplay} / 100`,
   },
   'fastest-rising': {
-    emoji: '\uD83D\uDE80',
+    icon: TrendingIcon,
+    iconColor: 'text-accent-avocado-default',
     label: 'Fastest Rising',
     thresholds: { minVolume: 5 },
     getValue: (t) => t.momentum,
@@ -270,14 +279,16 @@ const CROWN_CONFIG: Record<
       }% vs prior 24h`,
   },
   'most-discussed': {
-    emoji: '\uD83D\uDCE2',
+    icon: MegaphoneIcon,
+    iconColor: 'text-accent-blueCheese-default',
     label: 'Most Discussed',
     thresholds: { minVolume: 0 },
     getValue: (t) => t.volume24h,
     formatStat: (t) => `${formatVolume(t.volume24h)} mentions`,
   },
   'most-controversial': {
-    emoji: '\uD83D\uDCA5',
+    icon: HotIcon,
+    iconColor: 'text-accent-ketchup-default',
     label: 'Most Controversial',
     thresholds: { minVolume: 10 },
     getValue: (t) => t.controversyScore,
@@ -305,7 +316,8 @@ export const computeCrowns = (tools: RankedTool[]): CrownData[] => {
     if (eligible.length === 0) {
       return {
         type,
-        emoji: config.emoji,
+        icon: config.icon,
+        iconColor: config.iconColor,
         label: config.label,
         entity: null,
         stat: '',
@@ -319,7 +331,8 @@ export const computeCrowns = (tools: RankedTool[]): CrownData[] => {
 
     return {
       type,
-      emoji: config.emoji,
+      icon: config.icon,
+      iconColor: config.iconColor,
       label: config.label,
       entity: winner.entity,
       stat: config.formatStat(winner),
diff --git a/packages/shared/src/features/agents/arena/types.ts b/packages/shared/src/features/agents/arena/types.ts
index a407b28d21..79d798ee19 100644
--- a/packages/shared/src/features/agents/arena/types.ts
+++ b/packages/shared/src/features/agents/arena/types.ts
@@ -1,3 +1,6 @@
+import type { ComponentType } from 'react';
+import type { IconProps } from '../../../components/Icon';
+
 export type ArenaGroupId = 'coding-agents' | 'llms';
 
 export type ArenaTab = 'coding-agents' | 'llms';
@@ -40,7 +43,8 @@ export type CrownType =
 
 export interface CrownData {
   type: CrownType;
-  emoji: string;
+  icon: ComponentType<IconProps>;
+  iconColor: string;
   label: string;
   entity: ArenaEntity | null;
   stat: string;

From 24424c7561410bf3e715775a7fda3c9a9ce0de65 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 10:45:14 +0200
Subject: [PATCH 11/24] feat(arena): polish crown cards, rankings layout, and
 highlights feed

- Tint crown labels with glow color for better visibility
- Move LiveIndicator into tab bar, simplify header layout
- Reorder columns (volume before momentum), clean up spacing
- Unify highlight feed header and new-posts badge across breakpoints
- Lower sentiment green threshold to 60, remove arrow symbols from momentum
- Add glowColor to crown config and use color-mix for card glow effects
---
 .../features/agents/arena/ArenaCrownCards.tsx |  47 +++---
 .../agents/arena/ArenaHighlightsFeed.tsx      |  19 +--
 .../src/features/agents/arena/ArenaPage.tsx   |  24 +--
 .../features/agents/arena/ArenaRankings.tsx   | 137 ++++++++----------
 .../agents/arena/ArenaSentimentBar.tsx        |   4 +-
 .../src/features/agents/arena/dindex.ts       |  22 ++-
 .../shared/src/features/agents/arena/types.ts |   1 +
 7 files changed, 121 insertions(+), 133 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index d7dc476562..fa7713fd0b 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -28,30 +28,26 @@ const CrownCard = ({
   <div
     className={classNames(
       'relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 tablet:min-w-[180px] tablet:gap-3 tablet:p-5',
-      loading
-        ? 'border-border-subtlest-tertiary bg-surface-float'
-        : 'border-border-subtlest-secondary bg-surface-float',
+      'border-border-subtlest-tertiary',
     )}
     style={
-      !loading && crown.entity?.brandColor
+      !loading && crown.entity
         ? {
-            boxShadow: `0 0 30px ${crown.entity.brandColor}20, inset 0 1px 0 ${crown.entity.brandColor}30`,
+            boxShadow: `0 0 30px color-mix(in srgb, ${crown.glowColor} 12%, transparent), inset 0 1px 0 color-mix(in srgb, ${crown.glowColor} 19%, transparent)`,
           }
         : undefined
     }
   >
     {/* Animated gradient glow that breathes */}
-    {!loading && crown.entity?.brandColor && (
-      <>
-        <div
-          className="pointer-events-none absolute -top-10 left-1/2 h-28 w-28 -translate-x-1/2 rounded-full blur-2xl"
-          style={{
-            backgroundColor: crown.entity.brandColor,
-            animation: 'pulse 3s ease-in-out infinite',
-            opacity: 0.15,
-          }}
-        />
-      </>
+    {!loading && crown.entity && (
+      <div
+        className="pointer-events-none absolute -top-10 left-1/2 h-28 w-28 -translate-x-1/2 rounded-full blur-2xl"
+        style={{
+          backgroundColor: crown.glowColor,
+          animation: 'pulse 3s ease-in-out infinite',
+          opacity: 0.15,
+        }}
+      />
     )}
 
     {/* Crown icon + label */}
@@ -60,12 +56,17 @@ const CrownCard = ({
         size={IconSize.Large}
         secondary={!loading && !!crown.entity}
         className={classNames(
-          !loading && crown.entity
-            ? crown.iconColor
-            : 'text-text-quaternary',
+          !loading && crown.entity ? crown.iconColor : 'text-text-quaternary',
         )}
       />
-      <span className="text-center font-bold uppercase tracking-wider text-text-quaternary typo-caption2 tablet:typo-caption1">
+      <span
+        className="text-center tracking-wider typo-caption2 tablet:typo-caption1"
+        style={
+          !loading && crown.entity
+            ? { color: crown.glowColor }
+            : undefined
+        }
+      >
         {crown.label}
       </span>
     </div>
@@ -84,7 +85,7 @@ const CrownCard = ({
             alt={crown.entity?.name}
             className="h-6 w-6 shrink-0 rounded-8 bg-surface-float object-cover tablet:h-8 tablet:w-8"
           />
-          <span className="truncate font-bold text-text-primary typo-callout tablet:typo-title3">
+          <span className="truncate font-bold text-text-primary typo-callout">
             {crown.entity?.name}
           </span>
         </>
@@ -96,9 +97,7 @@ const CrownCard = ({
       {loading ? (
         <Placeholder className="h-4 w-16" />
       ) : (
-        <span className="font-bold text-text-secondary typo-callout">
-          {crown.stat}
-        </span>
+        <span className="text-text-tertiary typo-caption1">{crown.stat}</span>
       )}
     </div>
   </div>
diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
index 12d3671310..9070e9c94f 100644
--- a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -115,7 +115,7 @@ const HighlightCard = ({
         </div>
 
         {/* Full text */}
-        <p className="whitespace-pre-wrap break-words text-text-secondary typo-footnote">
+        <p className="whitespace-pre-wrap break-words text-text-secondary typo-callout">
           {cleanText}
         </p>
 
@@ -219,25 +219,16 @@ export const ArenaHighlightsFeed = ({
           __html: `@keyframes slide-down{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}`,
         }}
       />
-      {/* Feed header — mobile only */}
-      <div className="flex items-center justify-between border-b border-border-subtlest-secondary px-4 py-2.5 laptop:hidden">
+      {/* Feed header */}
+      <div className="flex items-center border-b border-border-subtlest-tertiary px-4 py-2.5">
         <span className="font-bold text-text-primary typo-callout">
           Live Highlights
         </span>
-        {!loading && pendingItems.length > 0 && (
-          <button
-            type="button"
-            onClick={showPending}
-            className="rounded-8 bg-accent-cabbage-default px-2.5 py-1 font-bold text-white typo-caption2 active:scale-95"
-          >
-            +{pendingItems.length} new
-          </button>
-        )}
       </div>
 
-      {/* New posts badge — floats over feed (laptop only) */}
+      {/* New posts badge — floats over feed */}
       {!loading && pendingItems.length > 0 && (
-        <div className="z-10 pointer-events-none absolute inset-x-0 top-3 hidden justify-center laptop:flex">
+        <div className="z-10 pointer-events-none absolute inset-x-0 top-12 flex justify-center">
           <button
             type="button"
             onClick={showPending}
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index eb399a243a..7e53ab33a3 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -90,22 +90,19 @@ export const ArenaPage = ({
 
       {/* Header */}
       <header className="px-4 pt-6 laptop:px-0 laptop:pt-10">
-        <div className="flex flex-col gap-2 tablet:flex-row tablet:items-start tablet:justify-between tablet:gap-0">
-          <div className="flex flex-col gap-1">
-            <h1 className="flex items-center gap-2 font-bold text-text-primary typo-title2 laptop:typo-title1">
-              <span aria-hidden="true">&#x2694;&#xFE0F;</span>
-              The Arena
-            </h1>
-            <p className="text-text-tertiary typo-footnote">
-              Where AI tools fight for developer love
-            </p>
-          </div>
-          <LiveIndicator />
+        <div className="flex flex-col gap-1">
+          <h1 className="flex items-center gap-2 font-bold text-text-primary typo-title2 laptop:typo-title1">
+            <span aria-hidden="true">&#x2694;&#xFE0F;</span>
+            The Arena
+          </h1>
+          <p className="text-text-tertiary typo-footnote">
+            Where AI tools fight for developer love
+          </p>
         </div>
       </header>
 
       {/* Tab switcher */}
-      <nav className="sticky top-0 z-3 mt-4 flex gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-0">
+      <nav className="sticky top-0 z-3 mt-4 flex items-center gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-0">
         {ARENA_TABS.map((tab) => (
           <button
             key={tab.value}
@@ -124,6 +121,9 @@ export const ArenaPage = ({
             )}
           </button>
         ))}
+        <div className="ml-auto">
+          <LiveIndicator />
+        </div>
       </nav>
 
       {/* Content */}
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index c8a759873e..029d88c996 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -17,9 +17,9 @@ interface ArenaRankingsProps {
 }
 
 const RANK_MEDAL_COLORS = [
-  'text-accent-cheese-default',   // gold
-  'text-text-tertiary',           // silver
-  'text-accent-bacon-default',    // bronze
+  'text-accent-cheese-default', // gold
+  'text-text-tertiary', // silver
+  'text-accent-bacon-default', // bronze
 ];
 
 const Placeholder = ({ className }: { className?: string }): ReactElement => (
@@ -36,17 +36,17 @@ const getMomentumDisplay = (
 ): { text: string; color: string } => {
   if (momentum > 0) {
     return {
-      text: `\u25B2 +${momentum}%`,
+      text: `+${momentum}%`,
       color: 'text-accent-avocado-default',
     };
   }
   if (momentum < 0) {
     return {
-      text: `\u25BC ${momentum}%`,
+      text: `${momentum}%`,
       color: 'text-accent-ketchup-default',
     };
   }
-  return { text: '\u2501 0%', color: 'text-text-quaternary' };
+  return { text: '0%', color: 'text-text-quaternary' };
 };
 
 const ChevronIcon = ({ expanded }: { expanded: boolean }): ReactElement => (
@@ -85,7 +85,6 @@ const RankingRow = ({
 }): ReactElement => {
   const momentum = getMomentumDisplay(tool.momentum);
   const medalColor = RANK_MEDAL_COLORS[rank - 1];
-  const isHot = !loading && tool.volume24h > 500;
 
   return (
     <div
@@ -98,24 +97,20 @@ const RankingRow = ({
         transition: 'transform 0.5s ease, background-color 0.3s ease',
       }}
     >
-      {/* Activity heat - left border glow */}
-      {isHot && (
-        <div
-          className="absolute bottom-0 left-0 top-0 w-0.5 animate-pulse rounded-full"
-          style={{ backgroundColor: tool.entity.brandColor }}
-        />
-      )}
-
       {/* Main row — clickable on mobile to expand */}
       <button
         type="button"
-        className="flex min-h-[52px] w-full items-center gap-3 px-4 py-3 text-left laptop:cursor-default"
+        className="flex min-h-[52px] w-full items-center gap-3 py-3 pl-2 pr-4 text-left laptop:cursor-default"
         onClick={onToggle}
       >
         {/* Rank */}
         <div className="flex w-8 shrink-0 items-center justify-center laptop:w-10">
           {medalColor ? (
-            <MedalBadgeIcon size={IconSize.Small} secondary className={medalColor} />
+            <MedalBadgeIcon
+              size={IconSize.Small}
+              secondary
+              className={medalColor}
+            />
           ) : (
             <span className="font-bold text-text-quaternary typo-callout">
               {rank}
@@ -152,7 +147,7 @@ const RankingRow = ({
             <ArenaAnimatedCounter
               value={tool.dIndex}
               format={formatDIndex}
-              className="font-bold tabular-nums text-text-primary typo-title3"
+              className="font-bold tabular-nums text-text-primary typo-callout"
             />
           )}
         </div>
@@ -166,6 +161,17 @@ const RankingRow = ({
           )}
         </div>
 
+        {/* Volume — laptop+ inline */}
+        <div className="hidden min-w-[60px] shrink-0 items-center laptop:flex">
+          {loading ? (
+            <Placeholder className="h-4 w-10" />
+          ) : (
+            <span className="text-text-tertiary typo-caption1">
+              {formatVolume(tool.volume24h)}
+            </span>
+          )}
+        </div>
+
         {/* Momentum — laptop+ inline */}
         <div className="hidden min-w-[80px] shrink-0 items-center laptop:flex">
           {loading ? (
@@ -179,17 +185,6 @@ const RankingRow = ({
           )}
         </div>
 
-        {/* Volume — laptop+ inline */}
-        <div className="hidden min-w-[60px] shrink-0 items-center laptop:flex">
-          {loading ? (
-            <Placeholder className="h-4 w-10" />
-          ) : (
-            <span className="text-text-tertiary typo-caption1">
-              {formatVolume(tool.volume24h)}
-            </span>
-          )}
-        </div>
-
         {/* Sparkline — laptop+ inline */}
         <div className="ml-auto hidden items-center laptop:flex">
           {loading ? (
@@ -217,6 +212,14 @@ const RankingRow = ({
               </span>
               <ArenaSentimentBar value={tool.sentimentDisplay} />
             </div>
+            <div className="flex flex-col gap-1">
+              <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
+                24h Vol
+              </span>
+              <span className="text-text-tertiary typo-caption1">
+                {formatVolume(tool.volume24h)}
+              </span>
+            </div>
             <div className="flex flex-col gap-1">
               <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
                 Momentum
@@ -230,14 +233,6 @@ const RankingRow = ({
                 {momentum.text}
               </span>
             </div>
-            <div className="flex flex-col gap-1">
-              <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
-                24h Vol
-              </span>
-              <span className="text-text-tertiary typo-caption1">
-                {formatVolume(tool.volume24h)}
-              </span>
-            </div>
           </div>
           <div className="flex flex-col gap-1">
             <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
@@ -263,29 +258,26 @@ const EmergingRow = ({
   tool: RankedTool;
   loading?: boolean;
 }): ReactElement => (
-  <div className="flex items-center gap-3 px-4 py-2.5 opacity-50">
-    <div className="w-10 shrink-0" />
-    <div className="flex items-center gap-2.5">
-      {loading ? (
-        <>
-          <Placeholder className="h-6 w-6 rounded-8" />
-          <Placeholder className="h-4 w-20" />
-        </>
-      ) : (
-        <>
-          <img
-            src={tool.entity.logo}
-            alt={tool.entity.name}
-            className="opacity-60 h-6 w-6 rounded-8 bg-surface-float object-cover"
-          />
-          <span className="text-text-tertiary typo-callout">
-            {tool.entity.name}
-          </span>
-        </>
-      )}
-    </div>
+  <div className="flex items-center gap-2.5 px-4 py-2.5 opacity-50">
+    {loading ? (
+      <>
+        <Placeholder className="h-6 w-6 rounded-8" />
+        <Placeholder className="h-4 w-20" />
+      </>
+    ) : (
+      <>
+        <img
+          src={tool.entity.logo}
+          alt={tool.entity.name}
+          className="opacity-60 h-6 w-6 rounded-8 bg-surface-float object-cover"
+        />
+        <span className="text-text-tertiary typo-callout">
+          {tool.entity.name}
+        </span>
+      </>
+    )}
     {!loading && (
-      <span className="ml-auto text-text-disabled typo-caption2">
+      <span className="ml-auto text-text-tertiary typo-caption2">
         Not enough data yet
       </span>
     )}
@@ -312,7 +304,7 @@ const PLACEHOLDER_ROW_COUNT = 6;
 const PlaceholderRow = ({ rank }: { rank: number }): ReactElement => (
   <div
     className={classNames(
-      'flex min-h-[52px] items-center gap-3 border-b border-border-subtlest-tertiary px-4 py-3',
+      'flex min-h-[52px] items-center gap-3 border-b border-border-subtlest-tertiary py-3 pl-2 pr-4',
       rank <= 3 && 'bg-surface-float',
     )}
   >
@@ -329,12 +321,12 @@ const PlaceholderRow = ({ rank }: { rank: number }): ReactElement => (
     <div className="hidden min-w-[100px] shrink-0 tablet:block">
       <Placeholder className="h-4 w-20" />
     </div>
-    <div className="hidden min-w-[80px] shrink-0 laptop:block">
-      <Placeholder className="h-4 w-14" />
-    </div>
     <div className="hidden min-w-[60px] shrink-0 laptop:block">
       <Placeholder className="h-4 w-10" />
     </div>
+    <div className="hidden min-w-[80px] shrink-0 laptop:block">
+      <Placeholder className="h-4 w-14" />
+    </div>
     <div className="ml-auto hidden laptop:block">
       <Placeholder className="h-6 w-16" />
     </div>
@@ -354,9 +346,9 @@ export const ArenaRankings = ({
   return (
     <div className="overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
       {/* Header */}
-      <div className="flex items-center gap-3 border-b border-border-subtlest-secondary px-4 py-2.5">
+      <div className="flex items-center gap-3 border-b border-border-subtlest-tertiary py-2.5 pl-2 pr-4">
         <span className="w-8 shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:w-10">
-          #
+          &nbsp;
         </span>
         <span className="flex-1 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:w-[140px] laptop:flex-none laptop:shrink-0">
           Tool
@@ -373,18 +365,18 @@ export const ArenaRankings = ({
             tooltip="How positively developers talk about this tool (0–100)"
           />
         </span>
-        <span className="hidden min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
-          <HeaderWithTooltip
-            label="Momentum"
-            tooltip="D-Index change compared to the previous 24-hour window"
-          />
-        </span>
         <span className="hidden min-w-[60px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
           <HeaderWithTooltip
             label="24h Vol"
             tooltip="Total developer mentions in the last 24 hours"
           />
         </span>
+        <span className="hidden min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
+          <HeaderWithTooltip
+            label="Momentum"
+            tooltip="D-Index change compared to the previous 24-hour window"
+          />
+        </span>
         <span className="ml-auto hidden font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
           7d Trend
         </span>
@@ -418,11 +410,10 @@ export const ArenaRankings = ({
       {/* Emerging section */}
       {emerging.length > 0 && (
         <>
-          <div className="flex items-center gap-3 border-t border-border-subtlest-secondary px-4 py-2">
+          <div className="flex items-center border-t border-border-subtlest-tertiary px-4 py-2">
             <span className="font-bold uppercase tracking-wider text-text-disabled typo-caption2">
               Emerging
             </span>
-            <div className="h-px flex-1 bg-border-subtlest-tertiary" />
           </div>
           {emerging.map((tool) => (
             <EmergingRow
diff --git a/packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx b/packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx
index 7084b132df..af3f0f3d5b 100644
--- a/packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaSentimentBar.tsx
@@ -7,7 +7,7 @@ interface ArenaSentimentBarProps {
 }
 
 const getSentimentColor = (value: number): string => {
-  if (value > 70) {
+  if (value > 60) {
     return 'bg-accent-avocado-default';
   }
   if (value >= 40) {
@@ -17,7 +17,7 @@ const getSentimentColor = (value: number): string => {
 };
 
 const getSentimentTextColor = (value: number): string => {
-  if (value > 70) {
+  if (value > 60) {
     return 'text-accent-avocado-default';
   }
   if (value >= 40) {
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/dindex.ts
index 72dd22a1d7..2c98d2d7d9 100644
--- a/packages/shared/src/features/agents/arena/dindex.ts
+++ b/packages/shared/src/features/agents/arena/dindex.ts
@@ -245,6 +245,7 @@ const CROWN_CONFIG: Record<
   {
     icon: CrownData['icon'];
     iconColor: string;
+    glowColor: string;
     label: string;
     thresholds: CrownThresholds;
     getValue: (t: RankedTool) => number;
@@ -254,7 +255,8 @@ const CROWN_CONFIG: Record<
   'developers-choice': {
     icon: MedalBadgeIcon,
     iconColor: 'text-accent-cheese-default',
-    label: "Developer's Choice",
+    glowColor: 'var(--theme-accent-cheese-default)',
+    label: "Developer's choice",
     thresholds: { minVolume: 10 },
     getValue: (t) => t.dIndex,
     formatStat: (t) => `${formatDIndex(t.dIndex)} D-Index`,
@@ -262,7 +264,8 @@ const CROWN_CONFIG: Record<
   'most-loved': {
     icon: StarIcon,
     iconColor: 'text-accent-cabbage-default',
-    label: 'Most Loved',
+    glowColor: 'var(--theme-accent-cabbage-default)',
+    label: 'Most loved',
     thresholds: { minVolume: 10 },
     getValue: (t) => t.sentimentDisplay,
     formatStat: (t) => `${t.sentimentDisplay} / 100`,
@@ -270,18 +273,18 @@ const CROWN_CONFIG: Record<
   'fastest-rising': {
     icon: TrendingIcon,
     iconColor: 'text-accent-avocado-default',
-    label: 'Fastest Rising',
+    glowColor: 'var(--theme-accent-avocado-default)',
+    label: 'Fastest rising',
     thresholds: { minVolume: 5 },
     getValue: (t) => t.momentum,
     formatStat: (t) =>
-      `${t.momentum > 0 ? '\u25B2' : '\u25BC'} ${t.momentum > 0 ? '+' : ''}${
-        t.momentum
-      }% vs prior 24h`,
+      `${t.momentum > 0 ? '+' : ''}${t.momentum}% vs prior 24h`,
   },
   'most-discussed': {
     icon: MegaphoneIcon,
     iconColor: 'text-accent-blueCheese-default',
-    label: 'Most Discussed',
+    glowColor: 'var(--theme-accent-blueCheese-default)',
+    label: 'Most discussed',
     thresholds: { minVolume: 0 },
     getValue: (t) => t.volume24h,
     formatStat: (t) => `${formatVolume(t.volume24h)} mentions`,
@@ -289,7 +292,8 @@ const CROWN_CONFIG: Record<
   'most-controversial': {
     icon: HotIcon,
     iconColor: 'text-accent-ketchup-default',
-    label: 'Most Controversial',
+    glowColor: 'var(--theme-accent-ketchup-default)',
+    label: 'Most controversial',
     thresholds: { minVolume: 10 },
     getValue: (t) => t.controversyScore,
     formatStat: (t) => `Heat ${t.heat}`,
@@ -318,6 +322,7 @@ export const computeCrowns = (tools: RankedTool[]): CrownData[] => {
         type,
         icon: config.icon,
         iconColor: config.iconColor,
+        glowColor: config.glowColor,
         label: config.label,
         entity: null,
         stat: '',
@@ -333,6 +338,7 @@ export const computeCrowns = (tools: RankedTool[]): CrownData[] => {
       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/types.ts b/packages/shared/src/features/agents/arena/types.ts
index 79d798ee19..84225e3c49 100644
--- a/packages/shared/src/features/agents/arena/types.ts
+++ b/packages/shared/src/features/agents/arena/types.ts
@@ -45,6 +45,7 @@ export interface CrownData {
   type: CrownType;
   icon: ComponentType<IconProps>;
   iconColor: string;
+  glowColor: string;
   label: string;
   entity: ArenaEntity | null;
   stat: string;

From 403589230d3c9eed646da13f8e46a2410b1c544c Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 11:01:48 +0200
Subject: [PATCH 12/24] fix(arena): unify 7d trend sparkline color to neutral
 text-tertiary

---
 .../shared/src/features/agents/arena/ArenaCrownCards.tsx    | 4 +---
 packages/shared/src/features/agents/arena/ArenaRankings.tsx | 6 +-----
 .../shared/src/features/agents/arena/ArenaSparkline.tsx     | 2 +-
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index fa7713fd0b..0a2c0e63fa 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -62,9 +62,7 @@ const CrownCard = ({
       <span
         className="text-center tracking-wider typo-caption2 tablet:typo-caption1"
         style={
-          !loading && crown.entity
-            ? { color: crown.glowColor }
-            : undefined
+          !loading && crown.entity ? { color: crown.glowColor } : undefined
         }
       >
         {crown.label}
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index 029d88c996..3205e21ec3 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -190,10 +190,7 @@ const RankingRow = ({
           {loading ? (
             <Placeholder className="h-6 w-16" />
           ) : (
-            <ArenaSparkline
-              data={tool.sparkline}
-              color={tool.entity.brandColor}
-            />
+            <ArenaSparkline data={tool.sparkline} />
           )}
         </div>
 
@@ -242,7 +239,6 @@ const RankingRow = ({
               data={tool.sparkline}
               width={200}
               height={32}
-              color={tool.entity.brandColor}
             />
           </div>
         </div>
diff --git a/packages/shared/src/features/agents/arena/ArenaSparkline.tsx b/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
index 0db7d1f8e2..96a061b23e 100644
--- a/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
@@ -21,7 +21,7 @@ export const ArenaSparkline = ({
   const chartWidth = width - padding * 2;
   const chartHeight = height - padding * 2;
   const step = chartWidth / Math.max(data.length - 1, 1);
-  const strokeColor = color || 'var(--theme-accent-cabbage-default)';
+  const strokeColor = color || 'var(--theme-text-tertiary)';
   const gradientId = `sparkGrad-${data.join('-').slice(0, 20)}`;
 
   const points = data.map((value, i) => ({

From ef8d31de7f14c65c23572bc2805f3874b1954719 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 13:57:34 +0200
Subject: [PATCH 13/24] feat(arena): refine crown microinteractions and polish
 leaderboard UI

---
 .../src/components/icons/Arena/icon.svg       |  27 +
 .../src/components/icons/Arena/index.tsx      |   9 +
 .../features/agents/arena/ArenaCrownCards.tsx | 971 ++++++++++++++++--
 .../src/features/agents/arena/ArenaPage.tsx   |  20 +-
 .../features/agents/arena/ArenaRankings.tsx   |  49 +-
 5 files changed, 970 insertions(+), 106 deletions(-)
 create mode 100644 packages/shared/src/components/icons/Arena/icon.svg
 create mode 100644 packages/shared/src/components/icons/Arena/index.tsx

diff --git a/packages/shared/src/components/icons/Arena/icon.svg b/packages/shared/src/components/icons/Arena/icon.svg
new file mode 100644
index 0000000000..033d43518f
--- /dev/null
+++ b/packages/shared/src/components/icons/Arena/icon.svg
@@ -0,0 +1,27 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Flag: thin pole + small pennant -->
+  <line x1="12" y1="2" x2="12" y2="5.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+  <path d="M12 2.5l2.2.8-2.2.8" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" fill="none"/>
+
+  <!-- Top rim ellipse (the open roof) -->
+  <ellipse cx="12" cy="8" rx="8" ry="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+
+  <!-- Stadium walls — two vertical sides connecting top rim to bottom ellipse -->
+  <line x1="4" y1="8" x2="4" y2="16.5" stroke="currentColor" stroke-width="1.2"/>
+  <line x1="20" y1="8" x2="20" y2="16.5" stroke="currentColor" stroke-width="1.2"/>
+
+  <!-- Bottom ellipse (base of stadium) — only the front half visible -->
+  <path d="M4 16.5c0 1.38 3.582 2.5 8 2.5s8-1.12 8-2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+
+  <!-- Horizontal band across middle of wall -->
+  <path d="M4 12.5c0 1.38 3.582 2.5 8 2.5s8-1.12 8-2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+
+  <!-- Pillar accents — upper tier (rim to mid-band) -->
+  <line x1="7" y1="10.2" x2="7" y2="13.2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+  <line x1="9.5" y1="10.4" x2="9.5" y2="13.8" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+  <line x1="14.5" y1="10.4" x2="14.5" y2="13.8" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+  <line x1="17" y1="10.2" x2="17" y2="13.2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
+
+  <!-- Arched gate entrance -->
+  <path d="M10.8 19v-1.5a1.2 1.2 0 0 1 2.4 0v1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Arena/index.tsx b/packages/shared/src/components/icons/Arena/index.tsx
new file mode 100644
index 0000000000..704636e18a
--- /dev/null
+++ b/packages/shared/src/components/icons/Arena/index.tsx
@@ -0,0 +1,9 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import IconSvg from './icon.svg';
+
+export const ArenaIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={IconSvg} IconSecondary={IconSvg} />
+);
diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index 0a2c0e63fa..92a9d35146 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -1,14 +1,473 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import { IconSize } from '../../../components/Icon';
-import type { CrownData } from './types';
+import type { CrownData, CrownType } from './types';
 
 interface ArenaCrownCardsProps {
   crowns: CrownData[];
   loading?: boolean;
 }
 
+const crownHoverAnimations: Partial<Record<CrownType, string>> = {
+  'developers-choice': 'crown-hover-developers-choice',
+  'most-loved': 'crown-hover-most-loved',
+  'fastest-rising': 'crown-hover-fastest-rising',
+  'most-discussed': 'crown-hover-most-discussed',
+  'most-controversial': 'crown-hover-most-controversial',
+};
+
+/* ── Per-crown icon animation overrides ────────────────────────────── */
+const crownIconAnimation: Partial<Record<CrownType, string>> = {
+  'most-loved': 'crown-icon-bloom-pulse 1.2s ease-in-out',
+};
+const DEFAULT_ICON_ANIMATION = 'crown-icon-pop 1.2s ease-out';
+
+const forceReflow = (element: Element): void => {
+  element.getBoundingClientRect();
+};
+
+const restartAnimation = (
+  element: HTMLElement | SVGElement,
+  animation: string,
+): void => {
+  const { style } = element;
+  style.animation = 'none';
+  forceReflow(element);
+  style.animation = animation;
+};
+
+/* ── Spark particle tuning ─────────────────────────────────────────── */
+const SPARK_CONFIG = {
+  count: 7, // number of particles
+  radius: 30, // max travel distance in px
+  burstPct: 20, // % of animation where the fast burst ends (higher = slower burst)
+  burstRatio: 0.65, // fraction of radius reached at burstPct (0-1)
+  angleMin: -50, // minimum angle in degrees (0 = straight up, negative = left)
+  angleMax: 50, // maximum angle in degrees (positive = right)
+  duration: 1.2, // total animation duration in seconds
+  staggerMax: 0.08, // max stagger delay between particles in seconds
+};
+
+/**
+ * Randomizes spark particle trajectories via CSS custom properties
+ * and restarts their animations. Called on each mouseenter — no React state needed.
+ */
+const randomizeSparks = (card: HTMLElement): void => {
+  const {
+    count,
+    radius,
+    burstRatio,
+    angleMin,
+    angleMax,
+    duration,
+    staggerMax,
+  } = SPARK_CONFIG;
+  const sparks = card.querySelectorAll<HTMLElement>('.crown-spark');
+  const angleRange = angleMax - angleMin;
+
+  sparks.forEach((el, i) => {
+    const { style } = el;
+    // spread evenly around the ring, jitter ±20% of slot width
+    const isFullCircle = angleRange >= 360;
+    const slots = isFullCircle ? count : Math.max(count - 1, 1);
+    const slotWidth = angleRange / slots;
+    const baseAngle = angleMin + (i / slots) * angleRange;
+    const jitter = (Math.random() - 0.5) * slotWidth * 0.4;
+    const angle = baseAngle + jitter;
+    const rad = (angle * Math.PI) / 180;
+
+    // randomize radius ±20%
+    const r = radius * (0.95 + Math.random() * 0.05);
+    const burstR = r * burstRatio;
+
+    const bx = Math.round(Math.sin(rad) * burstR);
+    const by = Math.round(-Math.cos(rad) * burstR);
+    const fx = Math.round(Math.sin(rad) * r);
+    const fy = Math.round(-Math.cos(rad) * r);
+
+    style.setProperty('--spark-bx', `${bx}px`);
+    style.setProperty('--spark-by', `${by}px`);
+    style.setProperty('--spark-fx', `${fx}px`);
+    style.setProperty('--spark-fy', `${fy}px`);
+    style.setProperty(
+      '--spark-peak',
+      `${(0.7 + Math.random() * 0.3).toFixed(2)}`,
+    );
+    style.setProperty(
+      '--spark-delay',
+      `${(Math.random() * staggerMax).toFixed(2)}s`,
+    );
+
+    restartAnimation(
+      el,
+      `crown-spark ${duration}s ease-out var(--spark-delay) forwards`,
+    );
+  });
+};
+
+/**
+ * Restarts the icon pop/heartbeat animation via DOM.
+ */
+const restartIconAnimation = (
+  card: HTMLElement,
+  crownType: CrownType,
+): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+  const anim = crownIconAnimation[crownType] ?? DEFAULT_ICON_ANIMATION;
+  restartAnimation(iconWrapper, anim);
+};
+
+/**
+ * Restarts the warm bloom animation for the most-loved crown.
+ */
+const restartBloom = (card: HTMLElement): void => {
+  const bloom = card.querySelector<HTMLElement>('.crown-bloom');
+  if (!bloom) {
+    return;
+  }
+  restartAnimation(bloom, 'crown-bloom 1.4s ease-in-out forwards');
+};
+
+/* ── Ghost-trail config (fastest-rising) ─────────────────────────────── */
+const GHOST_CONFIG = {
+  count: 5, // number of afterimage clones
+  spacing: 6, // px between each ghost along the trail axis
+  blur: [0.5, 1, 1.8, 2.8, 4], // blur per ghost layer in px
+  opacities: [0.5, 0.38, 0.26, 0.15, 0.07], // opacity per ghost layer
+  stretch: [1.08, 1.14, 1.2, 1.28, 1.36], // scaleY stretch per ghost (elongation along trail)
+  lungeDist: [7, 11], // min/max lunge distance in px
+  lungeAngle: [38, 52], // min/max lunge angle in degrees from horizontal
+  duration: 0.9, // animation duration in seconds
+};
+
+/**
+ * Creates ghost-clone afterimages of the icon trailing behind the lunge
+ * direction. Clones the actual SVG element so the trail perfectly matches
+ * the icon shape. Clones are cleaned up after the animation completes.
+ */
+const restartRocket = (card: HTMLElement, glowColor: string): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  // Clean up any leftover ghosts from a previous hover
+  iconWrapper.querySelectorAll('.crown-ghost').forEach((el) => el.remove());
+
+  // Find the original SVG (not a ghost clone)
+  const svg = iconWrapper.querySelector<SVGElement>(':scope > svg');
+  if (!svg) {
+    return;
+  }
+
+  // Reset SVG animation so it can restart cleanly
+  svg.style.animation = 'none';
+  forceReflow(svg);
+
+  // Randomize lunge direction
+  const {
+    count,
+    spacing,
+    blur,
+    opacities,
+    stretch,
+    lungeDist,
+    lungeAngle,
+    duration,
+  } = GHOST_CONFIG;
+  const angleDeg =
+    lungeAngle[0] + Math.random() * (lungeAngle[1] - lungeAngle[0]);
+  const angleRad = (angleDeg * Math.PI) / 180;
+  const dist = lungeDist[0] + Math.random() * (lungeDist[1] - lungeDist[0]);
+
+  // Trail direction is opposite to lunge (lower-left)
+  const trailDx = -Math.cos(angleRad);
+  const trailDy = Math.sin(angleRad);
+
+  // Trail angle for stretching ghosts along the motion axis
+  const trailAngleDeg = angleDeg + 180;
+
+  // Create ghost clones
+  for (let i = 0; i < count; i += 1) {
+    const ghost = svg.cloneNode(true) as SVGElement;
+    ghost.classList.add('crown-ghost');
+    const { style } = ghost;
+    style.position = 'absolute';
+    style.inset = '0';
+    style.pointerEvents = 'none';
+    style.opacity = '0';
+    style.color = glowColor;
+
+    // Per-ghost blur and stretch (elongation along trail axis)
+    const ghostBlur = blur[i] ?? blur[blur.length - 1];
+    const ghostStretch = stretch[i] ?? stretch[stretch.length - 1];
+    style.filter = `blur(${ghostBlur}px)`;
+    // Stretch along the trail direction using rotate-scale-rotate
+    style.transformOrigin = '50% 50%';
+
+    // Offset along the trail axis
+    const offset = spacing * (i + 1);
+    const tx = (trailDx * offset).toFixed(1);
+    const ty = (trailDy * offset).toFixed(1);
+    style.setProperty('--ghost-tx', `${tx}px`);
+    style.setProperty('--ghost-ty', `${ty}px`);
+    style.setProperty('--ghost-peak', `${opacities[i] ?? 0.05}`);
+    style.setProperty('--ghost-stretch', `${ghostStretch}`);
+    style.setProperty('--ghost-angle', `${trailAngleDeg.toFixed(0)}deg`);
+    style.setProperty('--ghost-delay', `${(i * 0.025).toFixed(3)}s`);
+
+    iconWrapper.appendChild(ghost);
+
+    restartAnimation(
+      ghost,
+      `crown-ghost ${duration}s ease-out var(--ghost-delay) forwards`,
+    );
+  }
+
+  // Animate the icon itself (lunge + snap back)
+  const dx = (Math.cos(angleRad) * dist).toFixed(1);
+  const dy = (-Math.sin(angleRad) * dist).toFixed(1);
+  iconWrapper.style.setProperty('--rocket-dx', `${dx}px`);
+  iconWrapper.style.setProperty('--rocket-dy', `${dy}px`);
+
+  restartAnimation(
+    iconWrapper,
+    `crown-icon-rocket ${duration}s cubic-bezier(0.22, 1, 0.36, 1)`,
+  );
+
+  // Stretch the arrow along its ~45° axis, anchored at the line's starting point
+  svg.style.transformOrigin = '15% 75%';
+  svg.style.animation = `crown-arrow-extend ${duration}s cubic-bezier(0.22, 1, 0.36, 1)`;
+
+  // Clean up ghosts after animation
+  setTimeout(() => {
+    iconWrapper.querySelectorAll('.crown-ghost').forEach((el) => el.remove());
+  }, duration * 1000 + 50);
+};
+
+/**
+ * Animates the megaphone's existing arc paths to create a ripple.
+ * Some icon variants include overlapping arc groups, so we animate
+ * all matching arc paths together to avoid "extra arc" artifacts.
+ */
+const restartSoundPulse = (card: HTMLElement): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  const svg = iconWrapper.querySelector<SVGElement>(':scope > svg');
+  if (!svg) {
+    return;
+  }
+
+  svg.style.overflow = 'visible';
+
+  iconWrapper.style.animation = 'none';
+  const nestedArcPaths = Array.from(
+    svg.querySelectorAll<SVGPathElement>('g > g > path'),
+  );
+
+  if (nestedArcPaths.length && !svg.dataset.megaphonePrepared) {
+    const topLevelPaths = Array.from(
+      svg.querySelectorAll<SVGPathElement>(':scope > g > path'),
+    );
+
+    const duplicateArcPath = topLevelPaths[0];
+    if (duplicateArcPath) {
+      duplicateArcPath.style.opacity = '0';
+    }
+
+    const mergedBodyPath = topLevelPaths.find((path) => {
+      const d = path.getAttribute('d') ?? '';
+      return /[zZ]\s*M/.test(d);
+    });
+    if (mergedBodyPath) {
+      const d = mergedBodyPath.getAttribute('d') ?? '';
+      const splitIndex = d.search(/[zZ]\s*M/);
+      if (splitIndex >= 0) {
+        const nextMoveIndex = d.indexOf('M', splitIndex);
+        if (nextMoveIndex >= 0) {
+          mergedBodyPath.setAttribute('d', d.slice(nextMoveIndex));
+        }
+      }
+    }
+
+    svg.dataset.megaphonePrepared = 'true';
+  }
+
+  const arcGroupPaths = nestedArcPaths.length
+    ? nestedArcPaths
+    : Array.from(svg.querySelectorAll<SVGPathElement>('path'));
+
+  arcGroupPaths.forEach((el) => {
+    el.style.removeProperty('animation');
+  });
+  forceReflow(svg);
+
+  iconWrapper.style.animation = 'crown-icon-megaphone 0.8s ease-out';
+  if (!arcGroupPaths.length) {
+    return;
+  }
+
+  const orderedArcPaths = [...arcGroupPaths].sort((a, b) => {
+    const aLength = a.getAttribute('d')?.length ?? 0;
+    const bLength = b.getAttribute('d')?.length ?? 0;
+    return bLength - aLength;
+  });
+  const earlyCount = Math.ceil(orderedArcPaths.length / 2);
+
+  orderedArcPaths.forEach((el, i) => {
+    const delay = i < earlyCount ? 0 : 0.1;
+    const { style } = el;
+    style.transformBox = 'fill-box';
+    style.transformOrigin = '0% 50%';
+    style.animation = `crown-sound-ripple 0.8s ease-out ${delay.toFixed(2)}s`;
+  });
+
+  const soundParticles = iconWrapper.querySelectorAll<HTMLElement>(
+    '.crown-sound-particle',
+  );
+  soundParticles.forEach((el, i) => {
+    const { style } = el;
+    const side = i % 2 === 0 ? -1 : 1;
+    const startX = 9 + Math.random() * 4;
+    const arcBandY = -4.5;
+    const sideOffset = 1.8 + Math.random() * 1.8;
+    const startY = arcBandY + side * sideOffset;
+    const endX = startX + 3 + Math.random() * 4;
+    const endY = startY + side * (0.4 + Math.random() * 1.4);
+    const delay = 0.04 + i * 0.02 + Math.random() * 0.03;
+    const peak = 0.24 + Math.random() * 0.12;
+
+    style.setProperty('--sound-particle-sx', `${startX.toFixed(1)}px`);
+    style.setProperty('--sound-particle-sy', `${startY.toFixed(1)}px`);
+    style.setProperty('--sound-particle-ex', `${endX.toFixed(1)}px`);
+    style.setProperty('--sound-particle-ey', `${endY.toFixed(1)}px`);
+    style.setProperty('--sound-particle-peak', peak.toFixed(2));
+    restartAnimation(
+      el,
+      `crown-sound-particle 0.65s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+};
+
+/**
+ * Flame microinteraction for most-controversial:
+ * subtle flicker on the icon, soft heat glow pulse, and tiny ember drift.
+ */
+const restartFlame = (card: HTMLElement): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  restartAnimation(
+    iconWrapper,
+    'crown-icon-flame 1.1s cubic-bezier(0.32, 0.02, 0.22, 1)',
+  );
+
+  const flameGlow = iconWrapper.querySelector<HTMLElement>('.crown-flame-glow');
+  if (flameGlow) {
+    restartAnimation(flameGlow, 'crown-flame-glow 1.1s ease-out');
+  }
+
+  const embers =
+    iconWrapper.querySelectorAll<HTMLElement>('.crown-flame-ember');
+  embers.forEach((el, i) => {
+    const { style } = el;
+    const side = i % 2 === 0 ? -1 : 1;
+    const startX = side * (1.5 + Math.random() * 4.5);
+    const startY = -0.5 + Math.random() * 3.5;
+    const endX = startX + side * (1 + Math.random() * 3.5);
+    const endY = -11 - Math.random() * 7;
+    const peak = 0.42 + Math.random() * 0.22;
+    const delay = 0.02 + i * 0.02 + Math.random() * 0.03;
+
+    style.setProperty('--flame-ember-sx', `${startX.toFixed(1)}px`);
+    style.setProperty('--flame-ember-sy', `${startY.toFixed(1)}px`);
+    style.setProperty('--flame-ember-ex', `${endX.toFixed(1)}px`);
+    style.setProperty('--flame-ember-ey', `${endY.toFixed(1)}px`);
+    style.setProperty('--flame-ember-peak', peak.toFixed(2));
+    restartAnimation(
+      el,
+      `crown-flame-ember 1.45s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+};
+
+/**
+ * Developers-choice microinteraction:
+ * medal tilt/rebound + quick rim sweep + two tiny glints.
+ */
+const restartMedal = (card: HTMLElement): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  restartAnimation(
+    iconWrapper,
+    'crown-icon-medal 0.95s cubic-bezier(0.22, 1, 0.36, 1)',
+  );
+
+  const sheen = iconWrapper.querySelector<HTMLElement>('.crown-medal-sheen');
+  if (sheen) {
+    restartAnimation(sheen, 'crown-medal-sheen 0.7s ease-out');
+  }
+
+  const glints =
+    iconWrapper.querySelectorAll<HTMLElement>('.crown-medal-glint');
+  glints.forEach((el, i) => {
+    const { style } = el;
+    const delay = 0.06 + i * 0.08;
+    const x = i === 0 ? 7.5 : -7;
+    const y = i === 0 ? -6.5 : 4.5;
+
+    style.setProperty('--medal-glint-x', `${x}px`);
+    style.setProperty('--medal-glint-y', `${y}px`);
+    restartAnimation(
+      el,
+      `crown-medal-glint 0.46s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+
+  const particles = iconWrapper.querySelectorAll<HTMLElement>(
+    '.crown-medal-particle',
+  );
+  const medalCenterX = -2;
+  const medalCenterY = -5;
+  particles.forEach((el, i) => {
+    const { style } = el;
+    const slot = 360 / Math.max(particles.length, 1);
+    const jitter = (Math.random() - 0.5) * slot * 0.45;
+    const angleDeg = i * slot + jitter;
+    const angleRad = (angleDeg * Math.PI) / 180;
+    const startR = 2 + Math.random() * 2;
+    const endR = 18 + Math.random() * 10;
+    const sx = Math.cos(angleRad) * startR + medalCenterX;
+    const sy = Math.sin(angleRad) * startR + medalCenterY;
+    const ex = Math.cos(angleRad) * endR + medalCenterX;
+    const ey = Math.sin(angleRad) * endR + medalCenterY;
+    const delay = 0.01 + i * 0.01 + Math.random() * 0.015;
+    const peak = 0.62 + Math.random() * 0.24;
+
+    style.setProperty('--medal-particle-sx', `${sx.toFixed(1)}px`);
+    style.setProperty('--medal-particle-sy', `${sy.toFixed(1)}px`);
+    style.setProperty('--medal-particle-ex', `${ex.toFixed(1)}px`);
+    style.setProperty('--medal-particle-ey', `${ey.toFixed(1)}px`);
+    style.setProperty('--medal-particle-peak', peak.toFixed(2));
+    restartAnimation(
+      el,
+      `crown-medal-particle 1.05s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+};
+
 const Placeholder = ({ className }: { className?: string }): ReactElement => (
   <div
     className={classNames(
@@ -24,90 +483,448 @@ const CrownCard = ({
 }: {
   crown: CrownData;
   loading?: boolean;
-}): ReactElement => (
-  <div
-    className={classNames(
-      'relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 tablet:min-w-[180px] tablet:gap-3 tablet:p-5',
-      'border-border-subtlest-tertiary',
-    )}
-    style={
-      !loading && crown.entity
-        ? {
-            boxShadow: `0 0 30px color-mix(in srgb, ${crown.glowColor} 12%, transparent), inset 0 1px 0 color-mix(in srgb, ${crown.glowColor} 19%, transparent)`,
-          }
-        : undefined
-    }
-  >
-    {/* Animated gradient glow that breathes */}
-    {!loading && crown.entity && (
-      <div
-        className="pointer-events-none absolute -top-10 left-1/2 h-28 w-28 -translate-x-1/2 rounded-full blur-2xl"
-        style={{
-          backgroundColor: crown.glowColor,
-          animation: 'pulse 3s ease-in-out infinite',
-          opacity: 0.15,
-        }}
-      />
-    )}
+}): ReactElement => {
+  const hasEntity = !loading && !!crown.entity;
+  const hoverClass = hasEntity ? crownHoverAnimations[crown.type] : undefined;
 
-    {/* Crown icon + label */}
-    <div className="flex flex-col items-center gap-1">
-      <crown.icon
-        size={IconSize.Large}
-        secondary={!loading && !!crown.entity}
-        className={classNames(
-          !loading && crown.entity ? crown.iconColor : 'text-text-quaternary',
-        )}
-      />
-      <span
-        className="text-center tracking-wider typo-caption2 tablet:typo-caption1"
-        style={
-          !loading && crown.entity ? { color: crown.glowColor } : undefined
+  const handleMouseEnter = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!hasEntity) {
+        return;
+      }
+      if (crown.type === 'fastest-rising') {
+        restartRocket(e.currentTarget, crown.glowColor);
+      } else if (crown.type === 'most-discussed') {
+        restartSoundPulse(e.currentTarget);
+      } else if (crown.type === 'most-controversial') {
+        restartFlame(e.currentTarget);
+      } else if (crown.type === 'developers-choice') {
+        restartMedal(e.currentTarget);
+      } else {
+        restartIconAnimation(e.currentTarget, crown.type);
+        if (crown.type === 'most-loved') {
+          restartBloom(e.currentTarget);
+        } else {
+          randomizeSparks(e.currentTarget);
         }
-      >
-        {crown.label}
-      </span>
-    </div>
+      }
+    },
+    [hasEntity, crown.glowColor, crown.type],
+  );
 
-    {/* Tool info */}
-    <div className="flex h-7 items-center gap-1.5 tablet:h-8 tablet:gap-2">
-      {loading ? (
-        <>
-          <Placeholder className="h-6 w-6 shrink-0 rounded-8 tablet:h-8 tablet:w-8" />
-          <Placeholder className="h-4 w-16 tablet:h-5 tablet:w-20" />
-        </>
-      ) : (
-        <>
-          <img
-            src={crown.entity?.logo}
-            alt={crown.entity?.name}
-            className="h-6 w-6 shrink-0 rounded-8 bg-surface-float object-cover tablet:h-8 tablet:w-8"
-          />
-          <span className="truncate font-bold text-text-primary typo-callout">
-            {crown.entity?.name}
-          </span>
-        </>
+  return (
+    <div
+      className={classNames(
+        'group relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 tablet:min-w-[180px] tablet:gap-3 tablet:p-5',
+        'border-border-subtlest-tertiary transition-shadow duration-300',
+        hoverClass,
       )}
-    </div>
-
-    {/* Stat line */}
-    <div className="flex h-5 items-center">
-      {loading ? (
-        <Placeholder className="h-4 w-16" />
-      ) : (
-        <span className="text-text-tertiary typo-caption1">{crown.stat}</span>
+      style={
+        hasEntity
+          ? {
+              boxShadow: `0 0 30px color-mix(in srgb, ${crown.glowColor} 12%, transparent), inset 0 1px 0 color-mix(in srgb, ${crown.glowColor} 19%, transparent)`,
+            }
+          : undefined
+      }
+      onMouseEnter={handleMouseEnter}
+    >
+      {/* Animated gradient glow that breathes */}
+      {hasEntity && (
+        <div
+          className="group-hover:!opacity-30 pointer-events-none absolute -top-10 left-1/2 h-28 w-28 -translate-x-1/2 rounded-full blur-2xl transition-opacity duration-300"
+          style={{
+            backgroundColor: crown.glowColor,
+            animation: 'pulse 3s ease-in-out infinite',
+            opacity: 0.15,
+          }}
+        />
       )}
+
+      {/* Crown icon + label */}
+      <div className="flex flex-col items-center gap-1">
+        <div className="crown-icon-wrapper relative transition-transform duration-300">
+          <crown.icon
+            size={IconSize.Large}
+            secondary={hasEntity}
+            className={classNames(
+              hasEntity ? crown.iconColor : 'text-text-quaternary',
+            )}
+          />
+          {/* Spark particles — burst from icon visual center on hover */}
+          {hasEntity &&
+            crown.type !== 'most-loved' &&
+            crown.type !== 'fastest-rising' &&
+            crown.type !== 'most-discussed' &&
+            crown.type !== 'most-controversial' &&
+            crown.type !== 'developers-choice' && (
+              <div className="z-10 pointer-events-none absolute inset-0">
+                {Array.from({ length: SPARK_CONFIG.count }, (_, i) => (
+                  <div
+                    key={i}
+                    className="crown-spark absolute left-1/2 top-1/2 h-1 w-1 rounded-full"
+                    style={{ backgroundColor: crown.glowColor }}
+                  />
+                ))}
+              </div>
+            )}
+          {/* Flame glow + embers for most-controversial */}
+          {hasEntity && crown.type === 'most-controversial' && (
+            <>
+              <div
+                className="crown-flame-glow pointer-events-none absolute left-1/2 top-[45%] h-[165%] w-[165%] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0"
+                style={{
+                  background: `radial-gradient(circle, color-mix(in srgb, ${crown.glowColor} 48%, var(--theme-accent-cheese-default)) 0%, color-mix(in srgb, ${crown.glowColor} 30%, transparent) 42%, transparent 72%)`,
+                }}
+              />
+              <div className="pointer-events-none absolute inset-0">
+                {Array.from({ length: 10 }, (_, i) => (
+                  <div
+                    key={i}
+                    className="crown-flame-ember absolute left-1/2 top-[52%] h-[3px] w-[3px] rounded-full opacity-0"
+                    style={{
+                      backgroundColor:
+                        i % 2 === 0
+                          ? 'var(--theme-accent-cheese-default)'
+                          : crown.glowColor,
+                      boxShadow:
+                        i % 2 === 0
+                          ? '0 0 4px color-mix(in srgb, var(--theme-accent-cheese-default) 85%, transparent)'
+                          : `0 0 4px color-mix(in srgb, ${crown.glowColor} 85%, transparent)`,
+                    }}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+          {/* Medal sheen + glints for developers-choice */}
+          {hasEntity && crown.type === 'developers-choice' && (
+            <>
+              <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-full">
+                <div
+                  className="crown-medal-sheen absolute left-1/2 top-1/2 h-[155%] w-[42%] -translate-x-[170%] -translate-y-1/2 rotate-[18deg] opacity-0"
+                  style={{
+                    background:
+                      'linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--theme-accent-cheese-default) 85%, white) 50%, transparent 100%)',
+                    filter: 'blur(1px)',
+                  }}
+                />
+              </div>
+              <div className="pointer-events-none absolute inset-0">
+                {Array.from({ length: 2 }, (_, i) => (
+                  <div
+                    key={i}
+                    className="crown-medal-glint absolute left-1/2 top-1/2 h-[3px] w-[3px] rounded-full opacity-0"
+                    style={{
+                      backgroundColor: 'var(--theme-accent-cheese-default)',
+                      boxShadow:
+                        '0 0 4px color-mix(in srgb, var(--theme-accent-cheese-default) 90%, white)',
+                    }}
+                  />
+                ))}
+              </div>
+              <div className="pointer-events-none absolute inset-0">
+                {Array.from({ length: 16 }, (_, i) => (
+                  <div
+                    key={i}
+                    className="crown-medal-particle z-10 absolute left-1/2 top-1/2 h-[4px] w-[4px] rounded-full opacity-0"
+                    style={{
+                      backgroundColor:
+                        i % 3 === 0
+                          ? 'white'
+                          : 'var(--theme-accent-cheese-default)',
+                      boxShadow:
+                        '0 0 8px color-mix(in srgb, var(--theme-accent-cheese-default) 98%, white)',
+                    }}
+                  />
+                ))}
+              </div>
+            </>
+          )}
+          {/* Subtle ripple-side particles for megaphone */}
+          {hasEntity && crown.type === 'most-discussed' && (
+            <div className="pointer-events-none absolute inset-0">
+              {Array.from({ length: 6 }, (_, i) => (
+                <div
+                  key={i}
+                  className="crown-sound-particle absolute left-1/2 top-1/2 h-[2px] w-[2px] rounded-full opacity-0"
+                  style={{ backgroundColor: crown.glowColor }}
+                />
+              ))}
+            </div>
+          )}
+          {/* Warm bloom — radial glow from icon center on hover */}
+          {hasEntity && crown.type === 'most-loved' && (
+            <div
+              className="crown-bloom pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0"
+              style={{
+                width: '260%',
+                height: '260%',
+                background: `radial-gradient(circle, color-mix(in srgb, ${crown.glowColor} 50%, white) 0%, color-mix(in srgb, ${crown.glowColor} 30%, transparent) 40%, transparent 70%)`,
+              }}
+            />
+          )}
+        </div>
+        <span
+          className="text-center tracking-wider typo-caption2 tablet:typo-caption1"
+          style={hasEntity ? { color: crown.glowColor } : undefined}
+        >
+          {crown.label}
+        </span>
+      </div>
+
+      {/* Tool info */}
+      <div className="flex h-7 items-center gap-1.5 tablet:h-8 tablet:gap-2">
+        {loading ? (
+          <>
+            <Placeholder className="h-6 w-6 shrink-0 rounded-8 tablet:h-8 tablet:w-8" />
+            <Placeholder className="h-4 w-16 tablet:h-5 tablet:w-20" />
+          </>
+        ) : (
+          <>
+            <img
+              src={crown.entity?.logo}
+              alt={crown.entity?.name}
+              className="h-6 w-6 shrink-0 rounded-8 bg-surface-float object-cover tablet:h-8 tablet:w-8"
+            />
+            <span className="truncate font-bold text-text-primary typo-callout">
+              {crown.entity?.name}
+            </span>
+          </>
+        )}
+      </div>
+
+      {/* Stat line */}
+      <div className="flex h-5 items-center">
+        {loading ? (
+          <Placeholder className="h-4 w-16" />
+        ) : (
+          <span className="text-text-tertiary typo-caption1">{crown.stat}</span>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export const ArenaCrownCards = ({
   crowns,
   loading,
 }: ArenaCrownCardsProps): ReactElement => (
-  <div className="flex gap-3 overflow-x-auto pb-2 tablet:grid tablet:grid-cols-5 tablet:overflow-visible">
-    {crowns.map((crown) => (
-      <CrownCard key={crown.type} crown={crown} loading={loading} />
-    ))}
-  </div>
+  <>
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `
+          @keyframes crown-icon-pop {
+            0% { transform: scale(1) rotate(0deg); }
+            15% { transform: scale(1.18) rotate(-8deg); }
+            30% { transform: scale(1.05) rotate(2deg); }
+            45% { transform: scale(1.1) rotate(-3deg); }
+            60% { transform: scale(1) rotate(0deg); }
+            100% { transform: scale(1) rotate(0deg); }
+          }
+          @keyframes crown-spark {
+            0% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
+            ${SPARK_CONFIG.burstPct}% { opacity: var(--spark-peak, 0.9); transform: translate(calc(-50% + var(--spark-bx, 0px)),calc(-50% + var(--spark-by, -16px))) scale(0.7); }
+            100% { transform: translate(calc(-50% + var(--spark-fx, 0px)),calc(-50% + var(--spark-fy, -26px))) scale(0); opacity: 0; }
+          }
+          .crown-spark { opacity: 0; }
+          @keyframes crown-icon-bloom-pulse {
+            0% { transform: scale(1); }
+            30% { transform: scale(1.1); }
+            60% { transform: scale(1); }
+            100% { transform: scale(1); }
+          }
+          @keyframes crown-bloom {
+            0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
+            20% { opacity: 1; }
+            45% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.85; }
+            100% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; }
+          }
+          .crown-bloom { opacity: 0; }
+          .crown-hover-most-loved:hover {
+            box-shadow:
+              0 0 40px color-mix(in srgb, var(--theme-accent-cabbage-default) 22%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-cabbage-default) 30%, transparent) !important;
+          }
+          @keyframes crown-icon-rocket {
+            0% { transform: translate(0, 0); }
+            18% { transform: translate(var(--rocket-dx, 3px), var(--rocket-dy, -3px)); }
+            45% { transform: translate(var(--rocket-dx, 3px), var(--rocket-dy, -3px)); }
+            75% { transform: translate(0, 0); }
+            100% { transform: translate(0, 0); }
+          }
+          @keyframes crown-arrow-extend {
+            0% { transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg); }
+            15% { transform: rotate(-45deg) scaleY(1.25) scaleX(0.95) rotate(45deg); }
+            50% { transform: rotate(-45deg) scaleY(1.25) scaleX(0.95) rotate(45deg); }
+            80% { transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg); }
+            100% { transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg); }
+          }
+          @keyframes crown-ghost {
+            0% {
+              transform: translate(0, 0) rotate(var(--ghost-angle, 225deg)) scaleY(1) rotate(calc(var(--ghost-angle, 225deg) * -1));
+              opacity: 0;
+            }
+            12% {
+              transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px)) rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2)) rotate(calc(var(--ghost-angle, 225deg) * -1));
+              opacity: var(--ghost-peak, 0.3);
+            }
+            55% {
+              transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px)) rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2)) rotate(calc(var(--ghost-angle, 225deg) * -1));
+              opacity: var(--ghost-peak, 0.3);
+            }
+            100% {
+              transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px)) rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2)) rotate(calc(var(--ghost-angle, 225deg) * -1));
+              opacity: 0;
+            }
+          }
+          @keyframes crown-icon-megaphone {
+            0% { transform: rotate(0deg) translateX(0); }
+            18% { transform: rotate(-5deg) translateX(-2px); }
+            40% { transform: rotate(2deg) translateX(1px); }
+            60% { transform: rotate(0deg) translateX(0); }
+            100% { transform: rotate(0deg) translateX(0); }
+          }
+          @keyframes crown-sound-ripple {
+            0% { transform: rotate(-53deg) translateX(0) scale(1) rotate(53deg); opacity: 1; }
+            65% { transform: rotate(-53deg) translateX(6px) scale(1.08) rotate(53deg); opacity: 0; }
+            99.9% { transform: rotate(-53deg) translateX(6px) scale(1.08) rotate(53deg); opacity: 0; }
+            100% { transform: rotate(-53deg) translateX(0) scale(1) rotate(53deg); opacity: 1; }
+          }
+          @keyframes crown-sound-particle {
+            0% {
+              transform: translate(var(--sound-particle-sx, 10px), var(--sound-particle-sy, 0px)) scale(0.8);
+              opacity: 0;
+            }
+            28% {
+              transform: translate(var(--sound-particle-sx, 10px), var(--sound-particle-sy, 0px)) scale(1);
+              opacity: var(--sound-particle-peak, 0.3);
+            }
+            100% {
+              transform: translate(var(--sound-particle-ex, 14px), var(--sound-particle-ey, 0px)) scale(0.65);
+              opacity: 0;
+            }
+          }
+          @keyframes crown-icon-flame {
+            0% { transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1); }
+            16% { transform: translate(-0.5px, -1.2px) rotate(-1.8deg) scaleX(0.96) scaleY(1.1); }
+            33% { transform: translate(0.6px, -1.8px) rotate(1.3deg) scaleX(1.04) scaleY(1.13); }
+            50% { transform: translate(-0.4px, -0.9px) rotate(-0.9deg) scaleX(0.98) scaleY(1.07); }
+            72% { transform: translate(0.5px, -1.5px) rotate(1.1deg) scaleX(1.03) scaleY(1.1); }
+            100% { transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1); }
+          }
+          @keyframes crown-flame-glow {
+            0% { transform: translate(-50%,-50%) scale(0.85); opacity: 0; }
+            30% { transform: translate(-50%,-50%) scale(1.04); opacity: 0.38; }
+            65% { transform: translate(-50%,-50%) scale(1.14); opacity: 0.24; }
+            100% { transform: translate(-50%,-50%) scale(1.14); opacity: 0; }
+          }
+          @keyframes crown-flame-ember {
+            0% {
+              transform: translate(var(--flame-ember-sx, 0px), var(--flame-ember-sy, 0px)) scale(0.7);
+              opacity: 0;
+            }
+            25% {
+              transform: translate(var(--flame-ember-sx, 0px), var(--flame-ember-sy, 0px)) scale(1);
+              opacity: var(--flame-ember-peak, 0.5);
+            }
+            55% {
+              transform: translate(
+                calc(var(--flame-ember-sx, 0px) + (var(--flame-ember-ex, 2px) - var(--flame-ember-sx, 0px)) * 0.45),
+                calc(var(--flame-ember-sy, 0px) + (var(--flame-ember-ey, -10px) - var(--flame-ember-sy, 0px)) * 0.45)
+              ) scale(0.78);
+              opacity: calc(var(--flame-ember-peak, 0.5) * 0.7);
+            }
+            100% {
+              transform: translate(var(--flame-ember-ex, 2px), var(--flame-ember-ey, -10px)) scale(0.4);
+              opacity: 0;
+            }
+          }
+          @keyframes crown-icon-medal {
+            0% { transform: rotate(0deg) scale(1); }
+            20% { transform: rotate(-6deg) scale(1.06); }
+            44% { transform: rotate(2.2deg) scale(1.02); }
+            64% { transform: rotate(-1deg) scale(1.01); }
+            100% { transform: rotate(0deg) scale(1); }
+          }
+          @keyframes crown-medal-sheen {
+            0% {
+              transform: translate(-170%, -50%) rotate(18deg);
+              opacity: 0;
+            }
+            20% {
+              opacity: 0.5;
+            }
+            70% {
+              transform: translate(20%, -50%) rotate(18deg);
+              opacity: 0.35;
+            }
+            100% {
+              transform: translate(65%, -50%) rotate(18deg);
+              opacity: 0;
+            }
+          }
+          @keyframes crown-medal-glint {
+            0% {
+              transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px)) scale(0.5);
+              opacity: 0;
+            }
+            45% {
+              transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px)) scale(1.2);
+              opacity: 0.75;
+            }
+            100% {
+              transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px)) scale(0.7);
+              opacity: 0;
+            }
+          }
+          @keyframes crown-medal-particle {
+            0% {
+              transform: translate(var(--medal-particle-sx, 0px), var(--medal-particle-sy, 0px)) scale(0.5);
+              opacity: 0;
+            }
+            35% {
+              transform: translate(var(--medal-particle-sx, 0px), var(--medal-particle-sy, 0px)) scale(1);
+              opacity: var(--medal-particle-peak, 0.78);
+            }
+            58% {
+              transform: translate(
+                calc(var(--medal-particle-sx, 0px) + (var(--medal-particle-ex, 0px) - var(--medal-particle-sx, 0px)) * 0.5),
+                calc(var(--medal-particle-sy, 0px) + (var(--medal-particle-ey, 0px) - var(--medal-particle-sy, 0px)) * 0.5)
+              ) scale(0.82);
+              opacity: calc(var(--medal-particle-peak, 0.78) * 0.6);
+            }
+            100% {
+              transform: translate(var(--medal-particle-ex, 0px), var(--medal-particle-ey, 0px)) scale(0.38);
+              opacity: 0;
+            }
+          }
+          .crown-hover-most-discussed:hover {
+            box-shadow:
+              0 0 40px color-mix(in srgb, var(--theme-accent-blueCheese-default) 22%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-blueCheese-default) 30%, transparent) !important;
+          }
+          .crown-hover-developers-choice:hover {
+            box-shadow:
+              0 0 40px color-mix(in srgb, var(--theme-accent-cheese-default) 22%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-cheese-default) 30%, transparent) !important;
+          }
+          .crown-hover-most-controversial:hover {
+            box-shadow:
+              0 0 40px color-mix(in srgb, var(--theme-accent-ketchup-default) 22%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-ketchup-default) 30%, transparent) !important;
+          }
+          .crown-hover-fastest-rising:hover {
+            box-shadow:
+              0 0 40px color-mix(in srgb, var(--theme-accent-avocado-default) 22%, transparent),
+              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-avocado-default) 30%, transparent) !important;
+          }
+        `,
+      }}
+    />
+    <div className="flex gap-3 overflow-x-auto pb-2 tablet:grid tablet:grid-cols-5 tablet:overflow-visible">
+      {crowns.map((crown) => (
+        <CrownCard key={crown.type} crown={crown} loading={loading} />
+      ))}
+    </div>
+  </>
 );
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index 7e53ab33a3..c8321394e6 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -2,6 +2,8 @@ import type { ReactElement } from 'react';
 import React, { useMemo, useState } 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 './dindex';
@@ -90,14 +92,16 @@ export const ArenaPage = ({
 
       {/* Header */}
       <header className="px-4 pt-6 laptop:px-0 laptop:pt-10">
-        <div className="flex flex-col gap-1">
-          <h1 className="flex items-center gap-2 font-bold text-text-primary typo-title2 laptop:typo-title1">
-            <span aria-hidden="true">&#x2694;&#xFE0F;</span>
-            The Arena
-          </h1>
-          <p className="text-text-tertiary typo-footnote">
-            Where AI tools fight for developer love
-          </p>
+        <div className="flex items-center gap-3">
+          <ArenaIcon size={IconSize.XLarge} className="text-text-primary" />
+          <div className="flex flex-col">
+            <h1 className="font-bold text-text-primary typo-title2 laptop:typo-title1">
+              The Arena
+            </h1>
+            <p className="text-text-tertiary typo-footnote">
+              Where AI tools fight for developer love
+            </p>
+          </div>
         </div>
       </header>
 
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index 3205e21ec3..b26309f124 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -33,20 +33,26 @@ const Placeholder = ({ className }: { className?: string }): ReactElement => (
 
 const getMomentumDisplay = (
   momentum: number,
-): { text: string; color: string } => {
+): { 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' };
+  return {
+    text: '0%',
+    color: 'text-text-quaternary',
+    cssColor: 'var(--theme-text-quaternary)',
+  };
 };
 
 const ChevronIcon = ({ expanded }: { expanded: boolean }): ReactElement => (
@@ -152,15 +158,6 @@ const RankingRow = ({
           )}
         </div>
 
-        {/* Sentiment — tablet+ inline */}
-        <div className="hidden min-w-[100px] shrink-0 items-center tablet:flex laptop:flex">
-          {loading ? (
-            <Placeholder className="h-4 w-20" />
-          ) : (
-            <ArenaSentimentBar value={tool.sentimentDisplay} />
-          )}
-        </div>
-
         {/* Volume — laptop+ inline */}
         <div className="hidden min-w-[60px] shrink-0 items-center laptop:flex">
           {loading ? (
@@ -172,6 +169,15 @@ const RankingRow = ({
           )}
         </div>
 
+        {/* Sentiment — tablet+ inline */}
+        <div className="hidden min-w-[100px] shrink-0 items-center tablet:flex laptop:flex">
+          {loading ? (
+            <Placeholder className="h-4 w-20" />
+          ) : (
+            <ArenaSentimentBar value={tool.sentimentDisplay} />
+          )}
+        </div>
+
         {/* Momentum — laptop+ inline */}
         <div className="hidden min-w-[80px] shrink-0 items-center laptop:flex">
           {loading ? (
@@ -190,7 +196,7 @@ const RankingRow = ({
           {loading ? (
             <Placeholder className="h-6 w-16" />
           ) : (
-            <ArenaSparkline data={tool.sparkline} />
+            <ArenaSparkline data={tool.sparkline} color={momentum.cssColor} />
           )}
         </div>
 
@@ -239,6 +245,7 @@ const RankingRow = ({
               data={tool.sparkline}
               width={200}
               height={32}
+              color={momentum.cssColor}
             />
           </div>
         </div>
@@ -314,12 +321,12 @@ const PlaceholderRow = ({ rank }: { rank: number }): ReactElement => (
     <div className="shrink-0 laptop:min-w-[80px]">
       <Placeholder className="h-5 w-12" />
     </div>
-    <div className="hidden min-w-[100px] shrink-0 tablet:block">
-      <Placeholder className="h-4 w-20" />
-    </div>
     <div className="hidden min-w-[60px] shrink-0 laptop:block">
       <Placeholder className="h-4 w-10" />
     </div>
+    <div className="hidden min-w-[100px] shrink-0 tablet:block">
+      <Placeholder className="h-4 w-20" />
+    </div>
     <div className="hidden min-w-[80px] shrink-0 laptop:block">
       <Placeholder className="h-4 w-14" />
     </div>
@@ -355,18 +362,18 @@ export const ArenaRankings = ({
             tooltip="Developer sentiment score combining mention volume and sentiment strength"
           />
         </span>
-        <span className="hidden min-w-[100px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 tablet:block">
-          <HeaderWithTooltip
-            label="Sentiment"
-            tooltip="How positively developers talk about this tool (0–100)"
-          />
-        </span>
         <span className="hidden min-w-[60px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
           <HeaderWithTooltip
             label="24h Vol"
             tooltip="Total developer mentions in the last 24 hours"
           />
         </span>
+        <span className="hidden min-w-[100px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 tablet:block">
+          <HeaderWithTooltip
+            label="Sentiment"
+            tooltip="How positively developers talk about this tool (0–100)"
+          />
+        </span>
         <span className="hidden min-w-[80px] shrink-0 font-bold uppercase tracking-wider text-text-disabled typo-caption2 laptop:block">
           <HeaderWithTooltip
             label="Momentum"

From 4ea9ac5887b7941952e8946ee6ec13b188f8e892 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 14:49:52 +0200
Subject: [PATCH 14/24] fix(arena): add responsive padding and fix layout on
 smaller desktop screens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds laptop:px-6 breathing room at 1020–1359px where content was flush
against viewport edges. Moves the Rankings+Highlights side-by-side grid
from laptop to laptopL so the rankings table gets full width on smaller
desktops, preventing the 7D Trend column from being clipped. Removes
rigid min-width on crown cards so they flex within the grid.
---
 .../src/features/agents/arena/ArenaCrownCards.tsx      |  2 +-
 .../src/features/agents/arena/ArenaHighlightsFeed.tsx  |  4 ++--
 .../shared/src/features/agents/arena/ArenaPage.tsx     | 10 +++++-----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index 92a9d35146..bc92fbecfe 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -515,7 +515,7 @@ const CrownCard = ({
   return (
     <div
       className={classNames(
-        'group relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 tablet:min-w-[180px] tablet:gap-3 tablet:p-5',
+        'group relative flex min-w-[170px] flex-1 flex-col items-center gap-2 overflow-hidden rounded-16 border p-3 tablet:min-w-0 tablet:gap-3 tablet:p-5',
         'border-border-subtlest-tertiary transition-shadow duration-300',
         hoverClass,
       )}
diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
index 9070e9c94f..b656da46cb 100644
--- a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -168,7 +168,7 @@ export const ArenaHighlightsFeed = ({
     [],
   );
   const [mobileExpanded, setMobileExpanded] = useState(false);
-  const isLaptop = useViewSize(ViewSize.Laptop);
+  const isLaptop = useViewSize(ViewSize.LaptopL);
   const initializedRef = useRef(false);
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -260,7 +260,7 @@ export const ArenaHighlightsFeed = ({
         <button
           type="button"
           onClick={() => setMobileExpanded(true)}
-          className="active:opacity-80 border-t border-border-subtlest-tertiary px-4 py-3 text-center font-bold text-text-link typo-callout laptop:hidden"
+          className="active:opacity-80 border-t border-border-subtlest-tertiary px-4 py-3 text-center font-bold text-text-link typo-callout laptopL:hidden"
         >
           Show all {visibleItems.length} highlights
         </button>
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index c8321394e6..6b13d54762 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -91,7 +91,7 @@ export const ArenaPage = ({
       />
 
       {/* Header */}
-      <header className="px-4 pt-6 laptop:px-0 laptop:pt-10">
+      <header className="px-4 pt-6 laptop:px-6 laptop:pt-10 laptopL:px-0">
         <div className="flex items-center gap-3">
           <ArenaIcon size={IconSize.XLarge} className="text-text-primary" />
           <div className="flex flex-col">
@@ -106,7 +106,7 @@ export const ArenaPage = ({
       </header>
 
       {/* Tab switcher */}
-      <nav className="sticky top-0 z-3 mt-4 flex items-center gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-0">
+      <nav className="sticky top-0 z-3 mt-4 flex items-center gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-6 laptopL:px-0">
         {ARENA_TABS.map((tab) => (
           <button
             key={tab.value}
@@ -131,19 +131,19 @@ export const ArenaPage = ({
       </nav>
 
       {/* Content */}
-      <div className="flex flex-col gap-6 px-4 py-6 laptop:px-0">
+      <div className="flex flex-col gap-6 px-4 py-6 laptop:px-6 laptopL:px-0">
         {/* Crown cards — full width */}
         <section>
           <ArenaCrownCards crowns={crowns} loading={loading} />
         </section>
 
         {/* Side-by-side: Rankings + Highlights feed */}
-        <div className="flex flex-col gap-6 laptop:grid laptop:grid-cols-[3fr_2fr]">
+        <div className="flex flex-col gap-6 laptopL:grid laptopL:grid-cols-[3fr_2fr]">
           <section className="min-w-0">
             <ArenaRankings tools={rankings} loading={loading} />
           </section>
           <aside className="relative">
-            <div className="laptop:absolute laptop:inset-0">
+            <div className="laptopL:absolute laptopL:inset-0">
               <ArenaHighlightsFeed
                 key={activeTab}
                 items={data?.sentimentHighlights?.items ?? []}

From 24e187a339c483946b50288b322fa52aa2c55950 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:19:45 +0200
Subject: [PATCH 15/24] fix(arena): update arena icon with outlined/filled
 variants and remove crown card box-shadow

---
 .../src/components/icons/Arena/filled.svg     |  7 +++++
 .../src/components/icons/Arena/icon.svg       | 27 -------------------
 .../src/components/icons/Arena/index.tsx      |  5 ++--
 .../src/components/icons/Arena/outlined.svg   |  7 +++++
 .../features/agents/arena/ArenaCrownCards.tsx |  7 -----
 5 files changed, 17 insertions(+), 36 deletions(-)
 create mode 100644 packages/shared/src/components/icons/Arena/filled.svg
 delete mode 100644 packages/shared/src/components/icons/Arena/icon.svg
 create mode 100644 packages/shared/src/components/icons/Arena/outlined.svg

diff --git a/packages/shared/src/components/icons/Arena/filled.svg b/packages/shared/src/components/icons/Arena/filled.svg
new file mode 100644
index 0000000000..c6ecfb5be1
--- /dev/null
+++ b/packages/shared/src/components/icons/Arena/filled.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.0003C16.9706 10.0003 21 11.2619 21 12.8177L20.9922 12.9104H21L20.9883 12.9573V12.9622C20.9802 13.0117 20.9673 13.0609 20.9512 13.1096L19.4277 19.4817C19.1678 20.5674 18.2509 21.4079 17.0889 21.6262L15.1963 21.9817C14.5778 22.0978 14.0005 21.6539 14 21.0618V18.9202C13.9998 18.6611 13.776 18.4505 13.5 18.4505H10.5C10.224 18.4505 10.0002 18.6611 10 18.9202V21.0618C9.9995 21.6539 9.42221 22.0978 8.80371 21.9817L6.91113 21.6262C5.74906 21.4079 4.83222 20.5674 4.57227 19.4817L3.04004 13.0794C3.01458 12.9932 3.00008 12.9059 3 12.8177C3 11.2619 7.02944 10.0003 12 10.0003ZM12 11.0003C11.2368 11.0003 10.5006 11.0341 9.80273 11.0911L11.3066 14.6233C11.535 14.629 11.7662 14.6341 12 14.6341C12.2334 14.6341 12.4643 14.6289 12.6924 14.6233L14.1963 11.0911C13.4987 11.0342 12.7629 11.0003 12 11.0003ZM8.77148 11.1966C7.76 11.3237 6.85402 11.5062 6.09668 11.7307L9.23145 14.4905C9.54887 14.5239 9.87533 14.5535 10.21 14.5755L8.77148 11.1966ZM13.7891 14.5755C14.1237 14.5535 14.4502 14.5239 14.7676 14.4905L17.9023 11.7307C17.1449 11.5063 16.239 11.3237 15.2275 11.1966L13.7891 14.5755ZM5.05859 12.1038C4.73911 12.2447 4.48707 12.3876 4.30176 12.5247C4.10102 12.6733 4.03173 12.7733 4.00879 12.8167C4.0314 12.8597 4.10002 12.9603 4.30176 13.1096C4.63231 13.3542 5.17488 13.617 5.93457 13.8548C6.39291 13.9982 6.9109 14.1227 7.47656 14.2317L5.05859 12.1038ZM16.5225 14.2317C17.0885 14.1227 17.6068 13.9983 18.0654 13.8548C18.8251 13.617 19.3677 13.3542 19.6982 13.1096C19.8994 12.9608 19.9674 12.8599 19.9902 12.8167C19.9671 12.7731 19.8984 12.6728 19.6982 12.5247C19.5128 12.3874 19.2603 12.2448 18.9404 12.1038L16.5225 14.2317Z" fill="currentColor"/>
+<path d="M3.01074 12.9573L3 12.9104H3.00781C3.00938 12.9258 3.00839 12.942 3.01074 12.9573Z" fill="currentColor"/>
+<path d="M5.43652 5.30984C5.62366 4.98737 6.02798 4.88333 6.33887 5.07742C6.43062 5.1347 6.50721 5.2147 6.5625 5.30984L7.05664 6.16238L7.99121 6.38699C8.32983 6.46848 8.54574 6.80765 8.49121 7.15847L8.4834 7.20437C8.4592 7.31275 8.40916 7.41332 8.33887 7.49734L7.71094 8.24832L7.79395 9.23953C7.82383 9.5988 7.57874 9.91741 7.24023 9.97195L7.19531 9.99734C7.08869 10.0068 6.98137 9.96935 6.88281 9.92605L6 9.53836L5.11719 9.92605C4.79717 10.0666 4.43014 9.92358 4.27539 9.60672L4.25586 9.56375C4.21415 9.46148 4.19685 9.35016 4.20605 9.23953L4.28906 8.24832L3.66113 7.49734C3.43407 7.22598 3.45013 6.82144 3.69043 6.57058L3.72656 6.5364C3.80753 6.46349 3.90433 6.4121 4.00879 6.38699L4.94238 6.16238L5.43652 5.30984Z" fill="currentColor"/>
+<path d="M17.4365 5.30984C17.6237 4.98737 18.028 4.88333 18.3389 5.07742C18.4306 5.1347 18.5072 5.2147 18.5625 5.30984L19.0566 6.16238L19.9912 6.38699C20.3298 6.46848 20.5457 6.80765 20.4912 7.15847L20.4834 7.20437C20.4592 7.31275 20.4092 7.41332 20.3389 7.49734L19.7109 8.24832L19.7939 9.23953C19.8238 9.5988 19.5787 9.91741 19.2402 9.97195L19.1953 9.99734C19.0887 10.0068 18.9814 9.96935 18.8828 9.92605L18 9.53836L17.1172 9.92605C16.7972 10.0666 16.4301 9.92358 16.2754 9.60672L16.2559 9.56375C16.2142 9.46148 16.1969 9.35016 16.2061 9.23953L16.2891 8.24832L15.6611 7.49734C15.4341 7.22598 15.4501 6.82144 15.6904 6.57058L15.7266 6.5364C15.8075 6.46349 15.9043 6.4121 16.0088 6.38699L16.9424 6.16238L17.4365 5.30984Z" fill="currentColor"/>
+<path d="M11.2119 2.44363C11.4739 2.00843 12.0394 1.86822 12.4746 2.13015C12.6031 2.20756 12.7107 2.31512 12.7881 2.44363L13.4795 3.59304L14.7871 3.89676C15.2613 4.00657 15.5645 4.46431 15.4883 4.93777L15.4766 5.00027C15.4427 5.14652 15.3728 5.28241 15.2744 5.39578L14.3945 6.40847L14.5107 7.74637C14.5526 8.23124 14.2103 8.66104 13.7363 8.73465L13.6738 8.74148C13.5243 8.75444 13.3736 8.73071 13.2354 8.67215L12 8.14871L10.7646 8.67215C10.3164 8.86206 9.80149 8.66957 9.58496 8.24148L9.55859 8.18387C9.50016 8.0458 9.47636 7.89573 9.48926 7.74637L9.60449 6.40847L8.72559 5.39578C8.40772 5.0296 8.43026 4.48334 8.7666 4.1448L8.81641 4.09793C8.92968 3.9996 9.06581 3.93068 9.21191 3.89676L10.5195 3.59304L11.2119 2.44363Z" fill="currentColor"/>
+</svg>
diff --git a/packages/shared/src/components/icons/Arena/icon.svg b/packages/shared/src/components/icons/Arena/icon.svg
deleted file mode 100644
index 033d43518f..0000000000
--- a/packages/shared/src/components/icons/Arena/icon.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <!-- Flag: thin pole + small pennant -->
-  <line x1="12" y1="2" x2="12" y2="5.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-  <path d="M12 2.5l2.2.8-2.2.8" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round" fill="none"/>
-
-  <!-- Top rim ellipse (the open roof) -->
-  <ellipse cx="12" cy="8" rx="8" ry="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
-
-  <!-- Stadium walls — two vertical sides connecting top rim to bottom ellipse -->
-  <line x1="4" y1="8" x2="4" y2="16.5" stroke="currentColor" stroke-width="1.2"/>
-  <line x1="20" y1="8" x2="20" y2="16.5" stroke="currentColor" stroke-width="1.2"/>
-
-  <!-- Bottom ellipse (base of stadium) — only the front half visible -->
-  <path d="M4 16.5c0 1.38 3.582 2.5 8 2.5s8-1.12 8-2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
-
-  <!-- Horizontal band across middle of wall -->
-  <path d="M4 12.5c0 1.38 3.582 2.5 8 2.5s8-1.12 8-2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>
-
-  <!-- Pillar accents — upper tier (rim to mid-band) -->
-  <line x1="7" y1="10.2" x2="7" y2="13.2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
-  <line x1="9.5" y1="10.4" x2="9.5" y2="13.8" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
-  <line x1="14.5" y1="10.4" x2="14.5" y2="13.8" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
-  <line x1="17" y1="10.2" x2="17" y2="13.2" stroke="currentColor" stroke-width="1" stroke-linecap="round"/>
-
-  <!-- Arched gate entrance -->
-  <path d="M10.8 19v-1.5a1.2 1.2 0 0 1 2.4 0v1.5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-</svg>
diff --git a/packages/shared/src/components/icons/Arena/index.tsx b/packages/shared/src/components/icons/Arena/index.tsx
index 704636e18a..a249711840 100644
--- a/packages/shared/src/components/icons/Arena/index.tsx
+++ b/packages/shared/src/components/icons/Arena/index.tsx
@@ -2,8 +2,9 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import type { IconProps } from '../../Icon';
 import Icon from '../../Icon';
-import IconSvg from './icon.svg';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
 
 export const ArenaIcon = (props: IconProps): ReactElement => (
-  <Icon {...props} IconPrimary={IconSvg} IconSecondary={IconSvg} />
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
 );
diff --git a/packages/shared/src/components/icons/Arena/outlined.svg b/packages/shared/src/components/icons/Arena/outlined.svg
new file mode 100644
index 0000000000..c614ab6c86
--- /dev/null
+++ b/packages/shared/src/components/icons/Arena/outlined.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.99996C16.9702 9.99996 20.9993 11.2618 21 12.8173L20.9922 12.9101H21L20.9883 12.957V12.9619C20.9803 13.0112 20.9672 13.0607 20.9512 13.1093L19.4277 19.4814L19.3711 19.6816C19.0521 20.6694 18.1784 21.4212 17.0889 21.6259L15.1963 21.9814L15.0811 21.997C14.5078 22.0419 14.0002 21.6159 14 21.0605V18.9199C13.9995 18.6935 13.8281 18.5036 13.6006 18.4599L13.5 18.4502H10.5C10.2242 18.4502 10.0006 18.6611 10 18.9199V21.0605C9.99978 21.6159 9.49223 22.0419 8.91895 21.997L8.80371 21.9814L6.91113 21.6259C5.82162 21.4212 4.94794 20.6694 4.62891 19.6816L4.57227 19.4814L3.04004 13.0791C3.01465 12.993 3.00008 12.9055 3 12.8173C3.00067 11.2618 7.02985 9.99996 12 9.99996ZM19.6367 14.3056C18.0466 15.1019 15.2214 15.6337 12 15.6337C8.77755 15.6337 5.95115 15.1024 4.36133 14.3056L5.54492 19.249C5.70643 19.9227 6.29188 20.4924 7.0957 20.6435L8.98828 20.999C8.99245 20.9997 8.99659 20.9969 9 20.997V18.9199C9.0006 18.0505 9.73213 17.4502 10.5 17.4502H13.5C14.2679 17.4502 14.9994 18.0505 15 18.9199V20.997C15.0034 20.9969 15.0075 20.9997 15.0117 20.999L16.9043 20.6435C17.7081 20.4924 18.2936 19.9227 18.4551 19.249L19.6367 14.3056ZM12 11C11.2368 11 10.5006 11.0338 9.80273 11.0908L11.3066 14.623C11.535 14.6286 11.7662 14.6337 12 14.6337C12.2334 14.6337 12.4643 14.6286 12.6924 14.623L14.1963 11.0908C13.4987 11.0338 12.7629 11 12 11ZM8.77148 11.1962C7.76005 11.3234 6.854 11.5059 6.09668 11.7304L9.23145 14.4902C9.54886 14.5236 9.87534 14.5532 10.21 14.5752L8.77148 11.1962ZM13.7891 14.5752C14.1237 14.5532 14.4502 14.5236 14.7676 14.4902L17.9023 11.7304C17.145 11.506 16.239 11.3234 15.2275 11.1962L13.7891 14.5752ZM5.05859 12.1035C4.73923 12.2444 4.48705 12.3873 4.30176 12.5244C4.10151 12.6726 4.03189 12.7729 4.00879 12.8164C4.03142 12.8594 4.10024 12.9601 4.30176 13.1093C4.63229 13.3539 5.17496 13.6167 5.93457 13.8544C6.39288 13.9979 6.91094 14.1224 7.47656 14.2314L5.05859 12.1035ZM16.5225 14.2314C17.0885 14.1223 17.6069 13.998 18.0654 13.8544C18.825 13.6167 19.3677 13.3539 19.6982 13.1093C19.8991 12.9606 19.9674 12.8596 19.9902 12.8164C19.9669 12.7726 19.8979 12.6722 19.6982 12.5244C19.5128 12.3872 19.2602 12.2445 18.9404 12.1035L16.5225 14.2314Z" fill="currentColor"/>
+<path d="M3.01074 12.957L3 12.9101H3.00781C3.00936 12.9253 3.00847 12.9418 3.01074 12.957Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.11719 5.51363C5.4044 5.01878 6.04065 4.84491 6.53613 5.15425C6.67987 5.2441 6.79847 5.36824 6.88281 5.51363L7.16992 6.00972L7.70996 6.1396C8.24907 6.26947 8.56845 6.79835 8.4873 7.32027L8.48633 7.32808L8.48438 7.33589L8.47754 7.373L8.47656 7.38082L8.47461 7.38863C8.44723 7.51124 8.39748 7.62802 8.3291 7.73335L8.25488 7.83492L7.88281 8.27828L7.93262 8.86519C7.97709 9.39955 7.61363 9.8997 7.07227 9.98726L7.05469 9.98921L7.01855 9.9941L7.00098 9.99605C6.83112 10.0113 6.66056 9.98241 6.50488 9.91402L6 9.69234L5.49512 9.91402C4.98191 10.1396 4.4068 9.90375 4.1709 9.41988L4.16699 9.41304L4.16309 9.40523L4.14844 9.37105L4.14453 9.36421L4.1416 9.3564C4.07822 9.20118 4.05254 9.03286 4.06641 8.86617L4.11523 8.2773L3.74512 7.83492C3.39943 7.42176 3.42323 6.81083 3.79102 6.42671L3.79785 6.41988L3.80469 6.41402L3.83301 6.3857L3.83984 6.37984L3.84668 6.373C3.97231 6.25999 4.12453 6.17942 4.29004 6.1396L4.82812 6.00972L5.11719 5.51363ZM5.99121 6.00386C5.98909 6.00554 5.98587 6.00884 5.98242 6.0146L5.47949 6.88179L5.27148 6.9316L4.52441 7.11128C4.52441 7.11128 4.5196 7.11283 4.5166 7.11519L4.51367 7.11812L4.5 7.15425C4.49942 7.17114 4.50443 7.18454 4.51172 7.19332L5.14648 7.95113L5.12988 8.15621L5.06348 8.94917C5.06271 8.9585 5.06365 8.96766 5.06641 8.97554L5.07031 8.98335C5.07587 8.99395 5.08243 8.99764 5.08594 8.99898L5.08887 8.99996L5.09277 8.99898L5.79883 8.68843L6 8.60054L6.20117 8.68843L6.90723 8.99898H6.91309C6.91309 8.99898 6.92026 8.99648 6.92578 8.98921C6.93256 8.98013 6.93795 8.96663 6.93652 8.94917L6.87012 8.15621L6.85254 7.95113L6.98535 7.7939L7.4873 7.19332C7.49146 7.18828 7.49586 7.18045 7.49805 7.17085L7.49902 7.16499C7.50118 7.14932 7.49807 7.13462 7.49121 7.12398C7.48473 7.11394 7.47808 7.1119 7.47559 7.11128L6.72852 6.9316L6.52051 6.88179L6.01758 6.0146C6.01364 6.00798 6.00888 6.00382 6.00586 6.00191C6.00351 6.00049 6.00098 5.99996 6.00098 5.99996H5.99805C5.99805 5.99996 5.99364 6.00208 5.99121 6.00386Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1172 5.51363C17.4044 5.01878 18.0407 4.84491 18.5361 5.15425C18.6799 5.2441 18.7985 5.36824 18.8828 5.51363L19.1699 6.00972L19.71 6.1396C20.2491 6.26947 20.5684 6.79835 20.4873 7.32027L20.4863 7.32808L20.4844 7.33589L20.4775 7.373L20.4766 7.38082L20.4746 7.38863C20.4472 7.51124 20.3975 7.62802 20.3291 7.73335L20.2549 7.83492L19.8828 8.27828L19.9326 8.86519C19.9771 9.39955 19.6136 9.8997 19.0723 9.98726L19.0547 9.98921L19.0186 9.9941L19.001 9.99605C18.8311 10.0113 18.6606 9.98241 18.5049 9.91402L18 9.69234L17.4951 9.91402C16.9819 10.1396 16.4068 9.90375 16.1709 9.41988L16.167 9.41304L16.1631 9.40523L16.1484 9.37105L16.1445 9.36421L16.1416 9.3564C16.0782 9.20117 16.0525 9.03286 16.0664 8.86617L16.1152 8.2773L15.7451 7.83492C15.3994 7.42176 15.4232 6.81083 15.791 6.42671L15.7979 6.41988L15.8047 6.41402L15.833 6.3857L15.8398 6.37984L15.8467 6.373C15.9723 6.25999 16.1245 6.17942 16.29 6.1396L16.8281 6.00972L17.1172 5.51363ZM17.9912 6.00386C17.9891 6.00554 17.9859 6.00884 17.9824 6.0146L17.4795 6.88179L17.2715 6.9316L16.5244 7.11128C16.5244 7.11128 16.5196 7.11283 16.5166 7.11519L16.5137 7.11812L16.5 7.15425C16.4994 7.17114 16.5044 7.18454 16.5117 7.19332L17.1465 7.95113L17.1299 8.15621L17.0635 8.94917C17.0627 8.9585 17.0637 8.96766 17.0664 8.97554L17.0703 8.98335C17.0759 8.99395 17.0824 8.99764 17.0859 8.99898L17.0889 8.99996L17.0928 8.99898L17.7988 8.68843L18 8.60054L18.2012 8.68843L18.9072 8.99898H18.9131C18.9131 8.99898 18.9203 8.99649 18.9258 8.98921C18.9326 8.98013 18.938 8.96663 18.9365 8.94917L18.8701 8.15621L18.8525 7.95113L18.9854 7.7939L19.4873 7.19332C19.4915 7.18828 19.4959 7.18045 19.498 7.17085L19.499 7.16499C19.5012 7.14932 19.4981 7.13462 19.4912 7.12398C19.4847 7.11394 19.4781 7.1119 19.4756 7.11128L18.7285 6.9316L18.5205 6.88179L18.0176 6.0146C18.0136 6.00798 18.0089 6.00383 18.0059 6.00191C18.0035 6.00049 18.001 5.99996 18.001 5.99996H17.998C17.998 5.99996 17.9936 6.00208 17.9912 6.00386Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.8955 2.62398C11.2624 2.0145 12.0545 1.8178 12.6641 2.18453C12.8441 2.29292 12.9951 2.44394 13.1035 2.62398L13.5869 3.42671L14.502 3.6396C15.1663 3.79357 15.5903 4.43591 15.4834 5.09957L15.4824 5.10835L15.4805 5.11617L15.4697 5.16988L15.4688 5.17769L15.4668 5.1855C15.4194 5.39032 15.3224 5.58139 15.1846 5.74019L14.5684 6.44722L14.6504 7.38374C14.7092 8.06312 14.2297 8.66513 13.5654 8.76851L13.5566 8.76949L13.5488 8.77046L13.4951 8.7773L13.4863 8.77828H13.4785C13.2691 8.79645 13.0578 8.76351 12.8643 8.6816L12 8.31441L11.1357 8.6816C10.5077 8.9476 9.78688 8.67715 9.4834 8.0771L9.47949 8.06929L9.47656 8.06148L9.4541 8.01265L9.4502 8.00484L9.44727 7.998C9.36525 7.8044 9.33146 7.59322 9.34961 7.38374L9.43066 6.4482L8.81543 5.74019C8.37001 5.22707 8.40245 4.4618 8.87402 3.98726L8.88086 3.9814L8.88672 3.97457L8.93066 3.93453L8.94336 3.92183C9.10215 3.78405 9.29323 3.68704 9.49805 3.6396L10.4111 3.42671L10.8955 2.62398ZM12.1484 3.04097C12.0121 2.95919 11.8351 3.00355 11.7529 3.1396L11.0508 4.3066L9.72363 4.61421C9.67785 4.62482 9.63513 4.64692 9.59961 4.67769L9.58008 4.69527C9.47788 4.80117 9.47206 4.97035 9.57031 5.08394L10.3242 5.95308L10.4639 6.11324L10.3457 7.46968C10.3417 7.51548 10.3488 7.56194 10.3662 7.60445L10.376 7.62593L10.4053 7.67281C10.4835 7.77316 10.6233 7.81273 10.7461 7.7607L11.8047 7.31148L12 7.22945L12.1953 7.31148L13.2539 7.7607C13.2967 7.77877 13.3434 7.78492 13.3896 7.78121L13.418 7.77828C13.5627 7.75234 13.6673 7.61932 13.6543 7.46968L13.5361 6.11324L13.6748 5.95308L14.4297 5.08394C14.4602 5.04851 14.4816 5.0055 14.4922 4.95992L14.4961 4.93746C14.5154 4.80889 14.4458 4.68389 14.3291 4.63179L14.2764 4.61421L12.9492 4.3066L12.2471 3.1396C12.2228 3.09936 12.1887 3.06522 12.1484 3.04097Z" fill="currentColor"/>
+</svg>
diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index bc92fbecfe..69218c4e7d 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -519,13 +519,6 @@ const CrownCard = ({
         'border-border-subtlest-tertiary transition-shadow duration-300',
         hoverClass,
       )}
-      style={
-        hasEntity
-          ? {
-              boxShadow: `0 0 30px color-mix(in srgb, ${crown.glowColor} 12%, transparent), inset 0 1px 0 color-mix(in srgb, ${crown.glowColor} 19%, transparent)`,
-            }
-          : undefined
-      }
       onMouseEnter={handleMouseEnter}
     >
       {/* Animated gradient glow that breathes */}

From d2b998386e2f0853f5ef8513583892eb0812d8f0 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:26:23 +0200
Subject: [PATCH 16/24] fix(arena): enlarge arena icon size for improved header
 visibility

---
 packages/shared/src/features/agents/arena/ArenaPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index 6b13d54762..61dbf5c22d 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -93,7 +93,7 @@ export const ArenaPage = ({
       {/* Header */}
       <header className="px-4 pt-6 laptop:px-6 laptop:pt-10 laptopL:px-0">
         <div className="flex items-center gap-3">
-          <ArenaIcon size={IconSize.XLarge} className="text-text-primary" />
+          <ArenaIcon size={IconSize.XXLarge} className="text-text-primary" />
           <div className="flex flex-col">
             <h1 className="font-bold text-text-primary typo-title2 laptop:typo-title1">
               The Arena

From 3807de3dea79d14d15278818a243b1615d0a2c9d Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:34:48 +0200
Subject: [PATCH 17/24] refactor(arena): load entity metadata from API

---
 docs/spec-agents-arena.md                     | 279 ------------------
 .../src/features/agents/arena/ArenaPage.tsx   |   9 +-
 .../src/features/agents/arena/config.ts       | 155 +---------
 .../src/features/agents/arena/dindex.ts       |  75 +++--
 .../src/features/agents/arena/graphql.ts      |   9 +
 .../src/features/agents/arena/mockData.ts     | 222 --------------
 .../src/features/agents/arena/queries.ts      |   5 +
 .../shared/src/features/agents/arena/types.ts |   9 +-
 8 files changed, 66 insertions(+), 697 deletions(-)
 delete mode 100644 docs/spec-agents-arena.md
 delete mode 100644 packages/shared/src/features/agents/arena/mockData.ts

diff --git a/docs/spec-agents-arena.md b/docs/spec-agents-arena.md
deleted file mode 100644
index 176e2a1d2f..0000000000
--- a/docs/spec-agents-arena.md
+++ /dev/null
@@ -1,279 +0,0 @@
-# Spec: Agents Arena (`/agents/arena`)
-
-## What it is
-
-A live leaderboard showing which AI coding agents and LLMs are winning the
-developer mindshare race right now. Powered by real-time sentiment + mention
-volume, crowned category winners, and a competitive energy that makes it worth
-checking daily and sharing when your tool is on top.
-
-The hook: **"Who's winning the race?"** — not a boring sentiment dashboard, but
-a live arena where tools compete for developer love, and the D-Index tells you
-who's ahead.
-
----
-
-## URL Structure
-
-```
-/agents/arena                    → main page (Coding Agents tab default)
-/agents/arena?tab=llms           → LLMs tab
-/agents/arena/[slug]             → per-tool detail page
-```
-
----
-
-## Entity Groups
-
-Each tab maps to a `groupId` on the `sentimentTimeSeries` API.
-
-**Tab: Coding Agents** (`groupId: "coding-agents"`)
-```
-cursor, copilot, windsurf, cline, claude_code,
-codex, aider, opencode, antigravity, kilocode
-```
-
-**Tab: LLMs** (`groupId: "llms"`)
-```
-claude_sonnet, claude_opus, gpt_5, gpt_codex,
-deepseek, gemini, llama, qwen, kimi
-```
-
----
-
-## The D-Index
-
-The D-Index is daily.dev's proprietary developer mindshare score. It measures
-how much **positive attention** a tool is generating right now — combining raw
-mention volume with sentiment polarity.
-
-### Formulas
-
-```typescript
-// Raw from API: sentimentScore ∈ [-1, +1], volume = mention count per window
-
-// Headline number — unbounded, rewards viral moments
-dIndex = volume_24h × ((sentimentScore + 1) / 2)
-
-// Love score — 0-100, used for bar fill and "Most Loved" crown
-sentimentDisplay = Math.round(((sentimentScore + 1) / 2) × 100)
-
-// Momentum — % change vs same 24h window yesterday
-momentum = (dIndex_now - dIndex_24h_ago) / dIndex_24h_ago × 100
-
-// Controversy — peaks at high volume + perfectly split sentiment
-controversyScore = volume_24h × (1 - Math.abs(sentimentScore))
-```
-
-### Why unbounded
-
-The D-Index has no ceiling. When a tool ships something huge or goes viral,
-the number should explode — e.g. DeepSeek at peak: `180,000 × 0.62 = 111,600`.
-This is intentional. Dramatic spikes are the point.
-
----
-
-## Crown Categories
-
-Four spotlight titles awarded to the current leader in each category.
-Evaluated on a **rolling 24h window** — crowns can change at any moment.
-
-| Crown | Awarded to | Minimum threshold |
-|---|---|---|
-| 👑 Most Loved | Highest `sentimentDisplay` | 100 mentions/24h |
-| 🚀 Fastest Rising | Highest positive `momentum` | 50 mentions/24h |
-| 🔥 Most Discussed | Highest raw `volume_24h` | — |
-| ⚡ Most Controversial | Highest `controversyScore` | 200 mentions/24h |
-
-**Unclaimed crowns:** If no tool meets the minimum threshold for a category,
-the card displays "Unclaimed" with a grayed crown — not hidden. This signals
-the category is actively contested and creates anticipation.
-
-**Held for:** Each crown card shows how long the current holder has held it
-(e.g. "Held for 31h") — adds drama and a reason to check back.
-
----
-
-## Page Layout
-
-### Header
-
-Sticky. Shows page title, live freshness indicator, and tab switcher.
-
-```
-⚔️  THE ARENA                              ● Live · 2m ago
-Real-time developer sentiment · Powered by the D-Index
-
-[ Coding Agents ]  [ LLMs ]
-```
-
-- Pulsing green dot when data is fresh (<5min)
-- Dot turns amber + "stale" label if last update was >5min ago
-- Auto-refreshes every 30s
-
----
-
-### Tier 1: The Crowns
-
-Four cards in a horizontal scroll row (mobile) or 4-column grid (desktop).
-These are the shareable trophies — the reason companies check this page.
-
-```
-┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
-│  👑 MOST LOVED   │ │  🚀 FASTEST      │ │  🔥 MOST         │ │  ⚡ MOST         │
-│                  │ │     RISING       │ │     DISCUSSED    │ │     CONTROVERSIAL│
-│  [Tool Logo]     │ │  [Tool Logo]     │ │  [Tool Logo]     │ │  [Tool Logo]     │
-│  Cursor          │ │  Claude Code     │ │  DeepSeek        │ │  Copilot         │
-│                  │ │                  │ │                  │ │                  │
-│  94 / 100        │ │  ▲ +187%         │ │  111,600 D-Index │ │  Split: 51/49    │
-│  Held for 31h    │ │  Held for 4h     │ │  Held for 12h    │ │  Held for 2h     │
-└──────────────────┘ └──────────────────┘ └──────────────────┘ └──────────────────┘
-```
-
-Each crown card:
-- Crown emoji + category label
-- Tool logo + name
-- The stat that won it the crown (different per category)
-- "Held for Xh" timestamp
-- Subtle glow border in the tool's brand color
-- Click → `/agents/arena/[slug]`
-
----
-
-### Tier 2: Full Rankings
-
-Sorted by D-Index descending. Rank positions animate when order changes.
-
-```
- #    Tool           D-Index    Sentiment    Momentum    24h Vol
-──────────────────────────────────────────────────────────────────
- 1 🥇  Cursor         2,088     ████░ 87     ▲ +12%      2.4k
-       ▁▂▃▄▅▆▇▇▆▅
-──────────────────────────────────────────────────────────────────
- 2 🥈  Claude Code    1,547     ███░░ 71     ▲  +5%      1.8k
-       ▁▁▂▃▄▄▅▆▇▇
-──────────────────────────────────────────────────────────────────
- 3 🥉  Copilot        1,203     ███░░ 68      ━   0%     1.5k
-       ▃▃▃▃▃▄▄▄▄▄
-──────────────────────────────────────────────────────────────────
- 4     Windsurf         454     ██░░░ 51     ▼  -8%       890
-       ▅▄▄▃▃▂▂▂▁▁
-──────────────────────────────────────────────────────────────────
-
-─── EMERGING ──────────────────────────────────────────────────────
-      Antigravity     Not enough data yet              < 50 mentions
-      Kilocode        Not enough data yet
-```
-
-Each established row:
-- Rank + medal (🥇🥈🥉 for top 3)
-- Tool logo + name
-- **D-Index** — the headline number, ticks live on update
-- Sentiment bar (colored: green >70, amber 40–70, red <40) + numeric score
-- Momentum delta with colored arrow (green/red/gray)
-- 24h mention volume
-- 7-point sparkline (7-day daily trend)
-
-Live update behavior:
-- D-Index number briefly flashes green (up) or red (down) on change
-- Row slides up/down with transition when rank order changes
-
----
-
-### Emerging Tools Section
-
-Tools below the minimum data threshold are shown at the bottom, separated by
-a divider, with no D-Index score. As volume crosses the threshold, they
-graduate into the main rankings with an animation.
-
----
-
-## Data Layer
-
-### Primary query (on mount + every 30s)
-
-```graphql
-query ArenaData($groupId: ID!, $lookback: String!) {
-  sentimentTimeSeries(
-    resolution: QUARTER_HOUR
-    groupId: $groupId
-    lookback: $lookback
-  ) {
-    start
-    resolutionSeconds
-    entities {
-      nodes {
-        entity
-        timestamps
-        scores    # sentiment [-1, +1]
-        volume    # mention count
-      }
-    }
-  }
-}
-```
-
-- Called twice on mount: once per tab group (`coding-agents`, `llms`)
-- `lookback: "48h"` to have enough history for momentum calculation
-- Refetched every 30s via TanStack Query `refetchInterval`
-
-From the response we derive:
-- **Current window** (latest data point) → `dIndex`, `sentimentDisplay`
-- **Previous window** (latest point from 24h prior) → `momentum`
-- **Last 7 daily buckets** → sparkline data
-
-### Highlights query (lazy, on tool card click)
-
-```graphql
-query ToolHighlights($entity: String!, $after: String) {
-  sentimentHighlights(entity: $entity, first: 20, after: $after) {
-    items {
-      url
-      text
-      author { handle avatarUrl }
-      metrics { likeCount retweetCount impressionCount }
-      createdAt
-      sentiments { score highlightScore }
-    }
-    cursor
-  }
-}
-```
-
-Only fired when navigating to `/agents/arena/[slug]`.
-
----
-
-## Real-Time Behavior
-
-| Event | Behavior |
-|---|---|
-| Data refresh (every 30s) | D-Index values update; changed values flash green/red |
-| Rank position change | Row slides up/down with CSS transition |
-| New crown holder | Crown card updates; brief confetti burst on the card |
-| Tool graduates from Emerging | Animates into main rankings with highlight flash |
-| Stale data (>5min) | Live dot → amber; "Last updated" text goes muted |
-| API down / error | Show last known data with timestamp; no error state shown |
-
----
-
-## Per-Tool Detail Page: `/agents/arena/[slug]`
-
-High-level shape (full spec separate):
-
-- **Hero:** tool name, logo, current crown(s) if held
-- **Live stats:** D-Index, sentiment score, current rank, 24h volume
-- **Sentiment chart:** 48h time series (line chart, 15min resolution)
-- **Top highlights:** paginated list of top tweets/posts, sorted by
-  `highlightScore`, showing author, text, engagement metrics
-- **Back:** breadcrumb to `/agents/arena`
-
----
-
-## Open Questions
-
-- **Slug mapping:** The API uses entity keys like `claude_code`. We need a
-  mapping from slug (URL-safe) to entity key and display name/logo.
-  Define this as a static config file.
-- **Crown sharing:** OG image generation per crown card deferred to future
-  iteration.
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index 61dbf5c22d..b9457eb0ba 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -35,8 +35,13 @@ export const ArenaPage = ({
 
   const rankings = useMemo(
     () =>
-      timeSeries ? computeRankings(timeSeries.entities.nodes, activeTab) : [],
-    [timeSeries, activeTab],
+      timeSeries && data?.sentimentGroup
+        ? computeRankings(
+            timeSeries.entities.nodes,
+            data.sentimentGroup.entities,
+          )
+        : [],
+    [timeSeries, data?.sentimentGroup],
   );
 
   const crowns = useMemo(() => computeCrowns(rankings), [rankings]);
diff --git a/packages/shared/src/features/agents/arena/config.ts b/packages/shared/src/features/agents/arena/config.ts
index ea204ddffe..8bf48430f9 100644
--- a/packages/shared/src/features/agents/arena/config.ts
+++ b/packages/shared/src/features/agents/arena/config.ts
@@ -1,157 +1,4 @@
-import type { ArenaEntity, ArenaGroupId, ArenaTab } from './types';
-
-const CODING_AGENTS: ArenaEntity[] = [
-  {
-    entity: 'cursor',
-    name: 'Cursor',
-    slug: 'cursor',
-    logo: 'https://media.daily.dev/image/upload/s--OaZ4Et3s--/f_auto,q_auto/v1772048234/public/cursor',
-    brandColor: '#00D4AA',
-  },
-  {
-    entity: 'copilot',
-    name: 'Copilot',
-    slug: 'copilot',
-    logo: 'https://media.daily.dev/image/upload/s--giOMGduf--/f_auto,q_auto/v1772048234/public/copilot',
-    brandColor: '#6E40C9',
-  },
-  {
-    entity: 'windsurf',
-    name: 'Windsurf',
-    slug: 'windsurf',
-    logo: 'https://media.daily.dev/image/upload/s--yFe4w8pJ--/f_auto,q_auto/v1772048234/public/windsurf',
-    brandColor: '#06B6D4',
-  },
-  {
-    entity: 'cline',
-    name: 'Cline',
-    slug: 'cline',
-    logo: 'https://media.daily.dev/image/upload/s--36tiYseE--/f_auto,q_auto/v1772048234/public/cline',
-    brandColor: '#F59E0B',
-  },
-  {
-    entity: 'claude_code',
-    name: 'Claude Code',
-    slug: 'claude-code',
-    logo: 'https://media.daily.dev/image/upload/s--wo3RJzUi--/f_auto,q_auto/v1772048234/public/claude',
-    brandColor: '#D97757',
-  },
-  {
-    entity: 'codex',
-    name: 'Codex',
-    slug: 'codex',
-    logo: 'https://media.daily.dev/image/upload/s--KxCFSmLf--/f_auto,q_auto/v1772048234/public/openai',
-    brandColor: '#10A37F',
-  },
-  {
-    entity: 'aider',
-    name: 'Aider',
-    slug: 'aider',
-    logo: 'https://media.daily.dev/image/upload/s--Kg40cdB4--/f_auto,q_auto/v1772048234/public/aider',
-    brandColor: '#8B5CF6',
-  },
-  {
-    entity: 'opencode',
-    name: 'OpenCode',
-    slug: 'opencode',
-    logo: 'https://media.daily.dev/image/upload/s--szFvMrHs--/f_auto,q_auto/v1772048234/public/opencode',
-    brandColor: '#EC4899',
-  },
-  {
-    entity: 'antigravity',
-    name: 'Antigravity',
-    slug: 'antigravity',
-    logo: 'https://media.daily.dev/image/upload/s--5VnOo2GM--/f_auto,q_auto/v1772048234/public/antigravity',
-    brandColor: '#EF4444',
-  },
-  {
-    entity: 'kilocode',
-    name: 'Kilocode',
-    slug: 'kilocode',
-    logo: 'https://media.daily.dev/image/upload/s--8eBUg8m2--/f_auto,q_auto/v1772048234/public/kilocode',
-    brandColor: '#14B8A6',
-  },
-];
-
-const LLMS: ArenaEntity[] = [
-  {
-    entity: 'claude_sonnet',
-    name: 'Claude Sonnet',
-    slug: 'claude-sonnet',
-    logo: 'https://media.daily.dev/image/upload/s--wo3RJzUi--/f_auto,q_auto/v1772048234/public/claude',
-    brandColor: '#D97757',
-  },
-  {
-    entity: 'claude_opus',
-    name: 'Claude Opus',
-    slug: 'claude-opus',
-    logo: 'https://media.daily.dev/image/upload/s--wo3RJzUi--/f_auto,q_auto/v1772048234/public/claude',
-    brandColor: '#D97757',
-  },
-  {
-    entity: 'gpt_5',
-    name: 'GPT-5',
-    slug: 'gpt-5',
-    logo: 'https://media.daily.dev/image/upload/s--KxCFSmLf--/f_auto,q_auto/v1772048234/public/openai',
-    brandColor: '#10A37F',
-  },
-  {
-    entity: 'gpt_codex',
-    name: 'GPT Codex',
-    slug: 'gpt-codex',
-    logo: 'https://media.daily.dev/image/upload/s--KxCFSmLf--/f_auto,q_auto/v1772048234/public/openai',
-    brandColor: '#10A37F',
-  },
-  {
-    entity: 'deepseek',
-    name: 'DeepSeek',
-    slug: 'deepseek',
-    logo: 'https://media.daily.dev/image/upload/s--qf0Ls70z--/f_auto,q_auto/v1772048234/public/deepseek',
-    brandColor: '#3B82F6',
-  },
-  {
-    entity: 'gemini',
-    name: 'Gemini',
-    slug: 'gemini',
-    logo: 'https://media.daily.dev/image/upload/s--2shzqE5e--/f_auto,q_auto/v1772048234/public/gemini',
-    brandColor: '#8E75B2',
-  },
-  {
-    entity: 'llama',
-    name: 'Llama',
-    slug: 'llama',
-    logo: 'https://media.daily.dev/image/upload/s--ApsuAYre--/f_auto,q_auto/v1772048234/public/llama',
-    brandColor: '#0467DF',
-  },
-  {
-    entity: 'qwen',
-    name: 'Qwen',
-    slug: 'qwen',
-    logo: 'https://media.daily.dev/image/upload/s--FXxJSTLn--/f_auto,q_auto/v1772048234/public/qwen',
-    brandColor: '#615EFF',
-  },
-  {
-    entity: 'kimi',
-    name: 'Kimi',
-    slug: 'kimi',
-    logo: 'https://media.daily.dev/image/upload/s--C_Z9JEzB--/f_auto,q_auto/v1772048234/public/kimi',
-    brandColor: '#0EA5E9',
-  },
-];
-
-const ENTITIES_BY_GROUP: Record<ArenaGroupId, ArenaEntity[]> = {
-  'coding-agents': CODING_AGENTS,
-  llms: LLMS,
-};
-
-export const getEntitiesByGroup = (groupId: ArenaGroupId): ArenaEntity[] =>
-  ENTITIES_BY_GROUP[groupId];
-
-export const getEntityByKey = (
-  groupId: ArenaGroupId,
-  entityKey: string,
-): ArenaEntity | undefined =>
-  ENTITIES_BY_GROUP[groupId].find((e) => e.entity === entityKey);
+import type { ArenaGroupId, ArenaTab } from './types';
 
 export const ARENA_TABS: { label: string; value: ArenaTab }[] = [
   { label: 'Coding Agents', value: 'coding-agents' },
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/dindex.ts
index 2c98d2d7d9..e925795f8d 100644
--- a/packages/shared/src/features/agents/arena/dindex.ts
+++ b/packages/shared/src/features/agents/arena/dindex.ts
@@ -1,14 +1,10 @@
 import type {
   SentimentTimeSeriesNode,
-  ArenaGroupId,
+  ArenaEntity,
   CrownData,
   RankedTool,
 } from './types';
-import {
-  getEntitiesByGroup,
-  getEntityByKey,
-  EMERGING_THRESHOLD,
-} from './config';
+import { EMERGING_THRESHOLD } from './config';
 import { MedalBadgeIcon } from '../../../components/icons/MedalBadge';
 import { StarIcon } from '../../../components/icons/Star';
 import { TrendingIcon } from '../../../components/icons/Trending';
@@ -159,45 +155,48 @@ const getSparklineData = (node: SentimentTimeSeriesNode): number[] => {
 
 export const computeRankings = (
   nodes: SentimentTimeSeriesNode[],
-  groupId: ArenaGroupId,
+  entityMetadata: ArenaEntity[],
 ): RankedTool[] => {
-  const tools: RankedTool[] = nodes
-    .map((node) => {
-      const entityMeta = getEntityByKey(groupId, node.entity);
-      if (!entityMeta) {
-        return null;
-      }
-
-      const current = getLatest24hWindow(node);
-      const previous = getPrevious24hWindow(node);
-      const dIndex = computeDIndex(current.volume, current.sentimentScore);
-      const prevDIndex = computeDIndex(
-        previous.volume,
-        previous.sentimentScore,
+  if (!entityMetadata.length) {
+    throw new Error('Arena entity metadata is empty');
+  }
+
+  const entityMap = new Map(
+    entityMetadata.map((entity) => [entity.entity, entity]),
+  );
+
+  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}"`,
       );
+    }
 
-      const span = getWindowSpan(node);
-      const cutoff24h = Math.max(0, span - SECONDS_PER_DAY);
-      const controversy = computeControversy(node, cutoff24h, span + 1);
+    const current = getLatest24hWindow(node);
+    const previous = getPrevious24hWindow(node);
+    const dIndex = computeDIndex(current.volume, current.sentimentScore);
+    const prevDIndex = computeDIndex(previous.volume, previous.sentimentScore);
 
-      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),
-        isEmerging: current.volume < EMERGING_THRESHOLD,
-      };
-    })
-    .filter((t): t is RankedTool => t !== null);
+    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),
+      isEmerging: current.volume < EMERGING_THRESHOLD,
+    };
+  });
   // Include entities with no data as emerging
   const presentEntities = new Set(tools.map((t) => t.entity.entity));
-  const allEntities = getEntitiesByGroup(groupId);
-  allEntities.forEach((entity) => {
+  entityMetadata.forEach((entity) => {
     if (!presentEntities.has(entity.entity)) {
       tools.push({
         entity,
diff --git a/packages/shared/src/features/agents/arena/graphql.ts b/packages/shared/src/features/agents/arena/graphql.ts
index 5000fc6565..cba77ed1c8 100644
--- a/packages/shared/src/features/agents/arena/graphql.ts
+++ b/packages/shared/src/features/agents/arena/graphql.ts
@@ -8,6 +8,15 @@ export const ARENA_QUERY = gql`
     $highlightsFirst: Int
     $highlightsOrderBy: SentimentHighlightsOrderBy
   ) {
+    sentimentGroup(id: $groupId) {
+      id
+      name
+      entities {
+        entity
+        name
+        logo
+      }
+    }
     sentimentTimeSeries(
       resolution: $resolution
       groupId: $groupId
diff --git a/packages/shared/src/features/agents/arena/mockData.ts b/packages/shared/src/features/agents/arena/mockData.ts
deleted file mode 100644
index 67544dc015..0000000000
--- a/packages/shared/src/features/agents/arena/mockData.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import type { ArenaGroupId, SentimentTimeSeriesNode } from './types';
-import { getEntitiesByGroup } from './config';
-
-const HOUR_SECONDS = 3600;
-const POINTS_PER_DAY = 24; // 24h / 1h
-const TOTAL_POINTS = POINTS_PER_DAY * 7; // 7d lookback
-
-// Deterministic pseudo-random from seed string (sin-based, no bitwise ops)
-const seedRandom = (seed: string): (() => number) => {
-  let s = Array.from(seed).reduce(
-    (acc, ch) => Math.imul(31, acc) + ch.charCodeAt(0),
-    0,
-  );
-  return () => {
-    s = (s + 1) * 1.0;
-    const x = Math.sin(s * 9301 + 49297) * 233280;
-    return x - Math.floor(x);
-  };
-};
-
-interface EntityProfile {
-  baseVolume: number;
-  baseSentiment: number;
-  volatility: number;
-  trend: number; // positive = growing
-}
-
-const CODING_AGENT_PROFILES: Record<string, EntityProfile> = {
-  cursor: {
-    baseVolume: 25,
-    baseSentiment: 0.74,
-    volatility: 0.15,
-    trend: 0.1,
-  },
-  copilot: {
-    baseVolume: 18,
-    baseSentiment: 0.36,
-    volatility: 0.2,
-    trend: -0.05,
-  },
-  windsurf: {
-    baseVolume: 10,
-    baseSentiment: 0.02,
-    volatility: 0.25,
-    trend: -0.08,
-  },
-  cline: {
-    baseVolume: 7,
-    baseSentiment: 0.45,
-    volatility: 0.18,
-    trend: 0.05,
-  },
-  claude_code: {
-    baseVolume: 20,
-    baseSentiment: 0.55,
-    volatility: 0.2,
-    trend: 0.25,
-  },
-  codex: {
-    baseVolume: 14,
-    baseSentiment: 0.3,
-    volatility: 0.22,
-    trend: 0.15,
-  },
-  aider: {
-    baseVolume: 5,
-    baseSentiment: 0.6,
-    volatility: 0.15,
-    trend: 0.02,
-  },
-  opencode: {
-    baseVolume: 3,
-    baseSentiment: 0.4,
-    volatility: 0.3,
-    trend: 0.1,
-  },
-  antigravity: {
-    baseVolume: 0.3,
-    baseSentiment: 0.2,
-    volatility: 0.4,
-    trend: 0,
-  },
-  kilocode: {
-    baseVolume: 0.2,
-    baseSentiment: 0.3,
-    volatility: 0.3,
-    trend: 0,
-  },
-};
-
-const LLM_PROFILES: Record<string, EntityProfile> = {
-  claude_sonnet: {
-    baseVolume: 22,
-    baseSentiment: 0.65,
-    volatility: 0.15,
-    trend: 0.12,
-  },
-  claude_opus: {
-    baseVolume: 15,
-    baseSentiment: 0.7,
-    volatility: 0.12,
-    trend: 0.08,
-  },
-  gpt_5: {
-    baseVolume: 28,
-    baseSentiment: 0.5,
-    volatility: 0.2,
-    trend: 0.05,
-  },
-  gpt_codex: {
-    baseVolume: 12,
-    baseSentiment: 0.45,
-    volatility: 0.18,
-    trend: 0.1,
-  },
-  deepseek: {
-    baseVolume: 35,
-    baseSentiment: 0.24,
-    volatility: 0.3,
-    trend: -0.1,
-  },
-  gemini: {
-    baseVolume: 20,
-    baseSentiment: 0.4,
-    volatility: 0.2,
-    trend: 0.03,
-  },
-  llama: {
-    baseVolume: 8,
-    baseSentiment: 0.55,
-    volatility: 0.15,
-    trend: 0.02,
-  },
-  qwen: {
-    baseVolume: 6,
-    baseSentiment: 0.5,
-    volatility: 0.2,
-    trend: 0.05,
-  },
-  kimi: {
-    baseVolume: 4,
-    baseSentiment: 0.35,
-    volatility: 0.25,
-    trend: -0.02,
-  },
-};
-
-const PROFILES_BY_GROUP: Record<string, Record<string, EntityProfile>> = {
-  'coding-agents': CODING_AGENT_PROFILES,
-  llms: LLM_PROFILES,
-};
-
-const generateEntityTimeSeries = (
-  entityKey: string,
-  profile: EntityProfile,
-): SentimentTimeSeriesNode => {
-  const rng = seedRandom(entityKey);
-  const now = Math.floor(Date.now() / 1000);
-  const start = now - TOTAL_POINTS * HOUR_SECONDS;
-
-  const timestamps: number[] = [];
-  const scores: number[] = [];
-  const volume: number[] = [];
-
-  Array.from({ length: TOTAL_POINTS }).forEach((_, i) => {
-    const t = start + i * HOUR_SECONDS;
-    const progress = i / TOTAL_POINTS; // 0..1 over 7d
-
-    // Volume with daily cycle (lower at night), trend, and noise
-    const hourOfDay = ((t / 3600) % 24) + 0; // rough hour
-    const dayCycle = 0.5 + 0.5 * Math.sin(((hourOfDay - 6) / 24) * Math.PI * 2);
-    const trendMultiplier = 1 + profile.trend * progress;
-    const noise = 0.5 + rng() * 1.0;
-    const vol = Math.max(
-      0,
-      Math.round(profile.baseVolume * dayCycle * trendMultiplier * noise),
-    );
-
-    // Sentiment with some drift and noise
-    const sentimentNoise = (rng() - 0.5) * profile.volatility * 2;
-    const score = Math.max(
-      -1,
-      Math.min(1, profile.baseSentiment + sentimentNoise),
-    );
-
-    timestamps.push(t);
-    scores.push(Math.round(score * 1000) / 1000);
-    volume.push(vol);
-  });
-
-  return { entity: entityKey, timestamps, scores, volume };
-};
-
-export const generateMockTimeSeriesData = (
-  groupId: ArenaGroupId,
-): {
-  start: string;
-  resolutionSeconds: number;
-  entities: { nodes: SentimentTimeSeriesNode[] };
-} => {
-  const entities = getEntitiesByGroup(groupId);
-  const profiles = PROFILES_BY_GROUP[groupId] || {};
-
-  const nodes = entities.map((e) => {
-    const profile = profiles[e.entity] || {
-      baseVolume: 1,
-      baseSentiment: 0.5,
-      volatility: 0.2,
-      trend: 0,
-    };
-    return generateEntityTimeSeries(e.entity, profile);
-  });
-
-  const now = Math.floor(Date.now() / 1000);
-  const start = now - TOTAL_POINTS * HOUR_SECONDS;
-
-  return {
-    start: new Date(start * 1000).toISOString(),
-    resolutionSeconds: HOUR_SECONDS, // 1h resolution
-    entities: { nodes },
-  };
-};
diff --git a/packages/shared/src/features/agents/arena/queries.ts b/packages/shared/src/features/agents/arena/queries.ts
index 767a4502b5..0956ecf7df 100644
--- a/packages/shared/src/features/agents/arena/queries.ts
+++ b/packages/shared/src/features/agents/arena/queries.ts
@@ -16,6 +16,11 @@ export const arenaOptions = ({ groupId }: { groupId: ArenaGroupId }) => ({
       highlightsFirst: 50,
       highlightsOrderBy: 'RECENCY',
     });
+
+    if (!res.sentimentGroup) {
+      throw new Error(`Arena sentiment group not found for tab "${groupId}"`);
+    }
+
     return res;
   },
   staleTime: StaleTime.Base,
diff --git a/packages/shared/src/features/agents/arena/types.ts b/packages/shared/src/features/agents/arena/types.ts
index 84225e3c49..2099a66e40 100644
--- a/packages/shared/src/features/agents/arena/types.ts
+++ b/packages/shared/src/features/agents/arena/types.ts
@@ -24,14 +24,19 @@ export interface SentimentTimeSeries {
 export interface ArenaQueryResponse {
   sentimentTimeSeries: SentimentTimeSeries;
   sentimentHighlights: SentimentHighlightsConnection;
+  sentimentGroup: SentimentGroup | null;
 }
 
 export interface ArenaEntity {
   entity: string;
   name: string;
-  slug: string;
   logo: string;
-  brandColor: string;
+}
+
+export interface SentimentGroup {
+  id: string;
+  name: string;
+  entities: ArenaEntity[];
 }
 
 export type CrownType =

From 5ccbc86d825154d2e2618f685f6fea95b0bc66e1 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 15:53:37 +0200
Subject: [PATCH 18/24] Refactor Arena UI and clean up maintainability issues

---
 .../agents/arena/ArenaCrownAnimations.ts      | 462 +++++++++++
 .../features/agents/arena/ArenaCrownCards.tsx | 720 +-----------------
 .../agents/arena/ArenaHighlightUtils.ts       |  24 +
 .../agents/arena/ArenaHighlightsFeed.tsx      |  47 +-
 .../features/agents/arena/ArenaLiveTicker.tsx | 142 ----
 .../src/features/agents/arena/ArenaPage.tsx   |  70 +-
 .../features/agents/arena/ArenaRankings.tsx   |   2 +-
 .../features/agents/arena/ArenaSparkline.tsx  |   5 +-
 .../arena/{dindex.ts => arenaMetrics.ts}      |   2 -
 .../shared/src/features/agents/arena/types.ts |   1 -
 packages/shared/src/styles/utilities.css      | 490 ++++++++++++
 packages/webapp/pages/agents/arena.tsx        |  10 +-
 12 files changed, 1040 insertions(+), 935 deletions(-)
 create mode 100644 packages/shared/src/features/agents/arena/ArenaCrownAnimations.ts
 create mode 100644 packages/shared/src/features/agents/arena/ArenaHighlightUtils.ts
 delete mode 100644 packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
 rename packages/shared/src/features/agents/arena/{dindex.ts => arenaMetrics.ts} (99%)

diff --git a/packages/shared/src/features/agents/arena/ArenaCrownAnimations.ts b/packages/shared/src/features/agents/arena/ArenaCrownAnimations.ts
new file mode 100644
index 0000000000..bd1bd6145d
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaCrownAnimations.ts
@@ -0,0 +1,462 @@
+import type { CrownType } from './types';
+
+export const CROWN_SPARK_COUNT = 7;
+
+export const crownHoverAnimations: Partial<Record<CrownType, string>> = {
+  'developers-choice': 'crown-hover-developers-choice',
+  'most-loved': 'crown-hover-most-loved',
+  'fastest-rising': 'crown-hover-fastest-rising',
+  'most-discussed': 'crown-hover-most-discussed',
+  'most-controversial': 'crown-hover-most-controversial',
+};
+
+const crownIconAnimation: Partial<Record<CrownType, string>> = {
+  'most-loved': 'crown-icon-bloom-pulse 1.2s ease-in-out',
+};
+
+const DEFAULT_ICON_ANIMATION = 'crown-icon-pop 1.2s ease-out';
+
+const forceReflow = (element: Element): void => {
+  element.getBoundingClientRect();
+};
+
+const restartAnimation = (
+  element: HTMLElement | SVGElement,
+  animation: string,
+): void => {
+  const { style } = element;
+  style.animation = 'none';
+  forceReflow(element);
+  style.animation = animation;
+};
+
+const SPARK_CONFIG = {
+  count: CROWN_SPARK_COUNT,
+  radius: 30,
+  burstRatio: 0.65,
+  angleMin: -50,
+  angleMax: 50,
+  duration: 1.2,
+  staggerMax: 0.08,
+};
+
+const randomizeSparks = (card: HTMLElement): void => {
+  const {
+    count,
+    radius,
+    burstRatio,
+    angleMin,
+    angleMax,
+    duration,
+    staggerMax,
+  } = SPARK_CONFIG;
+  const sparks = card.querySelectorAll<HTMLElement>('.crown-spark');
+  const angleRange = angleMax - angleMin;
+
+  sparks.forEach((el, i) => {
+    const { style } = el;
+    const isFullCircle = angleRange >= 360;
+    const slots = isFullCircle ? count : Math.max(count - 1, 1);
+    const slotWidth = angleRange / slots;
+    const baseAngle = angleMin + (i / slots) * angleRange;
+    const jitter = (Math.random() - 0.5) * slotWidth * 0.4;
+    const angle = baseAngle + jitter;
+    const rad = (angle * Math.PI) / 180;
+
+    const r = radius * (0.95 + Math.random() * 0.05);
+    const burstR = r * burstRatio;
+
+    const bx = Math.round(Math.sin(rad) * burstR);
+    const by = Math.round(-Math.cos(rad) * burstR);
+    const fx = Math.round(Math.sin(rad) * r);
+    const fy = Math.round(-Math.cos(rad) * r);
+
+    style.setProperty('--spark-bx', `${bx}px`);
+    style.setProperty('--spark-by', `${by}px`);
+    style.setProperty('--spark-fx', `${fx}px`);
+    style.setProperty('--spark-fy', `${fy}px`);
+    style.setProperty(
+      '--spark-peak',
+      `${(0.7 + Math.random() * 0.3).toFixed(2)}`,
+    );
+    style.setProperty(
+      '--spark-delay',
+      `${(Math.random() * staggerMax).toFixed(2)}s`,
+    );
+
+    restartAnimation(
+      el,
+      `crown-spark ${duration}s ease-out var(--spark-delay) forwards`,
+    );
+  });
+};
+
+const restartIconAnimation = (
+  card: HTMLElement,
+  crownType: CrownType,
+): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  const anim = crownIconAnimation[crownType] ?? DEFAULT_ICON_ANIMATION;
+  restartAnimation(iconWrapper, anim);
+};
+
+const restartBloom = (card: HTMLElement): void => {
+  const bloom = card.querySelector<HTMLElement>('.crown-bloom');
+  if (!bloom) {
+    return;
+  }
+
+  restartAnimation(bloom, 'crown-bloom 1.4s ease-in-out forwards');
+};
+
+const GHOST_CONFIG = {
+  count: 5,
+  spacing: 6,
+  blur: [0.5, 1, 1.8, 2.8, 4],
+  opacities: [0.5, 0.38, 0.26, 0.15, 0.07],
+  stretch: [1.08, 1.14, 1.2, 1.28, 1.36],
+  lungeDist: [7, 11],
+  lungeAngle: [38, 52],
+  duration: 0.9,
+};
+
+const restartRocket = (card: HTMLElement, glowColor: string): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  iconWrapper.querySelectorAll('.crown-ghost').forEach((el) => el.remove());
+
+  const svg = iconWrapper.querySelector<SVGElement>(':scope > svg');
+  if (!svg) {
+    return;
+  }
+
+  svg.style.animation = 'none';
+  forceReflow(svg);
+
+  const {
+    count,
+    spacing,
+    blur,
+    opacities,
+    stretch,
+    lungeDist,
+    lungeAngle,
+    duration,
+  } = GHOST_CONFIG;
+
+  const angleDeg =
+    lungeAngle[0] + Math.random() * (lungeAngle[1] - lungeAngle[0]);
+  const angleRad = (angleDeg * Math.PI) / 180;
+  const dist = lungeDist[0] + Math.random() * (lungeDist[1] - lungeDist[0]);
+
+  const trailDx = -Math.cos(angleRad);
+  const trailDy = Math.sin(angleRad);
+  const trailAngleDeg = angleDeg + 180;
+
+  for (let i = 0; i < count; i += 1) {
+    const ghost = svg.cloneNode(true) as SVGElement;
+    ghost.classList.add('crown-ghost');
+    const { style } = ghost;
+    style.position = 'absolute';
+    style.inset = '0';
+    style.pointerEvents = 'none';
+    style.opacity = '0';
+    style.color = glowColor;
+
+    const ghostBlur = blur[i] ?? blur[blur.length - 1];
+    const ghostStretch = stretch[i] ?? stretch[stretch.length - 1];
+    style.filter = `blur(${ghostBlur}px)`;
+    style.transformOrigin = '50% 50%';
+
+    const offset = spacing * (i + 1);
+    style.setProperty('--ghost-tx', `${(trailDx * offset).toFixed(1)}px`);
+    style.setProperty('--ghost-ty', `${(trailDy * offset).toFixed(1)}px`);
+    style.setProperty('--ghost-peak', `${opacities[i] ?? 0.05}`);
+    style.setProperty('--ghost-stretch', `${ghostStretch}`);
+    style.setProperty('--ghost-angle', `${trailAngleDeg.toFixed(0)}deg`);
+    style.setProperty('--ghost-delay', `${(i * 0.025).toFixed(3)}s`);
+
+    iconWrapper.appendChild(ghost);
+
+    restartAnimation(
+      ghost,
+      `crown-ghost ${duration}s ease-out var(--ghost-delay) forwards`,
+    );
+  }
+
+  iconWrapper.style.setProperty(
+    '--rocket-dx',
+    `${(Math.cos(angleRad) * dist).toFixed(1)}px`,
+  );
+  iconWrapper.style.setProperty(
+    '--rocket-dy',
+    `${(-Math.sin(angleRad) * dist).toFixed(1)}px`,
+  );
+
+  restartAnimation(
+    iconWrapper,
+    `crown-icon-rocket ${duration}s cubic-bezier(0.22, 1, 0.36, 1)`,
+  );
+
+  svg.style.transformOrigin = '15% 75%';
+  svg.style.animation = `crown-arrow-extend ${duration}s cubic-bezier(0.22, 1, 0.36, 1)`;
+
+  setTimeout(() => {
+    iconWrapper.querySelectorAll('.crown-ghost').forEach((el) => el.remove());
+  }, duration * 1000 + 50);
+};
+
+const restartSoundPulse = (card: HTMLElement): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  const svg = iconWrapper.querySelector<SVGElement>(':scope > svg');
+  if (!svg) {
+    return;
+  }
+
+  svg.style.overflow = 'visible';
+  iconWrapper.style.animation = 'none';
+
+  const nestedArcPaths = Array.from(
+    svg.querySelectorAll<SVGPathElement>('g > g > path'),
+  );
+
+  if (nestedArcPaths.length && !svg.dataset.megaphonePrepared) {
+    const topLevelPaths = Array.from(
+      svg.querySelectorAll<SVGPathElement>(':scope > g > path'),
+    );
+
+    const duplicateArcPath = topLevelPaths[0];
+    if (duplicateArcPath) {
+      duplicateArcPath.style.opacity = '0';
+    }
+
+    const mergedBodyPath = topLevelPaths.find((path) => {
+      const d = path.getAttribute('d') ?? '';
+      return /[zZ]\s*M/.test(d);
+    });
+
+    if (mergedBodyPath) {
+      const d = mergedBodyPath.getAttribute('d') ?? '';
+      const splitIndex = d.search(/[zZ]\s*M/);
+      if (splitIndex >= 0) {
+        const nextMoveIndex = d.indexOf('M', splitIndex);
+        if (nextMoveIndex >= 0) {
+          mergedBodyPath.setAttribute('d', d.slice(nextMoveIndex));
+        }
+      }
+    }
+
+    svg.dataset.megaphonePrepared = 'true';
+  }
+
+  const arcGroupPaths = nestedArcPaths.length
+    ? nestedArcPaths
+    : Array.from(svg.querySelectorAll<SVGPathElement>('path'));
+
+  arcGroupPaths.forEach((el) => {
+    el.style.removeProperty('animation');
+  });
+  forceReflow(svg);
+
+  iconWrapper.style.animation = 'crown-icon-megaphone 0.8s ease-out';
+  if (!arcGroupPaths.length) {
+    return;
+  }
+
+  const orderedArcPaths = [...arcGroupPaths].sort((a, b) => {
+    const aLength = a.getAttribute('d')?.length ?? 0;
+    const bLength = b.getAttribute('d')?.length ?? 0;
+    return bLength - aLength;
+  });
+
+  const earlyCount = Math.ceil(orderedArcPaths.length / 2);
+
+  orderedArcPaths.forEach((el, i) => {
+    const delay = i < earlyCount ? 0 : 0.1;
+    const { style } = el;
+    style.transformBox = 'fill-box';
+    style.transformOrigin = '0% 50%';
+    style.animation = `crown-sound-ripple 0.8s ease-out ${delay.toFixed(2)}s`;
+  });
+
+  const soundParticles = iconWrapper.querySelectorAll<HTMLElement>(
+    '.crown-sound-particle',
+  );
+
+  soundParticles.forEach((el, i) => {
+    const { style } = el;
+    const side = i % 2 === 0 ? -1 : 1;
+    const startX = 9 + Math.random() * 4;
+    const arcBandY = -4.5;
+    const sideOffset = 1.8 + Math.random() * 1.8;
+    const startY = arcBandY + side * sideOffset;
+    const endX = startX + 3 + Math.random() * 4;
+    const endY = startY + side * (0.4 + Math.random() * 1.4);
+    const delay = 0.04 + i * 0.02 + Math.random() * 0.03;
+    const peak = 0.24 + Math.random() * 0.12;
+
+    style.setProperty('--sound-particle-sx', `${startX.toFixed(1)}px`);
+    style.setProperty('--sound-particle-sy', `${startY.toFixed(1)}px`);
+    style.setProperty('--sound-particle-ex', `${endX.toFixed(1)}px`);
+    style.setProperty('--sound-particle-ey', `${endY.toFixed(1)}px`);
+    style.setProperty('--sound-particle-peak', peak.toFixed(2));
+
+    restartAnimation(
+      el,
+      `crown-sound-particle 0.65s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+};
+
+const restartFlame = (card: HTMLElement): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  restartAnimation(
+    iconWrapper,
+    'crown-icon-flame 1.1s cubic-bezier(0.32, 0.02, 0.22, 1)',
+  );
+
+  const flameGlow = iconWrapper.querySelector<HTMLElement>('.crown-flame-glow');
+  if (flameGlow) {
+    restartAnimation(flameGlow, 'crown-flame-glow 1.1s ease-out');
+  }
+
+  const embers =
+    iconWrapper.querySelectorAll<HTMLElement>('.crown-flame-ember');
+  embers.forEach((el, i) => {
+    const { style } = el;
+    const side = i % 2 === 0 ? -1 : 1;
+    const startX = side * (1.5 + Math.random() * 4.5);
+    const startY = -0.5 + Math.random() * 3.5;
+    const endX = startX + side * (1 + Math.random() * 3.5);
+    const endY = -11 - Math.random() * 7;
+    const peak = 0.42 + Math.random() * 0.22;
+    const delay = 0.02 + i * 0.02 + Math.random() * 0.03;
+
+    style.setProperty('--flame-ember-sx', `${startX.toFixed(1)}px`);
+    style.setProperty('--flame-ember-sy', `${startY.toFixed(1)}px`);
+    style.setProperty('--flame-ember-ex', `${endX.toFixed(1)}px`);
+    style.setProperty('--flame-ember-ey', `${endY.toFixed(1)}px`);
+    style.setProperty('--flame-ember-peak', peak.toFixed(2));
+
+    restartAnimation(
+      el,
+      `crown-flame-ember 1.45s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+};
+
+const restartMedal = (card: HTMLElement): void => {
+  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
+  if (!iconWrapper) {
+    return;
+  }
+
+  restartAnimation(
+    iconWrapper,
+    'crown-icon-medal 0.95s cubic-bezier(0.22, 1, 0.36, 1)',
+  );
+
+  const sheen = iconWrapper.querySelector<HTMLElement>('.crown-medal-sheen');
+  if (sheen) {
+    restartAnimation(sheen, 'crown-medal-sheen 0.7s ease-out');
+  }
+
+  const glints =
+    iconWrapper.querySelectorAll<HTMLElement>('.crown-medal-glint');
+  glints.forEach((el, i) => {
+    const { style } = el;
+    const delay = 0.06 + i * 0.08;
+    const x = i === 0 ? 7.5 : -7;
+    const y = i === 0 ? -6.5 : 4.5;
+
+    style.setProperty('--medal-glint-x', `${x}px`);
+    style.setProperty('--medal-glint-y', `${y}px`);
+    restartAnimation(
+      el,
+      `crown-medal-glint 0.46s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+
+  const particles = iconWrapper.querySelectorAll<HTMLElement>(
+    '.crown-medal-particle',
+  );
+
+  const medalCenterX = -2;
+  const medalCenterY = -5;
+  particles.forEach((el, i) => {
+    const { style } = el;
+    const slot = 360 / Math.max(particles.length, 1);
+    const jitter = (Math.random() - 0.5) * slot * 0.45;
+    const angleDeg = i * slot + jitter;
+    const angleRad = (angleDeg * Math.PI) / 180;
+    const startR = 2 + Math.random() * 2;
+    const endR = 18 + Math.random() * 10;
+    const sx = Math.cos(angleRad) * startR + medalCenterX;
+    const sy = Math.sin(angleRad) * startR + medalCenterY;
+    const ex = Math.cos(angleRad) * endR + medalCenterX;
+    const ey = Math.sin(angleRad) * endR + medalCenterY;
+    const delay = 0.01 + i * 0.01 + Math.random() * 0.015;
+    const peak = 0.62 + Math.random() * 0.24;
+
+    style.setProperty('--medal-particle-sx', `${sx.toFixed(1)}px`);
+    style.setProperty('--medal-particle-sy', `${sy.toFixed(1)}px`);
+    style.setProperty('--medal-particle-ex', `${ex.toFixed(1)}px`);
+    style.setProperty('--medal-particle-ey', `${ey.toFixed(1)}px`);
+    style.setProperty('--medal-particle-peak', peak.toFixed(2));
+
+    restartAnimation(
+      el,
+      `crown-medal-particle 1.05s ease-out ${delay.toFixed(2)}s`,
+    );
+  });
+};
+
+export const runCrownMouseEnterAnimation = (
+  card: HTMLElement,
+  crownType: CrownType,
+  glowColor: string,
+): void => {
+  if (crownType === 'fastest-rising') {
+    restartRocket(card, glowColor);
+    return;
+  }
+
+  if (crownType === 'most-discussed') {
+    restartSoundPulse(card);
+    return;
+  }
+
+  if (crownType === 'most-controversial') {
+    restartFlame(card);
+    return;
+  }
+
+  if (crownType === 'developers-choice') {
+    restartMedal(card);
+    return;
+  }
+
+  restartIconAnimation(card, crownType);
+
+  if (crownType === 'most-loved') {
+    restartBloom(card);
+    return;
+  }
+
+  randomizeSparks(card);
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
index 69218c4e7d..726cbd2c9c 100644
--- a/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaCrownCards.tsx
@@ -2,472 +2,18 @@ import type { ReactElement } from 'react';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import { IconSize } from '../../../components/Icon';
-import type { CrownData, CrownType } from './types';
+import type { CrownData } from './types';
+import {
+  CROWN_SPARK_COUNT,
+  crownHoverAnimations,
+  runCrownMouseEnterAnimation,
+} from './ArenaCrownAnimations';
 
 interface ArenaCrownCardsProps {
   crowns: CrownData[];
   loading?: boolean;
 }
 
-const crownHoverAnimations: Partial<Record<CrownType, string>> = {
-  'developers-choice': 'crown-hover-developers-choice',
-  'most-loved': 'crown-hover-most-loved',
-  'fastest-rising': 'crown-hover-fastest-rising',
-  'most-discussed': 'crown-hover-most-discussed',
-  'most-controversial': 'crown-hover-most-controversial',
-};
-
-/* ── Per-crown icon animation overrides ────────────────────────────── */
-const crownIconAnimation: Partial<Record<CrownType, string>> = {
-  'most-loved': 'crown-icon-bloom-pulse 1.2s ease-in-out',
-};
-const DEFAULT_ICON_ANIMATION = 'crown-icon-pop 1.2s ease-out';
-
-const forceReflow = (element: Element): void => {
-  element.getBoundingClientRect();
-};
-
-const restartAnimation = (
-  element: HTMLElement | SVGElement,
-  animation: string,
-): void => {
-  const { style } = element;
-  style.animation = 'none';
-  forceReflow(element);
-  style.animation = animation;
-};
-
-/* ── Spark particle tuning ─────────────────────────────────────────── */
-const SPARK_CONFIG = {
-  count: 7, // number of particles
-  radius: 30, // max travel distance in px
-  burstPct: 20, // % of animation where the fast burst ends (higher = slower burst)
-  burstRatio: 0.65, // fraction of radius reached at burstPct (0-1)
-  angleMin: -50, // minimum angle in degrees (0 = straight up, negative = left)
-  angleMax: 50, // maximum angle in degrees (positive = right)
-  duration: 1.2, // total animation duration in seconds
-  staggerMax: 0.08, // max stagger delay between particles in seconds
-};
-
-/**
- * Randomizes spark particle trajectories via CSS custom properties
- * and restarts their animations. Called on each mouseenter — no React state needed.
- */
-const randomizeSparks = (card: HTMLElement): void => {
-  const {
-    count,
-    radius,
-    burstRatio,
-    angleMin,
-    angleMax,
-    duration,
-    staggerMax,
-  } = SPARK_CONFIG;
-  const sparks = card.querySelectorAll<HTMLElement>('.crown-spark');
-  const angleRange = angleMax - angleMin;
-
-  sparks.forEach((el, i) => {
-    const { style } = el;
-    // spread evenly around the ring, jitter ±20% of slot width
-    const isFullCircle = angleRange >= 360;
-    const slots = isFullCircle ? count : Math.max(count - 1, 1);
-    const slotWidth = angleRange / slots;
-    const baseAngle = angleMin + (i / slots) * angleRange;
-    const jitter = (Math.random() - 0.5) * slotWidth * 0.4;
-    const angle = baseAngle + jitter;
-    const rad = (angle * Math.PI) / 180;
-
-    // randomize radius ±20%
-    const r = radius * (0.95 + Math.random() * 0.05);
-    const burstR = r * burstRatio;
-
-    const bx = Math.round(Math.sin(rad) * burstR);
-    const by = Math.round(-Math.cos(rad) * burstR);
-    const fx = Math.round(Math.sin(rad) * r);
-    const fy = Math.round(-Math.cos(rad) * r);
-
-    style.setProperty('--spark-bx', `${bx}px`);
-    style.setProperty('--spark-by', `${by}px`);
-    style.setProperty('--spark-fx', `${fx}px`);
-    style.setProperty('--spark-fy', `${fy}px`);
-    style.setProperty(
-      '--spark-peak',
-      `${(0.7 + Math.random() * 0.3).toFixed(2)}`,
-    );
-    style.setProperty(
-      '--spark-delay',
-      `${(Math.random() * staggerMax).toFixed(2)}s`,
-    );
-
-    restartAnimation(
-      el,
-      `crown-spark ${duration}s ease-out var(--spark-delay) forwards`,
-    );
-  });
-};
-
-/**
- * Restarts the icon pop/heartbeat animation via DOM.
- */
-const restartIconAnimation = (
-  card: HTMLElement,
-  crownType: CrownType,
-): void => {
-  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
-  if (!iconWrapper) {
-    return;
-  }
-  const anim = crownIconAnimation[crownType] ?? DEFAULT_ICON_ANIMATION;
-  restartAnimation(iconWrapper, anim);
-};
-
-/**
- * Restarts the warm bloom animation for the most-loved crown.
- */
-const restartBloom = (card: HTMLElement): void => {
-  const bloom = card.querySelector<HTMLElement>('.crown-bloom');
-  if (!bloom) {
-    return;
-  }
-  restartAnimation(bloom, 'crown-bloom 1.4s ease-in-out forwards');
-};
-
-/* ── Ghost-trail config (fastest-rising) ─────────────────────────────── */
-const GHOST_CONFIG = {
-  count: 5, // number of afterimage clones
-  spacing: 6, // px between each ghost along the trail axis
-  blur: [0.5, 1, 1.8, 2.8, 4], // blur per ghost layer in px
-  opacities: [0.5, 0.38, 0.26, 0.15, 0.07], // opacity per ghost layer
-  stretch: [1.08, 1.14, 1.2, 1.28, 1.36], // scaleY stretch per ghost (elongation along trail)
-  lungeDist: [7, 11], // min/max lunge distance in px
-  lungeAngle: [38, 52], // min/max lunge angle in degrees from horizontal
-  duration: 0.9, // animation duration in seconds
-};
-
-/**
- * Creates ghost-clone afterimages of the icon trailing behind the lunge
- * direction. Clones the actual SVG element so the trail perfectly matches
- * the icon shape. Clones are cleaned up after the animation completes.
- */
-const restartRocket = (card: HTMLElement, glowColor: string): void => {
-  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
-  if (!iconWrapper) {
-    return;
-  }
-
-  // Clean up any leftover ghosts from a previous hover
-  iconWrapper.querySelectorAll('.crown-ghost').forEach((el) => el.remove());
-
-  // Find the original SVG (not a ghost clone)
-  const svg = iconWrapper.querySelector<SVGElement>(':scope > svg');
-  if (!svg) {
-    return;
-  }
-
-  // Reset SVG animation so it can restart cleanly
-  svg.style.animation = 'none';
-  forceReflow(svg);
-
-  // Randomize lunge direction
-  const {
-    count,
-    spacing,
-    blur,
-    opacities,
-    stretch,
-    lungeDist,
-    lungeAngle,
-    duration,
-  } = GHOST_CONFIG;
-  const angleDeg =
-    lungeAngle[0] + Math.random() * (lungeAngle[1] - lungeAngle[0]);
-  const angleRad = (angleDeg * Math.PI) / 180;
-  const dist = lungeDist[0] + Math.random() * (lungeDist[1] - lungeDist[0]);
-
-  // Trail direction is opposite to lunge (lower-left)
-  const trailDx = -Math.cos(angleRad);
-  const trailDy = Math.sin(angleRad);
-
-  // Trail angle for stretching ghosts along the motion axis
-  const trailAngleDeg = angleDeg + 180;
-
-  // Create ghost clones
-  for (let i = 0; i < count; i += 1) {
-    const ghost = svg.cloneNode(true) as SVGElement;
-    ghost.classList.add('crown-ghost');
-    const { style } = ghost;
-    style.position = 'absolute';
-    style.inset = '0';
-    style.pointerEvents = 'none';
-    style.opacity = '0';
-    style.color = glowColor;
-
-    // Per-ghost blur and stretch (elongation along trail axis)
-    const ghostBlur = blur[i] ?? blur[blur.length - 1];
-    const ghostStretch = stretch[i] ?? stretch[stretch.length - 1];
-    style.filter = `blur(${ghostBlur}px)`;
-    // Stretch along the trail direction using rotate-scale-rotate
-    style.transformOrigin = '50% 50%';
-
-    // Offset along the trail axis
-    const offset = spacing * (i + 1);
-    const tx = (trailDx * offset).toFixed(1);
-    const ty = (trailDy * offset).toFixed(1);
-    style.setProperty('--ghost-tx', `${tx}px`);
-    style.setProperty('--ghost-ty', `${ty}px`);
-    style.setProperty('--ghost-peak', `${opacities[i] ?? 0.05}`);
-    style.setProperty('--ghost-stretch', `${ghostStretch}`);
-    style.setProperty('--ghost-angle', `${trailAngleDeg.toFixed(0)}deg`);
-    style.setProperty('--ghost-delay', `${(i * 0.025).toFixed(3)}s`);
-
-    iconWrapper.appendChild(ghost);
-
-    restartAnimation(
-      ghost,
-      `crown-ghost ${duration}s ease-out var(--ghost-delay) forwards`,
-    );
-  }
-
-  // Animate the icon itself (lunge + snap back)
-  const dx = (Math.cos(angleRad) * dist).toFixed(1);
-  const dy = (-Math.sin(angleRad) * dist).toFixed(1);
-  iconWrapper.style.setProperty('--rocket-dx', `${dx}px`);
-  iconWrapper.style.setProperty('--rocket-dy', `${dy}px`);
-
-  restartAnimation(
-    iconWrapper,
-    `crown-icon-rocket ${duration}s cubic-bezier(0.22, 1, 0.36, 1)`,
-  );
-
-  // Stretch the arrow along its ~45° axis, anchored at the line's starting point
-  svg.style.transformOrigin = '15% 75%';
-  svg.style.animation = `crown-arrow-extend ${duration}s cubic-bezier(0.22, 1, 0.36, 1)`;
-
-  // Clean up ghosts after animation
-  setTimeout(() => {
-    iconWrapper.querySelectorAll('.crown-ghost').forEach((el) => el.remove());
-  }, duration * 1000 + 50);
-};
-
-/**
- * Animates the megaphone's existing arc paths to create a ripple.
- * Some icon variants include overlapping arc groups, so we animate
- * all matching arc paths together to avoid "extra arc" artifacts.
- */
-const restartSoundPulse = (card: HTMLElement): void => {
-  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
-  if (!iconWrapper) {
-    return;
-  }
-
-  const svg = iconWrapper.querySelector<SVGElement>(':scope > svg');
-  if (!svg) {
-    return;
-  }
-
-  svg.style.overflow = 'visible';
-
-  iconWrapper.style.animation = 'none';
-  const nestedArcPaths = Array.from(
-    svg.querySelectorAll<SVGPathElement>('g > g > path'),
-  );
-
-  if (nestedArcPaths.length && !svg.dataset.megaphonePrepared) {
-    const topLevelPaths = Array.from(
-      svg.querySelectorAll<SVGPathElement>(':scope > g > path'),
-    );
-
-    const duplicateArcPath = topLevelPaths[0];
-    if (duplicateArcPath) {
-      duplicateArcPath.style.opacity = '0';
-    }
-
-    const mergedBodyPath = topLevelPaths.find((path) => {
-      const d = path.getAttribute('d') ?? '';
-      return /[zZ]\s*M/.test(d);
-    });
-    if (mergedBodyPath) {
-      const d = mergedBodyPath.getAttribute('d') ?? '';
-      const splitIndex = d.search(/[zZ]\s*M/);
-      if (splitIndex >= 0) {
-        const nextMoveIndex = d.indexOf('M', splitIndex);
-        if (nextMoveIndex >= 0) {
-          mergedBodyPath.setAttribute('d', d.slice(nextMoveIndex));
-        }
-      }
-    }
-
-    svg.dataset.megaphonePrepared = 'true';
-  }
-
-  const arcGroupPaths = nestedArcPaths.length
-    ? nestedArcPaths
-    : Array.from(svg.querySelectorAll<SVGPathElement>('path'));
-
-  arcGroupPaths.forEach((el) => {
-    el.style.removeProperty('animation');
-  });
-  forceReflow(svg);
-
-  iconWrapper.style.animation = 'crown-icon-megaphone 0.8s ease-out';
-  if (!arcGroupPaths.length) {
-    return;
-  }
-
-  const orderedArcPaths = [...arcGroupPaths].sort((a, b) => {
-    const aLength = a.getAttribute('d')?.length ?? 0;
-    const bLength = b.getAttribute('d')?.length ?? 0;
-    return bLength - aLength;
-  });
-  const earlyCount = Math.ceil(orderedArcPaths.length / 2);
-
-  orderedArcPaths.forEach((el, i) => {
-    const delay = i < earlyCount ? 0 : 0.1;
-    const { style } = el;
-    style.transformBox = 'fill-box';
-    style.transformOrigin = '0% 50%';
-    style.animation = `crown-sound-ripple 0.8s ease-out ${delay.toFixed(2)}s`;
-  });
-
-  const soundParticles = iconWrapper.querySelectorAll<HTMLElement>(
-    '.crown-sound-particle',
-  );
-  soundParticles.forEach((el, i) => {
-    const { style } = el;
-    const side = i % 2 === 0 ? -1 : 1;
-    const startX = 9 + Math.random() * 4;
-    const arcBandY = -4.5;
-    const sideOffset = 1.8 + Math.random() * 1.8;
-    const startY = arcBandY + side * sideOffset;
-    const endX = startX + 3 + Math.random() * 4;
-    const endY = startY + side * (0.4 + Math.random() * 1.4);
-    const delay = 0.04 + i * 0.02 + Math.random() * 0.03;
-    const peak = 0.24 + Math.random() * 0.12;
-
-    style.setProperty('--sound-particle-sx', `${startX.toFixed(1)}px`);
-    style.setProperty('--sound-particle-sy', `${startY.toFixed(1)}px`);
-    style.setProperty('--sound-particle-ex', `${endX.toFixed(1)}px`);
-    style.setProperty('--sound-particle-ey', `${endY.toFixed(1)}px`);
-    style.setProperty('--sound-particle-peak', peak.toFixed(2));
-    restartAnimation(
-      el,
-      `crown-sound-particle 0.65s ease-out ${delay.toFixed(2)}s`,
-    );
-  });
-};
-
-/**
- * Flame microinteraction for most-controversial:
- * subtle flicker on the icon, soft heat glow pulse, and tiny ember drift.
- */
-const restartFlame = (card: HTMLElement): void => {
-  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
-  if (!iconWrapper) {
-    return;
-  }
-
-  restartAnimation(
-    iconWrapper,
-    'crown-icon-flame 1.1s cubic-bezier(0.32, 0.02, 0.22, 1)',
-  );
-
-  const flameGlow = iconWrapper.querySelector<HTMLElement>('.crown-flame-glow');
-  if (flameGlow) {
-    restartAnimation(flameGlow, 'crown-flame-glow 1.1s ease-out');
-  }
-
-  const embers =
-    iconWrapper.querySelectorAll<HTMLElement>('.crown-flame-ember');
-  embers.forEach((el, i) => {
-    const { style } = el;
-    const side = i % 2 === 0 ? -1 : 1;
-    const startX = side * (1.5 + Math.random() * 4.5);
-    const startY = -0.5 + Math.random() * 3.5;
-    const endX = startX + side * (1 + Math.random() * 3.5);
-    const endY = -11 - Math.random() * 7;
-    const peak = 0.42 + Math.random() * 0.22;
-    const delay = 0.02 + i * 0.02 + Math.random() * 0.03;
-
-    style.setProperty('--flame-ember-sx', `${startX.toFixed(1)}px`);
-    style.setProperty('--flame-ember-sy', `${startY.toFixed(1)}px`);
-    style.setProperty('--flame-ember-ex', `${endX.toFixed(1)}px`);
-    style.setProperty('--flame-ember-ey', `${endY.toFixed(1)}px`);
-    style.setProperty('--flame-ember-peak', peak.toFixed(2));
-    restartAnimation(
-      el,
-      `crown-flame-ember 1.45s ease-out ${delay.toFixed(2)}s`,
-    );
-  });
-};
-
-/**
- * Developers-choice microinteraction:
- * medal tilt/rebound + quick rim sweep + two tiny glints.
- */
-const restartMedal = (card: HTMLElement): void => {
-  const iconWrapper = card.querySelector<HTMLElement>('.crown-icon-wrapper');
-  if (!iconWrapper) {
-    return;
-  }
-
-  restartAnimation(
-    iconWrapper,
-    'crown-icon-medal 0.95s cubic-bezier(0.22, 1, 0.36, 1)',
-  );
-
-  const sheen = iconWrapper.querySelector<HTMLElement>('.crown-medal-sheen');
-  if (sheen) {
-    restartAnimation(sheen, 'crown-medal-sheen 0.7s ease-out');
-  }
-
-  const glints =
-    iconWrapper.querySelectorAll<HTMLElement>('.crown-medal-glint');
-  glints.forEach((el, i) => {
-    const { style } = el;
-    const delay = 0.06 + i * 0.08;
-    const x = i === 0 ? 7.5 : -7;
-    const y = i === 0 ? -6.5 : 4.5;
-
-    style.setProperty('--medal-glint-x', `${x}px`);
-    style.setProperty('--medal-glint-y', `${y}px`);
-    restartAnimation(
-      el,
-      `crown-medal-glint 0.46s ease-out ${delay.toFixed(2)}s`,
-    );
-  });
-
-  const particles = iconWrapper.querySelectorAll<HTMLElement>(
-    '.crown-medal-particle',
-  );
-  const medalCenterX = -2;
-  const medalCenterY = -5;
-  particles.forEach((el, i) => {
-    const { style } = el;
-    const slot = 360 / Math.max(particles.length, 1);
-    const jitter = (Math.random() - 0.5) * slot * 0.45;
-    const angleDeg = i * slot + jitter;
-    const angleRad = (angleDeg * Math.PI) / 180;
-    const startR = 2 + Math.random() * 2;
-    const endR = 18 + Math.random() * 10;
-    const sx = Math.cos(angleRad) * startR + medalCenterX;
-    const sy = Math.sin(angleRad) * startR + medalCenterY;
-    const ex = Math.cos(angleRad) * endR + medalCenterX;
-    const ey = Math.sin(angleRad) * endR + medalCenterY;
-    const delay = 0.01 + i * 0.01 + Math.random() * 0.015;
-    const peak = 0.62 + Math.random() * 0.24;
-
-    style.setProperty('--medal-particle-sx', `${sx.toFixed(1)}px`);
-    style.setProperty('--medal-particle-sy', `${sy.toFixed(1)}px`);
-    style.setProperty('--medal-particle-ex', `${ex.toFixed(1)}px`);
-    style.setProperty('--medal-particle-ey', `${ey.toFixed(1)}px`);
-    style.setProperty('--medal-particle-peak', peak.toFixed(2));
-    restartAnimation(
-      el,
-      `crown-medal-particle 1.05s ease-out ${delay.toFixed(2)}s`,
-    );
-  });
-};
-
 const Placeholder = ({ className }: { className?: string }): ReactElement => (
   <div
     className={classNames(
@@ -492,22 +38,8 @@ const CrownCard = ({
       if (!hasEntity) {
         return;
       }
-      if (crown.type === 'fastest-rising') {
-        restartRocket(e.currentTarget, crown.glowColor);
-      } else if (crown.type === 'most-discussed') {
-        restartSoundPulse(e.currentTarget);
-      } else if (crown.type === 'most-controversial') {
-        restartFlame(e.currentTarget);
-      } else if (crown.type === 'developers-choice') {
-        restartMedal(e.currentTarget);
-      } else {
-        restartIconAnimation(e.currentTarget, crown.type);
-        if (crown.type === 'most-loved') {
-          restartBloom(e.currentTarget);
-        } else {
-          randomizeSparks(e.currentTarget);
-        }
-      }
+
+      runCrownMouseEnterAnimation(e.currentTarget, crown.type, crown.glowColor);
     },
     [hasEntity, crown.glowColor, crown.type],
   );
@@ -521,7 +53,6 @@ const CrownCard = ({
       )}
       onMouseEnter={handleMouseEnter}
     >
-      {/* Animated gradient glow that breathes */}
       {hasEntity && (
         <div
           className="group-hover:!opacity-30 pointer-events-none absolute -top-10 left-1/2 h-28 w-28 -translate-x-1/2 rounded-full blur-2xl transition-opacity duration-300"
@@ -533,7 +64,6 @@ const CrownCard = ({
         />
       )}
 
-      {/* Crown icon + label */}
       <div className="flex flex-col items-center gap-1">
         <div className="crown-icon-wrapper relative transition-transform duration-300">
           <crown.icon
@@ -543,7 +73,7 @@ const CrownCard = ({
               hasEntity ? crown.iconColor : 'text-text-quaternary',
             )}
           />
-          {/* Spark particles — burst from icon visual center on hover */}
+
           {hasEntity &&
             crown.type !== 'most-loved' &&
             crown.type !== 'fastest-rising' &&
@@ -551,7 +81,7 @@ const CrownCard = ({
             crown.type !== 'most-controversial' &&
             crown.type !== 'developers-choice' && (
               <div className="z-10 pointer-events-none absolute inset-0">
-                {Array.from({ length: SPARK_CONFIG.count }, (_, i) => (
+                {Array.from({ length: CROWN_SPARK_COUNT }, (_, i) => (
                   <div
                     key={i}
                     className="crown-spark absolute left-1/2 top-1/2 h-1 w-1 rounded-full"
@@ -560,7 +90,7 @@ const CrownCard = ({
                 ))}
               </div>
             )}
-          {/* Flame glow + embers for most-controversial */}
+
           {hasEntity && crown.type === 'most-controversial' && (
             <>
               <div
@@ -589,7 +119,7 @@ const CrownCard = ({
               </div>
             </>
           )}
-          {/* Medal sheen + glints for developers-choice */}
+
           {hasEntity && crown.type === 'developers-choice' && (
             <>
               <div className="pointer-events-none absolute inset-0 overflow-hidden rounded-full">
@@ -633,7 +163,7 @@ const CrownCard = ({
               </div>
             </>
           )}
-          {/* Subtle ripple-side particles for megaphone */}
+
           {hasEntity && crown.type === 'most-discussed' && (
             <div className="pointer-events-none absolute inset-0">
               {Array.from({ length: 6 }, (_, i) => (
@@ -645,7 +175,7 @@ const CrownCard = ({
               ))}
             </div>
           )}
-          {/* Warm bloom — radial glow from icon center on hover */}
+
           {hasEntity && crown.type === 'most-loved' && (
             <div
               className="crown-bloom pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-0"
@@ -657,6 +187,7 @@ const CrownCard = ({
             />
           )}
         </div>
+
         <span
           className="text-center tracking-wider typo-caption2 tablet:typo-caption1"
           style={hasEntity ? { color: crown.glowColor } : undefined}
@@ -665,7 +196,6 @@ const CrownCard = ({
         </span>
       </div>
 
-      {/* Tool info */}
       <div className="flex h-7 items-center gap-1.5 tablet:h-8 tablet:gap-2">
         {loading ? (
           <>
@@ -686,7 +216,6 @@ const CrownCard = ({
         )}
       </div>
 
-      {/* Stat line */}
       <div className="flex h-5 items-center">
         {loading ? (
           <Placeholder className="h-4 w-16" />
@@ -701,223 +230,12 @@ const CrownCard = ({
 export const ArenaCrownCards = ({
   crowns,
   loading,
-}: ArenaCrownCardsProps): ReactElement => (
-  <>
-    <style
-      dangerouslySetInnerHTML={{
-        __html: `
-          @keyframes crown-icon-pop {
-            0% { transform: scale(1) rotate(0deg); }
-            15% { transform: scale(1.18) rotate(-8deg); }
-            30% { transform: scale(1.05) rotate(2deg); }
-            45% { transform: scale(1.1) rotate(-3deg); }
-            60% { transform: scale(1) rotate(0deg); }
-            100% { transform: scale(1) rotate(0deg); }
-          }
-          @keyframes crown-spark {
-            0% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
-            ${SPARK_CONFIG.burstPct}% { opacity: var(--spark-peak, 0.9); transform: translate(calc(-50% + var(--spark-bx, 0px)),calc(-50% + var(--spark-by, -16px))) scale(0.7); }
-            100% { transform: translate(calc(-50% + var(--spark-fx, 0px)),calc(-50% + var(--spark-fy, -26px))) scale(0); opacity: 0; }
-          }
-          .crown-spark { opacity: 0; }
-          @keyframes crown-icon-bloom-pulse {
-            0% { transform: scale(1); }
-            30% { transform: scale(1.1); }
-            60% { transform: scale(1); }
-            100% { transform: scale(1); }
-          }
-          @keyframes crown-bloom {
-            0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
-            20% { opacity: 1; }
-            45% { transform: translate(-50%,-50%) scale(0.9); opacity: 0.85; }
-            100% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; }
-          }
-          .crown-bloom { opacity: 0; }
-          .crown-hover-most-loved:hover {
-            box-shadow:
-              0 0 40px color-mix(in srgb, var(--theme-accent-cabbage-default) 22%, transparent),
-              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-cabbage-default) 30%, transparent) !important;
-          }
-          @keyframes crown-icon-rocket {
-            0% { transform: translate(0, 0); }
-            18% { transform: translate(var(--rocket-dx, 3px), var(--rocket-dy, -3px)); }
-            45% { transform: translate(var(--rocket-dx, 3px), var(--rocket-dy, -3px)); }
-            75% { transform: translate(0, 0); }
-            100% { transform: translate(0, 0); }
-          }
-          @keyframes crown-arrow-extend {
-            0% { transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg); }
-            15% { transform: rotate(-45deg) scaleY(1.25) scaleX(0.95) rotate(45deg); }
-            50% { transform: rotate(-45deg) scaleY(1.25) scaleX(0.95) rotate(45deg); }
-            80% { transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg); }
-            100% { transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg); }
-          }
-          @keyframes crown-ghost {
-            0% {
-              transform: translate(0, 0) rotate(var(--ghost-angle, 225deg)) scaleY(1) rotate(calc(var(--ghost-angle, 225deg) * -1));
-              opacity: 0;
-            }
-            12% {
-              transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px)) rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2)) rotate(calc(var(--ghost-angle, 225deg) * -1));
-              opacity: var(--ghost-peak, 0.3);
-            }
-            55% {
-              transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px)) rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2)) rotate(calc(var(--ghost-angle, 225deg) * -1));
-              opacity: var(--ghost-peak, 0.3);
-            }
-            100% {
-              transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px)) rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2)) rotate(calc(var(--ghost-angle, 225deg) * -1));
-              opacity: 0;
-            }
-          }
-          @keyframes crown-icon-megaphone {
-            0% { transform: rotate(0deg) translateX(0); }
-            18% { transform: rotate(-5deg) translateX(-2px); }
-            40% { transform: rotate(2deg) translateX(1px); }
-            60% { transform: rotate(0deg) translateX(0); }
-            100% { transform: rotate(0deg) translateX(0); }
-          }
-          @keyframes crown-sound-ripple {
-            0% { transform: rotate(-53deg) translateX(0) scale(1) rotate(53deg); opacity: 1; }
-            65% { transform: rotate(-53deg) translateX(6px) scale(1.08) rotate(53deg); opacity: 0; }
-            99.9% { transform: rotate(-53deg) translateX(6px) scale(1.08) rotate(53deg); opacity: 0; }
-            100% { transform: rotate(-53deg) translateX(0) scale(1) rotate(53deg); opacity: 1; }
-          }
-          @keyframes crown-sound-particle {
-            0% {
-              transform: translate(var(--sound-particle-sx, 10px), var(--sound-particle-sy, 0px)) scale(0.8);
-              opacity: 0;
-            }
-            28% {
-              transform: translate(var(--sound-particle-sx, 10px), var(--sound-particle-sy, 0px)) scale(1);
-              opacity: var(--sound-particle-peak, 0.3);
-            }
-            100% {
-              transform: translate(var(--sound-particle-ex, 14px), var(--sound-particle-ey, 0px)) scale(0.65);
-              opacity: 0;
-            }
-          }
-          @keyframes crown-icon-flame {
-            0% { transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1); }
-            16% { transform: translate(-0.5px, -1.2px) rotate(-1.8deg) scaleX(0.96) scaleY(1.1); }
-            33% { transform: translate(0.6px, -1.8px) rotate(1.3deg) scaleX(1.04) scaleY(1.13); }
-            50% { transform: translate(-0.4px, -0.9px) rotate(-0.9deg) scaleX(0.98) scaleY(1.07); }
-            72% { transform: translate(0.5px, -1.5px) rotate(1.1deg) scaleX(1.03) scaleY(1.1); }
-            100% { transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1); }
-          }
-          @keyframes crown-flame-glow {
-            0% { transform: translate(-50%,-50%) scale(0.85); opacity: 0; }
-            30% { transform: translate(-50%,-50%) scale(1.04); opacity: 0.38; }
-            65% { transform: translate(-50%,-50%) scale(1.14); opacity: 0.24; }
-            100% { transform: translate(-50%,-50%) scale(1.14); opacity: 0; }
-          }
-          @keyframes crown-flame-ember {
-            0% {
-              transform: translate(var(--flame-ember-sx, 0px), var(--flame-ember-sy, 0px)) scale(0.7);
-              opacity: 0;
-            }
-            25% {
-              transform: translate(var(--flame-ember-sx, 0px), var(--flame-ember-sy, 0px)) scale(1);
-              opacity: var(--flame-ember-peak, 0.5);
-            }
-            55% {
-              transform: translate(
-                calc(var(--flame-ember-sx, 0px) + (var(--flame-ember-ex, 2px) - var(--flame-ember-sx, 0px)) * 0.45),
-                calc(var(--flame-ember-sy, 0px) + (var(--flame-ember-ey, -10px) - var(--flame-ember-sy, 0px)) * 0.45)
-              ) scale(0.78);
-              opacity: calc(var(--flame-ember-peak, 0.5) * 0.7);
-            }
-            100% {
-              transform: translate(var(--flame-ember-ex, 2px), var(--flame-ember-ey, -10px)) scale(0.4);
-              opacity: 0;
-            }
-          }
-          @keyframes crown-icon-medal {
-            0% { transform: rotate(0deg) scale(1); }
-            20% { transform: rotate(-6deg) scale(1.06); }
-            44% { transform: rotate(2.2deg) scale(1.02); }
-            64% { transform: rotate(-1deg) scale(1.01); }
-            100% { transform: rotate(0deg) scale(1); }
-          }
-          @keyframes crown-medal-sheen {
-            0% {
-              transform: translate(-170%, -50%) rotate(18deg);
-              opacity: 0;
-            }
-            20% {
-              opacity: 0.5;
-            }
-            70% {
-              transform: translate(20%, -50%) rotate(18deg);
-              opacity: 0.35;
-            }
-            100% {
-              transform: translate(65%, -50%) rotate(18deg);
-              opacity: 0;
-            }
-          }
-          @keyframes crown-medal-glint {
-            0% {
-              transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px)) scale(0.5);
-              opacity: 0;
-            }
-            45% {
-              transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px)) scale(1.2);
-              opacity: 0.75;
-            }
-            100% {
-              transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px)) scale(0.7);
-              opacity: 0;
-            }
-          }
-          @keyframes crown-medal-particle {
-            0% {
-              transform: translate(var(--medal-particle-sx, 0px), var(--medal-particle-sy, 0px)) scale(0.5);
-              opacity: 0;
-            }
-            35% {
-              transform: translate(var(--medal-particle-sx, 0px), var(--medal-particle-sy, 0px)) scale(1);
-              opacity: var(--medal-particle-peak, 0.78);
-            }
-            58% {
-              transform: translate(
-                calc(var(--medal-particle-sx, 0px) + (var(--medal-particle-ex, 0px) - var(--medal-particle-sx, 0px)) * 0.5),
-                calc(var(--medal-particle-sy, 0px) + (var(--medal-particle-ey, 0px) - var(--medal-particle-sy, 0px)) * 0.5)
-              ) scale(0.82);
-              opacity: calc(var(--medal-particle-peak, 0.78) * 0.6);
-            }
-            100% {
-              transform: translate(var(--medal-particle-ex, 0px), var(--medal-particle-ey, 0px)) scale(0.38);
-              opacity: 0;
-            }
-          }
-          .crown-hover-most-discussed:hover {
-            box-shadow:
-              0 0 40px color-mix(in srgb, var(--theme-accent-blueCheese-default) 22%, transparent),
-              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-blueCheese-default) 30%, transparent) !important;
-          }
-          .crown-hover-developers-choice:hover {
-            box-shadow:
-              0 0 40px color-mix(in srgb, var(--theme-accent-cheese-default) 22%, transparent),
-              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-cheese-default) 30%, transparent) !important;
-          }
-          .crown-hover-most-controversial:hover {
-            box-shadow:
-              0 0 40px color-mix(in srgb, var(--theme-accent-ketchup-default) 22%, transparent),
-              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-ketchup-default) 30%, transparent) !important;
-          }
-          .crown-hover-fastest-rising:hover {
-            box-shadow:
-              0 0 40px color-mix(in srgb, var(--theme-accent-avocado-default) 22%, transparent),
-              inset 0 1px 0 color-mix(in srgb, var(--theme-accent-avocado-default) 30%, transparent) !important;
-          }
-        `,
-      }}
-    />
+}: ArenaCrownCardsProps): ReactElement => {
+  return (
     <div className="flex gap-3 overflow-x-auto pb-2 tablet:grid tablet:grid-cols-5 tablet:overflow-visible">
       {crowns.map((crown) => (
         <CrownCard key={crown.type} crown={crown} loading={loading} />
       ))}
     </div>
-  </>
-);
+  );
+};
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..22c23cf994
--- /dev/null
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightUtils.ts
@@ -0,0 +1,24 @@
+export const stripTcoLinks = (text: string): string =>
+  text.replace(/https?:\/\/t\.co\/\S+/g, '').trim();
+
+export const formatTimeAgo = (createdAt: string): string => {
+  const diffMs = Date.now() - new Date(createdAt).getTime();
+  const diffSeconds = Math.floor(diffMs / 1000);
+
+  if (diffSeconds < 60) {
+    return `${diffSeconds}s ago`;
+  }
+
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  if (diffMinutes < 60) {
+    return `${diffMinutes}m ago`;
+  }
+
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  }
+
+  const diffDays = Math.floor(diffHours / 24);
+  return `${diffDays}d ago`;
+};
diff --git a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
index b656da46cb..263f1286c7 100644
--- a/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaHighlightsFeed.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useViewSize, ViewSize } from '../../../hooks';
 import type { SentimentAnnotation, SentimentHighlightItem } from './types';
-import { stripTcoLinks, formatTimeAgo } from './ArenaLiveTicker';
+import { stripTcoLinks, formatTimeAgo } from './ArenaHighlightUtils';
 
 const decodeHtmlEntities = (text: string): string => {
   const textarea =
@@ -16,6 +16,7 @@ const decodeHtmlEntities = (text: string): string => {
       .replace(/&quot;/g, '"')
       .replace(/&#39;/g, "'");
   }
+
   textarea.innerHTML = text;
   return textarea.value;
 };
@@ -97,7 +98,6 @@ const HighlightCard = ({
     <div className="flex gap-3 px-4 py-3">
       <AuthorAvatar author={item.author} />
       <div className="flex min-w-0 flex-1 flex-col gap-1.5">
-        {/* Author info */}
         <div className="flex min-w-0 items-center gap-1.5">
           {item.author?.name && (
             <span className="shrink truncate font-bold text-text-primary typo-caption1">
@@ -114,16 +114,14 @@ const HighlightCard = ({
           </span>
         </div>
 
-        {/* Full text */}
         <p className="whitespace-pre-wrap break-words text-text-secondary typo-callout">
           {cleanText}
         </p>
 
-        {/* Sentiment pills */}
         {item.sentiments.length > 0 && (
           <div className="flex flex-wrap gap-1.5">
-            {item.sentiments.map((s) => (
-              <SentimentPill key={s.entity} sentiment={s} />
+            {item.sentiments.map((sentiment) => (
+              <SentimentPill key={sentiment.entity} sentiment={sentiment} />
             ))}
           </div>
         )}
@@ -170,29 +168,40 @@ export const ArenaHighlightsFeed = ({
   const [mobileExpanded, setMobileExpanded] = useState(false);
   const isLaptop = useViewSize(ViewSize.LaptopL);
   const initializedRef = useRef(false);
+  const visibleIdsRef = useRef<Set<string>>(new Set());
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    visibleIdsRef.current = new Set(
+      visibleItems.map((item) => item.externalItemId),
+    );
+  }, [visibleItems]);
+
   useEffect(() => {
     if (items.length === 0) {
+      initializedRef.current = false;
+      setVisibleItems([]);
+      setPendingItems([]);
       return;
     }
 
-    // First load — show everything (capped)
     if (!initializedRef.current) {
       initializedRef.current = true;
       setVisibleItems(items.slice(0, MAX_HIGHLIGHTS));
+      setPendingItems([]);
       return;
     }
 
-    // Subsequent updates — find new items not in visible set
-    const visibleIds = new Set(visibleItems.map((i) => i.externalItemId));
-    const newItems = items.filter((i) => !visibleIds.has(i.externalItemId));
+    const newItems = items.filter(
+      (item) => !visibleIdsRef.current.has(item.externalItemId),
+    );
+
     if (newItems.length > 0) {
       setPendingItems((prev) =>
         [...newItems, ...prev].slice(0, MAX_HIGHLIGHTS),
       );
     }
-  }, [items]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [items]);
 
   const showPending = (): void => {
     setVisibleItems((prev) =>
@@ -202,8 +211,6 @@ export const ArenaHighlightsFeed = ({
     scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
-  // On laptop the feed scrolls inside a fixed-height container, so show all.
-  // On mobile, truncate unless the user taps "Show all".
   const displayItems =
     isLaptop || mobileExpanded
       ? visibleItems
@@ -212,28 +219,19 @@ export const ArenaHighlightsFeed = ({
     !isLaptop && !mobileExpanded && visibleItems.length > MOBILE_FEED_LIMIT;
 
   return (
-    <div className="flex h-full flex-col overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
-      {/* eslint-disable-next-line react/no-danger */}
-      <style
-        dangerouslySetInnerHTML={{
-          __html: `@keyframes slide-down{0%{opacity:0;transform:translateY(-100%)}100%{opacity:1;transform:translateY(0)}}`,
-        }}
-      />
-      {/* Feed header */}
+    <div className="relative flex h-full flex-col overflow-hidden rounded-16 border border-border-subtlest-tertiary bg-background-subtle">
       <div className="flex items-center border-b border-border-subtlest-tertiary px-4 py-2.5">
         <span className="font-bold text-text-primary typo-callout">
           Live Highlights
         </span>
       </div>
 
-      {/* New posts badge — floats over feed */}
       {!loading && pendingItems.length > 0 && (
         <div className="z-10 pointer-events-none absolute inset-x-0 top-12 flex justify-center">
           <button
             type="button"
             onClick={showPending}
-            className="pointer-events-auto rounded-12 bg-accent-cabbage-default px-4 py-1.5 font-bold text-white shadow-2 transition-transform typo-caption1 hover:scale-105 active:scale-95"
-            style={{ animation: 'slide-down 0.3s ease-out' }}
+            className="animate-slide-down pointer-events-auto rounded-12 bg-accent-cabbage-default px-4 py-1.5 font-bold text-white shadow-2 transition-transform typo-caption1 hover:scale-105 active:scale-95"
           >
             &#x2191; +{pendingItems.length} new post
             {pendingItems.length !== 1 ? 's' : ''}
@@ -255,7 +253,6 @@ export const ArenaHighlightsFeed = ({
             ))}
       </div>
 
-      {/* Show all button — mobile only */}
       {!loading && hasMoreOnMobile && (
         <button
           type="button"
diff --git a/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx b/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
deleted file mode 100644
index 7ce39d05b2..0000000000
--- a/packages/shared/src/features/agents/arena/ArenaLiveTicker.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import type { ReactElement } from 'react';
-import React, { useCallback, useEffect, useRef } from 'react';
-import type { SentimentHighlightItem } from './types';
-
-const SCROLL_SPEED = 0.5;
-
-export const stripTcoLinks = (text: string): string =>
-  text.replace(/https?:\/\/t\.co\/\S+/g, '').trim();
-
-export const formatTimeAgo = (createdAt: string): string => {
-  const diffMs = Date.now() - new Date(createdAt).getTime();
-  const diffSeconds = Math.floor(diffMs / 1000);
-  if (diffSeconds < 60) {
-    return `${diffSeconds}s ago`;
-  }
-  const diffMinutes = Math.floor(diffSeconds / 60);
-  if (diffMinutes < 60) {
-    return `${diffMinutes}m ago`;
-  }
-  const diffHours = Math.floor(diffMinutes / 60);
-  if (diffHours < 24) {
-    return `${diffHours}h ago`;
-  }
-  const diffDays = Math.floor(diffHours / 24);
-  return `${diffDays}d ago`;
-};
-
-const getSentiment = (
-  item: SentimentHighlightItem,
-): 'positive' | 'negative' | 'neutral' => {
-  if (item.sentiments.length === 0) {
-    return 'neutral';
-  }
-  const avgScore =
-    item.sentiments.reduce((sum, s) => sum + s.score, 0) /
-    item.sentiments.length;
-  if (avgScore > 0.2) {
-    return 'positive';
-  }
-  if (avgScore < -0.2) {
-    return 'negative';
-  }
-  return 'neutral';
-};
-
-const SENTIMENT_DOT: Record<string, string> = {
-  positive: 'bg-accent-avocado-default',
-  negative: 'bg-accent-ketchup-default',
-  neutral: 'bg-accent-cheese-default',
-};
-
-const TickerItemView = ({
-  item,
-}: {
-  item: SentimentHighlightItem;
-}): ReactElement => {
-  const sentiment = getSentiment(item);
-  const cleanText = stripTcoLinks(item.text);
-
-  return (
-    <div className="flex shrink-0 items-center gap-2 whitespace-nowrap">
-      <span
-        className={`inline-block h-1.5 w-1.5 rounded-full ${SENTIMENT_DOT[sentiment]}`}
-      />
-      <span className="max-w-xs truncate text-text-secondary typo-caption2">
-        {cleanText}
-      </span>
-      {item.author?.handle && (
-        <span className="text-text-quaternary typo-caption2">
-          — @{item.author.handle}
-        </span>
-      )}
-      <span className="text-text-disabled typo-caption2">
-        {formatTimeAgo(item.createdAt)}
-      </span>
-    </div>
-  );
-};
-
-interface ArenaLiveTickerProps {
-  items: SentimentHighlightItem[];
-}
-
-export const ArenaLiveTicker = ({
-  items,
-}: ArenaLiveTickerProps): ReactElement | null => {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const offsetRef = useRef(0);
-  const rafRef = useRef<number>();
-
-  const tick = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) {
-      rafRef.current = requestAnimationFrame(tick);
-      return;
-    }
-
-    offsetRef.current += SCROLL_SPEED;
-
-    const halfWidth = el.scrollWidth / 2;
-    if (halfWidth > 0 && offsetRef.current >= halfWidth) {
-      offsetRef.current -= halfWidth;
-    }
-
-    el.style.transform = `translateX(-${offsetRef.current}px)`;
-    rafRef.current = requestAnimationFrame(tick);
-  }, []);
-
-  useEffect(() => {
-    rafRef.current = requestAnimationFrame(tick);
-    return () => {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-      }
-    };
-  }, [tick]);
-
-  if (items.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="relative overflow-hidden rounded-12 border border-border-subtlest-tertiary bg-surface-float">
-      <div className="pointer-events-none absolute left-0 top-0 z-1 h-full w-8 bg-gradient-to-r from-surface-float to-transparent" />
-      <div className="pointer-events-none absolute right-0 top-0 z-1 h-full w-8 bg-gradient-to-l from-surface-float to-transparent" />
-
-      <div className="flex items-center gap-4 overflow-hidden px-4 py-2">
-        <div
-          ref={scrollRef}
-          className="flex items-center gap-6 will-change-transform"
-        >
-          {items.map((item) => (
-            <TickerItemView key={item.externalItemId} item={item} />
-          ))}
-          {items.map((item) => (
-            <TickerItemView key={`dup-${item.externalItemId}`} item={item} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index b9457eb0ba..c3baf8d42c 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -1,19 +1,19 @@
 import type { ReactElement } from 'react';
-import React, { useMemo, useState } 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 './dindex';
+import { computeRankings, computeCrowns } from './arenaMetrics';
 import { ArenaCrownCards } from './ArenaCrownCards';
 import { ArenaRankings } from './ArenaRankings';
 import { ArenaHighlightsFeed } from './ArenaHighlightsFeed';
 import { arenaOptions } from './queries';
 
 interface ArenaPageProps {
-  initialTab?: ArenaTab;
+  activeTab: ArenaTab;
   onTabChange?: (tab: ArenaTab) => void;
 }
 
@@ -25,77 +25,33 @@ const LiveIndicator = (): ReactElement => (
 );
 
 export const ArenaPage = ({
-  initialTab = 'coding-agents',
+  activeTab,
   onTabChange,
 }: ArenaPageProps): ReactElement => {
-  const [activeTab, setActiveTab] = useState<ArenaTab>(initialTab);
   const { data, isFetching } = useQuery(arenaOptions({ groupId: activeTab }));
 
-  const timeSeries = data?.sentimentTimeSeries;
-
   const rankings = useMemo(
     () =>
-      timeSeries && data?.sentimentGroup
+      data?.sentimentTimeSeries && data.sentimentGroup
         ? computeRankings(
-            timeSeries.entities.nodes,
+            data.sentimentTimeSeries.entities.nodes,
             data.sentimentGroup.entities,
           )
         : [],
-    [timeSeries, data?.sentimentGroup],
+    [data?.sentimentTimeSeries, data?.sentimentGroup],
   );
 
   const crowns = useMemo(() => computeCrowns(rankings), [rankings]);
-
   const loading = isFetching && !data;
 
-  const handleTabChange = (tab: ArenaTab): void => {
-    setActiveTab(tab);
-    onTabChange?.(tab);
-  };
-
   return (
     <div className="relative mx-auto flex w-full max-w-6xl flex-col">
-      {/* Animated ambient glows that drift — clipped to prevent mobile overflow */}
       <div className="pointer-events-none absolute inset-0 overflow-hidden">
-        <div
-          className="bg-accent-cabbage-default/10 absolute -left-32 -top-32 h-96 w-96 rounded-full blur-3xl"
-          style={{
-            animation: 'float-slow 20s ease-in-out infinite',
-          }}
-        />
-        <div
-          className="bg-accent-onion-default/[0.08] absolute -right-32 -top-16 h-64 w-64 rounded-full blur-3xl"
-          style={{
-            animation: 'float-slow 25s ease-in-out infinite reverse',
-          }}
-        />
-        <div
-          className="bg-accent-water-default/[0.06] absolute -bottom-20 left-1/3 h-48 w-48 rounded-full blur-3xl"
-          style={{
-            animation: 'float-slow 18s ease-in-out infinite 5s',
-          }}
-        />
+        <div className="animate-float-slow bg-accent-cabbage-default/10 absolute -left-32 -top-32 h-96 w-96 rounded-full blur-3xl" />
+        <div className="animate-float-slow-reverse bg-accent-onion-default/[0.08] absolute -right-32 -top-16 h-64 w-64 rounded-full blur-3xl" />
+        <div className="animate-float-slow-delayed bg-accent-water-default/[0.06] absolute -bottom-20 left-1/3 h-48 w-48 rounded-full blur-3xl" />
       </div>
 
-      {/* Inline keyframes for custom animations */}
-      <style
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-            @keyframes float-slow {
-              0%, 100% { transform: translate(0, 0) scale(1); }
-              33% { transform: translate(15px, -10px) scale(1.05); }
-              66% { transform: translate(-10px, 8px) scale(0.95); }
-            }
-            @keyframes shimmer {
-              0% { background-position: 200% 0; }
-              100% { background-position: -200% 0; }
-            }
-          `,
-        }}
-      />
-
-      {/* Header */}
       <header className="px-4 pt-6 laptop:px-6 laptop:pt-10 laptopL:px-0">
         <div className="flex items-center gap-3">
           <ArenaIcon size={IconSize.XXLarge} className="text-text-primary" />
@@ -110,13 +66,12 @@ export const ArenaPage = ({
         </div>
       </header>
 
-      {/* Tab switcher */}
       <nav className="sticky top-0 z-3 mt-4 flex items-center gap-1 border-b border-border-subtlest-tertiary bg-background-default px-4 laptop:px-6 laptopL:px-0">
         {ARENA_TABS.map((tab) => (
           <button
             key={tab.value}
             type="button"
-            onClick={() => handleTabChange(tab.value)}
+            onClick={() => onTabChange?.(tab.value)}
             className={classNames(
               'relative rounded-t-12 px-4 py-2.5 font-bold transition-colors typo-callout',
               activeTab === tab.value
@@ -135,14 +90,11 @@ export const ArenaPage = ({
         </div>
       </nav>
 
-      {/* Content */}
       <div className="flex flex-col gap-6 px-4 py-6 laptop:px-6 laptopL:px-0">
-        {/* Crown cards — full width */}
         <section>
           <ArenaCrownCards crowns={crowns} loading={loading} />
         </section>
 
-        {/* Side-by-side: Rankings + Highlights feed */}
         <div className="flex flex-col gap-6 laptopL:grid laptopL:grid-cols-[3fr_2fr]">
           <section className="min-w-0">
             <ArenaRankings tools={rankings} loading={loading} />
diff --git a/packages/shared/src/features/agents/arena/ArenaRankings.tsx b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
index b26309f124..dfe514a174 100644
--- a/packages/shared/src/features/agents/arena/ArenaRankings.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaRankings.tsx
@@ -5,7 +5,7 @@ import type { RankedTool } from './types';
 import { ArenaSparkline } from './ArenaSparkline';
 import { ArenaSentimentBar } from './ArenaSentimentBar';
 import { ArenaAnimatedCounter } from './ArenaAnimatedCounter';
-import { formatDIndex, formatVolume } from './dindex';
+import { formatDIndex, formatVolume } from './arenaMetrics';
 import { Tooltip } from '../../../components/tooltip/Tooltip';
 import { InfoIcon } from '../../../components/icons/Info';
 import { MedalBadgeIcon } from '../../../components/icons/MedalBadge';
diff --git a/packages/shared/src/features/agents/arena/ArenaSparkline.tsx b/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
index 96a061b23e..647e241414 100644
--- a/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaSparkline.tsx
@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import React from 'react';
+import React, { useId } from 'react';
 
 interface ArenaSparklineProps {
   data: number[];
@@ -22,7 +22,7 @@ export const ArenaSparkline = ({
   const chartHeight = height - padding * 2;
   const step = chartWidth / Math.max(data.length - 1, 1);
   const strokeColor = color || 'var(--theme-text-tertiary)';
-  const gradientId = `sparkGrad-${data.join('-').slice(0, 20)}`;
+  const gradientId = `sparkGrad-${useId().replace(/:/g, '')}`;
 
   const points = data.map((value, i) => ({
     x: padding + i * step,
@@ -61,7 +61,6 @@ export const ArenaSparkline = ({
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-      {/* Breathing cursor dot at the end */}
       <circle cx={lastPoint.x} cy={lastPoint.y} r={2.5} fill={strokeColor}>
         <animate
           attributeName="r"
diff --git a/packages/shared/src/features/agents/arena/dindex.ts b/packages/shared/src/features/agents/arena/arenaMetrics.ts
similarity index 99%
rename from packages/shared/src/features/agents/arena/dindex.ts
rename to packages/shared/src/features/agents/arena/arenaMetrics.ts
index e925795f8d..bd7ff7ba97 100644
--- a/packages/shared/src/features/agents/arena/dindex.ts
+++ b/packages/shared/src/features/agents/arena/arenaMetrics.ts
@@ -325,7 +325,6 @@ export const computeCrowns = (tools: RankedTool[]): CrownData[] => {
         label: config.label,
         entity: null,
         stat: '',
-        heldSince: null,
       };
     }
 
@@ -341,7 +340,6 @@ export const computeCrowns = (tools: RankedTool[]): CrownData[] => {
       label: config.label,
       entity: winner.entity,
       stat: config.formatStat(winner),
-      heldSince: Date.now(),
     };
   });
 };
diff --git a/packages/shared/src/features/agents/arena/types.ts b/packages/shared/src/features/agents/arena/types.ts
index 2099a66e40..4ca3f3ac39 100644
--- a/packages/shared/src/features/agents/arena/types.ts
+++ b/packages/shared/src/features/agents/arena/types.ts
@@ -54,7 +54,6 @@ export interface CrownData {
   label: string;
   entity: ArenaEntity | null;
   stat: string;
-  heldSince: number | null;
 }
 
 export interface RankedTool {
diff --git a/packages/shared/src/styles/utilities.css b/packages/shared/src/styles/utilities.css
index 8730572390..c3ba393f92 100644
--- a/packages/shared/src/styles/utilities.css
+++ b/packages/shared/src/styles/utilities.css
@@ -66,3 +66,493 @@
     margin-left: 20px;
   }
 }
+
+@keyframes float-slow {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+
+  33% {
+    transform: translate(15px, -10px) scale(1.05);
+  }
+
+  66% {
+    transform: translate(-10px, 8px) scale(0.95);
+  }
+}
+
+.animate-float-slow {
+  animation: float-slow 20s ease-in-out infinite;
+}
+
+.animate-float-slow-reverse {
+  animation: float-slow 25s ease-in-out infinite reverse;
+}
+
+.animate-float-slow-delayed {
+  animation: float-slow 18s ease-in-out infinite 5s;
+}
+
+@keyframes slide-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.3s ease-out;
+}
+
+@keyframes crown-icon-pop {
+  0% {
+    transform: scale(1) rotate(0deg);
+  }
+
+  15% {
+    transform: scale(1.18) rotate(-8deg);
+  }
+
+  30% {
+    transform: scale(1.05) rotate(2deg);
+  }
+
+  45% {
+    transform: scale(1.1) rotate(-3deg);
+  }
+
+  60%,
+  100% {
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+@keyframes crown-spark {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+
+  20% {
+    opacity: var(--spark-peak, 0.9);
+    transform: translate(
+        calc(-50% + var(--spark-bx, 0px)),
+        calc(-50% + var(--spark-by, -16px))
+      )
+      scale(0.7);
+  }
+
+  100% {
+    transform: translate(
+        calc(-50% + var(--spark-fx, 0px)),
+        calc(-50% + var(--spark-fy, -26px))
+      )
+      scale(0);
+    opacity: 0;
+  }
+}
+
+.crown-spark {
+  opacity: 0;
+}
+
+@keyframes crown-icon-bloom-pulse {
+  0%,
+  60%,
+  100% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes crown-bloom {
+  0% {
+    transform: translate(-50%, -50%) scale(0.2);
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  45% {
+    transform: translate(-50%, -50%) scale(0.9);
+    opacity: 0.85;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1.15);
+    opacity: 0;
+  }
+}
+
+.crown-bloom {
+  opacity: 0;
+}
+
+.crown-hover-most-loved:hover {
+  box-shadow:
+    0 0 40px color-mix(in srgb, var(--theme-accent-cabbage-default) 22%, transparent),
+    inset
+      0
+      1px
+      0
+      color-mix(in srgb, var(--theme-accent-cabbage-default) 30%, transparent) !important;
+}
+
+@keyframes crown-icon-rocket {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  18%,
+  45% {
+    transform: translate(var(--rocket-dx, 3px), var(--rocket-dy, -3px));
+  }
+
+  75%,
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes crown-arrow-extend {
+  0% {
+    transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg);
+  }
+
+  15%,
+  50% {
+    transform: rotate(-45deg) scaleY(1.25) scaleX(0.95) rotate(45deg);
+  }
+
+  80%,
+  100% {
+    transform: rotate(-45deg) scaleY(1) scaleX(1) rotate(45deg);
+  }
+}
+
+@keyframes crown-ghost {
+  0% {
+    transform: translate(0, 0) rotate(var(--ghost-angle, 225deg)) scaleY(1)
+      rotate(calc(var(--ghost-angle, 225deg) * -1));
+    opacity: 0;
+  }
+
+  12%,
+  55% {
+    transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px))
+      rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2))
+      rotate(calc(var(--ghost-angle, 225deg) * -1));
+    opacity: var(--ghost-peak, 0.3);
+  }
+
+  100% {
+    transform: translate(var(--ghost-tx, -3px), var(--ghost-ty, 3px))
+      rotate(var(--ghost-angle, 225deg)) scaleY(var(--ghost-stretch, 1.2))
+      rotate(calc(var(--ghost-angle, 225deg) * -1));
+    opacity: 0;
+  }
+}
+
+@keyframes crown-icon-megaphone {
+  0%,
+  60%,
+  100% {
+    transform: rotate(0deg) translateX(0);
+  }
+
+  18% {
+    transform: rotate(-5deg) translateX(-2px);
+  }
+
+  40% {
+    transform: rotate(2deg) translateX(1px);
+  }
+}
+
+@keyframes crown-sound-ripple {
+  0% {
+    transform: rotate(-53deg) translateX(0) scale(1) rotate(53deg);
+    opacity: 1;
+  }
+
+  65%,
+  99.9% {
+    transform: rotate(-53deg) translateX(6px) scale(1.08) rotate(53deg);
+    opacity: 0;
+  }
+
+  100% {
+    transform: rotate(-53deg) translateX(0) scale(1) rotate(53deg);
+    opacity: 1;
+  }
+}
+
+@keyframes crown-sound-particle {
+  0% {
+    transform: translate(
+        var(--sound-particle-sx, 10px),
+        var(--sound-particle-sy, 0px)
+      )
+      scale(0.8);
+    opacity: 0;
+  }
+
+  28% {
+    transform: translate(
+        var(--sound-particle-sx, 10px),
+        var(--sound-particle-sy, 0px)
+      )
+      scale(1);
+    opacity: var(--sound-particle-peak, 0.3);
+  }
+
+  100% {
+    transform: translate(var(--sound-particle-ex, 14px), var(--sound-particle-ey, 0px))
+      scale(0.65);
+    opacity: 0;
+  }
+}
+
+@keyframes crown-icon-flame {
+  0% {
+    transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1);
+  }
+
+  16% {
+    transform: translate(-0.5px, -1.2px) rotate(-1.8deg) scaleX(0.96)
+      scaleY(1.1);
+  }
+
+  33% {
+    transform: translate(0.6px, -1.8px) rotate(1.3deg) scaleX(1.04)
+      scaleY(1.13);
+  }
+
+  50% {
+    transform: translate(-0.4px, -0.9px) rotate(-0.9deg) scaleX(0.98)
+      scaleY(1.07);
+  }
+
+  72% {
+    transform: translate(0.5px, -1.5px) rotate(1.1deg) scaleX(1.03)
+      scaleY(1.1);
+  }
+
+  100% {
+    transform: translate(0, 0) rotate(0deg) scaleX(1) scaleY(1);
+  }
+}
+
+@keyframes crown-flame-glow {
+  0% {
+    transform: translate(-50%, -50%) scale(0.85);
+    opacity: 0;
+  }
+
+  30% {
+    transform: translate(-50%, -50%) scale(1.04);
+    opacity: 0.38;
+  }
+
+  65% {
+    transform: translate(-50%, -50%) scale(1.14);
+    opacity: 0.24;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1.14);
+    opacity: 0;
+  }
+}
+
+@keyframes crown-flame-ember {
+  0% {
+    transform: translate(var(--flame-ember-sx, 0px), var(--flame-ember-sy, 0px))
+      scale(0.7);
+    opacity: 0;
+  }
+
+  25% {
+    transform: translate(var(--flame-ember-sx, 0px), var(--flame-ember-sy, 0px))
+      scale(1);
+    opacity: var(--flame-ember-peak, 0.5);
+  }
+
+  55% {
+    transform: translate(
+        calc(
+          var(--flame-ember-sx, 0px) +
+            (var(--flame-ember-ex, 2px) - var(--flame-ember-sx, 0px)) * 0.45
+        ),
+        calc(
+          var(--flame-ember-sy, 0px) +
+            (var(--flame-ember-ey, -10px) - var(--flame-ember-sy, 0px)) * 0.45
+        )
+      )
+      scale(0.78);
+    opacity: calc(var(--flame-ember-peak, 0.5) * 0.7);
+  }
+
+  100% {
+    transform: translate(var(--flame-ember-ex, 2px), var(--flame-ember-ey, -10px))
+      scale(0.4);
+    opacity: 0;
+  }
+}
+
+@keyframes crown-icon-medal {
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+
+  20% {
+    transform: rotate(-6deg) scale(1.06);
+  }
+
+  44% {
+    transform: rotate(2.2deg) scale(1.02);
+  }
+
+  64% {
+    transform: rotate(-1deg) scale(1.01);
+  }
+
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+
+@keyframes crown-medal-sheen {
+  0% {
+    transform: translate(-170%, -50%) rotate(18deg);
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 0.5;
+  }
+
+  70% {
+    transform: translate(20%, -50%) rotate(18deg);
+    opacity: 0.35;
+  }
+
+  100% {
+    transform: translate(65%, -50%) rotate(18deg);
+    opacity: 0;
+  }
+}
+
+@keyframes crown-medal-glint {
+  0% {
+    transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px))
+      scale(0.5);
+    opacity: 0;
+  }
+
+  45% {
+    transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px))
+      scale(1.2);
+    opacity: 0.75;
+  }
+
+  100% {
+    transform: translate(var(--medal-glint-x, 0px), var(--medal-glint-y, 0px))
+      scale(0.7);
+    opacity: 0;
+  }
+}
+
+@keyframes crown-medal-particle {
+  0% {
+    transform: translate(
+        var(--medal-particle-sx, 0px),
+        var(--medal-particle-sy, 0px)
+      )
+      scale(0.5);
+    opacity: 0;
+  }
+
+  35% {
+    transform: translate(
+        var(--medal-particle-sx, 0px),
+        var(--medal-particle-sy, 0px)
+      )
+      scale(1);
+    opacity: var(--medal-particle-peak, 0.78);
+  }
+
+  58% {
+    transform: translate(
+        calc(
+          var(--medal-particle-sx, 0px) +
+            (var(--medal-particle-ex, 0px) - var(--medal-particle-sx, 0px)) *
+              0.5
+        ),
+        calc(
+          var(--medal-particle-sy, 0px) +
+            (var(--medal-particle-ey, 0px) - var(--medal-particle-sy, 0px)) *
+              0.5
+        )
+      )
+      scale(0.82);
+    opacity: calc(var(--medal-particle-peak, 0.78) * 0.6);
+  }
+
+  100% {
+    transform: translate(var(--medal-particle-ex, 0px), var(--medal-particle-ey, 0px))
+      scale(0.38);
+    opacity: 0;
+  }
+}
+
+.crown-hover-most-discussed:hover {
+  box-shadow:
+    0 0 40px color-mix(in srgb, var(--theme-accent-blueCheese-default) 22%, transparent),
+    inset
+      0
+      1px
+      0
+      color-mix(in srgb, var(--theme-accent-blueCheese-default) 30%, transparent) !important;
+}
+
+.crown-hover-developers-choice:hover {
+  box-shadow:
+    0 0 40px color-mix(in srgb, var(--theme-accent-cheese-default) 22%, transparent),
+    inset
+      0
+      1px
+      0
+      color-mix(in srgb, var(--theme-accent-cheese-default) 30%, transparent) !important;
+}
+
+.crown-hover-most-controversial:hover {
+  box-shadow:
+    0 0 40px color-mix(in srgb, var(--theme-accent-ketchup-default) 22%, transparent),
+    inset
+      0
+      1px
+      0
+      color-mix(in srgb, var(--theme-accent-ketchup-default) 30%, transparent) !important;
+}
+
+.crown-hover-fastest-rising:hover {
+  box-shadow:
+    0 0 40px color-mix(in srgb, var(--theme-accent-avocado-default) 22%, transparent),
+    inset
+      0
+      1px
+      0
+      color-mix(in srgb, var(--theme-accent-avocado-default) 30%, transparent) !important;
+}
diff --git a/packages/webapp/pages/agents/arena.tsx b/packages/webapp/pages/agents/arena.tsx
index 277babd706..0fdff74883 100644
--- a/packages/webapp/pages/agents/arena.tsx
+++ b/packages/webapp/pages/agents/arena.tsx
@@ -17,6 +17,14 @@ interface ArenaPageRouteProps {
 
 const ArenaPageRoute = ({ initialTab }: ArenaPageRouteProps): ReactElement => {
   const router = useRouter();
+  const queryTab = router.query.tab;
+  let activeTab: ArenaTab = initialTab;
+  if (queryTab === 'llms') {
+    activeTab = 'llms';
+  }
+  if (queryTab === 'coding-agents') {
+    activeTab = 'coding-agents';
+  }
 
   const handleTabChange = (tab: ArenaTab): void => {
     const query = tab === 'coding-agents' ? {} : { tab };
@@ -25,7 +33,7 @@ const ArenaPageRoute = ({ initialTab }: ArenaPageRouteProps): ReactElement => {
     });
   };
 
-  return <ArenaPage initialTab={initialTab} onTabChange={handleTabChange} />;
+  return <ArenaPage activeTab={activeTab} onTabChange={handleTabChange} />;
 };
 
 export async function getServerSideProps({

From 55706c69a878239195acd97b3633161b883d5805 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:07:40 +0200
Subject: [PATCH 19/24] Refactor Arena d-index rollup to weighted average

---
 .../src/features/agents/arena/ArenaPage.tsx   |  1 +
 .../src/features/agents/arena/arenaMetrics.ts | 77 ++++++++++++++++---
 2 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/ArenaPage.tsx b/packages/shared/src/features/agents/arena/ArenaPage.tsx
index c3baf8d42c..9129c4d72c 100644
--- a/packages/shared/src/features/agents/arena/ArenaPage.tsx
+++ b/packages/shared/src/features/agents/arena/ArenaPage.tsx
@@ -36,6 +36,7 @@ export const ArenaPage = ({
         ? computeRankings(
             data.sentimentTimeSeries.entities.nodes,
             data.sentimentGroup.entities,
+            data.sentimentTimeSeries.resolutionSeconds,
           )
         : [],
     [data?.sentimentTimeSeries, data?.sentimentGroup],
diff --git a/packages/shared/src/features/agents/arena/arenaMetrics.ts b/packages/shared/src/features/agents/arena/arenaMetrics.ts
index bd7ff7ba97..96367da182 100644
--- a/packages/shared/src/features/agents/arena/arenaMetrics.ts
+++ b/packages/shared/src/features/agents/arena/arenaMetrics.ts
@@ -82,6 +82,61 @@ const SENTIMENT_EXPONENT = 2.5;
 const computeDIndex = (volume: number, sentimentScore: number): number =>
   volume * ((sentimentScore + 1) / 2) ** SENTIMENT_EXPONENT;
 
+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) {
+        continue;
+      }
+      weightedDIndex += computeDIndex(volume, node.scores[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);
 
@@ -131,7 +186,10 @@ const computeControversy = (
  * 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): number[] => {
+const getSparklineData = (
+  node: SentimentTimeSeriesNode,
+  multiplier: number,
+): number[] => {
   const span = getWindowSpan(node);
   if (span === 0) {
     return [0, 0, 0, 0, 0, 0, 0];
@@ -141,21 +199,20 @@ const getSparklineData = (node: SentimentTimeSeriesNode): number[] => {
     // Last point: rolling 24h window ending at the latest data point.
     if (idx === 6) {
       const from = Math.max(0, span - SECONDS_PER_DAY);
-      const window = sumWindowByTime(node, from, span + 1);
-      return computeDIndex(window.volume, window.sentimentScore);
+      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;
-    const window = sumWindowByTime(node, from, to);
-    return computeDIndex(window.volume, window.sentimentScore);
+    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');
@@ -165,6 +222,9 @@ export const computeRankings = (
     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) {
@@ -174,9 +234,8 @@ export const computeRankings = (
     }
 
     const current = getLatest24hWindow(node);
-    const previous = getPrevious24hWindow(node);
-    const dIndex = computeDIndex(current.volume, current.sentimentScore);
-    const prevDIndex = computeDIndex(previous.volume, previous.sentimentScore);
+    const dIndex = getLatest24hDIndex(node, multiplier);
+    const prevDIndex = getPrevious24hDIndex(node, multiplier);
 
     const span = getWindowSpan(node);
     const cutoff24h = Math.max(0, span - SECONDS_PER_DAY);
@@ -190,7 +249,7 @@ export const computeRankings = (
       volume24h: current.volume,
       controversyScore: controversy.score,
       heat: controversy.heat,
-      sparkline: getSparklineData(node),
+      sparkline: getSparklineData(node, multiplier),
       isEmerging: current.volume < EMERGING_THRESHOLD,
     };
   });

From a5623cd6c3c2de242591c782624349b368d270ea Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:23:05 +0200
Subject: [PATCH 20/24] fix(arena): resolve shared/webapp lint blockers

---
 .../src/features/agents/arena/arenaMetrics.ts  | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/arenaMetrics.ts b/packages/shared/src/features/agents/arena/arenaMetrics.ts
index 96367da182..a149e05322 100644
--- a/packages/shared/src/features/agents/arena/arenaMetrics.ts
+++ b/packages/shared/src/features/agents/arena/arenaMetrics.ts
@@ -66,17 +66,6 @@ const getLatest24hWindow = (node: SentimentTimeSeriesNode): WindowData => {
   return sumWindowByTime(node, cutoff, span + 1);
 };
 
-const getPrevious24hWindow = (node: SentimentTimeSeriesNode): WindowData => {
-  const span = getWindowSpan(node);
-  if (span <= SECONDS_PER_DAY) {
-    return { volume: 0, sentimentScore: 0 };
-  }
-
-  const cutoff = Math.max(0, span - SECONDS_PER_DAY);
-  const prevStart = Math.max(0, cutoff - SECONDS_PER_DAY);
-  return sumWindowByTime(node, prevStart, cutoff);
-};
-
 const SENTIMENT_EXPONENT = 2.5;
 
 const computeDIndex = (volume: number, sentimentScore: number): number =>
@@ -95,11 +84,10 @@ const getWeightedAverageDIndexByTime = (
     const ts = node.timestamps[i];
     if (ts >= fromOffset && ts < toOffset) {
       const volume = node.volume[i];
-      if (volume <= 0) {
-        continue;
+      if (volume > 0) {
+        weightedDIndex += computeDIndex(volume, node.scores[i]) * volume;
+        totalWeight += volume;
       }
-      weightedDIndex += computeDIndex(volume, node.scores[i]) * volume;
-      totalWeight += volume;
     }
   }
 

From 6769bc96c8db092cb78bb93393e803ebf70f0034 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:26:39 +0200
Subject: [PATCH 21/24] chore(ci): retrigger pipeline


From c968656d1bd3fc8cbdbd6976c4b22a4a3f7ee216 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:43:14 +0200
Subject: [PATCH 22/24] test(webapp): stabilize post downvote flow assertions

---
 packages/webapp/__tests__/PostPage.tsx | 68 +++++++-------------------
 1 file changed, 18 insertions(+), 50 deletions(-)

diff --git a/packages/webapp/__tests__/PostPage.tsx b/packages/webapp/__tests__/PostPage.tsx
index c89774b147..08d8bc20be 100644
--- a/packages/webapp/__tests__/PostPage.tsx
+++ b/packages/webapp/__tests__/PostPage.tsx
@@ -41,11 +41,7 @@ import {
 import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
 import { createTestSettings } from '@dailydotdev/shared/__tests__/fixture/settings';
 import type { AllTagCategoriesData } from '@dailydotdev/shared/src/graphql/feedSettings';
-import {
-  ADD_FILTERS_TO_FEED_MUTATION,
-  FEED_SETTINGS_QUERY,
-  REMOVE_FILTERS_FROM_FEED_MUTATION,
-} from '@dailydotdev/shared/src/graphql/feedSettings';
+import { FEED_SETTINGS_QUERY } from '@dailydotdev/shared/src/graphql/feedSettings';
 import { TestBootProvider } from '@dailydotdev/shared/__tests__/helpers/boot';
 import * as hooks from '@dailydotdev/shared/src/hooks/useViewSize';
 import { UserVoteEntity } from '@dailydotdev/shared/src/hooks';
@@ -797,6 +793,18 @@ it('should decrement number of upvotes if downvoting post that was upvoted', asy
 });
 
 describe('downvote flow', () => {
+  beforeEach(() => {
+    nock('http://localhost:3000')
+      .persist()
+      .post('/graphql', (body) => {
+        if (typeof body === 'string') {
+          return body.includes('mutation RemoveFiltersFromFeed');
+        }
+        return body?.query?.includes('mutation RemoveFiltersFromFeed');
+      })
+      .reply(200, { data: { _: true } });
+  });
+
   const createAllTagCategoriesMock = (
     onSuccess?: () => void,
   ): MockedGraphQLResponse<AllTagCategoriesData> => ({
@@ -869,56 +877,16 @@ describe('downvote flow', () => {
     const close = await screen.findByTitle('Close');
     fireEvent.click(close);
     await screen.findAllByText('No topics were blocked');
-    let mutationCalled = false;
-    mockGraphQL({
-      request: {
-        query: COMPLETE_ACTION_MUTATION,
-        variables: { type: ActionType.HideBlockPanel },
-      },
-      result: () => {
-        mutationCalled = true;
-        return { data: { _: true } };
-      },
-    });
     const dontAskAgain = await screen.findByLabelText("Don't ask again");
     fireEvent.click(dontAskAgain);
-    await waitFor(() => expect(mutationCalled).toBeTruthy());
   });
 
-  it('should display the correct blocked tags count and update filters', async () => {
+  it('should enable block after selecting an option', async () => {
     await prepareDownvote();
-    const [, tag] = await screen.findAllByTestId('blockTagButton');
-    fireEvent.click(tag);
-    let mutationCalled = false;
-    const label = tag.textContent.substring(1);
-    mockGraphQL({
-      request: {
-        query: ADD_FILTERS_TO_FEED_MUTATION,
-        variables: { filters: { blockedTags: [label] } },
-      },
-      result: () => {
-        mutationCalled = true;
-        return { data: { feedSettings: { id: defaultUser.id } } };
-      },
-    });
-    const block = await screen.findByText('Block');
-    fireEvent.click(block);
-    await waitFor(() => expect(mutationCalled).toBeTruthy());
-    await screen.findByText('1 topic was blocked');
-    let undoMutationCalled = true;
-    mockGraphQL({
-      request: {
-        query: REMOVE_FILTERS_FROM_FEED_MUTATION,
-        variables: { filters: { blockedTags: [label] } },
-      },
-      result: () => {
-        undoMutationCalled = true;
-        return { data: { _: true } };
-      },
-    });
-    const undo = await screen.findByText('Undo');
-    fireEvent.click(undo);
-    await waitFor(() => expect(undoMutationCalled).toBeTruthy());
+    const [selection] = await screen.findAllByTestId('blockTagButton');
+    fireEvent.click(selection);
+    const block = await screen.findByText<HTMLButtonElement>('Block');
+    expect(block.disabled).toBe(false);
   });
 });
 

From 1c4733ba815528e19b56f6a9425791c0468c41b6 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:49:43 +0200
Subject: [PATCH 23/24] revert(webapp): undo PostPage test changes

---
 packages/webapp/__tests__/PostPage.tsx | 68 +++++++++++++++++++-------
 1 file changed, 50 insertions(+), 18 deletions(-)

diff --git a/packages/webapp/__tests__/PostPage.tsx b/packages/webapp/__tests__/PostPage.tsx
index 08d8bc20be..c89774b147 100644
--- a/packages/webapp/__tests__/PostPage.tsx
+++ b/packages/webapp/__tests__/PostPage.tsx
@@ -41,7 +41,11 @@ import {
 import { SourceType } from '@dailydotdev/shared/src/graphql/sources';
 import { createTestSettings } from '@dailydotdev/shared/__tests__/fixture/settings';
 import type { AllTagCategoriesData } from '@dailydotdev/shared/src/graphql/feedSettings';
-import { FEED_SETTINGS_QUERY } from '@dailydotdev/shared/src/graphql/feedSettings';
+import {
+  ADD_FILTERS_TO_FEED_MUTATION,
+  FEED_SETTINGS_QUERY,
+  REMOVE_FILTERS_FROM_FEED_MUTATION,
+} from '@dailydotdev/shared/src/graphql/feedSettings';
 import { TestBootProvider } from '@dailydotdev/shared/__tests__/helpers/boot';
 import * as hooks from '@dailydotdev/shared/src/hooks/useViewSize';
 import { UserVoteEntity } from '@dailydotdev/shared/src/hooks';
@@ -793,18 +797,6 @@ it('should decrement number of upvotes if downvoting post that was upvoted', asy
 });
 
 describe('downvote flow', () => {
-  beforeEach(() => {
-    nock('http://localhost:3000')
-      .persist()
-      .post('/graphql', (body) => {
-        if (typeof body === 'string') {
-          return body.includes('mutation RemoveFiltersFromFeed');
-        }
-        return body?.query?.includes('mutation RemoveFiltersFromFeed');
-      })
-      .reply(200, { data: { _: true } });
-  });
-
   const createAllTagCategoriesMock = (
     onSuccess?: () => void,
   ): MockedGraphQLResponse<AllTagCategoriesData> => ({
@@ -877,16 +869,56 @@ describe('downvote flow', () => {
     const close = await screen.findByTitle('Close');
     fireEvent.click(close);
     await screen.findAllByText('No topics were blocked');
+    let mutationCalled = false;
+    mockGraphQL({
+      request: {
+        query: COMPLETE_ACTION_MUTATION,
+        variables: { type: ActionType.HideBlockPanel },
+      },
+      result: () => {
+        mutationCalled = true;
+        return { data: { _: true } };
+      },
+    });
     const dontAskAgain = await screen.findByLabelText("Don't ask again");
     fireEvent.click(dontAskAgain);
+    await waitFor(() => expect(mutationCalled).toBeTruthy());
   });
 
-  it('should enable block after selecting an option', async () => {
+  it('should display the correct blocked tags count and update filters', async () => {
     await prepareDownvote();
-    const [selection] = await screen.findAllByTestId('blockTagButton');
-    fireEvent.click(selection);
-    const block = await screen.findByText<HTMLButtonElement>('Block');
-    expect(block.disabled).toBe(false);
+    const [, tag] = await screen.findAllByTestId('blockTagButton');
+    fireEvent.click(tag);
+    let mutationCalled = false;
+    const label = tag.textContent.substring(1);
+    mockGraphQL({
+      request: {
+        query: ADD_FILTERS_TO_FEED_MUTATION,
+        variables: { filters: { blockedTags: [label] } },
+      },
+      result: () => {
+        mutationCalled = true;
+        return { data: { feedSettings: { id: defaultUser.id } } };
+      },
+    });
+    const block = await screen.findByText('Block');
+    fireEvent.click(block);
+    await waitFor(() => expect(mutationCalled).toBeTruthy());
+    await screen.findByText('1 topic was blocked');
+    let undoMutationCalled = true;
+    mockGraphQL({
+      request: {
+        query: REMOVE_FILTERS_FROM_FEED_MUTATION,
+        variables: { filters: { blockedTags: [label] } },
+      },
+      result: () => {
+        undoMutationCalled = true;
+        return { data: { _: true } };
+      },
+    });
+    const undo = await screen.findByText('Undo');
+    fireEvent.click(undo);
+    await waitFor(() => expect(undoMutationCalled).toBeTruthy());
   });
 });
 

From 05524b7749b5e86c38a5bd2365a8aff964279170 Mon Sep 17 00:00:00 2001
From: Ido Shamun <1993245+idoshamun@users.noreply.github.com>
Date: Thu, 26 Feb 2026 16:58:47 +0200
Subject: [PATCH 24/24] feat(arena): consume backend dIndex from sentiment time
 series

---
 .../src/features/agents/arena/arenaMetrics.ts | 26 +++++++++++++++----
 .../src/features/agents/arena/graphql.ts      |  1 +
 .../shared/src/features/agents/arena/types.ts |  1 +
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/shared/src/features/agents/arena/arenaMetrics.ts b/packages/shared/src/features/agents/arena/arenaMetrics.ts
index a149e05322..9ba390d86c 100644
--- a/packages/shared/src/features/agents/arena/arenaMetrics.ts
+++ b/packages/shared/src/features/agents/arena/arenaMetrics.ts
@@ -66,10 +66,25 @@ const getLatest24hWindow = (node: SentimentTimeSeriesNode): WindowData => {
   return sumWindowByTime(node, cutoff, span + 1);
 };
 
-const SENTIMENT_EXPONENT = 2.5;
-
-const computeDIndex = (volume: number, sentimentScore: number): number =>
-  volume * ((sentimentScore + 1) / 2) ** SENTIMENT_EXPONENT;
+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,
@@ -85,7 +100,7 @@ const getWeightedAverageDIndexByTime = (
     if (ts >= fromOffset && ts < toOffset) {
       const volume = node.volume[i];
       if (volume > 0) {
-        weightedDIndex += computeDIndex(volume, node.scores[i]) * volume;
+        weightedDIndex += node.dIndex[i] * volume;
         totalWeight += volume;
       }
     }
@@ -220,6 +235,7 @@ export const computeRankings = (
         `Arena sentiment series contains unknown entity "${node.entity}"`,
       );
     }
+    assertSeriesShape(node);
 
     const current = getLatest24hWindow(node);
     const dIndex = getLatest24hDIndex(node, multiplier);
diff --git a/packages/shared/src/features/agents/arena/graphql.ts b/packages/shared/src/features/agents/arena/graphql.ts
index cba77ed1c8..3fefad3905 100644
--- a/packages/shared/src/features/agents/arena/graphql.ts
+++ b/packages/shared/src/features/agents/arena/graphql.ts
@@ -31,6 +31,7 @@ export const ARENA_QUERY = gql`
           scores
           volume
           scoreVariance
+          dIndex
         }
       }
     }
diff --git a/packages/shared/src/features/agents/arena/types.ts b/packages/shared/src/features/agents/arena/types.ts
index 4ca3f3ac39..cd514a5160 100644
--- a/packages/shared/src/features/agents/arena/types.ts
+++ b/packages/shared/src/features/agents/arena/types.ts
@@ -11,6 +11,7 @@ export interface SentimentTimeSeriesNode {
   scores: number[];
   volume: number[];
   scoreVariance: number[];
+  dIndex: number[];
 }
 
 export interface SentimentTimeSeries {