diff --git a/.gitignore b/.gitignore
index 73c72150..85176b47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,10 @@
 .DS_Store
-dist/
+# Anchored to the repository root. Written as a bare `dist/` it matched at any
+# depth, and because excluding a directory stops git from descending into it, the
+# `!frontend/dist/.keep` exception two lines down could never take effect — so
+# the .keep that manifest_embed.go's `go:embed all:frontend/dist` needs was
+# silently absent from every clone.
+/dist/
 release/
 frontend/node_modules/
 frontend/dist/*
diff --git a/frontend/.gitignore b/frontend/.gitignore
index 5453c76f..c046ff1a 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -1,5 +1,11 @@
 node_modules/
-dist/
+# The bundle is ignored but dist/.keep is not: manifest_embed.go carries a
+# `go:embed all:frontend/dist`, which does not compile when the directory is
+# absent, so a fresh clone could not `go build` or `go vet` before Vite had run.
+# Listed per-entry rather than as `dist/` because excluding the directory itself
+# stops git descending into it, which would make the exception unreachable.
+dist/*
+!dist/.keep
 coverage/
 test-results/
 playwright-report/
diff --git a/frontend/dist/.keep b/frontend/dist/.keep
new file mode 100644
index 00000000..e69de29b
diff --git a/internal/process/process.go b/internal/process/process.go
index da52b898..b722193c 100644
--- a/internal/process/process.go
+++ b/internal/process/process.go
@@ -13,6 +13,7 @@ import (
 	"os/exec"
 	"sort"
 	"strings"
+	"sync"
 	"time"
 )
 
@@ -32,6 +33,12 @@ type Output struct {
 	Text   string   `json:"text,omitempty"`
 }
 
+// OutputListener receives each accepted chunk of a command's output.
+//
+// Calls are serialised: stdout and stderr are copied by separate goroutines, so
+// a listener would otherwise be entered concurrently, and every caller would
+// have to synchronise on its own. Implementations may append to a slice or write
+// to a channel without locking.
 type OutputListener func(Output)
 
 type StreamingRunner interface {
@@ -90,8 +97,9 @@ func (r OSRunner) RunWithOutput(ctx context.Context, argv []string, overrides ma
 	command.Env = mergeEnvironment(r.Env, overrides)
 	stdout := &boundedBuffer{limit: MaxOutputBytes}
 	stderr := &boundedBuffer{limit: MaxOutputBytes}
-	command.Stdout = &streamWriter{stream: "stdout", buffer: stdout, listener: listener}
-	command.Stderr = &streamWriter{stream: "stderr", buffer: stderr, listener: listener}
+	var streamLock sync.Mutex
+	command.Stdout = &streamWriter{stream: "stdout", buffer: stdout, listener: listener, mu: &streamLock}
+	command.Stderr = &streamWriter{stream: "stderr", buffer: stderr, listener: listener, mu: &streamLock}
 	err := command.Run()
 	result.Stdout = stdout.String()
 	result.Stderr = stderr.String()
@@ -118,9 +126,16 @@ type streamWriter struct {
 	stream   string
 	buffer   *boundedBuffer
 	listener OutputListener
+	// Shared by the stdout and stderr writers of one command, so a listener sees
+	// one chunk at a time. Each writer has its own buffer, but a lock per writer
+	// would not serialise anything — the two goroutines would take different
+	// locks and still enter the listener together.
+	mu *sync.Mutex
 }
 
 func (w *streamWriter) Write(data []byte) (int, error) {
+	w.mu.Lock()
+	defer w.mu.Unlock()
 	before := w.buffer.buffer.Len()
 	n, err := w.buffer.Write(data)
 	accepted := w.buffer.buffer.Len() - before
diff --git a/internal/process/process_test.go b/internal/process/process_test.go
index ea06832b..7f9d37d3 100644
--- a/internal/process/process_test.go
+++ b/internal/process/process_test.go
@@ -22,6 +22,16 @@ func TestProcessHelper(t *testing.T) {
 		// kills this process, so the sleep never runs to completion.
 		<-time.After(10 * time.Second)
 	}
+	// Interleaves both streams so the runner's stdout and stderr copiers are
+	// active at the same time. Real installs look like this — npm reports progress
+	// on stderr while printing results on stdout.
+	if os.Getenv("ONEAGENT_PROCESS_BOTH_STREAMS") == "1" {
+		for index := 0; index < 50; index++ {
+			os.Stdout.WriteString("o")
+			os.Stderr.WriteString("e")
+		}
+		os.Exit(0)
+	}
 	os.Stdout.WriteString(os.Getenv("ONEAGENT_PROCESS_VALUE"))
 	os.Exit(0)
 }
@@ -38,7 +48,16 @@ func helperRunner(t *testing.T) OSRunner {
 	if err != nil {
 		t.Fatal(err)
 	}
-	runner := New(map[string]string{"ONEAGENT_PROCESS_HELPER": "1"})
+	/* These cases re-exec the test binary as the helper process, so under `go test
+	   -cover` the child inherits the coverage instrumentation. Without a place to
+	   write its profile it prints "warning: GOCOVERDIR not set" to stderr, which
+	   lands in the captured output and in the listener — failing assertions about
+	   what the command produced for a reason that has nothing to do with the
+	   runner. Giving the child a scratch directory keeps its stderr its own. */
+	runner := New(map[string]string{
+		"ONEAGENT_PROCESS_HELPER": "1",
+		"GOCOVERDIR":              t.TempDir(),
+	})
 	runner.Lookup = func(command string) (string, bool) {
 		if command == "helper" {
 			return path, true
@@ -75,6 +94,36 @@ func TestOSRunnerStreamsOutputWithoutChangingResult(t *testing.T) {
 	}
 }
 
+// The listener here appends without locking, exactly as the install runtime's
+// does (internal/app/install.go redacts and forwards). stdout and stderr are
+// copied by separate goroutines, so without serialisation inside the runner this
+// is a data race in production, not just in a test — it surfaces whenever a
+// command writes to both streams, which npm does on every install.
+func TestOSRunnerSerialisesListenerAcrossStreams(t *testing.T) {
+	runner := helperRunner(t)
+	outputs := make([]Output, 0)
+	result, err := runner.RunWithOutput(context.Background(), []string{os.Args[0], "-test.run=TestProcessHelper"}, map[string]string{
+		"ONEAGENT_PROCESS_BOTH_STREAMS": "1",
+	}, helperTimeout, func(output Output) { outputs = append(outputs, output) })
+	if err != nil || result.ExitCode != 0 {
+		t.Fatalf("interleaved process result = %#v, err=%v", result, err)
+	}
+	var stdout, stderr int
+	for _, output := range outputs {
+		switch output.Stream {
+		case "stdout":
+			stdout += len(output.Text)
+		case "stderr":
+			stderr += len(output.Text)
+		}
+	}
+	// Both streams have to reach the listener; asserting only the total would
+	// pass even if one stream's chunks were being dropped.
+	if stdout != 50 || stderr != 50 {
+		t.Fatalf("streamed %d stdout and %d stderr bytes, want 50 of each", stdout, stderr)
+	}
+}
+
 func TestOSRunnerReturnsExitCodeAndCapturesOutput(t *testing.T) {
 	runner := helperRunner(t)
 	result, err := runner.Run(context.Background(), []string{os.Args[0], "-test.run=TestProcessHelper"}, map[string]string{
diff --git a/site/astro.config.mjs b/site/astro.config.mjs
index 48c9e724..c0f90fe1 100644
--- a/site/astro.config.mjs
+++ b/site/astro.config.mjs
@@ -9,6 +9,13 @@ export default defineConfig({
   site,
   base,
   output: "static",
+  // Chinese stays unprefixed so every published URL keeps working; English is
+  // additive under /en/.
+  i18n: {
+    defaultLocale: "zh-CN",
+    locales: ["zh-CN", "en"],
+    routing: { prefixDefaultLocale: false },
+  },
   integrations: [sitemap()],
   build: {
     assets: "_assets",
diff --git a/site/e2e/site.spec.ts b/site/e2e/site.spec.ts
index d5534b0f..e228fac1 100644
--- a/site/e2e/site.spec.ts
+++ b/site/e2e/site.spec.ts
@@ -1,7 +1,14 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, type Page } from "@playwright/test";
 import axe from "axe-core";
 
-const criticalPages = ["/", "/downloads/", "/agents/", "/security/"];
+const criticalPages = ["/", "/explore/", "/downloads/", "/agents/", "/security/"];
+
+/* Mirrors translatedRoutes in src/i18n/index.ts. It cannot be imported here:
+   that module reads import.meta.env.BASE_URL, which only exists under Vite, and
+   Playwright runs this file in plain Node. The englishPages list below is the
+   guard — every route named here has to have an /en/ page that gets audited, so
+   the two drifting apart fails rather than going unnoticed. */
+const translatedRoutes = ["", "downloads/", "quickstart/", "explore/", "security/"];
 
 test("critical pages fit the viewport without horizontal scrolling", async ({ page }) => {
   for (const path of criticalPages) {
@@ -14,21 +21,374 @@ test("critical pages fit the viewport without horizontal scrolling", async ({ pa
   }
 });
 
-test("home states the product boundary and current channel", async ({ page }) => {
+test("home presents one activation entry without claiming a real scan", async ({ page }) => {
   await page.goto("/");
   await expect(page.getByRole("heading", { level: 1 })).toContainText("激活你的 AI 开发环境");
-  await expect(page.getByRole("link", { name: "下载 OneAgent" })).toBeVisible();
-  await expect(page.getByText("自己的 Key", { exact: true })).toBeVisible();
-  await expect(page.locator(".hero-note")).toContainText("GitHub");
+  await expect(page.locator(".hero-actions").getByRole("button", { name: "开始激活演示" })).toBeVisible();
+  await expect(page.locator(".hero-actions").getByRole("link")).toHaveCount(0);
+  /* The console used to sit at idle until clicked. It now plays itself once it
+     scrolls into view, so the successor guarantee is that the page drives the
+     demo — the button stays as the replay and takeover entry. Scrolled here
+     explicitly because whether the console starts on screen varies by viewport,
+     and this test is not the one about the trigger threshold. */
+  const console = page.locator("#activation-console");
+  await console.scrollIntoViewIfNeeded();
+  await expect(console).toHaveAttribute("data-autoplaying", "true");
+  await expect(page.getByText("示例环境", { exact: true }).first()).toBeVisible();
+  await expect(page.getByText("不访问设备", { exact: true })).toBeVisible();
+  await expect(page.locator('input[type="password"], input[name*="key" i]')).toHaveCount(0);
+  await expect(page.locator(".hero-note")).toContainText("未签名技术预览版");
+});
+
+test("activation demo reaches Ready only for a supported managed combination", async ({ page }) => {
+  const fetches: string[] = [];
+  page.on("request", (request) => {
+    if (["fetch", "xhr"].includes(request.resourceType())) fetches.push(request.url());
+  });
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+  await page.getByRole("button", { name: "开始激活演示" }).click();
+  await expect(console).toHaveAttribute("data-phase", "agent");
+  await console.getByRole("button", { name: /Claude Code/ }).click();
+  await expect(console).toHaveAttribute("data-phase", "mode");
+  await console.getByRole("button", { name: /配置模型服务/ }).click();
+  await expect(console).toHaveAttribute("data-phase", "provider");
+  await console.getByRole("button", { name: /PPIO/ }).click();
+  await console.getByRole("button", { name: "验证示例连接" }).click();
+  await expect(console).toHaveAttribute("data-phase", "model");
+  await console.getByRole("button", { name: "deepseek/deepseek-v3" }).click();
+  await console.getByRole("button", { name: "确认激活" }).click();
+  await expect(console).toHaveAttribute("data-phase", "ready");
+  await expect(console.getByRole("heading", { name: "示例环境已 Ready" })).toBeVisible();
+  await expect(console.getByRole("link", { name: "下载 OneAgent" })).toBeVisible();
+  await expect(console.getByRole("link", { name: "打开完整配置目录" })).toBeVisible();
+  await page.addScriptTag({ content: axe.source });
+  const result = await page.evaluate(async () => {
+    const axeApi = (window as typeof window & { axe: typeof axe }).axe;
+    return axeApi.run(document.querySelector("#activation-console")!, {
+      runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] },
+    });
+  });
+  const serious = result.violations.filter(
+    (violation) => violation.impact === "serious" || violation.impact === "critical",
+  );
+  expect(serious, JSON.stringify(serious, null, 2)).toEqual([]);
+  expect(fetches, "the public demo must not call a local or remote activation API").toEqual([]);
+});
+
+test("activation demo preserves guide-only and preview-gate boundaries", async ({ page }) => {
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+
+  await page.getByRole("button", { name: "开始激活演示" }).click();
+  await expect(console).toHaveAttribute("data-phase", "agent");
+  await console.getByRole("button", { name: /Cursor/ }).click();
+  await expect(console).toHaveAttribute("data-phase", "guide-only");
+  await expect(console.getByRole("heading", { name: "转入官方设置" })).toBeVisible();
+  await expect(console.getByRole("link", { name: "下载 OneAgent" })).toBeHidden();
+
+  await console.getByRole("button", { name: "重置演示" }).click();
+  await page.getByRole("button", { name: "开始激活演示" }).click();
+  await expect(console).toHaveAttribute("data-phase", "agent");
+  await console.getByRole("button", { name: /Codex/ }).click();
+  await console.getByRole("button", { name: /配置模型服务/ }).click();
+  await console.getByRole("button", { name: /PPIO/ }).click();
+  await console.getByRole("button", { name: "验证示例连接" }).click();
+  await expect(console).toHaveAttribute("data-phase", "preview-gate");
+  await expect(console.getByRole("heading", { name: "仍需通过发布门禁" })).toBeVisible();
+  await expect(console.getByRole("link", { name: "下载 OneAgent" })).toBeHidden();
+  await expect(console.getByRole("link", { name: "发行政策" })).toBeVisible();
+});
+
+// The custom endpoint is the demo's only typed input, and its whole point is
+// that the browser applies the same rules as oneagent/providers.py. A field that
+// accepted anything would teach visitors an endpoint works when the app rejects it.
+test("activation demo validates a custom endpoint the way the app does", async ({ page }) => {
+  const fetches: string[] = [];
+  page.on("request", (request) => {
+    if (["fetch", "xhr"].includes(request.resourceType())) fetches.push(request.url());
+  });
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+  await page.getByRole("button", { name: "开始激活演示" }).click();
+  await console.getByRole("button", { name: /Claude Code/ }).click();
+  await console.getByRole("button", { name: /配置模型服务/ }).click();
+  await console.getByRole("button", { name: /自定义端点/ }).click();
+
+  const url = console.getByLabel("Base URL");
+  const verify = console.getByRole("button", { name: "验证示例连接" });
+  await expect(url).toBeVisible();
+  await expect(verify).toBeDisabled();
+
+  for (const [value, message] of [
+    ["ftp://api.example.com", "需要以 http:// 或 https:// 开头。"],
+    ["https://user:secret@api.example.com", "请从地址中去掉用户名或密码。"],
+  ]) {
+    await url.fill(value);
+    await expect(console.locator("[data-custom-hint]")).toHaveText(message);
+    await expect(url).toHaveAttribute("aria-invalid", "true");
+    await expect(verify, `${value} must not be verifiable`).toBeDisabled();
+  }
+
+  await url.fill("https://api.example.com/openai");
+  await expect(console.locator("[data-custom-hint]")).toHaveText("端点可用");
+  await expect(verify).toBeEnabled();
+  await verify.click();
+
+  // A custom endpoint publishes no catalog, so the demo shows the app's real
+  // recovery — type the id — rather than inventing a discovered list.
+  await expect(console).toHaveAttribute("data-phase", "model");
+  await expect(console.locator("[data-model-grid]")).toBeHidden();
+  await console.getByLabel("模型 ID").fill("deepseek/deepseek-v3");
+  await console.getByRole("button", { name: "确认激活" }).click();
+  await expect(console).toHaveAttribute("data-phase", "ready");
+  await expect(console.locator("[data-result-provider]")).toHaveText("api.example.com");
+  expect(fetches, "typing an endpoint must not make the page call it").toEqual([]);
+});
+
+// Reusing an existing account is a real branch in the product's ConfigModePage,
+// and it exists precisely because no new credential is introduced — so the demo
+// must not walk it through provider and model steps it genuinely skips.
+test("activation demo skips provider and model for an existing account", async ({ page }) => {
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+  await page.getByRole("button", { name: "开始激活演示" }).click();
+  await console.getByRole("button", { name: /Claude Code/ }).click();
+  await expect(console).toHaveAttribute("data-phase", "mode");
+  await console.getByRole("button", { name: /使用已有账号或配置/ }).click();
+
+  await expect(console).toHaveAttribute("data-phase", "ready");
+  await expect(console.getByRole("heading", { name: "保留现有账号" })).toBeVisible();
+  await expect(console.locator(".activation-steps li.is-skipped")).toHaveCount(2);
+  await expect(console.locator("[data-result-provider]")).toHaveText("已跳过");
+  await expect(console.locator("[data-log]")).toContainText("Provider 与模型步骤已跳过");
+});
+
+test("activation demo keeps a complete event history under reduced motion", async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+  /* Advancing the interface on its own is motion, so reduced motion means the
+     console waits to be asked. That is also what keeps the rest of this test
+     valid: nothing has moved off idle before the first click. */
+  await console.scrollIntoViewIfNeeded();
+  await expect(console).toHaveAttribute("data-phase", "idle");
+  await expect(console).not.toHaveAttribute("data-autoplaying", "true");
+  await page.getByRole("button", { name: "开始激活演示" }).click();
+  await expect(console).toHaveAttribute("data-phase", "agent");
+  await expect(console.locator("[data-log] li")).toHaveCount(2);
+  await console.getByRole("button", { name: /Claude Code/ }).click();
+  await console.getByRole("button", { name: /配置模型服务/ }).click();
+  await console.getByRole("button", { name: /PPIO/ }).click();
+  await console.getByRole("button", { name: "验证示例连接" }).click();
+  await expect(console).toHaveAttribute("data-phase", "model");
+  await console.getByRole("button", { name: "deepseek/deepseek-v3" }).click();
+  await console.getByRole("button", { name: "确认激活" }).click();
+  await expect(console).toHaveAttribute("data-phase", "ready");
+  await expect(console.locator("[data-log]")).toContainText("示例协议验证完成");
+  const animations = await console.evaluate((element) =>
+    element.getAnimations({ subtree: true }).filter((animation) => animation.playState === "running").length,
+  );
+  expect(animations).toBe(0);
+});
+
+/* The landing page has to show what activation looks like to someone who clicks
+   nothing at all — that is the whole reason autoplay exists. */
+test("activation demo plays itself through to Ready without a click", async ({ page }) => {
+  const fetches: string[] = [];
+  page.on("request", (request) => {
+    if (["fetch", "xhr"].includes(request.resourceType())) fetches.push(request.url());
+  });
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+  await console.scrollIntoViewIfNeeded();
+
+  await expect(console).toHaveAttribute("data-phase", "ready");
+  await expect(console.getByRole("heading", { name: "示例环境已 Ready" })).toBeVisible();
+  // Reaching the end clears the flag, so the visitor is in charge from here.
+  await expect(console).not.toHaveAttribute("data-autoplaying", "true");
+  await expect(console.locator("[data-log]")).toContainText("示例环境可进入 Ready");
+  expect(fetches, "an unattended demo must not call anything either").toEqual([]);
 });
 
-test("download center links only to GitHub Releases", async ({ page }) => {
+// Autoplay is a demonstration, not a ride: the moment someone reaches for the
+// console it belongs to them, and it must not resume behind their back.
+test("interacting during autoplay stops it where it stands", async ({ page }) => {
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+  await console.scrollIntoViewIfNeeded();
+  await expect(console).toHaveAttribute("data-autoplaying", "true");
+
+  /* Waits for a step that is a decision point. Taking over during `scanning`
+     would still land on `agent`, because the scan's own timer resolves it the
+     same way a clicked run does — leaving a spinner up forever would be the
+     worse behaviour. `agent` is the first step where the demo is genuinely
+     waiting on a choice, so it is where "stopped" is observable. */
+  await expect(console).toHaveAttribute("data-phase", "agent");
+  await console.locator("[data-log]").click();
+  await expect(console).not.toHaveAttribute("data-autoplaying", "true");
+  await page.waitForTimeout(2500);
+  expect(await console.getAttribute("data-phase"), "autoplay resumed after takeover").toBe("agent");
+
+  // Taken over, not broken: the trigger still replays from the top.
+  await page.getByRole("button", { name: "开始激活演示" }).click();
+  await expect(console).toHaveAttribute("data-phase", "agent");
+  await expect(console).not.toHaveAttribute("data-autoplaying", "true");
+});
+
+/* The failure this guards is specific and easy to reintroduce: every step calls
+   focusPanel, and if autoplay keeps doing that it steals focus from whatever the
+   visitor is reading or tabbing through — on a page they never interacted with. */
+test("autoplay never takes keyboard focus", async ({ page }) => {
+  await page.goto("/");
+  const console = page.locator("#activation-console");
+  await console.scrollIntoViewIfNeeded();
+
+  const insideConsole = () =>
+    page.evaluate(() => Boolean(document.querySelector("#activation-console")?.contains(document.activeElement)));
+  for (let sample = 0; sample < 12; sample += 1) {
+    expect(await insideConsole(), "autoplay moved focus into the console").toBe(false);
+    await page.waitForTimeout(250);
+  }
+  await expect(console).toHaveAttribute("data-phase", "ready");
+});
+
+test("Explorer restores shareable state and returns focus after the drawer closes", async ({ page }) => {
+  await page.goto("/explore/?agent=claude-code&provider=ppio&platform=macos&protocol=anthropic");
+  const explorer = page.locator("compatibility-explorer");
+  const drawer = explorer.locator("[data-explorer-drawer]");
+  await expect(drawer).toBeVisible();
+  await expect(drawer.getByRole("heading", { name: "Claude Code" })).toBeVisible();
+  await expect(explorer.locator('[data-filter="platform"]')).toHaveValue("macos");
+  await expect(explorer.locator('[data-filter="provider"]')).toHaveValue("ppio");
+  await expect(explorer.locator('[data-filter="protocol"]')).toHaveValue("anthropic");
+
+  await drawer.getByRole("button", { name: "关闭详情" }).click();
+  await expect(page).not.toHaveURL(/agent=/);
+
+  const card = explorer.locator('[data-agent-card][data-agent-id="claude-code"]');
+  await card.focus();
+  await page.keyboard.press("Enter");
+  await expect(drawer).toBeVisible();
+  await page.keyboard.press("Escape");
+  await expect(drawer).toBeHidden();
+  await expect(card).toBeFocused();
+});
+
+test("Explorer filters only catalog-backed combinations", async ({ page }) => {
+  await page.goto("/explore/");
+  const explorer = page.locator("compatibility-explorer");
+  await explorer.locator('[data-filter="platform"]').selectOption("windows");
+  await explorer.locator('[data-filter="protocol"]').selectOption("responses");
+  await explorer.locator('[data-filter="provider"]').selectOption("ppio");
+  const visible = explorer.locator("[data-agent-card]:visible");
+  await expect(visible).toHaveCount(1);
+  await expect(visible).toHaveAttribute("data-agent-id", "codex");
+  await expect(page).toHaveURL(/platform=windows/);
+  await expect(page).toHaveURL(/protocol=responses/);
+  await expect(page).toHaveURL(/provider=ppio/);
+});
+
+/* The download page renders from whatever the GitHub Releases feed returned at
+   build time. With no published release the whole platform picker is replaced by
+   a "not published yet" notice, which is the correct page — but it means the
+   picker tests have nothing to drive.
+ *
+ * They skip rather than being deleted or loosened. A release exists in the repo
+ * this site ships from, so these assertions are the ones that catch a regression
+ * there; silently dropping them would mean the download flow rots unnoticed the
+ * next time a build does have artifacts. The skip reason names the cause so a red
+ * run is not mistaken for a broken picker.
+ */
+async function skipWithoutPublishedRelease(page: Page) {
   await page.goto("/downloads/");
-  const releaseLink = page.getByRole("link", { name: /查看 GitHub Releases?/ }).first();
-  await expect(releaseLink).toBeVisible();
-  await expect(releaseLink).toHaveAttribute("href", /^https:\/\/github\.com\/MaimoryLab\/OneAgent\/releases/);
+  const hasPicker = await page.locator("[data-platform-picker]").count();
+  test.skip(hasPicker === 0, "no release is published, so the page renders the unavailable notice");
+}
+
+/* The expected digest used to be read from the site's own release-index.json and
+   compared against the page. That artifact is gone — release data now comes from
+   GitHub Releases at build time — so there is no second copy to cross-check
+   against, and asserting the shape of what the page prints is what remains. A
+   64-hex digest and a real download link are still worth gating: an empty or
+   truncated checksum is exactly what a reader cannot verify with. */
+test("download center recommends an available artifact but keeps manual choices", async ({ page }) => {
+  await skipWithoutPublishedRelease(page);
+  const picker = page.getByRole("group", { name: "选择平台与架构" });
+  await expect(picker).toBeVisible();
+  const platform = (id: string) => picker.locator(`input[type="radio"][value="${id}"]`);
+  await platform("windows-x64").check();
+  await expect(page.getByRole("heading", { name: "这个平台尚未公开发行" })).toBeVisible();
+  await platform("macos-arm64").check();
+  await expect(page.getByRole("link", { name: "下载 macOS 预览版" })).toBeVisible();
+  await expect(page.locator("[data-release-panel].is-active .hash-value")).toHaveText(/^[a-f0-9]{64}$/);
+  await expect(page.getByText("未签名、未公证", { exact: true })).toBeVisible();
+});
+
+/* Security and enterprise came out of the chrome, but the pages did not go
+   anywhere. The security page is where the release evidence, the privacy
+   statement and the Stable gate are written down, and the footer is now the only
+   route to it, so removing the nav entry and keeping the page reachable are
+   asserted together — otherwise a later cleanup drops the page and the trust
+   claims leave with it. The #privacy and #release-evidence anchors are checked
+   because other documents cite them directly, not just the page. */
+test("security and enterprise leave the navigation but stay reachable", async ({ page }) => {
+  for (const path of ["/", "/en/"]) {
+    await page.goto(path);
+    await expect(page.locator(".site-header").getByRole("link", { name: /安全|Security/ })).toHaveCount(0);
+    await expect(page.locator(".site-header").getByRole("link", { name: /企业服务|Enterprise/ })).toHaveCount(0);
+    await expect(page.locator(".site-footer").getByRole("link", { name: /安全与隐私|Security & privacy/ })).toHaveCount(0);
+    await expect(page.locator(".site-footer").getByRole("link", { name: /企业服务|Enterprise/ })).toHaveCount(0);
+    // The footer's other two entries are the only route to them, so they stay.
+    await expect(page.locator(".site-footer").getByRole("link", { name: /支持与反馈|Support & feedback/ })).toBeVisible();
+    await expect(page.locator(".site-footer").getByRole("link", { name: "GitHub Releases" })).toBeVisible();
+  }
+
+  for (const path of ["/security/", "/en/security/", "/enterprise/"]) {
+    const response = await page.goto(path);
+    expect(response?.status(), `${path} must stay published`).toBe(200);
+    await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
+  }
+  await page.goto("/security/");
+  await expect(page.locator("#privacy")).toBeAttached();
+  await expect(page.locator("#release-evidence")).toBeAttached();
+});
+
+// The picker is a real radio group rather than a styled listbox, so arrow keys
+// have to move the selection — that behaviour is the reason for the markup.
+test("platform picker is keyboard operable", async ({ page }) => {
+  await skipWithoutPublishedRelease(page);
+  const picker = page.getByRole("group", { name: "选择平台与架构" });
+  await picker.locator('input[value="macos-arm64"]').focus();
+  await page.keyboard.press("ArrowDown");
+  await expect(picker.locator('input[value="macos-x64"]')).toBeChecked();
+  await expect(page.locator('[data-release-panel="macos-x64"]')).toHaveClass(/is-active/);
+  await page.keyboard.press("ArrowUp");
+  await expect(picker.locator('input[value="macos-arm64"]')).toBeChecked();
+  await expect(page.getByRole("link", { name: "下载 macOS 预览版" })).toBeVisible();
+  // The ring belongs to the card, not the 16px dot inside it.
+  await expect(picker.locator('input[value="macos-arm64"]')).toHaveCSS("outline-style", "none");
 });
 
+// The detection note is a server-rendered localised template that the client
+// fills in from the DOM. Reading those templates off the wrong element leaves
+// every branch as an empty string, which blanks the note instead of failing
+// loudly — so both locales assert real text with no placeholder left behind.
+for (const [route, expected] of [
+  ["/downloads/", "已识别为"],
+  ["/en/downloads/", "Detected as"],
+] as const) {
+  test(`the download page explains its platform detection in the page's language (${route})`, async ({ page }) => {
+    await page.goto(route);
+    const note = page.locator("[data-detected-note]");
+    // The note lives inside the platform picker, which is absent when no release
+    // is published. Same reason as skipWithoutPublishedRelease above.
+    test.skip((await note.count()) === 0, "no release is published, so the page renders the unavailable notice");
+    await expect(note).toContainText(expected);
+    await expect(note).not.toContainText("{");
+  });
+}
+
 test("guide-only compatibility remains distinct from managed installation", async ({ page }) => {
   await page.goto("/agents/cursor/");
   await expect(page.getByText("按官方方式安装", { exact: true })).toBeVisible();
@@ -36,6 +396,23 @@ test("guide-only compatibility remains distinct from managed installation", asyn
   await expect(page.getByText("OneAgent 可管理安装", { exact: true })).toHaveCount(0);
 });
 
+/* Replaces a test that fetched the site's own release-index.json and asserted the
+   artifact it published. The site no longer publishes that file, so the guarantee
+   worth keeping is the one a reader depends on: the download page states the
+   channel honestly, prints a digest they can check, and sends them to the
+   official release rather than a mirror the site invented. */
+test("download page states the channel and links to the official release", async ({ page }) => {
+  await skipWithoutPublishedRelease(page);
+  /* Scoped to the active panel throughout. All four platform panels are in the
+     DOM and only CSS hides the inactive ones, so an unscoped text match resolves
+     against a hidden copy first and fails on visibility. */
+  const active = page.locator("[data-release-panel].is-active");
+  await expect(active.getByText("未签名技术预览版", { exact: true })).toBeVisible();
+  await expect(active.locator(".hash-value")).toHaveText(/^[a-f0-9]{64}$/);
+  const download = active.getByRole("link", { name: /下载 .* 预览版/ });
+  await expect(download).toHaveAttribute("href", /^https:\/\/github\.com\/[^/]+\/[^/]+\/releases\/download\//);
+});
+
 test("serves its own stylesheet and Agent marks rather than 404ing on them", async ({ page }) => {
   // A base path build (SITE_URL/BASE_PATH, as the Pages job uses) emits an
   // absolute <base href>, and the CSP declares base-uri 'self'. Serving such a
@@ -49,14 +426,38 @@ test("serves its own stylesheet and Agent marks rather than 404ing on them", asy
   await page.goto("/agents/", { waitUntil: "networkidle" });
   expect(missing, "every asset the page asks for must exist").toEqual([]);
   // A stylesheet that failed to load leaves the UA default, not this palette.
-  await expect(page.locator("body")).toHaveCSS("background-color", "rgb(244, 243, 239)");
-  await page.waitForFunction(() => [...document.images].every((image) => image.complete));
+  await expect(page.locator("body")).toHaveCSS("background-color", "rgb(236, 236, 239)");
   const brokenMarks = await page.evaluate(
-    () => document.images.length && [...document.images].filter((image) => image.naturalWidth === 0).length,
+    () => document.images.length && [...document.images].filter((image) => !image.complete || image.naturalWidth === 0).length,
   );
   expect(brokenMarks, "Agent marks must render").toBe(0);
 });
 
+test.describe("hero particles", () => {
+  const frameDigest = (path: string) =>
+    `(() => { const c = document.querySelector('${path}'); const d = c.getContext('2d').getImageData(0, 0, c.width, c.height).data; let h = 0; for (let i = 0; i < d.length; i += 97) h = (h * 31 + d[i]) | 0; return h; })()`;
+
+  test("animates by default", async ({ page }) => {
+    await page.goto("/");
+    const canvas = page.locator("[data-hero-particles]");
+    await expect(canvas).toHaveAttribute("aria-hidden", "true");
+    const first = await page.evaluate(frameDigest("[data-hero-particles]"));
+    await page.waitForTimeout(400);
+    expect(await page.evaluate(frameDigest("[data-hero-particles]"))).not.toBe(first);
+  });
+
+  // The CSS prefers-reduced-motion block only clamps CSS animations, so the
+  // canvas has to opt out in script. Only a real reduced-motion context proves it.
+  test("paints a static frame under reduced motion", async ({ browser }) => {
+    const page = await browser.newPage({ reducedMotion: "reduce" });
+    await page.goto("/");
+    const first = await page.evaluate(frameDigest("[data-hero-particles]"));
+    await page.waitForTimeout(400);
+    expect(await page.evaluate(frameDigest("[data-hero-particles]"))).toBe(first);
+    await page.close();
+  });
+});
+
 test("ships a local-only content policy and no third-party scripts", async ({ page }) => {
   await page.goto("/");
   const policy = await page.locator('meta[http-equiv="Content-Security-Policy"]').getAttribute("content");
@@ -79,3 +480,330 @@ for (const path of criticalPages) {
     expect(serious, JSON.stringify(serious, null, 2)).toEqual([]);
   });
 }
+
+// axe treats <canvas> as an image node and gives up resolving the background
+// behind it, so every hero and header text node comes back "incomplete" rather
+// than pass — the particle layer hides exactly the copy most worth checking.
+// Dropping the decoration first is what actually gates those colours.
+test("hero text contrast is proven once the decorative canvas is removed", async ({ page }) => {
+  await page.goto("/");
+  await page.addScriptTag({ content: axe.source });
+  const result = await page.evaluate(async () => {
+    document.querySelector("[data-hero-particles]")?.remove();
+    const axeApi = (window as typeof window & { axe: typeof axe }).axe;
+    return axeApi.run(document, { runOnly: ["color-contrast"] });
+  });
+  expect(result.violations, JSON.stringify(result.violations, null, 2)).toEqual([]);
+  expect(result.incomplete, JSON.stringify(result.incomplete, null, 2)).toEqual([]);
+});
+
+// Navigation animates via the native cross-document path, so the proof is that
+// the outgoing document reports a live transition on pageswap. Asserting on the
+// CSS alone would still pass if the browser declined to run it.
+// Below 920px the nav collapses into a disclosure menu, and the transition is a
+// document-level behaviour that does not vary by viewport — one width proves it.
+test("navigating between pages runs a cross-document view transition", async ({ page, viewport }) => {
+  test.skip((viewport?.width ?? 0) < 920, "nav links are collapsed at this width");
+  await page.goto("/");
+  await page.evaluate(() => {
+    window.addEventListener("pageswap", (event) => {
+      sessionStorage.setItem("vt-ran", (event as PageSwapEvent).viewTransition ? "yes" : "no");
+    });
+  });
+  await page.getByLabel("主导航").getByRole("link", { name: "配置", exact: true }).click();
+  await expect(page).toHaveURL(/\/explore\/$/);
+  expect(await page.evaluate(() => sessionStorage.getItem("vt-ran"))).toBe("yes");
+  // The shared chrome opts out of the crossfade by being named on both pages.
+  await expect(page.locator(".site-header")).toHaveCSS("view-transition-name", "site-header");
+});
+
+test.describe("hero entrance", () => {
+  const heroParts = [".eyebrow", ".display", ".lede", ".hero-actions", ".hero-note", ".product-shot"];
+
+  test("staggers the hero into place on first paint", async ({ page, viewport }) => {
+    await page.goto("/");
+    const delays = await page.evaluate(() =>
+      document
+        .getAnimations()
+        .filter((animation) => (animation as CSSAnimation).animationName === "hero-rise")
+        .map((animation) => Number((animation.effect as KeyframeEffect).getTiming().delay))
+        .sort((a, b) => a - b),
+    );
+    if ((viewport?.width ?? 0) <= 680) {
+      // Stacked layout moves the block, not the lines — see the note in global.css.
+      expect(delays).toEqual([0, 180]);
+    } else {
+      expect(delays).toEqual([0, 70, 160, 230, 290, 360]);
+    }
+  });
+
+  // The previous attempt faded these in, which dropped the largest type on the
+  // site below AA for the whole animation. Auditing only the settled page would
+  // not have caught it, so sample while the entrance is still running.
+  test("keeps hero text readable while the entrance runs", async ({ page }) => {
+    await page.goto("/");
+    await page.addScriptTag({ content: axe.source });
+    const worst = await page.evaluate(async (parts) => {
+      document.querySelector("[data-hero-particles]")?.remove();
+      for (const selector of [...parts, ".hero-copy"]) {
+        const element = document.querySelector<HTMLElement>(selector);
+        if (!element) continue;
+        element.style.animation = "none";
+        void element.offsetHeight;
+        element.style.animation = "";
+      }
+      const axeApi = (window as typeof window & { axe: typeof axe }).axe;
+      let violations = 0;
+      for (let sample = 0; sample < 4; sample += 1) {
+        await new Promise((resolve) => setTimeout(resolve, 90));
+        const result = await axeApi.run(document, { runOnly: ["color-contrast"] });
+        violations += result.violations.reduce((total, entry) => total + entry.nodes.length, 0);
+      }
+      return violations;
+    }, heroParts);
+    expect(worst, "hero copy must clear AA at every frame of the entrance").toBe(0);
+  });
+});
+
+test.describe("english locale", () => {
+  // Derived from the route list rather than written out, so adding a translation
+  // without auditing its English page is not possible.
+  const englishPages = translatedRoutes.map((route) => `/en/${route}`);
+
+  for (const path of englishPages) {
+    test(`has no serious accessibility violations: ${path}`, async ({ page }) => {
+      await page.goto(path);
+      await expect(page.locator("html")).toHaveAttribute("lang", "en");
+      await page.addScriptTag({ content: axe.source });
+      const result = await page.evaluate(async () => {
+        document.querySelector("[data-hero-particles]")?.remove();
+        const axeApi = (window as typeof window & { axe: typeof axe }).axe;
+        return axeApi.run(document, { runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] } });
+      });
+      const serious = result.violations.filter(
+        (violation) => violation.impact === "serious" || violation.impact === "critical",
+      );
+      expect(serious, JSON.stringify(serious, null, 2)).toEqual([]);
+    });
+  }
+
+  test("declares reciprocal hreflang alternates with an x-default", async ({ page }) => {
+    for (const path of ["/", "/en/", "/explore/", "/en/explore/", "/security/", "/en/security/"]) {
+      await page.goto(path);
+      const codes = await page.evaluate(() =>
+        [...document.querySelectorAll('link[rel="alternate"][hreflang]')].map((link) => link.getAttribute("hreflang")),
+      );
+      expect(new Set(codes), `alternates on ${path}`).toEqual(new Set(["zh-CN", "en", "x-default"]));
+    }
+  });
+
+  // An untranslated route falls back to Chinese rather than 404ing, which is the
+  // right call — but silently swapping the reader's language mid-navigation is
+  // not. Every link that does it has to say so before the click.
+  test("marks links that fall back to Chinese, and only on English pages", async ({ page }) => {
+    await page.goto("/en/");
+    /* Security and enterprise left the nav, so the specific links this used to
+       name are gone. The sweep below is the real guarantee and covers whatever
+       is in the nav now — including the CTA band's untranslated team-services
+       link, which is where the hint has to appear on this page. */
+
+    // Every link leaving /en/ for an untranslated route carries the hint.
+    const unmarked = await page.evaluate((translated) => {
+      return [...document.querySelectorAll("a[href^='/']")]
+        .filter((link) => {
+          const href = link.getAttribute("href") ?? "";
+          if (href.startsWith("/en/") || /\.(json|txt|webmanifest)$/.test(href)) return false;
+          const route = href.replace(/^\//, "");
+          return !translated.includes(route);
+        })
+        .filter((link) => !link.querySelector(".lang-hint"))
+        .map((link) => link.getAttribute("href"));
+    }, translatedRoutes);
+    expect(unmarked, "these links change language without saying so").toEqual([]);
+
+    // The hint is about leaving English; a Chinese reader is already there.
+    await page.goto("/");
+    await expect(page.locator(".lang-hint")).toHaveCount(0);
+  });
+
+  // Switching language has to keep the reader on the page they were reading;
+  // dropping them on the home page is the usual failure here.
+  test("language switch stays on the equivalent page", async ({ page, viewport }) => {
+    test.skip((viewport?.width ?? 0) < 920, "header actions are collapsed at this width");
+    await page.goto("/downloads/");
+    await page.getByRole("link", { name: "切换语言" }).click();
+    await expect(page).toHaveURL(/\/en\/downloads\/$/);
+    await expect(page.locator("html")).toHaveAttribute("lang", "en");
+
+    await page.getByRole("link", { name: "Change language" }).click();
+    await expect(page).toHaveURL(/\/downloads\/$/);
+    await expect(page.locator("html")).toHaveAttribute("lang", "zh-CN");
+  });
+
+  test("language switch preserves the Explorer route", async ({ page, viewport }) => {
+    test.skip((viewport?.width ?? 0) < 920, "header actions are collapsed at this width");
+    await page.goto("/explore/?platform=macos");
+    await page.getByRole("link", { name: "切换语言" }).click();
+    await expect(page).toHaveURL(/\/en\/explore\/$/);
+    await expect(page.locator("html")).toHaveAttribute("lang", "en");
+    await page.getByRole("link", { name: "Change language" }).click();
+    await expect(page).toHaveURL(/\/explore\/$/);
+  });
+
+  // Every link on an English page must resolve; an untranslated destination is
+  // expected to fall back to Chinese rather than 404 under /en/.
+  test("navigation from an english page never lands on a missing route", async ({ page }) => {
+    const missing: string[] = [];
+    page.on("response", (response) => {
+      if (response.status() >= 400) missing.push(`${response.status()} ${new URL(response.url()).pathname}`);
+    });
+    await page.goto("/en/", { waitUntil: "networkidle" });
+    const targets = await page.evaluate(() =>
+      [...document.querySelectorAll<HTMLAnchorElement>("a[href]")]
+        .map((anchor) => anchor.href)
+        .filter((href) => href.startsWith(location.origin)),
+    );
+    for (const target of new Set(targets)) {
+      const response = await page.request.get(target);
+      expect(response.status(), `${target} from /en/`).toBeLessThan(400);
+    }
+    expect(missing, "assets on /en/ must all exist").toEqual([]);
+  });
+});
+
+test.describe("dark scheme", () => {
+  // The light palette needed five values darkened to clear AA; the dark one is a
+  // second, independent set of colours over different grounds, so it needs the
+  // same gate rather than an assumption that inverting is safe.
+  for (const path of criticalPages) {
+    test(`has no serious accessibility violations in the dark: ${path}`, async ({ page }) => {
+      await page.emulateMedia({ colorScheme: "dark" });
+      await page.goto(path);
+      await expect(page.locator("html")).toHaveClass(/theme-dark/);
+      await page.addScriptTag({ content: axe.source });
+      const result = await page.evaluate(async () => {
+        document.querySelector("[data-hero-particles]")?.remove();
+        const axeApi = (window as typeof window & { axe: typeof axe }).axe;
+        return axeApi.run(document, { runOnly: { type: "tag", values: ["wcag2a", "wcag2aa"] } });
+      });
+      const serious = result.violations.filter(
+        (violation) => violation.impact === "serious" || violation.impact === "critical",
+      );
+      expect(serious, JSON.stringify(serious, null, 2)).toEqual([]);
+    });
+  }
+
+  // axe does not measure image contrast, so nothing above would have caught the
+  // Codex and OpenCode marks going invisible: they are fill="currentColor" and an
+  // <img> resolves that to black regardless of the page.
+  test("keeps currentColor agent marks visible without touching brand marks", async ({ page }) => {
+    await page.emulateMedia({ colorScheme: "dark" });
+    await page.goto("/agents/");
+    const filters = await page.evaluate(() =>
+      [...document.querySelectorAll<HTMLImageElement>(".agent-mark-wrap img")].map((image) => ({
+        file: image.src.split("/").pop() ?? "",
+        monochrome: image.hasAttribute("data-monochrome"),
+        filter: getComputedStyle(image).filter,
+      })),
+    );
+    const monochrome = filters.filter((entry) => entry.monochrome);
+    expect(monochrome.map((entry) => entry.file).sort()).toEqual(["codex.svg", "opencode.svg"]);
+    for (const entry of monochrome) expect(entry.filter, entry.file).toBe("invert(1)");
+    for (const entry of filters.filter((entry) => !entry.monochrome)) {
+      expect(entry.filter, `${entry.file} carries its own colours`).toBe("none");
+    }
+
+    await page.emulateMedia({ colorScheme: "light" });
+    await page.goto("/agents/");
+    const light = await page.evaluate(() =>
+      [...document.querySelectorAll<HTMLImageElement>(".agent-mark-wrap img")].map(
+        (image) => getComputedStyle(image).filter,
+      ),
+    );
+    expect(new Set(light), "no mark is inverted in the light scheme").toEqual(new Set(["none"]));
+  });
+
+  test("remembers an explicit choice over the system preference", async ({ page }) => {
+    await page.emulateMedia({ colorScheme: "light" });
+    await page.goto("/");
+    await expect(page.locator("html")).not.toHaveClass(/theme-dark/);
+
+    const toggle = page.getByRole("button", { name: "切换深色模式" });
+    await toggle.click();
+    await expect(page.locator("html")).toHaveClass(/theme-dark/);
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+
+    // The inline head script is what makes the choice survive without a flash.
+    await page.reload();
+    await expect(page.locator("html")).toHaveClass(/theme-dark/);
+    await expect(page.getByRole("button", { name: "切换深色模式" })).toHaveAttribute("aria-pressed", "true");
+
+    await page.getByRole("button", { name: "切换深色模式" }).click();
+    await expect(page.locator("html")).not.toHaveClass(/theme-dark/);
+    await page.reload();
+    await expect(page.locator("html")).not.toHaveClass(/theme-dark/);
+  });
+
+  test("paints the resolved theme before first contentful paint", async ({ page }) => {
+    await page.emulateMedia({ colorScheme: "dark" });
+    await page.goto("/", { waitUntil: "commit" });
+    // Sampling at commit catches a theme applied late: if the class were set by
+    // the deferred module script, the light palette would paint first.
+    expect(await page.evaluate(() => document.documentElement.className)).toContain("theme-dark");
+  });
+});
+
+// The interactive console must share the hero copy measure and size to its own
+// content at every breakpoint. A clipped wizard can visually cover the next
+// section even when overflow hides the pixels.
+test("the activation console sits on the same measure as the copy", async ({ page }) => {
+  await page.goto("/");
+  await page.evaluate(() =>
+    Promise.all(
+      document
+        .getAnimations()
+        .filter((animation) => (animation as CSSAnimation).animationName === "hero-rise")
+        .map((animation) => animation.finished),
+    ),
+  );
+  const layout = await page.evaluate(() => {
+    const edges = (selector: string) => {
+      const rect = document.querySelector(selector)!.getBoundingClientRect();
+      return { left: Math.round(rect.left), right: Math.round(rect.right) };
+    };
+    const panel = document.querySelector<HTMLElement>("[data-console-window]")!;
+    const rect = panel.getBoundingClientRect();
+    return {
+      copy: edges(".hero-copy"),
+      console: edges(".product-shot"),
+      contentOverflow: panel.scrollHeight - Math.round(rect.height),
+      gapBelowConsole: Math.round(
+        document.querySelector(".hero + .section")!.getBoundingClientRect().top -
+          document.querySelector(".product-shot")!.getBoundingClientRect().bottom,
+      ),
+    };
+  });
+  expect(layout.console).toEqual(layout.copy);
+  expect(layout.contentOverflow, "the activation console must not clip its own content").toBeLessThanOrEqual(1);
+  expect(layout.gapBelowConsole, "the console must not butt against the next section").toBeGreaterThan(16);
+});
+
+// Synthetic mouse events never set :hover, so the resting-vs-hovered difference
+// is only observable by moving a real pointer.
+test("interactive rows and cards respond to hover", async ({ page, viewport }) => {
+  test.skip((viewport?.width ?? 0) < 920, "hover is not the primary input at this width");
+
+  await page.goto("/agents/");
+  const row = page.locator(".agent-row").first();
+  await expect(row).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
+  await row.hover();
+  await expect(row).toHaveCSS("background-color", "rgb(255, 255, 255)");
+  await expect(row).not.toHaveCSS("box-shadow", "none");
+
+  await page.goto("/providers/");
+  const card = page.locator(".provider-card").first();
+  const restingBorder = await card.evaluate((el) => getComputedStyle(el).borderColor);
+  await card.hover();
+  await expect(card).not.toHaveCSS("border-color", restingBorder);
+  await expect(card).not.toHaveCSS("transform", "none");
+});
diff --git a/site/package.json b/site/package.json
index 83d4e19a..bc1fa89b 100644
--- a/site/package.json
+++ b/site/package.json
@@ -9,6 +9,7 @@
     "test": "vitest run",
     "test:e2e": "playwright test",
     "preview": "astro preview",
+    "validate": "node scripts/validate-build.mjs",
     "test:all": "npm test && npm run build && npm run test:e2e"
   },
   "dependencies": {
diff --git a/site/playwright.config.ts b/site/playwright.config.ts
index 6a5d991d..8c9a6aa2 100644
--- a/site/playwright.config.ts
+++ b/site/playwright.config.ts
@@ -4,12 +4,20 @@ export default defineConfig({
   testDir: "./e2e",
   fullyParallel: true,
   reporter: "list",
+  /* Trace teardown writes its zip inside the per-test budget, and on a full
+     three-project parallel run that write was itself timing out — turning
+     passing tests into failures whose only error was "Fixture 'trace recording'
+     timeout during teardown". The suite is ~1.4 min without it and was 4-7 min
+     with it. Traces are still captured on failure; they just get their own room
+     to finish, and the per-test budget is no longer shared with the recorder. */
+  timeout: 60_000,
+  expect: { timeout: 10_000 },
   use: {
     baseURL: "http://127.0.0.1:4321",
     trace: "retain-on-failure",
   },
   webServer: {
-    command: "npm run build && npm run preview -- --host 127.0.0.1 --port 4321",
+    command: "npm run build && python3.12 -m http.server 4321 --bind 127.0.0.1 --directory dist",
     url: "http://127.0.0.1:4321",
     reuseExistingServer: process.env.CI !== "true",
   },
diff --git a/site/public/llms.txt b/site/public/llms.txt
new file mode 100644
index 00000000..a2d9e781
--- /dev/null
+++ b/site/public/llms.txt
@@ -0,0 +1,38 @@
+# OneAgent
+
+> A trustworthy local AI development environment activator. It detects, installs
+> and configures CLI coding agents to point at an OpenAI- or Anthropic-compatible
+> provider of your choosing. Everything runs locally.
+
+Current release: 0.2.0-dev, published only as `technical-preview-unsigned`.
+The build is unsigned and unnotarised, and is never described as stable.
+
+## Product boundary
+
+- Runs locally. Configuration and backups stay on the user's device.
+- Bring your own key. There is no shared key and no unified model gateway.
+- Model requests are never proxied through OneAgent.
+- Third-party agent binaries are not redistributed; agents come from their
+  official sources.
+- Every distribution channel serves a byte-identical build with the same
+  SHA-256.
+
+## Pages
+
+- /: overview, first-success path, agent compatibility
+- /downloads/: per-platform artifacts with size, build date and SHA-256
+- /quickstart/: download through to a verified first agent configuration
+- /agents/: which agents OneAgent can install and configure, stated separately
+- /providers/: provider protocol support and commercial-relationship disclosure
+- /security/: local execution, key handling, backups, release integrity
+- /changelog/: shipped changes only
+- /enterprise/: team enablement and environment baselines
+- /release-index.json: machine-readable release index
+
+English translations exist for /en/, /en/downloads/ and /en/quickstart/.
+
+## Notes for machine readers
+
+Support is stated as three separate facts — managed install, managed
+configuration, and protocol — because a single "supported" checkmark would
+misrepresent guide-only agents. Do not collapse them.
diff --git a/site/public/site.webmanifest b/site/public/site.webmanifest
new file mode 100644
index 00000000..70f2b9be
--- /dev/null
+++ b/site/public/site.webmanifest
@@ -0,0 +1,10 @@
+{
+  "name": "OneAgent",
+  "short_name": "OneAgent",
+  "description": "A trustworthy local AI development environment activator.",
+  "start_url": "./",
+  "display": "browser",
+  "background_color": "#ececef",
+  "theme_color": "#ececef",
+  "icons": [{ "src": "favicon.svg", "type": "image/svg+xml", "sizes": "any" }]
+}
diff --git a/site/scripts/validate-build.mjs b/site/scripts/validate-build.mjs
index 02f41991..bb76224f 100644
--- a/site/scripts/validate-build.mjs
+++ b/site/scripts/validate-build.mjs
@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
 import { join, relative } from "node:path";
 
@@ -33,7 +34,14 @@ function localTarget(href) {
 }
 
 walk(rootPath);
-for (const required of ["index.html", "downloads/index.html", "quickstart/index.html", "agents/index.html", "providers/index.html", "security/index.html"]) {
+// The /en/ entries are listed for the same reason as the rest: a translated page
+// silently dropping out of the build is otherwise invisible, since the link
+// checker below only sees links that were actually emitted.
+//
+// release-index.json is no longer among them: the site reads release data from
+// GitHub Releases at build time instead of republishing a locally generated
+// index, so there is no such artifact to require.
+for (const required of ["index.html", "downloads/index.html", "quickstart/index.html", "agents/index.html", "providers/index.html", "security/index.html", "explore/index.html", "en/index.html", "en/downloads/index.html", "en/quickstart/index.html", "en/explore/index.html", "en/security/index.html", "llms.txt", "site.webmanifest"]) {
   if (!existsSync(join(rootPath, required))) failures.push(`Missing required output: ${required}`);
 }
 
@@ -51,6 +59,20 @@ for (const path of htmlFiles) {
   else if (!new URL(socialImage).pathname.startsWith(`${configuredBasePrefix}images/`)) failures.push(`${label} has an Open Graph image outside the base path: ${socialImage}`);
   if (/<script[^>]+src=["']https?:\/\//i.test(text) || /<img[^>]+src=["']https?:\/\//i.test(text) || /<link[^>]+rel=["']stylesheet["'][^>]+href=["']https?:\/\//i.test(text)) failures.push(`${label} loads a remote script, image, or stylesheet`);
   if (/sk-[A-Za-z0-9_-]{20,}/.test(text)) failures.push(`${label} appears to contain an API key`);
+  // A page's declared language has to match the directory it was emitted into,
+  // and any hreflang set has to be reciprocal and carry an x-default. Neither is
+  // visible to the link check below, which only sees hrefs.
+  const declaredLang = text.match(/<html lang="([^"]+)"/)?.[1];
+  const expectedLang = label.startsWith("en/") || label === "en.html" ? "en" : "zh-CN";
+  if (!declaredLang) failures.push(`${label} is missing a lang attribute`);
+  else if (declaredLang !== expectedLang) failures.push(`${label} declares lang="${declaredLang}" but sits under ${expectedLang}`);
+  const alternates = [...text.matchAll(/<link rel="alternate" hreflang="([^"]+)"/g)].map(([, code]) => code);
+  if (alternates.length && !alternates.includes("x-default")) {
+    failures.push(`${label} declares hreflang alternates without an x-default`);
+  }
+  if (alternates.length && !(alternates.includes("en") && alternates.includes("zh-CN"))) {
+    failures.push(`${label} declares an incomplete hreflang set: ${alternates.join(", ")}`);
+  }
   const matches = text.matchAll(/(?:href|src)="([^"]+)"/g);
   for (const [, href] of matches) {
     if (configuredBase && href.startsWith("/") && !href.startsWith(configuredBasePrefix) && !href.startsWith("//")) {
@@ -61,6 +83,19 @@ for (const path of htmlFiles) {
   }
 }
 
+/* This used to re-hash every artifact in dist/downloads/ and compare it against
+ * the digest the release index claimed, catching a page that printed a checksum
+ * the file did not actually have.
+ *
+ * That check has no subject any more. The site no longer hosts the artifacts —
+ * it links to GitHub Releases and prints the digest the API reported, so there
+ * is no local file to hash and nothing to compare a second opinion against. Be
+ * aware of what that costs: a wrong digest from the release feed now reaches the
+ * page unchallenged, where previously it could not survive the build.
+ *
+ * Restoring an equivalent gate means fetching each asset during validation and
+ * hashing it, which is a network round trip per artifact.
+ */
 if (failures.length) {
   console.error(failures.join("\n"));
   process.exit(1);
diff --git a/site/scripts/verify-dev-base.mjs b/site/scripts/verify-dev-base.mjs
new file mode 100644
index 00000000..2ac4d0c8
--- /dev/null
+++ b/site/scripts/verify-dev-base.mjs
@@ -0,0 +1,56 @@
+import assert from "node:assert/strict";
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const host = "127.0.0.1";
+const port = 4322;
+const origin = `http://${host}:${port}`;
+const canonicalOrigin = "https://oneagent.example";
+const astroBin = fileURLToPath(new URL("../node_modules/astro/bin/astro.mjs", import.meta.url));
+const child = spawn(process.execPath, [astroBin, "dev", "--host", host, "--port", String(port)], {
+  cwd: new URL("..", import.meta.url),
+  env: { ...process.env, SITE_URL: canonicalOrigin, BASE_PATH: "/" },
+  stdio: ["ignore", "pipe", "pipe"],
+});
+
+let output = "";
+child.stdout.on("data", (chunk) => { output += chunk; });
+child.stderr.on("data", (chunk) => { output += chunk; });
+
+async function waitForPage() {
+  let lastError;
+  for (let attempt = 0; attempt < 80; attempt += 1) {
+    try {
+      const response = await fetch(origin);
+      if (response.ok) return response.text();
+      lastError = new Error(`HTTP ${response.status}`);
+    } catch (error) {
+      lastError = error;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  throw lastError ?? new Error("Astro dev server did not start");
+}
+
+try {
+  const html = await waitForPage();
+  const base = html.match(/<base href="([^"]+)"/i)?.[1];
+  const canonical = html.match(/<link rel="canonical" href="([^"]+)"/i)?.[1];
+  assert.equal(base, `${origin}/`, "runtime <base> must follow the active dev origin");
+  assert.equal(canonical, `${canonicalOrigin}/`, "canonical must continue to use SITE_URL");
+  console.log(`Verified dev base ${base} with canonical ${canonical}`);
+} catch (error) {
+  console.error(output);
+  throw error;
+} finally {
+  child.kill("SIGTERM");
+  await new Promise((resolve) => {
+    const stop = spawn(process.execPath, [astroBin, "dev", "stop"], {
+      cwd: new URL("..", import.meta.url),
+      env: { ...process.env, SITE_URL: canonicalOrigin, BASE_PATH: "/" },
+      stdio: "ignore",
+    });
+    stop.once("exit", resolve);
+    stop.once("error", resolve);
+  });
+}
diff --git a/site/src/components/ActivationConsole.astro b/site/src/components/ActivationConsole.astro
new file mode 100644
index 00000000..c9c8ad77
--- /dev/null
+++ b/site/src/components/ActivationConsole.astro
@@ -0,0 +1,1485 @@
+---
+import AgentMark from "./AgentMark.astro";
+import { catalog } from "../lib/catalog";
+import { bestLocaleFor, localeFromPath, localePath, switchesLanguage } from "../i18n";
+import { DEMO_CUSTOM_MODEL_HINT, demoStateFor } from "../lib/demo-environment";
+import { recommendedCombination } from "../lib/explorer";
+
+interface Props {
+  id?: string;
+}
+
+const { id = "activation-console" } = Astro.props;
+const locale = localeFromPath(Astro.url.pathname);
+const featuredAgents = catalog.agents.slice(0, 4);
+const recommendation = recommendedCombination(catalog);
+const href = (path: string) => localePath(bestLocaleFor(locale, path), path);
+const copy = locale === "en"
+  ? {
+      label: "Interactive product evidence",
+      sample: "Demo environment",
+      title: "Activation console",
+      subtitle: "A guided example. This page never scans your device or asks for an API key.",
+      idleTitle: "Ready when you are.",
+      idleBody: "Start from the hero action. OneAgent will walk through an example environment without touching this computer.",
+      scanningTitle: "Scanning the example environment",
+      scanningBody: "Reading a deterministic demo scenario — not your browser, files or local services.",
+      agentTitle: "Choose an agent",
+      agentBody: "Capabilities and locked versions come from the repository catalog. Machine state is explicitly illustrative.",
+      providerTitle: "Choose a provider",
+      providerBody: "Compatibility is calculated from the protocol registry. A preview gate never becomes Ready.",
+      verify: "Verify sample connection",
+      verifyingTitle: "Verifying the sample protocol",
+      verifyingBody: "No credential is submitted. The outcome follows the selected catalog compatibility level.",
+      resultLabel: "Example outcome",
+      reset: "Reset demo",
+      download: "Download OneAgent",
+      explore: "Open full Explorer",
+      security: "Release policy",
+      installed: "Installed",
+      notInstalled: "Not installed",
+      configured: "Configured",
+      needsSetup: "Needs setup",
+      officialGuide: "Official guide",
+      recommended: "Recommended path",
+      locked: "Locked",
+      noLockedVersion: "Official release",
+      command: "Launch",
+      managed: "Managed config",
+      guide: "Official setup",
+      facts: ["No device access", "No API key field", "Registry-derived compatibility"],
+      steps: ["Agent", "Setup", "Provider", "Model", "Confirm"],
+      modeTitle: "How should this agent be configured?",
+      modeBody: "OneAgent can point the agent at a model service, or leave an account you already use in place.",
+      modeProvider: "Configure a model service",
+      modeProviderHint: "Choose a provider or your own endpoint, then verify the protocol before anything is written.",
+      modeExisting: "Keep an existing account or config",
+      modeExistingHint: "Already signed in, or already configured? The provider and model steps are skipped.",
+      customName: "Custom endpoint",
+      customVerdict: "Your own OpenAI-compatible URL",
+      customLabel: "Base URL",
+      customPlaceholder: "https://api.example.com/openai",
+      customHint: "Any OpenAI-compatible endpoint. Validated the same way the app validates it.",
+      register: "Need a key? Open PPIO",
+      registerNote: "Opens ppio.com in a new tab. OneAgent has no account of its own.",
+      urlRequired: "Enter a base URL.",
+      urlScheme: "Must start with http:// or https://",
+      urlCredentials: "Remove the username or password from the URL.",
+      urlControl: "Remove control characters from the URL.",
+      urlOk: "Endpoint accepted",
+      modelTitle: "Choose a model",
+      modelBody: "The app reads this list from the endpoint itself. Pick one, or type an id if discovery comes back empty.",
+      modelManual: "Discovery empty? Enter an id",
+      modelManualLabel: "Model id",
+      confirm: "Confirm activation",
+      skipped: "Skipped",
+      /* The real window's sidebar is a workspace nav, not a progress list — the
+         stepper lives in the page header. These are its actual four entries. */
+      navItems: ["Activate", "Overview", "Providers", "Templates"],
+      sidebarNote: "Configuration stays on this machine",
+      footerIdle: "The demo never touches this device",
+      chineseOnly: "in Chinese",
+    }
+  : {
+      label: "可操作的产品证据",
+      sample: "示例环境",
+      title: "激活控制台",
+      subtitle: "这是引导演示。页面不会扫描你的设备，也不会要求输入 API Key。",
+      idleTitle: "等待你启动演示。",
+      idleBody: "从首屏主按钮开始，OneAgent 将演示一次完整激活路径，但不会访问这台电脑。",
+      scanningTitle: "正在扫描示例环境",
+      scanningBody: "读取确定性的演示场景，不读取浏览器、本机文件或本地服务。",
+      agentTitle: "选择一个 Agent",
+      agentBody: "能力与锁定版本来自仓库目录；安装和配置状态明确属于示例。",
+      providerTitle: "选择一个 Provider",
+      providerBody: "兼容结果来自协议注册表；预览门禁不会被升级成 Ready。",
+      verify: "验证示例连接",
+      verifyingTitle: "正在验证示例协议",
+      verifyingBody: "不会提交任何凭证；结果严格跟随所选组合的兼容等级。",
+      resultLabel: "示例结果",
+      reset: "重置演示",
+      download: "下载 OneAgent",
+      explore: "打开完整配置目录",
+      security: "发行政策",
+      installed: "已安装",
+      notInstalled: "未安装",
+      configured: "已配置",
+      needsSetup: "待配置",
+      officialGuide: "官方引导",
+      recommended: "推荐路径",
+      locked: "锁定版本",
+      noLockedVersion: "官方发行",
+      command: "启动命令",
+      managed: "托管配置",
+      guide: "官方设置",
+      facts: ["不访问设备", "不提供 Key 输入框", "兼容结论来自注册表"],
+      steps: ["Agent", "配置", "Provider", "模型", "确认"],
+      modeTitle: "这个 Agent 怎么配置？",
+      modeBody: "可以由 OneAgent 指向某个模型服务，也可以保留你已经在用的账号。",
+      modeProvider: "配置模型服务",
+      modeProviderHint: "选择 Provider 或你自己的端点，写入前先验证协议。",
+      modeExisting: "使用已有账号或配置",
+      modeExistingHint: "已经登录、或已经配置好？Provider 与模型两步会跳过。",
+      customName: "自定义端点",
+      customVerdict: "你自己的 OpenAI 兼容地址",
+      customLabel: "Base URL",
+      customPlaceholder: "https://api.example.com/openai",
+      customHint: "任何 OpenAI 兼容端点。校验规则与应用内一致。",
+      register: "还没有 Key？打开 PPIO",
+      registerNote: "在新标签页打开 ppio.com。OneAgent 自身没有账号体系。",
+      urlRequired: "请填写 Base URL。",
+      urlScheme: "需要以 http:// 或 https:// 开头。",
+      urlCredentials: "请从地址中去掉用户名或密码。",
+      urlControl: "请去掉地址中的控制字符。",
+      urlOk: "端点可用",
+      modelTitle: "选择模型",
+      modelBody: "应用会从端点自身读取这个列表。选一个，或在发现结果为空时手动输入 ID。",
+      modelManual: "列表为空？手动输入 ID",
+      modelManualLabel: "模型 ID",
+      confirm: "确认激活",
+      skipped: "已跳过",
+      /* The real window's sidebar is a workspace nav, not a progress list — the
+         stepper lives in the page header. These are its actual four entries. */
+      navItems: ["激活环境", "环境总览", "Provider", "配置模板"],
+      sidebarNote: "配置只保存在本机",
+      footerIdle: "演示不会访问这台设备",
+      chineseOnly: "仅中文",
+    };
+---
+<div class="product-shot activation-shell">
+  <activation-console id={id} data-locale={locale} data-phase="idle">
+    <div class="activation-window" tabindex="-1" data-console-window>
+      <header class="activation-topbar">
+        <div>
+          <span class="activation-kicker">{copy.label}</span>
+          <strong>{copy.title}</strong>
+        </div>
+        <span class="activation-sample"><span aria-hidden="true"></span>{copy.sample}</span>
+      </header>
+
+      <div class="activation-body">
+        <aside class="activation-rail" aria-label={locale === "en" ? "Workspace" : "工作区"}>
+          <div class="activation-rail-brand">
+            <span class="activation-monogram" aria-hidden="true">OA</span>
+            <div><strong>OneAgent</strong><span>{copy.sample}</span></div>
+          </div>
+          {/* Presentational: the real sidebar navigates a workspace, but nothing
+              here is navigable, so these are not links or buttons. */}
+          <div class="activation-nav" aria-hidden="true">
+            {copy.navItems.map((item, index) => (
+              <span class:list={["activation-nav-item", { "is-active": index === 0 }]}>{item}</span>
+            ))}
+          </div>
+          <p class="activation-rail-note">{copy.sidebarNote}</p>
+        </aside>
+
+        <div class="activation-main">
+          <div class="activation-heading">
+            <div>
+              <span class="activation-state-label" data-state-label>{copy.sample}</span>
+              <h2>{copy.title}</h2>
+              <p class="activation-subtitle">{copy.subtitle}</p>
+            </div>
+            <span class="activation-status" data-status><span aria-hidden="true"></span><b>Idle</b></span>
+          </div>
+          <ol class="activation-steps">
+            {copy.steps.map((step, index) => (
+              <li data-step={index + 1}>
+                <span class="activation-step-marker">{index + 1}</span>
+                <strong>{step}</strong>
+              </li>
+            ))}
+          </ol>
+
+          <section class="activation-panel" data-panel="idle" tabindex="-1">
+            <div class="activation-empty-mark" aria-hidden="true"><span></span><span></span><span></span></div>
+            <div>
+              <h3>{copy.idleTitle}</h3>
+              <p>{copy.idleBody}</p>
+            </div>
+          </section>
+
+          <section class="activation-panel activation-progress" data-panel="scanning" tabindex="-1" hidden>
+            <div class="activation-scan" aria-hidden="true"><span></span></div>
+            <div>
+              <h3>{copy.scanningTitle}</h3>
+              <p>{copy.scanningBody}</p>
+            </div>
+          </section>
+
+          <section class="activation-panel activation-choice-panel" data-panel="agent" tabindex="-1" hidden>
+            <div class="activation-panel-copy">
+              <h3>{copy.agentTitle}</h3>
+              <p>{copy.agentBody}</p>
+            </div>
+            <div class="activation-agent-grid" role="group" aria-label={copy.agentTitle}>
+              {featuredAgents.map((agent) => {
+                const demo = demoStateFor(agent);
+                return (
+                  <button
+                    type="button"
+                    class="activation-agent"
+                    data-agent-id={agent.id}
+                    aria-pressed="false"
+                  >
+                    <AgentMark id={agent.id} name={agent.name} size={28} />
+                    <span class="activation-agent-copy">
+                      <strong>{agent.name}</strong>
+                      <small>
+                        {demo.installed ? copy.installed : copy.notInstalled}
+                        {agent.lockedVersion ? ` · ${copy.locked} ${agent.lockedVersion}` : ` · ${copy.noLockedVersion}`}
+                      </small>
+                    </span>
+                    <span class:list={["activation-agent-state", `is-${demo.status}`]}>
+                      {agent.support.officialInstallGuide ? copy.officialGuide : demo.configured ? copy.configured : copy.needsSetup}
+                    </span>
+                    {recommendation?.agentId === agent.id && <span class="activation-recommended">{copy.recommended}</span>}
+                  </button>
+                );
+              })}
+            </div>
+          </section>
+
+          <section class="activation-panel activation-choice-panel" data-panel="mode" tabindex="-1" hidden>
+            <div class="activation-panel-copy">
+              <h3>{copy.modeTitle}</h3>
+              <p>{copy.modeBody}</p>
+            </div>
+            <div class="activation-mode-grid" role="group" aria-label={copy.modeTitle}>
+              <button type="button" class="activation-mode" data-mode="provider" aria-pressed="false">
+                <strong>{copy.modeProvider}</strong>
+                <small>{copy.modeProviderHint}</small>
+              </button>
+              <button type="button" class="activation-mode" data-mode="existing-account" aria-pressed="false">
+                <strong>{copy.modeExisting}</strong>
+                <small>{copy.modeExistingHint}</small>
+              </button>
+            </div>
+          </section>
+
+          <section class="activation-panel activation-choice-panel" data-panel="provider" tabindex="-1" hidden>
+            <div class="activation-panel-copy">
+              <h3>{copy.providerTitle}</h3>
+              <p>{copy.providerBody}</p>
+            </div>
+            <div class="activation-selection-line">
+              <span data-selected-agent>—</span>
+              <span aria-hidden="true">→</span>
+              <span data-selected-protocol>—</span>
+            </div>
+            <div class="activation-provider-grid" role="group" aria-label={copy.providerTitle}>
+              {catalog.providers.map((provider) => (
+                <button type="button" class="activation-provider" data-provider-id={provider.id} aria-pressed="false">
+                  <span><strong>{provider.name}</strong><small data-provider-verdict>—</small></span>
+                  <span class="activation-provider-arrow" aria-hidden="true">↗</span>
+                </button>
+              ))}
+              <button type="button" class="activation-provider is-custom" data-provider-id="custom" aria-pressed="false">
+                <span><strong>{copy.customName}</strong><small>{copy.customVerdict}</small></span>
+                <span class="activation-provider-arrow" aria-hidden="true">+</span>
+              </button>
+            </div>
+            <div class="activation-custom" data-custom-field hidden>
+              <label for={`${id}-base-url`}>{copy.customLabel}</label>
+              <input
+                id={`${id}-base-url`}
+                type="url"
+                inputmode="url"
+                autocomplete="off"
+                spellcheck="false"
+                placeholder={copy.customPlaceholder}
+                data-custom-input
+                aria-describedby={`${id}-base-url-hint`}
+              />
+              <p class="activation-custom-hint" id={`${id}-base-url-hint`} data-custom-hint data-idle={copy.customHint} data-kind="idle">{copy.customHint}</p>
+              <a class="activation-register" href="https://ppio.com/" target="_blank" rel="noopener noreferrer">
+                {copy.register}
+                <small>{copy.registerNote}</small>
+              </a>
+            </div>
+          </section>
+
+          <section class="activation-panel activation-choice-panel" data-panel="model" tabindex="-1" hidden>
+            <div class="activation-panel-copy">
+              <h3>{copy.modelTitle}</h3>
+              <p>{copy.modelBody}</p>
+            </div>
+            <div class="activation-model-grid" role="group" aria-label={copy.modelTitle} data-model-grid></div>
+            <details class="activation-manual">
+              <summary>{copy.modelManual}</summary>
+              <label for={`${id}-model-id`}>{copy.modelManualLabel}</label>
+              <input
+                id={`${id}-model-id`}
+                type="text"
+                autocomplete="off"
+                spellcheck="false"
+                placeholder={DEMO_CUSTOM_MODEL_HINT}
+                data-model-input
+              />
+            </details>
+          </section>
+
+          <section class="activation-panel activation-progress" data-panel="verifying" tabindex="-1" hidden>
+            <div class="activation-scan is-verify" aria-hidden="true"><span></span></div>
+            <div>
+              <h3>{copy.verifyingTitle}</h3>
+              <p>{copy.verifyingBody}</p>
+              <div class="activation-verifying-pair"><strong data-verifying-agent>—</strong><span>×</span><strong data-verifying-provider>—</strong></div>
+            </div>
+          </section>
+
+          <section class="activation-panel activation-result" data-panel="result" tabindex="-1" hidden>
+            <div class="activation-result-icon" aria-hidden="true" data-result-icon><svg viewBox="0 0 32 32"><path data-result-path d="M7 17l6 6L26 9"></path></svg></div>
+            <div>
+              <span class="activation-state-label">{copy.resultLabel}</span>
+              <h3 data-result-title>—</h3>
+              <p data-result-body>—</p>
+              <div class="activation-result-meta"><strong data-result-agent>—</strong><span>→</span><strong data-result-provider>—</strong></div>
+              <div class="activation-result-actions">
+                <a class="button button-primary" href={href("downloads/")} data-ready-action hidden>{copy.download}</a>
+                <a class="button button-secondary" href={href("explore/")} data-explore-action>{copy.explore}</a>
+                <a class="button button-text" href={href("security/")} data-security-action hidden>
+                  {copy.security}
+                  {switchesLanguage(locale, "security/") && <span class="lang-hint">{copy.chineseOnly}</span>}
+                </a>
+              </div>
+            </div>
+          </section>
+
+          <div class="activation-log-wrap">
+            <span>{locale === "en" ? "EVENT LOG" : "事件日志"}</span>
+            <ol class="activation-log" data-log aria-live="polite" aria-relevant="additions" tabindex="0" aria-label={locale === "en" ? "Activation demo event log" : "激活演示事件日志"}>
+              <li>{locale === "en" ? "Demo idle. No device access requested." : "演示待机，未请求设备访问。"}</li>
+            </ol>
+          </div>
+        </div>
+
+        {/* The real window keeps its primary action in a fixed footer bar rather
+            than inside the scrolling body, so the next step is always in the same
+            place. The note on the left is where the app puts its own context. */}
+        <footer class="activation-footer">
+          <p class="activation-footer-note" data-footer-note>{copy.footerIdle}</p>
+          <div class="activation-footer-actions">
+            <button class="activation-reset" type="button" data-reset hidden>{copy.reset}</button>
+            <button class="button button-small button-primary" type="button" data-verify hidden disabled>{copy.verify}</button>
+            <button class="button button-small button-primary" type="button" data-confirm hidden disabled>{copy.confirm}</button>
+          </div>
+        </footer>
+      </div>
+
+      <footer class="activation-facts">
+        {copy.facts.map((fact) => <span><i aria-hidden="true"></i>{fact}</span>)}
+      </footer>
+    </div>
+  </activation-console>
+</div>
+
+<script>
+  import { catalog } from "../lib/catalog";
+  import {
+    CUSTOM_PROVIDER_ID,
+    activationReducer,
+    initialActivationState,
+    validateDemoBaseUrl,
+    type ActivationState,
+    type ConfigMode,
+  } from "../lib/activation";
+  import { demoModelsFor } from "../lib/demo-environment";
+  import { compatibilityFor, recommendedCombination } from "../lib/explorer";
+
+
+  const messages = {
+    "zh-CN": {
+      status: {
+        idle: "待机",
+        scanning: "扫描示例",
+        agent: "选择 Agent",
+        mode: "配置方式",
+        provider: "选择 Provider",
+        model: "选择模型",
+        verifying: "验证示例",
+        ready: "Ready",
+        "guide-only": "官方引导",
+        "preview-gate": "预览门禁",
+        unsupported: "不兼容",
+        error: "演示错误",
+      },
+      log: {
+        scanning: "开始扫描示例环境；未访问本机。",
+        scanned: "示例扫描完成，可以选择 Agent。",
+        agent: (name: string) => `已选择 ${name}。`,
+        guide: (name: string) => `${name} 需要使用官方设置流程。`,
+        modeProvider: "将由 OneAgent 配置模型服务。",
+        modeExisting: "沿用已有账号或配置；Provider 与模型步骤已跳过。",
+        provider: (name: string, verdict: string) => `已选择 ${name}：${verdict}。`,
+        custom: "已选择自定义端点；地址通过与应用一致的校验后才能验证。",
+        customRejected: (reason: string) => `端点未通过校验：${reason}`,
+        customAccepted: (url: string) => `端点校验通过：${url}`,
+        verifying: "开始验证示例连接；未提交任何凭证。",
+        verified: "示例协议验证完成，可以选择模型。",
+        models: (count: number) => `端点返回 ${count} 个示例模型。`,
+        model: (id: string) => `已选择模型 ${id}。`,
+        ready: "示例环境可进入 Ready。",
+        preview: "连接路径可演示，但公开状态仍要求发布候选验证。",
+        unsupported: "所选 Provider 不支持该 Agent 所需协议。",
+        error: "演示状态无效，请重置后重试。",
+      },
+      compatibility: {
+        verified: "注册表已验证",
+        supported: "实现支持",
+        "preview-gate": "需要发布候选验证",
+        unsupported: "协议不兼容",
+      },
+      result: {
+        ready: ["示例环境已 Ready", "所选组合可按当前实现路径完成配置与协议验证。真实激活将在本地 OneAgent 中完成。"],
+        existing: ["保留现有账号", "OneAgent 只把这个 Agent 标记为已就绪，不改动它现有的登录状态，也不写入新的凭证。"],
+        guide: ["转入官方设置", "这个 Agent 不由 OneAgent 写入私有配置。请按官方方式安装或登录，再回到 OneAgent 查看环境。"],
+        preview: ["仍需通过发布门禁", "示例连接可以继续，但该协议组合仍标记为需要发布候选验证，因此不会被宣称为 Ready。"],
+        unsupported: ["协议组合不兼容", "请返回并选择支持该 Agent 协议的 Provider。OneAgent 不会静默降级到其他协议。"],
+        error: ["演示无法继续", "状态不完整或目录发生变化。请重置演示后重新选择。"],
+      },
+      protocol: { openai: "Chat Completions", anthropic: "Anthropic Messages", responses: "OpenAI Responses" },
+      url: {
+        required: "请填写 Base URL。",
+        scheme: "需要以 http:// 或 https:// 开头。",
+        credentials: "请从地址中去掉用户名或密码。",
+        "control-characters": "请去掉地址中的控制字符。",
+        ok: "端点可用",
+      },
+      skipped: "已跳过",
+      /* The app puts step context in the footer bar next to the action. */
+      footer: {
+        idle: "演示不会访问这台设备",
+        scanning: "正在读取示例环境",
+        agent: "从上面选一个 Agent",
+        mode: "选择配置方式",
+        provider: "选择 Provider 或填入你自己的端点",
+        model: "选择一个模型后确认",
+        verifying: "正在验证，未提交凭证",
+        ready: "示例流程已完成",
+        "guide-only": "这个 Agent 走官方流程",
+        "preview-gate": "组合可演示，但未通过发布门禁",
+        unsupported: "请换一个支持该协议的 Provider",
+        error: "请重置演示后重试",
+      },
+    },
+    en: {
+      status: {
+        idle: "Idle",
+        scanning: "Scanning demo",
+        agent: "Choose agent",
+        mode: "Setup",
+        provider: "Choose provider",
+        model: "Choose model",
+        verifying: "Verifying demo",
+        ready: "Ready",
+        "guide-only": "Official guide",
+        "preview-gate": "Preview gate",
+        unsupported: "Unsupported",
+        error: "Demo error",
+      },
+      log: {
+        scanning: "Started scanning the example environment; no device access requested.",
+        scanned: "Example scan complete. Choose an agent.",
+        agent: (name: string) => `Selected ${name}.`,
+        guide: (name: string) => `${name} uses its official setup flow.`,
+        modeProvider: "OneAgent will configure a model service.",
+        modeExisting: "Keeping the existing account or config; provider and model steps skipped.",
+        provider: (name: string, verdict: string) => `Selected ${name}: ${verdict}.`,
+        custom: "Selected a custom endpoint. The URL is validated the same way the app validates it.",
+        customRejected: (reason: string) => `Endpoint rejected: ${reason}`,
+        customAccepted: (url: string) => `Endpoint accepted: ${url}`,
+        verifying: "Started sample verification; no credential was submitted.",
+        verified: "Sample protocol verification completed. Choose a model.",
+        models: (count: number) => `The endpoint returned ${count} example models.`,
+        model: (id: string) => `Selected model ${id}.`,
+        ready: "The example environment may reach Ready.",
+        preview: "The path can be demonstrated, but the public status still requires release-candidate verification.",
+        unsupported: "The selected provider does not support the protocol this agent requires.",
+        error: "The demo state is invalid. Reset and try again.",
+      },
+      compatibility: {
+        verified: "Registry verified",
+        supported: "Implementation supported",
+        "preview-gate": "Release candidate required",
+        unsupported: "Protocol incompatible",
+      },
+      result: {
+        ready: ["Example environment is Ready", "This combination can follow the current configuration and protocol-verification path. Real activation happens in the local OneAgent app."],
+        existing: ["Existing account kept", "OneAgent marks this agent ready without touching its current sign-in or writing a new credential."],
+        guide: ["Continue with official setup", "OneAgent does not write private configuration for this agent. Install or sign in through the official flow, then return to review the environment."],
+        preview: ["A release gate remains", "The sample path can continue, but this protocol combination still requires release-candidate verification and is not presented as Ready."],
+        unsupported: ["Protocol combination unsupported", "Go back and choose a provider that supports the agent protocol. OneAgent never silently falls back to another protocol."],
+        error: ["The demo cannot continue", "The selection is incomplete or the catalog changed. Reset the demo and choose again."],
+      },
+      protocol: { openai: "Chat Completions", anthropic: "Anthropic Messages", responses: "OpenAI Responses" },
+      url: {
+        required: "Enter a base URL.",
+        scheme: "Must start with http:// or https://",
+        credentials: "Remove the username or password from the URL.",
+        "control-characters": "Remove control characters from the URL.",
+        ok: "Endpoint accepted",
+      },
+      skipped: "Skipped",
+      /* The app puts step context in the footer bar next to the action. */
+      footer: {
+        idle: "The demo never touches this device",
+        scanning: "Reading the example environment",
+        agent: "Choose an agent above",
+        mode: "Choose how to configure it",
+        provider: "Choose a provider, or enter your own endpoint",
+        model: "Choose a model, then confirm",
+        verifying: "Verifying — no credential submitted",
+        ready: "The example flow is complete",
+        "guide-only": "This agent uses its official flow",
+        "preview-gate": "Demonstrable, but the release gate remains",
+        unsupported: "Choose a provider that supports this protocol",
+        error: "Reset the demo and try again",
+      },
+    },
+  } as const;
+
+  /* The unattended walkthrough. Selection steps get a beat long enough to read
+     the panel that just appeared; the two probe steps reuse the timings the
+     manual path already uses, so an autoplayed run and a clicked one look the
+     same rather than one feeling rushed. */
+  type AutoplayStep = { delay: number; run: (element: ActivationConsoleElement) => void };
+  const AUTOPLAY_SCRIPT: AutoplayStep[] = [
+    { delay: 420, run: (element) => element.start() },
+    { delay: 1500, run: (element) => element.selectAgent("claude-code") },
+    { delay: 900, run: (element) => element.selectMode("provider") },
+    { delay: 900, run: (element) => element.selectProvider("ppio") },
+    { delay: 900, run: (element) => element.verify() },
+    { delay: 1100, run: (element) => element.selectModel(element.models[0] ?? "", false) },
+    { delay: 900, run: (element) => element.confirm() },
+  ];
+
+  class ActivationConsoleElement extends HTMLElement {
+    state: ActivationState = initialActivationState();
+    timer: number | null = null;
+    abort = new AbortController();
+    /* Autoplay owns the state machine only until the visitor touches it. Both
+       flags are one-way: `autoplaying` suppresses the focus and scroll side
+       effects that would hijack the page, and `autoplayDone` makes takeover and
+       completion permanent so nothing re-arms behind the visitor's back. */
+    autoplaying = false;
+    autoplayDone = false;
+    autoplayTimer: number | null = null;
+    observer: IntersectionObserver | null = null;
+
+    connectedCallback() {
+      if (this.dataset.initialized === "true") return;
+      this.dataset.initialized = "true";
+      const signal = this.abort.signal;
+      this.querySelectorAll<HTMLButtonElement>("[data-agent-id]").forEach((button) => {
+        button.addEventListener("click", () => this.selectAgent(button.dataset.agentId || ""), { signal });
+      });
+      this.querySelectorAll<HTMLButtonElement>("[data-mode]").forEach((button) => {
+        button.addEventListener("click", () => this.selectMode(button.dataset.mode as ConfigMode), { signal });
+      });
+      this.querySelectorAll<HTMLButtonElement>("[data-provider-id]").forEach((button) => {
+        button.addEventListener("click", () => this.selectProvider(button.dataset.providerId || ""), { signal });
+      });
+      this.querySelector<HTMLInputElement>("[data-custom-input]")?.addEventListener("input", (event) => {
+        this.setCustomBaseUrl((event.currentTarget as HTMLInputElement).value);
+      }, { signal });
+      this.querySelector<HTMLInputElement>("[data-model-input]")?.addEventListener("input", (event) => {
+        this.selectModel((event.currentTarget as HTMLInputElement).value.trim(), false);
+      }, { signal });
+      this.querySelector<HTMLButtonElement>("[data-confirm]")?.addEventListener("click", () => this.confirm(), { signal });
+      this.querySelector<HTMLButtonElement>("[data-verify]")?.addEventListener("click", () => this.verify(), { signal });
+      this.querySelector<HTMLButtonElement>("[data-reset]")?.addEventListener("click", () => this.reset(), { signal });
+      document.querySelectorAll<HTMLButtonElement>(`[data-activation-trigger="${this.id}"]`).forEach((button) => {
+        // The trigger sits in the hero, outside this element, so it misses the
+        // takeover listeners below. Pressing it is the clearest takeover there
+        // is: after autoplay has run it is the replay entry.
+        button.addEventListener("click", () => {
+          this.cancelAutoplay();
+          this.start();
+        }, { signal });
+      });
+      /* Any of the three means the visitor is driving. They are captured on the
+         way down so takeover is recorded before the click handler above runs its
+         own step, and they cover the keyboard and screen-reader paths that never
+         produce a pointer event. */
+      for (const type of ["pointerdown", "keydown", "focusin"] as const) {
+        this.addEventListener(type, () => this.cancelAutoplay(), { signal, capture: true });
+      }
+      this.render();
+      this.armAutoplay();
+    }
+
+    disconnectedCallback() {
+      if (this.timer !== null) window.clearTimeout(this.timer);
+      if (this.autoplayTimer !== null) window.clearTimeout(this.autoplayTimer);
+      this.observer?.disconnect();
+      this.abort.abort();
+    }
+
+    /* Autoplay waits for the console to be half on screen: running it on load
+       would finish before a visitor scrolling down ever saw it. Reduced motion
+       opts out entirely — advancing the interface on its own is motion, and the
+       manual trigger still works.  */
+    armAutoplay() {
+      if (this.reducedMotion || this.dataset.autoplay === "off") return;
+      if (typeof IntersectionObserver !== "function") return;
+      this.observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          this.observer?.disconnect();
+          this.observer = null;
+          this.startAutoplay();
+        }
+      }, { threshold: 0.5 });
+      this.observer.observe(this);
+    }
+
+    startAutoplay() {
+      if (this.autoplayDone || this.state.phase !== "idle") return;
+      this.autoplaying = true;
+      this.dataset.autoplaying = "true";
+      this.queueAutoplay(0);
+    }
+
+    queueAutoplay(index: number) {
+      const step = AUTOPLAY_SCRIPT[index];
+      if (!step) return this.finishAutoplay();
+      this.autoplayTimer = window.setTimeout(() => {
+        this.autoplayTimer = null;
+        if (!this.autoplaying) return;
+        step.run(this);
+        // A step that lands somewhere the script did not plan for — a catalog
+        // change turning the combination into a gate — stops here rather than
+        // dispatching actions the reducer would reject.
+        if (!this.autoplaying) return;
+        this.queueAutoplay(index + 1);
+      }, step.delay);
+    }
+
+    /** Autoplay reached the end on its own: stop, and never re-arm. */
+    finishAutoplay() {
+      this.autoplaying = false;
+      this.autoplayDone = true;
+      delete this.dataset.autoplaying;
+    }
+
+    /** The visitor took over. Whatever step is showing is where it stays. */
+    cancelAutoplay() {
+      this.observer?.disconnect();
+      this.observer = null;
+      if (this.autoplayTimer !== null) window.clearTimeout(this.autoplayTimer);
+      this.autoplayTimer = null;
+      this.autoplaying = false;
+      this.autoplayDone = true;
+      delete this.dataset.autoplaying;
+    }
+
+    get locale() {
+      return this.dataset.locale === "en" ? "en" : "zh-CN";
+    }
+
+    get copy() {
+      return messages[this.locale];
+    }
+
+    get reducedMotion() {
+      return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+
+    dispatch(action: Parameters<typeof activationReducer>[1]) {
+      this.state = activationReducer(this.state, action, catalog);
+      this.render();
+    }
+
+    start() {
+      if (this.state.phase !== "idle") this.reset(false);
+      this.dispatch({ type: "start" });
+      this.replaceLog(this.copy.log.scanning);
+      // Autoplay only begins once the console is already half on screen, so
+      // scrolling it to centre would move the page out from under a reader who
+      // asked for nothing.
+      if (!this.autoplaying) this.scrollIntoView({ behavior: this.reducedMotion ? "auto" : "smooth", block: "center" });
+      this.focusPanel("scanning");
+      this.timer = window.setTimeout(() => {
+        this.dispatch({ type: "scan-complete" });
+        this.appendLog(this.copy.log.scanned);
+        this.focusPanel("agent");
+      }, this.reducedMotion ? 0 : 650);
+    }
+
+    reset(focus = true) {
+      if (this.timer !== null) window.clearTimeout(this.timer);
+      this.timer = null;
+      this.dispatch({ type: "reset" });
+      this.replaceLog(this.locale === "en" ? "Demo idle. No device access requested." : "演示待机，未请求设备访问。");
+      if (focus) this.focusPanel("idle");
+    }
+
+    selectAgent(agentId: string) {
+      const agent = catalog.agents.find((candidate) => candidate.id === agentId);
+      if (!agent) return this.fail();
+      this.dispatch({ type: "select-agent", agentId });
+      this.appendLog(this.copy.log.agent(agent.name));
+      if (this.state.phase === "guide-only") {
+        this.appendLog(this.copy.log.guide(agent.name));
+        this.focusPanel("result");
+      } else {
+        this.updateProviders(agentId);
+        this.focusPanel("mode");
+      }
+    }
+
+    selectMode(mode: ConfigMode) {
+      if (mode !== "provider" && mode !== "existing-account") return this.fail();
+      this.dispatch({ type: "select-mode", mode });
+      if (this.state.phase === "ready") {
+        this.appendLog(this.copy.log.modeExisting);
+        this.focusPanel("result");
+        return;
+      }
+      this.appendLog(this.copy.log.modeProvider);
+      this.focusPanel("provider");
+    }
+
+    selectProvider(providerId: string) {
+      if (providerId === CUSTOM_PROVIDER_ID) {
+        this.dispatch({ type: "select-provider", providerId });
+        this.appendLog(this.copy.log.custom);
+        this.querySelector<HTMLInputElement>("[data-custom-input]")?.focus();
+        return;
+      }
+      const provider = catalog.providers.find((candidate) => candidate.id === providerId);
+      if (!provider) return this.fail();
+      this.dispatch({ type: "select-provider", providerId });
+      const verdict = this.state.compatibility ? this.copy.compatibility[this.state.compatibility] : this.copy.compatibility.unsupported;
+      this.appendLog(this.copy.log.provider(provider.name, verdict));
+      if (this.state.phase === "unsupported") {
+        this.appendLog(this.copy.log.unsupported);
+        this.focusPanel("result");
+      }
+    }
+
+    setCustomBaseUrl(value: string) {
+      this.dispatch({ type: "set-custom-base-url", value });
+    }
+
+    selectModel(model: string, fromList = true) {
+      if (!model) return;
+      this.dispatch({ type: "select-model", model });
+      if (this.state.model === model) this.appendLog(this.copy.log.model(model));
+      if (fromList) this.querySelector<HTMLButtonElement>("[data-confirm]")?.focus();
+    }
+
+    confirm() {
+      this.dispatch({ type: "confirm" });
+      if (this.state.phase !== "ready") return;
+      this.appendLog(this.copy.log.ready);
+      this.focusPanel("result");
+    }
+
+    verify() {
+      const before = this.state.phase;
+      this.dispatch({ type: "verify" });
+      if (this.state.phase === "error") return this.fail(false);
+      // A rejected endpoint leaves the phase untouched rather than erroring, the
+      // same non-event as the product's disabled probe button.
+      if (this.state.phase === before) return;
+      this.appendLog(this.copy.log.verifying);
+      this.focusPanel("verifying");
+      this.timer = window.setTimeout(() => {
+        this.dispatch({ type: "verify-complete" });
+        if (this.state.phase === "model") {
+          this.appendLog(this.copy.log.verified);
+          this.renderModels();
+          this.appendLog(this.copy.log.models(this.models.length));
+          this.focusPanel("model");
+          return;
+        }
+        if (this.state.phase === "preview-gate") this.appendLog(this.copy.log.preview);
+        this.focusPanel("result");
+      }, this.reducedMotion ? 0 : 700);
+    }
+
+    get models() {
+      return this.state.providerId === CUSTOM_PROVIDER_ID ? [] : demoModelsFor(this.state.providerId);
+    }
+
+    footerNoteFor(phase: ActivationState["phase"]) {
+      return this.copy.footer[phase];
+    }
+
+    customHost() {
+      const check = validateDemoBaseUrl(this.state.customBaseUrl);
+      if (!check.ok) return "";
+      try {
+        return new URL(check.value).host;
+      } catch {
+        return "";
+      }
+    }
+
+    renderModels() {
+      const grid = this.querySelector<HTMLElement>("[data-model-grid]");
+      if (!grid) return;
+      grid.replaceChildren();
+      for (const model of this.models) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "activation-model";
+        button.dataset.model = model;
+        button.setAttribute("aria-pressed", "false");
+        button.textContent = model;
+        button.addEventListener("click", () => this.selectModel(model), { signal: this.abort.signal });
+        grid.append(button);
+      }
+      // A custom endpoint publishes no list, so the manual entry is the path
+      // rather than a fallback — open it instead of showing an empty group.
+      const manual = this.querySelector<HTMLDetailsElement>(".activation-manual");
+      if (manual) manual.open = this.models.length === 0;
+      grid.hidden = this.models.length === 0;
+    }
+
+    fail(dispatch = true) {
+      if (dispatch) this.dispatch({ type: "fail" });
+      this.appendLog(this.copy.log.error);
+      this.focusPanel("result");
+    }
+
+    updateProviders(agentId: string) {
+      const agent = catalog.agents.find((candidate) => candidate.id === agentId);
+      if (!agent) return;
+      const recommendation = recommendedCombination(catalog);
+      this.querySelectorAll<HTMLButtonElement>("[data-provider-id]").forEach((button) => {
+        const provider = catalog.providers.find((candidate) => candidate.id === button.dataset.providerId);
+        if (!provider) return;
+        const compatibility = compatibilityFor(agent, provider);
+        button.dataset.compatibility = compatibility;
+        button.classList.toggle("is-recommended", recommendation?.agentId === agent.id && recommendation.providerId === provider.id);
+        const verdict = button.querySelector<HTMLElement>("[data-provider-verdict]");
+        if (verdict) verdict.textContent = this.copy.compatibility[compatibility];
+        button.setAttribute("aria-label", `${provider.name}: ${this.copy.compatibility[compatibility]}`);
+      });
+    }
+
+    replaceLog(message: string) {
+      const log = this.querySelector<HTMLOListElement>("[data-log]");
+      if (!log) return;
+      log.replaceChildren();
+      this.appendLog(message);
+    }
+
+    appendLog(message: string) {
+      const log = this.querySelector<HTMLOListElement>("[data-log]");
+      if (!log) return;
+      const item = document.createElement("li");
+      item.textContent = message;
+      log.append(item);
+      log.scrollTop = log.scrollHeight;
+    }
+
+    /* Moving focus is right when the visitor asked for the step — it carries a
+       keyboard user forward. During autoplay nobody asked, so taking focus would
+       pull it out of whatever they were reading or tabbing through. The panels
+       stay an aria-live region either way, so the steps are still announced. */
+    focusPanel(name: string) {
+      if (this.autoplaying) return;
+      window.requestAnimationFrame(() => this.querySelector<HTMLElement>(`[data-panel="${name}"]`)?.focus({ preventScroll: true }));
+    }
+
+    render() {
+      const phase = this.state.phase;
+      this.dataset.phase = phase;
+      const panel = ["idle", "scanning", "agent", "mode", "provider", "model", "verifying"].includes(phase) ? phase : "result";
+      this.querySelectorAll<HTMLElement>("[data-panel]").forEach((element) => {
+        element.hidden = element.dataset.panel !== panel;
+      });
+
+      const status = this.querySelector<HTMLElement>("[data-status]");
+      if (status) {
+        status.dataset.kind = phase;
+        const label = status.querySelector("b");
+        if (label) label.textContent = this.copy.status[phase];
+      }
+      const reset = this.querySelector<HTMLButtonElement>("[data-reset]");
+      if (reset) reset.hidden = phase === "idle";
+
+      /* Steps mirror the product's stepper: Agent, Setup, Provider, Model, Confirm.
+         Choosing an existing account skips 3 and 4, so those are marked skipped
+         rather than done — the product labels them the same way. */
+      const stepOf: Partial<Record<typeof phase, number>> = {
+        idle: 0,
+        scanning: 1,
+        agent: 1,
+        "guide-only": 1,
+        mode: 2,
+        provider: 3,
+        verifying: 3,
+        unsupported: 3,
+        "preview-gate": 3,
+        model: 4,
+        ready: 5,
+      };
+      const current = stepOf[phase] ?? 5;
+      const skipped = this.state.configMode === "existing-account";
+      this.querySelectorAll<HTMLElement>("[data-step]").forEach((step) => {
+        const index = Number(step.dataset.step || 0);
+        const isSkipped = skipped && (index === 3 || index === 4);
+        step.classList.toggle("is-current", index === current && !isSkipped);
+        step.classList.toggle("is-done", !isSkipped && (current > index || phase === "ready"));
+        step.classList.toggle("is-skipped", isSkipped);
+        if (index === current && !isSkipped) step.setAttribute("aria-current", "step");
+        else step.removeAttribute("aria-current");
+      });
+
+      this.querySelectorAll<HTMLButtonElement>("[data-agent-id]").forEach((button) => {
+        button.setAttribute("aria-pressed", String(button.dataset.agentId === this.state.agentId));
+      });
+      this.querySelectorAll<HTMLButtonElement>("[data-provider-id]").forEach((button) => {
+        button.setAttribute("aria-pressed", String(button.dataset.providerId === this.state.providerId));
+      });
+
+      const agent = catalog.agents.find((candidate) => candidate.id === this.state.agentId) ?? null;
+      const provider = catalog.providers.find((candidate) => candidate.id === this.state.providerId) ?? null;
+      this.querySelectorAll<HTMLElement>("[data-selected-agent], [data-verifying-agent], [data-result-agent]").forEach((element) => {
+        element.textContent = agent?.name ?? "—";
+      });
+      /* A custom endpoint has no catalog name, so it shows the host the visitor
+         typed — the specific thing they chose. An existing account has no
+         provider at all, which is the point, so it says so. */
+      const providerLabel = provider?.name
+        ?? (this.state.providerId === CUSTOM_PROVIDER_ID
+          ? this.customHost() || this.copy.status.provider
+          : this.state.configMode === "existing-account"
+            ? this.copy.skipped
+            : "—");
+      this.querySelectorAll<HTMLElement>("[data-verifying-provider], [data-result-provider]").forEach((element) => {
+        element.textContent = providerLabel;
+      });
+      const selectedProtocol = this.querySelector<HTMLElement>("[data-selected-protocol]");
+      if (selectedProtocol) selectedProtocol.textContent = agent?.protocol ? this.copy.protocol[agent.protocol] : "—";
+
+      this.querySelectorAll<HTMLButtonElement>("[data-mode]").forEach((button) => {
+        button.setAttribute("aria-pressed", String(button.dataset.mode === this.state.configMode));
+      });
+      this.querySelectorAll<HTMLButtonElement>("[data-model]").forEach((button) => {
+        button.setAttribute("aria-pressed", String(button.dataset.model === this.state.model));
+      });
+
+      const isCustom = this.state.providerId === CUSTOM_PROVIDER_ID;
+      const customField = this.querySelector<HTMLElement>("[data-custom-field]");
+      if (customField) customField.hidden = !isCustom;
+      const check = isCustom ? validateDemoBaseUrl(this.state.customBaseUrl) : null;
+      const customHint = this.querySelector<HTMLElement>("[data-custom-hint]");
+      const customInput = this.querySelector<HTMLInputElement>("[data-custom-input]");
+      if (customHint && customInput && check) {
+        // An empty field is the resting state, not an error to shout about.
+        const untouched = this.state.customBaseUrl === "";
+        customHint.textContent = untouched
+          ? customHint.dataset.idle || customHint.textContent
+          : check.ok
+            ? this.copy.url.ok
+            : this.copy.url[check.reason];
+        customHint.dataset.kind = untouched ? "idle" : check.ok ? "ok" : "error";
+        customInput.setAttribute("aria-invalid", String(!untouched && !check.ok));
+      }
+
+      /* Both primary actions live in the footer bar, so each is shown only on the
+         step it belongs to rather than moved between panels. */
+      const verify = this.querySelector<HTMLButtonElement>("[data-verify]");
+      if (verify) {
+        verify.hidden = phase !== "provider";
+        verify.disabled =
+          !this.state.providerId ||
+          this.state.compatibility === "unsupported" ||
+          (isCustom && !(check && check.ok));
+      }
+      const confirm = this.querySelector<HTMLButtonElement>("[data-confirm]");
+      if (confirm) {
+        confirm.hidden = phase !== "model";
+        confirm.disabled = !this.state.model;
+      }
+      const footerNote = this.querySelector<HTMLElement>("[data-footer-note]");
+      if (footerNote) footerNote.textContent = this.footerNoteFor(phase);
+
+      if (panel === "result") this.renderResult(phase);
+    }
+
+    renderResult(phase: ActivationState["phase"]) {
+      const title = this.querySelector<HTMLElement>("[data-result-title]");
+      const body = this.querySelector<HTMLElement>("[data-result-body]");
+      const icon = this.querySelector<HTMLElement>("[data-result-icon]");
+      const readyAction = this.querySelector<HTMLElement>("[data-ready-action]");
+      const securityAction = this.querySelector<HTMLElement>("[data-security-action]");
+      if (!title || !body || !icon || !readyAction || !securityAction) return;
+
+      const result = phase === "ready"
+        ? this.state.configMode === "existing-account"
+          ? this.copy.result.existing
+          : this.copy.result.ready
+        : phase === "guide-only"
+          ? this.copy.result.guide
+          : phase === "preview-gate"
+            ? this.copy.result.preview
+            : phase === "unsupported"
+              ? this.copy.result.unsupported
+              : this.copy.result.error;
+      title.textContent = result[0];
+      body.textContent = result[1];
+      const path = icon.querySelector<SVGPathElement>("[data-result-path]");
+      if (path) {
+        path.setAttribute(
+          "d",
+          phase === "ready"
+            ? "M7 17l6 6L26 9"
+            : phase === "guide-only"
+              ? "M8 24L24 8M13 8h11v11"
+              : phase === "preview-gate"
+                ? "M16 7v12M16 24v1"
+                : "M9 9l14 14M23 9L9 23",
+        );
+      }
+      icon.dataset.kind = phase;
+      readyAction.hidden = phase !== "ready";
+      securityAction.hidden = phase !== "preview-gate";
+    }
+  }
+
+  if (!customElements.get("activation-console")) {
+    customElements.define("activation-console", ActivationConsoleElement);
+  }
+</script>
+
+<style>
+  activation-console { display: block; }
+  .activation-shell { position: relative; z-index: 1; }
+  /* Geometry and colour measured off the running app (frontend/src/styles):
+     12px window radius, 52px title bar, 232px sidebar, 68px footer, and the
+     --shadow-window value verbatim. The app is light-only, so these use this
+     page's tokens rather than its hex values — that is the one difference. */
+  .activation-window {
+    overflow: hidden;
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-window);
+    background: var(--surface);
+    color: var(--ink);
+    box-shadow: 0 22px 55px rgba(42, 42, 46, .16), 0 2px 8px rgba(42, 42, 46, .08);
+  }
+  .activation-topbar {
+    min-height: 52px;
+    padding: 0 18px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    border-bottom: 1px solid var(--line);
+    background: var(--surface-muted);
+  }
+  .activation-topbar > div { display: grid; gap: 2px; }
+  .activation-topbar strong { font-size: 14px; }
+  .activation-kicker, .activation-state-label {
+    color: var(--ink-faint);
+    font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+  }
+  .activation-sample, .activation-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--ink-soft);
+    font-size: 12px;
+    font-weight: 650;
+  }
+  .activation-sample > span, .activation-status > span {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--orange);
+    box-shadow: 0 0 0 4px var(--orange-soft);
+  }
+  /* Two columns, two rows: the sidebar and body share the first row, and the
+     footer spans both so the primary action stays put while the body scrolls —
+     the same shape as the app's 232px/auto + content/68px grid. */
+  .activation-body {
+    min-height: 560px;
+    display: grid;
+    grid-template-columns: 232px minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) auto;
+  }
+  .activation-rail {
+    padding: 22px 12px 16px;
+    display: flex;
+    flex-direction: column;
+    color: var(--ink);
+    background: var(--surface-muted);
+    border-right: 1px solid var(--line);
+  }
+  /* Static labels, not controls — the demo has nowhere to navigate to. */
+  .activation-nav { display: grid; gap: 4px; }
+  .activation-nav-item {
+    min-height: 38px;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    border-radius: var(--radius-control);
+    color: var(--ink-soft);
+    font-size: 13px;
+  }
+  .activation-nav-item.is-active { background: var(--blue-deep); color: var(--on-accent); font-weight: 600; }
+  .activation-rail-note { margin-top: auto; padding: 12px 10px 0; color: var(--ink-faint); font-size: 11px; }
+  .activation-footer {
+    min-height: 68px;
+    padding: 0 42px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--line);
+    background: var(--surface-muted);
+  }
+  .activation-footer-note { color: var(--ink-soft); font-size: 13px; }
+  .activation-footer-actions { display: flex; align-items: center; gap: 12px; }
+  .activation-rail-brand { padding: 0 10px 18px; display: flex; align-items: center; gap: 11px; }
+  .activation-rail-brand > div { display: grid; gap: 2px; }
+  .activation-rail-brand strong { font-size: 13px; }
+  /* Scoped to the subtitle rather than every span, so it cannot reach the
+     monogram — that one carries white on the accent fill and a broader
+     selector here would win on specificity and make it unreadable. */
+  .activation-rail-brand > div span { color: var(--ink-faint); font-size: 11px; }
+  .activation-monogram {
+    width: 26px;
+    height: 26px;
+    display: grid;
+    place-items: center;
+    border-radius: 7px;
+    color: var(--on-accent);
+    background: var(--blue-deep);
+    font: 750 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
+    letter-spacing: .04em;
+  }
+  /* The app's stepper: a horizontal row in the page header, each step a 27px
+     numbered circle above an 11px label. Nothing is a card and nothing is dark. */
+  .activation-steps {
+    margin: 22px 0 0;
+    padding: 0;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 124px);
+    justify-content: start;
+    list-style: none;
+  }
+  .activation-steps li { display: grid; gap: 5px; justify-items: start; color: var(--ink-faint); font-size: 11px; }
+  .activation-step-marker {
+    width: 27px;
+    height: 27px;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--line-strong);
+    border-radius: 50%;
+    color: var(--ink-soft);
+    background: var(--surface);
+    font-size: 13px;
+    font-weight: 600;
+  }
+  /* The app keeps every label at 400 and signals the current step through the
+     marker fill alone, so the row stays even rather than jumping as you advance. */
+  .activation-steps li strong { font-size: 11px; font-weight: 400; }
+  /* The marker fill is the only signal that the step changed, so it is worth
+     easing rather than cutting — it is also what the eye tracks when nobody
+     clicked. Matches the panel's 240ms so the two read as one movement. */
+  @media not (prefers-reduced-motion: reduce) {
+    .activation-steps li { transition: color 240ms ease; }
+    .activation-step-marker {
+      transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
+    }
+  }
+  .activation-steps li.is-current { color: var(--ink); }
+  .activation-steps li.is-current .activation-step-marker {
+    border-color: var(--blue-deep);
+    background: var(--blue-deep);
+    color: var(--on-accent);
+  }
+  .activation-steps li.is-done .activation-step-marker {
+    border-color: var(--green);
+    color: var(--green);
+    background: var(--green-soft);
+  }
+  .activation-reset {
+    padding: 8px 2px;
+    border: 0;
+    color: var(--ink-soft);
+    background: transparent;
+    font: 600 12px/1.2 inherit;
+    cursor: pointer;
+  }
+  .activation-reset:hover { color: var(--ink); }
+  /* 42px gutters and a header/body split, matching the app's page-scaffold. */
+  .activation-main { min-width: 0; padding: 26px 42px 24px; display: flex; flex-direction: column; }
+  .activation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
+  .activation-heading > div { display: grid; gap: 6px; }
+  .activation-heading h2 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.01em; }
+  .activation-status { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); }
+  .activation-status > span { width: 7px; height: 7px; background: var(--ink-faint); box-shadow: none; }
+  .activation-status[data-kind="ready"] > span { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
+  .activation-status[data-kind="preview-gate"] > span,
+  .activation-status[data-kind="guide-only"] > span { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
+  .activation-status[data-kind="unsupported"] > span,
+  .activation-status[data-kind="error"] > span { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
+  .activation-subtitle { margin: 10px 0 0; max-width: 720px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
+  .activation-panel {
+    min-height: 272px;
+    margin-top: 24px;
+    padding: 24px;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-panel);
+    background: var(--paper-strong);
+    outline: none;
+  }
+  .activation-panel:focus-visible { box-shadow: 0 0 0 3px var(--blue-soft); }
+  /* Steps replace each other by toggling [hidden], which is a hard cut. Fading
+     the arriving panel up from slightly below and slightly small reads as one
+     step advancing rather than two panels swapping — and the scale is 0.985, not
+     a slide: this is a product window, not a carousel.
+
+     @starting-style is what makes the entry animate at all: the panel goes from
+     display:none straight to its final state, so without a declared starting
+     value there is nothing to transition from.
+
+     Transform only, deliberately — no fade. Text mid-opacity fails the contrast
+     audit for as long as the transition runs, and this page already holds itself
+     to keeping copy readable while the hero entrance plays. Movement carries the
+     step change without ever rendering the panel's own text at low contrast.
+
+     Only the entry is animated. Transitioning `display` on the way out would
+     keep the outgoing panel in flow for the whole 240ms, and since the panels
+     are siblings in normal flow the console would double in height every step. */
+  @media not (prefers-reduced-motion: reduce) {
+    .activation-panel:not([hidden]) {
+      transition: transform 240ms ease;
+      transform: none;
+    }
+  }
+  @starting-style {
+    @media not (prefers-reduced-motion: reduce) {
+      .activation-panel:not([hidden]) {
+        transform: translateY(8px) scale(0.985);
+      }
+    }
+  }
+  .activation-panel[data-panel="idle"], .activation-progress, .activation-result {
+    display: grid;
+    grid-template-columns: 92px minmax(0, 1fr);
+    align-items: center;
+    gap: 28px;
+  }
+  .activation-panel h3 { margin: 0; font-size: 22px; line-height: 1.18; }
+  .activation-panel p { margin: 9px 0 0; max-width: 640px; color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
+  .activation-empty-mark { width: 84px; height: 84px; position: relative; display: grid; place-items: center; }
+  .activation-empty-mark::before, .activation-empty-mark::after, .activation-empty-mark span {
+    content: "";
+    position: absolute;
+    border-radius: 50%;
+    border: 1px solid var(--line-strong);
+  }
+  .activation-empty-mark::before { inset: 0; }
+  .activation-empty-mark::after { inset: 16px; border-color: var(--blue); }
+  .activation-empty-mark span:nth-child(1) { width: 8px; height: 8px; border: 0; background: var(--blue); }
+  .activation-empty-mark span:nth-child(2) { inset: 7px; border-style: dashed; }
+  .activation-empty-mark span:nth-child(3) { width: 42px; height: 1px; border: 0; border-radius: 0; background: var(--line-strong); transform: rotate(-35deg); }
+  .activation-scan { width: 84px; height: 84px; position: relative; border: 1px solid var(--line-strong); border-radius: 50%; }
+  .activation-scan::before, .activation-scan::after { content: ""; position: absolute; inset: 13px; border: 1px solid var(--line); border-radius: 50%; }
+  .activation-scan::after { inset: 29px; background: var(--blue); border: 0; box-shadow: 0 0 0 8px var(--blue-soft); }
+  .activation-scan span { position: absolute; inset: -1px; border-top: 2px solid var(--blue); border-right: 2px solid transparent; border-radius: 50%; animation: activation-spin 1s linear infinite; }
+  .activation-scan.is-verify::after { background: var(--green); box-shadow: 0 0 0 8px var(--green-soft); }
+  .activation-panel-copy { margin-bottom: 18px; }
+  .activation-choice-panel { padding: 20px; }
+  .activation-agent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+  .activation-agent {
+    min-width: 0;
+    min-height: 74px;
+    padding: 11px 12px;
+    position: relative;
+    display: grid;
+    grid-template-columns: 30px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 10px;
+    text-align: left;
+    color: var(--ink);
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    background: var(--surface);
+    cursor: pointer;
+  }
+  .activation-agent:hover, .activation-agent[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
+  .activation-agent-copy { min-width: 0; display: grid; gap: 3px; }
+  .activation-agent-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+  .activation-agent-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-faint); font-size: 10px; }
+  .activation-agent-state { padding: 5px 7px; border-radius: 999px; color: var(--ink-soft); background: var(--surface-muted); font-size: 9px; font-weight: 700; white-space: nowrap; }
+  .activation-agent-state.is-ready { color: var(--green); background: var(--green-soft); }
+  .activation-agent-state.is-attention, .activation-agent-state.is-guide-only { color: var(--orange); background: var(--orange-soft); }
+  .activation-recommended { position: absolute; top: -7px; right: 9px; padding: 2px 6px; border-radius: 999px; color: var(--on-accent); background: var(--blue-deep); font-size: 8px; font-weight: 750; }
+  .activation-selection-line, .activation-verifying-pair, .activation-result-meta {
+    margin: 14px 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--ink-soft);
+    font: 650 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .activation-selection-line span:first-child { color: var(--ink); }
+  .activation-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+  .activation-provider {
+    min-height: 66px;
+    padding: 11px 13px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    color: var(--ink);
+    text-align: left;
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    background: var(--surface);
+    cursor: pointer;
+  }
+  .activation-provider > span:first-child { min-width: 0; display: grid; gap: 4px; }
+  .activation-provider strong { font-size: 13px; }
+  .activation-provider small { color: var(--ink-faint); font-size: 10px; }
+  .activation-provider:hover, .activation-provider[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
+  .activation-provider[data-compatibility="preview-gate"] small { color: var(--orange); }
+  .activation-provider[data-compatibility="unsupported"] small { color: var(--red); }
+  .activation-provider.is-recommended::after { content: "★"; color: var(--blue); font-size: 10px; }
+  .activation-provider-arrow { color: var(--ink-faint); }
+  .activation-mode-grid { display: grid; gap: 10px; }
+  .activation-mode {
+    padding: 13px 15px;
+    display: grid;
+    gap: 5px;
+    color: var(--ink);
+    text-align: left;
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    background: var(--surface);
+    cursor: pointer;
+  }
+  .activation-mode strong { font-size: 13px; }
+  .activation-mode small { color: var(--ink-faint); font-size: 11px; line-height: 1.45; }
+  .activation-mode:hover, .activation-mode[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
+
+  /* The custom endpoint is the one place the demo takes typed input, so it gets
+     a real label and a live verdict rather than a placeholder-only field. */
+  .activation-custom { margin-top: 12px; display: grid; gap: 6px; }
+  .activation-custom label { font-size: 11px; font-weight: 600; color: var(--ink-soft); }
+  .activation-custom input {
+    padding: 9px 11px;
+    color: var(--ink);
+    border: 1px solid var(--line-strong);
+    border-radius: 10px;
+    background: var(--surface);
+    font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .activation-custom input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+  .activation-custom-hint { font-size: 11px; color: var(--ink-faint); }
+  .activation-custom-hint[data-kind="ok"] { color: var(--green); }
+  .activation-custom-hint[data-kind="error"] { color: var(--red); }
+  .activation-register { display: grid; gap: 2px; font-size: 11px; color: var(--blue); }
+  .activation-register small { color: var(--ink-faint); }
+
+  .activation-model-grid { display: grid; gap: 8px; }
+  .activation-model {
+    padding: 10px 12px;
+    color: var(--ink);
+    text-align: left;
+    border: 1px solid var(--line);
+    border-radius: 10px;
+    background: var(--surface);
+    cursor: pointer;
+    font: 500 12px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .activation-model:hover, .activation-model[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
+  .activation-manual { margin-top: 12px; display: grid; gap: 6px; font-size: 11px; }
+  .activation-manual summary { color: var(--ink-soft); cursor: pointer; }
+  .activation-manual label { font-weight: 600; color: var(--ink-soft); }
+  .activation-manual input {
+    padding: 8px 11px;
+    color: var(--ink);
+    border: 1px solid var(--line-strong);
+    border-radius: 10px;
+    background: var(--surface);
+    font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .activation-manual input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+  .activation-steps li.is-skipped { opacity: 0.55; }
+  .activation-steps li.is-skipped strong::after { content: " ·"; }
+  .activation-verify { margin-top: 14px; }
+  .activation-verifying-pair strong, .activation-result-meta strong { color: var(--ink); }
+  .activation-result-icon {
+    width: 78px;
+    height: 78px;
+    display: grid;
+    place-items: center;
+    border-radius: 22px;
+    color: var(--green);
+    background: var(--green-soft);
+    font-size: 34px;
+    font-weight: 650;
+  }
+  .activation-result-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
+  .activation-result-icon[data-kind="preview-gate"], .activation-result-icon[data-kind="guide-only"] { color: var(--orange); background: var(--orange-soft); }
+  .activation-result-icon[data-kind="unsupported"], .activation-result-icon[data-kind="error"] { color: var(--red); background: var(--red-soft); }
+  .activation-result-actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
+  .activation-log-wrap { min-height: 62px; margin-top: 16px; display: grid; grid-template-columns: 82px 1fr; gap: 12px; }
+  .activation-log-wrap > span { padding-top: 4px; color: var(--ink-faint); font: 700 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
+  .activation-log { max-height: 58px; margin: 0; padding: 0; overflow: auto; list-style: none; color: var(--ink-soft); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
+  .activation-log li::before { content: "> "; color: var(--blue); }
+  .activation-facts { min-height: 48px; padding: 10px 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border-top: 1px solid var(--line); background: var(--paper-strong); }
+  .activation-facts span { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 11px; }
+  .activation-facts i {
+    width: 10px;
+    height: 6px;
+    display: inline-block;
+    border-left: 2px solid var(--green);
+    border-bottom: 2px solid var(--green);
+    transform: rotate(-45deg) translateY(-1px);
+  }
+
+  @media not (prefers-reduced-motion: reduce) {
+    .activation-agent, .activation-provider { transition: transform var(--dur-micro) var(--ease-apple), border-color var(--dur-micro) var(--ease-apple), background-color var(--dur-micro) var(--ease-apple); }
+    .activation-agent:hover, .activation-provider:hover { transform: translateY(-1px); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .activation-scan span { animation: none; border: 2px solid var(--blue); }
+  }
+  @keyframes activation-spin { to { transform: rotate(360deg); } }
+
+  /* The sidebar is the first thing to go: it is workspace chrome, and the demo
+     never navigates. The stepper stays, since it is the actual progress. */
+  @media (max-width: 820px) {
+    .activation-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
+    .activation-rail { display: none; }
+    .activation-footer { padding: 0 20px; }
+  }
+  @media (max-width: 680px) {
+    .activation-shell { width: min(100% - 28px, 1180px); }
+    .activation-topbar { padding: 10px 12px; }
+    .activation-kicker { display: none; }
+    .activation-body { min-height: 0; }
+    .activation-main { padding: 20px 14px 16px; }
+    .activation-heading h2 { font-size: 20px; }
+    .activation-subtitle { font-size: 12px; }
+    /* Labels drop out and the circles compress to a row of five markers. */
+    .activation-steps { margin-top: 16px; grid-auto-columns: minmax(0, 1fr); }
+    .activation-steps li strong { display: none; }
+    .activation-footer { min-height: 60px; padding: 0 14px; gap: 10px; }
+    .activation-footer-note { font-size: 11px; }
+    .activation-panel { min-height: 250px; margin-top: 18px; padding: 18px; }
+    .activation-panel[data-panel="idle"], .activation-progress, .activation-result { grid-template-columns: 1fr; gap: 16px; }
+    .activation-empty-mark, .activation-scan { width: 62px; height: 62px; }
+    .activation-panel h3 { font-size: 19px; }
+    .activation-agent-grid, .activation-provider-grid { grid-template-columns: 1fr; }
+    .activation-agent { min-height: 68px; }
+    .activation-facts { grid-template-columns: 1fr; gap: 8px; }
+    .activation-log-wrap { grid-template-columns: 1fr; gap: 4px; }
+  }
+</style>
diff --git a/site/src/components/AgentMark.astro b/site/src/components/AgentMark.astro
index f021765b..e59ab40f 100644
--- a/site/src/components/AgentMark.astro
+++ b/site/src/components/AgentMark.astro
@@ -15,9 +15,14 @@ const extensions: Record<string, string> = {
   "kilo-cli": "svg",
   aider: "png",
 };
+/* These two marks ship as fill="currentColor". Loaded through <img> the keyword
+   has no page to inherit from and falls back to black, which disappears on a
+   dark ground — so they get inverted there while the marks carrying their own
+   brand colours are left alone. */
+const monochrome = new Set(["codex", "opencode"]);
 const extension = extensions[id];
 const imageSource = extension ? `${import.meta.env.BASE_URL}images/agents/${id}.${extension}` : null;
 ---
 <span class="agent-mark-wrap" style={`--mark-size:${size}px`} aria-hidden="true">
-  {imageSource ? <img src={imageSource} alt="" width={size} height={size} loading="lazy" /> : <span class="agent-fallback">{name.slice(0, 1)}</span>}
+  {imageSource ? <img src={imageSource} alt="" width={size} height={size} loading="lazy" data-monochrome={monochrome.has(id) ? "" : undefined} /> : <span class="agent-fallback">{name.slice(0, 1)}</span>}
 </span>
diff --git a/site/src/components/CompatibilityExplorer.astro b/site/src/components/CompatibilityExplorer.astro
new file mode 100644
index 00000000..0a58a6ad
--- /dev/null
+++ b/site/src/components/CompatibilityExplorer.astro
@@ -0,0 +1,609 @@
+---
+import AgentMark from "./AgentMark.astro";
+import { catalog } from "../lib/catalog";
+import { localeFromPath, localePath } from "../i18n";
+import { useCatalogLabels } from "../i18n/catalog";
+import { protocolLabels } from "../lib/content";
+import { demoStateFor } from "../lib/demo-environment";
+import { compatibilityFor, type Compatibility } from "../lib/explorer";
+
+const locale = localeFromPath(Astro.url.pathname);
+const { agentDescriptions, groupLabels, agentFallbackDescription } = useCatalogLabels(locale);
+const technicalHref = (agentId: string) => localePath("zh-CN", `agents/${agentId}/`);
+const providerHref = (providerId: string) => localePath("zh-CN", `providers/${providerId}/`);
+const copy = locale === "en"
+  ? {
+      filters: "Explorer filters",
+      platform: "Platform",
+      setup: "Install path",
+      config: "Configuration",
+      protocol: "Protocol",
+      provider: "Provider",
+      demo: "Demo state",
+      all: "All",
+      managedInstall: "Managed install",
+      officialGuide: "Official guide",
+      managedConfig: "Managed config",
+      officialConfig: "Official config",
+      ready: "Ready",
+      attention: "Needs attention",
+      notInstalled: "Not installed",
+      clear: "Clear filters",
+      results: "agents shown",
+      noResults: "No agent matches this combination.",
+      noResultsBody: "Clear a filter or choose a provider that implements the selected protocol.",
+      sample: "Demo state",
+      locked: "Locked",
+      officialRelease: "Official release",
+      open: "Open details for",
+      close: "Close details",
+      overview: "Environment example",
+      installState: "Example install state",
+      configState: "Example config state",
+      lockedVersion: "Catalog version",
+      configPath: "Configuration path",
+      command: "Launch command",
+      backup: "Example backup",
+      backupYes: "Available",
+      backupNo: "None yet",
+      installed: "Installed",
+      configured: "Configured",
+      needsSetup: "Needs setup",
+      providerCompatibility: "Provider compatibility",
+      capability: "Activation boundary",
+      managedBoundary: "OneAgent can manage this agent's configuration and backs up an existing file before a managed write.",
+      guideBoundary: "This agent stays in its official install, sign-in or extension flow. OneAgent does not write private configuration for it.",
+      technical: "Technical reference (Chinese)",
+      source: "Upstream source",
+      providerReference: "Provider reference (Chinese)",
+      illustrative: "Illustrative machine state; catalog capabilities are real.",
+      compatibility: {
+        verified: "Verified",
+        supported: "Implementation supported",
+        "preview-gate": "Release candidate required",
+        unsupported: "Unsupported",
+      } as Record<Compatibility, string>,
+    }
+  : {
+      filters: "配置筛选",
+      platform: "平台",
+      setup: "安装路径",
+      config: "配置方式",
+      protocol: "协议",
+      provider: "Provider",
+      demo: "示例状态",
+      all: "全部",
+      managedInstall: "托管安装",
+      officialGuide: "官方引导",
+      managedConfig: "托管配置",
+      officialConfig: "官方配置",
+      ready: "Ready",
+      attention: "需处理",
+      notInstalled: "未安装",
+      clear: "清除筛选",
+      results: "个 Agent",
+      noResults: "没有 Agent 匹配这组条件。",
+      noResultsBody: "清除一个筛选，或选择实现了目标协议的 Provider。",
+      sample: "示例状态",
+      locked: "锁定",
+      officialRelease: "官方发行",
+      open: "打开详情：",
+      close: "关闭详情",
+      overview: "环境示例",
+      installState: "示例安装状态",
+      configState: "示例配置状态",
+      lockedVersion: "目录版本",
+      configPath: "配置位置",
+      command: "启动命令",
+      backup: "示例备份",
+      backupYes: "已有",
+      backupNo: "暂无",
+      installed: "已安装",
+      configured: "已配置",
+      needsSetup: "待配置",
+      providerCompatibility: "Provider 兼容性",
+      capability: "激活边界",
+      managedBoundary: "OneAgent 可以管理这个 Agent 的配置，并会在托管写入前备份已有文件。",
+      guideBoundary: "这个 Agent 保留官方安装、登录或扩展内流程；OneAgent 不写入它的私有配置。",
+      technical: "技术详情",
+      source: "上游源码",
+      providerReference: "Provider 详情",
+      illustrative: "机器状态属于示例；目录能力来自真实数据。",
+      compatibility: {
+        verified: "已验证",
+        supported: "实现支持",
+        "preview-gate": "需发布候选验证",
+        unsupported: "不支持",
+      } as Record<Compatibility, string>,
+    };
+
+const demoLabel = (status: string) => status === "ready"
+  ? copy.ready
+  : status === "attention"
+    ? copy.attention
+    : status === "guide-only"
+      ? copy.officialGuide
+      : copy.notInstalled;
+---
+<compatibility-explorer data-locale={locale}>
+  <section class="explorer-toolbar" aria-label={copy.filters}>
+    <label class="explorer-filter">
+      <span>{copy.platform}</span>
+      <select data-filter="platform">
+        <option value="">{copy.all}</option>
+        <option value="macos">macOS</option>
+        <option value="linux">Linux</option>
+        <option value="windows">Windows</option>
+      </select>
+    </label>
+    <label class="explorer-filter">
+      <span>{copy.setup}</span>
+      <select data-filter="setup">
+        <option value="">{copy.all}</option>
+        <option value="managed">{copy.managedInstall}</option>
+        <option value="guide">{copy.officialGuide}</option>
+      </select>
+    </label>
+    <label class="explorer-filter">
+      <span>{copy.config}</span>
+      <select data-filter="config">
+        <option value="">{copy.all}</option>
+        <option value="managed">{copy.managedConfig}</option>
+        <option value="official">{copy.officialConfig}</option>
+      </select>
+    </label>
+    <label class="explorer-filter">
+      <span>{copy.protocol}</span>
+      <select data-filter="protocol">
+        <option value="">{copy.all}</option>
+        <option value="openai">{protocolLabels.openai}</option>
+        <option value="anthropic">{protocolLabels.anthropic}</option>
+        <option value="responses">{protocolLabels.responses}</option>
+      </select>
+    </label>
+    <label class="explorer-filter">
+      <span>{copy.provider}</span>
+      <select data-filter="provider">
+        <option value="">{copy.all}</option>
+        {catalog.providers.map((provider) => <option value={provider.id}>{provider.name}</option>)}
+      </select>
+    </label>
+    <label class="explorer-filter">
+      <span>{copy.demo}</span>
+      <select data-filter="demo">
+        <option value="">{copy.all}</option>
+        <option value="ready">{copy.ready}</option>
+        <option value="attention">{copy.attention}</option>
+        <option value="guide-only">{copy.officialGuide}</option>
+        <option value="not-installed">{copy.notInstalled}</option>
+      </select>
+    </label>
+    <button class="button button-secondary explorer-clear" type="button" data-clear-filters>{copy.clear}</button>
+  </section>
+
+  <div class="explorer-result-line" aria-live="polite">
+    <strong data-result-count>{catalog.agents.length}</strong>
+    <span>{copy.results}</span>
+    <span aria-hidden="true">·</span>
+    <span>{copy.illustrative}</span>
+  </div>
+
+  <div class="explorer-grid" data-explorer-grid>
+    {catalog.agents.map((agent) => {
+      const demo = demoStateFor(agent);
+      const providers = catalog.providers
+        .filter((provider) => compatibilityFor(agent, provider) !== "unsupported")
+        .map((provider) => provider.id);
+      return (
+        <button
+          type="button"
+          class="explorer-card"
+          data-agent-card
+          data-agent-id={agent.id}
+          data-platforms={agent.platforms.join(" ")}
+          data-setup={agent.support.managedInstall ? "managed" : "guide"}
+          data-config={agent.support.managedConfig ? "managed" : "official"}
+          data-protocol={agent.protocol ?? ""}
+          data-providers={providers.join(" ")}
+          data-demo-status={demo.status}
+          aria-label={`${copy.open} ${agent.name}`}
+        >
+          <span class="explorer-card-head">
+            <AgentMark id={agent.id} name={agent.name} size={34} />
+            <span><strong>{agent.name}</strong><small>{groupLabels[agent.group] ?? agent.group}</small></span>
+            <span class:list={["explorer-demo-state", `is-${demo.status}`]}>{demoLabel(demo.status)}</span>
+          </span>
+          <span class="explorer-description">{agentDescriptions[agent.id] ?? agentFallbackDescription}</span>
+          <span class="explorer-chips">
+            <span class:list={["chip", agent.support.managedInstall && "chip-green"]}>{agent.support.managedInstall ? copy.managedInstall : copy.officialGuide}</span>
+            <span class:list={["chip", agent.support.managedConfig && "chip-blue"]}>{agent.support.managedConfig ? copy.managedConfig : copy.officialConfig}</span>
+            {agent.protocol && <span class="chip">{protocolLabels[agent.protocol]}</span>}
+          </span>
+          <span class="explorer-card-foot">
+            <span>{agent.lockedVersion ? `${copy.locked} ${agent.lockedVersion}` : copy.officialRelease}</span>
+            <span aria-hidden="true">↗</span>
+          </span>
+        </button>
+      );
+    })}
+  </div>
+
+  <div class="explorer-empty" data-explorer-empty hidden>
+    <strong>{copy.noResults}</strong>
+    <p>{copy.noResultsBody}</p>
+  </div>
+
+  <div hidden data-detail-templates>
+    {catalog.agents.map((agent) => {
+      const demo = demoStateFor(agent);
+      const version = demo.version === "locked"
+        ? agent.lockedVersion
+        : demo.version === "behind" && agent.lockedVersion
+          ? `< ${agent.lockedVersion}`
+          : agent.lockedVersion;
+      return (
+        <template data-agent-template={agent.id}>
+          <article class="drawer-content">
+            <header class="drawer-head">
+              <AgentMark id={agent.id} name={agent.name} size={44} />
+              <div>
+                <span class="activation-state-label">{copy.sample}</span>
+                <h2 id="explorer-drawer-title">{agent.name}</h2>
+                <p>{agentDescriptions[agent.id] ?? agentFallbackDescription}</p>
+              </div>
+              <span class:list={["explorer-demo-state", `is-${demo.status}`]}>{demoLabel(demo.status)}</span>
+            </header>
+
+            <section class="drawer-section">
+              <h3>{copy.overview}</h3>
+              <dl class="drawer-facts">
+                <div><dt>{copy.installState}</dt><dd>{demo.installed ? copy.installed : copy.notInstalled}</dd></div>
+                <div><dt>{copy.configState}</dt><dd>{demo.configured ? copy.configured : agent.support.officialInstallGuide ? copy.officialGuide : copy.needsSetup}</dd></div>
+                <div><dt>{copy.lockedVersion}</dt><dd>{version ?? copy.officialRelease}</dd></div>
+                <div><dt>{copy.backup}</dt><dd>{demo.hasBackup ? copy.backupYes : copy.backupNo}</dd></div>
+                <div><dt>{copy.configPath}</dt><dd><code>{agent.configPath ?? "—"}</code></dd></div>
+                <div><dt>{copy.command}</dt><dd><code>{agent.command ?? "—"}</code></dd></div>
+              </dl>
+            </section>
+
+            <section class="drawer-section">
+              <h3>{copy.providerCompatibility}</h3>
+              <div class="drawer-provider-list">
+                {catalog.providers.map((provider) => {
+                  const compatibility = compatibilityFor(agent, provider);
+                  return (
+                    <a href={providerHref(provider.id)} aria-label={`${provider.name} — ${copy.providerReference}`}>
+                      <span><strong>{provider.name}</strong><small>{agent.protocol ? protocolLabels[agent.protocol] : copy.officialGuide}{locale === "en" ? " · Chinese reference" : ""}</small></span>
+                      <span class:list={["drawer-compatibility", `is-${compatibility}`]}>{copy.compatibility[compatibility]}</span>
+                    </a>
+                  );
+                })}
+              </div>
+            </section>
+
+            <section class="drawer-section drawer-boundary">
+              <h3>{copy.capability}</h3>
+              <p>{agent.support.managedConfig ? copy.managedBoundary : copy.guideBoundary}</p>
+            </section>
+
+            <footer class="drawer-actions">
+              <a class="button button-primary" href={technicalHref(agent.id)}>{copy.technical}</a>
+              {agent.source && <a class="button button-secondary" href={agent.source} rel="noreferrer">{copy.source}</a>}
+            </footer>
+          </article>
+        </template>
+      );
+    })}
+  </div>
+
+  <dialog class="explorer-drawer" data-explorer-drawer aria-labelledby="explorer-drawer-title">
+    <div class="drawer-shell">
+      <button class="drawer-close" type="button" data-close-drawer aria-label={copy.close}>×</button>
+      <div data-drawer-slot></div>
+    </div>
+  </dialog>
+</compatibility-explorer>
+
+<script>
+  import { catalog } from "../lib/catalog";
+  import {
+    parseExplorerSearch,
+    serializeExplorerSearch,
+    type ExplorerSearchState,
+  } from "../lib/explorer";
+
+
+  class CompatibilityExplorerElement extends HTMLElement {
+    abort = new AbortController();
+    selectedAgent: string | null = null;
+    lastTrigger: HTMLElement | null = null;
+    suppressCloseUrl = false;
+
+    connectedCallback() {
+      if (this.dataset.initialized === "true") return;
+      this.dataset.initialized = "true";
+      const signal = this.abort.signal;
+      this.querySelectorAll<HTMLSelectElement>("[data-filter]").forEach((control) => {
+        control.addEventListener("change", () => this.filtersChanged(), { signal });
+      });
+      this.querySelector<HTMLButtonElement>("[data-clear-filters]")?.addEventListener("click", () => this.clearFilters(), { signal });
+      this.querySelectorAll<HTMLButtonElement>("[data-agent-card]").forEach((card) => {
+        card.addEventListener("click", () => this.openAgent(card.dataset.agentId || "", card), { signal });
+      });
+      this.querySelector<HTMLButtonElement>("[data-close-drawer]")?.addEventListener("click", () => this.drawer?.close(), { signal });
+      this.drawer?.addEventListener("close", () => this.drawerClosed(), { signal });
+      window.addEventListener("popstate", () => this.applyUrl(), { signal });
+      this.applyUrl();
+    }
+
+    disconnectedCallback() {
+      this.abort.abort();
+    }
+
+    get drawer() {
+      return this.querySelector<HTMLDialogElement>("[data-explorer-drawer]");
+    }
+
+    get locale() {
+      return this.dataset.locale === "en" ? "en" : "zh-CN";
+    }
+
+    control(name: string) {
+      return this.querySelector<HTMLSelectElement>(`[data-filter="${name}"]`);
+    }
+
+    applyUrl() {
+      const state = parseExplorerSearch(window.location.search, catalog);
+      this.setControl("platform", state.platform ?? "");
+      this.setControl("protocol", state.protocol ?? "");
+      this.setControl("provider", state.provider ?? "");
+      this.selectedAgent = state.agent;
+      this.filterCards();
+      if (state.agent) this.openAgent(state.agent, null, false);
+      else if (this.drawer?.open) {
+        this.suppressCloseUrl = true;
+        this.drawer.close();
+      }
+    }
+
+    setControl(name: string, value: string) {
+      const control = this.control(name);
+      if (control) control.value = value;
+    }
+
+    currentSearch(agent = this.selectedAgent): ExplorerSearchState {
+      return {
+        agent,
+        provider: this.control("provider")?.value || null,
+        platform: (this.control("platform")?.value || null) as ExplorerSearchState["platform"],
+        protocol: (this.control("protocol")?.value || null) as ExplorerSearchState["protocol"],
+      };
+    }
+
+    filtersChanged() {
+      const sanitized = parseExplorerSearch(`?${serializeExplorerSearch(this.currentSearch())}`, catalog);
+      this.selectedAgent = sanitized.agent;
+      this.setControl("platform", sanitized.platform ?? "");
+      this.setControl("protocol", sanitized.protocol ?? "");
+      this.setControl("provider", sanitized.provider ?? "");
+      this.writeUrl(sanitized);
+      this.filterCards();
+    }
+
+    clearFilters() {
+      this.querySelectorAll<HTMLSelectElement>("[data-filter]").forEach((control) => {
+        control.value = "";
+      });
+      this.selectedAgent = null;
+      if (this.drawer?.open) this.drawer.close();
+      this.writeUrl(this.currentSearch(null));
+      this.filterCards();
+      this.control("platform")?.focus();
+    }
+
+    filterCards() {
+      const platform = this.control("platform")?.value || "";
+      const setup = this.control("setup")?.value || "";
+      const config = this.control("config")?.value || "";
+      const protocol = this.control("protocol")?.value || "";
+      const provider = this.control("provider")?.value || "";
+      const demo = this.control("demo")?.value || "";
+      let visible = 0;
+
+      this.querySelectorAll<HTMLButtonElement>("[data-agent-card]").forEach((card) => {
+        const matches = (!platform || (card.dataset.platforms || "").split(" ").includes(platform))
+          && (!setup || card.dataset.setup === setup)
+          && (!config || card.dataset.config === config)
+          && (!protocol || card.dataset.protocol === protocol)
+          && (!provider || (card.dataset.providers || "").split(" ").includes(provider))
+          && (!demo || card.dataset.demoStatus === demo);
+        card.hidden = !matches;
+        card.classList.toggle("is-selected", card.dataset.agentId === this.selectedAgent);
+        if (matches) visible += 1;
+      });
+
+      const count = this.querySelector<HTMLElement>("[data-result-count]");
+      if (count) count.textContent = String(visible);
+      const empty = this.querySelector<HTMLElement>("[data-explorer-empty]");
+      if (empty) empty.hidden = visible !== 0;
+    }
+
+    openAgent(agentId: string, trigger: HTMLElement | null, updateUrl = true) {
+      const agent = catalog.agents.find((candidate) => candidate.id === agentId);
+      const template = this.querySelector<HTMLTemplateElement>(`template[data-agent-template="${agentId}"]`);
+      const slot = this.querySelector<HTMLElement>("[data-drawer-slot]");
+      if (!agent || !template || !slot || !this.drawer) return;
+
+      const sanitized = parseExplorerSearch(`?${serializeExplorerSearch(this.currentSearch(agentId))}`, catalog);
+      this.selectedAgent = agentId;
+      this.setControl("platform", sanitized.platform ?? "");
+      this.setControl("protocol", sanitized.protocol ?? "");
+      this.setControl("provider", sanitized.provider ?? "");
+      slot.replaceChildren(template.content.cloneNode(true));
+      this.lastTrigger = trigger;
+      this.filterCards();
+      if (!this.drawer.open) this.drawer.showModal();
+      this.querySelector<HTMLButtonElement>("[data-close-drawer]")?.focus();
+      if (updateUrl) this.writeUrl({ ...sanitized, agent: agentId });
+    }
+
+    drawerClosed() {
+      if (this.suppressCloseUrl) {
+        this.suppressCloseUrl = false;
+        return;
+      }
+      this.selectedAgent = null;
+      this.filterCards();
+      this.writeUrl(this.currentSearch(null));
+      this.lastTrigger?.focus();
+      this.lastTrigger = null;
+    }
+
+    writeUrl(state: ExplorerSearchState) {
+      const query = serializeExplorerSearch(state);
+      const next = `${window.location.pathname}${query ? `?${query}` : ""}`;
+      window.history.replaceState({}, "", next);
+    }
+  }
+
+  if (!customElements.get("compatibility-explorer")) {
+    customElements.define("compatibility-explorer", CompatibilityExplorerElement);
+  }
+</script>
+
+<style>
+  compatibility-explorer { display: block; }
+  .explorer-toolbar {
+    padding: 18px;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
+    gap: 12px;
+    align-items: end;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-panel);
+    background: var(--surface);
+    box-shadow: var(--shadow-lift);
+  }
+  .explorer-filter { min-width: 0; display: grid; gap: 7px; }
+  .explorer-filter > span { color: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+  .explorer-filter select {
+    width: 100%;
+    min-height: 42px;
+    padding: 0 34px 0 11px;
+    color: var(--ink);
+    border: 1px solid var(--line-strong);
+    border-radius: var(--radius-control);
+    background: var(--paper-strong);
+    font: 600 13px/1 system-ui, sans-serif;
+  }
+  .explorer-clear { grid-column: 4; grid-row: 1 / span 2; align-self: stretch; }
+  .explorer-result-line { margin: 24px 0 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--ink-faint); font-size: 13px; }
+  .explorer-result-line strong { color: var(--ink); font-size: 16px; }
+  .explorer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+  .explorer-card {
+    min-width: 0;
+    min-height: 254px;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    color: var(--ink);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-panel);
+    background: var(--surface);
+    cursor: pointer;
+  }
+  .explorer-card:hover, .explorer-card.is-selected { border-color: var(--blue); box-shadow: var(--shadow-lift); }
+  .explorer-card-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; }
+  .explorer-card-head > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
+  .explorer-card-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
+  .explorer-card-head small { color: var(--ink-faint); font-size: 11px; }
+  .explorer-demo-state { padding: 5px 7px; border-radius: 999px; color: var(--ink-soft); background: var(--surface-muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
+  .explorer-demo-state.is-ready { color: var(--green); background: var(--green-soft); }
+  .explorer-demo-state.is-attention, .explorer-demo-state.is-guide-only { color: var(--orange); background: var(--orange-soft); }
+  .explorer-description { margin-top: 18px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
+  .explorer-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
+  .explorer-card-foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; color: var(--ink-faint); font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
+  .explorer-empty { padding: 64px 24px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-panel); }
+  .explorer-empty strong { font-size: 20px; }
+  .explorer-empty p { margin: 8px 0 0; color: var(--ink-soft); }
+  .explorer-drawer {
+    width: min(580px, 100%);
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0 0 0 auto;
+    padding: 0;
+    overflow: hidden;
+    color: var(--ink);
+    border: 0;
+    border-left: 1px solid var(--line-strong);
+    background: var(--surface);
+    box-shadow: -24px 0 70px rgba(0, 0, 0, .22);
+  }
+  .explorer-drawer::backdrop { background: rgba(8, 13, 17, .52); backdrop-filter: blur(3px); }
+  .drawer-shell { height: 100%; position: relative; overflow: auto; }
+  .drawer-close {
+    width: 38px;
+    height: 38px;
+    position: sticky;
+    top: 14px;
+    float: right;
+    margin: 14px 16px -52px 0;
+    z-index: 2;
+    border: 1px solid var(--line);
+    border-radius: 50%;
+    color: var(--ink);
+    background: color-mix(in srgb, var(--surface) 88%, transparent);
+    backdrop-filter: blur(12px);
+    font-size: 24px;
+    cursor: pointer;
+  }
+  .drawer-content { padding: 54px 34px 36px; }
+  .drawer-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: 14px; }
+  .drawer-head h2 { margin: 5px 0 0; font-size: 30px; line-height: 1.1; }
+  .drawer-head p { margin: 10px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
+  .drawer-section { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
+  .drawer-section h3 { margin: 0 0 15px; font-size: 17px; }
+  .drawer-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
+  .drawer-facts div { min-width: 0; padding: 13px; background: var(--paper-strong); }
+  .drawer-facts dt { color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
+  .drawer-facts dd { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 13px; }
+  .drawer-facts code { font-size: 11px; }
+  .drawer-provider-list { display: grid; border-top: 1px solid var(--line); }
+  .drawer-provider-list a { padding: 13px 2px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
+  .drawer-provider-list a > span:first-child { display: grid; gap: 3px; }
+  .drawer-provider-list strong { font-size: 13px; }
+  .drawer-provider-list small { color: var(--ink-faint); font-size: 10px; }
+  .drawer-compatibility { font-size: 10px; font-weight: 750; }
+  .drawer-compatibility.is-verified, .drawer-compatibility.is-supported { color: var(--green); }
+  .drawer-compatibility.is-preview-gate { color: var(--orange); }
+  .drawer-compatibility.is-unsupported { color: var(--red); }
+  .drawer-boundary { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--paper-strong); }
+  .drawer-boundary p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
+  .drawer-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; }
+
+  @media not (prefers-reduced-motion: reduce) {
+    .explorer-card { transition: transform var(--dur-micro) var(--ease-apple), border-color var(--dur-micro) var(--ease-apple), box-shadow var(--dur-micro) var(--ease-apple); }
+    .explorer-card:hover { transform: translateY(-2px); }
+    .explorer-drawer[open] { animation: drawer-in 260ms var(--ease-enter) both; }
+  }
+  @keyframes drawer-in { from { transform: translateX(28px); } }
+
+  @media (max-width: 980px) {
+    .explorer-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .explorer-clear { grid-column: auto; grid-row: auto; }
+    .explorer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  @media (max-width: 680px) {
+    .explorer-toolbar { grid-template-columns: 1fr 1fr; padding: 14px; }
+    .explorer-clear { grid-column: 1 / -1; }
+    .explorer-grid { grid-template-columns: 1fr; }
+    .explorer-card { min-height: 228px; }
+    .explorer-drawer { width: 100%; border-left: 0; }
+    .drawer-content { padding: 56px 18px 28px; }
+    .drawer-head { grid-template-columns: 48px minmax(0, 1fr); }
+    .drawer-head > .explorer-demo-state { grid-column: 2; justify-self: start; }
+    .drawer-facts { grid-template-columns: 1fr; }
+  }
+</style>
diff --git a/site/src/components/DownloadSelector.astro b/site/src/components/DownloadSelector.astro
index 8e07bea3..52935bfe 100644
--- a/site/src/components/DownloadSelector.astro
+++ b/site/src/components/DownloadSelector.astro
@@ -1,83 +1,203 @@
 ---
-import {
-  formatBytes,
-  formatDate,
-  getLatestRelease,
-  releaseTargets,
-  releasesPageUrl,
-} from "../lib/downloads";
+import { bestLocaleFor, localeFromPath, localePath } from "../i18n";
+import { formatBytes, formatDate } from "../lib/downloads";
+import { binaryArtifact, getPreviewChannel, primaryDownload } from "../lib/release-channel";
 
-const release = await getLatestRelease();
-const targets = release ? releaseTargets(release) : [];
-const defaultTarget = targets[0] ?? null;
+/* Everything below reads off a channel: the platform picker, the checksum, the
+   size. With no release published there is nothing to pick between, so the
+   component renders a single "not published yet" notice instead of four empty
+   panels that look like a broken page. */
+const channel = await getPreviewChannel();
+const defaultTarget = channel?.targets.find((target) => target.status === "available") ?? channel?.targets[0] ?? null;
+const locale = localeFromPath(Astro.url.pathname);
+const href = (path: string) => localePath(bestLocaleFor(locale, path), path);
+const c = locale === "en"
+  ? {
+      legend: "Choose platform and architecture",
+      available: "Available",
+      pending: "Verifying",
+      detected: "Showing the platform that is currently downloadable; you can switch at any time.",
+      notStableTitle: "This is not stable",
+      notStableBody: "The current package is unsigned and unnotarised. OneAgent does not document ways around your operating system's security policy.",
+      verified: "Verified and downloadable",
+      version: "Version",
+      channelLabel: "Release channel",
+      size: "File size",
+      built: "Build date",
+      signing: "Signing status",
+      unsigned: "Unsigned, unnotarised",
+      verification: "Verification",
+      verificationValue: "Native build + cleanroom passed",
+      download: (platform: string) => `Download the ${platform} preview`,
+      quickstart: "Read the quickstart",
+      sameBuildTitle: "You get the verified official build",
+      sameBuildBody: "This site, GitHub Releases and any mirror must serve the identical SHA-256. Repackaging is not permitted.",
+      checksumTitle: "macOS verification command",
+      copy: "Copy",
+      copied: "Copied",
+      cleanroomNote: "The cleanroom evidence applies to this file's exact SHA-256; any change to the package requires re-verification.",
+      unavailableTitle: "This platform has no public release yet",
+      unavailableBody: "The build workflow is in place, but until the native build, cleanroom evidence and release metadata are all present there is no empty download button and no CI artifact described as generally available.",
+      progress: "See release progress",
+      channelValue: "Unsigned technical preview",
+      fallbackPlatform: "current platform",
+      detectExact: "Detected as {full}. You can still switch manually.",
+      detectArchOnly: "Detected as {name} {arch}, but there is no exact build for that architecture here — do not run a build for a mismatched architecture.",
+      detectPlatformOnly: "Detected as {name}, but the browser cannot reliably tell the chip architecture. Confirm the option before downloading.",
+    }
+  : {
+      legend: "选择平台与架构",
+      available: "可下载",
+      pending: "验证中",
+      detected: "已优先显示当前可下载的平台；你可以随时手动切换。",
+      notStableTitle: "这不是 Stable",
+      notStableBody: "当前包未签名、未公证。OneAgent 不提供绕过操作系统安全策略的说明。",
+      verified: "已验证可下载",
+      version: "版本",
+      channelLabel: "发行渠道",
+      size: "文件大小",
+      built: "构建日期",
+      signing: "签名状态",
+      unsigned: "未签名、未公证",
+      verification: "验证状态",
+      verificationValue: "原生构建 + cleanroom 通过",
+      download: (platform: string) => `下载 ${platform} 预览版`,
+      quickstart: "查看快速开始",
+      sameBuildTitle: "下载即得到被校验的官方同包产物",
+      sameBuildBody: "任何官网、GitHub Release 或镜像渠道都必须保持相同 SHA-256，禁止二次打包。",
+      checksumTitle: "macOS 校验命令",
+      copy: "复制",
+      copied: "已复制",
+      cleanroomNote: "cleanroom 证据只对应此文件的精确 SHA-256；包体变化后必须重新验证。",
+      unavailableTitle: "这个平台尚未公开发行",
+      unavailableBody: "构建工作流已经保留，但在原生构建、cleanroom 证据和发行元数据齐备前，不提供空下载按钮，也不把 CI 产物描述为正式可用。",
+      progress: "查看发行进度",
+      channelValue: "未签名技术预览版",
+      fallbackPlatform: "当前平台",
+      detectExact: "已识别为 {full}；你仍可手动切换。",
+      detectArchOnly: "已识别为 {name} {arch}，当前目录没有完全匹配的构建；请勿运行架构不匹配的包。",
+      detectPlatformOnly: "已识别为 {name}，但浏览器无法可靠判断芯片架构；请确认选项后下载。",
+    };
 ---
+{!channel || !defaultTarget ? (
+  <div class="notice notice-warning">
+    <span class="notice-mark">!</span>
+    <div>
+      <strong>{c.unavailableTitle}</strong>
+      <p>{c.unavailableBody}</p>
+    </div>
+  </div>
+) : (
 <div class="download-layout" data-download-selector>
-  {release && defaultTarget ? (
-    <>
-      <aside class="platform-control">
-        <label for="platform-target">选择平台与架构</label>
-        <select id="platform-target" data-platform-select>
-          {targets.map((target) => (
-            <option value={target.id} selected={target.id === defaultTarget.id}>
-              {target.platformLabel} · {target.archLabel}
-            </option>
-          ))}
-        </select>
-        <p class="detected-note" data-detected-note>已优先显示当前可下载的平台；你可以随时手动切换。</p>
-        {release.prerelease && (
-          <div class="notice notice-warning" style="margin-top:22px">
-            <span class="notice-mark">!</span>
-            <div><strong>这是预发布版本</strong><p>签名与公证状态请以该 GitHub Release 的说明为准。</p></div>
-          </div>
-        )}
-      </aside>
-
+  <aside class="platform-control">
+    <fieldset class="platform-picker" data-platform-picker>
+      <legend>{c.legend}</legend>
+      {channel.targets.map((target) => (
+        <label class="platform-option">
+          <input
+            type="radio"
+            name="platform-target"
+            value={target.id}
+            checked={target.id === defaultTarget.id}
+            data-platform-radio
+          />
+          <span class="platform-option-body">
+            <span class="platform-option-name">{target.platformLabel}</span>
+            <span class="platform-option-arch">{target.archLabel}</span>
+          </span>
+          {target.status === "available"
+            ? <span class="chip chip-green">{c.available}</span>
+            : <span class="chip chip-orange">{c.pending}</span>}
+        </label>
+      ))}
+    </fieldset>
+    <p
+      class="detected-note"
+      data-detected-note
+      data-detect-exact={c.detectExact}
+      data-detect-arch={c.detectArchOnly}
+      data-detect-platform={c.detectPlatformOnly}
+      data-fallback={c.fallbackPlatform}
+    >{c.detected}</p>
+    <div class="notice notice-warning" style="margin-top:22px">
+      <span class="notice-mark">!</span>
       <div>
-        {targets.map((target) => (
-          <section class:list={["release-panel", { "is-active": target.id === defaultTarget.id }]} data-release-panel={target.id} aria-hidden={target.id === defaultTarget.id ? "false" : "true"}>
-            <div class="release-head">
-              <div><h2>{target.platformLabel}</h2><p>{target.archLabel}</p></div>
-              <span class="chip chip-green">GitHub Release</span>
-            </div>
-            <dl class="release-meta-grid">
-              <div><dt>版本</dt><dd>{release.tag_name}</dd></div>
-              <div><dt>发行类型</dt><dd>{release.prerelease ? "预发布版" : "正式版"}</dd></div>
-              <div><dt>文件大小</dt><dd>{formatBytes(target.bytes)}</dd></div>
-              <div><dt>发布日期</dt><dd>{formatDate(release.published_at)}</dd></div>
-            </dl>
-            <div class="download-action">
-              <a class="button button-primary" href={target.downloadUrl}>下载 {target.platformLabel} 版本</a>
-              <a class="button button-secondary" href={release.html_url}>查看 GitHub Release</a>
+        <strong>{c.notStableTitle}</strong>
+        <p>{c.notStableBody}</p>
+      </div>
+    </div>
+  </aside>
+
+  <div>
+    {channel.targets.map((target) => {
+      const artifact = binaryArtifact(target);
+      const download = artifact ? primaryDownload(artifact) : null;
+      return (
+        <section class:list={["release-panel", { "is-active": target.id === defaultTarget.id }]} data-release-panel={target.id} aria-hidden={target.id === defaultTarget.id ? "false" : "true"}>
+          <div class="release-head">
+            <div>
+              <h2>{target.platformLabel}</h2>
+              <p>{target.archLabel}</p>
             </div>
-            {target.sha256 ? (
+            {target.status === "available" ? <span class="chip chip-green">{c.verified}</span> : <span class="chip chip-orange">{c.pending}</span>}
+          </div>
+
+          {target.status === "available" && artifact && download ? (
+            <>
+              <dl class="release-meta-grid">
+                <div><dt>{c.version}</dt><dd>{channel.version}</dd></div>
+                <div><dt>{c.channelLabel}</dt><dd>{c.channelValue}</dd></div>
+                <div><dt>{c.size}</dt><dd>{formatBytes(artifact.bytes)}</dd></div>
+                <div><dt>{c.built}</dt><dd>{formatDate(target.built_at)}</dd></div>
+                <div><dt>{c.signing}</dt><dd>{c.unsigned}</dd></div>
+                <div><dt>{c.verification}</dt><dd>{c.verificationValue}</dd></div>
+              </dl>
+              <div class="download-action">
+                <a class="button button-primary" href={download.url} download>{c.download(target.platformLabel)}</a>
+                <a class="button button-secondary" href={href("quickstart/")}>{c.quickstart}</a>
+              </div>
+              <div class="notice notice-info">
+                <span class="notice-mark">i</span>
+                <div>
+                  <strong>{c.sameBuildTitle}</strong>
+                  <p>{c.sameBuildBody}</p>
+                </div>
+              </div>
               <div class="hash-block">
-                <p><strong>GitHub SHA-256</strong></p>
+                <p><strong>SHA-256</strong></p>
                 <div class="hash-row">
-                  <code class="hash-value">{target.sha256}</code>
-                  <button class="copy-button" type="button" data-copy={target.sha256}>复制</button>
+                  {/* Both this and the command below scroll horizontally on narrow
+                      screens, so they need to be reachable without a pointer
+                      (WCAG 2.1.1). The label names which value has focus. */}
+                  <code class="hash-value" tabindex="0" role="group" aria-label="SHA-256">{artifact.sha256}</code>
+                  <button class="copy-button" type="button" data-copy={artifact.sha256} data-copy-label={c.copy} data-copied-label={c.copied}>{c.copy}</button>
                 </div>
               </div>
-            ) : target.checksumUrl ? (
-              <div class="notice notice-info"><span class="notice-mark">i</span><div><strong>校验和由 Release 提供</strong><p><a href={target.checksumUrl}>查看 SHA256SUMS</a></p></div></div>
-            ) : null}
-          </section>
-        ))}
-      </div>
-    </>
-  ) : (
-    <section class="unavailable-panel" style="grid-column:1/-1">
-      <h2>尚无已发布版本</h2>
-      <p>下载页只展示 GitHub Release 中实际存在的版本和资产，不使用开发配置或本地构建结果补位。</p>
-      <a class="button button-secondary" href={releasesPageUrl}>查看 GitHub Releases</a>
-    </section>
-  )}
+              <div class="hash-block">
+                <p><strong>{c.checksumTitle}</strong></p>
+                <pre class="code-block" tabindex="0" role="group" aria-label={c.checksumTitle}><code>shasum -a 256 {artifact.file}</code></pre>
+              </div>
+              <p class="hero-note">{c.cleanroomNote}</p>
+            </>
+          ) : (
+            <div class="unavailable-panel">
+              <h3>{c.unavailableTitle}</h3>
+              <p>{c.unavailableBody}</p>
+              <a class="button button-secondary" href={href("changelog/")}>{c.progress}</a>
+            </div>
+          )}
+        </section>
+      );
+    })}
+  </div>
 </div>
+)}
 
 <script>
   import { detectTargetFromUserAgent } from "../lib/downloads";
 
   const root = document.querySelector<HTMLElement>("[data-download-selector]");
-  const select = root?.querySelector<HTMLSelectElement>("[data-platform-select]");
+  const radios = root ? Array.from(root.querySelectorAll<HTMLInputElement>("[data-platform-radio]")) : [];
   const note = root?.querySelector<HTMLElement>("[data-detected-note]");
   const panels = root ? Array.from(root.querySelectorAll<HTMLElement>("[data-release-panel]")) : [];
 
@@ -89,37 +209,61 @@ const defaultTarget = targets[0] ?? null;
     });
   };
 
-  if (select) {
+  // The detection notes are localised templates passed from the server through
+  // data attributes, so an English reader never sees the Chinese fallback that a
+  // hardcoded string would leave behind. {full}/{name}/{arch} are filled client-
+  // side because the platform name only exists in the rendered DOM.
+  const tplExact = note?.dataset.detectExact ?? "";
+  const tplArch = note?.dataset.detectArch ?? "";
+  const tplPlatform = note?.dataset.detectPlatform ?? "";
+  const fallbackPlatform = note?.dataset.fallback ?? "";
+  const fill = (template: string, vars: Record<string, string>) =>
+    template.replace(/\{(\w+)\}/g, (_, key: string) => vars[key] ?? "");
+
+  const labelFor = (radio: HTMLInputElement) => {
+    const name = radio.parentElement?.querySelector(".platform-option-name")?.textContent?.trim() ?? fallbackPlatform;
+    const arch = radio.parentElement?.querySelector(".platform-option-arch")?.textContent?.trim() ?? "";
+    return { name, full: arch ? `${name} · ${arch}` : name };
+  };
+
+  if (radios.length) {
     const detected = detectTargetFromUserAgent(navigator.userAgent);
     if (detected) {
-      const exact = Array.from(select.options).find((option) => option.value === `${detected.platform}-${detected.arch}`);
-      const samePlatform = Array.from(select.options).find((option) => option.value.startsWith(`${detected.platform}-`));
-      const option = exact ?? samePlatform;
-      if (option) {
-        select.value = option.value;
-        show(option.value);
+      const exact = radios.find((radio) => radio.value === `${detected.platform}-${detected.arch}`);
+      const samePlatform = radios.find((radio) => radio.value.startsWith(`${detected.platform}-`));
+      const match = exact ?? samePlatform;
+      if (match) {
+        match.checked = true;
+        show(match.value);
         if (note) {
-          const selectedLabel = option.textContent?.trim() ?? "当前平台";
-          const platformLabel = selectedLabel.split("·", 1)[0]?.trim() ?? selectedLabel;
-          if (exact) note.textContent = `已识别为 ${selectedLabel}；你仍可手动切换。`;
+          const { name, full } = labelFor(match);
+          if (exact) note.textContent = fill(tplExact, { full, name });
           else if (detected.arch) {
             const architecture = detected.arch === "arm64" ? "ARM64" : "x64";
-            note.textContent = `已识别为 ${platformLabel} ${architecture}，当前目录没有完全匹配的构建；请勿运行架构不匹配的包。`;
+            note.textContent = fill(tplArch, { name, arch: architecture });
           } else {
-            note.textContent = `已识别为 ${platformLabel}，但浏览器无法可靠判断芯片架构；请确认选项后下载。`;
+            note.textContent = fill(tplPlatform, { name });
           }
         }
       }
     }
-    select.addEventListener("change", () => show(select.value));
+    // Radio groups fire change on the newly selected input, and arrow-key
+    // navigation moves selection too, so one listener per input covers both
+    // pointer and keyboard without any roving-tabindex bookkeeping.
+    radios.forEach((radio) => {
+      radio.addEventListener("change", () => {
+        if (radio.checked) show(radio.value);
+      });
+    });
   }
 
   root?.querySelectorAll<HTMLButtonElement>("[data-copy]").forEach((button) => {
     button.addEventListener("click", async () => {
       const value = button.dataset.copy ?? "";
       await navigator.clipboard.writeText(value);
-      button.textContent = "已复制";
-      window.setTimeout(() => { button.textContent = "复制"; }, 1500);
+      const idle = button.dataset.copyLabel ?? button.textContent ?? "";
+      button.textContent = button.dataset.copiedLabel ?? idle;
+      window.setTimeout(() => { button.textContent = idle; }, 1500);
     });
   });
 </script>
diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro
index f3e0d409..f29178b4 100644
--- a/site/src/components/Footer.astro
+++ b/site/src/components/Footer.astro
@@ -1,39 +1,69 @@
 ---
 import BrandMark from "./BrandMark.astro";
+import { bestLocaleFor, localeFromPath, localePath, switchesLanguage } from "../i18n";
+import { useTranslations } from "../i18n/ui";
 import { releasesPageUrl } from "../lib/downloads";
+
 const year = new Date().getUTCFullYear();
+const locale = localeFromPath(Astro.url.pathname);
+const t = useTranslations(locale);
+const href = (path: string) => localePath(bestLocaleFor(locale, path), path);
+/* Column links, grouped as rendered. A `path` is resolved per locale and gets a
+   hint when the target has no translation; an `href` is an absolute artifact URL
+   that is the same in every locale. */
+type FooterLink = { path: string; label: string } | { href: string; label: string };
+const columns: { heading: string; links: FooterLink[] }[] = [
+  {
+    heading: t("footer.start"),
+    links: [
+      { path: "downloads/", label: t("footer.downloadCenter") },
+      { path: "quickstart/", label: t("nav.quickstart") },
+      { path: "changelog/", label: t("nav.changelog") },
+    ],
+  },
+  {
+    heading: t("footer.capability"),
+    links: [
+      { path: "explore/", label: t("nav.explorer") },
+      { path: "agents/", label: t("footer.agentCatalog") },
+      { path: "providers/", label: t("footer.providerCatalog") },
+    ],
+  },
+  {
+    heading: t("footer.trust"),
+    links: [
+      { path: "support/", label: t("footer.supportFeedback") },
+      // A published artifact rather than a page: same URL in every locale, so it
+      // is exempt from the locale resolution and the hint.
+      { href: releasesPageUrl, label: t("footer.releaseIndex") },
+    ],
+  },
+];
 ---
 <footer class="site-footer">
   <div class="shell footer-grid">
     <div class="footer-brand">
-      <a class="wordmark" href="">
+      <a class="wordmark" href={href("")}>
         <span class="wordmark-mark"><BrandMark size={22} /></span>
         <span>OneAgent</span>
       </a>
-      <p>可信的本地 Agent 管家</p>
-      <p class="footer-fine">不提供共享 Key，不代理模型请求，不重新分发第三方 Agent。</p>
-    </div>
-    <div>
-      <strong>开始</strong>
-      <a href="downloads/">下载中心</a>
-      <a href="quickstart/">快速开始</a>
-      <a href="changelog/">更新日志</a>
-    </div>
-    <div>
-      <strong>能力</strong>
-      <a href="agents/">Agent 兼容目录</a>
-      <a href="providers/">Provider 目录</a>
-      <a href="enterprise/">企业服务</a>
-    </div>
-    <div>
-      <strong>信任</strong>
-      <a href="security/">安全与隐私</a>
-      <a href="support/">支持与反馈</a>
-      <a href={releasesPageUrl}>GitHub Releases</a>
+      <p>{t("footer.tagline")}</p>
+      <p class="footer-fine">{t("footer.boundary")}</p>
     </div>
+    {columns.map((column) => (
+      <div>
+        <strong>{column.heading}</strong>
+        {column.links.map((link) => (
+          <a href={"path" in link ? href(link.path) : link.href}>
+            {link.label}
+            {"path" in link && switchesLanguage(locale, link.path) && <span class="lang-hint">{t("nav.chineseOnly")}</span>}
+          </a>
+        ))}
+      </div>
+    ))}
   </div>
   <div class="shell footer-bottom">
     <span>© {year} OneAgent</span>
-    <span>版本与下载以 GitHub Releases 为准</span>
+    <span>{t("footer.channel")}</span>
   </div>
 </footer>
diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index 1d5a5f31..3d5b162c 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -1,38 +1,56 @@
 ---
 import BrandMark from "./BrandMark.astro";
+import ThemeToggle from "./ThemeToggle.astro";
+import LocaleSwitch from "./LocaleSwitch.astro";
+import { bestLocaleFor, localeFromPath, localePath, routeWithoutLocale, switchesLanguage } from "../i18n";
+import { useTranslations } from "../i18n/ui";
 
 const pathname = Astro.url.pathname;
-const basePath = import.meta.env.BASE_URL;
-const withBase = (path: string) => `${basePath}${path.replace(/^\/+/, "")}`;
+const locale = localeFromPath(pathname);
+const t = useTranslations(locale);
+const href = (path: string) => localePath(bestLocaleFor(locale, path), path);
+/* The security and enterprise pages stay published and linked from the footer,
+   the release index and the demo's preview-gate result — they are just not
+   worth a top-level nav slot. */
 const nav = [
-  { path: "downloads/", label: "下载" },
-  { path: "quickstart/", label: "快速开始" },
-  { path: "agents/", label: "Agent" },
-  { path: "providers/", label: "Provider" },
-  { path: "security/", label: "安全" },
+  { path: "downloads/", label: t("nav.downloads") },
+  { path: "quickstart/", label: t("nav.quickstart") },
+  { path: "explore/", label: t("nav.explorer") },
 ];
-const active = (path: string) => pathname.includes(`/${path}`);
+// Compared on the locale-stripped route so /en/agents/ marks the same item as
+// /agents/ rather than matching on a substring of the full path.
+const route = routeWithoutLocale(pathname);
+const active = (path: string) =>
+  route === path ||
+  (path === "explore/" && (route === "agents/" || route.startsWith("agents/") || route === "providers/" || route.startsWith("providers/")));
 ---
 <header class="site-header">
   <div class="shell header-inner">
-    <a class="wordmark" href={withBase("")} aria-label="OneAgent 首页">
+    <a class="wordmark" href={href("")} aria-label={t("nav.home")}>
       <span class="wordmark-mark"><BrandMark size={24} /></span>
       <span>OneAgent</span>
     </a>
-    <nav class="desktop-nav" aria-label="主导航">
+    <nav class="desktop-nav" aria-label={t("nav.primary")}>
       {nav.map((item) => (
-        <a href={withBase(item.path)} aria-current={active(item.path) ? "page" : undefined}>{item.label}</a>
+        <a href={href(item.path)} aria-current={active(item.path) ? "page" : undefined}>
+          {item.label}
+          {switchesLanguage(locale, item.path) && <span class="lang-hint">{t("nav.chineseOnly")}</span>}
+        </a>
       ))}
     </nav>
     <div class="header-actions">
-      <a class="header-link" href={withBase("enterprise/")}>企业服务</a>
-      <a class="button button-small button-primary" href={withBase("downloads/")}>下载预览版</a>
+      <LocaleSwitch />
+      <ThemeToggle />
+      <a class:list={["button", "button-small", route === "" ? "button-secondary" : "button-primary"]} href={href("downloads/")}>{t("cta.download")}</a>
       <details class="mobile-menu">
-        <summary aria-label="打开导航菜单">菜单</summary>
-        <nav aria-label="移动端导航">
-          {nav.map((item) => <a href={withBase(item.path)}>{item.label}</a>)}
-          <a href={withBase("enterprise/")}>企业服务</a>
-          <a href={withBase("support/")}>支持</a>
+        <summary aria-label={t("nav.openMenu")}>{t("nav.menu")}</summary>
+        <nav aria-label={t("nav.mobile")}>
+          {[...nav, { path: "support/", label: t("nav.support") }].map((item) => (
+            <a href={href(item.path)}>
+              {item.label}
+              {switchesLanguage(locale, item.path) && <span class="lang-hint">{t("nav.chineseOnly")}</span>}
+            </a>
+          ))}
         </nav>
       </details>
     </div>
diff --git a/site/src/components/HeroParticles.astro b/site/src/components/HeroParticles.astro
new file mode 100644
index 00000000..6f442ca4
--- /dev/null
+++ b/site/src/components/HeroParticles.astro
@@ -0,0 +1,132 @@
+---
+---
+<canvas class="hero-particles" data-hero-particles aria-hidden="true"></canvas>
+
+<style>
+  .hero-particles {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+</style>
+
+<script>
+  const canvas = document.querySelector<HTMLCanvasElement>("[data-hero-particles]");
+  const context = canvas?.getContext("2d");
+
+  if (canvas && context) {
+    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const COUNT = 56;
+    const particles: { x: number; y: number; vx: number; vy: number; r: number; a: number }[] = [];
+    let width = 0;
+    let height = 0;
+    let frame = 0;
+
+    const resize = () => {
+      const ratio = Math.min(window.devicePixelRatio || 1, 2);
+      const box = canvas.getBoundingClientRect();
+      width = box.width;
+      height = box.height;
+      canvas.width = Math.round(width * ratio);
+      canvas.height = Math.round(height * ratio);
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    };
+
+    const seed = () => {
+      particles.length = 0;
+      for (let i = 0; i < COUNT; i += 1) {
+        particles.push({
+          x: Math.random() * width,
+          y: Math.random() * height,
+          vx: (Math.random() - 0.5) * 0.18,
+          vy: (Math.random() - 0.5) * 0.18,
+          r: 0.8 + Math.random() * 1.6,
+          a: 0.16 + Math.random() * 0.3,
+        });
+      }
+    };
+
+    // Canvas cannot resolve var() itself, so the theme's channel triple is read
+    // off the element and cached — re-reading it per particle per frame would
+    // force a style recalc 56 times a frame.
+    let channels = "0, 98, 204";
+    const readChannels = () => {
+      const value = getComputedStyle(canvas).getPropertyValue("--particle").trim();
+      if (value) channels = value;
+    };
+
+    const paint = () => {
+      context.clearRect(0, 0, width, height);
+      for (const p of particles) {
+        context.beginPath();
+        context.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+        context.fillStyle = `rgba(${channels}, ${p.a})`;
+        context.fill();
+      }
+    };
+
+    const tick = () => {
+      for (const p of particles) {
+        p.x += p.vx;
+        p.y += p.vy;
+        if (p.x < 0) p.x = width;
+        else if (p.x > width) p.x = 0;
+        if (p.y < 0) p.y = height;
+        else if (p.y > height) p.y = 0;
+      }
+      paint();
+      frame = window.requestAnimationFrame(tick);
+    };
+
+    const stop = () => {
+      if (frame) window.cancelAnimationFrame(frame);
+      frame = 0;
+    };
+
+    // The CSS prefers-reduced-motion block only clamps CSS animations, so the
+    // loop has to opt out on its own: paint one static frame and never start.
+    const start = () => {
+      stop();
+      if (!reduceMotion.matches) frame = window.requestAnimationFrame(tick);
+    };
+
+    resize();
+    readChannels();
+    seed();
+    paint();
+    start();
+
+    // Under reduced motion nothing repaints on its own, so a theme switch has to
+    // trigger the redraw or the particles keep the previous scheme's colour.
+    document.addEventListener("oneagent:themechange", () => {
+      readChannels();
+      if (!frame) paint();
+    });
+
+    new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) start();
+        else stop();
+      }
+    }).observe(canvas);
+
+    window.addEventListener("resize", () => {
+      resize();
+      seed();
+      paint();
+    });
+
+    reduceMotion.addEventListener("change", () => {
+      if (reduceMotion.matches) {
+        stop();
+        paint();
+      } else {
+        start();
+      }
+    });
+  }
+</script>
diff --git a/site/src/components/LocaleSwitch.astro b/site/src/components/LocaleSwitch.astro
new file mode 100644
index 00000000..7d0800f3
--- /dev/null
+++ b/site/src/components/LocaleSwitch.astro
@@ -0,0 +1,32 @@
+---
+import { localeFromPath, localePath, locales, localeNames, routeWithoutLocale, translatedRoutes } from "../i18n";
+import { useTranslations } from "../i18n/ui";
+
+const current = localeFromPath(Astro.url.pathname);
+const route = routeWithoutLocale(Astro.url.pathname);
+const t = useTranslations(current);
+const target = locales.find((locale) => locale !== current)!;
+// Switching keeps the reader on the same page where that page is translated,
+// and falls back to the home page rather than a 404 where it is not.
+const targetHref = localePath(target, translatedRoutes.has(route) ? route : "");
+---
+<a class="locale-switch" href={targetHref} hreflang={target} lang={target} aria-label={t("lang.switch")}>
+  {localeNames[target]}
+</a>
+
+<style>
+  .locale-switch {
+    min-height: 34px;
+    padding: 0 10px;
+    display: inline-flex;
+    align-items: center;
+    color: var(--ink-soft);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-control);
+    font-size: 13px;
+    font-weight: 560;
+    transition: color var(--dur-micro) var(--ease-apple), background-color var(--dur-micro) var(--ease-apple), border-color var(--dur-micro) var(--ease-apple);
+  }
+  .locale-switch:hover { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
+  .locale-switch:active { background: var(--surface-pressed); transition-duration: 100ms; }
+</style>
diff --git a/site/src/components/ThemeToggle.astro b/site/src/components/ThemeToggle.astro
new file mode 100644
index 00000000..238f14ae
--- /dev/null
+++ b/site/src/components/ThemeToggle.astro
@@ -0,0 +1,80 @@
+---
+import { localeFromPath } from "../i18n";
+import { useTranslations } from "../i18n/ui";
+
+const t = useTranslations(localeFromPath(Astro.url.pathname));
+const label = t("theme.toggle");
+---
+<button
+  class="theme-toggle"
+  type="button"
+  data-theme-toggle
+  aria-pressed="false"
+  aria-label={label}
+  title={label}
+>
+  <svg class="theme-icon-sun" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <circle cx="8" cy="8" r="3.1" />
+    <path d="M8 1.4v1.5M8 13.1v1.5M1.4 8h1.5M13.1 8h1.5M3.3 3.3l1.1 1.1M11.6 11.6l1.1 1.1M12.7 3.3l-1.1 1.1M4.4 11.6l-1.1 1.1" />
+  </svg>
+  <svg class="theme-icon-moon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <path d="M13.4 9.9A5.9 5.9 0 0 1 6.1 2.6a5.9 5.9 0 1 0 7.3 7.3Z" />
+  </svg>
+</button>
+
+<style>
+  .theme-toggle {
+    width: 34px;
+    height: 34px;
+    display: grid;
+    place-items: center;
+    color: var(--ink-soft);
+    background: transparent;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-control);
+    cursor: pointer;
+    transition: color var(--dur-micro) var(--ease-apple), background-color var(--dur-micro) var(--ease-apple), border-color var(--dur-micro) var(--ease-apple);
+  }
+  .theme-toggle:hover { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
+  .theme-toggle:active { background: var(--surface-pressed); transition-duration: 100ms; }
+  .theme-toggle svg { grid-area: 1 / 1; }
+  /* Only one glyph shows at a time; which one is decided by the theme class the
+     inline head script has already applied, so there is no swap on hydration. */
+  .theme-icon-moon { display: none; }
+  :global(.theme-dark) .theme-icon-sun { display: none; }
+  :global(.theme-dark) .theme-icon-moon { display: block; }
+</style>
+
+<script>
+  const STORAGE_KEY = "oneagent-theme";
+  const button = document.querySelector<HTMLButtonElement>("[data-theme-toggle]");
+  const system = window.matchMedia("(prefers-color-scheme: dark)");
+
+  const isDark = () => document.documentElement.classList.contains("theme-dark");
+
+  const sync = () => {
+    button?.setAttribute("aria-pressed", isDark() ? "true" : "false");
+    document.dispatchEvent(new CustomEvent("oneagent:themechange"));
+  };
+
+  const apply = (dark: boolean) => {
+    document.documentElement.classList.toggle("theme-dark", dark);
+    sync();
+  };
+
+  button?.addEventListener("click", () => {
+    const next = !isDark();
+    // Storing the resolved choice means a later system flip cannot silently
+    // override what the reader picked.
+    window.localStorage.setItem(STORAGE_KEY, next ? "dark" : "light");
+    apply(next);
+  });
+
+  // A system change should still win while no explicit choice is stored.
+  system.addEventListener("change", (event) => {
+    if (window.localStorage.getItem(STORAGE_KEY)) return;
+    apply(event.matches);
+  });
+
+  sync();
+</script>
diff --git a/site/src/i18n/catalog.test.ts b/site/src/i18n/catalog.test.ts
new file mode 100644
index 00000000..f2958c26
--- /dev/null
+++ b/site/src/i18n/catalog.test.ts
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+
+import { catalog } from "../lib/catalog";
+import { locales, switchesLanguage, translatedRoutes, type Locale } from "./index";
+import { useCatalogLabels } from "./catalog";
+
+
+// Every enum the catalog can emit needs a label in every locale. A missing entry
+// falls back to the raw id, which reads as the wrong language rather than as a
+// bug — the Chinese `gateway` label shipped as the English "Gateway Agent" that
+// way, and nothing failed.
+describe("catalogue labels cover every locale", () => {
+  const cjk = /[一-鿿]/;
+
+  for (const locale of locales) {
+    describe(locale, () => {
+      const labels = useCatalogLabels(locale);
+
+      it("labels every group the catalog uses", () => {
+        const used = [...new Set(catalog.agents.map((agent) => agent.group))].sort();
+        for (const group of used) {
+          expect(labels.groupLabels[group], `${locale} is missing group "${group}"`).toBeTruthy();
+        }
+      });
+
+      it("labels every protocol status the providers publish", () => {
+        const used = [...new Set(catalog.providers.flatMap((p) => p.protocols.map((entry) => entry.status)))].sort();
+        for (const status of used) {
+          expect(labels.protocolStatusLabels[status], `${locale} is missing status "${status}"`).toBeTruthy();
+        }
+      });
+
+      it("writes group labels in the locale's own language", () => {
+        for (const [group, label] of Object.entries(labels.groupLabels)) {
+          // Proper nouns are allowed to stay Latin, so the check is directional:
+          // a Chinese label must contain some Chinese, and an English one none.
+          if (locale === "zh-CN") {
+            expect(cjk.test(label), `zh-CN group "${group}" has no Chinese: ${label}`).toBe(true);
+          } else {
+            expect(cjk.test(label), `en group "${group}" contains Chinese: ${label}`).toBe(false);
+          }
+        }
+      });
+    });
+  }
+});
+
+describe("cross-language link detection", () => {
+  it("flags only the routes with no translation", () => {
+    for (const route of translatedRoutes) {
+      expect(switchesLanguage("en", route), `${route} is translated`).toBe(false);
+    }
+    for (const route of ["enterprise/", "support/", "agents/", "providers/", "changelog/"]) {
+      expect(switchesLanguage("en", route), `${route} has no English page`).toBe(true);
+    }
+  });
+
+  it("never flags a link for a Chinese reader, since Chinese is the fallback", () => {
+    for (const route of [...translatedRoutes, "enterprise/", "agents/"]) {
+      expect(switchesLanguage("zh-CN" as Locale, route)).toBe(false);
+    }
+  });
+});
diff --git a/site/src/i18n/catalog.ts b/site/src/i18n/catalog.ts
new file mode 100644
index 00000000..ccdfe605
--- /dev/null
+++ b/site/src/i18n/catalog.ts
@@ -0,0 +1,75 @@
+import type { Locale } from "./index";
+
+/**
+ * Catalogue enum labels. protocolLabels and platformLabels are absent on
+ * purpose — their values are proper nouns ("OpenAI Chat Completions", "macOS")
+ * and stay in src/lib/content.ts, shared by both languages.
+ */
+const catalog = {
+  "zh-CN": {
+    agentDescriptions: {
+      codex: "OpenAI 的终端编码 Agent，OneAgent 管理 Responses 协议配置。",
+      "claude-code": "Anthropic 的终端编码 Agent，使用 Anthropic-compatible 配置。",
+      cursor: "AI 编辑器；OneAgent 只提供官方安装与登录引导，不写入私有配置。",
+      opencode: "开源终端编码 Agent，使用 OpenAI-compatible 协议。",
+      openclaw: "多渠道 Agent 网关；按官方流程安装、onboard 与管理服务。",
+      hermes: "自我成长型 Agent 框架；模型与运行配置由官方工具管理。",
+      "gemini-cli": "Google 官方 CLI；使用 Google 登录、Gemini API Key 或 Vertex AI。",
+      "kilo-cli": "多模型命令行 Agent，OneAgent 可管理安装与 OpenAI-compatible 配置。",
+      aider: "结对编程式仓库编辑 Agent，模型在启动命令中明确选择。",
+      kiro: "官方账号型开发 Agent；使用官方登录与配置流程。",
+      cline: "IDE 扩展；在扩展界面选择兼容 Provider。",
+      continue: "IDE 扩展；在 Continue 配置中添加兼容模型。",
+      "qwen-code": "Qwen 的编码工具；按官方文档完成安装和 Provider 配置。",
+      "kilo-vscode": "Kilo Code 的 VS Code 扩展；由扩展界面管理 Provider。",
+    } as Record<string, string>,
+    groupLabels: {
+      auto: "OneAgent 可管理",
+      gateway: "网关 Agent",
+      platform: "官方账号 Agent",
+      ide: "IDE 扩展",
+    } as Record<string, string>,
+    protocolStatusLabels: {
+      "implementation-supported": "实现已接入",
+      "release-candidate-required": "需 Release Candidate 实证",
+      verified: "已验证",
+      unsupported: "不支持",
+    } as Record<string, string>,
+    agentFallbackDescription: "按项目公开能力提供安装或配置支持。",
+  },
+  en: {
+    agentDescriptions: {
+      codex: "OpenAI's terminal coding agent; OneAgent manages its Responses protocol configuration.",
+      "claude-code": "Anthropic's terminal coding agent, configured through an Anthropic-compatible endpoint.",
+      cursor: "AI editor. OneAgent only points you at the official install and sign-in, and writes no private config.",
+      opencode: "Open-source terminal coding agent using the OpenAI-compatible protocol.",
+      openclaw: "Multi-channel agent gateway; install, onboard and run it through the official flow.",
+      hermes: "Self-improving agent framework; its own tooling owns model and runtime configuration.",
+      "gemini-cli": "Google's official CLI, using Google sign-in, a Gemini API key or Vertex AI.",
+      "kilo-cli": "Multi-model command-line agent. OneAgent can manage both install and OpenAI-compatible config.",
+      aider: "Pair-programming repository editor; the model is named explicitly at launch.",
+      kiro: "Account-based development agent using the vendor's own sign-in and configuration.",
+      cline: "IDE extension; choose a compatible provider inside the extension.",
+      continue: "IDE extension; add a compatible model in Continue's own configuration.",
+      "qwen-code": "Qwen's coding tool; follow the official docs for install and provider setup.",
+      "kilo-vscode": "Kilo Code's VS Code extension; providers are managed in the extension UI.",
+    } as Record<string, string>,
+    groupLabels: {
+      auto: "OneAgent-managed",
+      gateway: "Gateway agent",
+      platform: "Vendor-account agent",
+      ide: "IDE extension",
+    } as Record<string, string>,
+    protocolStatusLabels: {
+      "implementation-supported": "Implemented",
+      "release-candidate-required": "Needs release-candidate evidence",
+      verified: "Verified",
+      unsupported: "Unsupported",
+    } as Record<string, string>,
+    agentFallbackDescription: "Install or configuration support follows the project's published capabilities.",
+  },
+} as const;
+
+export function useCatalogLabels(locale: Locale) {
+  return catalog[locale];
+}
diff --git a/site/src/i18n/index.ts b/site/src/i18n/index.ts
new file mode 100644
index 00000000..aaa84595
--- /dev/null
+++ b/site/src/i18n/index.ts
@@ -0,0 +1,70 @@
+export const locales = ["zh-CN", "en"] as const;
+export type Locale = (typeof locales)[number];
+export const defaultLocale: Locale = "zh-CN";
+
+/** Prefix carried in the URL for each locale; the default locale has none. */
+const prefixes: Record<Locale, string> = { "zh-CN": "", en: "en" };
+
+export const htmlLang: Record<Locale, string> = { "zh-CN": "zh-CN", en: "en" };
+export const ogLocale: Record<Locale, string> = { "zh-CN": "zh_CN", en: "en_US" };
+export const localeNames: Record<Locale, string> = { "zh-CN": "中文", en: "English" };
+
+const base = import.meta.env.BASE_URL;
+const baseSegments = base.split("/").filter(Boolean);
+
+/**
+ * Reads the locale out of a pathname. Works under a configured base path, where
+ * the locale segment is not the first one.
+ */
+export function localeFromPath(pathname: string): Locale {
+  const segments = pathname.split("/").filter(Boolean).slice(baseSegments.length);
+  const candidate = segments[0];
+  const match = locales.find((locale) => prefixes[locale] && prefixes[locale] === candidate);
+  return match ?? defaultLocale;
+}
+
+/**
+ * Builds an absolute, locale-aware path.
+ *
+ * Every link has to go through this. Relative hrefs resolve against <base>,
+ * which knows nothing about locales, so a relative link on an English page
+ * silently lands on the Chinese one — and validate-build.mjs anchors its
+ * link check at the root, so it cannot see that happen.
+ */
+export function localePath(locale: Locale, path = ""): string {
+  const clean = path.replace(/^\/+/, "");
+  const prefix = prefixes[locale];
+  return `${base}${prefix ? `${prefix}/` : ""}${clean}`;
+}
+
+/**
+ * Routes that exist in every locale. Anything outside this set is Chinese-only
+ * for now, and linking it under /en/ would point at a path that was never built
+ * — which validate-build.mjs fails the build over. Add a route here in the same
+ * change that adds its translation.
+ */
+export const translatedRoutes = new Set(["", "downloads/", "quickstart/", "explore/", "security/"]);
+
+/** Resolves a link to the current locale when translated, Chinese otherwise. */
+export function bestLocaleFor(locale: Locale, route: string): Locale {
+  return translatedRoutes.has(route) ? locale : defaultLocale;
+}
+
+/**
+ * True when following this link from `locale` lands on a different language.
+ *
+ * Untranslated routes fall back to Chinese, which is better than a 404 but is a
+ * surprise if nothing says so first. Callers use this to mark the link, so the
+ * language change is visible before the click rather than after it.
+ */
+export function switchesLanguage(locale: Locale, route: string): boolean {
+  return bestLocaleFor(locale, route) !== locale;
+}
+
+/** Strips base and locale, yielding the route shared across languages. */
+export function routeWithoutLocale(pathname: string): string {
+  const segments = pathname.split("/").filter(Boolean).slice(baseSegments.length);
+  const first = segments[0];
+  if (locales.some((locale) => prefixes[locale] && prefixes[locale] === first)) segments.shift();
+  return segments.length ? `${segments.join("/")}/` : "";
+}
diff --git a/site/src/i18n/ui.ts b/site/src/i18n/ui.ts
new file mode 100644
index 00000000..b6b94480
--- /dev/null
+++ b/site/src/i18n/ui.ts
@@ -0,0 +1,86 @@
+import type { Locale } from "./index";
+
+/**
+ * Chrome and shared-component copy. Page prose stays in the page templates —
+ * only strings reused across pages, or read by more than one component, belong
+ * here.
+ */
+const strings = {
+  "zh-CN": {
+    "site.title": "OneAgent — 可信的本地 AI 开发环境激活器",
+    "site.description": "用一个可信的本地流程，激活你自己的 Agent、账号和 Provider。",
+    "skip.main": "跳到主要内容",
+    "nav.home": "OneAgent 首页",
+    "nav.downloads": "下载",
+    "nav.quickstart": "快速开始",
+    "nav.explorer": "配置",
+    "nav.agents": "Agent",
+    "nav.providers": "Provider",
+    "nav.support": "支持",
+    "nav.changelog": "更新日志",
+    "nav.primary": "主导航",
+    "nav.mobile": "移动端导航",
+    "nav.openMenu": "打开导航菜单",
+    /* Only ever shown on an English page, where it warns that the target has no
+       translation yet. A Chinese reader never sees it, but the key exists in both
+       dictionaries so useTranslations stays exhaustive. */
+    "nav.chineseOnly": "仅中文",
+    "nav.menu": "菜单",
+    "cta.download": "下载预览版",
+    "theme.toggle": "切换深色模式",
+    "lang.switch": "切换语言",
+    "breadcrumb.label": "面包屑",
+    "breadcrumb.home": "首页",
+    "footer.tagline": "可信的本地 AI 开发环境激活器。",
+    "footer.boundary": "不提供共享 Key，不代理模型请求，不重新分发第三方 Agent。",
+    "footer.start": "开始",
+    "footer.capability": "能力",
+    "footer.trust": "信任",
+    "footer.downloadCenter": "下载中心",
+    "footer.agentCatalog": "Agent 兼容目录",
+    "footer.providerCatalog": "Provider 目录",
+    "footer.supportFeedback": "支持与反馈",
+    "footer.releaseIndex": "GitHub Releases",
+    "footer.channel": "当前公开渠道：technical-preview-unsigned",
+  },
+  en: {
+    "site.title": "OneAgent — a trustworthy local AI development environment activator",
+    "site.description": "Activate your own agents, accounts and providers through one auditable local flow.",
+    "skip.main": "Skip to main content",
+    "nav.home": "OneAgent home",
+    "nav.downloads": "Downloads",
+    "nav.quickstart": "Quickstart",
+    "nav.explorer": "Explorer",
+    "nav.agents": "Agents",
+    "nav.providers": "Providers",
+    "nav.support": "Support",
+    "nav.changelog": "Changelog",
+    "nav.primary": "Primary navigation",
+    "nav.mobile": "Mobile navigation",
+    "nav.openMenu": "Open navigation menu",
+    "nav.chineseOnly": "in Chinese",
+    "nav.menu": "Menu",
+    "cta.download": "Get the preview",
+    "theme.toggle": "Toggle dark mode",
+    "lang.switch": "Change language",
+    "breadcrumb.label": "Breadcrumb",
+    "breadcrumb.home": "Home",
+    "footer.tagline": "A trustworthy local AI development environment activator.",
+    "footer.boundary": "No shared keys, no proxied model requests, no redistribution of third-party agents.",
+    "footer.start": "Start",
+    "footer.capability": "Capabilities",
+    "footer.trust": "Trust",
+    "footer.downloadCenter": "Download centre",
+    "footer.agentCatalog": "Agent compatibility",
+    "footer.providerCatalog": "Provider catalogue",
+    "footer.supportFeedback": "Support & feedback",
+    "footer.releaseIndex": "GitHub Releases",
+    "footer.channel": "Current public channel: technical-preview-unsigned",
+  },
+} as const;
+
+export type UIKey = keyof (typeof strings)["zh-CN"];
+
+export function useTranslations(locale: Locale) {
+  return (key: UIKey): string => strings[locale][key] ?? strings["zh-CN"][key];
+}
diff --git a/site/src/layouts/BaseLayout.astro b/site/src/layouts/BaseLayout.astro
index 13bff194..6720b816 100644
--- a/site/src/layouts/BaseLayout.astro
+++ b/site/src/layouts/BaseLayout.astro
@@ -1,7 +1,9 @@
 ---
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
-import { getLatestRelease, releaseTargets } from "../lib/downloads";
+import { defaultLocale, htmlLang, localeFromPath, localePath, locales, ogLocale, routeWithoutLocale, translatedRoutes } from "../i18n";
+import { useTranslations } from "../i18n/ui";
+import { getPreviewChannel } from "../lib/release-channel";
 import "../styles/global.css";
 
 interface Props {
@@ -11,31 +13,46 @@ interface Props {
   noindex?: boolean;
 }
 
+const locale = localeFromPath(Astro.url.pathname);
+const t = useTranslations(locale);
 const {
-  title = "OneAgent — 可信的本地 Agent 管家",
-  description = "用一个可信的本地流程，激活你自己的 Agent、账号和 Provider。",
+  title = t("site.title"),
+  description = t("site.description"),
   image = "images/oneagent-overview.jpg",
   noindex = false,
 } = Astro.props;
-const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url.origin);
-const baseUrl = new URL(import.meta.env.BASE_URL, Astro.site ?? Astro.url.origin);
-const imageUrl = new URL(image.replace(/^\/+/, ""), baseUrl);
-const release = await getLatestRelease();
-const availableSystems = release ? releaseTargets(release).map((target) => `${target.platformLabel} ${target.archLabel}`) : [];
+const canonicalOrigin = Astro.site ?? Astro.url.origin;
+const canonical = new URL(Astro.url.pathname, canonicalOrigin);
+// Only pages that exist in both languages get alternates; pointing hreflang at
+// an unbuilt path would advertise a 404 to crawlers.
+const route = routeWithoutLocale(Astro.url.pathname);
+const alternates = translatedRoutes.has(route)
+  ? locales.map((code) => ({
+      code,
+      href: new URL(localePath(code, route), canonicalOrigin).toString(),
+    }))
+  : [];
+const runtimeBaseUrl = new URL(import.meta.env.BASE_URL, Astro.url.origin);
+const canonicalBaseUrl = new URL(import.meta.env.BASE_URL, canonicalOrigin);
+const imageUrl = new URL(image.replace(/^\/+/, ""), canonicalBaseUrl);
+const preview = await getPreviewChannel();
+const availableSystems = preview?.targets
+  .filter((target) => target.status === "available")
+  .map((target) => `${target.platformLabel} ${target.archLabel}`) ?? [];
 const structuredData = {
   "@context": "https://schema.org",
   "@type": "SoftwareApplication",
   name: "OneAgent",
   applicationCategory: "DeveloperApplication",
   operatingSystem: availableSystems.join(", ") || "No public build",
-  softwareVersion: release?.tag_name,
+  softwareVersion: preview?.version,
   url: canonical,
   description,
   offers: { "@type": "Offer", price: "0", priceCurrency: "CNY" },
 };
 ---
 <!doctype html>
-<html lang="zh-CN">
+<html lang={htmlLang[locale]}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -44,13 +61,40 @@ const structuredData = {
       content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-src 'none'; worker-src 'none'"
     />
     <meta name="description" content={description} />
-    <meta name="theme-color" content="#f4f3ef" />
+    <meta name="theme-color" content="#ececef" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#0f1418" media="(prefers-color-scheme: dark)" />
+    {/* Runs before first paint and before the stylesheet, so the resolved theme
+        is on <html> by the time anything is drawn. Deferring this to the module
+        script would paint the light palette first and flash. */}
+    <script is:inline>
+      (function () {
+        try {
+          var stored = window.localStorage.getItem("oneagent-theme");
+          var dark = stored ? stored === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches;
+          if (dark) document.documentElement.classList.add("theme-dark");
+        } catch (error) {
+          /* Private mode can throw on localStorage; the light default is fine. */
+        }
+      })();
+    </script>
     {noindex && <meta name="robots" content="noindex" />}
-    <base href={baseUrl.toString()} />
+    <base href={runtimeBaseUrl.toString()} />
     <link rel="canonical" href={canonical} />
+    {alternates.map((alternate) => (
+      <link rel="alternate" hreflang={alternate.code} href={alternate.href} />
+    ))}
+    {alternates.length > 0 && (
+      <link
+        rel="alternate"
+        hreflang="x-default"
+        href={alternates.find((alternate) => alternate.code === defaultLocale)!.href}
+      />
+    )}
     <link rel="icon" href="favicon.svg" type="image/svg+xml" />
+    <link rel="manifest" href="site.webmanifest" />
+    <link rel="alternate" type="text/plain" href="llms.txt" title="llms.txt" />
     <meta property="og:type" content="website" />
-    <meta property="og:locale" content="zh_CN" />
+    <meta property="og:locale" content={ogLocale[locale]} />
     <meta property="og:site_name" content="OneAgent" />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
@@ -61,7 +105,7 @@ const structuredData = {
     <script type="application/ld+json" is:inline set:html={JSON.stringify(structuredData)} />
   </head>
   <body>
-    <a class="skip-link" href="#main">跳到主要内容</a>
+    <a class="skip-link" href="#main">{t("skip.main")}</a>
     <Header />
     <main id="main"><slot /></main>
     <Footer />
diff --git a/site/src/lib/activation.test.ts b/site/src/lib/activation.test.ts
new file mode 100644
index 00000000..28671419
--- /dev/null
+++ b/site/src/lib/activation.test.ts
@@ -0,0 +1,268 @@
+import { describe, expect, it } from "vitest";
+
+import { CUSTOM_PROVIDER_ID, activationReducer, initialActivationState, validateDemoBaseUrl } from "./activation";
+import type { SiteCatalogV2 } from "./explorer";
+import { DEMO_AGENT_STATES, demoModelsFor, missingDemoAgentIds } from "./demo-environment";
+
+const catalog: SiteCatalogV2 = {
+  schema_version: 2,
+  groups: [{ id: "auto", name: "Auto" }, { id: "ide", name: "IDE" }],
+  agents: [
+    {
+      id: "managed",
+      name: "Managed",
+      group: "auto",
+      rank: 1,
+      command: "managed",
+      configPath: ".managed/config",
+      platforms: ["macos"],
+      lockedVersion: "1.0.0",
+      source: null,
+      license: null,
+      licenseUrl: null,
+      guide: null,
+      protocol: "anthropic",
+      support: { managedInstall: true, officialInstallGuide: false, managedConfig: true },
+    },
+    {
+      id: "preview",
+      name: "Preview",
+      group: "auto",
+      rank: 2,
+      command: "preview",
+      configPath: ".preview/config",
+      platforms: ["macos"],
+      lockedVersion: "1.0.0",
+      source: null,
+      license: null,
+      licenseUrl: null,
+      guide: null,
+      protocol: "responses",
+      support: { managedInstall: true, officialInstallGuide: false, managedConfig: true },
+    },
+    {
+      id: "guided",
+      name: "Guided",
+      group: "ide",
+      rank: 3,
+      command: null,
+      configPath: null,
+      platforms: ["macos"],
+      lockedVersion: null,
+      source: null,
+      license: null,
+      licenseUrl: null,
+      guide: "Use the official flow.",
+      protocol: null,
+      support: { managedInstall: false, officialInstallGuide: true, managedConfig: false },
+    },
+  ],
+  providers: [
+    {
+      id: "provider",
+      name: "Provider",
+      home: "https://provider.example/",
+      relationship: "none",
+      disclosure: "",
+      referralUrl: "",
+      order: 1,
+      protocols: [
+        { id: "anthropic", status: "implementation-supported" },
+        { id: "responses", status: "release-candidate-required" },
+      ],
+    },
+  ],
+};
+
+function scanned() {
+  return activationReducer(
+    activationReducer(initialActivationState(), { type: "start" }, catalog),
+    { type: "scan-complete" },
+    catalog,
+  );
+}
+
+describe("activation demo state machine", () => {
+  it("moves a supported managed combination to ready", () => {
+    let state = scanned();
+    state = activationReducer(state, { type: "select-agent", agentId: "managed" }, catalog);
+    state = activationReducer(state, { type: "select-mode", mode: "provider" }, catalog);
+    state = activationReducer(state, { type: "select-provider", providerId: "provider" }, catalog);
+    state = activationReducer(state, { type: "verify" }, catalog);
+    state = activationReducer(state, { type: "verify-complete" }, catalog);
+    state = activationReducer(state, { type: "select-model", model: "deepseek/deepseek-v3" }, catalog);
+    state = activationReducer(state, { type: "confirm" }, catalog);
+
+    expect(state).toMatchObject({ phase: "ready", agentId: "managed", providerId: "provider", compatibility: "supported" });
+  });
+
+  it("never upgrades release-candidate-required support to ready", () => {
+    let state = scanned();
+    state = activationReducer(state, { type: "select-agent", agentId: "preview" }, catalog);
+    state = activationReducer(state, { type: "select-mode", mode: "provider" }, catalog);
+    state = activationReducer(state, { type: "select-provider", providerId: "provider" }, catalog);
+    state = activationReducer(state, { type: "verify" }, catalog);
+    state = activationReducer(state, { type: "verify-complete" }, catalog);
+
+    expect(state.phase).toBe("preview-gate");
+    // Nothing downstream may rescue a gated combination.
+    expect(activationReducer(state, { type: "confirm" }, catalog).phase).toBe("preview-gate");
+  });
+
+  it("routes guide-only agents without asking for a provider", () => {
+    const state = activationReducer(scanned(), { type: "select-agent", agentId: "guided" }, catalog);
+
+    expect(state).toMatchObject({ phase: "guide-only", agentId: "guided", providerId: null });
+  });
+
+  it("resets every terminal state without retaining a selection", () => {
+    const state = activationReducer(
+      {
+        phase: "error",
+        agentId: "managed",
+        configMode: "provider",
+        providerId: "provider",
+        customBaseUrl: "https://api.example.com",
+        model: "deepseek/deepseek-v3",
+        compatibility: "supported",
+      },
+      { type: "reset" },
+      catalog,
+    );
+
+    expect(state).toEqual(initialActivationState());
+  });
+});
+
+describe("demo environment fixture", () => {
+  it("references only real catalog agents", async () => {
+    const realCatalog = (await import("./catalog")).catalog;
+    expect(missingDemoAgentIds(realCatalog, DEMO_AGENT_STATES)).toEqual([]);
+  });
+
+  it("offers a model list for every provider the real catalog publishes", async () => {
+    const realCatalog = (await import("./catalog")).catalog;
+    for (const provider of realCatalog.providers) {
+      expect(demoModelsFor(provider.id).length, `${provider.id} has no demo models`).toBeGreaterThan(0);
+    }
+  });
+});
+
+// These mirror validate_base_url in oneagent/providers.py. If the kernel's rules
+// change, this suite should fail — the demo claiming an endpoint is acceptable
+// when the product would reject it is the failure mode worth catching.
+describe("custom endpoint validation matches the kernel", () => {
+  it("accepts http and https and strips trailing slashes", () => {
+    expect(validateDemoBaseUrl("https://api.example.com/openai")).toEqual({
+      ok: true,
+      value: "https://api.example.com/openai",
+    });
+    expect(validateDemoBaseUrl("http://localhost:8080/v1//")).toEqual({
+      ok: true,
+      value: "http://localhost:8080/v1",
+    });
+  });
+
+  it("rejects an empty value", () => {
+    expect(validateDemoBaseUrl("")).toEqual({ ok: false, reason: "required" });
+  });
+
+  it("rejects a scheme the kernel does not allow", () => {
+    for (const value of ["ftp://api.example.com", "file:///etc/passwd", "api.example.com", "://nohost"]) {
+      expect(validateDemoBaseUrl(value).ok, value).toBe(false);
+    }
+    expect(validateDemoBaseUrl("ftp://api.example.com")).toEqual({ ok: false, reason: "scheme" });
+  });
+
+  it("rejects credentials embedded in the URL", () => {
+    expect(validateDemoBaseUrl("https://user:secret@api.example.com")).toEqual({
+      ok: false,
+      reason: "credentials",
+    });
+    expect(validateDemoBaseUrl("https://user@api.example.com")).toEqual({ ok: false, reason: "credentials" });
+  });
+
+  it("rejects control characters", () => {
+    // Written as escapes on purpose: a literal newline, tab or DEL in the source
+    // is invisible to a reviewer and an editor may silently normalise it away.
+    for (const value of [
+      "https://api.example.com/\nopenai",
+      "https://api.example.com/\topenai",
+      "https://api.example.com/\u007f",
+      "https://api.example.com/\u0000",
+    ]) {
+      expect(validateDemoBaseUrl(value), JSON.stringify(value)).toEqual({
+        ok: false,
+        reason: "control-characters",
+      });
+    }
+  });
+});
+
+describe("configuration mode branches", () => {
+  const atMode = () => activationReducer(scanned(), { type: "select-agent", agentId: "managed" }, catalog);
+
+  it("asks how to configure before asking for a provider", () => {
+    expect(atMode()).toMatchObject({ phase: "mode", agentId: "managed", configMode: null });
+  });
+
+  it("skips provider and model when an existing account is reused", () => {
+    const state = activationReducer(atMode(), { type: "select-mode", mode: "existing-account" }, catalog);
+
+    expect(state).toMatchObject({
+      phase: "ready",
+      configMode: "existing-account",
+      providerId: null,
+      model: null,
+    });
+  });
+
+  it("requires a verified connection before a model can be chosen", () => {
+    let state = activationReducer(atMode(), { type: "select-mode", mode: "provider" }, catalog);
+    state = activationReducer(state, { type: "select-provider", providerId: "provider" }, catalog);
+    state = activationReducer(state, { type: "verify" }, catalog);
+    state = activationReducer(state, { type: "verify-complete" }, catalog);
+
+    expect(state.phase).toBe("model");
+    // Confirming without a model must not reach ready.
+    expect(activationReducer(state, { type: "confirm" }, catalog).phase).toBe("model");
+
+    state = activationReducer(state, { type: "select-model", model: "deepseek/deepseek-v3" }, catalog);
+    expect(activationReducer(state, { type: "confirm" }, catalog)).toMatchObject({
+      phase: "ready",
+      model: "deepseek/deepseek-v3",
+    });
+  });
+});
+
+describe("custom provider path", () => {
+  const atProvider = () => {
+    let state = activationReducer(scanned(), { type: "select-agent", agentId: "managed" }, catalog);
+    state = activationReducer(state, { type: "select-mode", mode: "provider" }, catalog);
+    return activationReducer(state, { type: "select-provider", providerId: CUSTOM_PROVIDER_ID }, catalog);
+  };
+
+  it("holds at the provider step until the endpoint validates", () => {
+    let state = activationReducer(atProvider(), { type: "set-custom-base-url", value: "not-a-url" }, catalog);
+    expect(activationReducer(state, { type: "verify" }, catalog).phase).toBe("provider");
+
+    state = activationReducer(state, { type: "set-custom-base-url", value: "https://api.example.com/openai" }, catalog);
+    expect(activationReducer(state, { type: "verify" }, catalog).phase).toBe("verifying");
+  });
+
+  it("ignores an endpoint typed against a built-in provider", () => {
+    let state = activationReducer(scanned(), { type: "select-agent", agentId: "managed" }, catalog);
+    state = activationReducer(state, { type: "select-mode", mode: "provider" }, catalog);
+    state = activationReducer(state, { type: "select-provider", providerId: "provider" }, catalog);
+    state = activationReducer(state, { type: "set-custom-base-url", value: "https://elsewhere.example" }, catalog);
+
+    expect(state.customBaseUrl).toBe("");
+  });
+
+  it("clears a typed endpoint when switching back to a built-in provider", () => {
+    let state = activationReducer(atProvider(), { type: "set-custom-base-url", value: "https://api.example.com" }, catalog);
+    state = activationReducer(state, { type: "select-provider", providerId: "provider" }, catalog);
+
+    expect(state).toMatchObject({ providerId: "provider", customBaseUrl: "" });
+  });
+});
diff --git a/site/src/lib/activation.ts b/site/src/lib/activation.ts
new file mode 100644
index 00000000..98defa88
--- /dev/null
+++ b/site/src/lib/activation.ts
@@ -0,0 +1,172 @@
+import { compatibilityFor, type Compatibility, type SiteCatalogV2 } from "./explorer";
+
+export type ActivationPhase =
+  | "idle"
+  | "scanning"
+  | "agent"
+  | "mode"
+  | "provider"
+  | "model"
+  | "verifying"
+  | "ready"
+  | "guide-only"
+  | "preview-gate"
+  | "unsupported"
+  | "error";
+
+/* Mirrors the product's two ConfigModePage choices. "existing-account" is the
+   real branch for a user who already has a subscription or a working config —
+   it skips the provider and model steps, exactly as SetupGuard does. */
+export type ConfigMode = "provider" | "existing-account";
+
+export const CUSTOM_PROVIDER_ID = "custom";
+
+export interface ActivationState {
+  phase: ActivationPhase;
+  agentId: string | null;
+  configMode: ConfigMode | null;
+  providerId: string | null;
+  customBaseUrl: string;
+  model: string | null;
+  compatibility: Compatibility | null;
+}
+
+export type ActivationAction =
+  | { type: "start" }
+  | { type: "scan-complete" }
+  | { type: "select-agent"; agentId: string }
+  | { type: "select-mode"; mode: ConfigMode }
+  | { type: "select-provider"; providerId: string }
+  | { type: "set-custom-base-url"; value: string }
+  | { type: "select-model"; model: string }
+  | { type: "verify" }
+  | { type: "verify-complete" }
+  | { type: "confirm" }
+  | { type: "fail" }
+  | { type: "reset" };
+
+export function initialActivationState(): ActivationState {
+  return {
+    phase: "idle",
+    agentId: null,
+    configMode: null,
+    providerId: null,
+    customBaseUrl: "",
+    model: null,
+    compatibility: null,
+  };
+}
+
+export type BaseUrlRejection =
+  | "required"
+  | "control-characters"
+  | "scheme"
+  | "credentials";
+
+export type BaseUrlCheck =
+  | { ok: true; value: string }
+  | { ok: false; reason: BaseUrlRejection };
+
+/* A line-for-line port of validate_base_url in oneagent/providers.py, in the
+   same order, so the demo rejects exactly what the kernel would reject. The
+   demo is only worth showing if this agrees with the product; a looser check
+   here would teach visitors an endpoint is acceptable when it is not. */
+export function validateDemoBaseUrl(value: string): BaseUrlCheck {
+  if (!value) return { ok: false, reason: "required" };
+  for (const character of value) {
+    const code = character.codePointAt(0) ?? 0;
+    if (code < 32 || code === 127) return { ok: false, reason: "control-characters" };
+  }
+  let parsed: URL;
+  try {
+    parsed = new URL(value);
+  } catch {
+    return { ok: false, reason: "scheme" };
+  }
+  if ((parsed.protocol !== "http:" && parsed.protocol !== "https:") || !parsed.host) {
+    return { ok: false, reason: "scheme" };
+  }
+  if (parsed.username || parsed.password) return { ok: false, reason: "credentials" };
+  return { ok: true, value: value.replace(/\/+$/, "") };
+}
+
+function errorState(state: ActivationState): ActivationState {
+  return { ...state, phase: "error" };
+}
+
+export function activationReducer(
+  state: ActivationState,
+  action: ActivationAction,
+  catalog: SiteCatalogV2,
+): ActivationState {
+  if (action.type === "reset") return initialActivationState();
+
+  switch (action.type) {
+    case "start":
+      return state.phase === "idle" ? { ...initialActivationState(), phase: "scanning" } : state;
+    case "scan-complete":
+      return state.phase === "scanning" ? { ...state, phase: "agent" } : state;
+    case "select-agent": {
+      const agent = catalog.agents.find((candidate) => candidate.id === action.agentId);
+      if (!agent) return errorState(state);
+      const base = { ...initialActivationState(), agentId: agent.id };
+      if (agent.support.officialInstallGuide || !agent.support.managedConfig || !agent.protocol) {
+        return { ...base, phase: "guide-only" };
+      }
+      return { ...base, phase: "mode" };
+    }
+    case "select-mode": {
+      if (state.phase !== "mode" || !state.agentId) return state;
+      /* Picking an existing account ends the demo at the same place the product
+         lands: nothing to verify, because no new credential is being introduced. */
+      if (action.mode === "existing-account") {
+        return { ...state, phase: "ready", configMode: action.mode, providerId: null, model: null, compatibility: null };
+      }
+      return { ...state, phase: "provider", configMode: action.mode };
+    }
+    case "select-provider": {
+      const agent = catalog.agents.find((candidate) => candidate.id === state.agentId);
+      if (!agent) return errorState(state);
+      /* A custom endpoint has no catalog entry, so there is no published
+         protocol status to read. The product treats it as usable-but-unproven:
+         the probe decides, which here means the demo's own verify step. */
+      if (action.providerId === CUSTOM_PROVIDER_ID) {
+        return { ...state, phase: "provider", providerId: CUSTOM_PROVIDER_ID, compatibility: "supported" };
+      }
+      const provider = catalog.providers.find((candidate) => candidate.id === action.providerId);
+      if (!provider) return errorState(state);
+      const compatibility = compatibilityFor(agent, provider);
+      if (compatibility === "unsupported") {
+        return { ...state, phase: "unsupported", providerId: provider.id, customBaseUrl: "", compatibility };
+      }
+      return { ...state, phase: "provider", providerId: provider.id, customBaseUrl: "", compatibility };
+    }
+    case "set-custom-base-url":
+      return state.providerId === CUSTOM_PROVIDER_ID ? { ...state, customBaseUrl: action.value } : state;
+    case "select-model":
+      return state.phase === "model" && action.model ? { ...state, model: action.model } : state;
+    case "verify": {
+      if (state.phase !== "provider" || !state.agentId || !state.providerId || !state.compatibility) {
+        return errorState(state);
+      }
+      // An unvalidated endpoint must not reach verification, the same way the
+      // product's probe button stays disabled until a custom base URL parses.
+      if (state.providerId === CUSTOM_PROVIDER_ID && !validateDemoBaseUrl(state.customBaseUrl).ok) {
+        return state;
+      }
+      return { ...state, phase: "verifying" };
+    }
+    case "verify-complete":
+      if (state.phase !== "verifying") return state;
+      if (state.compatibility === "preview-gate") return { ...state, phase: "preview-gate" };
+      if (state.compatibility === "supported" || state.compatibility === "verified") {
+        // Verification unlocks model choice; it is not the end of the flow.
+        return { ...state, phase: "model" };
+      }
+      return { ...state, phase: "unsupported" };
+    case "confirm":
+      return state.phase === "model" && state.model ? { ...state, phase: "ready" } : state;
+    case "fail":
+      return errorState(state);
+  }
+}
diff --git a/site/src/lib/catalog.ts b/site/src/lib/catalog.ts
index fecfe84e..2e6a7530 100644
--- a/site/src/lib/catalog.ts
+++ b/site/src/lib/catalog.ts
@@ -1,8 +1,13 @@
 import agentLock from "../../../agents.lock.json";
 import providerConfig from "../../../providers.lock.json";
-import type { AgentSupport } from "./downloads";
+/* The site-facing shapes are declared once, in explorer.ts, because the explorer
+   is what constrains them: it narrows platforms and protocols to the ids it can
+   actually render a compatibility verdict for. Re-declaring them here would let
+   a new protocol reach the pages while the explorer silently calls it
+   unsupported. */
+import type { PlatformId, ProtocolId, SiteAgent, SiteCatalogV2, SiteProvider, ProviderProtocolStatus } from "./explorer";
 
-const adapterProtocols: Record<string, string> = {
+const adapterProtocols: Record<string, ProtocolId> = {
   codex: "responses",
   "claude-code": "anthropic",
   opencode: "openai",
@@ -15,8 +20,10 @@ interface AgentSource {
   group?: string;
   rank?: number;
   platforms?: string[];
+  command?: string;
   config_mode: "auto" | "guide";
   config_adapter?: string;
+  config_path?: string;
   guide?: string;
   package?: {
     version?: string;
@@ -26,6 +33,17 @@ interface AgentSource {
   };
 }
 
+/* The group ids come from agents.lock.json, but the labels do not live there —
+   the lock file is the installer's contract and has no room for display copy.
+   Anything not listed falls back to its own id, so a new group appears on the
+   site as soon as it appears in the lock rather than vanishing from the list. */
+const groupNames: Record<string, string> = {
+  auto: "One-click configurable",
+  gateway: "Gateway agents",
+  platform: "Official account agents",
+  ide: "IDE extensions",
+};
+
 interface ProviderSource {
   name?: string;
   home: string;
@@ -36,31 +54,6 @@ interface ProviderSource {
   protocols?: Record<string, string>;
 }
 
-export interface SiteAgent {
-  id: string;
-  name: string;
-  group: string;
-  rank: number;
-  platforms: string[];
-  lockedVersion: string | null;
-  source: string | null;
-  license: string | null;
-  licenseUrl: string | null;
-  guide: string | null;
-  protocol: string | null;
-  support: AgentSupport;
-}
-
-export interface SiteProvider {
-  id: string;
-  name: string;
-  home: string;
-  relationship: "none" | "referral" | "sponsor";
-  disclosure: string;
-  referralUrl: string;
-  protocols: Array<{ id: string; status: string }>;
-  order: number;
-}
 
 const agents = Object.entries(agentLock.agents as Record<string, AgentSource>)
   .map(([id, meta]): SiteAgent => {
@@ -70,13 +63,20 @@ const agents = Object.entries(agentLock.agents as Record<string, AgentSource>)
       name: meta.name ?? id,
       group: meta.group ?? "other",
       rank: meta.rank ?? 99,
-      platforms: meta.platforms ?? [],
+      /* Both are shown on the site so a reader can check what OneAgent will run
+         and which file it will write before installing anything. guide-only
+         agents have neither, and null keeps that visible rather than printing an
+         empty string that looks like a missing value. */
+      command: meta.command ?? null,
+      configPath: meta.config_path ?? null,
+      platforms: (meta.platforms ?? []) as PlatformId[],
       lockedVersion: meta.package?.version ?? null,
       source: meta.package?.source ?? null,
       license: meta.package?.license ?? null,
       licenseUrl: meta.package?.license_url ?? null,
       guide: meta.guide ?? null,
       protocol: managedConfig ? adapterProtocols[meta.config_adapter!] ?? null : null,
+
       support: {
         managedInstall: meta.config_mode === "auto" && Boolean(meta.package),
         officialInstallGuide: meta.config_mode === "guide",
@@ -94,9 +94,21 @@ const providers = Object.entries(providerConfig.providers as Record<string, Prov
     relationship: meta.relationship ?? "none",
     disclosure: meta.disclosure ?? "",
     referralUrl: meta.referral_url ?? "",
-    protocols: Object.entries(meta.protocols ?? {}).map(([protocolId, status]) => ({ id: protocolId, status })),
+    protocols: Object.entries(meta.protocols ?? {}).map(([protocolId, status]) => ({
+      id: protocolId as ProtocolId,
+      status: status as ProviderProtocolStatus,
+    })),
     order: meta.order ?? 99,
   }))
   .sort((left, right) => left.order - right.order || left.name.localeCompare(right.name));
 
-export const catalog = { agents, providers };
+const groups = [...new Set(agents.map((agent) => agent.group))].map((id) => ({
+  id,
+  name: groupNames[id] ?? id,
+}));
+
+/* Typed as the schema the pages and the explorer already consume, so this module
+   is a drop-in for the generated catalog.json it replaces. schema_version is
+   asserted rather than read from the lock file: it versions this site-facing
+   shape, not the installer contract the lock file carries. */
+export const catalog: SiteCatalogV2 = { schema_version: 2, groups, agents, providers };
diff --git a/site/src/lib/content.ts b/site/src/lib/content.ts
index 87d0a37b..9cbeec12 100644
--- a/site/src/lib/content.ts
+++ b/site/src/lib/content.ts
@@ -1,40 +1,13 @@
-export const agentDescriptions: Record<string, string> = {
-  codex: "OpenAI 的终端编码 Agent，OneAgent 管理 Responses 协议配置。",
-  "claude-code": "Anthropic 的终端编码 Agent，使用 Anthropic-compatible 配置。",
-  cursor: "AI 编辑器；OneAgent 只提供官方安装与登录引导，不写入私有配置。",
-  opencode: "开源终端编码 Agent，使用 OpenAI-compatible 协议。",
-  openclaw: "多渠道 Agent 网关；按官方流程安装、onboard 与管理服务。",
-  hermes: "自我成长型 Agent 框架；模型与运行配置由官方工具管理。",
-  "gemini-cli": "Google 官方 CLI；使用 Google 登录、Gemini API Key 或 Vertex AI。",
-  "kilo-cli": "多模型命令行 Agent，OneAgent 可管理安装与 OpenAI-compatible 配置。",
-  aider: "结对编程式仓库编辑 Agent，模型在启动命令中明确选择。",
-  kiro: "官方账号型开发 Agent；使用官方登录与配置流程。",
-  cline: "IDE 扩展；在扩展界面选择兼容 Provider。",
-  continue: "IDE 扩展；在 Continue 配置中添加兼容模型。",
-  "qwen-code": "Qwen 的编码工具；按官方文档完成安装和 Provider 配置。",
-  "kilo-vscode": "Kilo Code 的 VS Code 扩展；由扩展界面管理 Provider。",
-};
-
-export const groupLabels: Record<string, string> = {
-  auto: "OneAgent 可管理",
-  gateway: "Gateway Agent",
-  platform: "官方账号 Agent",
-  ide: "IDE 扩展",
-};
-
+/**
+ * Language-neutral catalogue labels: these are proper nouns, identical in every
+ * locale. Translated labels live in src/i18n/catalog.ts.
+ */
 export const protocolLabels: Record<string, string> = {
   openai: "OpenAI Chat Completions",
   anthropic: "Anthropic Messages",
   responses: "OpenAI Responses",
 };
 
-export const protocolStatusLabels: Record<string, string> = {
-  "implementation-supported": "实现已接入",
-  "release-candidate-required": "需 Release Candidate 实证",
-  verified: "已验证",
-  unsupported: "不支持",
-};
-
 export const platformLabels: Record<string, string> = {
   macos: "macOS",
   windows: "Windows",
diff --git a/site/src/lib/demo-environment.ts b/site/src/lib/demo-environment.ts
new file mode 100644
index 00000000..738950eb
--- /dev/null
+++ b/site/src/lib/demo-environment.ts
@@ -0,0 +1,54 @@
+import type { SiteAgent, SiteCatalogV2 } from "./explorer";
+
+export type DemoStatus = "ready" | "attention" | "guide-only" | "not-installed";
+export type DemoVersion = "locked" | "behind" | null;
+
+export interface DemoAgentState {
+  installed: boolean;
+  configured: boolean;
+  status: DemoStatus;
+  version: DemoVersion;
+  hasBackup: boolean;
+}
+
+export const DEMO_AGENT_STATES: Readonly<Record<string, DemoAgentState>> = {
+  codex: { installed: true, configured: false, status: "attention", version: "behind", hasBackup: true },
+  "claude-code": { installed: true, configured: true, status: "ready", version: "locked", hasBackup: true },
+  cursor: { installed: true, configured: false, status: "guide-only", version: null, hasBackup: false },
+  opencode: { installed: false, configured: false, status: "not-installed", version: null, hasBackup: false },
+};
+
+/* The product discovers models from the endpoint's own /v1/models. These lists
+   stand in for one such response. The first entry of each is the provider's real
+   fallback_probe_model from oneagent/catalog.py — including the fact that the
+   same DeepSeek build is published under a different id per provider, which is
+   why the product cannot share one constant. */
+export const DEMO_MODELS: Readonly<Record<string, readonly string[]>> = {
+  ppio: ["deepseek/deepseek-v3", "qwen/qwen3-coder-480b", "moonshotai/kimi-k2"],
+  novita: ["deepseek/deepseek_v3", "qwen/qwen3-235b-a22b", "meta-llama/llama-4-maverick"],
+};
+
+/* A custom endpoint has no published catalog, so the demo shows the product's
+   documented recovery instead of inventing a list: type the id by hand. */
+export const DEMO_CUSTOM_MODEL_HINT = "deepseek/deepseek-v3";
+
+export function demoModelsFor(providerId: string | null): readonly string[] {
+  return (providerId && DEMO_MODELS[providerId]) || [];
+}
+
+export function missingDemoAgentIds(
+  catalog: SiteCatalogV2,
+  states: Readonly<Record<string, DemoAgentState>> = DEMO_AGENT_STATES,
+): string[] {
+  const ids = new Set(catalog.agents.map((agent) => agent.id));
+  return Object.keys(states).filter((id) => !ids.has(id)).sort();
+}
+
+export function demoStateFor(agent: SiteAgent): DemoAgentState {
+  const explicit = DEMO_AGENT_STATES[agent.id];
+  if (explicit) return explicit;
+  if (agent.support.officialInstallGuide) {
+    return { installed: false, configured: false, status: "guide-only", version: null, hasBackup: false };
+  }
+  return { installed: false, configured: false, status: "not-installed", version: null, hasBackup: false };
+}
diff --git a/site/src/lib/downloads.test.ts b/site/src/lib/downloads.test.ts
index 52bb684a..cd5d38bd 100644
--- a/site/src/lib/downloads.test.ts
+++ b/site/src/lib/downloads.test.ts
@@ -1,62 +1,91 @@
 import { describe, expect, it } from "vitest";
-import {
-  detectTargetFromUserAgent,
-  getRecommendedTarget,
-  releaseTargets,
-  supportLabels,
-  type GitHubRelease,
-} from "./downloads";
-
-const release: GitHubRelease = {
-  name: "OneAgent preview",
-  tag_name: "v0.3.0-preview.1",
-  html_url: "https://github.com/MaimoryLab/OneAgent/releases/tag/v0.3.0-preview.1",
-  published_at: "2026-07-31T00:00:00Z",
-  prerelease: true,
-  draft: false,
-  assets: [
-    {
-      name: "OneAgent-0.3.0-technical-preview-unsigned-macos-arm64.zip",
-      size: 1024,
-      digest: `sha256:${"a".repeat(64)}`,
-      browser_download_url: "https://github.com/MaimoryLab/OneAgent/releases/download/v0.3.0-preview.1/OneAgent.zip",
-    },
+import { detectTargetFromUserAgent, formatBytes, supportLabels } from "./downloads";
+import { recommendedTargetIn, type ReleaseChannel } from "./release-channel";
+
+const channel: ReleaseChannel = {
+  channel: "technical-preview-unsigned",
+  label: "未签名技术预览版",
+  published_at: "2026-07-28T00:00:00Z",
+  version: "0.2.0-dev",
+  unsigned: true,
+  status: "available",
+  targets: [
     {
-      name: "SHA256SUMS-macos-arm64.txt",
-      size: 128,
-      browser_download_url: "https://github.com/MaimoryLab/OneAgent/releases/download/v0.3.0-preview.1/SHA256SUMS.txt",
+      id: "macos-arm64",
+      platform: "macos",
+      platformLabel: "macOS",
+      arch: "arm64",
+      archLabel: "Apple silicon / ARM64",
+      status: "available",
+      verification: { native_build: true, cleanroom: "verified", evidence: "security/" },
+      python: "3.12.13",
+      built_at: "2026-07-26T10:14:28Z",
+      agent_versions: {},
+      artifacts: [
+        {
+          file: "OneAgent.zip",
+          sha256: "abc",
+          bytes: 1024,
+          kind: "binary",
+          downloads: [{ id: "website", label: "官网下载", kind: "official", url: "downloads/OneAgent.zip", primary: true }],
+        },
+      ],
     },
     {
-      name: "release-manifest-macos-arm64.json",
-      size: 256,
-      browser_download_url: "https://github.com/MaimoryLab/OneAgent/releases/download/v0.3.0-preview.1/manifest.json",
+      id: "windows-x64",
+      platform: "windows",
+      platformLabel: "Windows",
+      arch: "x64",
+      archLabel: "Intel / AMD 64-bit",
+      status: "verification-pending",
+      verification: { native_build: false, cleanroom: "not-recorded", evidence: null },
+      python: null,
+      built_at: null,
+      agent_versions: {},
+      artifacts: [],
     },
   ],
 };
 
-describe("GitHub Release downloads", () => {
-  it("derives downloadable platforms and checksums only from release assets", () => {
-    const targets = releaseTargets(release);
-    expect(targets).toHaveLength(1);
-    expect(targets[0]).toMatchObject({
-      id: "macos-arm64",
-      sha256: "a".repeat(64),
-      checksumUrl: expect.stringContaining("SHA256SUMS"),
+describe("download targeting", () => {
+  it("detects Apple silicon without hiding manual platform choices", () => {
+    expect(detectTargetFromUserAgent("Mozilla/5.0 (Macintosh; Apple Silicon Mac OS X 14_5)")).toEqual({
+      platform: "macos",
+      arch: "arm64",
+    });
+  });
+
+  it("does not pretend a generic macOS user agent reveals the chip architecture", () => {
+    expect(detectTargetFromUserAgent("Mozilla/5.0 (Macintosh; Intel Mac OS X 14_5)")).toEqual({
+      platform: "macos",
+      arch: null,
     });
   });
 
-  it("uses the browser platform without hiding the other release assets", () => {
-    const detected = detectTargetFromUserAgent("Mozilla/5.0 (Macintosh; Apple Silicon Mac OS X 14_5)");
-    expect(detected).toEqual({ platform: "macos", arch: "arm64" });
-    expect(getRecommendedTarget(releaseTargets(release), detected)?.id).toBe("macos-arm64");
+  it("recognizes Windows on ARM without silently recommending x64 as an exact match", () => {
+    expect(detectTargetFromUserAgent("Mozilla/5.0 (Windows NT 10.0; ARM64)")).toEqual({
+      platform: "windows",
+      arch: "arm64",
+    });
+  });
+
+  it("returns an unavailable target when it is the user's platform", () => {
+    expect(recommendedTargetIn(channel, { platform: "windows", arch: "x64" })?.id).toBe("windows-x64");
+  });
+
+  it("falls back to the available artifact for an unknown browser", () => {
+    expect(recommendedTargetIn(channel, null)?.id).toBe("macos-arm64");
+  });
+
+  it("formats download size without pretending to be exact decimal storage", () => {
+    expect(formatBytes(1024 * 1024)).toBe("1.0 MiB");
   });
 });
 
 describe("compatibility labels", () => {
   it("keeps guide-only agents distinct from managed installation", () => {
-    expect(supportLabels({ managedInstall: false, officialInstallGuide: true, managedConfig: false })).toEqual([
-      "官方安装引导",
-      "配置由 Agent 官方流程管理",
-    ]);
+    expect(
+      supportLabels({ managedInstall: false, officialInstallGuide: true, managedConfig: false }),
+    ).toEqual(["官方安装引导", "配置由 Agent 官方流程管理"]);
   });
 });
diff --git a/site/src/lib/explorer.test.ts b/site/src/lib/explorer.test.ts
new file mode 100644
index 00000000..8e2a9956
--- /dev/null
+++ b/site/src/lib/explorer.test.ts
@@ -0,0 +1,128 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  compatibilityFor,
+  parseExplorerSearch,
+  recommendedCombination,
+  serializeExplorerSearch,
+  type SiteCatalogV2,
+} from "./explorer";
+
+const catalog: SiteCatalogV2 = {
+  schema_version: 2,
+  groups: [{ id: "auto", name: "Auto" }, { id: "ide", name: "IDE" }],
+  agents: [
+    {
+      id: "responses-agent",
+      name: "Responses Agent",
+      group: "auto",
+      rank: 1,
+      command: "responses-agent",
+      configPath: ".responses/config.json",
+      platforms: ["macos"],
+      lockedVersion: "1.0.0",
+      source: null,
+      license: null,
+      licenseUrl: null,
+      guide: null,
+      protocol: "responses",
+      support: { managedInstall: true, officialInstallGuide: false, managedConfig: true },
+    },
+    {
+      id: "anthropic-agent",
+      name: "Anthropic Agent",
+      group: "auto",
+      rank: 2,
+      command: "anthropic-agent",
+      configPath: ".anthropic/config.json",
+      platforms: ["macos", "linux"],
+      lockedVersion: "2.0.0",
+      source: null,
+      license: null,
+      licenseUrl: null,
+      guide: null,
+      protocol: "anthropic",
+      support: { managedInstall: true, officialInstallGuide: false, managedConfig: true },
+    },
+    {
+      id: "guided-agent",
+      name: "Guided Agent",
+      group: "ide",
+      rank: 3,
+      command: null,
+      configPath: null,
+      platforms: ["windows"],
+      lockedVersion: null,
+      source: null,
+      license: null,
+      licenseUrl: null,
+      guide: "Use the official account flow.",
+      protocol: null,
+      support: { managedInstall: false, officialInstallGuide: true, managedConfig: false },
+    },
+  ],
+  providers: [
+    {
+      id: "first",
+      name: "First Provider",
+      home: "https://first.example/",
+      relationship: "none",
+      disclosure: "",
+      referralUrl: "",
+      order: 1,
+      protocols: [
+        { id: "responses", status: "release-candidate-required" },
+        { id: "anthropic", status: "implementation-supported" },
+      ],
+    },
+    {
+      id: "verified",
+      name: "Verified Provider",
+      home: "https://verified.example/",
+      relationship: "none",
+      disclosure: "",
+      referralUrl: "",
+      order: 2,
+      protocols: [{ id: "anthropic", status: "verified" }],
+    },
+  ],
+};
+
+describe("provider compatibility", () => {
+  it("maps provider registry statuses without upgrading preview support to ready", () => {
+    expect(compatibilityFor(catalog.agents[0], catalog.providers[0])).toBe("preview-gate");
+    expect(compatibilityFor(catalog.agents[1], catalog.providers[0])).toBe("supported");
+    expect(compatibilityFor(catalog.agents[1], catalog.providers[1])).toBe("verified");
+    expect(compatibilityFor(catalog.agents[2], catalog.providers[0])).toBe("unsupported");
+  });
+
+  it("recommends the first ranked combination that may truthfully reach ready", () => {
+    expect(recommendedCombination(catalog)).toEqual({ agentId: "anthropic-agent", providerId: "first" });
+  });
+});
+
+describe("Explorer URL state", () => {
+  it("parses a compatible, shareable selection", () => {
+    expect(
+      parseExplorerSearch(
+        "?agent=anthropic-agent&provider=first&platform=linux&protocol=anthropic",
+        catalog,
+      ),
+    ).toEqual({ agent: "anthropic-agent", provider: "first", platform: "linux", protocol: "anthropic" });
+  });
+
+  it("drops unknown values and combinations that contradict the selected agent", () => {
+    expect(
+      parseExplorerSearch(
+        "?agent=responses-agent&provider=verified&platform=windows&protocol=anthropic",
+        catalog,
+      ),
+    ).toEqual({ agent: "responses-agent", provider: null, platform: null, protocol: null });
+  });
+
+  it("serializes only active values in a stable order", () => {
+    expect(
+      serializeExplorerSearch({ agent: "anthropic-agent", provider: "first", platform: null, protocol: "anthropic" }),
+    ).toBe("agent=anthropic-agent&provider=first&protocol=anthropic");
+  });
+});
diff --git a/site/src/lib/explorer.ts b/site/src/lib/explorer.ts
new file mode 100644
index 00000000..6df02ae2
--- /dev/null
+++ b/site/src/lib/explorer.ts
@@ -0,0 +1,155 @@
+export const platformIds = ["macos", "linux", "windows"] as const;
+export type PlatformId = (typeof platformIds)[number];
+
+export const protocolIds = ["openai", "anthropic", "responses"] as const;
+export type ProtocolId = (typeof protocolIds)[number];
+
+export type ProviderProtocolStatus =
+  | "implementation-supported"
+  | "release-candidate-required"
+  | "verified"
+  | "unsupported";
+
+export interface SiteAgentSupport {
+  managedInstall: boolean;
+  officialInstallGuide: boolean;
+  managedConfig: boolean;
+}
+
+export interface SiteAgent {
+  id: string;
+  name: string;
+  group: string;
+  rank: number;
+  command: string | null;
+  configPath: string | null;
+  platforms: PlatformId[];
+  lockedVersion: string | null;
+  source: string | null;
+  license: string | null;
+  licenseUrl: string | null;
+  guide: string | null;
+  protocol: ProtocolId | null;
+  support: SiteAgentSupport;
+}
+
+export interface SiteProviderProtocol {
+  id: ProtocolId;
+  status: ProviderProtocolStatus;
+}
+
+export interface SiteProvider {
+  id: string;
+  name: string;
+  home: string;
+  relationship: "none" | "referral" | "sponsor";
+  disclosure: string;
+  referralUrl: string;
+  protocols: SiteProviderProtocol[];
+  order: number;
+}
+
+export interface SiteAgentGroup {
+  id: string;
+  name: string;
+}
+
+export interface SiteCatalogV2 {
+  schema_version: 2;
+  groups: SiteAgentGroup[];
+  agents: SiteAgent[];
+  providers: SiteProvider[];
+}
+
+export type Compatibility = "verified" | "supported" | "preview-gate" | "unsupported";
+
+export interface RecommendedCombination {
+  agentId: string;
+  providerId: string;
+}
+
+export interface ExplorerSearchState {
+  agent: string | null;
+  provider: string | null;
+  platform: PlatformId | null;
+  protocol: ProtocolId | null;
+}
+
+export function protocolStatusFor(provider: SiteProvider, protocol: ProtocolId | null): ProviderProtocolStatus {
+  if (!protocol) return "unsupported";
+  return provider.protocols.find((entry) => entry.id === protocol)?.status ?? "unsupported";
+}
+
+export function compatibilityFor(agent: SiteAgent, provider: SiteProvider): Compatibility {
+  switch (protocolStatusFor(provider, agent.protocol)) {
+    case "verified":
+      return "verified";
+    case "implementation-supported":
+      return "supported";
+    case "release-candidate-required":
+      return "preview-gate";
+    default:
+      return "unsupported";
+  }
+}
+
+export function recommendedCombination(catalog: SiteCatalogV2): RecommendedCombination | null {
+  const agents = [...catalog.agents].sort((left, right) => left.rank - right.rank || left.id.localeCompare(right.id));
+  const providers = [...catalog.providers].sort(
+    (left, right) => left.order - right.order || left.name.localeCompare(right.name),
+  );
+
+  for (const agent of agents) {
+    if (!agent.support.managedConfig || !agent.protocol) continue;
+    const provider = providers.find((candidate) => {
+      const compatibility = compatibilityFor(agent, candidate);
+      return compatibility === "supported" || compatibility === "verified";
+    });
+    if (provider) return { agentId: agent.id, providerId: provider.id };
+  }
+  return null;
+}
+
+function isPlatform(value: string | null): value is PlatformId {
+  return Boolean(value && platformIds.includes(value as PlatformId));
+}
+
+function isProtocol(value: string | null): value is ProtocolId {
+  return Boolean(value && protocolIds.includes(value as ProtocolId));
+}
+
+export function parseExplorerSearch(search: string, catalog: SiteCatalogV2): ExplorerSearchState {
+  const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+  const selectedAgent = catalog.agents.find((agent) => agent.id === params.get("agent")) ?? null;
+  let selectedProvider = catalog.providers.find((provider) => provider.id === params.get("provider")) ?? null;
+  const requestedPlatform = params.get("platform");
+  const requestedProtocol = params.get("protocol");
+
+  let platform = isPlatform(requestedPlatform) ? requestedPlatform : null;
+  let protocol = isProtocol(requestedProtocol) ? requestedProtocol : null;
+
+  if (selectedAgent) {
+    if (platform && !selectedAgent.platforms.includes(platform)) platform = null;
+    if (protocol && selectedAgent.protocol !== protocol) protocol = null;
+    if (selectedProvider && compatibilityFor(selectedAgent, selectedProvider) === "unsupported") selectedProvider = null;
+  }
+  if (selectedProvider && protocol && protocolStatusFor(selectedProvider, protocol) === "unsupported") {
+    selectedProvider = null;
+  }
+
+  return {
+    agent: selectedAgent?.id ?? null,
+    provider: selectedProvider?.id ?? null,
+    platform,
+    protocol,
+  };
+}
+
+export function serializeExplorerSearch(state: ExplorerSearchState): string {
+  const params = new URLSearchParams();
+  if (state.agent) params.set("agent", state.agent);
+  if (state.provider) params.set("provider", state.provider);
+  if (state.platform) params.set("platform", state.platform);
+  if (state.protocol) params.set("protocol", state.protocol);
+  return params.toString();
+}
diff --git a/site/src/lib/release-channel.ts b/site/src/lib/release-channel.ts
new file mode 100644
index 00000000..d0a1fe37
--- /dev/null
+++ b/site/src/lib/release-channel.ts
@@ -0,0 +1,174 @@
+/**
+ * Adapts GitHub Releases into the channel shape the pages render.
+ *
+ * The pages were written against a locally generated release index that carried
+ * per-target build provenance: which Python built it, whether the build was
+ * native, whether a cleanroom run passed. GitHub Releases carries none of that —
+ * it knows an asset's name, size and digest, and nothing about how it was made.
+ *
+ * So this module maps what the API does return and reports the rest as unknown
+ * rather than filling it in. `native_build: false` and `cleanroom:
+ * "not-recorded"` are the honest readings of "the release feed cannot tell us",
+ * and the pages already render that as an absence of evidence instead of a
+ * claim. Inventing a `true` here would put a verification badge on the site that
+ * nothing checked.
+ */
+import {
+  type DetectedTarget,
+  type GitHubRelease,
+  type ReleaseTarget as AssetTarget,
+  getLatestRelease,
+  releaseTargets,
+} from "./downloads";
+
+export type { DetectedTarget };
+
+export type TargetStatus = "available" | "verification-pending" | "planned" | "withdrawn";
+
+export interface DownloadLink {
+  id: string;
+  label: string;
+  kind: "official" | "mirror";
+  url: string;
+  primary: boolean;
+}
+
+export interface ReleaseArtifact {
+  file: string;
+  sha256: string;
+  bytes: number;
+  kind: "binary" | "source";
+  downloads: DownloadLink[];
+}
+
+export interface ReleaseTarget {
+  id: string;
+  platform: string;
+  platformLabel: string;
+  arch: string;
+  archLabel: string;
+  status: TargetStatus;
+  verification: {
+    native_build: boolean;
+    cleanroom: "verified" | "not-recorded" | "failed";
+    evidence: string | null;
+  };
+  python: string | null;
+  built_at: string | null;
+  agent_versions: Record<string, string>;
+  artifacts: ReleaseArtifact[];
+}
+
+export interface ReleaseChannel {
+  channel: string;
+  label: string;
+  published_at: string | null;
+  version: string | null;
+  unsigned: boolean;
+  status: "available" | "unavailable";
+  targets: ReleaseTarget[];
+}
+
+/* Every platform/arch OneAgent intends to ship, in the order the download page
+   lists them. Targets with no asset in the release still appear, as `planned` —
+   a reader comparing platforms should see that Windows exists and is not ready
+   yet, rather than find it missing and wonder. */
+const plannedTargets: Array<{ id: string; platform: string; platformLabel: string; arch: string; archLabel: string }> = [
+  { id: "macos-arm64", platform: "macos", platformLabel: "macOS", arch: "arm64", archLabel: "Apple silicon / ARM64" },
+  { id: "macos-x64", platform: "macos", platformLabel: "macOS", arch: "x64", archLabel: "Intel / AMD 64-bit" },
+  { id: "windows-x64", platform: "windows", platformLabel: "Windows", arch: "x64", archLabel: "Intel / AMD 64-bit" },
+  { id: "linux-x64", platform: "linux", platformLabel: "Linux", arch: "x64", archLabel: "Intel / AMD 64-bit" },
+];
+
+export const previewChannelId = "technical-preview-unsigned";
+
+/* The tag carries the channel. A prerelease tag, or one saying so in its name,
+   is the unsigned technical preview; anything else is a signed stable build.
+   Read from the release rather than hardcoded so the site follows the tag
+   instead of needing an edit on the day Stable ships. */
+function channelOf(release: GitHubRelease): { channel: string; label: string; unsigned: boolean } {
+  const preview = release.prerelease || /preview|unsigned|dev|rc/i.test(release.tag_name);
+  return preview
+    ? { channel: previewChannelId, label: "未签名技术预览版", unsigned: true }
+    : { channel: "stable", label: "稳定版", unsigned: false };
+}
+
+function artifactFor(asset: AssetTarget): ReleaseArtifact[] {
+  /* A missing digest means the asset predates GitHub's per-asset digests. The
+     checksum file is still linked, so a reader can verify by hand — but the page
+     must not print a checksum that was never published. */
+  if (!asset.sha256) return [];
+  return [{
+    file: asset.file,
+    sha256: asset.sha256,
+    bytes: asset.bytes,
+    kind: "binary",
+    downloads: [{ id: "github", label: "GitHub Releases", kind: "official", url: asset.downloadUrl, primary: true }],
+  }];
+}
+
+/**
+ * Builds the channel the pages render from the newest published release.
+ *
+ * Returns null when the release feed is empty or unreachable, which is the state
+ * a fresh fork is in. Callers render the "not published yet" copy for null
+ * rather than failing the build, because a site that cannot be built without a
+ * network round trip cannot be built in CI.
+ */
+export async function getPreviewChannel(): Promise<ReleaseChannel | null> {
+  const release = await getLatestRelease();
+  if (!release) return null;
+  const assets = releaseTargets(release);
+  const { channel, label, unsigned } = channelOf(release);
+  const targets: ReleaseTarget[] = plannedTargets.map((planned) => {
+    const asset = assets.find((candidate) => candidate.id === planned.id);
+    const artifacts = asset ? artifactFor(asset) : [];
+    return {
+      ...planned,
+      /* An asset whose digest never got published is `verification-pending`, not
+         `available`: the download page's whole claim is that you can check what
+         you downloaded, and without a checksum you cannot. */
+      status: !asset ? "planned" : artifacts.length > 0 ? "available" : "verification-pending",
+      verification: { native_build: false, cleanroom: "not-recorded", evidence: "security/#release-evidence" },
+      python: null,
+      built_at: release.published_at,
+      agent_versions: {},
+      artifacts,
+    };
+  });
+  return {
+    channel,
+    label,
+    published_at: release.published_at,
+    version: release.tag_name.replace(/^v/, ""),
+    unsigned,
+    status: targets.some((target) => target.status === "available") ? "available" : "unavailable",
+    targets,
+  };
+}
+/* Named for the channel it takes, because downloads.ts exports a
+   getRecommendedTarget over a bare asset list. Same intent, different input, and
+   one importing both would otherwise get whichever the bundler resolved last. */
+export function recommendedTargetIn(channel: ReleaseChannel, detected: DetectedTarget | null): ReleaseTarget | null {
+  if (detected) {
+    const exact = detected.arch
+      ? channel.targets.find((target) => target.platform === detected.platform && target.arch === detected.arch)
+      : null;
+    if (exact) return exact;
+    const samePlatform = channel.targets.find(
+      (target) => target.platform === detected.platform && target.status === "available",
+    );
+    if (samePlatform) return samePlatform;
+    const anySamePlatform = channel.targets.find((target) => target.platform === detected.platform);
+    if (anySamePlatform) return anySamePlatform;
+  }
+  return channel.targets.find((target) => target.status === "available") ?? channel.targets[0] ?? null;
+}
+
+export function binaryArtifact(target: ReleaseTarget): ReleaseArtifact | null {
+  return target.artifacts.find((artifact) => artifact.kind === "binary") ?? null;
+}
+
+export function primaryDownload(artifact: ReleaseArtifact): DownloadLink | null {
+  return artifact.downloads.find((download) => download.primary) ?? artifact.downloads[0] ?? null;
+}
diff --git a/site/src/pages/agents/[id].astro b/site/src/pages/agents/[id].astro
index 07ed929b..7a37fb44 100644
--- a/site/src/pages/agents/[id].astro
+++ b/site/src/pages/agents/[id].astro
@@ -1,15 +1,18 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import AgentMark from "../../components/AgentMark.astro";
-import { catalog, type SiteAgent } from "../../lib/catalog";
-import { agentDescriptions, groupLabels, platformLabels, protocolLabels } from "../../lib/content";
+import { catalog } from "../../lib/catalog";
+import { platformLabels, protocolLabels } from "../../lib/content";
+import { localeFromPath } from "../../i18n";
+import { useCatalogLabels } from "../../i18n/catalog";
 import { supportLabels } from "../../lib/downloads";
 
 export function getStaticPaths() {
-  return catalog.agents.map((agent) => ({ params: { id: agent.id }, props: { agent } }));
+  return catalog.agents.map((agent: any) => ({ params: { id: agent.id }, props: { agent } }));
 }
-const { agent } = Astro.props as { agent: SiteAgent };
+const { agent } = Astro.props as any;
 const labels = supportLabels(agent.support);
+const { agentDescriptions, groupLabels } = useCatalogLabels(localeFromPath(Astro.url.pathname));
 ---
 <BaseLayout title={`${agent.name} — OneAgent Agent 兼容目录`} description={agentDescriptions[agent.id] ?? `${agent.name} 在 OneAgent 中的安装、配置和协议支持状态。`}>
   <header class="page-hero">
diff --git a/site/src/pages/agents/index.astro b/site/src/pages/agents/index.astro
index 9391d594..1be9f6ef 100644
--- a/site/src/pages/agents/index.astro
+++ b/site/src/pages/agents/index.astro
@@ -2,7 +2,10 @@
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import AgentMark from "../../components/AgentMark.astro";
 import { catalog } from "../../lib/catalog";
-import { agentDescriptions, groupLabels, protocolLabels } from "../../lib/content";
+import { protocolLabels } from "../../lib/content";
+import { localeFromPath } from "../../i18n";
+import { useCatalogLabels } from "../../i18n/catalog";
+const { agentDescriptions, groupLabels, agentFallbackDescription } = useCatalogLabels(localeFromPath(Astro.url.pathname));
 ---
 <BaseLayout title="Agent 兼容目录 — OneAgent" description="按安装、配置、协议和平台分别查看 OneAgent 对各 Agent 的真实支持范围。">
   <header class="page-hero">
@@ -14,12 +17,12 @@ import { agentDescriptions, groupLabels, protocolLabels } from "../../lib/conten
   <section class="section-compact">
     <div class="shell">
       <div class="notice notice-info" style="margin-bottom:34px"><span class="notice-mark">i</span><div><strong>guide-only 仍然是有效流程</strong><p>它表示 OneAgent 返回官方安装或配置指引并在 Review 中保留结果，而不是一个不可选择的禁用项。</p></div></div>
-      <div class="agent-list">
-        {catalog.agents.map((agent) => (
+      <div class="agent-list reveal">
+        {catalog.agents.map((agent: any) => (
           <a class="agent-row" href={`agents/${agent.id}/`}>
             <AgentMark id={agent.id} name={agent.name} />
             <div><strong>{agent.name}</strong><span class="agent-meta">{groupLabels[agent.group] ?? agent.group}{agent.lockedVersion ? ` · ${agent.lockedVersion}` : ""}</span></div>
-            <span class="agent-meta">{agentDescriptions[agent.id] ?? "按项目公开能力提供安装或配置支持。"}</span>
+            <span class="agent-meta">{agentDescriptions[agent.id] ?? agentFallbackDescription}</span>
             <div class="agent-status">
               {agent.support.managedInstall ? <span class="chip chip-green">管理安装</span> : <span class="chip">官方引导</span>}
               {agent.support.managedConfig ? <span class="chip chip-blue">管理配置</span> : <span class="chip">官方配置</span>}
diff --git a/site/src/pages/changelog/index.astro b/site/src/pages/changelog/index.astro
index 682f4f9a..2b5cc8dd 100644
--- a/site/src/pages/changelog/index.astro
+++ b/site/src/pages/changelog/index.astro
@@ -1,26 +1,19 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import { formatDate, getPublishedReleases, releasesPageUrl } from "../../lib/downloads";
-const releases = await getPublishedReleases();
-const latest = releases[0] ?? null;
 ---
 <BaseLayout title="更新日志 — OneAgent" description="OneAgent 的版本变化、发行状态和已知限制。">
   <header class="page-hero">
     <div class="shell page-hero-grid">
       <div><nav class="breadcrumb" aria-label="面包屑"><a href="">首页</a> / 更新日志</nav><p class="eyebrow">Release notes</p><h1 class="page-title">只记录已经发生的变化。</h1></div>
-      <div class="page-hero-aside"><strong>{latest?.tag_name ?? "尚未发布"}</strong>版本与发布日期仅以 GitHub Release 为准。</div>
+      <div class="page-hero-aside"><strong>0.2.0-dev</strong>当前仍是开发中的未签名技术预览版；以下记录不是 Stable 发布承诺。</div>
     </div>
   </header>
   <section class="section-compact">
-    <div class="wide-narrow timeline">
-      {releases.length ? releases.map((release) => (
-        <article class="timeline-item">
-          <div class="timeline-date">{formatDate(release.published_at)}<br />{release.tag_name}</div>
-          <div><span class:list={["chip", release.prerelease ? "chip-blue" : "chip-green"]}>{release.prerelease ? "预发布" : "正式发布"}</span><h2>{release.name || release.tag_name}</h2><p><a class="button button-text" href={release.html_url}>查看发行说明 →</a></p></div>
-        </article>
-      )) : (
-        <article class="timeline-item"><div class="timeline-date">GitHub Releases</div><div><h2>尚无已发布版本</h2><p>开发分支和本地构建不作为公开版本记录。</p><a class="button button-text" href={releasesPageUrl}>查看 GitHub Releases →</a></div></article>
-      )}
+    <div class="wide-narrow timeline reveal">
+      <article class="timeline-item"><div class="timeline-date">2026-07-28<br />0.2.0-dev</div><div><span class="chip chip-blue">开发中</span><h2>可信分发站与发行事实层</h2><ul><li>新增由平台 manifest、SHA256SUMS 和渠道配置生成的公开发行索引。</li><li>macOS arm64 产物完成精确 SHA-256 对应的原生 cleanroom 复核。</li><li>新增独立公开网站，不改变本地 Launcher 打包与运行方式。</li></ul></div></article>
+      <article class="timeline-item"><div class="timeline-date">2026-07-28<br />af14f3e</div><div><h2>选择页排序与总览一致</h2><ul><li>按 rank 划分首屏 Agent，避免使用 group 代替用户认知排序。</li><li>guide-only Agent 继续可选择并在 Review 中返回引导结果。</li></ul></div></article>
+      <article class="timeline-item"><div class="timeline-date">2026-07-27<br />1cf37bf</div><div><h2>记录 CC Switch 表单研究的正确边界</h2><ul><li>确认共享编排器与专属字段区块并存，而不是每个 Agent 完全复制一套表单。</li><li>暂缓按底层配置格式拆分 OneAgent 表单，只响应真实用户选择。</li></ul></div></article>
+      <article class="timeline-item"><div class="timeline-date">2026-07-27<br />30d2eae</div><div><h2>使用各 Agent 已发布的标识</h2><ul><li>图标用于识别，不把第三方标识改造成 OneAgent 品牌资产。</li><li>来源与许可记录保留在项目中。</li></ul></div></article>
     </div>
   </section>
 </BaseLayout>
diff --git a/site/src/pages/downloads/index.astro b/site/src/pages/downloads/index.astro
index d688e692..7ba3fbb4 100644
--- a/site/src/pages/downloads/index.astro
+++ b/site/src/pages/downloads/index.astro
@@ -8,11 +8,11 @@ import DownloadSelector from "../../components/DownloadSelector.astro";
       <div>
         <nav class="breadcrumb" aria-label="面包屑"><a href="">首页</a> / 下载</nav>
         <p class="eyebrow">Download center</p>
-        <h1 class="page-title">下载之前，先看清它是什么。</h1>
+        <h1 class="page-title">选好平台，直接开始。</h1>
       </div>
       <div class="page-hero-aside">
         <strong>无需 OneAgent 账号</strong>
-        选择与你设备匹配的产物，核对版本、签名状态与 SHA-256，再开始本地激活流程。
+        每个产物都带着版本、体积、构建日期与 SHA-256，下载前你就能核对清楚。
       </div>
     </div>
   </header>
@@ -22,11 +22,13 @@ import DownloadSelector from "../../components/DownloadSelector.astro";
   <section class="section section-muted">
     <div class="narrow prose">
       <p class="eyebrow">Integrity</p>
-      <h2 class="section-title">为什么下载页一定要显示 SHA-256？</h2>
-      <p>下载渠道只是镜像，不应该改变包体。对同一版本而言，官网、GitHub Release、网盘和企业云盘上的文件必须拥有完全相同的 SHA-256。渠道方不能追加推广文件、替换安装脚本或再次签名。</p>
-      <p>如果你计算出的值与页面不一致，请不要运行该文件，并通过支持页面报告下载地址、文件名和实际哈希。</p>
-      <h3>为什么当前不叫 Stable？</h3>
-      <p>当前技术预览包尚未完成 macOS Developer ID 公证或 Windows Authenticode。OneAgent 不通过降低系统安全策略来掩盖这项缺失；每个平台只有在签名、公证和原生验证门禁完成后，才会独立进入 Stable。</p>
+      <h2 class="section-title">页面上的 SHA-256 让你可以自己核对。</h2>
+      <p>下载渠道只是镜像。同一版本在官网、GitHub Release、网盘和企业云盘上的文件，SHA-256 完全一致。</p>
+      <p>渠道不追加推广文件，不替换安装脚本，不二次签名。</p>
+      <p>算出来的值和页面不一致？别运行它，把下载地址、文件名和实际哈希发到支持页面。</p>
+      <h3>当前是技术预览版</h3>
+      <p>macOS Developer ID 公证与 Windows Authenticode 还没完成，所以它不叫 Stable。签名、公证与原生验证门禁齐备后，每个平台各自进入 Stable。</p>
+      <p>在此期间，OneAgent 不提供降低系统安全策略的说明。</p>
     </div>
   </section>
 </BaseLayout>
diff --git a/site/src/pages/en/downloads/index.astro b/site/src/pages/en/downloads/index.astro
new file mode 100644
index 00000000..bd7e0d3b
--- /dev/null
+++ b/site/src/pages/en/downloads/index.astro
@@ -0,0 +1,38 @@
+---
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import DownloadSelector from "../../../components/DownloadSelector.astro";
+import { localePath } from "../../../i18n";
+---
+<BaseLayout
+  title="Download OneAgent — unsigned technical preview"
+  description="Download the OneAgent technical preview, published with a manifest, SHA-256 and native cleanroom evidence."
+>
+  <header class="page-hero">
+    <div class="shell page-hero-grid">
+      <div>
+        <nav class="breadcrumb" aria-label="Breadcrumb"><a href={localePath("en", "")}>Home</a> / Downloads</nav>
+        <p class="eyebrow">Download center</p>
+        <h1 class="page-title">Pick your platform and get started.</h1>
+      </div>
+      <div class="page-hero-aside">
+        <strong>No OneAgent account required</strong>
+        Every artifact carries its version, size, build date and SHA-256, so you can check it before you download.
+      </div>
+    </div>
+  </header>
+  <section class="section-compact">
+    <div class="shell"><DownloadSelector /></div>
+  </section>
+  <section class="section section-muted">
+    <div class="narrow prose">
+      <p class="eyebrow">Integrity</p>
+      <h2 class="section-title">The SHA-256 on this page is here so you can check it yourself.</h2>
+      <p>A distribution channel is a mirror. For a given version, the file on this site, on GitHub Releases, on a file host and on an internal drive all carry the identical SHA-256.</p>
+      <p>Channels do not append promotional files, swap the install script, or re-sign the build.</p>
+      <p>If the value you compute does not match the page, do not run the file. Send the download URL, the filename and the hash you actually got to the support page.</p>
+      <h3>This is a technical preview</h3>
+      <p>macOS Developer ID notarisation and Windows Authenticode are not done yet, so it is not called stable. Each platform enters stable on its own once signing, notarisation and native verification are complete.</p>
+      <p>Until then, OneAgent does not document ways around your operating system's security policy.</p>
+    </div>
+  </section>
+</BaseLayout>
diff --git a/site/src/pages/en/explore/index.astro b/site/src/pages/en/explore/index.astro
new file mode 100644
index 00000000..10e0f311
--- /dev/null
+++ b/site/src/pages/en/explore/index.astro
@@ -0,0 +1,21 @@
+---
+import CompatibilityExplorer from "../../../components/CompatibilityExplorer.astro";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+---
+<BaseLayout
+  title="AI development environment Explorer — OneAgent"
+  description="Explore OneAgent agent compatibility by platform, install path, configuration mode, protocol, provider and illustrative environment state."
+>
+  <section class="page-hero">
+    <div class="shell page-hero-grid">
+      <div>
+        <p class="eyebrow">Agent × Provider × Protocol</p>
+        <h1 class="page-title">Move from a compatibility catalog to an explicit activation path.</h1>
+      </div>
+      <p class="lede">Capabilities come from the real repository catalog; machine state is explicitly illustrative. Filter combinations, inspect details and preserve the selection in a shareable URL.</p>
+    </div>
+  </section>
+  <section class="section section-compact">
+    <div class="shell"><CompatibilityExplorer /></div>
+  </section>
+</BaseLayout>
diff --git a/site/src/pages/en/index.astro b/site/src/pages/en/index.astro
new file mode 100644
index 00000000..32223251
--- /dev/null
+++ b/site/src/pages/en/index.astro
@@ -0,0 +1,84 @@
+---
+import ActivationConsole from "../../components/ActivationConsole.astro";
+import AgentMark from "../../components/AgentMark.astro";
+import HeroParticles from "../../components/HeroParticles.astro";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { catalog } from "../../lib/catalog";
+import { localePath } from "../../i18n";
+import { useCatalogLabels } from "../../i18n/catalog";
+import { protocolLabels } from "../../lib/content";
+import { getPreviewChannel } from "../../lib/release-channel";
+
+const preview = await getPreviewChannel();
+const available = preview?.targets.find((target) => target.status === "available");
+const primaryAgents = catalog.agents.slice(0, 6);
+const { agentDescriptions, groupLabels, agentFallbackDescription } = useCatalogLabels("en");
+const href = (path: string) => localePath("en", path);
+---
+<BaseLayout>
+  <section class="hero">
+    <HeroParticles />
+    <div class="shell hero-copy">
+      <div>
+        <p class="eyebrow">Local-first · Bring your own key</p>
+        <h1 class="display">One entry point,<br /><em>your whole AI dev environment.</em></h1>
+      </div>
+      <div class="hero-side">
+        <p class="lede">Move from agent to provider to protocol verification in one path. The demo below is live — real scanning, writes and backups happen in local OneAgent.</p>
+        <div class="hero-actions">
+          <button class="button button-primary" type="button" data-activation-trigger="activation-console" aria-controls="activation-console">Start activation demo</button>
+        </div>
+        <p class="hero-note">{preview?.version ? `${preview.version} · ` : ""}unsigned technical preview{available ? ` · currently ${available.platformLabel} ${available.archLabel}` : ""}</p>
+      </div>
+    </div>
+    <ActivationConsole />
+  </section>
+
+  <section class="section">
+    <div class="shell reveal">
+      <div class="section-heading">
+        <div><p class="eyebrow">One activation path</p><h2 class="section-title">Detect, connect and verify — with every step explained.</h2></div>
+        <p>Configuration, backups and credentials stay on your machine. The protocol an agent actually needs is verified before anything is written.</p>
+      </div>
+      <div class="steps">
+        <article class="step"><h3>Read the environment</h3><p>Installed, needs setup, official flow only — three states listed separately rather than flattened into one checkmark.</p></article>
+        <article class="step"><h3>Connect a provider</h3><p>Filter by the protocol an agent needs, or point it at your own endpoint. Every compatibility level is named.</p></article>
+        <article class="step"><h3>Verify and review</h3><p>Once verification passes: Ready state, the paths written, the backups taken, and the next command to run.</p></article>
+      </div>
+    </div>
+  </section>
+
+  <section class="section section-muted">
+    <div class="shell reveal">
+      <div class="section-heading">
+        <div><p class="eyebrow">Compatibility Explorer</p><h2 class="section-title">A real catalog, not a static compatibility poster.</h2></div>
+        <p>{catalog.agents.length} agents, {catalog.providers.length} public providers, and independent compatibility for OpenAI Responses, Anthropic Messages and Chat Completions.</p>
+      </div>
+      <div class="agent-list">
+        {primaryAgents.map((agent) => (
+          <a class="agent-row" href={href(`explore/?agent=${agent.id}`)}>
+            <AgentMark id={agent.id} name={agent.name} />
+            <div><strong>{agent.name}</strong><span class="agent-meta">{groupLabels[agent.group] ?? agent.group}</span></div>
+            <span class="agent-meta">{agentDescriptions[agent.id] ?? agentFallbackDescription}</span>
+            <div class="agent-status">
+              {agent.support.managedInstall ? <span class="chip chip-green">Managed install</span> : <span class="chip">Official guide</span>}
+              {agent.support.managedConfig ? <span class="chip chip-blue">Managed config</span> : <span class="chip">Official config</span>}
+              {agent.protocol && <span class="chip">{protocolLabels[agent.protocol]}</span>}
+            </div>
+          </a>
+        ))}
+      </div>
+      <div class="section-actions"><a class="button button-secondary" href={href("explore/")}>Open full Explorer</a></div>
+    </div>
+  </section>
+
+  <section class="cta-band">
+    <div class="shell cta-grid reveal">
+      <div><h2>Understand the flow in the demo, then activate it locally.</h2><p>Download OneAgent for local detection, configuration backups and protocol verification. Team baselines and internal delivery still never take custody of API keys.</p></div>
+      <div class="cta-actions">
+        <a class="button button-primary" href={href("downloads/")}>Download OneAgent</a>
+        <a class="button button-secondary" href={localePath("zh-CN", "enterprise/")}>Explore team services<span class="lang-hint">in Chinese</span></a>
+      </div>
+    </div>
+  </section>
+</BaseLayout>
diff --git a/site/src/pages/en/quickstart/index.astro b/site/src/pages/en/quickstart/index.astro
new file mode 100644
index 00000000..9031a72b
--- /dev/null
+++ b/site/src/pages/en/quickstart/index.astro
@@ -0,0 +1,57 @@
+---
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { localePath } from "../../../i18n";
+---
+<BaseLayout
+  title="Quickstart — OneAgent"
+  description="From download to a first verified agent configuration with OneAgent."
+>
+  <header class="page-hero">
+    <div class="shell page-hero-grid">
+      <div>
+        <nav class="breadcrumb" aria-label="Breadcrumb"><a href={localePath("en", "")}>Home</a> / Quickstart</nav>
+        <p class="eyebrow">Six deliberate steps</p>
+        <h1 class="page-title">Succeed once, without reading every config file first.</h1>
+      </div>
+      <div class="page-hero-aside">
+        <strong>Goal</strong>
+        Configure one agent, one provider and one real model protocol — and know exactly what OneAgent wrote.
+      </div>
+    </div>
+  </header>
+  <section class="section-compact">
+    <div class="shell content-grid reveal">
+      <article class="prose">
+        <div class="notice notice-warning">
+          <span class="notice-mark">!</span><div><strong>This is an unsigned technical preview</strong><p>If your operating system blocks it from running, stop there and either wait for a signed build or use the supported from-source path in the repository docs. This page does not describe ways around your system's security policy.</p></div>
+        </div>
+        <h2 id="download">1. Download and verify</h2>
+        <p>Pick the artifact matching your platform and architecture from the download centre. Compute its SHA-256 before running anything, and compare it character by character with the value shown on that page.</p>
+        <h2 id="launch">2. Launch OneAgent</h2>
+        <p>Unpack and run it. The interface is served on your machine's loopback address, never exposed to your LAN or the internet, and the local service exits with the app.</p>
+        <h2 id="agent">3. Choose an agent</h2>
+        <p>Choose the tool you actually intend to use. Agents marked “official guide” still go through the flow, but OneAgent will not dress them up as automatically installed or configured.</p>
+        <h2 id="provider">4. Connect your own provider</h2>
+        <p>Choose a provider or a custom compatible endpoint, and use your own API key. OneAgent offers no shared key, builds no unified model gateway, and never bills you for model usage.</p>
+        <h2 id="probe">5. Test the real protocol</h2>
+        <p>A reachable model list does not mean the agent will work. OneAgent tests the connection using the protocol that agent actually speaks: OpenAI Chat Completions, Anthropic Messages, or OpenAI Responses.</p>
+        <h2 id="review">6. Review what was written</h2>
+        <p>The final page shows each agent's result, where its configuration lives and how to start it. Backups are taken before anything is modified, and errors surface immediately rather than at the agent's first request.</p>
+        <div class="notice notice-info">
+          <span class="notice-mark">i</span><div><strong>Where does the key go?</strong><p>Your key is written only to the local config or OneAgent environment file the target agent needs to work. It never reaches a OneAgent profile, log, screenshot or telemetry event.</p></div>
+        </div>
+        <h2 id="troubleshooting">If something goes wrong</h2>
+        <ul>
+          <li>Agent missing: install it from the official source shown on the page, never from an unverified mirror script.</li>
+          <li>Key rejected: check permissions and balance in the provider's own console. Do not paste the key into a chat or an issue.</li>
+          <li>Protocol mismatch: switch to a model that explicitly supports the agent's protocol, rather than only checking <code>/v1/models</code>.</li>
+          <li>Checksum mismatch: do not run the file. Keep the filename, the download URL and the hash you computed.</li>
+        </ul>
+        <p><a class="button button-primary" href={localePath("en", "downloads/")}>Go to the download centre</a></p>
+      </article>
+      <nav class="side-index" aria-label="On this page">
+        <a href="#download">1. Download and verify</a><a href="#launch">2. Launch</a><a href="#agent">3. Choose an agent</a><a href="#provider">4. Connect a provider</a><a href="#probe">5. Test the protocol</a><a href="#review">6. Review results</a><a href="#troubleshooting">Troubleshooting</a>
+      </nav>
+    </div>
+  </section>
+</BaseLayout>
diff --git a/site/src/pages/en/security/index.astro b/site/src/pages/en/security/index.astro
new file mode 100644
index 00000000..dc4e8e60
--- /dev/null
+++ b/site/src/pages/en/security/index.astro
@@ -0,0 +1,90 @@
+---
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { localePath } from "../../../i18n";
+import { getPreviewChannel } from "../../../lib/release-channel";
+const preview = await getPreviewChannel();
+const publishedTarget = preview?.targets.find((target) => target.status === "available") ?? null;
+const publishedArtifact = publishedTarget?.artifacts.find((artifact) => artifact.kind === "binary") ?? null;
+/* The heading ids are shared with the Chinese page on purpose: release-index.json
+   points privacy_policy at security/#privacy and every target's evidence link at
+   security/#release-evidence, and those anchors have to resolve in both locales. */
+---
+<BaseLayout
+  title="Security, privacy and release integrity — OneAgent"
+  description="How OneAgent runs locally, where API keys go, how configuration is backed up, why every channel ships the same build, and what the unsigned preview does not claim."
+>
+  <header class="page-hero">
+    <div class="shell page-hero-grid">
+      <div><nav class="breadcrumb" aria-label="Breadcrumb"><a href={localePath("en", "")}>Home</a> / Security</nav><p class="eyebrow">Trust is inspectable</p><h1 class="page-title">Every boundary here is one you can check yourself.</h1></div>
+      <div class="page-hero-aside"><strong>No cloud account, no traffic relay</strong>Your key goes straight to the provider you picked. Configuration and backups stay on your machine. No application telemetry is collected by default.</div>
+    </div>
+  </header>
+  <section class="section-compact">
+    <div class="shell content-grid reveal">
+      <article class="prose">
+        <h2 id="local">Your data stays on your device</h2>
+        <p>The interface and the API both run on a loopback address. Configuration, backups and state are written on your machine.</p>
+        <p>The local service is not a control plane for anything outside it.</p>
+
+        <h2 id="privacy">A key only goes where it has to</h2>
+        <p>An API key is written to the one file the target agent needs to work: its own configuration, or OneAgent's environment file.</p>
+        <p>Keys never appear in the OneAgent profile, logs, screenshots, web analytics events, or command-line arguments.</p>
+        <p>Where it lands depends on the agent and the operating system. These are the common ones:</p>
+        <ul>
+          <li><code>~/.codex/config.toml</code></li>
+          <li><code>~/.claude/settings.json</code></li>
+          <li><code>~/.config/opencode/opencode.jsonc</code></li>
+          <li><code>~/.config/kilo/kilo.jsonc</code></li>
+          <li><code>~/.oneagent/</code></li>
+        </ul>
+        <p>The launcher lists the real paths before and after every write.</p>
+
+        <h2 id="backups">A backup comes before any change</h2>
+        <p>Before modifying existing configuration, OneAgent writes a timestamped backup.</p>
+        <p>Configuration directories and files holding a key are readable only by the current user. The cleanroom check confirms the real user directory was untouched by the test run.</p>
+
+        <h2 id="distribution">Every channel ships the same package</h2>
+        <p>This site, GitHub Releases, a file host and an internal drive all distribute the identical official build. For a given version, the contents and the SHA-256 match.</p>
+        <p>Channels do not repackage, append promotional content, or re-sign.</p>
+        <p>Third-party agent binaries are not redistributed by OneAgent. They come from the official installer, a mirror with written permission, or your own manual install.</p>
+
+        <h2 id="release-evidence">Current release evidence</h2>
+        {publishedTarget && publishedArtifact ? (
+          <>
+            <p>These values come from the published release metadata on GitHub Releases, so you can check each one against the release page itself.</p>
+            <ul>
+              <li>Channel: <code>technical-preview-unsigned</code></li>
+              <li>Version: <code>{preview?.version}</code></li>
+              <li>Platform: {publishedTarget.platformLabel} {publishedTarget.archLabel}</li>
+              <li>SHA-256: <code>{publishedArtifact.sha256}</code></li>
+              <li>Signing and notarisation: not yet complete, so this is not stable.</li>
+            </ul>
+            <p class="prose-fine">Whether the build was native, and whether a cleanroom run passed, is recorded by the release process — this page does not assert it on the release process's behalf.</p>
+          </>
+        ) : (
+          <p>No artifact has been published on this channel yet, so there is no digest here to check.</p>
+        )}
+
+        <div class="prose-aside">
+          <h2 id="stable">The stable gate</h2>
+          <p>Each platform reaches stable on its own once it qualifies, without waiting for the others.</p>
+          <ul>
+            <li>macOS: Developer ID signature, notarisation, stapled ticket</li>
+            <li>Windows: a valid Authenticode signature</li>
+            <li>Every platform: a native build and cleanroom evidence</li>
+          </ul>
+
+          <h2 id="excluded">Explicitly out of scope</h2>
+          <p>These are not part of the product, and will not be added as features:</p>
+          <ul>
+            <li>VPNs, proxy nodes, or instructions for getting around network restrictions</li>
+            <li>Shared API keys, a unified model gateway, reselling models or API access</li>
+            <li>Unauthorised agent binaries and channel-customised packages</li>
+            <li>Describing an unsigned preview as stable or as security-certified</li>
+          </ul>
+        </div>
+      </article>
+      <nav class="side-index" aria-label="On this page"><a href="#local">Where data lives</a><a href="#privacy">Where keys go</a><a href="#backups">Backups</a><a href="#distribution">One package</a><a href="#release-evidence">Release evidence</a><a href="#stable">Stable gate</a><a href="#excluded">Out of scope</a></nav>
+    </div>
+  </section>
+</BaseLayout>
diff --git a/site/src/pages/enterprise/index.astro b/site/src/pages/enterprise/index.astro
index 215e1ac1..79cdac47 100644
--- a/site/src/pages/enterprise/index.astro
+++ b/site/src/pages/enterprise/index.astro
@@ -12,14 +12,14 @@ const contactHref = businessEmail ? `mailto:${businessEmail}?subject=OneAgent%20
     </div>
   </header>
   <section class="section-compact">
-    <div class="shell service-grid">
+    <div class="shell service-grid reveal">
       <article class="service"><span class="service-number">01 / ENABLE</span><h2>团队启用</h2><ul><li>环境与前置工具盘点</li><li>Agent / Provider 选型</li><li>安装培训与上线检查</li></ul></article>
       <article class="service"><span class="service-number">02 / BASELINE</span><h2>环境标准化</h2><ul><li>批准的 Agent 版本基线</li><li>Provider 配置模板与回滚说明</li><li>官方同包内部镜像流程</li></ul></article>
       <article class="service"><span class="service-number">03 / SUPPORT</span><h2>商业支持</h2><ul><li>发布与升级协助</li><li>兼容性验证</li><li>约定响应时间与 SLA</li></ul></article>
     </div>
   </section>
   <section class="section section-muted">
-    <div class="shell split-callout"><span class="callout-index">BOUNDARY</span><div class="callout-body"><h2>企业服务不等于接管企业的模型流量。</h2><p>OneAgent 不托管企业 API Key，不建立集中代理，不把未授权 Agent 二进制塞进内部镜像。配置和秘密仍由客户设备或客户自己的秘密管理系统持有。</p><a class="button button-primary" href={contactHref}>{businessEmail ? "发送企业合作邮件" : "查看当前联系状态"}</a>{!businessEmail && <p class="hero-note">公开商务邮箱尚未配置；网站不会展示虚构联系方式。</p>}</div></div>
+    <div class="shell split-callout reveal"><span class="callout-index">BOUNDARY</span><div class="callout-body"><h2>企业服务不等于接管企业的模型流量。</h2><p>OneAgent 不托管企业 API Key，不建立集中代理，不把未授权 Agent 二进制塞进内部镜像。配置和秘密仍由客户设备或客户自己的秘密管理系统持有。</p><a class="button button-primary" href={contactHref}>{businessEmail ? "发送企业合作邮件" : "查看当前联系状态"}</a>{!businessEmail && <p class="hero-note">公开商务邮箱尚未配置；网站不会展示虚构联系方式。</p>}</div></div>
   </section>
   <section class="section-compact">
     <div class="narrow prose"><h2>产品化门禁</h2><p>只有在至少获得 3 个设计合作方、其中 2 个付费试点，并且它们反复提出相同需求后，才评估团队模板导入导出、环境合规报告、组织版本策略或内部升级策略。进入产品前必须新增 ADR，重新评估权限与隐私。</p></div>
diff --git a/site/src/pages/explore/index.astro b/site/src/pages/explore/index.astro
new file mode 100644
index 00000000..f95d6f7b
--- /dev/null
+++ b/site/src/pages/explore/index.astro
@@ -0,0 +1,21 @@
+---
+import CompatibilityExplorer from "../../components/CompatibilityExplorer.astro";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+---
+<BaseLayout
+  title="AI 开发环境配置 — OneAgent"
+  description="按平台、安装方式、配置方式、协议、Provider 与示例状态探索 OneAgent 的 Agent 兼容能力。"
+>
+  <section class="page-hero">
+    <div class="shell page-hero-grid">
+      <div>
+        <p class="eyebrow">Agent × Provider × Protocol</p>
+        <h1 class="page-title">从兼容目录，走到明确的激活路径。</h1>
+      </div>
+      <p class="lede">能力来自真实仓库目录；机器状态明确属于示例。筛选组合、打开详情，并把选择作为可分享 URL 保留下来。</p>
+    </div>
+  </section>
+  <section class="section section-compact">
+    <div class="shell"><CompatibilityExplorer /></div>
+  </section>
+</BaseLayout>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index c6251323..d085abb5 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -1,102 +1,88 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
+import ActivationConsole from "../components/ActivationConsole.astro";
 import AgentMark from "../components/AgentMark.astro";
+import HeroParticles from "../components/HeroParticles.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
 import { catalog } from "../lib/catalog";
-import { agentDescriptions, groupLabels, protocolLabels } from "../lib/content";
-import { getLatestRelease, releaseTargets } from "../lib/downloads";
+import { localePath } from "../i18n";
+import { useCatalogLabels } from "../i18n/catalog";
+import { protocolLabels } from "../lib/content";
+import { getPreviewChannel } from "../lib/release-channel";
 
-const release = await getLatestRelease();
-const targets = release ? releaseTargets(release) : [];
+/* null means the release feed had nothing to show — an unpublished fork, or a
+   build that ran without network. The note still has to say what channel this
+   is, because that claim is about the product and does not depend on any
+   particular release existing. */
+const preview = await getPreviewChannel();
+const available = preview?.targets.find((target) => target.status === "available");
 const primaryAgents = catalog.agents.slice(0, 6);
-const available = targets[0];
+const { agentDescriptions, groupLabels, agentFallbackDescription } = useCatalogLabels("zh-CN");
+const href = (path: string) => localePath("zh-CN", path);
 ---
 <BaseLayout>
   <section class="hero">
+    <HeroParticles />
     <div class="shell hero-copy">
       <div>
         <p class="eyebrow">Local-first · Bring your own key</p>
         <h1 class="display">一个入口，<br /><em>激活你的 AI 开发环境。</em></h1>
       </div>
       <div class="hero-side">
-        <p class="lede">OneAgent 检测、安装并初始化常用 Agent。账号、Provider 和 API Key 始终属于你，配置留在本机。</p>
+        <p class="lede">从 Agent 到 Provider，再到真实协议验证。下面这个示例流程可以直接点，真正的扫描、写入与备份都在本地 OneAgent 里完成。</p>
         <div class="hero-actions">
-          <a class="button button-primary" href="downloads/">下载 OneAgent</a>
-          <a class="button button-secondary" href="quickstart/">查看快速开始</a>
+          <button class="button button-primary" type="button" data-activation-trigger="activation-console" aria-controls="activation-console">开始激活演示</button>
         </div>
-        <p class="hero-note">
-          {release
-            ? `${release.tag_name} · ${release.prerelease ? "GitHub 预发布版" : "GitHub 正式版"}${available ? ` · 当前开放 ${available.platformLabel} ${available.archLabel}` : ""}`
-            : "尚无已发布版本 · 版本信息以 GitHub Release 为准"}
-        </p>
+        <p class="hero-note">{preview?.version ? `${preview.version} · ` : ""}未签名技术预览版{available ? ` · 当前开放 ${available.platformLabel} ${available.archLabel}` : ""}</p>
       </div>
     </div>
-    <figure class="product-shot">
-      <img src="images/oneagent-overview.jpg" width="1215" height="690" alt="OneAgent 环境总览，显示 Codex、Claude Code、Cursor、OpenCode、OpenClaw 与 Hermes 的状态" />
-    </figure>
-  </section>
-
-  <section class="trust-strip" aria-label="产品边界">
-    <div class="shell trust-grid">
-      <div class="trust-item"><strong>本地执行</strong><span>配置与备份留在用户设备</span></div>
-      <div class="trust-item"><strong>自己的 Key</strong><span>不提供共享 Key 或统一网关</span></div>
-      <div class="trust-item"><strong>同包分发</strong><span>所有渠道保持相同 SHA-256</span></div>
-      <div class="trust-item"><strong>诚实标注</strong><span>未签名预览版不冒充 Stable</span></div>
-    </div>
+    <ActivationConsole />
   </section>
 
   <section class="section">
-    <div class="shell">
+    <div class="shell reveal">
       <div class="section-heading">
-        <div><p class="eyebrow">First success path</p><h2 class="section-title">从下载到首次成功，只保留必要步骤。</h2></div>
-        <p>不要求注册 OneAgent 账号，不要求把 Key 交给新的中间服务，也不会在安装包里捆绑第三方 Agent。</p>
+        <div><p class="eyebrow">One activation path</p><h2 class="section-title">检测、连接、验证，每一步都能解释。</h2></div>
+        <p>配置、备份与凭证都留在本机。任何写入之前，先验证这个 Agent 真正需要的那个协议。</p>
       </div>
       <div class="steps">
-        <article class="step"><h3>选择 Agent</h3><p>优先展示常用工具，同时保留只能按官方方式安装的 Agent。</p></article>
-        <article class="step"><h3>连接 Provider</h3><p>使用你自己的 Provider 账号与 Key，并在写入配置前验证对应协议。</p></article>
-        <article class="step"><h3>完成并复核</h3><p>查看实际写入位置、备份和下一步命令；失败时得到明确错误而非静默降级。</p></article>
+        <article class="step"><h3>识别环境</h3><p>已安装、待配置、只能走官方流程——三种状态分开列出，而不是压成一个勾。</p></article>
+        <article class="step"><h3>连接 Provider</h3><p>按 Agent 所需协议筛选 Provider，也可以填你自己的端点。兼容等级逐项标明。</p></article>
+        <article class="step"><h3>验证并复核</h3><p>验证通过后，给出 Ready 状态、写入位置、备份情况和下一条命令。</p></article>
       </div>
     </div>
   </section>
 
   <section class="section section-muted">
-    <div class="shell">
+    <div class="shell reveal">
       <div class="section-heading">
-        <div><p class="eyebrow">Compatibility, stated precisely</p><h2 class="section-title">“支持”不是一个模糊的勾。</h2></div>
-        <p>安装、配置和协议分别标注。仅引导的 Agent 仍然可以进入流程，但不会被描述成 OneAgent 自动管理。</p>
+        <div><p class="eyebrow">Compatibility catalog</p><h2 class="section-title">真实目录，不用一张静态兼容表糊弄你。</h2></div>
+        <p>{catalog.agents.length} 个 Agent、{catalog.providers.length} 个公开 Provider，以及 OpenAI Responses、Anthropic Messages 与 Chat Completions 的独立兼容状态。</p>
       </div>
       <div class="agent-list">
         {primaryAgents.map((agent) => (
-          <a class="agent-row" href={`agents/${agent.id}/`}>
+          <a class="agent-row" href={href(`explore/?agent=${agent.id}`)}>
             <AgentMark id={agent.id} name={agent.name} />
             <div><strong>{agent.name}</strong><span class="agent-meta">{groupLabels[agent.group] ?? agent.group}</span></div>
-            <span class="agent-meta">{agentDescriptions[agent.id] ?? "按项目公开能力提供安装或配置支持。"}</span>
+            <span class="agent-meta">{agentDescriptions[agent.id] ?? agentFallbackDescription}</span>
             <div class="agent-status">
-              {agent.support.managedInstall ? <span class="chip chip-green">管理安装</span> : <span class="chip">官方引导</span>}
-              {agent.support.managedConfig ? <span class="chip chip-blue">管理配置</span> : <span class="chip">官方配置</span>}
+              {agent.support.managedInstall ? <span class="chip chip-green">托管安装</span> : <span class="chip">官方引导</span>}
+              {agent.support.managedConfig ? <span class="chip chip-blue">托管配置</span> : <span class="chip">官方配置</span>}
               {agent.protocol && <span class="chip">{protocolLabels[agent.protocol]}</span>}
             </div>
           </a>
         ))}
       </div>
-      <div style="margin-top:28px"><a class="button button-secondary" href="agents/">查看全部 {catalog.agents.length} 个 Agent</a></div>
-    </div>
-  </section>
-
-  <section class="section">
-    <div class="shell split-callout">
-      <span class="callout-index">01 / TRUST</span>
-      <div class="callout-body">
-        <h2>分发不是把一个 ZIP 放到更多地方，而是让每个地方都能证明它是同一个 ZIP。</h2>
-        <p>每个公开产物都带版本、平台、架构、大小和 SHA-256。官网、GitHub Release、网盘或企业云盘只能分发完全相同的官方构建。</p>
-        <a class="button button-secondary" href="security/">查看安全与发行政策</a>
-      </div>
+      <div class="section-actions"><a class="button button-secondary" href={href("explore/")}>打开完整配置目录</a></div>
     </div>
   </section>
 
   <section class="cta-band">
-    <div class="shell cta-grid">
-      <div><h2>先让一个人的环境可靠，再把它标准化到整个团队。</h2><p>团队启用、环境基线、内部镜像与商业支持，不接管企业 API Key。</p></div>
-      <a class="button button-secondary" href="enterprise/">了解企业服务</a>
+    <div class="shell cta-grid reveal">
+      <div><h2>先在示例里看清流程，再在本机真正激活。</h2><p>下载 OneAgent 完成本地检测、配置备份与协议验证；团队基线和内部交付仍然不接管 API Key。</p></div>
+      <div class="cta-actions">
+        <a class="button button-primary" href={href("downloads/")}>下载 OneAgent</a>
+        <a class="button button-secondary" href={href("enterprise/")}>了解团队服务</a>
+      </div>
     </div>
   </section>
 </BaseLayout>
diff --git a/site/src/pages/providers/[id].astro b/site/src/pages/providers/[id].astro
index c37e46a3..dee6ff5f 100644
--- a/site/src/pages/providers/[id].astro
+++ b/site/src/pages/providers/[id].astro
@@ -1,12 +1,15 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import { catalog, type SiteProvider } from "../../lib/catalog";
-import { protocolLabels, protocolStatusLabels } from "../../lib/content";
+import { catalog } from "../../lib/catalog";
+import { protocolLabels } from "../../lib/content";
+import { localeFromPath } from "../../i18n";
+import { useCatalogLabels } from "../../i18n/catalog";
 
 export function getStaticPaths() {
-  return catalog.providers.map((provider) => ({ params: { id: provider.id }, props: { provider } }));
+  return catalog.providers.map((provider: any) => ({ params: { id: provider.id }, props: { provider } }));
 }
-const { provider } = Astro.props as { provider: SiteProvider };
+const { provider } = Astro.props as any;
+const { protocolStatusLabels } = useCatalogLabels(localeFromPath(Astro.url.pathname));
 ---
 <BaseLayout title={`${provider.name} Provider — OneAgent`} description={`${provider.name} 在 OneAgent 中的公开协议接入和商业关系披露。`}>
   <header class="page-hero">
@@ -18,7 +21,7 @@ const { provider } = Astro.props as { provider: SiteProvider };
   <section class="section-compact">
     <div class="wide-narrow">
       <div class="detail-grid">
-        {provider.protocols.map((protocol) => (
+        {provider.protocols.map((protocol: any) => (
           <div class="detail-cell"><span>{protocolLabels[protocol.id] ?? protocol.id}</span><strong>{protocolStatusLabels[protocol.status] ?? protocol.status}</strong><p>{protocol.status === "release-candidate-required" ? "实现路径已存在，但真实 Provider Key 与对应模型仍须在 Release Candidate 中验收。" : "OneAgent 已实现该协议的连接与配置路径；模型本身仍需支持该协议。"}</p></div>
         ))}
         <div class="detail-cell"><span>API Key</span><strong>使用用户自己的账号</strong><p>OneAgent 不创建共享 Key，也不把请求转发到自己的网关。</p></div>
diff --git a/site/src/pages/providers/index.astro b/site/src/pages/providers/index.astro
index a00c9f7f..01958d52 100644
--- a/site/src/pages/providers/index.astro
+++ b/site/src/pages/providers/index.astro
@@ -1,7 +1,10 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
 import { catalog } from "../../lib/catalog";
-import { protocolLabels, protocolStatusLabels } from "../../lib/content";
+import { protocolLabels } from "../../lib/content";
+import { localeFromPath } from "../../i18n";
+import { useCatalogLabels } from "../../i18n/catalog";
+const { protocolStatusLabels } = useCatalogLabels(localeFromPath(Astro.url.pathname));
 ---
 <BaseLayout title="Provider 目录 — OneAgent" description="查看 OneAgent 的公开 Provider 接入、协议状态和商业关系披露。">
   <header class="page-hero">
@@ -11,8 +14,8 @@ import { protocolLabels, protocolStatusLabels } from "../../lib/content";
     </div>
   </header>
   <section class="section-compact">
-    <div class="shell provider-grid">
-      {catalog.providers.map((provider) => (
+    <div class="shell provider-grid reveal">
+      {catalog.providers.map((provider: any) => (
         <article class="provider-card">
           <div style="display:flex;justify-content:space-between;gap:20px;align-items:start">
             <h2>{provider.name}</h2>
@@ -20,7 +23,7 @@ import { protocolLabels, protocolStatusLabels } from "../../lib/content";
           </div>
           <p>使用 Provider 官方账号和 Key；OneAgent 只负责本地连接测试与目标 Agent 配置。</p>
           <div class="agent-status">
-            {provider.protocols.map((protocol) => <span class="chip">{protocolLabels[protocol.id] ?? protocol.id} · {protocolStatusLabels[protocol.status] ?? protocol.status}</span>)}
+            {provider.protocols.map((protocol: any) => <span class="chip">{protocolLabels[protocol.id] ?? protocol.id} · {protocolStatusLabels[protocol.status] ?? protocol.status}</span>)}
           </div>
           <a class="button button-text" href={`providers/${provider.id}/`}>查看协议状态 →</a>
         </article>
diff --git a/site/src/pages/quickstart/index.astro b/site/src/pages/quickstart/index.astro
index 82a38d72..1b35f372 100644
--- a/site/src/pages/quickstart/index.astro
+++ b/site/src/pages/quickstart/index.astro
@@ -13,7 +13,7 @@ import BaseLayout from "../../layouts/BaseLayout.astro";
     </div>
   </header>
   <section class="section-compact">
-    <div class="shell content-grid">
+    <div class="shell content-grid reveal">
       <article class="prose">
         <div class="notice notice-warning">
           <span class="notice-mark">!</span><div><strong>当前是未签名技术预览版</strong><p>如果操作系统阻止运行，请停止并等待签名版本或使用仓库文档中的受支持源码路径；本文不提供绕过系统安全策略的方法。</p></div>
diff --git a/site/src/pages/security/index.astro b/site/src/pages/security/index.astro
index c97d2085..0ebb9e02 100644
--- a/site/src/pages/security/index.astro
+++ b/site/src/pages/security/index.astro
@@ -1,48 +1,85 @@
 ---
 import BaseLayout from "../../layouts/BaseLayout.astro";
-import { getLatestRelease, releaseTargets, releasesPageUrl } from "../../lib/downloads";
-const release = await getLatestRelease();
-const target = release ? releaseTargets(release)[0] : null;
+import { getPreviewChannel } from "../../lib/release-channel";
+const preview = await getPreviewChannel();
+const publishedTarget = preview?.targets.find((target) => target.status === "available") ?? null;
+const publishedArtifact = publishedTarget?.artifacts.find((artifact) => artifact.kind === "binary") ?? null;
 ---
 <BaseLayout title="安全、隐私与发行完整性 — OneAgent" description="OneAgent 的本地执行、密钥处理、配置备份、同包分发和未签名预览版边界。">
   <header class="page-hero">
     <div class="shell page-hero-grid">
-      <div><nav class="breadcrumb" aria-label="面包屑"><a href="">首页</a> / 安全与隐私</nav><p class="eyebrow">Trust is inspectable</p><h1 class="page-title">信任来自可以核对的边界。</h1></div>
-      <div class="page-hero-aside"><strong>默认不采集应用遥测</strong>OneAgent 不需要云端账号，不建立模型流量中转，也不把 API Key 发送给 OneAgent 服务。</div>
+      <div><nav class="breadcrumb" aria-label="面包屑"><a href="">首页</a> / 安全与隐私</nav><p class="eyebrow">Trust is inspectable</p><h1 class="page-title">每一条边界都可以自己核对。</h1></div>
+      <div class="page-hero-aside"><strong>没有云端账号，没有流量中转</strong>你的 Key 直接到你选的 Provider，配置和备份留在本机。默认不采集应用遥测。</div>
     </div>
   </header>
   <section class="section-compact">
-    <div class="shell content-grid">
+    <div class="shell content-grid reveal">
       <article class="prose">
-        <h2 id="local">本地执行</h2>
-        <p>Launcher 在本机回环地址上提供界面与 API。配置、备份和状态保存在用户设备；本地服务不作为公网控制面。</p>
-        <h2 id="privacy">API Key 与隐私</h2>
-        <p>API Key 只写入目标 Agent 工作所需的本地配置或 OneAgent 环境文件。Key 不进入 OneAgent profile、日志、截图、网页分析事件或命令行参数。</p>
-        <p>典型写入位置包括 <code>~/.codex/config.toml</code>、<code>~/.claude/settings.json</code>、<code>~/.config/opencode/opencode.jsonc</code>、<code>~/.config/kilo/kilo.jsonc</code> 和 <code>~/.oneagent/</code>。具体路径取决于 Agent 与操作系统，写入前后均由 Launcher 展示。</p>
-        <h2 id="backups">权限与备份</h2>
-        <p>OneAgent 在修改既有配置前创建备份，并把配置目录和包含密钥的文件限制为当前用户可访问。cleanroom 会检查真实用户目录没有被测试流程修改。</p>
-        <h2 id="distribution">同包分发</h2>
-        <p>公开站只链接 GitHub Release 中的原始资产，不复制或重新打包下载文件。版本、发布日期、大小与校验摘要均来自 GitHub Release。</p>
-        <p>OneAgent 不重新分发第三方 Agent 二进制。Agent 应来自官方安装源、经过书面授权的镜像或用户手动安装。</p>
+        <h2 id="local">数据留在你的设备</h2>
+        <p>界面与 API 都跑在本机回环地址上。配置、备份和状态写在你的设备里。</p>
+        <p>本地服务不对外提供控制面。</p>
+
+        <h2 id="privacy">Key 只去它该去的地方</h2>
+        <p>API Key 只写进目标 Agent 工作所需的那一个文件：它自己的配置，或 OneAgent 的环境文件。</p>
+        <p>Key 不会出现在 OneAgent profile、日志、截图、网页分析事件或命令行参数里。</p>
+        <p>写入位置随 Agent 与操作系统而定，常见的是这几个：</p>
+        <ul>
+          <li><code>~/.codex/config.toml</code></li>
+          <li><code>~/.claude/settings.json</code></li>
+          <li><code>~/.config/opencode/opencode.jsonc</code></li>
+          <li><code>~/.config/kilo/kilo.jsonc</code></li>
+          <li><code>~/.oneagent/</code></li>
+        </ul>
+        <p>每次写入前后，Launcher 都会把实际路径列出来。</p>
+
+        <h2 id="backups">改动之前先备份</h2>
+        <p>修改既有配置前，OneAgent 先创建一份带时间戳的备份。</p>
+        <p>配置目录和含密钥的文件只对当前用户开放。cleanroom 会复核真实用户目录未被测试流程改动。</p>
+
+        <h2 id="distribution">每个渠道都是同一个包</h2>
+        <p>官网、GitHub Release、网盘、企业云盘分发的是完全相同的官方构建。同一版本，文件内容与 SHA-256 一致。</p>
+        <p>渠道不重新打包，不追加推广内容，不二次签名。</p>
+        <p>第三方 Agent 二进制不由 OneAgent 转发。它们来自官方安装源、书面授权的镜像，或你手动安装。</p>
+
         <h2 id="release-evidence">当前发行证据</h2>
-        {release ? (
+        {publishedTarget && publishedArtifact ? (
           <>
-            <div class="notice notice-success"><span class="notice-mark">✓</span><div><strong>GitHub Release 已发布</strong><p>{release.tag_name} 的版本信息和下载资产由 GitHub Release 提供。</p></div></div>
+            <p>下面这些值来自 GitHub Releases 已发布的产物元数据，你可以对着发行页逐条核对。</p>
             <ul>
-              <li>Release：<a href={release.html_url}>{release.name || release.tag_name}</a></li>
-              <li>类型：{release.prerelease ? "预发布版" : "正式版"}</li>
-              {target?.sha256 && <li>首个公开资产 SHA-256：<code>{target.sha256}</code></li>}
+              <li>渠道：<code>technical-preview-unsigned</code></li>
+              <li>版本：<code>{preview?.version}</code></li>
+              <li>平台：{publishedTarget.platformLabel} {publishedTarget.archLabel}</li>
+              <li>SHA-256：<code>{publishedArtifact.sha256}</code></li>
+              <li>签名与公证：尚未完成，因此不是 Stable。</li>
             </ul>
+            {/* 构建来源不在发行元数据里。原生构建与 cleanroom 复核由发布流程执行并记录在
+                仓库中，这个页面只声明它能证明的部分：已发布产物的摘要。 */}
+            <p class="prose-fine">原生构建与 cleanroom 复核的结论记录在发布流程里，不由这个页面代为断言。</p>
           </>
         ) : (
-          <div class="notice notice-warning"><span class="notice-mark">!</span><div><strong>尚无已发布版本</strong><p>当前没有可作为版本事实源的 GitHub Release。<a href={releasesPageUrl}>查看 Releases</a></p></div></div>
+          <p>当前渠道还没有已发布的产物，因此这里没有可核对的摘要。</p>
         )}
-        <h2 id="stable">Stable 门禁</h2>
-        <p>macOS 需要 Developer ID 签名、公证和 stapled ticket；Windows 需要有效 Authenticode；每个平台还必须有原生构建与 cleanroom 证据。平台可以独立进入 Stable，不用等待所有平台同时完成。</p>
-        <h2 id="excluded">明确排除</h2>
-        <ul><li>VPN、代理节点或绕过网络限制的指导；</li><li>共享 API Key、统一模型网关、模型/API 转售；</li><li>未授权 Agent 二进制和渠道定制包；</li><li>把未签名预览版描述为 Stable 或安全认证版本。</li></ul>
+
+        <div class="prose-aside">
+          <h2 id="stable">Stable 门禁</h2>
+          <p>每个平台各自达标后独立进入 Stable，不必等其他平台。</p>
+          <ul>
+            <li>macOS：Developer ID 签名、公证、stapled ticket</li>
+            <li>Windows：有效的 Authenticode 签名</li>
+            <li>所有平台：原生构建与 cleanroom 证据</li>
+          </ul>
+
+          <h2 id="excluded">明确排除</h2>
+          <p>这些不在产品范围内，也不会作为功能加进来：</p>
+          <ul>
+            <li>VPN、代理节点，或绕过网络限制的指导</li>
+            <li>共享 API Key、统一模型网关、模型或 API 转售</li>
+            <li>未授权的 Agent 二进制与渠道定制包</li>
+            <li>把未签名预览版说成 Stable 或安全认证版本</li>
+          </ul>
+        </div>
       </article>
-      <nav class="side-index" aria-label="本页目录"><a href="#local">本地执行</a><a href="#privacy">Key 与隐私</a><a href="#backups">权限与备份</a><a href="#distribution">同包分发</a><a href="#release-evidence">发行证据</a><a href="#stable">Stable 门禁</a><a href="#excluded">明确排除</a></nav>
+      <nav class="side-index" aria-label="本页目录"><a href="#local">数据位置</a><a href="#privacy">Key 去哪</a><a href="#backups">备份</a><a href="#distribution">同包分发</a><a href="#release-evidence">发行证据</a><a href="#stable">Stable 门禁</a><a href="#excluded">明确排除</a></nav>
     </div>
   </section>
 </BaseLayout>
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
index c54d307b..0b09ecbe 100644
--- a/site/src/styles/global.css
+++ b/site/src/styles/global.css
@@ -1,29 +1,94 @@
+/* Stays `light` so native controls match the light tokens below; .theme-dark
+   flips it to `dark` for itself. */
 :root {
   color-scheme: light;
-  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
   font-synthesis: none;
+  font-optical-sizing: auto;
   text-rendering: optimizeLegibility;
-  --paper: #f4f3ef;
-  --paper-strong: #eceae4;
+
+  /* Palette mirrors the desktop client's tokens.css so the site and the app
+     a user downloads read as one product. */
+  --paper: #ececef;
+  --paper-strong: #ededf0;
   --surface: #ffffff;
-  --surface-muted: #faf9f6;
-  --ink: #191918;
-  --ink-soft: #5e5d59;
-  --ink-faint: #6b6963;
-  --line: rgba(32, 32, 29, 0.14);
-  --line-strong: rgba(32, 32, 29, 0.24);
-  --blue: #1f5edc;
-  --blue-deep: #174fc4;
-  --blue-soft: #eaf1ff;
-  --green: #247340;
-  --green-soft: #e8f4eb;
-  --orange: #9b520c;
-  --orange-soft: #fff0df;
-  --red: #b4232d;
-  --red-soft: #fff0f0;
-  --radius-control: 7px;
-  --radius-panel: 12px;
-  --shadow-float: 0 32px 80px rgba(26, 30, 40, 0.14), 0 4px 18px rgba(26, 30, 40, 0.08);
+  --surface-muted: #f7f7f9;
+  --surface-pressed: #ededf0;
+  --ink: #1d1d1f;
+  /* Darkened from tokens.css's #6e6e73 / #8e8e93 / #006ee6: those clear AA on
+     the app's white window but not on this page's #ececef ground. */
+  --ink-soft: #636368;
+  --ink-faint: #68686d;
+  --line: rgba(60, 60, 67, 0.18);
+  --line-strong: rgba(60, 60, 67, 0.28);
+  --blue: #007aff;
+  --blue-deep: #0062cc;
+  /* Opaque on purpose: a translucent tint resolves against whatever section
+     background sits behind it, so the chip's contrast drifted per page. */
+  --blue-soft: #e8f0fb;
+  --green: #1c722f;
+  --green-soft: #e9f7ec;
+  --orange: #b25000;
+  --orange-soft: #fff3e7;
+  --red: #d70015;
+  --red-soft: #fff0f1;
+  --radius-control: 6px;
+  --radius-panel: 8px;
+  --radius-window: 12px;
+  --shadow-float: 0 22px 55px rgba(42, 42, 46, 0.16), 0 2px 8px rgba(42, 42, 46, 0.08);
+  --shadow-lift: 0 8px 24px rgba(42, 42, 46, 0.08);
+
+  /* Colours that used to be written inline. Naming them is what lets the dark
+     scheme reach them — a literal in a rule body cannot follow the theme. */
+  --on-accent: #ffffff;
+  --accent-pressed: #00539f;
+  --code-ink: #292b2f;
+  --code-bg: #e8e7e3;
+  --cta-ink: #ffffff;
+  --cta-ink-soft: rgba(255, 255, 255, 0.66);
+  --cta-bg: #1b1d22;
+  --cta-line: rgba(255, 255, 255, 0.32);
+  --selection-bg: #cfdfff;
+  --focus-ring: rgba(36, 103, 242, 0.33);
+  --chip-blue-line: rgba(0, 98, 204, 0.2);
+  --chip-green-line: rgba(28, 114, 47, 0.2);
+  --chip-orange-line: rgba(178, 80, 0, 0.2);
+  --chip-red-line: rgba(215, 0, 21, 0.2);
+  --particle: 0, 98, 204;
+
+  /* Type scale measured off apple.com's compiled marketing stylesheet. The
+     tracking curve is not monotonic: 40px is the 0em neutral point, larger
+     sizes go negative and 21-32px go positive. */
+  --fs-hero: clamp(48px, 7.2vw, 80px);
+  --fs-h1: clamp(40px, 5.6vw, 64px);
+  --fs-h2: clamp(32px, 4.2vw, 48px);
+  --fs-h3: clamp(28px, 3vw, 40px);
+  --fs-h4: clamp(24px, 2.2vw, 32px);
+  --fs-intro: clamp(19px, 1.6vw, 21px);
+  --fs-body: 17px;
+  --fs-caption: 14px;
+  --ls-hero: -0.015em;
+  --ls-h1: -0.009em;
+  --ls-h2: -0.003em;
+  --ls-h3: 0em;
+  --ls-h4: 0.004em;
+  --ls-intro: 0.011em;
+  --lh-hero: 1.05;
+  --lh-h1: 1.0625;
+  --lh-h2: 1.0834;
+  --lh-body: 1.47;
+
+  --measure-text: 734px;
+  --measure-wide: 1068px;
+  --space-section: clamp(80px, 10vw, 160px);
+  --space-block: clamp(32px, 4vw, 64px);
+
+  --ease-apple: cubic-bezier(0.66, 0, 0.1, 1);
+  --ease-enter: cubic-bezier(0, 0, 0.5, 1);
+  --dur-micro: 0.2s;
+  --dur-base: 0.344s;
+  --dur-slow: 0.4s;
+  --blur-material: 20px;
 }
 
 * { box-sizing: border-box; }
@@ -33,26 +98,20 @@ body {
   min-width: 320px;
   color: var(--ink);
   background: var(--paper);
-  font-size: 16px;
-  line-height: 1.6;
+  font-size: var(--fs-body);
+  line-height: var(--lh-body);
+  letter-spacing: 0;
   -webkit-font-smoothing: antialiased;
 }
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background-image: radial-gradient(rgba(25, 25, 24, 0.055) 0.55px, transparent 0.55px);
-  background-size: 9px 9px;
-  opacity: 0.34;
-}
 img { display: block; max-width: 100%; height: auto; }
+[hidden] { display: none !important; }
 a { color: inherit; text-decoration: none; }
 button, input, select { font: inherit; }
 button, select { color: inherit; }
-::selection { color: var(--ink); background: #cfdfff; }
+::selection { color: var(--ink); background: var(--selection-bg); }
 
+/* .product-shot is kept on this same measure wherever it changes, so the
+   preview frame stays aligned with the copy above it. */
 .shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
 .narrow { width: min(780px, calc(100% - 48px)); margin-inline: auto; }
 .wide-narrow { width: min(960px, calc(100% - 48px)); margin-inline: auto; }
@@ -63,7 +122,7 @@ button, select { color: inherit; }
   top: 12px;
   z-index: 100;
   padding: 9px 13px;
-  color: #fff;
+  color: var(--on-accent);
   background: var(--blue-deep);
   border-radius: var(--radius-control);
   transform: translateY(-140%);
@@ -75,11 +134,13 @@ button, select { color: inherit; }
   top: 0;
   z-index: 50;
   border-bottom: 1px solid var(--line);
-  background: color-mix(in srgb, var(--paper) 88%, transparent);
-  backdrop-filter: blur(18px) saturate(120%);
+  background: color-mix(in srgb, var(--paper) 82%, transparent);
+  backdrop-filter: blur(var(--blur-material)) saturate(180%);
 }
 .header-inner { min-height: 68px; display: flex; align-items: center; gap: 34px; }
-.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; letter-spacing: -0.02em; }
+.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.01em; }
+.wordmark-mark { transition: border-color var(--dur-micro) var(--ease-apple), background-color var(--dur-micro) var(--ease-apple); }
+.wordmark:hover .wordmark-mark { border-color: var(--blue); background: var(--blue-soft); }
 .wordmark-mark {
   width: 34px;
   height: 34px;
@@ -97,8 +158,28 @@ button, select { color: inherit; }
   border-radius: var(--radius-control);
   font-size: 14px;
   font-weight: 560;
+  transition: color var(--dur-micro) var(--ease-apple), background-color var(--dur-micro) var(--ease-apple);
+}
+.desktop-nav a:hover, .desktop-nav a[aria-current="page"], .header-link:hover { color: var(--ink); background: var(--surface); }
+/* Nav links are inline boxes, so a scale would not apply — press reads through
+   the surface instead. */
+.desktop-nav a:active, .header-link:active { background: var(--surface-pressed); transition-duration: 100ms; }
+/* Marks a link whose target has no translation in the current locale. Following
+   it changes language, which is a surprise worth naming before the click rather
+   than after it. Only ever rendered on an English page. */
+.lang-hint {
+  margin-left: 5px;
+  padding: 1px 5px;
+  display: inline-block;
+  border: 1px solid var(--line-strong);
+  border-radius: 999px;
+  color: var(--ink-faint);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0;
+  vertical-align: 1px;
+  white-space: nowrap;
 }
-.desktop-nav a:hover, .desktop-nav a[aria-current="page"], .header-link:hover { color: var(--ink); background: rgba(255,255,255,.62); }
 .header-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
 .mobile-menu { display: none; position: relative; }
 .mobile-menu summary { list-style: none; cursor: pointer; padding: 7px 9px; font-size: 14px; font-weight: 650; }
@@ -115,8 +196,9 @@ button, select { color: inherit; }
   box-shadow: var(--shadow-float);
   border-radius: var(--radius-panel);
 }
-.mobile-menu nav a { padding: 10px 12px; border-radius: 7px; }
+.mobile-menu nav a { padding: 10px 12px; border-radius: var(--radius-control); transition: background-color var(--dur-micro) var(--ease-apple); }
 .mobile-menu nav a:hover { background: var(--surface-muted); }
+.mobile-menu nav a:active { background: var(--surface-pressed); transition-duration: 100ms; }
 
 .button {
   min-height: 44px;
@@ -127,59 +209,80 @@ button, select { color: inherit; }
   gap: 9px;
   border: 1px solid transparent;
   border-radius: var(--radius-control);
-  font-size: 14px;
-  font-weight: 680;
+  font-size: var(--fs-caption);
+  font-weight: 600;
   line-height: 1;
   cursor: pointer;
-  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+  transition: transform var(--dur-micro) var(--ease-apple), background-color var(--dur-micro) var(--ease-apple), border-color var(--dur-micro) var(--ease-apple), color var(--dur-micro) var(--ease-apple);
 }
 .button:hover { transform: translateY(-1px); }
-.button:active { transform: translateY(0); }
-.button-primary { color: #fff; background: var(--blue); border-color: var(--blue); }
-.button-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
+/* Feedback belongs on the press, not the release, and it has to be fast enough
+   not to read as lag. */
+.button:active { transform: scale(0.97); transition-duration: 100ms; }
+/* --blue is Apple's system blue, but white on it is only 4.02:1 at this text
+   size; --blue-deep carries the fill so the label clears AA. */
+.button-primary { color: var(--on-accent); background: var(--blue-deep); border-color: var(--blue-deep); }
+.button-primary:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); }
 .button-secondary { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
 .button-secondary:hover { background: var(--surface-muted); }
 .button-small { min-height: 36px; padding-inline: 13px; font-size: 13px; }
 .button-text { min-height: auto; padding: 2px 0; color: var(--blue-deep); border: 0; }
+/* Overrides .button's lift: a text link sliding sideways reads as "go here",
+   where a vertical hop reads as a button. */
+.button-text:hover { transform: translateX(3px); }
 .button[aria-disabled="true"] { color: var(--ink-faint); background: var(--paper-strong); border-color: var(--line); cursor: not-allowed; transform: none; }
 
-.eyebrow { margin: 0 0 14px; color: var(--blue-deep); font-size: 12px; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
+.eyebrow { margin: 0 0 14px; color: var(--blue-deep); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
 .display {
   margin: 0;
-  max-width: 810px;
-  font-size: clamp(46px, 6.4vw, 82px);
-  line-height: .98;
-  letter-spacing: -0.063em;
-  font-weight: 760;
+  max-width: 900px;
+  font-size: var(--fs-hero);
+  line-height: var(--lh-hero);
+  letter-spacing: var(--ls-hero);
+  font-weight: 600;
 }
 .display em { color: var(--blue); font-style: normal; }
-.page-title { margin: 0; font-size: clamp(39px, 5vw, 62px); line-height: 1.04; letter-spacing: -.05em; font-weight: 750; }
-.section-title { margin: 0; max-width: 720px; font-size: clamp(31px, 4vw, 48px); line-height: 1.08; letter-spacing: -.042em; font-weight: 735; }
-.card-title { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
-.lede { margin: 24px 0 0; max-width: 680px; color: var(--ink-soft); font-size: clamp(18px, 2.2vw, 23px); line-height: 1.55; letter-spacing: -.018em; }
+.page-title { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 600; }
+.section-title { margin: 0; max-width: var(--measure-text); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; }
+.card-title { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: .011em; font-weight: 600; }
+.lede { margin: 24px 0 0; max-width: var(--measure-text); color: var(--ink-soft); font-size: var(--fs-intro); line-height: 1.42; letter-spacing: var(--ls-intro); }
 .prose { color: var(--ink-soft); }
-.prose h2, .prose h3 { color: var(--ink); letter-spacing: -.025em; }
-.prose h2 { margin-top: 64px; font-size: 30px; }
-.prose h3 { margin-top: 36px; font-size: 20px; }
-.prose p, .prose li { max-width: 72ch; }
-.prose a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
-.prose code, code.inline { padding: 2px 5px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.7); color: var(--ink); font: 0.88em ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
-
-.hero { padding: 104px 0 0; overflow: hidden; }
-.hero-copy { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .76fr); align-items: end; gap: 72px; }
+.prose h2, .prose h3 { color: var(--ink); font-weight: 600; }
+.prose h2 { margin-top: 64px; font-size: var(--fs-h4); letter-spacing: var(--ls-h4); }
+.prose h3 { margin-top: 36px; font-size: 21px; letter-spacing: .011em; }
+.prose p, .prose li { max-width: var(--measure-text); }
+/* :not(.button) keeps this from overriding .button-primary's white text —
+   both selectors are 0-2-0 and this one used to win on order alone. */
+.prose a:not(.button) { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
+.prose code, code.inline { padding: 2px 5px; overflow-wrap: anywhere; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: 0.88em ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+/* Reference material that belongs on the page but should not compete with it:
+   the boundary and gating facts a reader consults rather than reads through.
+   Kept at full contrast — only the heading scale and leading step down. */
+.prose-aside { margin-top: 72px; padding-top: 8px; border-top: 1px solid var(--line-strong); }
+.prose-aside h2 { margin-top: 40px; font-size: 19px; letter-spacing: .006em; }
+.prose-aside p, .prose-aside li { font-size: 15px; }
+
+/* position + overflow:hidden keep the absolutely positioned particle canvas
+   from widening the document — e2e asserts scrollWidth <= clientWidth. */
+.hero { position: relative; padding: 104px 0 var(--space-block); overflow: hidden; }
+.hero-copy { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .76fr); align-items: end; gap: 72px; }
 .hero-side { padding-bottom: 5px; }
 .hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
 .hero-note { margin: 18px 0 0; color: var(--ink-faint); font-size: 13px; }
+/* Shares .shell's measure so the frame's edges line up with the copy above it
+   and the trust strip below. It used to be 1215px against the shell's 1180px,
+   which read as a misalignment rather than as a deliberately wider layer. */
 .product-shot {
-  width: min(1215px, calc(100% - 48px));
+  width: min(1180px, calc(100% - 48px));
   margin: 74px auto 0;
   padding: 9px;
-  background: rgba(255,255,255,.62);
-  border: 1px solid var(--line-strong);
-  border-radius: 17px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-window);
   box-shadow: var(--shadow-float);
 }
-.product-shot img { width: 100%; border-radius: 10px; }
+/* The activation console owns its internal layout while this shared frame keeps
+   its edges aligned with the hero copy in every locale. */
 
 .trust-strip { padding: 34px 0 0; }
 .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
@@ -188,66 +291,92 @@ button, select { color: inherit; }
 .trust-item strong { display: block; margin-bottom: 3px; font-size: 14px; }
 .trust-item span { color: var(--ink-soft); font-size: 13px; }
 
-.section { padding: 120px 0; }
-.section-compact { padding: 82px 0; }
-.section-muted { background: rgba(255,255,255,.46); border-block: 1px solid var(--line); }
+.section { padding: var(--space-section) 0; }
+.section-compact { padding: calc(var(--space-section) * 0.62) 0; }
+.section-muted { background: var(--surface-muted); border-block: 1px solid var(--line); }
 .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 52px; }
 .section-heading p { max-width: 450px; margin: 0; color: var(--ink-soft); }
 
 .steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-strong); }
 .step { counter-increment: step; padding: 30px 32px 0 0; min-height: 210px; border-bottom: 1px solid var(--line); }
 .step + .step { padding-left: 32px; border-left: 1px solid var(--line); }
-.step::before { content: "0" counter(step); display: block; margin-bottom: 52px; color: var(--blue); font: 650 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
-.step h3 { margin: 0 0 9px; font-size: 20px; letter-spacing: -.025em; }
-.step p { margin: 0; color: var(--ink-soft); font-size: 14px; }
+.step::before { content: "0" counter(step); display: block; margin-bottom: 52px; color: var(--blue-deep); font: 650 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
+.step h3 { margin: 0 0 9px; font-size: 21px; letter-spacing: .011em; font-weight: 600; }
+.step p { margin: 0; color: var(--ink-soft); font-size: var(--fs-caption); }
 
 .agent-list { display: grid; border-top: 1px solid var(--line-strong); }
-.agent-row { min-height: 86px; padding: 18px 8px; display: grid; grid-template-columns: 42px minmax(160px, 1fr) minmax(240px, 1.4fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); transition: background-color 140ms ease; }
-.agent-row:hover { background: rgba(255,255,255,.48); }
+.agent-row { min-height: 86px; padding: 18px 8px; display: grid; grid-template-columns: 42px minmax(160px, 1fr) minmax(240px, 1.4fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); transition: background-color var(--dur-micro) var(--ease-apple), box-shadow var(--dur-micro) var(--ease-apple); }
+.agent-row:hover { background: var(--surface); box-shadow: inset 3px 0 0 var(--blue); }
+.agent-row:active { background: var(--surface-pressed); transition-duration: 100ms; }
 .agent-row strong { display: block; letter-spacing: -.015em; }
 .agent-meta { color: var(--ink-soft); font-size: 13px; }
 .agent-status { display: flex; flex-wrap: wrap; gap: 6px; }
 .agent-mark-wrap { width: 34px; height: 34px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
 .agent-mark-wrap img { width: var(--mark-size); height: var(--mark-size); object-fit: contain; }
-.agent-fallback { font-size: 13px; font-weight: 720; }
+.agent-fallback { font-size: 13px; font-weight: 650; }
 
-.chip { min-height: 26px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.68); font-size: 11px; font-weight: 650; white-space: nowrap; }
-.chip-blue { color: var(--blue-deep); background: var(--blue-soft); border-color: rgba(36,103,242,.18); }
-.chip-green { color: var(--green); background: var(--green-soft); border-color: rgba(36,115,64,.17); }
-.chip-orange { color: var(--orange); background: var(--orange-soft); border-color: rgba(155,82,12,.17); }
-.chip-red { color: var(--red); background: var(--red-soft); border-color: rgba(180,35,45,.17); }
+.chip { min-height: 26px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: var(--surface); font-size: 11px; font-weight: 600; white-space: nowrap; }
+.chip-blue { color: var(--blue-deep); background: var(--blue-soft); border-color: var(--chip-blue-line); }
+.chip-green { color: var(--green); background: var(--green-soft); border-color: var(--chip-green-line); }
+.chip-orange { color: var(--orange); background: var(--orange-soft); border-color: var(--chip-orange-line); }
+.chip-red { color: var(--red); background: var(--red-soft); border-color: var(--chip-red-line); }
 
 .split-callout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: start; }
-.callout-index { color: var(--blue); font: 650 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
+.callout-index { color: var(--blue-deep); font: 650 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
 .callout-body { padding-top: 1px; }
-.callout-body h2 { margin: 0 0 20px; font-size: clamp(32px,4vw,50px); line-height: 1.08; letter-spacing: -.045em; }
-.callout-body p { max-width: 650px; color: var(--ink-soft); font-size: 18px; }
+.callout-body h2 { margin: 0 0 20px; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; }
+.callout-body p { max-width: var(--measure-text); color: var(--ink-soft); font-size: var(--fs-intro); letter-spacing: var(--ls-intro); }
 
 .page-hero { padding: 92px 0 66px; border-bottom: 1px solid var(--line); }
 .page-hero-grid { display: grid; grid-template-columns: 1fr .55fr; gap: 70px; align-items: end; }
 .page-hero-aside { padding-bottom: 5px; color: var(--ink-soft); }
 .page-hero-aside strong { display: block; margin-bottom: 8px; color: var(--ink); }
 .breadcrumb { margin-bottom: 24px; color: var(--ink-faint); font-size: 13px; }
+.breadcrumb a { transition: color var(--dur-micro) var(--ease-apple); }
 .breadcrumb a:hover { color: var(--ink); }
 
-.notice { padding: 17px 18px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); background: rgba(255,255,255,.62); font-size: 14px; }
+.notice { padding: 17px 18px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); font-size: var(--fs-caption); }
 .notice strong { display: block; color: var(--ink); }
 .notice p { margin: 2px 0 0; color: var(--ink-soft); }
-.notice-warning { background: var(--orange-soft); border-color: rgba(155,82,12,.22); }
-.notice-info { background: var(--blue-soft); border-color: rgba(36,103,242,.2); }
-.notice-success { background: var(--green-soft); border-color: rgba(36,115,64,.2); }
-.notice-mark { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 760; }
+.notice-warning { background: var(--orange-soft); border-color: var(--chip-orange-line); }
+.notice-info { background: var(--blue-soft); border-color: var(--chip-blue-line); }
+.notice-success { background: var(--green-soft); border-color: var(--chip-green-line); }
+.notice-mark { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 650; }
 
 .download-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 54px; align-items: start; }
 .download-layout > * { min-width: 0; }
 .platform-control { position: sticky; top: 98px; }
-.platform-control label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 680; }
-.platform-control select { width: 100%; min-height: 44px; padding: 0 36px 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); }
+.platform-picker { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
+.platform-picker legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
+.platform-option {
+  padding: 12px 13px;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 11px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-panel);
+  background: var(--surface);
+  cursor: pointer;
+  transition: border-color var(--dur-micro) var(--ease-apple), background-color var(--dur-micro) var(--ease-apple);
+}
+.platform-option:hover { border-color: var(--line-strong); }
+.platform-option:active { background: var(--surface-pressed); transition-duration: 100ms; }
+/* Keeping the real radio (rather than hiding it behind a drawn circle) is what
+   gives this arrow-key navigation, form semantics and focus for free. */
+.platform-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue-deep); }
+.platform-option:has(input:checked) { border-color: var(--blue-deep); background: var(--blue-soft); }
+/* The ring belongs on the card, not the 16px dot inside it. */
+.platform-option:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
+.platform-option input:focus-visible { outline: none; }
+.platform-option-body { display: grid; gap: 1px; min-width: 0; }
+.platform-option-name { font-size: 14px; font-weight: 600; }
+.platform-option-arch { color: var(--ink-soft); font-size: 12px; }
 .detected-note { margin: 10px 0 0; color: var(--ink-faint); font-size: 12px; }
 .release-panel { display: none; }
 .release-panel.is-active { display: block; }
 .release-head { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line-strong); }
-.release-head h2 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.035em; }
+.release-head h2 { margin: 0 0 6px; font-size: 28px; letter-spacing: .004em; font-weight: 600; }
 .release-head p { margin: 0; color: var(--ink-soft); }
 .release-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; }
 .release-meta-grid div { padding: 22px 0; border-bottom: 1px solid var(--line); }
@@ -257,8 +386,8 @@ button, select { color: inherit; }
 .download-action { margin: 28px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
 .hash-block { margin-top: 24px; }
 .hash-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
-.hash-value, .code-block { margin: 0; padding: 14px 15px; overflow-x: auto; color: #292b2f; background: #e8e7e3; border: 1px solid var(--line); border-radius: 7px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
-.copy-button { padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 650; }
+.hash-value, .code-block { margin: 0; padding: 14px 15px; overflow-x: auto; color: var(--code-ink); background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--radius-control); font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
+.copy-button { padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); cursor: pointer; font-size: 12px; font-weight: 600; transition: background-color var(--dur-micro) var(--ease-apple); }
 .copy-button:hover { background: var(--surface-muted); }
 .unavailable-panel { padding: 38px 0; }
 .unavailable-panel h3 { margin: 0 0 7px; font-size: 23px; }
@@ -267,8 +396,10 @@ button, select { color: inherit; }
 .content-grid { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 68px; align-items: start; }
 .content-grid > * { min-width: 0; }
 .side-index { position: sticky; top: 98px; border-top: 1px solid var(--line-strong); }
-.side-index a { padding: 11px 0; display: block; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: 13px; }
-.side-index a:hover { color: var(--ink); }
+/* translate rather than padding so the hover stays on the compositor instead of
+   reflowing the sticky column on every pointer move. */
+.side-index a { padding: 11px 0; display: block; color: var(--ink-soft); border-bottom: 1px solid var(--line); font-size: 13px; transition: color var(--dur-micro) var(--ease-apple), transform var(--dur-micro) var(--ease-apple); }
+.side-index a:hover { color: var(--ink); transform: translateX(4px); }
 
 .detail-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
 .detail-cell { min-height: 142px; padding: 26px 28px 28px 0; border-bottom: 1px solid var(--line); }
@@ -278,8 +409,9 @@ button, select { color: inherit; }
 .detail-cell p { margin: 7px 0 0; color: var(--ink-soft); font-size: 13px; }
 
 .provider-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
-.provider-card { min-height: 250px; padding: 28px; display: flex; flex-direction: column; background: rgba(255,255,255,.72); border: 1px solid var(--line); }
-.provider-card h2 { margin: 0; font-size: 27px; letter-spacing: -.035em; }
+.provider-card { min-height: 250px; padding: 28px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); transition: border-color var(--dur-micro) var(--ease-apple), box-shadow var(--dur-micro) var(--ease-apple), transform var(--dur-micro) var(--ease-apple); }
+.provider-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
+.provider-card h2 { margin: 0; font-size: 28px; letter-spacing: .004em; font-weight: 600; }
 .provider-card p { color: var(--ink-soft); }
 .provider-card .agent-status { margin-top: 14px; }
 .provider-card .button-text { margin-top: auto; align-self: flex-start; }
@@ -293,22 +425,23 @@ button, select { color: inherit; }
 .service-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-strong); }
 .service { padding: 30px 30px 34px 0; border-bottom: 1px solid var(--line); }
 .service + .service { padding-left: 30px; border-left: 1px solid var(--line); }
-.service-number { color: var(--blue); font: 650 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
-.service h2 { margin: 58px 0 10px; font-size: 24px; letter-spacing: -.03em; }
-.service p, .service li { color: var(--ink-soft); font-size: 14px; }
+.service-number { color: var(--blue-deep); font: 650 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
+.service h2 { margin: 58px 0 10px; font-size: var(--fs-h4); letter-spacing: var(--ls-h4); font-weight: 600; }
+.service p, .service li { color: var(--ink-soft); font-size: var(--fs-caption); }
 .service ul { padding-left: 18px; }
 
-.cta-band { padding: 76px 0; color: #fff; background: #1b1d22; }
+.cta-band { padding: 76px 0; color: var(--cta-ink); background: var(--cta-bg); }
 .cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
-.cta-band h2 { margin: 0; max-width: 700px; font-size: clamp(34px,4.5vw,56px); line-height: 1.08; letter-spacing: -.045em; }
-.cta-band p { margin: 15px 0 0; color: rgba(255,255,255,.66); }
-.cta-band .button-secondary { border-color: rgba(255,255,255,.32); }
+.cta-band h2 { margin: 0; max-width: var(--measure-text); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; }
+.cta-band p { margin: 15px 0 0; color: var(--cta-ink-soft); }
+.cta-band .button-secondary { border-color: var(--cta-line); }
 
 .site-footer { padding: 70px 0 24px; border-top: 1px solid var(--line); background: var(--paper-strong); }
 .footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 50px; }
 .footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 8px; }
 .footer-grid strong { margin-bottom: 6px; font-size: 13px; }
 .footer-grid a:not(.wordmark), .footer-grid p { color: var(--ink-soft); font-size: 13px; }
+.footer-grid a { transition: color var(--dur-micro) var(--ease-apple); }
 .footer-grid a:hover { color: var(--ink); }
 .footer-brand p { max-width: 330px; margin: 17px 0 0; }
 .footer-brand .footer-fine { color: var(--ink-faint); }
@@ -334,13 +467,12 @@ button, select { color: inherit; }
 }
 
 @media (max-width: 680px) {
-  .shell, .narrow, .wide-narrow { width: min(100% - 28px, 1180px); }
+  .shell, .narrow, .wide-narrow, .product-shot { width: min(100% - 28px, 1180px); }
   .site-header .button { display: none; }
   .header-inner { min-height: 60px; gap: 12px; }
   .hero { padding-top: 58px; }
   .display { font-size: clamp(43px, 14vw, 63px); }
-  .product-shot { width: calc(100% - 14px); margin-top: 50px; padding: 5px; border-radius: 12px; }
-  .product-shot img { border-radius: 8px; }
+  .product-shot { margin-top: 50px; padding: 5px; border-radius: var(--radius-panel); }
   .trust-grid { grid-template-columns: 1fr; }
   .trust-item, .trust-item + .trust-item, .trust-item:nth-child(3) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
   .trust-item:first-child { border-top: 0; }
@@ -366,8 +498,190 @@ button, select { color: inherit; }
   .footer-bottom { display: grid; }
 }
 
+/* Scroll-driven reveal. Browsers without animation-timeline (Firefox as of
+   2026-07) never enter the @supports block, so .reveal stays at its static
+   painted state rather than needing a JS fallback.
+
+   Deliberately transform-only: fading text through partial opacity drops its
+   effective contrast below AA for the whole scroll range, and a reader who
+   stops mid-entry is left with unreadable copy. */
+@supports (animation-timeline: view()) {
+  @media not (prefers-reduced-motion: reduce) {
+    .reveal {
+      animation: reveal-in linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 55%;
+      will-change: transform;
+    }
+  }
+}
+@keyframes reveal-in {
+  from { transform: translateY(22px); }
+}
+
+/* First-paint entrance for the hero, staggered in reading order.
+
+   Uses --ease-enter, not --ease-apple: the latter is a slow-in/fast-out curve
+   meant for elements leaving or for state changes, and on an entrance it holds
+   the element almost still before snapping — legible as "something moved" but
+   not as a direction. An entrance needs its speed at the start.
+
+   No opacity, deliberately. Fading in is the obvious way to make an entrance
+   read as "arriving", but measured mid-flight it puts the primary button at
+   1.37:1 and the h1 at 1.5:1 — even when the ramp is confined to the first
+   quarter, that window is long enough to be read and short enough to be
+   missed in review. Distance and curve carry the motion instead. */
+@media not (prefers-reduced-motion: reduce) {
+  .hero .eyebrow,
+  .hero .display,
+  .hero .lede,
+  .hero .hero-actions,
+  .hero .hero-note,
+  .product-shot {
+    animation: hero-rise 620ms var(--ease-enter) both;
+  }
+  .hero .display { animation-delay: 70ms; }
+  .hero .lede { animation-delay: 160ms; }
+  .hero .hero-actions { animation-delay: 230ms; }
+  .hero .hero-note { animation-delay: 290ms; }
+  .product-shot { animation-delay: 360ms; }
+}
+
+@keyframes hero-rise {
+  from { transform: translateY(var(--hero-rise-from, 40px)); }
+}
+
+/* Measured at 375px, the tightest gap between two staggered lines is 14px
+   (eyebrow→h1) and buttons→release-note is 18px. Any travel past that lets one
+   line cross into the next mid-flight and obscure it, and a travel under it is
+   too small to perceive — there is no distance that is both safe and visible
+   once the hero stacks. So narrow screens animate the block as a whole: the
+   lines keep their relative positions, so nothing can overlap. */
+@media (max-width: 680px) {
+  .hero .eyebrow,
+  .hero .display,
+  .hero .lede,
+  .hero .hero-actions,
+  .hero .hero-note { animation: none; }
+  .hero-copy { animation: hero-rise 520ms var(--ease-enter) both; }
+  .product-shot { animation-delay: 180ms; }
+}
+
+/* Cross-document view transitions, replacing the white flash between pages.
+   This is the native MPA path, not Astro's <ClientRouter />: it ships no
+   client-side router, leaves every existing script untouched, and degrades to
+   the current full-page load where unsupported (Firefox as of 2026-07). */
+@view-transition { navigation: auto; }
+
+/* The chrome is identical on every page, so naming it lets the browser hold it
+   still while only the main content crossfades — without these it would fade
+   out and back in on every navigation. */
+.site-header { view-transition-name: site-header; }
+.site-footer { view-transition-name: site-footer; }
+
+@media not (prefers-reduced-motion: reduce) {
+  ::view-transition-old(root) {
+    animation: vt-out var(--dur-micro) var(--ease-apple) both;
+  }
+  ::view-transition-new(root) {
+    animation: vt-in var(--dur-base) var(--ease-apple) both;
+  }
+}
+
+/* Held to a small translate: a page-level slide that travels far enough to
+   notice also reads as sluggish on every single click. */
+@keyframes vt-out {
+  to { opacity: 0; transform: translateY(-6px); }
+}
+@keyframes vt-in {
+  from { opacity: 0; transform: translateY(10px); }
+}
+
+/* Dark scheme. Every value here was measured against its own surface rather
+   than derived by inverting the light palette: Apple's #007aff drops to 4.28:1
+   on a dark card and fails, so the accent is lifted to #3d9bff for text while
+   the button keeps the darker fill that white sits on at 5.80:1.
+
+   Declared before the prefers-contrast block below, whose :root override is
+   written in light-scheme literals and would otherwise win on order. */
+.theme-dark {
+  color-scheme: dark;
+
+  --paper: #0f1418;
+  --paper-strong: #0b0f12;
+  --surface: #161c21;
+  --surface-muted: #1b2228;
+  --surface-pressed: #212a31;
+  --ink: #f5f6f7;
+  --ink-soft: #adb3b9;
+  --ink-faint: #9aa1a8;
+  --line: rgba(233, 238, 243, 0.16);
+  --line-strong: rgba(233, 238, 243, 0.28);
+
+  --blue: #3d9bff;
+  --blue-deep: #6bb4ff;
+  --blue-soft: #14283c;
+  --green: #5fd07f;
+  --green-soft: #12291b;
+  --orange: #f0a95c;
+  --orange-soft: #301f0f;
+  --red: #ff8a8f;
+  --red-soft: #331619;
+
+  --shadow-float: 0 22px 55px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
+  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.45);
+
+  /* The accent is light here, so anything sitting on it needs dark ink — white
+     on #6bb4ff is 2.19:1. This covers the primary button and the skip link. */
+  --on-accent: #08131f;
+  --accent-pressed: #82c1ff;
+  --code-ink: #d4d8dc;
+  --code-bg: #12181d;
+  --cta-ink: #f5f6f7;
+  --cta-ink-soft: rgba(245, 246, 247, 0.7);
+  --cta-bg: #05080a;
+  --cta-line: rgba(245, 246, 247, 0.32);
+  --selection-bg: #1d3a5c;
+  --focus-ring: rgba(107, 180, 255, 0.45);
+  --chip-blue-line: rgba(107, 180, 255, 0.28);
+  --chip-green-line: rgba(95, 208, 127, 0.28);
+  --chip-orange-line: rgba(240, 169, 92, 0.28);
+  --chip-red-line: rgba(255, 138, 143, 0.28);
+  --particle: 107, 180, 255;
+}
+
+/* The Codex and OpenCode marks declare fill="currentColor", but an <img> has no
+   inheriting context, so they render black and vanish here. Inverting is safe
+   because both are single-shape glyphs — the marks with real brand colours are
+   not flagged and stay untouched. See AgentMark.astro. */
+.theme-dark .agent-mark-wrap img[data-monochrome] { filter: invert(1); }
+
+/* System preference is not read here on purpose. The inline script in
+   BaseLayout resolves stored choice + system preference into a single
+   .theme-dark class, so there is one source of truth instead of a CSS query and
+   a script that can disagree mid-session. */
+
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
 }
 
-:focus-visible { outline: 3px solid rgba(36,103,242,.33); outline-offset: 3px; }
+/* Translucent chrome has to become a real surface when the reader has asked for
+   less transparency, and gain a defined edge when they ask for more contrast. */
+@media (prefers-reduced-transparency: reduce) {
+  .site-header { background: var(--surface); backdrop-filter: none; }
+}
+
+@media (prefers-contrast: more) {
+  :root { --line: rgba(60, 60, 67, 0.5); --line-strong: rgba(60, 60, 67, 0.7); --ink-soft: #4a4a4f; --ink-faint: #4a4a4f; }
+  .site-header { background: var(--surface); backdrop-filter: none; }
+  .chip { border-color: var(--line-strong); }
+}
+
+:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
+
+/* Homepage activation entry refinements. */
+.section-actions { margin-top: 28px; }
+.cta-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
+@media (max-width: 680px) {
+  .cta-actions { margin-top: 28px; justify-content: flex-start; }
+}