docs: refresh README demo placement

Change-Id: Ifdfa0bf961c39643cd1ee3ac0905b257954b6f28

Author: heimanba

README.md

@@ -14,9 +14,9 @@
 > [!IMPORTANT]
 > OpenAgentPack is in beta. Public APIs and the `agents.yaml` schema may change before `1.0`. See the [changelog](./CHANGELOG.md).
 
-<p align="center">
-  <img src="https://img.alicdn.com/imgextra/i3/O1CN01xWDp5P1EP90HOZx9q_!!6000000000343-2-tps-1254-1254.png" width="360" alt="OpenAgentPack: one agents.yaml for multiple managed-agent providers">
-</p>
+![OpenAgentPack CLI: from agents.yaml to plan and apply](./packages/sdk/docs/agents.gif)
+
+`agents.yaml → validate → plan → apply`: bring agents back into Git, review the pending changes, then update remote resources.
 
 One `agents.yaml` defines an agent's environment, model, instructions, tools, skills, MCP servers, vaults, and credentials. Review every change in a PR, preview it with `plan`, and apply it when ready — instead of rebuilding the same agent through console clicks.
 
@@ -33,6 +33,8 @@ agents validate && agents plan
 
 [Run the 5-minute quick start](./docs/getting-started.md) · [View provider support](./docs/reference/providers.md) · [Browse runnable examples](./docs/examples.md) · [Roadmap](./ROADMAP.md)
 
