From 05a67f4b8f0b0831106c0b95f442b03843f93c59 Mon Sep 17 00:00:00 2001
From: cattan0710-tech <cattan0710-tech@users.noreply.github.com>
Date: Tue, 10 Nov 2026 14:52:34 +0800
Subject: [PATCH 1/2] fix: embed catalog reports and shorten model and recipe
 URLs

---
 docs/development/catalog-implementation.md  |  12 +-
 src/components/LanguageSwitch/index.tsx     |  12 +-
 src/features/catalog/CatalogLink.tsx        |  47 +++
 src/features/catalog/CatalogPage.tsx        |  49 +++-
 src/features/catalog/DetailPage.tsx         | 127 ++++++--
 src/features/catalog/GainMeter.tsx          |  16 +-
 src/features/catalog/ModelCard.tsx          |  38 ++-
 src/features/catalog/RecipeOverview.tsx     |  40 ++-
 src/features/catalog/ReportPage.tsx         |   4 +-
 src/features/catalog/ReportPanel.module.css |  17 ++
 src/features/catalog/ReportPanel.tsx        |  88 ++++--
 src/features/catalog/components.tsx         |  54 +++-
 src/features/catalog/data.ts                |  40 ++-
 src/features/catalog/report.ts              |  25 +-
 src/features/catalog/routes.ts              |  60 +++-
 src/features/catalog/useCatalog.ts          |   5 +-
 src/pages/model.tsx                         |   6 +
 src/pages/recipe.tsx                        |   6 +
 src/theme/Navbar/index.tsx                  |   4 +-
 src/theme/SkipToContent/index.tsx           |   4 +-
 tests/e2e/catalog.spec.ts                   |  86 +++---
 tests/e2e/i18n.spec.ts                      |   4 +-
 tests/e2e/model-url.spec.ts                 | 310 ++++++++++++++++++++
 tests/e2e/recipe-overview.spec.ts           |  44 ++-
 tests/e2e/recipe-url.spec.ts                | 144 +++++++++
 tests/e2e/report-language.spec.ts           | 118 +++++++-
 tests/pages/deployment.spec.ts              |   6 +-
 tests/unit/catalog.test.ts                  |  28 +-
 tests/unit/model-url.test.ts                |  54 ++++
 tests/unit/recipe-url.test.ts               |  76 +++++
 tests/unit/report.test.ts                   |  74 +++++
 31 files changed, 1375 insertions(+), 223 deletions(-)
 create mode 100644 src/features/catalog/CatalogLink.tsx
 create mode 100644 src/features/catalog/ReportPanel.module.css
 create mode 100644 src/pages/model.tsx
 create mode 100644 src/pages/recipe.tsx
 create mode 100644 tests/e2e/model-url.spec.ts
 create mode 100644 tests/e2e/recipe-url.spec.ts
 create mode 100644 tests/unit/model-url.test.ts
 create mode 100644 tests/unit/recipe-url.test.ts

diff --git a/docs/development/catalog-implementation.md b/docs/development/catalog-implementation.md
index 2ed55e9..0a0a295 100644
--- a/docs/development/catalog-implementation.md
+++ b/docs/development/catalog-implementation.md
@@ -7,10 +7,10 @@
 ## 当前交付范围
 
 - `/models`：模型数、配方数、调优对照组数及覆盖率、源记录提升中位数及范围、最佳提升及配方入口五项统计；搜索、家族/引擎/配方角色/硬件厂商/硬件型号多选/拓扑筛选、源记录增幅/名称/配方发布日期排序、卡片/表格视图、分页和统一配方详情入口。默认展示配方，模型/配方视角选择器与技术标签筛选已移除；旧 `view=models` 链接继续兼容，旧 `tag` 参数不再参与筛选。
-- `/models/detail?modelId=…`：模型资料和可用配方。
+- `/model?id=…`：模型资料和可用配方的短分享入口，使用通用静态页面，新增模型不需要重建页面。旧 `/models/detail?modelId=…` 使用 replace 转到新入口；显式 `dataVersion` 保留，筛选返回地址移入浏览器当前历史记录。普通站内点击同样通过历史记录保存目录版本及返回筛选条件，新标签页的短分享链接展示当前目录。
 - 模型和配方详情在首屏脚本接管及目录数据等待阶段显示骨架屏，支持明暗主题、窄屏与减少动态效果偏好；请求结束后显示详情或原有错误状态。“需要 JavaScript”及原目录入口仅在 `<noscript>` 中展示，禁用脚本时隐藏骨架屏。
-- `/models/recipe?modelId=…&recipeId=…`：以配方为主体，使用“部署配置 / 性能对照”两个 Tab；默认部署配置，保留 SHA-256 校验、完整 YAML 复制与配方版本选择。启动参数包含在原始 YAML 内，不再单独展示折叠章节；版本历史 Tab 与提交列表已移除。
-- `tab=performance` 展示关联测量版本、完整原始报告 iframe 和独立打开入口；旧 `tab=history` 回退部署配置。Tab 支持分享、刷新和浏览器前进后退；左右方向键及 Home/End 移动焦点，Enter/Space 激活。
+- `/recipe?model=…&id=…`：配方短分享入口，使用通用静态页面；普通链接只携带模型与配方标识，目录快照和返回筛选条件保存在浏览器历史记录。旧 `/models/recipe?modelId=…&recipeId=…` 自动使用 replace 转到新地址，与当前公开目录一致的 `dataVersion` 移入历史记录，其他显式快照与配方 `version` 参数继续保留。以配方为主体，使用“部署配置 / 性能对照”两个 Tab；默认部署配置，保留 SHA-256 校验、完整 YAML 复制与配方版本选择。启动参数包含在原始 YAML 内，不再单独展示折叠章节；版本历史 Tab 与提交列表已移除。
+- `tab=performance` 展示关联测量版本及完整原始报告 iframe；概览中的“完整对照报告”自动切换并聚焦到对应报告模块；报告操作区仅保留“全屏观看”，退出全屏后恢复按钮焦点。多份报告通过 `report` 参数选择，刷新保持选择；旧 `tab=history` 回退部署配置。Tab 支持分享、刷新和浏览器前进后退；左右方向键及 Home/End 移动焦点，Enter/Space 激活。
 - 目录与详情页不再展示正常联网状态的“公开目录 · SHA / Model Catalog”标识；离线、缓存和读取失败提示及重试入口保留。“隐藏已弃用记录”开关已移除，目录固定排除源数据中标记为 deprecated 的模型及配方；列表、模型摘要、筛选选项和统计使用同一可用记录集合，不删除源记录。旧 hidedep 参数忽略且不再生成。
 
 配方详情顶部概览展示默认/调优/基线标记、当前版本及发布日期、引擎、完整硬件型号、拓扑、Chart、镜像与服务名称。调优对照逐组保留 baseline 和 optimized 的测量版本，并展示全部负载增幅；缺少分负载时才回退到该组 uplift，无数据时不补零。选择历史 YAML 不替换当前目录元数据，历史配置版本与测量版本分别标注。
@@ -19,9 +19,9 @@
 
 配方卡片、模型卡片和详情页负载对照共用 `GainMeter`，渐变与数值色统一随明暗主题变化。各处统一以提升 100% 为满条，低于 100% 时按实际增幅填充，超过 100% 时条形封顶；数值保留实际增幅，不把超过 100%、零值或负值改写为视觉填充比例。
 - `/models/evidence`：公开的数据来源、规则解释及缺失说明。
-- 配方卡片有调优记录时显示“查看对照报告”，直达“性能对照”；基线和无调优记录显示“查看部署配置”，打开部署 Tab。表格使用“查看配方详情”，点击源记录增幅直达“性能对照”。模型与配方页面通过受限的 `returnTo` 保留原目录查询；旧 `/models/report`、目录 benchmark 参数和配方 `#benchmark` 链接以 history.replace 转到配方的性能 Tab。
-- 切换 Tab 保留 `version`、`dataVersion` 与 `returnTo`，不重载目录、配置或已打开的报告。报告首次打开才加载，并按所选目录中的优化配方解析最新测量版本及首份关联报告；配置历史 `version` 不作为报告版本选择，页面明确显示实际测量版本。没有报告时仍保留 Tab 并显示空态。
-- 报告语言跟随门户：兼容 `autotune-report-data` 的报告优先选择门户语言，仅调整初始化语言，保留原始比较数据和脚本。缺少对应语言、旧版 HTML 或元数据损坏时继续显示原报告；无法匹配语言时显示回退提示。完整报告入口使用当前报告语言，加载前使用门户语言；iframe 始终只授予 `allow-scripts`。
+- 配方卡片有调优记录时显示“查看对照报告”，直达“性能对照”；基线和无调优记录显示“查看部署配置”，打开部署 Tab。表格使用“查看配方详情”，点击源记录增幅直达“性能对照”。模型与配方页面通过浏览器历史记录保留原目录查询，旧链接的 `returnTo` 校验后迁入历史记录；旧 `/models/report`、目录 benchmark 参数和配方 `#benchmark` 链接以 history.replace 转到配方的性能 Tab。
+- 切换 Tab 保留 `version` 与选中的 `report`，并通过历史记录保留目录快照和返回筛选条件，不重载目录、配置或已打开的报告。报告首次打开才加载，并按所选目录中的优化配方解析最新测量版本及关联报告；配置历史 `version` 不作为报告版本选择，页面明确显示实际测量版本。没有报告时仍保留 Tab 并显示空态。
+- 报告语言跟随门户：兼容 `autotune-report-data` 的报告优先选择门户语言，仅调整初始化语言，保留原始比较数据和脚本。缺少对应语言、旧版 HTML 或元数据损坏时继续显示原报告；无法匹配语言时显示回退提示。全屏报告保留当前报告语言；iframe 始终只授予 `allow-scripts`。
 - 官网导航、首页 Catalog 入口和 Footer 进入站内目录；公共 Header/Footer 和双主题延续现有实现。
 - 不修改 model-catalog 的源文件、生成程序或发布流水线，不创建自托管数据服务，不增加数据库和写入接口。
 
diff --git a/src/components/LanguageSwitch/index.tsx b/src/components/LanguageSwitch/index.tsx
index 597b08c..69db2cd 100644
--- a/src/components/LanguageSwitch/index.tsx
+++ b/src/components/LanguageSwitch/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import * as Select from '@radix-ui/react-select';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import useIsBrowser from '@docusaurus/useIsBrowser';
-import { useLocation } from '@docusaurus/router';
+import { useHistory, useLocation } from '@docusaurus/router';
 import { languageHref, rememberLocale } from '@site/src/lib/locale';
 import styles from './styles.module.css';
 
