Add interactive React Flow app and agent architecture

AGENTS.md

@@ -15,6 +15,10 @@ Read [README.md](README.md) and the bilingual app guides under
 - Preserve source provenance: corrections to checked-in upstream snapshots
   require updated hashes and an explicit correction record in `sources.json`.
   The consuming app's runtime and Cargo locks select its actual implementation.
+- The React Flow explorer lives in `src/components/architecture/`; keep node
+  ownership, edge meanings and both locales aligned with the prose. Preserve
+  keyboard selection, readable mobile focus, page scrolling, themes and the
+  static text version. Run `tests/architecture.spec.ts` for graph changes.
 - Keep browser sample state and historical design examples labelled. Preserve
   demo behavior and the prebuilt WASM package unless the task changes them.
 - For content/navigation changes run `npm run test:unit`, `npm run build`,

README.md

@@ -8,7 +8,7 @@ The independent bilingual website for [Octoscript](https://github.com/OctoSense-
 
 The site covers the DSL's motivation, syntax, host authority, L0–L3 rendering layers, UI capability levels, Splash, native composition and agent tooling. Nine guides in each language explain the contracts on the page. A searchable component catalog and a real Makepad/WebAssembly lab accompany the design-to-component examples. Light and dark themes are supported.
 
-The [app and agent guide](src/content/guides/octosense-apps.en.md) follows native Rust, Splash and L0 apps into OctoSense, including human/system conversations, app data, tool grants and Tokio tasks. Contributor instructions are in [AGENTS.md](AGENTS.md).
+The [app and agent guide](src/content/guides/octosense-apps.en.md) follows native Rust, Splash and L0 apps into OctoSense, including human/system conversations, app data, tool grants and Tokio tasks. Its interactive React Flow map separates app rendering from agent requests, with node details, keyboard controls and an HTML text version. Contributor instructions are in [AGENTS.md](AGENTS.md).
 
 ## Run locally
 
@@ -40,6 +40,7 @@ The build checks Astro/TypeScript and writes the static site to `dist/`. Playwri
 - `src/data/docs.ts`: combines the guides and snapshots into the documentation routes.
 - `scripts/doc-links.mjs`: maps relative Markdown links to local guides; optional upstream source references still point to the language repository.
 - `src/components/`: homepage sections, component catalog, WASM panel and recorded design-flow inspector.
+- `src/components/architecture/`: React Flow explorer, bilingual graph data and scoped styles. `Guide.astro` places it after the original guide introduction; `tests/architecture.spec.ts` checks interaction, accessibility and fallback behavior.
 - `src/styles/`: typography, responsive layout and light/dark theme tokens.
 - `public/examples/provenance.json`: image source hashes and the archived design review's status.
 

README.zh-CN.md

@@ -8,7 +8,7 @@
 
 网站介绍这门 DSL 的设计动机、语法、宿主权限、L0–L3 渲染分层、UI 能力等级、Splash、原生组合以及 Agent 工具链。每种语言各有九篇指南，逐一讲解页面上的各项约定。设计到组件的示例配有可搜索的组件目录和一个真实的 Makepad/WebAssembly 实验室。支持浅色和深色主题。
 
-[应用与 Agent 指南](src/content/guides/octosense-apps.cn.md)追踪原生 Rust、Splash 和 L0 应用如何进入 OctoSense，并说明用户／系统对话、应用数据、工具授权与 Tokio 任务。协作规则见 [AGENTS.md](AGENTS.md)。
+[应用与 Agent 指南](src/content/guides/octosense-apps.cn.md)追踪原生 Rust、Splash 和 L0 应用如何进入 OctoSense，并说明用户／系统对话、应用数据、工具授权与 Tokio 任务。交互式 React Flow 图把应用渲染与 Agent 请求分开，提供节点详情、键盘控制与 HTML 文字版。协作规则见 [AGENTS.md](AGENTS.md)。
 
 ## 本地运行
 
@@ -40,6 +40,7 @@ npm run test:e2e
 - `src/data/docs.ts`：把指南和快照组合成文档路由。
 - `scripts/doc-links.mjs`：把 Markdown 相对链接映射到本地指南；可选的上游源码引用仍指向语言仓库。
 - `src/components/`：首页各板块、组件目录、WASM 面板以及录制的设计流程查看器。
+- `src/components/architecture/`：React Flow 查看器、双语图数据与局部样式。`Guide.astro` 把它放在原指南引言之后；`tests/architecture.spec.ts` 检查交互、可访问性与无 JavaScript 的文字阅读。
 - `src/styles/`：字体排印、响应式布局以及浅色/深色主题 token。
 - `public/examples/provenance.json`：图片来源哈希以及已归档设计评审的状态。
 

astro.config.mjs

@@ -1,11 +1,13 @@
 import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
 import { unified } from '@astrojs/markdown-remark';
 import docLinks from './scripts/doc-links.mjs';
 
 export default defineConfig({
   site: process.env.SITE_URL || 'http://localhost:4325',
   base: process.env.BASE_PATH || '/',
   output: 'static',
+  integrations: [react()],
   trailingSlash: 'always',
   devToolbar: { enabled: false },
   markdown: {