From c4ecb904558a08f6ee7623fdff7ae7030f073227 Mon Sep 17 00:00:00 2001
From: functionstackx <47992694+functionstackx@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:23:36 -0400
Subject: [PATCH] refactor(agentx): move the optimizations callout into the
 datasets card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The industry-impact block sat in its own card below the AgentX card,
which put it after the whole methodology write-up. Move it inside, right
between the results CTA and "How an AgentX run is built", so the reader
meets the upstream work while they are still at the top of the card. It
becomes a highlighted section rather than a nested card.

中文：行业影响板块此前是 AgentX 卡片下方的独立卡片，位置排在整篇方法论说明
之后。现将其移入卡片内部，置于结果按钮与"AgentX 如何构建一次回放"之间，让读者
在卡片开头就能看到上游工作。它相应地由嵌套卡片改为高亮区块。

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/app/src/app/agentx/page.tsx           |  5 -----
 packages/app/src/app/zh/agentx/page.tsx        |  5 -----
 .../components/datasets/agentx-methodology.tsx |  4 ++++
 .../datasets/agentx-optimizations-callout.tsx  | 18 ++++++++++++------
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/app/src/app/agentx/page.tsx b/packages/app/src/app/agentx/page.tsx
index fad69b42..41308e6e 100644
--- a/packages/app/src/app/agentx/page.tsx
+++ b/packages/app/src/app/agentx/page.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 
 import { AgentXMethodology } from '@/components/datasets/agentx-methodology';
-import { AgentXOptimizationsCallout } from '@/components/datasets/agentx-optimizations-callout';
 import { DatasetList } from '@/components/datasets/dataset-list';
 import { JsonLd } from '@/components/json-ld';
 import { enAlternates } from '@/lib/i18n';
@@ -39,10 +38,6 @@ export default function AgentXPage() {
           <AgentXMethodology locale="en" />
         </section>
 
-        <section>
-          <AgentXOptimizationsCallout locale="en" />
-        </section>
-
         <section className="flex flex-col gap-3">
           <h2 className="text-lg font-semibold text-foreground">Datasets</h2>
           <DatasetList />
diff --git a/packages/app/src/app/zh/agentx/page.tsx b/packages/app/src/app/zh/agentx/page.tsx
index d942812a..40c82a1e 100644
--- a/packages/app/src/app/zh/agentx/page.tsx
+++ b/packages/app/src/app/zh/agentx/page.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from 'next';
 
 import { AgentXMethodology } from '@/components/datasets/agentx-methodology';
-import { AgentXOptimizationsCallout } from '@/components/datasets/agentx-optimizations-callout';
 import { DatasetList } from '@/components/datasets/dataset-list';
 import { JsonLd } from '@/components/json-ld';
 import { zhAlternates, ZH_LANG_TAG, ZH_OG_LOCALE } from '@/lib/i18n';
@@ -41,10 +40,6 @@ export default function AgentXPageZh() {
           <AgentXMethodology locale="zh" />
         </section>
 
-        <section>
-          <AgentXOptimizationsCallout locale="zh" />
-        </section>
-
         <section className="flex flex-col gap-3">
           <h2 className="text-lg font-semibold text-foreground">数据集</h2>
           <DatasetList />
diff --git a/packages/app/src/components/datasets/agentx-methodology.tsx b/packages/app/src/components/datasets/agentx-methodology.tsx
index b619a7d6..9fb95ded 100644
--- a/packages/app/src/components/datasets/agentx-methodology.tsx
+++ b/packages/app/src/components/datasets/agentx-methodology.tsx
@@ -1,5 +1,7 @@
 import { Card } from '@/components/ui/card';
+
 import { AgentXMethodologyLink } from './agentx-methodology-link';
+import { AgentXOptimizationsCallout } from './agentx-optimizations-callout';
 
 type Locale = 'en' | 'zh';
 
@@ -193,6 +195,8 @@ export function AgentXMethodology({ locale }: { locale: Locale }) {
       </header>
 
       <div className="space-y-8 px-5 py-6 sm:px-6">
+        <AgentXOptimizationsCallout locale={locale} />
+
         <section aria-labelledby="agentx-process-title">
           <h2 id="agentx-process-title" className="mb-3 text-base font-semibold text-foreground">
             {t.processTitle}
diff --git a/packages/app/src/components/datasets/agentx-optimizations-callout.tsx b/packages/app/src/components/datasets/agentx-optimizations-callout.tsx
index 0c4eadbb..152a8669 100644
--- a/packages/app/src/components/datasets/agentx-optimizations-callout.tsx
+++ b/packages/app/src/components/datasets/agentx-optimizations-callout.tsx
@@ -1,4 +1,3 @@
-import { Card } from '@/components/ui/card';
 import { getLocalizedFrameworks, getOptimizationsOverview } from '@/lib/agentx-optimizations-zh';
 import type { Locale } from '@/lib/i18n';
 
@@ -7,7 +6,8 @@ import { AgentXOptimizationsLink } from './agentx-optimizations-link';
 /**
  * Entry point from /agentx into the optimizations pages: the headline claim,
  * a button to the index, and one link per project so a reader who already
- * knows which engine they care about can go straight there.
+ * knows which engine they care about can go straight there. Rendered inside
+ * the AgentX methodology card, so it is a section rather than its own card.
  */
 export function AgentXOptimizationsCallout({ locale }: { locale: Locale }) {
   const overview = getOptimizationsOverview(locale);
@@ -15,12 +15,18 @@ export function AgentXOptimizationsCallout({ locale }: { locale: Locale }) {
   const prefix = locale === 'zh' ? '/zh' : '';
 
   return (
-    <Card className="overflow-hidden p-0" data-testid="agentx-optimizations-callout">
-      <div className="px-5 py-5 sm:px-6">
+    <section
+      aria-labelledby="agentx-optimizations-title"
+      data-testid="agentx-optimizations-callout"
+      className="rounded-lg border border-primary/30 bg-primary/5"
+    >
+      <div className="px-4 py-4 sm:px-5 sm:py-5">
         <p className="mb-2 font-mono text-[11px] font-medium tracking-[0.18em] text-primary uppercase">
           {overview.eyebrow}
         </p>
-        <h2 className="text-xl font-semibold text-foreground">{overview.title}</h2>
+        <h2 id="agentx-optimizations-title" className="text-lg font-semibold text-foreground">
+          {overview.title}
+        </h2>
         <p className="mt-3 max-w-4xl text-sm leading-6 text-muted-foreground">{overview.lead}</p>
 
         <AgentXOptimizationsLink
@@ -50,6 +56,6 @@ export function AgentXOptimizationsCallout({ locale }: { locale: Locale }) {
           ))}
         </ul>
       </div>
-    </Card>
+    </section>
   );
 }