@@ -14,6 +14,7 @@ const languages = [
 export default function LanguageSwitch() {
   const { i18n, siteConfig } = useDocusaurusContext();
   const location = useLocation();
+  const history = useHistory();
   const browser = useIsBrowser();
   const english = i18n.currentLocale === 'en';
   const href = languageHref(
@@ -30,7 +31,14 @@ export default function LanguageSwitch() {
         value={i18n.currentLocale}
         onValueChange={(locale) => {
           rememberLocale(locale);
-          if (locale !== i18n.currentLocale) window.location.assign(href);
+          if (locale !== i18n.currentLocale) {
+            if (location.state) {
+              // A full reload is needed for translated bundles. Carry the current
+              // entry's navigation context into the target locale before reloading.
+              history.push(href, location.state);
+              window.location.reload();
+            } else window.location.assign(href);
+          }
         }}
       >
         <Select.Trigger
diff --git a/src/features/catalog/CatalogLink.tsx b/src/features/catalog/CatalogLink.tsx
new file mode 100644
index 0000000..5c4d0e8
--- /dev/null
+++ b/src/features/catalog/CatalogLink.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import { useHistory } from '@docusaurus/router';
+import { useSitePath } from '@site/src/lib/use-site-path';
+import { modelNavigationState } from './routes';
+
+type Props = Omit<React.ComponentProps<typeof Link>, 'to' | 'href'> & {
+  to: string;
+  version: string;
+  returnTo?: string;
+};
+
+// Keep the public href shareable while retaining the current list and snapshot
+// on ordinary in-tab navigation. Native new-tab/copy-link behavior stays intact.
+export default function CatalogLink({
+  to,
+  version,
+  returnTo,
+  onClick,
+  ...props
+}: Props) {
+  const history = useHistory();
+  const { siteHref } = useSitePath();
+  return (
+    <Link
+      {...props}
+      to={to}
+      onClick={(event) => {
+        onClick?.(event);
+        if (
+          (!to.startsWith('/model?') && !to.startsWith('/recipe?')) ||
+          event.defaultPrevented ||
+          event.button !== 0 ||
+          event.metaKey ||
+          event.ctrlKey ||
+          event.shiftKey ||
+          event.altKey ||
+          props.download ||
+          (props.target && props.target !== '_self')
+        )
+          return;
+        event.preventDefault();
+        history.push(siteHref(to), modelNavigationState(version, returnTo));
+      }}
+    />
+  );
+}
diff --git a/src/features/catalog/CatalogPage.tsx b/src/features/catalog/CatalogPage.tsx
index 2ab61ca..1c7c261 100644
--- a/src/features/catalog/CatalogPage.tsx
+++ b/src/features/catalog/CatalogPage.tsx
@@ -4,6 +4,7 @@ import { useSitePath } from '@site/src/lib/use-site-path';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
+import CatalogLink from './CatalogLink';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import useIsomorphicLayoutEffect from '@docusaurus/useIsomorphicLayoutEffect';
 import { useHistory, useLocation } from '@docusaurus/router';
@@ -29,7 +30,11 @@ import {
 import { Icon, RecipeCard, SourceState, Stats } from './components';
 import { useCatalog } from './useCatalog';
 import { variantVendors, vendorLabel } from './hardware';
-import { legacyCatalogReportHref, reportHref } from './routes';
+import {
+  legacyCatalogReportHref,
+  modelNavigationState,
+  reportHref,
+} from './routes';
 import CatalogSelect from './CatalogSelect';
 import ModelCard, { ModelRecipeList, ModelTuning } from './ModelCard';
 import styles from './styles.module.css';
@@ -65,8 +70,12 @@ export default function CatalogPage() {
     ? legacyCatalogReportHref(location.search)
     : null;
   useEffect(() => {
-    if (legacyReport) history.replace(siteHref(legacyReport));
-  }, [history, legacyReport, siteHref]);
+    if (legacyReport)
+      history.replace(
+        siteHref(legacyReport),
+        modelNavigationState(version, returnTo),
+      );
+  }, [history, legacyReport, siteHref, version, returnTo]);
   const [draft, setDraft] = useState(''),
     search = useRef<HTMLInputElement>(null),
     filters = useRef<HTMLFormElement>(null),
@@ -204,7 +213,7 @@ export default function CatalogPage() {
               })}
             </p>
           </header>
-          <Stats catalog={c} />
+          <Stats catalog={c} returnTo={returnTo} />
           {state.unavailable ? (
             <p className={styles.notice} role="alert">
               {state.status === 'loading'
@@ -668,11 +677,13 @@ export default function CatalogPage() {
                           data-model-id={summary.model.name}
                         >
                           <th>
-                            <Link
+                            <CatalogLink
                               to={modelHref(summary.model, c.commit, returnTo)}
+                              version={c.commit}
+                              returnTo={returnTo}
                             >
                               {summary.model.displayName || summary.model.name}
-                            </Link>
+                            </CatalogLink>
                             <p>
                               {summary.model.description ||
                                 translate({
@@ -747,24 +758,32 @@ export default function CatalogPage() {
                       {items.map((r) => (
                         <tr key={r.key}>
                           <th>
-                            <Link to={modelHref(r.model, c.commit, returnTo)}>
+                            <CatalogLink
+                              to={modelHref(r.model, c.commit, returnTo)}
+                              version={c.commit}
+                              returnTo={returnTo}
+                            >
                               {r.model.displayName ?? r.model.name}
-                            </Link>
+                            </CatalogLink>
                           </th>
                           <td>
-                            <Link
+                            <CatalogLink
                               to={detailHref(r, c.commit, undefined, returnTo)}
+                              version={c.commit}
+                              returnTo={returnTo}
                             >
                               {r.variant.id}
-                            </Link>
+                            </CatalogLink>
                             <br />
                             {r.variant.engine}
                           </td>
                           <td>{translateCopy(hardwareText(r.variant))}</td>
                           <td>
                             {r.quotedGain != null && reportUrl(r) ? (
-                              <Link
+                              <CatalogLink
                                 to={reportHref(r, c.commit, returnTo)}
+                                version={c.commit}
+                                returnTo={returnTo}
                                 aria-label={translate(
                                   {
                                     id: 'site.50123e2643ec',
@@ -774,7 +793,7 @@ export default function CatalogPage() {
                                 )}
                               >
                                 {`${r.quotedGain >= 0 ? '+' : ''}${r.quotedGain.toFixed(1)}%`}
-                              </Link>
+                              </CatalogLink>
                             ) : r.quotedGain == null ? (
                               translate({
                                 id: 'site.756762e293f2',
@@ -786,14 +805,16 @@ export default function CatalogPage() {
                             <small>{r.workload}</small>
                           </td>
                           <td>
-                            <Link
+                            <CatalogLink
                               to={detailHref(r, c.commit, undefined, returnTo)}
+                              version={c.commit}
+                              returnTo={returnTo}
                             >
                               {translate({
                                 id: 'site.ad28b6a65be6',
                                 message: '查看配方详情',
                               })}
-                            </Link>
+                            </CatalogLink>
                           </td>
                         </tr>
                       ))}
diff --git a/src/features/catalog/DetailPage.tsx b/src/features/catalog/DetailPage.tsx
index d03fc93..af6c325 100644
--- a/src/features/catalog/DetailPage.tsx
+++ b/src/features/catalog/DetailPage.tsx
@@ -4,6 +4,7 @@ import { useSitePath } from '@site/src/lib/use-site-path';
 import React, { useEffect, useMemo, useState } from 'react';
 import Layout from '@theme/Layout';
 import Head from '@docusaurus/Head';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import { useHistory, useLocation } from '@docusaurus/router';
@@ -14,7 +15,6 @@ import {
   loadYaml,
   modelHref,
   recipesOf,
-  reportUrl,
   type History,
 } from './data';
 import { CopyButton, RecipeCard, SourceState } from './components';
@@ -22,13 +22,18 @@ import { ModelOverviewCard } from './ModelOverviewCard';
 import { useCatalog } from './useCatalog';
 import {
   catalogReturnTo,
-  legacyRecipeReportHref,
   recipeTab,
   recipeTabHref,
   recipeTabs,
+  modelNavigationState,
+  modelRoute,
+  recipeRoute,
+  readModelNavigationState,
   type RecipeTab,
 } from './routes';
 import ReportPanel from './ReportPanel';
+import { availableReportTunings } from './report';
+import CatalogLink from './CatalogLink';
 import CatalogSelect from './CatalogSelect';
 import RecipeOverview from './RecipeOverview';
 import styles from './styles.module.css';
@@ -36,37 +41,86 @@ import styles from './styles.module.css';
 export default function DetailPage({ kind }: { kind: 'model' | 'recipe' }) {
   const location = useLocation();
   const params = new URLSearchParams(location.search);
-  const identity = ['modelId', 'recipeId', 'dataVersion', 'version'].map(
-    (key) => params.get(key),
-  );
+  const identity = [
+    'id',
+    'model',
+    'modelId',
+    'recipeId',
+    'dataVersion',
+    'version',
+  ].map((key) => params.get(key));
+  const navigation = readModelNavigationState(location.state);
   return (
-    <DetailContent key={JSON.stringify([kind, ...identity])} kind={kind} />
+    <DetailContent
+      key={JSON.stringify([kind, ...identity, navigation.catalogDataVersion])}
+      kind={kind}
+    />
   );
 }
 function DetailContent({ kind }: { kind: 'model' | 'recipe' }) {
-  const { siteHref } = useSitePath();
+  const { siteHref, localHref } = useSitePath();
+  const { siteConfig } = useDocusaurusContext();
   const browser = useIsBrowser(),
     location = useLocation(),
     history = useHistory();
+  const navigation = readModelNavigationState(location.state);
   const params = new URLSearchParams(browser ? location.search : ''),
-    modelId = params.get('modelId') ?? '',
-    recipeId = params.get('recipeId') ?? '',
+    modelId =
+      (kind === 'model' ? params.get('id') : params.get('model')) ??
+      params.get('modelId') ??
+      '',
+    recipeId = params.get('id') ?? params.get('recipeId') ?? '',
     requestedVersion = params.get('version') ?? '',
     activeTab = recipeTab(params.get('tab')),
-    returnTo = catalogReturnTo(params.get('returnTo'));
+    returnTo = catalogReturnTo(
+      params.get('returnTo') ?? navigation.catalogReturnTo,
+    );
+  const dataVersion =
+    params.get('dataVersion') ?? navigation.catalogDataVersion;
+  const state = useCatalog(dataVersion),
+    c = state.catalog;
+  const recipeParams = new URLSearchParams(location.search);
+  recipeParams.delete('returnTo');
+  if (recipeParams.get('dataVersion') === state.currentCommit)
+    recipeParams.delete('dataVersion');
+  if (location.hash === '#benchmark') recipeParams.set('tab', 'performance');
+  const shortRoute =
+    !browser || !modelId
+      ? null
+      : kind === 'model'
+        ? modelRoute(modelId, params.get('dataVersion') ?? '')
+        : recipeId
+          ? recipeRoute(modelId, recipeId, recipeParams.toString())
+          : null;
+  const hash =
+    kind === 'recipe' && location.hash === '#benchmark' ? '' : location.hash;
+  useEffect(() => {
+    if (
+      !shortRoute ||
+      localHref(location.pathname) + location.search + location.hash ===
+        shortRoute + hash
+    )
+      return;
+    history.replace(
+      siteHref(shortRoute) + hash,
+      modelNavigationState(dataVersion, returnTo),
+    );
+  }, [
+    shortRoute,
+    hash,
+    localHref,
+    location.pathname,
+    location.search,
+    location.hash,
+    history,
+    siteHref,
+    dataVersion,
+    returnTo,
+  ]);
   const [openedPerformance, setOpenedPerformance] = useState(false);
   useEffect(() => {
     if (activeTab === 'performance') setOpenedPerformance(true);
   }, [activeTab]);
-  const legacyReport =
-    browser && kind === 'recipe'
-      ? legacyRecipeReportHref(location.search, location.hash)
-      : null;
-  useEffect(() => {
-    if (legacyReport) history.replace(siteHref(legacyReport));
-  }, [history, legacyReport, siteHref]);
-  const state = useCatalog(params.get('dataVersion') ?? ''),
-    c = state.catalog;
   const model = c.models.find((m) => m.name === modelId),
     recipes = useMemo(
       () => recipesOf(c).filter((r) => r.model.name === modelId),
@@ -169,11 +223,17 @@ function DetailContent({ kind }: { kind: 'model' | 'recipe' }) {
     const p = new URLSearchParams(location.search);
     if (v) p.set('version', v);
     else p.delete('version');
-    history.push(location.pathname + '?' + p.toString());
+    history.push(
+      location.pathname + '?' + p.toString(),
+      modelNavigationState(dataVersion, returnTo),
+    );
   }
   function chooseTab(tab: RecipeTab) {
     if (tab !== activeTab)
-      history.push(siteHref(recipeTabHref(location.search, tab)));
+      history.push(
+        siteHref(recipeTabHref(location.search, tab)),
+        modelNavigationState(dataVersion, returnTo),
+      );
   }
   function moveTabFocus(event: React.KeyboardEvent<HTMLButtonElement>) {
     const index = recipeTabs.findIndex(
@@ -217,6 +277,21 @@ function DetailContent({ kind }: { kind: 'model' | 'recipe' }) {
     >
       <Head>
         <meta name="robots" content="noindex,follow" />
+        {modelId && (kind === 'model' || recipeId) && (
+          <link
+            rel="canonical"
+            href={
+              new URL(
+                siteHref(
+                  kind === 'model'
+                    ? modelRoute(modelId)
+                    : recipeRoute(modelId, recipeId),
+                ),
+                siteConfig.url,
+              ).href
+            }
+          />
+        )}
       </Head>
       <main
         id="main-content"
@@ -237,9 +312,13 @@ function DetailContent({ kind }: { kind: 'model' | 'recipe' }) {
               <span>/</span>
               {kind === 'recipe' && model && !state.unavailable && (
                 <>
-                  <Link to={modelHref(model, c.commit, returnTo)}>
+                  <CatalogLink
+                    to={modelHref(model, c.commit, returnTo)}
+                    version={c.commit}
+                    returnTo={returnTo}
+                  >
                     {model.displayName ?? model.name}
-                  </Link>
+                  </CatalogLink>
                   <span>/</span>
                 </>
               )}
@@ -582,7 +661,7 @@ function DetailContent({ kind }: { kind: 'model' | 'recipe' }) {
                         hidden={activeTab !== 'performance'}
                         className={styles.tabPanel}
                       >
-                        {reportUrl(recipe) ? (
+                        {availableReportTunings(recipe).length > 0 ? (
                           <>
                             {requestedVersion && (
                               <p className={styles.notice}>
diff --git a/src/features/catalog/GainMeter.tsx b/src/features/catalog/GainMeter.tsx
index 2c62a99..5e91555 100644
--- a/src/features/catalog/GainMeter.tsx
+++ b/src/features/catalog/GainMeter.tsx
@@ -1,6 +1,6 @@
 import { translate } from '@docusaurus/Translate';
 import React from 'react';
-import Link from '@docusaurus/Link';
+import CatalogLink from './CatalogLink';
 import styles from './GainMeter.module.css';
 
 export default function GainMeter({
@@ -8,6 +8,8 @@ export default function GainMeter({
   label,
   valueHref,
   valueLabel,
+  version = '',
+  returnTo,
   layout = 'stacked',
   max = 100,
 }: {
@@ -15,6 +17,8 @@ export default function GainMeter({
   label?: React.ReactNode;
   valueHref?: string;
   valueLabel?: string;
+  version?: string;
+  returnTo?: string;
   layout?: 'stacked' | 'inline';
   max?: number;
 }) {
@@ -37,9 +41,15 @@ export default function GainMeter({
     >
       {label && <span className={styles.label}>{label}</span>}
       {value != null && valueHref ? (
-        <Link className={styles.value} to={valueHref} aria-label={valueLabel}>
+        <CatalogLink
+          className={styles.value}
+          to={valueHref}
+          version={version}
+          returnTo={returnTo}
+          aria-label={valueLabel}
+        >
           <strong>{text}</strong>
-        </Link>
+        </CatalogLink>
       ) : (
         <strong
           className={`${styles.value}${value == null ? ` ${styles.missing}` : ''}`}
diff --git a/src/features/catalog/ModelCard.tsx b/src/features/catalog/ModelCard.tsx
index 40bfa71..473f1cb 100644
--- a/src/features/catalog/ModelCard.tsx
+++ b/src/features/catalog/ModelCard.tsx
@@ -1,6 +1,6 @@
 import { translate } from '@docusaurus/Translate';
 import React from 'react';
-import Link from '@docusaurus/Link';
+import CatalogLink from './CatalogLink';
 import {
   detailHref,
   modelHref,
@@ -30,13 +30,15 @@ export function ModelTuning({ summary, version, returnTo }: Props) {
       <div className={styles.gain}>
         <GainMeter
           value={best?.gain ?? null}
+          version={version}
+          returnTo={returnTo}
           label={translate({
             id: 'site.9d6b32790955',
             message: '调优配方最佳提升',
           })}
           valueHref={
             best && reportUrl(best.recipe)
-              ? reportHref(best.recipe, version, returnTo)
+              ? reportHref(best.recipe, version, returnTo, best.tuning.report)
               : undefined
           }
           valueLabel={
@@ -67,16 +69,18 @@ export function ModelTuning({ summary, version, returnTo }: Props) {
           <dt>{translate({ id: 'site.23727d36d91b', message: '调优配方' })}</dt>
           <dd>
             {best ? (
-              <Link
+              <CatalogLink
                 to={detailHref(
                   best.recipe,
                   version,
                   best.tuning.optimized.split('@')[1],
                   returnTo,
                 )}
+                version={version}
+                returnTo={returnTo}
               >
                 {best.tuning.optimized}
-              </Link>
+              </CatalogLink>
             ) : (
               translate({ id: 'site.756762e293f2', message: '未提供' })
             )}
@@ -86,17 +90,19 @@ export function ModelTuning({ summary, version, returnTo }: Props) {
           <dt>Baseline</dt>
           <dd>
             {baseline && best ? (
-              <Link
+              <CatalogLink
                 to={detailHref(
                   baseline,
                   version,
                   best.tuning.baseline.split('@')[1],
                   returnTo,
                 )}
+                version={version}
+                returnTo={returnTo}
               >
                 {best.tuning.baseline ||
                   translate({ id: 'site.756762e293f2', message: '未提供' })}
-              </Link>
+              </CatalogLink>
             ) : (
               best?.tuning.baseline ||
               translate({ id: 'site.756762e293f2', message: '未提供' })
@@ -113,9 +119,13 @@ export function ModelRecipeList({ summary, version, returnTo }: Props) {
     <ul className={styles.modelRecipeList}>
       {summary.recipes.map((r) => (
         <li key={r.key}>
-          <Link to={detailHref(r, version, undefined, returnTo)}>
+          <CatalogLink
+            to={detailHref(r, version, undefined, returnTo)}
+            version={version}
+            returnTo={returnTo}
+          >
             {r.variant.id}
-          </Link>
+          </CatalogLink>
           <span>
             {role(r) === 'optimized'
               ? translate({ id: 'site.c805b06152c6', message: '已调优' })
@@ -149,12 +159,14 @@ export default function ModelCard(props: Props) {
                 translate({ id: 'site.c98e118e0a43', message: '模型' })}
             </p>
             <h2>
-              <Link
+              <CatalogLink
                 to={modelHref(model, version, returnTo)}
+                version={version}
+                returnTo={returnTo}
                 title={model.displayName || model.name}
               >
                 {model.displayName || model.name}
-              </Link>
+              </CatalogLink>
             </h2>
           </div>
           <span className={styles.recipeCount}>
@@ -171,12 +183,14 @@ export default function ModelCard(props: Props) {
         <ModelTuning {...props} />
       </div>
       <div className={styles.cardFooter}>
-        <Link
+        <CatalogLink
           className={styles.secondary}
           to={modelHref(model, version, returnTo)}
+          version={version}
+          returnTo={returnTo}
         >
           {translate({ id: 'site.53d096fa52c4', message: '查看模型详情' })}
-        </Link>
+        </CatalogLink>
       </div>
     </article>
   );
diff --git a/src/features/catalog/RecipeOverview.tsx b/src/features/catalog/RecipeOverview.tsx
index 98cd56a..c0b77ea 100644
--- a/src/features/catalog/RecipeOverview.tsx
+++ b/src/features/catalog/RecipeOverview.tsx
@@ -2,7 +2,6 @@ import { translateCopy } from '@site/src/lib/translate-copy';
 import Translate, { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React from 'react';
-import Link from '@docusaurus/Link';
 import {
   detailHref,
   hardwareText,
@@ -16,6 +15,8 @@ import {
 import { Icon, SourceLinks } from './components';
 import styles from './styles.module.css';
 import GainMeter from './GainMeter';
+import { reportHref } from './routes';
+import CatalogLink from './CatalogLink';
 
 const workloadNames: Record<string, string> = {
   '50k + 1.5k': translate({
@@ -145,9 +146,13 @@ export default function RecipeOverview({
             {variant.version}
           </p>
         </div>
-        <Link to={modelHref(model, version, returnTo)}>
+        <CatalogLink
+          to={modelHref(model, version, returnTo)}
+          version={version}
+          returnTo={returnTo}
+        >
           {translate({ id: 'site.8df99bc0b742', message: '全部模型配方 →' })}
-        </Link>
+        </CatalogLink>
       </div>
       {variant.description && <p>{variant.description}</p>}
       <dl className={styles.recipeFacts}>
@@ -162,11 +167,9 @@ export default function RecipeOverview({
         const baseline = recipes.find(
           (r) => r.variant.id === tuning.baseline.split('@')[0],
         );
-        const report = reportUrl(
-          recipe,
-          tuning,
-          currentLocale === 'en' ? 'en' : 'zh',
-        );
+        const report = reportUrl(recipe, tuning)
+          ? reportHref(recipe, version, returnTo, tuning.report)
+          : null;
         const rows = tuning.workloads.length
           ? tuning.workloads
           : tuning.uplift == null
@@ -195,16 +198,18 @@ export default function RecipeOverview({
                   id="catalog.gainRelativeToBaseline"
                   values={{
                     baseline: baseline ? (
-                      <Link
+                      <CatalogLink
                         to={detailHref(
                           baseline,
                           version,
                           tuning.baseline.split('@')[1],
                           returnTo,
                         )}
+                        version={version}
+                        returnTo={returnTo}
                       >
                         {tuning.baseline}
-                      </Link>
+                      </CatalogLink>
                     ) : (
                       tuning.baseline ||
                       translate({
@@ -218,12 +223,19 @@ export default function RecipeOverview({
                 </Translate>
               </h2>
               {report && (
-                <a href={report} target="_blank" rel="noreferrer">
+                <CatalogLink
+                  to={report + '#benchmark-title'}
+                  version={version}
+                  returnTo={returnTo}
+                >
                   {translate({
-                    id: 'site.44af1f54feba',
-                    message: '完整对照报告 ↗',
+                    id: 'catalog.report.openEmbedded',
+                    message:
+                      currentLocale === 'en'
+                        ? 'Full comparison report'
+                        : '完整对照报告',
                   })}
-                </a>
+                </CatalogLink>
               )}
             </div>
             <p className={styles.measurement}>
diff --git a/src/features/catalog/ReportPage.tsx b/src/features/catalog/ReportPage.tsx
index dd9c4ce..afe35f1 100644
--- a/src/features/catalog/ReportPage.tsx
+++ b/src/features/catalog/ReportPage.tsx
@@ -18,8 +18,8 @@ export default function ReportPage() {
   const history = useHistory();
   const target = recipeTabHref(browser ? location.search : '', 'performance');
   useEffect(() => {
-    if (browser) history.replace(siteHref(target));
-  }, [browser, history, target, siteHref]);
+    if (browser) history.replace(siteHref(target), location.state);
+  }, [browser, history, target, siteHref, location.state]);
   return (
     <Layout
       title={translate({ id: 'site.4fd2e35fdb77', message: '配方详情' })}
diff --git a/src/features/catalog/ReportPanel.module.css b/src/features/catalog/ReportPanel.module.css
new file mode 100644
index 0000000..976620e
--- /dev/null
+++ b/src/features/catalog/ReportPanel.module.css
@@ -0,0 +1,17 @@
+.reportPicker {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
+  font-size: 13px;
+}
+
+.reportPicker select {
+  max-width: 100%;
+  padding: 6px 8px;
+  border: 1px solid var(--color-border-default);
+  border-radius: 6px;
+  background: var(--color-background-surface);
+  color: var(--color-text-primary);
+}
diff --git a/src/features/catalog/ReportPanel.tsx b/src/features/catalog/ReportPanel.tsx
index 4de5a9f..aabf0f4 100644
--- a/src/features/catalog/ReportPanel.tsx
+++ b/src/features/catalog/ReportPanel.tsx
@@ -1,13 +1,17 @@
 import { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useHistory, useLocation } from '@docusaurus/router';
 import React, { useEffect, useRef, useState } from 'react';
-import { reportUrl, type Recipe } from './data';
+import { type Recipe } from './data';
 import {
+  availableReportTunings,
   loadReportDocument,
   localizeReportDocument,
+  selectReportTuning,
   type ReportDocument,
 } from './report';
 import styles from './styles.module.css';
+import reportStyles from './ReportPanel.module.css';
 export default function ReportPanel({
   r,
   commit,
@@ -20,12 +24,29 @@ export default function ReportPanel({
   const {
     i18n: { currentLocale },
   } = useDocusaurusContext();
+  const location = useLocation();
+  const history = useHistory();
+  const requestedReport = new URLSearchParams(location.search).get('report');
+  const tuning = selectReportTuning(r, requestedReport);
+  const tunings = availableReportTunings(r);
+  const english = currentLocale === 'en';
   const [data, setData] = useState<ReportDocument | null>(null),
     [error, setError] = useState(''),
     [retry, setRetry] = useState(0),
     [fullscreen, setFullscreen] = useState(false),
     [fullscreenError, setFullscreenError] = useState('');
+  const reportSection = useRef<HTMLElement>(null);
+  const reportTitle = useRef<HTMLHeadingElement>(null);
   const reportFrame = useRef<HTMLIFrameElement>(null);
+  useEffect(() => {
+    if (!active || location.hash !== '#benchmark-title') return;
+    // Wait until the performance tab is visible before moving focus and scroll.
+    const frame = requestAnimationFrame(() => {
+      reportTitle.current?.focus({ preventScroll: true });
+      reportSection.current?.scrollIntoView({ block: 'start' });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [active, location.key, location.hash]);
   const fullscreenButton = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     let wasFullscreen = false;
@@ -65,8 +86,10 @@ export default function ReportPanel({
     } catch {
       setFullscreenError(
         translate({
-          id: 'site.77afbff41aa8',
-          message: '暂时无法全屏观看，请使用“查看完整报告”。',
+          id: 'catalog.report.fullscreenUnavailable',
+          message: english
+            ? 'Full screen is unavailable. Please read the report below.'
+            : '暂时无法全屏观看，请在下方阅读报告。',
         }),
       );
     }
@@ -76,7 +99,7 @@ export default function ReportPanel({
     const c = new AbortController();
     setData(null);
     setError('');
-    loadReportDocument(r, commit, c.signal)
+    loadReportDocument(r, commit, c.signal, requestedReport)
       .then((x) => {
         if (!c.signal.aborted)
           setData(localizeReportDocument(x, currentLocale));
@@ -85,15 +108,18 @@ export default function ReportPanel({
         if (!c.signal.aborted)
           setError(
             translate({
-              id: 'site.06c78240c62a',
-              message: '报告数据加载失败，请重试或查看完整报告。',
+              id: 'catalog.report.loadFailed',
+              message: english
+                ? 'The report could not be loaded. Please retry.'
+                : '报告数据加载失败，请重试。',
             }),
           );
       });
     return () => c.abort();
-  }, [r.key, commit, retry, currentLocale]);
+  }, [r.key, commit, retry, currentLocale, requestedReport]);
   return (
     <section
+      ref={reportSection}
       id="benchmark"
       className={styles.report}
       aria-labelledby="benchmark-title"
@@ -101,12 +127,42 @@ export default function ReportPanel({
       <div className={styles.reportHeader}>
         <div>
           <span className={styles.kicker}>PERFORMANCE REPORT</span>
-          <h2 id="benchmark-title">
+          <h2 ref={reportTitle} id="benchmark-title" tabIndex={-1}>
             {translate({ id: 'site.97a3583c6b16', message: '基线与调优对照' })}
           </h2>
           <p>
-            {r.tuning[0]?.baseline} → {r.tuning[0]?.optimized}
+            {tuning?.baseline} → {tuning?.optimized}
           </p>
+          {tunings.length > 1 && (
+            <label className={reportStyles.reportPicker}>
+              {translate({
+                id: 'catalog.report.chooseComparison',
+                message: english ? 'Performance report' : '性能报告',
+              })}
+              <select
+                value={tuning?.report ?? ''}
+                onChange={(event) => {
+                  const params = new URLSearchParams(location.search);
+                  params.set('report', event.currentTarget.value);
+                  history.replace({
+                    ...location,
+                    search: '?' + params.toString(),
+                  });
+                }}
+              >
+                {!tuning && (
+                  <option value="" disabled>
+                    {english ? 'Select a report' : '请选择报告'}
+                  </option>
+                )}
+                {tunings.map((item) => (
+                  <option key={item.report} value={item.report}>
+                    {item.baseline} → {item.optimized}
+                  </option>
+                ))}
+              </select>
+            </label>
+          )}
         </div>
         <div className={styles.reportActions}>
           <button
@@ -139,20 +195,6 @@ export default function ReportPanel({
               ? translate({ id: 'site.0f1505b6ad3f', message: '退出全屏' })
               : translate({ id: 'site.90cd137f160c', message: '全屏观看' })}
           </button>
-          <a
-            className={styles.primary}
-            href={
-              reportUrl(
-                r,
-                undefined,
-                data?.language ?? (currentLocale === 'en' ? 'en' : 'zh'),
-              )!
-            }
-            target="_blank"
-            rel="noreferrer"
-          >
-            {translate({ id: 'site.c9a9e8905c6b', message: '查看完整报告 ↗' })}
-          </a>
         </div>
       </div>
       {fullscreenError && <p role="status">{fullscreenError}</p>}
diff --git a/src/features/catalog/components.tsx b/src/features/catalog/components.tsx
index e29b639..d6a38fb 100644
--- a/src/features/catalog/components.tsx
+++ b/src/features/catalog/components.tsx
@@ -2,7 +2,7 @@ import { translateCopy } from '@site/src/lib/translate-copy';
 import { translate } from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React, { useId, useState } from 'react';
-import Link from '@docusaurus/Link';
+import CatalogLink from './CatalogLink';
 import {
   baselineInfo,
   config,
@@ -157,7 +157,13 @@ export function SourceState({
     </div>
   );
 }
-export function Stats({ catalog }: { catalog: Catalog }) {
+export function Stats({
+  catalog,
+  returnTo,
+}: {
+  catalog: Catalog;
+  returnTo?: string;
+}) {
   const s = stats(catalog);
   const percent = (value: number | null) =>
     value == null
@@ -198,9 +204,13 @@ export function Stats({ catalog }: { catalog: Catalog }) {
       'BEST IMPROVEMENT',
       percent(s.bestImprovement),
       s.bestRecipe ? (
-        <Link to={reportHref(s.bestRecipe, catalog.commit)}>
+        <CatalogLink
+          to={reportHref(s.bestRecipe, catalog.commit, returnTo)}
+          version={catalog.commit}
+          returnTo={returnTo}
+        >
           {s.bestRecipe.model.name} · {s.bestRecipe.variant.id}
-        </Link>
+        </CatalogLink>
       ) : (
         translate({ id: 'site.de0b7338c7f3', message: '暂无有效提升记录' })
       ),
@@ -312,12 +322,14 @@ export function RecipeCard({
               <span>· {translate({ message: topologyLabel(r.variant) })}</span>
             </p>
             <Heading>
-              <Link
+              <CatalogLink
                 to={
                   context === 'catalog'
                     ? modelHref(r.model, version, returnTo)
                     : detailHref(r, version, undefined, returnTo)
                 }
+                version={version}
+                returnTo={returnTo}
                 title={
                   context === 'catalog'
                     ? r.model.displayName || r.model.name
@@ -327,7 +339,7 @@ export function RecipeCard({
                 {context === 'catalog'
                   ? r.model.displayName || r.model.name
                   : r.variant.id}
-              </Link>
+              </CatalogLink>
             </Heading>
           </div>
           <span
@@ -350,17 +362,19 @@ export function RecipeCard({
                 : translate({ id: 'site.c98e118e0a43', message: '模型' })}
             </dt>
             <dd>
-              <Link
+              <CatalogLink
                 to={
                   context === 'catalog'
                     ? detailHref(r, version, undefined, returnTo)
                     : modelHref(r.model, version, returnTo)
                 }
+                version={version}
+                returnTo={returnTo}
               >
                 {context === 'catalog'
                   ? r.variant.id
                   : r.model.displayName || r.model.name}
-              </Link>
+              </CatalogLink>
             </dd>
           </div>
         </dl>
@@ -373,6 +387,8 @@ export function RecipeCard({
         <div className={styles.gain}>
           <GainMeter
             value={r.quotedGain}
+            version={version}
+            returnTo={returnTo}
             label={translate({
               id: 'site.6a575618a188',
               message: '吞吐量提升',
@@ -457,18 +473,20 @@ export function RecipeCard({
           </div>
         </dl>
         <div className={styles.cardActions}>
-          <Link
+          <CatalogLink
             className={styles.secondary}
             to={
               badge === 'optimized'
                 ? reportHref(r, version, returnTo)
                 : detailHref(r, version, undefined, returnTo)
             }
+            version={version}
+            returnTo={returnTo}
           >
             {badge === 'optimized'
               ? translate({ id: 'site.19166317a928', message: '查看对照报告' })
               : translate({ id: 'site.9c3b6f1004ad', message: '查看部署配置' })}
-          </Link>
+          </CatalogLink>
           <CopyButton
             getText={copy}
             label={translate({
@@ -484,9 +502,13 @@ export function RecipeCard({
 export function SourceLinks({
   r,
   includeReport = true,
+  version = '',
+  returnTo,
 }: {
   r: Recipe;
   includeReport?: boolean;
+  version?: string;
+  returnTo?: string;
 }) {
   const {
     i18n: { currentLocale },
@@ -497,13 +519,13 @@ export function SourceLinks({
         {translate({ id: 'site.61e67a99c6ff', message: '查看配方文件 ↗' })}
       </a>
       {includeReport && reportUrl(r) && (
-        <a
-          href={reportUrl(r, undefined, currentLocale === 'en' ? 'en' : 'zh')!}
-          target="_blank"
-          rel="noreferrer"
+        <CatalogLink
+          to={reportHref(r, version, returnTo)}
+          version={version}
+          returnTo={returnTo}
         >
-          {translate({ id: 'site.7c91d0100fd4', message: '查看性能报告 ↗' })}
-        </a>
+          {currentLocale === 'en' ? 'View performance report' : '查看性能报告'}
+        </CatalogLink>
       )}
       <a href={config.repository} target="_blank" rel="noreferrer">
         {translate({ id: 'site.be5038492a9d', message: '贡献配方 ↗' })}
diff --git a/src/features/catalog/data.ts b/src/features/catalog/data.ts
index 1757370..cd130bd 100644
--- a/src/features/catalog/data.ts
+++ b/src/features/catalog/data.ts
@@ -3,7 +3,7 @@ import { parse as parseYaml } from 'yaml';
 import baselineInput from '../../../content/catalog/baseline.json';
 import baselineSource from '../../../content/catalog/baseline-source.json';
 import source from '../../../content/catalog/source.json';
-import { catalogReturnTo } from './routes';
+import { modelRoute, recipeRoute } from './routes';
 
 const id = z.string().regex(/^[a-z0-9][a-z0-9._-]*$/);
 const sha = z.string().regex(/^[a-f0-9]{40}$/);
@@ -146,7 +146,13 @@ export const sourceUrl = (v: Variant) =>
   v.commit
     ? `${config.repository}/blob/${v.commit}/${encodedPath(v.path)}`
     : fileUrl(v.path);
-export const reportUrl = (r: Recipe, t = r.tuning[0], language = 'en') =>
+export const reportUrl = (
+  r: Recipe,
+  t = r.tuning.find(
+    (item) => item.report && r.model.reports.includes(item.report),
+  ),
+  language = 'en',
+) =>
   t?.report && r.model.reports.includes(t.report)
     ? fileUrl(`models/${r.model.name}/${t.report}`) +
       `#${encodeURIComponent(language)}`
@@ -264,30 +270,20 @@ export function isDefault(r: Recipe) {
 }
 export function detailHref(
   r: Recipe,
-  version: string,
+  _version: string,
   recipeVersion?: string,
-  returnTo?: string,
+  _returnTo?: string,
 ) {
-  return (
-    '/models/recipe?' +
-    new URLSearchParams({
-      modelId: r.model.name,
-      recipeId: r.variant.id,
-      dataVersion: version,
-      ...(recipeVersion ? { version: recipeVersion } : {}),
-      ...(returnTo ? { returnTo: catalogReturnTo(returnTo) } : {}),
-    })
+  return recipeRoute(
+    r.model.name,
+    r.variant.id,
+    new URLSearchParams(
+      recipeVersion ? { version: recipeVersion } : {},
+    ).toString(),
   );
 }
-export function modelHref(m: Model, version: string, returnTo?: string) {
-  return (
-    '/models/detail?' +
-    new URLSearchParams({
-      modelId: m.name,
-      dataVersion: version,
-      ...(returnTo ? { returnTo: catalogReturnTo(returnTo) } : {}),
-    })
-  );
+export function modelHref(m: Model, _version?: string, _returnTo?: string) {
+  return modelRoute(m.name);
 }
 export function stats(c: Catalog) {
   const rs = recipesOf(c);
diff --git a/src/features/catalog/report.ts b/src/features/catalog/report.ts
index b95d3f1..888d716 100644
--- a/src/features/catalog/report.ts
+++ b/src/features/catalog/report.ts
@@ -12,6 +12,25 @@ export interface ReportDocument {
   matchesLocale: boolean;
 }
 
+export function availableReportTunings(r: Recipe) {
+  const reports = new Set<string>();
+  return r.tuning.filter((t) => {
+    if (
+      !t.report ||
+      !r.model.reports.includes(t.report) ||
+      reports.has(t.report)
+    )
+      return false;
+    reports.add(t.report);
+    return true;
+  });
+}
+
+export function selectReportTuning(r: Recipe, report?: string | null) {
+  const tunings = availableReportTunings(r);
+  return report == null ? tunings[0] : tunings.find((t) => t.report === report);
+}
+
 export function selectReportLanguage(value: unknown, locale: string) {
   const parsed = languageData.safeParse(value);
   if (!parsed.success) return null;
@@ -65,10 +84,10 @@ export async function loadReportDocument(
   r: Recipe,
   commit: string,
   signal?: AbortSignal,
+  report?: string | null,
 ): Promise<string> {
-  const t = r.tuning[0];
-  if (!t?.report || !r.model.reports.includes(t.report))
-    throw new Error('该配方未关联性能报告');
+  const t = selectReportTuning(r, report);
+  if (!t?.report) throw new Error('该配方未关联性能报告');
   const html = await requestText(
     rawUrl(commit, `models/${r.model.name}/${t.report}`),
     signal,
diff --git a/src/features/catalog/routes.ts b/src/features/catalog/routes.ts
index d733085..aeba9c6 100644
--- a/src/features/catalog/routes.ts
+++ b/src/features/catalog/routes.ts
@@ -1,5 +1,46 @@
 import type { Recipe } from './data';
 
+export function modelRoute(modelId: string, dataVersion = '') {
+  const params = new URLSearchParams({ id: modelId });
+  if (dataVersion) params.set('dataVersion', dataVersion);
+  return '/model?' + params.toString();
+}
+
+export function recipeRoute(modelId: string, recipeId: string, search = '') {
+  const source = new URLSearchParams(search);
+  const params = new URLSearchParams({ model: modelId, id: recipeId });
+  for (const key of ['dataVersion', 'version', 'tab', 'report']) {
+    const value = source.get(key);
+    if (value) params.set(key, value);
+  }
+  // Legacy redirects keep this until DetailPage moves it into history state.
+  if (source.has('returnTo'))
+    params.set('returnTo', catalogReturnTo(source.get('returnTo')));
+  return '/recipe?' + params.toString();
+}
+
+export function modelNavigationState(version = '', returnTo?: string) {
+  return {
+    catalogDataVersion: /^[a-f0-9]{40}$/.test(version) ? version : '',
+    catalogReturnTo: catalogReturnTo(returnTo),
+  };
+}
+
+export function readModelNavigationState(value: unknown) {
+  const state =
+    value && typeof value === 'object'
+      ? (value as Record<string, unknown>)
+      : {};
+  return modelNavigationState(
+    typeof state.catalogDataVersion === 'string'
+      ? state.catalogDataVersion
+      : '',
+    typeof state.catalogReturnTo === 'string'
+      ? state.catalogReturnTo
+      : undefined,
+  );
+}
+
 export const recipeTabs = [
   { id: 'deployment', label: '部署配置' },
   { id: 'performance', label: '性能对照' },
@@ -14,9 +55,11 @@ export function recipeTabHref(search: string, tab: RecipeTab) {
   const params = new URLSearchParams(search);
   if (tab === 'deployment') params.delete('tab');
   else params.set('tab', tab);
-  if (params.has('returnTo'))
-    params.set('returnTo', catalogReturnTo(params.get('returnTo')));
-  return '/models/recipe?' + params.toString();
+  return recipeRoute(
+    params.get('model') ?? params.get('modelId') ?? '',
+    params.get('id') ?? params.get('recipeId') ?? '',
+    params.toString(),
+  );
 }
 
 export function catalogReturnTo(value: string | null | undefined): string {
@@ -34,8 +77,13 @@ export function catalogReturnTo(value: string | null | undefined): string {
   return url.pathname + url.search;
 }
 
-export function reportHref(r: Recipe, commit: string, returnTo?: string) {
-  return reportRoute(r.model.name, r.variant.id, commit, returnTo);
+export function reportHref(
+  r: Recipe,
+  _commit: string,
+  _returnTo?: string,
+  reportName?: string,
+) {
+  return reportRoute(r.model.name, r.variant.id, '', undefined, reportName);
 }
 
 function reportRoute(
@@ -43,10 +91,12 @@ function reportRoute(
   recipeId: string,
   dataVersion: string,
   returnTo?: string,
+  reportName?: string,
 ) {
   const params = new URLSearchParams({ modelId, recipeId });
   if (dataVersion) params.set('dataVersion', dataVersion);
   if (returnTo) params.set('returnTo', catalogReturnTo(returnTo));
+  if (reportName) params.set('report', reportName);
   return recipeTabHref(params.toString(), 'performance');
 }
 
diff --git a/src/features/catalog/useCatalog.ts b/src/features/catalog/useCatalog.ts
index 363665f..f0b7cfd 100644
--- a/src/features/catalog/useCatalog.ts
+++ b/src/features/catalog/useCatalog.ts
@@ -5,7 +5,8 @@ export function useCatalog(version = '') {
     catalog: Catalog;
     status: 'baseline' | 'loading' | 'live' | 'cached' | 'error';
     error: string;
-  }>({ catalog: baseline, status: 'baseline', error: '' });
+    currentCommit: string;
+  }>({ catalog: baseline, status: 'baseline', error: '', currentCommit: '' });
   const [retry, setRetry] = useState(0);
   useEffect(() => {
     const controller = new AbortController();
@@ -18,6 +19,7 @@ export function useCatalog(version = '') {
           setState((s) => ({
             ...s,
             status: 'error',
+            currentCommit: current.commit,
             error:
               '指定目录版本不可用。公开来源没有完整快照接口，请返回当前目录。',
           }));
@@ -26,6 +28,7 @@ export function useCatalog(version = '') {
         setState({
           catalog: selected,
           status: selected.commit === current.commit ? 'live' : 'cached',
+          currentCommit: current.commit,
           error: '',
         });
       })
diff --git a/src/pages/model.tsx b/src/pages/model.tsx
new file mode 100644
index 0000000..20aa021
--- /dev/null
+++ b/src/pages/model.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import DetailPage from '../features/catalog/DetailPage';
+
+export default function ModelDetail() {
+  return <DetailPage kind="model" />;
+}
diff --git a/src/pages/recipe.tsx b/src/pages/recipe.tsx
new file mode 100644
index 0000000..cd28e44
--- /dev/null
+++ b/src/pages/recipe.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import DetailPage from '../features/catalog/DetailPage';
+
+export default function RecipeDetail() {
+  return <DetailPage kind="recipe" />;
+}
diff --git a/src/theme/Navbar/index.tsx b/src/theme/Navbar/index.tsx
index a7fb0d8..4b3034c 100644
--- a/src/theme/Navbar/index.tsx
+++ b/src/theme/Navbar/index.tsx
@@ -96,7 +96,9 @@ export default function Navbar() {
           (
             item.href === '/'
               ? pathname === '/'
-              : pathname.startsWith(item.href)
+              : pathname.startsWith(item.href) ||
+                (item.href === '/models' &&
+                  ['/model', '/recipe'].includes(pathname))
           )
             ? 'page'
             : undefined
diff --git a/src/theme/SkipToContent/index.tsx b/src/theme/SkipToContent/index.tsx
index 6ecd892..5efaaf3 100644
--- a/src/theme/SkipToContent/index.tsx
+++ b/src/theme/SkipToContent/index.tsx
@@ -23,8 +23,8 @@ export default function SkipToContent() {
     previousLocation.current = location;
     // Catalog filters and recipe tabs update the URL in place.
     const sameRecipe =
-      pathname === '/models/recipe' &&
-      ['modelId', 'recipeId', 'dataVersion'].every(
+      ['/models/recipe', '/recipe'].includes(pathname) &&
+      ['model', 'id', 'modelId', 'recipeId', 'dataVersion'].every(
         (key) =>
           new URLSearchParams(location.search).get(key) ===
           new URLSearchParams(previous.search).get(key),
diff --git a/tests/e2e/catalog.spec.ts b/tests/e2e/catalog.spec.ts
index 39e80cc..f32f15e 100644
--- a/tests/e2e/catalog.spec.ts
+++ b/tests/e2e/catalog.spec.ts
@@ -149,7 +149,7 @@ test('source-backed list, dynamic filters, shareable queries, model/table views
   );
   await expect(best.getByRole('link')).toHaveAttribute(
     'href',
-    /recipe\?.*modelId=glm5.3.*tab=performance/,
+    /recipe\?.*model=glm5.3.*tab=performance/,
   );
   await page
     .locator('label')
@@ -230,7 +230,7 @@ for (const width of [320, 390, 768, 1280, 1440])
       const recipe = page.locator(`[data-recipe-id="${m.name}/${variant.id}"]`);
       const title = recipe.getByRole('heading', { level: 2 }).getByRole('link');
       await expect(title).toHaveText(m.displayName!);
-      await expect(title).toHaveAttribute('href', /\/models\/detail\?/);
+      await expect(title).toHaveAttribute('href', /\/model\?id=/);
       const recipeLink = recipe
         .locator('dl')
         .filter({ has: page.getByText('配方', { exact: true }) })
@@ -262,9 +262,9 @@ for (const width of [320, 390, 768, 1280, 1440])
         (await recipeLink.getAttribute('href'))!,
         'http://localhost',
       );
-      expect(recipeUrl.pathname).toBe('/models/recipe');
-      expect(recipeUrl.searchParams.get('recipeId')).toBe(variant.id);
-      expect(recipeUrl.searchParams.get('dataVersion')).toBe(baseline.commit);
+      expect(recipeUrl.pathname).toBe('/recipe');
+      expect(recipeUrl.searchParams.get('id')).toBe(variant.id);
+      expect(recipeUrl.searchParams.has('dataVersion')).toBe(false);
       expect(recipeUrl.searchParams.has('tab')).toBe(false);
       await recipeLink.click();
       await expect(
@@ -272,7 +272,7 @@ for (const width of [320, 390, 768, 1280, 1440])
       ).toBeVisible();
       await page.goBack();
       await title.click();
-      await expect(page).toHaveURL(/\/models\/detail\?/);
+      await expect(page).toHaveURL(/\/model\?id=/);
       await expect(page.getByRole('heading', { level: 1 })).toHaveText(
         m.displayName!,
       );
@@ -280,7 +280,7 @@ for (const width of [320, 390, 768, 1280, 1440])
         page
           .getByRole('heading', { level: 3 })
           .getByRole('link', { name: variant.id, exact: true }),
-      ).toHaveAttribute('href', /\/models\/recipe\?/);
+      ).toHaveAttribute('href', /\/recipe\?/);
 
       const catalog = '/models?q=glm-5.3-flash&view=models';
       await page.goto(catalog);
@@ -450,11 +450,11 @@ for (const width of [320, 390, 768, 1280, 1440])
           (await link.getAttribute('href'))!,
           'http://localhost',
         );
-        expect(url.pathname).toBe('/models/recipe');
-        expect(url.searchParams.get('recipeId')).toBe(v.id);
-        expect(url.searchParams.get('modelId')).toBe(model.name);
-        expect(url.searchParams.get('dataVersion')).toBe(baseline.commit);
-        expect(url.searchParams.get('returnTo')).toBe(catalog);
+        expect(url.pathname).toBe('/recipe');
+        expect(url.searchParams.get('id')).toBe(v.id);
+        expect(url.searchParams.get('model')).toBe(model.name);
+        expect(url.searchParams.has('dataVersion')).toBe(false);
+        expect(url.searchParams.has('returnTo')).toBe(false);
       }
       await page.goBack();
       await expect(page).toHaveURL(catalog);
@@ -484,7 +484,7 @@ test('model cards default missing fields and include models without recipes', as
   await expect(card.getByRole('list')).toHaveCount(0);
   await expect(card.getByText('未提供', { exact: true })).toHaveCount(3);
   await expect(card).not.toContainText('0.0%');
-  await expect(card.locator('a[href*="/models/recipe?"]')).toHaveCount(0);
+  await expect(card.locator('a[href*="/recipe?"]')).toHaveCount(0);
 });
 
 test('model cards preserve measured zero without a report or baseline reference', async ({
@@ -841,10 +841,13 @@ for (const layout of ['cards', 'table'])
         exact: true,
       })
       .click();
-    await expect(page).toHaveURL(/\/models\/recipe\?/);
-    expect(new URL(page.url()).searchParams.get('dataVersion')).toBe(
-      baseline.commit,
-    );
+    await expect(page).toHaveURL(/\/recipe\?/);
+    expect(new URL(page.url()).searchParams.has('dataVersion')).toBe(false);
+    expect(
+      await page.evaluate(
+        () => window.history.state?.state?.catalogDataVersion,
+      ),
+    ).toBe(baseline.commit);
     await expect(page.getByRole('heading', { level: 1 })).toHaveText(
       m.displayName?.trim() || m.name,
     );
@@ -887,7 +890,7 @@ for (const layout of ['cards', 'table'])
       page.getByLabel('搜索模型与调优', { exact: true }),
     ).toHaveValue('mimo-v2.5');
     await page.goBack();
-    await expect(page).toHaveURL(/\/models\/recipe\?.*tab=performance/);
+    await expect(page).toHaveURL(/\/recipe\?.*tab=performance/);
   });
 
 test('model recipe entries and performance gains lead into the same recipe details', async ({
@@ -900,11 +903,11 @@ test('model recipe entries and performance gains lead into the same recipe detai
     .getByRole('link', { name: 'MiMo-V2.5', exact: true })
     .first()
     .click();
-  await expect(page).toHaveURL(/\/models\/detail\?/);
+  await expect(page).toHaveURL(/\/model\?id=/);
   await page
     .getByRole('link', { name: `查看 ${variant.id} 性能对照`, exact: true })
     .click();
-  await expect(page).toHaveURL(/\/models\/recipe\?.*tab=performance/);
+  await expect(page).toHaveURL(/\/recipe\?.*tab=performance/);
   await expect(reportBody(page)).toContainText('119.9%');
   await page.getByRole('tab', { name: '部署配置' }).click();
   await expect(
@@ -931,7 +934,7 @@ test('returning from a report restores pagination and hardware filters', async (
     .getByRole('link', { name: /性能对照$/ })
     .first()
     .click();
-  await expect(page).toHaveURL(/\/models\/recipe\?.*tab=performance/);
+  await expect(page).toHaveURL(/\/recipe\?.*tab=performance/);
   await page.getByRole('link', { name: '返回模型与调优', exact: true }).click();
   expect(new URL(page.url()).pathname + new URL(page.url()).search).toBe(
     catalog,
@@ -951,7 +954,7 @@ for (const legacy of [
   }) => {
     await page.goto('/community');
     await page.goto(legacy);
-    await expect(page).toHaveURL(/\/models\/recipe\?.*tab=performance/);
+    await expect(page).toHaveURL(/\/recipe\?.*tab=performance/);
     await expect(reportBody(page)).toContainText('119.9%');
     await page.goBack();
     await expect(page).toHaveURL(/\/community$/);
@@ -1033,9 +1036,12 @@ for (const width of [320, 1440])
     await deployment.click();
     await performance.click();
     expect(counts).toEqual({ ...afterReload, report: afterReload.report + 1 });
-    expect(new URL(page.url()).searchParams.get('dataVersion')).toBe(
-      baseline.commit,
-    );
+    expect(new URL(page.url()).searchParams.has('dataVersion')).toBe(false);
+    expect(
+      await page.evaluate(
+        () => window.history.state?.state?.catalogDataVersion,
+      ),
+    ).toBe(baseline.commit);
   });
 
 for (const width of [320, 1440])
@@ -1168,7 +1174,7 @@ for (const width of [320, 1440])
       expect(requests).toBe(1);
     });
 
-test('fullscreen failure keeps the original report and standalone link available', async ({
+test('fullscreen failure keeps the original report readable in place', async ({
   page,
 }) => {
   await page.addInitScript(() => {
@@ -1182,10 +1188,10 @@ test('fullscreen failure keeps the original report and standalone link available
   await page.getByRole('button', { name: '全屏观看', exact: true }).click();
   await expect(
     page.getByRole('status').filter({ hasText: '暂时无法全屏观看' }),
-  ).toContainText('暂时无法全屏观看，请使用“查看完整报告”。');
+  ).toContainText('暂时无法全屏观看，请在下方阅读报告。');
   await expect(
-    page.getByRole('link', { name: '查看完整报告 ↗' }),
-  ).toBeVisible();
+    page.getByRole('button', { name: '查看完整报告', exact: true }),
+  ).toHaveCount(0);
   await expect(reportBody(page)).toContainText('119.9%');
   await expect(
     page.getByRole('button', { name: '全屏观看', exact: true }),
@@ -1210,10 +1216,13 @@ test('original report retries a failed request without requiring structured JSON
     page.getByRole('button', { name: '全屏观看', exact: true }),
   ).toBeDisabled();
   await expect(
-    page.getByRole('link', { name: '查看完整报告 ↗' }),
-  ).toBeVisible();
+    page.getByRole('button', { name: '全屏观看', exact: true }),
+  ).toBeDisabled();
   await page.getByRole('button', { name: '重试', exact: true }).click();
   await expect(reportBody(page)).toContainText('119.9%');
+  await expect(
+    page.getByRole('button', { name: '全屏观看', exact: true }),
+  ).toBeEnabled();
   expect(attempts).toBe(2);
 });
 
@@ -1376,7 +1385,7 @@ test('report routes distinguish incomplete, missing, unassociated and unavailabl
   );
   await expect(page.locator('#benchmark')).toHaveCount(0);
   await page.goto('/models?benchmark=missing');
-  await expect(page).toHaveURL(/\/models\/recipe\?.*tab=performance/);
+  await expect(page).toHaveURL(/\/recipe\?.*tab=performance/);
   await expect(page.getByRole('heading', { level: 1 })).toHaveText(
     '详情参数不完整',
   );
@@ -1542,8 +1551,8 @@ for (const width of [390, 1440])
           (await link.getAttribute('href'))!,
           'http://localhost',
         );
-        expect(url.searchParams.get('dataVersion')).toBe(baseline.commit);
-        expect(url.searchParams.get('returnTo')).toBe(returnTo);
+        expect(url.searchParams.has('dataVersion')).toBe(false);
+        expect(url.searchParams.has('returnTo')).toBe(false);
       }
       expect(
         await page.evaluate(
@@ -1661,7 +1670,7 @@ test('a newly published model appears in fixed routes without rebuilding the web
   await page
     .getByRole('link', { name: 'New public model', exact: true })
     .click();
-  await expect(page).toHaveURL(/\/models\/detail\?/);
+  await expect(page).toHaveURL(/\/model\?id=/);
   await expect(page.getByRole('heading', { level: 1 })).toHaveText(
     'New public model',
   );
@@ -1721,6 +1730,9 @@ test('inconsistent configuration bytes and unreadable reports do not become veri
   await page.goto(`/models/report?modelId=mimo-v2.5&recipeId=${variant.id}`);
   await expect(page.locator('#benchmark')).toContainText('报告数据加载失败');
   await expect(
-    page.getByRole('link', { name: '查看完整报告 ↗' }),
-  ).toHaveAttribute('href', /mimo-v2.5-h100-report.html/);
+    page.getByRole('button', { name: '全屏观看', exact: true }),
+  ).toBeDisabled();
+  await expect(page.locator('#benchmark a[href*="model-catalog"]')).toHaveCount(
+    0,
+  );
 });
diff --git a/tests/e2e/i18n.spec.ts b/tests/e2e/i18n.spec.ts
index b3782d8..04fdf42 100644
--- a/tests/e2e/i18n.spec.ts
+++ b/tests/e2e/i18n.spec.ts
@@ -422,9 +422,7 @@ test('English recipe details translate the two remaining tabs', async ({
     }),
   ).toHaveAttribute(
     'href',
-    new RegExp(
-      `${site('en/models/recipe')}\\?.*recipeId=sglang-tp8-h100-baseline`,
-    ),
+    new RegExp(`${site('en/recipe')}\\?.*id=sglang-tp8-h100-baseline`),
   );
   await expect(
     page.getByRole('tab', { name: 'Deployment configuration', exact: true }),
diff --git a/tests/e2e/model-url.spec.ts b/tests/e2e/model-url.spec.ts
new file mode 100644
index 0000000..f5cf6b3
--- /dev/null
+++ b/tests/e2e/model-url.spec.ts
@@ -0,0 +1,310 @@
+import { test, expect, type Page } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+import baseline from '../../content/catalog/baseline.json';
+import { parseCatalog, type Catalog } from '../../src/features/catalog/data';
+
+const model = baseline.models.find((item) => item.name === 'mimo-v2.5')!;
+const recipe = model.variants.find(
+  (item) => item.id === 'sglang-tp8-h100-optimized',
+)!;
+const yaml = readFileSync('tests/fixtures/catalog/mimo.yaml', 'utf8');
+const modelTitle = model.displayName?.trim() || model.name;
+const shortHref = `/model?id=${model.name}`;
+
+async function mockSources(
+  page: Page,
+  catalog: Catalog = parseCatalog(baseline),
+) {
+  await page.route(
+    'https://modelsphere.github.io/model-catalog/**',
+    (route) => {
+      if (route.request().url().endsWith('index-v2.json'))
+        return route.fulfill({ json: catalog });
+      if (route.request().url().endsWith('.history.json'))
+        return route.fulfill({
+          json: {
+            model: model.name,
+            id: recipe.id,
+            path: recipe.path,
+            revisions: [],
+          },
+        });
+      return route.abort();
+    },
+  );
+  await page.route(
+    'https://raw.githubusercontent.com/modelsphere/model-catalog/**',
+    (route) =>
+      route.request().url().endsWith('.yaml')
+        ? route.fulfill({ body: yaml, contentType: 'text/plain' })
+        : route.abort(),
+  );
+}
+
+async function openCatalog(page: Page, query: string) {
+  await page.goto('/models?' + query);
+  await expect(page.locator('[data-catalog-enhanced="true"]')).toBeVisible();
+  await expect(page.locator('main')).toHaveAttribute(
+    'data-catalog-status',
+    'live',
+  );
+}
+
+const catalogReturnLink = (page: Page) =>
+  page
+    .getByRole('navigation', { name: '面包屑', exact: true })
+    .getByRole('link', { name: '模型与调优', exact: true });
+
+test.beforeEach(async ({ page }) => mockSources(page));
+
+for (const view of ['models', 'recipes'])
+  for (const layout of ['cards', 'table'])
+    test(`model links use compact URLs in ${view} ${layout} results`, async ({
+      page,
+    }) => {
+      await openCatalog(page, `q=${model.name}&view=${view}&layout=${layout}`);
+      const title = page
+        .locator('main')
+        .getByRole('link', { name: modelTitle, exact: true })
+        .first();
+      await expect(title).toHaveAttribute('href', shortHref);
+      await title.click();
+      await expect(page).toHaveURL(shortHref);
+      await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+        modelTitle,
+      );
+    });
+
+test('legacy model URLs replace their history entry and retain explicit snapshots', async ({
+  page,
+}) => {
+  const catalog = `/models?q=${model.name}&layout=table&sort=name-asc`;
+  await page.goto(catalog);
+  const legacy = new URLSearchParams({
+    modelId: model.name,
+    dataVersion: baseline.commit,
+    returnTo: catalog,
+  });
+  await page.goto('/models/detail?' + legacy);
+  await expect(page).toHaveURL((url) => {
+    return (
+      url.pathname === '/model' &&
+      url.searchParams.get('id') === model.name &&
+      url.searchParams.get('dataVersion') === baseline.commit &&
+      !url.searchParams.has('modelId') &&
+      !url.searchParams.has('returnTo')
+    );
+  });
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+  await expect(catalogReturnLink(page)).toHaveAttribute('href', catalog);
+  await page.reload();
+  await expect(catalogReturnLink(page)).toHaveAttribute('href', catalog);
+  await page.goBack();
+  await expect(page).toHaveURL(catalog);
+});
+
+test('catalog return context survives model refresh, history navigation and recipe navigation', async ({
+  page,
+}) => {
+  const query = `q=${model.name}&layout=table&sort=name-asc`;
+  const catalog = '/models?' + query;
+  await openCatalog(page, query);
+  await page
+    .locator('main')
+    .getByRole('link', { name: modelTitle, exact: true })
+    .first()
+    .click();
+  await expect(page).toHaveURL(shortHref);
+  await page.reload();
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+  await expect(catalogReturnLink(page)).toHaveAttribute('href', catalog);
+  await page.goBack();
+  await expect(page).toHaveURL(catalog);
+  await page.goForward();
+  await expect(page).toHaveURL(shortHref);
+  await expect(catalogReturnLink(page)).toHaveAttribute('href', catalog);
+  await page
+    .getByRole('heading', { level: 3 })
+    .getByRole('link', { name: recipe.id, exact: true })
+    .click();
+  await expect(page.getByRole('tab', { name: '部署配置' })).toBeVisible();
+  await page.getByRole('link', { name: '返回模型与调优', exact: true }).click();
+  await expect(page).toHaveURL(catalog);
+  await expect(
+    page.getByRole('textbox', { name: '搜索模型与调优', exact: true }),
+  ).toHaveValue(model.name);
+});
+
+test('a fresh short link uses the current catalog while an existing entry retains its snapshot', async ({
+  page,
+  context,
+}) => {
+  await openCatalog(page, `q=${model.name}`);
+  await page
+    .locator('main')
+    .getByRole('link', { name: modelTitle, exact: true })
+    .first()
+    .click();
+  await expect(page).toHaveURL(shortHref);
+
+  const latest = parseCatalog(structuredClone(baseline));
+  latest.commit = 'b'.repeat(40);
+  latest.models.find((item) => item.name === model.name)!.displayName =
+    'Updated live model';
+  await page.route('**/index-v2.json', (route) =>
+    route.fulfill({ json: latest }),
+  );
+  await page.reload();
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+
+  const fresh = await context.newPage();
+  await mockSources(fresh, latest);
+  await fresh.goto(shortHref);
+  await expect(fresh.getByRole('heading', { level: 1 })).toHaveText(
+    'Updated live model',
+  );
+  await expect(catalogReturnLink(fresh)).toHaveAttribute('href', '/models');
+  await fresh.close();
+});
+
+test('runtime-only models resolve through the static short entry without a new page build', async ({
+  page,
+}) => {
+  const live = parseCatalog(structuredClone(baseline));
+  live.commit = 'b'.repeat(40);
+  live.models.push({
+    ...live.models[0],
+    name: 'runtime-only-model',
+    displayName: 'Runtime-only model',
+    variants: [],
+    tuning: [],
+    reports: [],
+    defaultVariant: undefined,
+  });
+  live.count = live.models.length;
+  await page.route('**/index-v2.json', (route) =>
+    route.fulfill({ json: live }),
+  );
+  const response = await page.goto('/model?id=runtime-only-model');
+  expect(response?.status()).toBe(200);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    'Runtime-only model',
+  );
+  await page.reload();
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    'Runtime-only model',
+  );
+});
+
+test('English model links and canonical URLs retain the locale and omit navigation context', async ({
+  page,
+}) => {
+  await page.goto(`/en/models?q=${model.name}`);
+  await expect(page.locator('[data-catalog-enhanced="true"]')).toBeVisible();
+  const title = page
+    .locator('main')
+    .getByRole('link', { name: modelTitle, exact: true })
+    .first();
+  await expect(title).toHaveAttribute('href', '/en' + shortHref);
+  await title.click();
+  await expect(page).toHaveURL('/en' + shortHref);
+  await expect(page.locator('html')).toHaveAttribute('lang', 'en');
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+  const canonical = page.locator('link[rel="canonical"]');
+  await expect(canonical).toHaveCount(1);
+  const url = new URL((await canonical.getAttribute('href'))!);
+  expect(url.pathname + url.search).toBe('/en' + shortHref);
+  expect(
+    await page
+      .locator('meta[name="robots"]')
+      .evaluateAll((elements) =>
+        elements.every((element) =>
+          element.getAttribute('content')?.includes('noindex'),
+        ),
+      ),
+  ).toBe(true);
+  await page.reload();
+  await expect(page).toHaveURL('/en' + shortHref);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+});
+
+test('switching model language preserves the catalog snapshot and filtered return path after refresh', async ({
+  page,
+}) => {
+  const query = `q=${model.name}&layout=table&sort=name-asc`;
+  const catalog = '/models?' + query;
+  await openCatalog(page, query);
+  await page
+    .locator('main')
+    .getByRole('link', { name: modelTitle, exact: true })
+    .first()
+    .click();
+  await expect(page).toHaveURL(shortHref);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+  await expect(
+    page.locator('.desktop-nav a[aria-current="page"]'),
+  ).toHaveAttribute('href', '/models');
+
+  const latest = parseCatalog(structuredClone(baseline));
+  latest.commit = 'b'.repeat(40);
+  latest.models.find((item) => item.name === model.name)!.displayName =
+    'Updated live model';
+  await page.route('**/index-v2.json', (route) =>
+    route.fulfill({ json: latest }),
+  );
+  await page.getByRole('combobox', { name: '切换语言', exact: true }).click();
+  await page.getByRole('option', { name: 'English', exact: true }).click();
+  await expect(page).toHaveURL('/en' + shortHref);
+  await expect(page.locator('html')).toHaveAttribute('lang', 'en');
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+  await expect(
+    page.locator('.desktop-nav a[aria-current="page"]'),
+  ).toHaveAttribute('href', '/en/models');
+
+  await page.reload();
+  await expect(page).toHaveURL('/en' + shortHref);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(modelTitle);
+  const returnLink = page.locator('main nav').first().getByRole('link').first();
+  await expect(returnLink).toHaveAttribute('href', '/en' + catalog);
+  await returnLink.click();
+  await expect(page).toHaveURL('/en' + catalog);
+  await expect(page.locator('main').getByRole('textbox').first()).toHaveValue(
+    model.name,
+  );
+});
+
+test('explicit unavailable snapshots remain errors instead of silently opening the latest model', async ({
+  page,
+}) => {
+  const snapshot = 'a'.repeat(40);
+  await page.goto(shortHref + '&dataVersion=' + snapshot);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '目录版本不可用',
+  );
+  expect(new URL(page.url()).searchParams.get('dataVersion')).toBe(snapshot);
+  await page.goto(
+    `/models/detail?modelId=${model.name}&dataVersion=${snapshot}`,
+  );
+  await expect(page).toHaveURL(shortHref + '&dataVersion=' + snapshot);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '目录版本不可用',
+  );
+});
+
+test('missing identifiers and unsafe legacy return URLs retain safe fallback behavior', async ({
+  page,
+}) => {
+  await page.goto('/models/detail');
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '详情参数不完整',
+  );
+  await page.goto('/model');
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '详情参数不完整',
+  );
+  await page.goto(
+    `/models/detail?modelId=${model.name}&returnTo=https%3A%2F%2Fevil.test%2Fmodels`,
+  );
+  await expect(page).toHaveURL(shortHref);
+  await expect(catalogReturnLink(page)).toHaveAttribute('href', '/models');
+});
diff --git a/tests/e2e/recipe-overview.spec.ts b/tests/e2e/recipe-overview.spec.ts
index b4615ea..b481400 100644
--- a/tests/e2e/recipe-overview.spec.ts
+++ b/tests/e2e/recipe-overview.spec.ts
@@ -162,14 +162,25 @@ for (const width of [320, 1440])
         (await baselineLink.getAttribute('href'))!,
         'http://localhost',
       );
-      expect(target.searchParams.get('recipeId')).toBe(
-        'sglang-tp8-b300-baseline',
-      );
+      expect(target.searchParams.get('id')).toBe('sglang-tp8-b300-baseline');
       expect(target.searchParams.get('version')).toBe('1.0.4');
-      expect(target.searchParams.get('dataVersion')).toBe(baseline.commit);
-      await expect(
-        comparison.getByRole('link', { name: '完整对照报告 ↗' }),
-      ).toHaveAttribute('href', /glm5\.3-1\.0\.3-b300-report\.html#zh$/);
+      expect(target.searchParams.has('dataVersion')).toBe(false);
+      const fullReportLink = comparison.getByRole('link', {
+        name: '完整对照报告',
+        exact: true,
+      });
+      const fullReportTarget = new URL(
+        (await fullReportLink.getAttribute('href'))!,
+        'http://localhost',
+      );
+      expect(fullReportTarget.pathname).toBe('/recipe');
+      expect(fullReportTarget.searchParams.get('report')).toBe(
+        'glm5.3-1.0.3-b300-report.html',
+      );
+      expect(fullReportTarget.searchParams.has('dataVersion')).toBe(false);
+      expect(fullReportTarget.searchParams.get('tab')).toBe('performance');
+      expect(fullReportTarget.hash).toBe('#benchmark-title');
+      await expect(fullReportLink).not.toHaveAttribute('target', '_blank');
       expect(reportRequests).toBe(0);
       const meterAppearance = async (meter: ReturnType<Page['locator']>) =>
         meter.evaluate((element) => ({
@@ -198,6 +209,25 @@ for (const width of [320, 1440])
       await overview(page).screenshot({
         path: info.outputPath(`recipe-overview-${width}-${theme}.png`),
       });
+      await fullReportLink.click();
+      const reportTitle = page.getByRole('heading', {
+        name: '基线与调优对照',
+        exact: true,
+      });
+      await expect(reportTitle).toBeFocused();
+      await expect(
+        page.getByRole('tab', { name: '性能对照', selected: true }),
+      ).toBeVisible();
+      await expect
+        .poll(async () => (await reportTitle.boundingBox())!.y)
+        .toBeGreaterThanOrEqual(0);
+      await expect
+        .poll(async () => (await reportTitle.boundingBox())!.y)
+        .toBeLessThan(300);
+      // Clicking the same report again should return focus to it as well.
+      await fullReportLink.click();
+      await expect(reportTitle).toBeFocused();
+      await page.getByRole('tab', { name: '部署配置', exact: true }).click();
       await baselineLink.click();
       await expect(page.getByRole('heading', { level: 1 })).toHaveText(
         'GLM 5.3 (NVFP4)',
diff --git a/tests/e2e/recipe-url.spec.ts b/tests/e2e/recipe-url.spec.ts
new file mode 100644
index 0000000..0d4e5a6
--- /dev/null
+++ b/tests/e2e/recipe-url.spec.ts
@@ -0,0 +1,144 @@
+import { test, expect } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+import baseline from '../../content/catalog/baseline.json';
+
+const model = baseline.models.find((item) => item.name === 'mimo-v2.5')!;
+const recipe = model.variants.find(
+  (item) => item.id === 'sglang-tp8-h100-optimized',
+)!;
+const title = model.displayName!;
+const href = `/recipe?model=${model.name}&id=${recipe.id}`;
+const catalog = `/models?q=${model.name}&layout=table`;
+const yaml = readFileSync('tests/fixtures/catalog/mimo.yaml', 'utf8');
+
+test.beforeEach(async ({ page }) => {
+  await page.route(
+    'https://modelsphere.github.io/model-catalog/**',
+    (route) => {
+      if (route.request().url().endsWith('index-v2.json'))
+        return route.fulfill({ json: baseline });
+      if (route.request().url().endsWith('.history.json'))
+        return route.fulfill({
+          json: {
+            model: model.name,
+            id: recipe.id,
+            path: recipe.path,
+            revisions: [],
+          },
+        });
+      return route.abort();
+    },
+  );
+  await page.route(
+    'https://raw.githubusercontent.com/modelsphere/model-catalog/**',
+    (route) =>
+      route.request().url().endsWith('.yaml')
+        ? route.fulfill({ body: yaml, contentType: 'text/plain' })
+        : route.abort(),
+  );
+});
+
+test('legacy recipe links shorten and keep filters through refresh and tab changes', async ({
+  page,
+}) => {
+  const params = new URLSearchParams({
+    modelId: model.name,
+    recipeId: recipe.id,
+    dataVersion: baseline.commit,
+    returnTo: catalog,
+  });
+  await page.goto('/models/recipe?' + params);
+  await expect(page).toHaveURL(href);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(title);
+  const returnLink = page.getByRole('link', {
+    name: '返回模型与调优',
+    exact: true,
+  });
+  await expect(returnLink).toHaveAttribute('href', catalog);
+  await page.reload();
+  await expect(returnLink).toHaveAttribute('href', catalog);
+  await page.getByRole('tab', { name: '性能对照', exact: true }).click();
+  await expect(page).toHaveURL(href + '&tab=performance');
+  await expect(returnLink).toHaveAttribute('href', catalog);
+  await page.getByRole('tab', { name: '部署配置', exact: true }).click();
+  await expect(page).toHaveURL(href);
+  await page.reload();
+  await returnLink.click();
+  await expect(page).toHaveURL(catalog);
+});
+
+test('catalog recipe clicks carry filters while copied short links open independently', async ({
+  page,
+  context,
+}) => {
+  await page.goto(catalog);
+  await expect(page.locator('main')).toHaveAttribute(
+    'data-catalog-status',
+    'live',
+  );
+  const link = page
+    .locator('main')
+    .getByRole('link', { name: recipe.id, exact: true })
+    .first();
+  await expect(link).toHaveAttribute('href', href);
+  await link.click();
+  await expect(page).toHaveURL(href);
+  await expect(
+    page.getByRole('link', { name: '返回模型与调优', exact: true }),
+  ).toHaveAttribute('href', catalog);
+  await page.reload();
+  await expect(
+    page.getByRole('link', { name: '返回模型与调优', exact: true }),
+  ).toHaveAttribute('href', catalog);
+  const fresh = await context.newPage();
+  await fresh.route('**/index-v2.json', (route) =>
+    route.fulfill({ json: baseline }),
+  );
+  const response = await fresh.goto(href);
+  expect(response?.status()).toBe(200);
+  await expect(fresh.getByRole('heading', { level: 1 })).toHaveText(title);
+  await expect(
+    fresh.getByRole('link', { name: '返回模型与调优', exact: true }),
+  ).toHaveAttribute('href', '/models');
+  await fresh.close();
+});
+
+test('explicit unavailable recipe snapshots remain in the URL and show an error', async ({
+  page,
+}) => {
+  const snapshot = 'a'.repeat(40);
+  await page.goto(
+    `/models/recipe?modelId=${model.name}&recipeId=${recipe.id}&dataVersion=${snapshot}`,
+  );
+  await expect(page).toHaveURL(href + '&dataVersion=' + snapshot);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+    '目录版本不可用',
+  );
+});
+
+test('legacy links to a newer live catalog also remove its snapshot from the share URL', async ({
+  page,
+}) => {
+  const current = {
+    ...baseline,
+    commit: 'c7434c8600284fc48e2831ba959e021ba3d760c5',
+  };
+  await page.route('**/index-v2.json', (route) =>
+    route.fulfill({ json: current }),
+  );
+  const params = new URLSearchParams({
+    modelId: model.name,
+    recipeId: recipe.id,
+    dataVersion: current.commit,
+    returnTo: catalog,
+  });
+  await page.goto('/models/recipe?' + params);
+  await expect(page).toHaveURL(href);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(title);
+  await expect(
+    page.getByRole('link', { name: '返回模型与调优', exact: true }),
+  ).toHaveAttribute('href', catalog);
+  await page.reload();
+  await expect(page).toHaveURL(href);
+  await expect(page.getByRole('heading', { level: 1 })).toHaveText(title);
+});
diff --git a/tests/e2e/report-language.spec.ts b/tests/e2e/report-language.spec.ts
index 83da22d..9cd9f6c 100644
--- a/tests/e2e/report-language.spec.ts
+++ b/tests/e2e/report-language.spec.ts
@@ -1,6 +1,7 @@
 import { test, expect, type Page } from '@playwright/test';
 import { readFileSync } from 'node:fs';
 import baseline from '../../content/catalog/baseline.json';
+import { parseCatalog, type Catalog } from '../../src/features/catalog/data';
 
 const bilingual = readFileSync(
   'tests/fixtures/catalog/bilingual-report.html',
@@ -8,14 +9,20 @@ const bilingual = readFileSync(
 );
 const yaml = readFileSync('tests/fixtures/catalog/mimo.yaml', 'utf8');
 const query = `?modelId=mimo-v2.5&recipeId=sglang-tp8-h100-optimized&dataVersion=${baseline.commit}&returnTo=%2Fmodels%3Ffamily%3Dmimo&tab=performance`;
+const shortHref =
+  '/recipe?model=mimo-v2.5&id=sglang-tp8-h100-optimized&tab=performance';
 const fallback =
   'This report is unavailable in the selected language. Showing the original report.';
 const frame = (page: Page) => page.frameLocator('#benchmark-report');
 
-async function mockSources(page: Page, html: string) {
+async function mockSources(
+  page: Page,
+  html: string,
+  catalog: Catalog = parseCatalog(baseline),
+) {
   await page.route('https://modelsphere.github.io/model-catalog/**', (route) =>
     route.request().url().endsWith('index-v2.json')
-      ? route.fulfill({ json: baseline })
+      ? route.fulfill({ json: catalog })
       : route.fulfill({ json: { revisions: [] } }),
   );
   await page.route(
@@ -65,10 +72,13 @@ test('embedded performance report follows both portal language switches and reta
     frame(page).getByRole('heading', { name: '中文性能报告' }),
   ).toBeVisible();
   await expect(
-    page.getByRole('link', { name: '查看完整报告 ↗', exact: true }),
-  ).toHaveAttribute('href', /#zh$/);
+    page.getByRole('button', { name: '查看完整报告', exact: true }),
+  ).toHaveCount(0);
+  await expect(
+    page.getByRole('button', { name: '全屏观看', exact: true }),
+  ).toBeEnabled();
   await chooseLanguage(page, 'English');
-  await expect(page).toHaveURL('/en/models/recipe' + query);
+  await expect(page).toHaveURL('/en' + shortHref);
   await expect(frame(page).locator('html')).toHaveAttribute('lang', 'en');
   await expect(
     frame(page).getByRole('heading', { name: 'English performance report' }),
@@ -76,8 +86,8 @@ test('embedded performance report follows both portal language switches and reta
   await expect(frame(page).locator('#gain')).toHaveText('119.9%');
   await expect(page.getByText(fallback, { exact: true })).toHaveCount(0);
   await expect(
-    page.getByRole('link', { name: 'View full report ↗', exact: true }),
-  ).toHaveAttribute('href', /#en$/);
+    page.getByRole('button', { name: 'View full report', exact: true }),
+  ).toHaveCount(0);
   await expect(page.locator('#benchmark-report')).toHaveAttribute(
     'sandbox',
     'allow-scripts',
@@ -96,7 +106,7 @@ test('embedded performance report follows both portal language switches and reta
     frame(page).getByRole('heading', { name: '中文性能报告' }),
   ).toBeVisible();
   await chooseLanguage(page, '简体中文');
-  await expect(page).toHaveURL('/models/recipe' + query);
+  await expect(page).toHaveURL(shortHref);
   await expect(frame(page).locator('html')).toHaveAttribute('lang', 'zh-CN');
 });
 
@@ -126,8 +136,8 @@ for (const [name, html] of [
     ).toBeVisible();
     await expect(page.getByText(fallback, { exact: true })).toBeVisible();
     await expect(
-      page.getByRole('link', { name: 'View full report ↗', exact: true }),
-    ).toHaveAttribute('href', /#zh$/);
+      page.getByRole('button', { name: 'Fullscreen', exact: true }),
+    ).toBeEnabled();
   });
 }
 
@@ -148,10 +158,94 @@ test('English-only report stays readable when the portal switches to Chinese', a
     page.getByText('该报告暂无当前语言版本，已显示原始报告。'),
   ).toBeVisible();
   await expect(
-    page.getByRole('link', { name: '查看完整报告 ↗', exact: true }),
-  ).toHaveAttribute('href', /#en$/);
+    page.getByRole('button', { name: '全屏观看', exact: true }),
+  ).toBeEnabled();
 });
 
+test('each comparison opens its matching report in the website and remains selected after reload', async ({
+  page,
+}) => {
+  const catalog = parseCatalog(structuredClone(baseline));
+  const model = catalog.models.find((item) => item.name === 'mimo-v2.5')!;
+  const original = model.tuning.find((item) =>
+    item.optimized.startsWith('sglang-tp8-h100-optimized@'),
+  )!;
+  const secondReport = 'second-comparison-report.html';
+  model.reports.push(secondReport);
+  model.tuning.push({
+    ...original,
+    baseline: 'sglang-tp8-h100-baseline@0.9.0',
+    report: secondReport,
+    workloads: [],
+    uplift: 1,
+  });
+  await mockSources(page, bilingual, catalog);
+  await page.route('**/second-comparison-report.html', (route) =>
+    route.fulfill({
+      body: '<!doctype html><html lang="zh-CN"><body><h1>第二份性能报告</h1></body></html>',
+      contentType: 'text/html',
+    }),
+  );
+  await page.goto('/models/recipe' + query.replace('&tab=performance', ''));
+  const reportLink = page.locator(
+    'a[href*="report=second-comparison-report.html"]',
+  );
+  await expect(reportLink).toBeVisible();
+  await expect(reportLink).not.toHaveAttribute('target', '_blank');
+  await reportLink.click();
+  await expect(
+    frame(page).getByRole('heading', { name: '第二份性能报告' }),
+  ).toBeVisible();
+  await expect(page.getByLabel('性能报告', { exact: true })).toHaveValue(
+    secondReport,
+  );
+  const selectedUrl = page.url();
+  await page.reload();
+  await expect(
+    frame(page).getByRole('heading', { name: '第二份性能报告' }),
+  ).toBeVisible();
+  expect(page.url()).toBe(selectedUrl);
+  await page
+    .getByLabel('性能报告', { exact: true })
+    .selectOption(original.report!);
+  await expect(
+    frame(page).getByRole('heading', { name: '中文性能报告' }),
+  ).toBeVisible();
+  expect(new URL(page.url()).searchParams.get('report')).toBe(original.report);
+  expect(new URL(page.url()).searchParams.has('dataVersion')).toBe(false);
+  expect(
+    await page.evaluate(() => window.history.state?.state?.catalogDataVersion),
+  ).toBe(baseline.commit);
+});
+
+for (const width of [390, 1440]) {
+  test(`report stays readable at ${width}px when native fullscreen is unavailable`, async ({
+    page,
+  }) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.addInitScript(() => {
+      HTMLElement.prototype.requestFullscreen = () =>
+        Promise.reject(new Error('Unavailable'));
+    });
+    await mockSources(page, bilingual);
+    await page.goto('/models/recipe' + query);
+    await expect(
+      frame(page).getByRole('heading', { name: '中文性能报告' }),
+    ).toBeVisible();
+    await page.getByRole('button', { name: '全屏观看', exact: true }).click();
+    await expect(
+      page.getByRole('status').filter({ hasText: '暂时无法全屏观看' }),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: '查看完整报告', exact: true }),
+    ).toHaveCount(0);
+    await expect(page.getByRole('dialog')).toHaveCount(0);
+    await expect(
+      frame(page).getByRole('heading', { name: '中文性能报告' }),
+    ).toBeVisible();
+  });
+}
+
 test('language metadata retains assets and cannot inject HTML when reserialized', async ({
   page,
 }) => {
diff --git a/tests/pages/deployment.spec.ts b/tests/pages/deployment.spec.ts
index 4c70e06..67ae02e 100644
--- a/tests/pages/deployment.spec.ts
+++ b/tests/pages/deployment.spec.ts
@@ -133,7 +133,7 @@ test('catalog filters, recipe tabs, legacy redirects and return links preserve t
   ).toContainText('119.9%');
   await page.getByRole('tab', { name: '部署配置' }).click();
   await expect(page).toHaveURL(
-    (url) => url.pathname === `${prefix}models/recipe` && url.search.length > 0,
+    (url) => url.pathname === `${prefix}recipe` && url.search.length > 0,
   );
   await expect(
     page.getByRole('tab', { name: '部署配置', selected: true }),
@@ -159,7 +159,7 @@ test('catalog filters, recipe tabs, legacy redirects and return links preserve t
   await page.goto(`models/report?${params}`);
   await expect(page).toHaveURL(
     (url) =>
-      url.pathname === `${prefix}models/recipe` &&
+      url.pathname === `${prefix}recipe` &&
       url.searchParams.get('tab') === 'performance',
   );
   await expect(
@@ -178,6 +178,8 @@ test('direct documents, blog routes, 404 responses and version metadata work und
   for (const route of [
     'docs',
     'blog',
+    'model?id=mimo-v2.5',
+    'en/model?id=mimo-v2.5',
     'models/detail?modelId=mimo-v2.5',
     'models/evidence',
     'community',
diff --git a/tests/unit/catalog.test.ts b/tests/unit/catalog.test.ts
index 47259dd..5a3099f 100644
--- a/tests/unit/catalog.test.ts
+++ b/tests/unit/catalog.test.ts
@@ -523,12 +523,12 @@ describe('unified recipe navigation', () => {
       reportHref(recipe, baseline.commit, returnTo),
       'https://site.test',
     );
-    expect(url.pathname).toBe('/models/recipe');
+    expect(url.pathname).toBe('/recipe');
     expect(url.searchParams.get('tab')).toBe('performance');
-    expect(url.searchParams.get('modelId')).toBe(recipe.model.name);
-    expect(url.searchParams.get('recipeId')).toBe(recipe.variant.id);
-    expect(url.searchParams.get('dataVersion')).toBe(baseline.commit);
-    expect(url.searchParams.get('returnTo')).toBe(returnTo);
+    expect(url.searchParams.get('model')).toBe(recipe.model.name);
+    expect(url.searchParams.get('id')).toBe(recipe.variant.id);
+    expect(url.searchParams.has('dataVersion')).toBe(false);
+    expect(url.searchParams.has('returnTo')).toBe(false);
     expect(url.searchParams.has('benchmark')).toBe(false);
   });
   it('only restores catalog queries and removes legacy report selection', () => {
@@ -555,9 +555,9 @@ describe('unified recipe navigation', () => {
       )!,
       'https://site.test',
     );
-    expect(url.pathname).toBe('/models/recipe');
+    expect(url.pathname).toBe('/recipe');
     expect(url.searchParams.get('tab')).toBe('performance');
-    expect(url.searchParams.get('recipeId')).toBe(recipe.variant.id);
+    expect(url.searchParams.get('id')).toBe(recipe.variant.id);
     expect(url.searchParams.get('returnTo')).toBe(
       '/models?q=mimo&page=2&dataVersion=' + baseline.commit,
     );
@@ -566,8 +566,8 @@ describe('unified recipe navigation', () => {
       legacyCatalogReportHref('?benchmark=unknown')!,
       'https://site.test',
     );
-    expect(missing.searchParams.get('modelId')).toBe('unknown');
-    expect(missing.searchParams.get('recipeId')).toBe('');
+    expect(missing.searchParams.get('model')).toBe('unknown');
+    expect(missing.searchParams.get('id')).toBe('');
   });
   it('redirects legacy recipe report anchors while retaining the selected configuration version', () => {
     const search =
@@ -577,7 +577,7 @@ describe('unified recipe navigation', () => {
       legacyRecipeReportHref(search, '#benchmark')!,
       'https://site.test',
     );
-    expect(url.pathname).toBe('/models/recipe');
+    expect(url.pathname).toBe('/recipe');
     expect(url.searchParams.get('tab')).toBe('performance');
     expect(url.searchParams.get('dataVersion')).toBe(baseline.commit);
     expect(url.searchParams.get('version')).toBe('1.0.0');
@@ -597,8 +597,12 @@ describe('unified recipe navigation', () => {
         'https://site.test',
       );
       expect(recipeTab(url.searchParams.get('tab'))).toBe(tab);
-      for (const [key, value] of params)
-        expect(url.searchParams.get(key)).toBe(value);
+      expect(url.searchParams.get('model')).toBe(recipe.model.name);
+      expect(url.searchParams.get('id')).toBe(recipe.variant.id);
+      expect(url.searchParams.has('modelId')).toBe(false);
+      expect(url.searchParams.has('recipeId')).toBe(false);
+      for (const key of ['version', 'dataVersion', 'returnTo'])
+        expect(url.searchParams.get(key)).toBe(params.get(key));
     }
     expect(recipeTab('unknown')).toBe('deployment');
     expect(recipeTab('history')).toBe('deployment');
diff --git a/tests/unit/model-url.test.ts b/tests/unit/model-url.test.ts
new file mode 100644
index 0000000..9cf0422
--- /dev/null
+++ b/tests/unit/model-url.test.ts
@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { baseline, modelHref } from '../../src/features/catalog/data';
+import {
+  modelNavigationState,
+  modelRoute,
+  readModelNavigationState,
+} from '../../src/features/catalog/routes';
+
+describe('shareable model addresses and private navigation context', () => {
+  it('keeps model identity in a stable short address without exposing list filters', () => {
+    const model = baseline.models[0];
+    const href = modelHref(
+      model,
+      baseline.commit,
+      '/models?q=private-search&vendor=ascend&page=2',
+    );
+    expect(href).toBe(`/model?id=${model.name}`);
+    expect(href).not.toContain('private-search');
+    expect(href).not.toContain(baseline.commit);
+    expect(modelRoute(model.name, baseline.commit)).toBe(
+      `${href}&dataVersion=${baseline.commit}`,
+    );
+  });
+
+  it('round trips the list and pinned snapshot separately from a shareable URL', () => {
+    const returnTo = '/models?vendor=ascend&layout=table&page=2';
+    const state = modelNavigationState(baseline.commit, returnTo);
+    expect(readModelNavigationState(JSON.parse(JSON.stringify(state)))).toEqual(
+      {
+        catalogDataVersion: baseline.commit,
+        catalogReturnTo: returnTo,
+      },
+    );
+    expect(readModelNavigationState(undefined)).toEqual({
+      catalogDataVersion: '',
+      catalogReturnTo: '/models',
+    });
+  });
+
+  it('rejects unsafe return locations and malformed history snapshot values', () => {
+    for (const returnTo of ['https://evil.test/models', '//evil.test/models']) {
+      expect(
+        readModelNavigationState({
+          catalogReturnTo: returnTo,
+          catalogDataVersion: 'master',
+        }),
+      ).toEqual({ catalogReturnTo: '/models', catalogDataVersion: '' });
+    }
+    expect(readModelNavigationState({ catalogReturnTo: 42 })).toEqual({
+      catalogDataVersion: '',
+      catalogReturnTo: '/models',
+    });
+  });
+});
diff --git a/tests/unit/recipe-url.test.ts b/tests/unit/recipe-url.test.ts
new file mode 100644
index 0000000..89828ff
--- /dev/null
+++ b/tests/unit/recipe-url.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from 'vitest';
+import {
+  baseline,
+  detailHref,
+  recipesOf,
+} from '../../src/features/catalog/data';
+import {
+  recipeRoute,
+  recipeTabHref,
+  reportHref,
+} from '../../src/features/catalog/routes';
+
+const recipe = recipesOf(baseline).find(
+  (r) => r.key === 'glm5.3/sglang-tp4-b300-optimized',
+)!;
+const href = '/recipe?model=glm5.3&id=sglang-tp4-b300-optimized';
+
+describe('shareable recipe addresses', () => {
+  it('omits the catalog snapshot and list filters from normal deployment links', () => {
+    expect(
+      detailHref(
+        recipe,
+        baseline.commit,
+        undefined,
+        '/models?q=private&layout=table',
+      ),
+    ).toBe(href);
+    expect(detailHref(recipe, baseline.commit, '1.0.4')).toBe(
+      href + '&version=1.0.4',
+    );
+  });
+
+  it('keeps model identity because recipe identifiers repeat across models', () => {
+    const repeated = recipesOf(baseline).filter(
+      (r) => r.variant.id === 'sglang-tp8-h100-optimized',
+    );
+    expect(repeated.length).toBeGreaterThan(1);
+    expect(
+      new Set(repeated.map((r) => detailHref(r, baseline.commit))).size,
+    ).toBe(repeated.length);
+  });
+
+  it('retains selected reports and configuration versions across tabs', () => {
+    const report = reportHref(
+      recipe,
+      baseline.commit,
+      '/models?q=private',
+      'glm5.3-1.0.3-b300-report.html',
+    );
+    const url = new URL(report, 'https://site.test');
+    expect(
+      url.pathname +
+        '?model=' +
+        url.searchParams.get('model') +
+        '&id=' +
+        url.searchParams.get('id'),
+    ).toBe(href);
+    expect(url.searchParams.get('report')).toBe(
+      'glm5.3-1.0.3-b300-report.html',
+    );
+    expect(url.searchParams.get('tab')).toBe('performance');
+    expect(url.searchParams.has('dataVersion')).toBe(false);
+    expect(url.searchParams.has('returnTo')).toBe(false);
+    const historical = recipeRoute(
+      recipe.model.name,
+      recipe.variant.id,
+      'version=1.0.4&tab=performance&report=selected.html',
+    );
+    expect(
+      recipeTabHref(
+        new URL(historical, 'https://site.test').search,
+        'deployment',
+      ),
+    ).toBe(href + '&version=1.0.4&report=selected.html');
+  });
+});
diff --git a/tests/unit/report.test.ts b/tests/unit/report.test.ts
index aca896a..0c0ea4d 100644
--- a/tests/unit/report.test.ts
+++ b/tests/unit/report.test.ts
@@ -3,9 +3,12 @@ import {
   baseline,
   recipesOf,
   reportUrl,
+  type Recipe,
 } from '../../src/features/catalog/data';
 import {
+  availableReportTunings,
   loadReportDocument,
+  selectReportTuning,
   selectReportLanguage,
 } from '../../src/features/catalog/report';
 
@@ -67,6 +70,77 @@ describe('report language selection', () => {
 });
 
 describe('original report loading', () => {
+  const secondReport = 'second-comparison-report.html';
+  const multiple: Recipe = {
+    ...recipe,
+    model: {
+      ...recipe.model,
+      reports: [...recipe.model.reports, secondReport],
+    },
+    tuning: [
+      ...recipe.tuning,
+      {
+        ...recipe.tuning[0],
+        baseline: 'another-baseline@1',
+        report: secondReport,
+      },
+    ],
+  };
+
+  it('selects each available comparison and skips missing or duplicate report entries', () => {
+    const withMissing: Recipe = {
+      ...multiple,
+      tuning: [
+        { ...multiple.tuning[0], report: undefined },
+        ...multiple.tuning,
+        multiple.tuning[0],
+        { ...multiple.tuning[0], report: 'not-in-model.html' },
+      ],
+    };
+    expect(availableReportTunings(withMissing)).toHaveLength(2);
+    expect(selectReportTuning(withMissing)?.report).toBe(
+      recipe.tuning[0].report,
+    );
+    expect(selectReportTuning(withMissing, secondReport)?.baseline).toBe(
+      'another-baseline@1',
+    );
+    expect(
+      selectReportTuning(withMissing, 'not-in-model.html'),
+    ).toBeUndefined();
+  });
+
+  it('loads the requested comparison from the same immutable snapshot', async () => {
+    const fetch = vi
+      .fn()
+      .mockResolvedValue(
+        new Response('<html><body>Second report</body></html>'),
+      );
+    vi.stubGlobal('fetch', fetch);
+    await loadReportDocument(
+      multiple,
+      baseline.commit,
+      undefined,
+      secondReport,
+    );
+    expect(fetch.mock.calls[0][0]).toContain(
+      `/${baseline.commit}/models/mimo-v2.5/${secondReport}`,
+    );
+  });
+
+  it('rejects report names outside this recipe before issuing a request', async () => {
+    const fetch = vi.fn();
+    vi.stubGlobal('fetch', fetch);
+    await expect(
+      loadReportDocument(
+        multiple,
+        baseline.commit,
+        undefined,
+        'other-report.html',
+      ),
+    ).rejects.toThrow('未关联性能报告');
+    expect(fetch).not.toHaveBeenCalled();
+  });
+
   it('retains the immutable catalog snapshot', async () => {
     const html = '<html><body>Original report</body></html>';
     const fetch = vi.fn().mockResolvedValue(new Response(html));

From 8e813b9dc2f15d6483e745e4c85cd2a3374cfc7b Mon Sep 17 00:00:00 2001
From: tanhuan <tanhuan@4paradigm.com>
Date: Tue, 10 Nov 2026 17:34:53 +0800
Subject: [PATCH 2/2] fix: stabilize catalog history and report navigation

---
 src/features/catalog/DetailPage.tsx         |  4 +++-
 src/features/catalog/ReportPanel.module.css |  5 +++++
 src/features/catalog/ReportPanel.tsx        | 19 +++++++++++--------
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/features/catalog/DetailPage.tsx b/src/features/catalog/DetailPage.tsx
index af6c325..9960d50 100644
--- a/src/features/catalog/DetailPage.tsx
+++ b/src/features/catalog/DetailPage.tsx
@@ -63,7 +63,9 @@ function DetailContent({ kind }: { kind: 'model' | 'recipe' }) {
   const browser = useIsBrowser(),
     location = useLocation(),
     history = useHistory();
-  const navigation = readModelNavigationState(location.state);
+  const navigation = readModelNavigationState(
+    browser ? location.state : undefined,
+  );
   const params = new URLSearchParams(browser ? location.search : ''),
     modelId =
       (kind === 'model' ? params.get('id') : params.get('model')) ??
diff --git a/src/features/catalog/ReportPanel.module.css b/src/features/catalog/ReportPanel.module.css
index 976620e..45e03af 100644
--- a/src/features/catalog/ReportPanel.module.css
+++ b/src/features/catalog/ReportPanel.module.css
@@ -15,3 +15,8 @@
   background: var(--color-background-surface);
   color: var(--color-text-primary);
 }
+
+.reportPlaceholder {
+  min-height: max(80vh, 640px);
+  margin: 0;
+}
diff --git a/src/features/catalog/ReportPanel.tsx b/src/features/catalog/ReportPanel.tsx
index aabf0f4..fea3d10 100644
--- a/src/features/catalog/ReportPanel.tsx
+++ b/src/features/catalog/ReportPanel.tsx
@@ -134,12 +134,15 @@ export default function ReportPanel({
             {tuning?.baseline} → {tuning?.optimized}
           </p>
           {tunings.length > 1 && (
-            <label className={reportStyles.reportPicker}>
-              {translate({
-                id: 'catalog.report.chooseComparison',
-                message: english ? 'Performance report' : '性能报告',
-              })}
+            <div className={reportStyles.reportPicker}>
+              <label htmlFor="benchmark-report-select">
+                {translate({
+                  id: 'catalog.report.chooseComparison',
+                  message: english ? 'Performance report' : '性能报告',
+                })}
+              </label>
               <select
+                id="benchmark-report-select"
                 value={tuning?.report ?? ''}
                 onChange={(event) => {
                   const params = new URLSearchParams(location.search);
@@ -161,7 +164,7 @@ export default function ReportPanel({
                   </option>
                 ))}
               </select>
-            </label>
+            </div>
           )}
         </div>
         <div className={styles.reportActions}>
@@ -207,14 +210,14 @@ export default function ReportPanel({
         </p>
       )}
       {error ? (
-        <p role="status">
+        <p className={reportStyles.reportPlaceholder} role="status">
           {error}{' '}
           <button onClick={() => setRetry((n) => n + 1)}>
             {translate({ id: 'site.b8784c8dd563', message: '重试' })}
           </button>
         </p>
       ) : !data ? (
-        <p role="status">
+        <p className={reportStyles.reportPlaceholder} role="status">
           {translate({ id: 'site.ab325d7067a1', message: '正在读取报告数据…' })}
         </p>
       ) : (