docs: add localized console screenshots to README

README.md

@@ -25,6 +25,12 @@ OpenAgentCore runs AI agents on your own infrastructure behind the OpenAI Agents
 - **Every part is replaceable.** Sandboxes, harnesses and model providers plug in
   through defined protocols.
 
+## Screenshots
+
+| Overview | Agent metrics |
+| --- | --- |
+| ![Deployment overview](docs/assets/console-overview-en.png) | ![Agent metrics](docs/assets/console-agent-metrics-en.png) |
+
 ## Install
 
 On a Linux amd64 host with Docker and Python 3.9+:

README.zh-CN.md

@@ -23,6 +23,12 @@ OpenAgentCore 在你自己的基础设施上运行 AI Agent，对外提供 OpenA
   也可以在你自己的 Linux、macOS 或 Windows 机器上工作。
 - **每个部件都可替换。** 沙箱、Harness 和模型供应商都通过既定协议接入。
 
+## 界面预览
+
+| 概览 | Agent 监控 |
+| --- | --- |
+| ![部署概览](docs/assets/console-overview-zh.png) | ![Agent 监控](docs/assets/console-agent-metrics-zh.png) |
+
 ## 安装
 
 在已准备 Docker 和 Python 3.9+ 的 Linux amd64 主机上：

apps/web/README.md

@@ -157,3 +157,26 @@ pnpm --filter @agents-core-web/web build
 These checks cover the application source. Browser acceptance through
 `services/core-console` is tracked in the [frontend roadmap](../../docs/web/roadmap.md).
 Required repository checks are documented in [CONTRIBUTING.md](../../CONTRIBUTING.md).
+
+### README screenshots
+
+The browser fixture has an opt-in scene for Overview and Agent metrics, including
+five available nodes. From the repository root, start these in separate terminals:
+
+```sh
+OAC_WEB_SCREENSHOT_DEMO=1 AGENTS_FIXTURE_PORT=18394 node apps/web/e2e/fixture-console.mjs
+```
+
+```sh
+OAC_WEB_DEV_PROXY_TARGET=http://127.0.0.1:18394 pnpm --filter @agents-core-web/web exec vite --host 127.0.0.1 --mode test --port 4394
+```
+
+Open `http://127.0.0.1:4394` in Chrome and sign in with the fixture-only key
+`fixture-core-key-3f9a2c71`. Capture Overview and Agent metrics in light mode,
+once in English and once in Chinese using the console language menu. Check that
+all five nodes load and metrics have no partial-data warning before capturing.
+For a remote preview, forward port 4394 over SSH and capture in local Chrome.
+Keep the original resolution, crop browser chrome and add a plain macOS-style
+window bar. The four PNGs in `docs/assets/console-*.png` are linked by the matching
+README and included in the distribution manifest. Normal acceptance data and
+production builds do not enable this scene.

apps/web/e2e/fixture-console.mjs

@@ -10,6 +10,7 @@ import { buildAdmin } from "./data/admin.mjs";
 import { coreMetrics } from "./data/core-metrics.mjs";
 import { buildResources } from "./data/resources.mjs";
 import { buildDemo } from "./data/routes.mjs";
+import { buildScreenshotDemo } from "../screenshots/data.mjs";
 
 const port = Number(process.env.AGENTS_FIXTURE_PORT ?? 18092);
 const SESSION_COOKIE = "core_console=fixture-session";