+▶ [Watch the Playground demo: switch provider and run the same agent scenario](https://github.com/user-attachments/assets/bf51b8d8-f2ed-464b-bca9-0709fefcc44d)
+
 ## Why now
 
 Agents are moving from personal tools to enterprise digital workers. But the things that make an agent valuable — its prompts, skills, knowledge files, tools, and runtime configuration — still live mainly inside cloud-provider consoles.
@@ -45,6 +47,10 @@ OpenAgentPack puts a declarative control plane between the agent and the cloud p
 
 The goal is to make an agent an enterprise-controlled, portable, and inheritable digital asset.
 
+<p align="center">
+  <img src="https://img.alicdn.com/imgextra/i3/O1CN01xWDp5P1EP90HOZx9q_!!6000000000343-2-tps-1254-1254.png" width="360" alt="OpenAgentPack: one agents.yaml for multiple managed-agent providers">
+</p>
+
 ### Declaration and portability: the agent as a blueprint
 
 Borrowing Docker's declarative idea, OpenAgentPack brings everything that determines what an agent is — model, instructions, tools, skills, environment, files, and credential references — into one `agents.yaml` blueprint. The blueprint can live in Git, pass through pull-request review, reproduce an agent, and move across providers.
@@ -68,18 +74,6 @@ The mechanics are a single `agents.yaml`, a `validate → plan → apply` workfl
 - **Dependency-aware** — Environment → Skill → Agent are created in topological order; a failed dependency skips its dependents instead of leaving half-built state.
 - **Drift recovery** — detects when remote config has drifted from your declaration and reconciles it. The YAML is always the single source of truth.
 
-## Demo
-
-### CLI workflow
-
-![OpenAgentPack CLI workflow](./packages/sdk/docs/agents.gif)
-
-### Local Playground
-
-`agents playground` launches a local WebUI, fetches the matching `@openagentpack/playground` package on demand, and opens it in your browser. Use `--provider` to target `bailian`, `qoder`, `ark`, or `claude`.
-
-[Watch the Playground demo video](https://github.com/user-attachments/assets/bf51b8d8-f2ed-464b-bca9-0709fefcc44d)
-
 ## Quick start
 
 ```bash
@@ -90,6 +84,10 @@ agents apply -y        # apply changes
 agents destroy         # tear down managed resources
 ```
 
+Run `agents playground` to launch the local WebUI, and use `--provider` to target `bailian`, `qoder`, `ark`, or `claude`. You can switch providers on the same declaration, run real sessions, and observe tool calls and artifacts.
+
+▶ [Watch the full Playground demo](https://github.com/user-attachments/assets/bf51b8d8-f2ed-464b-bca9-0709fefcc44d)
+
 A minimal config:
 
 ```yaml

README.zh-CN.md

@@ -14,9 +14,9 @@
 > [!IMPORTANT]
 > OpenAgentPack 目前处于 Beta 阶段。公开 API 和 `agents.yaml` Schema 在 `1.0` 前仍可能发生不兼容变更，详见 [更新日志](./CHANGELOG.md)。
 
-<p align="center">
-  <img src="https://img.alicdn.com/imgextra/i1/O1CN016pw0Ax1KuBXckX0Iz_!!6000000001223-2-tps-1254-1254.png" width="360" alt="OpenAgentPack：一份 agents.yaml 管理多个托管 Agent 平台">
-</p>
+![OpenAgentPack CLI：从 agents.yaml 到 plan 和 apply](./packages/sdk/docs/agents.gif)
+
+`agents.yaml → validate → plan → apply`：先把 Agent 带回 Git，审查将要发生的变更，再更新远端资源。
 
 一份 `agents.yaml` 定义 Agent 的环境、模型、指令、工具、技能、MCP、Vault 和凭据。每次变更都能在 PR 中审查，用 `plan` 预览后再执行，不必在控制台里重复搭建同一个 Agent。
 
@@ -33,6 +33,8 @@ agents validate && agents plan
 
 [5 分钟快速开始](./docs/getting-started.zh-CN.md) · [查看 Provider 支持](./docs/reference/providers.zh-CN.md) · [浏览可运行示例](./docs/examples.md) · [Roadmap](./ROADMAP.md)
 
+▶ [观看 Playground 演示：切换 Provider，运行同一个 Agent 场景](https://github.com/user-attachments/assets/bf51b8d8-f2ed-464b-bca9-0709fefcc44d)
+
 ## 为什么是现在
 
 Agent 正在从个人工具变成企业的数字员工。但企业真正重要的东西 —— Prompt、技能、知识文件、工具和运行配置 —— 现在主要只存在于云厂商控制台里。
@@ -45,6 +47,10 @@ OpenAgentPack 在 Agent 和云平台之间建立一个声明式控制平面。
 
 我们的目标，是让 Agent 成为企业可掌控、可迁移、可传承的数字资产。
 
+<p align="center">
+  <img src="https://img.alicdn.com/imgextra/i1/O1CN016pw0Ax1KuBXckX0Iz_!!6000000001223-2-tps-1254-1254.png" width="360" alt="OpenAgentPack：一份 agents.yaml 管理多个托管 Agent 平台">
+</p>
+
 ### 声明与可携带：把 Agent 写成一份图纸
 
 借鉴 Docker 的声明思想，把所有决定 Agent 是什么的东西 —— 模型、指令、工具、技能、环境、文件和凭据引用 —— 收敛到一份 `agents.yaml` 图纸里。这份图纸可以进入 Git、接受 PR 审查、复现 Agent，也可以迁移到不同 Provider。
@@ -68,18 +74,6 @@ OpenAgentPack 在 Agent 和云平台之间建立一个声明式控制平面。
 - **依赖自动解析** —— Environment → Skill → Agent 按拓扑序创建；依赖失败会跳过下游，而不是留下半成品状态。
 - **Drift 恢复** —— 检测远程配置与声明的漂移并收敛回来。YAML 始终是唯一事实来源。
 
-## 效果演示
-
-### CLI 工作流
-
-![OpenAgentPack CLI 工作流](./packages/sdk/docs/agents.gif)
-
-### 本地 Playground
-
-`agents playground` 会启动本地 WebUI，按需拉取匹配版本的 `@openagentpack/playground`，并自动打开浏览器。可通过 `--provider` 指定 `bailian`、`qoder`、`ark` 或 `claude`。
-
-[观看 Playground 演示视频](https://github.com/user-attachments/assets/bf51b8d8-f2ed-464b-bca9-0709fefcc44d)
-
 ## 快速开始
 
 ```bash
@@ -90,6 +84,10 @@ agents apply -y        # 执行变更
 agents destroy         # 销毁托管资源
 ```
 
+运行 `agents playground` 可启动本地 WebUI，并通过 `--provider` 指定 `bailian`、`qoder`、`ark` 或 `claude`。你可以在同一份声明上切换 Provider、运行真实 Session，并观察工具调用和 Artifact。
+
+▶ [观看 Playground 完整演示](https://github.com/user-attachments/assets/bf51b8d8-f2ed-464b-bca9-0709fefcc44d)
+
 最小配置：
 
 ```yaml