From 0c91e6a62099b2600d4e27c26280b2990b827c23 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Thu, 16 Jul 2026 12:29:12 -0500
Subject: [PATCH] fix(stats): refine comparison rendering

---
 packages/stats/app/src/app.tsx                |  2 +-
 .../src/component/model-compare-detail.tsx    |  5 ++---
 .../stats/app/src/routes/[lab]/[model].tsx    |  1 -
 packages/stats/app/src/routes/[lab]/index.tsx |  1 -
 .../stats/app/src/routes/compare/index.tsx    |  1 -
 packages/stats/app/src/routes/index.css       | 22 +++++++++----------
 packages/stats/app/src/routes/index.tsx       |  1 -
 7 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/stats/app/src/app.tsx b/packages/stats/app/src/app.tsx
index e8dc678af1..c23c7e7934 100644
--- a/packages/stats/app/src/app.tsx
+++ b/packages/stats/app/src/app.tsx
@@ -5,7 +5,7 @@ import { Suspense } from "solid-js"
 import { I18nProvider, useI18n } from "./context/i18n"
 import { LanguageProvider } from "./context/language"
 import { strip } from "./lib/language"
-import "./app.css"
+import "./routes/index.css"
 
 function AppMeta() {
   const i18n = useI18n()
diff --git a/packages/stats/app/src/component/model-compare-detail.tsx b/packages/stats/app/src/component/model-compare-detail.tsx
index 3043ea1e80..d02723e461 100644
--- a/packages/stats/app/src/component/model-compare-detail.tsx
+++ b/packages/stats/app/src/component/model-compare-detail.tsx
@@ -1,4 +1,3 @@
-import "../routes/index.css"
 import { Link, Meta, Title } from "@solidjs/meta"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import {
@@ -263,9 +262,8 @@ export default function ModelCompareDetailPage(props: ModelCompareDetailPageProp
               }}
             />
           </Show>
-          <ComparisonRadar models={models()} catalogModels={catalog()?.models ?? []} />
           <div
-            data-component="compare-detail-table"
+            data-component="compare-detail-comparison"
             data-model-count={models().length}
             style={`--compare-detail-grid: ${comparisonDetailGridTemplate(models().length)}`}
           >
@@ -276,6 +274,7 @@ export default function ModelCompareDetailPage(props: ModelCompareDetailPageProp
             >
               <ComparisonPairSelector catalogModels={selectorModels()} models={models()} />
             </div>
+            <ComparisonRadar models={models()} catalogModels={catalog()?.models ?? []} />
             <div
               data-component="compare-detail-body-scroll"
               ref={(element) => (comparisonBodyScroll = element)}
diff --git a/packages/stats/app/src/routes/[lab]/[model].tsx b/packages/stats/app/src/routes/[lab]/[model].tsx
index f3c33edde0..40a0ac9c50 100644
--- a/packages/stats/app/src/routes/[lab]/[model].tsx
+++ b/packages/stats/app/src/routes/[lab]/[model].tsx
@@ -1,4 +1,3 @@
-import "../index.css"
 import { Meta, Title } from "@solidjs/meta"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { geoEquirectangular, geoPath } from "d3-geo"
diff --git a/packages/stats/app/src/routes/[lab]/index.tsx b/packages/stats/app/src/routes/[lab]/index.tsx
index da88b05fcd..01bb74c039 100644
--- a/packages/stats/app/src/routes/[lab]/index.tsx
+++ b/packages/stats/app/src/routes/[lab]/index.tsx
@@ -1,4 +1,3 @@
-import "../index.css"
 import { Meta, Title } from "@solidjs/meta"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import {
diff --git a/packages/stats/app/src/routes/compare/index.tsx b/packages/stats/app/src/routes/compare/index.tsx
index 39877f670a..7aa5cbe4c7 100644
--- a/packages/stats/app/src/routes/compare/index.tsx
+++ b/packages/stats/app/src/routes/compare/index.tsx
@@ -1,4 +1,3 @@
-import "../index.css"
 import { Meta, Title } from "@solidjs/meta"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { createAsync } from "@solidjs/router"
diff --git a/packages/stats/app/src/routes/index.css b/packages/stats/app/src/routes/index.css
index f60108ddae..5330cf5399 100644
--- a/packages/stats/app/src/routes/index.css
+++ b/packages/stats/app/src/routes/index.css
@@ -6273,7 +6273,7 @@
   white-space: nowrap;
 }
 
-[data-page="stats"] [data-component="compare-detail-table"] {
+[data-page="stats"] [data-component="compare-detail-comparison"] {
   --compare-detail-label-column: 292px;
   --compare-detail-model-column-min: 360px;
   position: relative;
@@ -6330,10 +6330,10 @@
 }
 
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="3"]
+  [data-component="compare-detail-comparison"][data-model-count="3"]
   [data-section="compare-detail-selector"],
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="3"]
+  [data-component="compare-detail-comparison"][data-model-count="3"]
   [data-section="compare-detail-matrix"] {
   min-width: calc(
     var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
@@ -6342,10 +6342,10 @@
 }
 
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="4"]
+  [data-component="compare-detail-comparison"][data-model-count="4"]
   [data-section="compare-detail-selector"],
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="4"]
+  [data-component="compare-detail-comparison"][data-model-count="4"]
   [data-section="compare-detail-matrix"] {
   min-width: calc(
     var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
@@ -6355,10 +6355,10 @@
 }
 
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="5"]
+  [data-component="compare-detail-comparison"][data-model-count="5"]
   [data-section="compare-detail-selector"],
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="5"]
+  [data-component="compare-detail-comparison"][data-model-count="5"]
   [data-section="compare-detail-matrix"] {
   min-width: calc(
     var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
@@ -6368,10 +6368,10 @@
 }
 
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="6"]
+  [data-component="compare-detail-comparison"][data-model-count="6"]
   [data-section="compare-detail-selector"],
 [data-page="stats"]
-  [data-component="compare-detail-table"][data-model-count="6"]
+  [data-component="compare-detail-comparison"][data-model-count="6"]
   [data-section="compare-detail-matrix"] {
   min-width: calc(
     var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
@@ -6663,7 +6663,7 @@
     aspect-ratio: 1;
   }
 
-  [data-page="stats"] [data-component="compare-detail-table"] {
+  [data-page="stats"] [data-component="compare-detail-comparison"] {
     --compare-detail-label-column: 220px;
     --compare-detail-model-column-min: 320px;
   }
@@ -6754,7 +6754,7 @@
     margin-left: -6px;
   }
 
-  [data-page="stats"] [data-component="compare-detail-table"] {
+  [data-page="stats"] [data-component="compare-detail-comparison"] {
     --compare-detail-label-column: 188px;
     --compare-detail-model-column-min: 246px;
   }
diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx
index 7d882597bd..7debf5c30b 100644
--- a/packages/stats/app/src/routes/index.tsx
+++ b/packages/stats/app/src/routes/index.tsx
@@ -1,4 +1,3 @@
-import "./index.css"
 import { Link, Meta, Title } from "@solidjs/meta"
 import { ProviderIcon } from "@opencode-ai/ui/provider-icon"
 import { geoEquirectangular, geoPath } from "d3-geo"