fix(stats): align deep route metadata with /data (#31930)

packages/console/app/src/lib/stats-proxy.ts

@@ -10,7 +10,11 @@ export async function statsProxy(evt: APIEvent) {
   targetUrl.hostname = Resource.App.stage === "production" ? "stats.opencode.ai" : "stats.dev.opencode.ai"
   targetUrl.port = ""
 
-  if (targetUrl.pathname.startsWith(`${dataPath}/_build/`) || targetUrl.pathname === `${dataPath}/banner.jpg`) {
+  if (
+    targetUrl.pathname.startsWith(`${dataPath}/_build/`) ||
+    targetUrl.pathname === `${dataPath}/banner.jpg` ||
+    targetUrl.pathname === `${dataPath}/banner.png`
+  ) {
     targetUrl.pathname = targetUrl.pathname.slice(dataPath.length)
   }
 

packages/stats/app/src/routes/[lab]/[model].tsx

@@ -32,7 +32,10 @@ import {
   type ThemePreference,
 } from "../stats-shell"
 
-const statsModelFallbackUrl = "https://stats.opencode.ai"
+const statsCanonicalBaseUrl = "https://opencode.ai/data/"
+const statsUnfurlPath = "banner.png"
+const statsUnfurlAlt = "OpenCode Data wordmark on a dark patterned background"
+const statsUnfurlUrl = new URL(statsUnfurlPath, statsCanonicalBaseUrl).toString()
 const modelHeaderLinks: readonly HeaderLink[] = [
   { href: "#overview", label: "Overview" },
   { href: "#usage", label: "Usage" },
@@ -118,8 +121,8 @@ export default function StatsModel() {
   )
   const modelUrl = createMemo(() =>
     new URL(
-      `${import.meta.env.BASE_URL}${catalogEntry()?.id ?? `${labParam()}/${stats()?.slug ?? modelParam()}`}`,
-      event?.request.url ?? (typeof window === "undefined" ? statsModelFallbackUrl : window.location.href),
+      catalogEntry()?.id ?? [labParam(), stats()?.slug ?? modelParam()].filter((part) => part.length > 0).join("/"),
+      statsCanonicalBaseUrl,
     ).toString(),
   )
   const updateThemePreference = (preference: ThemePreference) => {
@@ -147,9 +150,16 @@ export default function StatsModel() {
       <Meta property="og:title" content={modelTitle()} />
       <Meta property="og:description" content={modelDescription()} />
       <Meta property="og:url" content={modelUrl()} />
-      <Meta name="twitter:card" content="summary" />
+      <Meta property="og:image" content={statsUnfurlUrl} />
+      <Meta property="og:image:type" content="image/png" />
+      <Meta property="og:image:width" content="1200" />
+      <Meta property="og:image:height" content="630" />
+      <Meta property="og:image:alt" content={statsUnfurlAlt} />
+      <Meta name="twitter:card" content="summary_large_image" />
       <Meta name="twitter:title" content={modelTitle()} />
       <Meta name="twitter:description" content={modelDescription()} />
+      <Meta name="twitter:image" content={statsUnfurlUrl} />
+      <Meta name="twitter:image:alt" content={statsUnfurlAlt} />
       <Header githubStars={githubStars() ?? "150K"} links={modelHeaderLinks} brandHref={import.meta.env.BASE_URL} />
       <div data-component="container">
         <div data-component="content">

packages/stats/app/src/routes/[lab]/index.tsx

@@ -28,7 +28,10 @@ import {
   type ThemePreference,
 } from "../stats-shell"
 
-const statsLabFallbackUrl = "https://stats.opencode.ai"
+const statsCanonicalBaseUrl = "https://opencode.ai/data/"
+const statsUnfurlPath = "banner.png"
+const statsUnfurlAlt = "OpenCode Data wordmark on a dark patterned background"
+const statsUnfurlUrl = new URL(statsUnfurlPath, statsCanonicalBaseUrl).toString()
 const labHeaderLinks: readonly HeaderLink[] = [
   { href: "#overview", label: "Overview" },
   { href: "#usage", label: "Usage" },
@@ -72,10 +75,7 @@ export default function StatsLab() {
       `Explore ${labName()} models used in OpenCode, with recent token usage, context windows, release dates, and model-specific data.`,
   )
   const labUrl = createMemo(() =>
-    new URL(
-      `${import.meta.env.BASE_URL}${lab()?.id ?? labParam()}`,
-      event?.request.url ?? (typeof window === "undefined" ? statsLabFallbackUrl : window.location.href),
-    ).toString(),
+    new URL(lab()?.id ?? labParam(), statsCanonicalBaseUrl).toString(),
   )
   const updateThemePreference = (preference: ThemePreference) => {
     applyThemePreference(preference)
@@ -102,9 +102,16 @@ export default function StatsLab() {
       <Meta property="og:title" content={labTitle()} />
       <Meta property="og:description" content={labDescription()} />
       <Meta property="og:url" content={labUrl()} />
-      <Meta name="twitter:card" content="summary" />
+      <Meta property="og:image" content={statsUnfurlUrl} />
+      <Meta property="og:image:type" content="image/png" />
+      <Meta property="og:image:width" content="1200" />
+      <Meta property="og:image:height" content="630" />
+      <Meta property="og:image:alt" content={statsUnfurlAlt} />
+      <Meta name="twitter:card" content="summary_large_image" />
       <Meta name="twitter:title" content={labTitle()} />
       <Meta name="twitter:description" content={labDescription()} />
+      <Meta name="twitter:image" content={statsUnfurlUrl} />
+      <Meta name="twitter:image:alt" content={statsUnfurlAlt} />
       <Header githubStars={githubStars() ?? "150K"} links={labHeaderLinks} brandHref={import.meta.env.BASE_URL} />
       <div data-component="container">
         <div data-component="content">