@@ -94,8 +95,9 @@ function e2bDeployment() {
 
 function reset(mode = "login", fresh = false, sandbox = "configured", nodes = "demo", address = "public", credentials = "configured", installers = true, artifacts = "docker,microsandbox") {
   // Self-hosted Sessions get their remote_url from public_url, as in Core.
-  const base = buildDemo(undefined, address === "local" ? LOCAL_URL : PUBLIC_URL);
+  const screenshots = process.env.OAC_WEB_SCREENSHOT_DEMO === "1";
   const now = Math.floor(Date.now() / 1000);
+  const base = (screenshots ? buildScreenshotDemo : buildDemo)(now, address === "local" ? LOCAL_URL : PUBLIC_URL);
   const resources = buildResources(now, base.agents, base.sessions);
   const admin = buildAdmin(now, base, resources);
   // A fresh install: no project, Session or Runtime yet; Getting started leads.

apps/web/screenshots/data.mjs

@@ -0,0 +1,52 @@
+// Synthetic README scenes. Only the explicitly opted-in browser fixture uses them.
+import { buildDemo } from "../e2e/data/routes.mjs";
+
+export function buildScreenshotDemo(now, publicUrl) {
+  const data = buildDemo(now, publicUrl);
+  for (const session of data.sessions) {
+    session.status = "idle";
+    session.error = null;
+    session.required_actions = [];
+  }
+  const pending = [
+    ["Support triage", "approve_refund", "Review refund request"],
+    ["Incident responder", "approve_rollback", "Approve checkout rollback"],
+  ].map(([name, action, title], index) => {
+    const session = data.sessions.find((entry) => entry.agent.name === name);
+    session.status = "requires_action";
+    session.metadata = { title };
+    session.last_active_at = now - 180 - index * 240;
+    const turn = data.turns.get(session.id).at(-1);
+    if (turn) Object.assign(turn, { status: "waiting", completed_at: null, error: null });
+    session.required_actions = [{ type: "function_call", call_id: `demo-approval-${index}`, turn_id: turn?.id, name: action, arguments: {} }];
+    return session;
+  });
+  for (const session of data.sessions.filter((entry) => !pending.includes(entry)).slice(0, 6)) {
+    session.status = "in_progress";
+    session.last_active_at = now - 20;
+    const turn = data.turns.get(session.id).at(-1);
+    if (turn) Object.assign(turn, { status: "in_progress", completed_at: null, error: null, usage: null });
+  }
+  data.nodes.push(
+    { ...data.nodes[0], id: "node-us-west" },
+    { ...data.nodes[0], id: "node-eu-west" },
+  );
+  data.allocations.forEach((allocation, index) => {
+    allocation.node_id = data.nodes[index % data.nodes.length].id;
+  });
+  data.nodes.forEach((node, index) => {
+    const own = data.allocations.filter((entry) => entry.node_id === node.id);
+    const running = own.filter((entry) => entry.compute_phase === "running").length;
+    Object.assign(node, {
+      name: ["worker-eu-01", "worker-us-02", "worker-ap-03", "worker-us-04", "worker-eu-05"][index],
+      online: true, provider_ready: true, rollout: { state: "ready", ready_generation: 1 },
+      active: running, running, retained: own.length - running, snapshots: own.length - running,
+      reserved: 0, cleanup_pending: 0, max_active: 8, max_retained: 16,
+      available_memory_bytes: 32 * 2 ** 30, available_disk_bytes: 240 * 2 ** 30,
+      last_seen_at: new Date((now - 4) * 1000).toISOString(),
+    });
+    delete node.diagnostic;
+  });
+  data.sessions.sort((a, b) => b.created_at - a.created_at);
+  return data;
+}

scripts/core-distribution-manifest.py

@@ -54,6 +54,10 @@
     "docs/assets/openagentcore-banner.jpeg",
     "docs/assets/architecture.png",
     "docs/assets/development-architecture.png",
+    "docs/assets/console-overview-en.png",
+    "docs/assets/console-overview-zh.png",
+    "docs/assets/console-agent-metrics-en.png",
+    "docs/assets/console-agent-metrics-zh.png",
 )
 REPOSITORY_URL = "https://github.com/MiniMax-AI/parsar-core"
 MARKDOWN_LINK = re.compile(r"(!?)\[((?:[^\[\]]|\[[^\]]*\])*)\]\(([^)\s]+)((?:\s+\"[^\"]*\")?)\)")