Merge pull request #5 from Harzva/agent/add-pages-showcase

add GroupX Pages showcase and real run proof

Author: susyimes

.github/workflows/pages.yml

@@ -0,0 +1,51 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "site/**"
+      - "docs/assets/showcase/**"
+      - ".github/workflows/pages.yml"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+      - name: Configure Pages
+        uses: actions/configure-pages@v5
+      - name: Assemble static site
+        run: |
+          mkdir -p _site/assets
+          cp -R site/. _site/
+          cp docs/assets/showcase/architect-response.png _site/assets/
+          cp docs/assets/showcase/builder-response.png _site/assets/
+          cp docs/assets/showcase/reviewer-response.png _site/assets/
+          touch _site/.nojekyll
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: _site
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -1,23 +1,38 @@
 <div align="center">
 
-# ⚡ GroupX
+<img src="./docs/assets/showcase/groupx-orbit.png" width="280" alt="GroupX broker routing Codex, Grok, Kimi and Hermes CLI agents" />
 
-**把 Codex App Server、Grok ACP、Kimi ACP 和 Hermes ACP 放进同一个本地 Agent 房间。**
+# GroupX
 
-一个 Web UI，统一完成群聊路由、会话恢复、上下文压缩与本地记忆。
+**One room. Every CLI agent.**
 
-![npm](https://img.shields.io/npm/v/@susyimes/groupx?color=3370ff&label=npm)
-![Node](https://img.shields.io/badge/node-24.14.x-3c873a)
+把 Codex、Grok、Kimi 和 Hermes 放进同一个本地 Agent 房间：显式路由、共享时间线、会话恢复、上下文压缩与持久化记忆。
+
+[![npm](https://img.shields.io/npm/v/@susyimes/groupx?color=6f8cff&label=npm)](https://www.npmjs.com/package/@susyimes/groupx)
+[![Pages](https://img.shields.io/badge/GitHub%20Pages-included-48e5c2)](https://susyimes.github.io/GroupX/)
+![Node](https://img.shields.io/badge/Node-24.14%2B-3c873a)
 ![Tests](https://img.shields.io/badge/tests-506%20passing-0d9f6e)
-![Platform](https://img.shields.io/badge/platform-Windows%20%C2%B7%20macOS%20%C2%B7%20Linux-0078d6)
-![Transport](https://img.shields.io/badge/transport-structured-9440c9)
+![Platform](https://img.shields.io/badge/platform-Windows%20%C2%B7%20macOS%20%C2%B7%20Linux-4768d7)
+![Transport](https://img.shields.io/badge/transport-structured-b56cff)
 
-<img src="./docs/assets/groupx-demo.gif" width="100%" alt="GroupX 本机实录：Codex 通过 groupx.ask 调用 Grok 和 Kimi 后汇总结论">
+[在线体验](https://susyimes.github.io/GroupX/) · [快速开始](#快速开始) · [配置](#agent-配置) · [协议](docs/PROTOCOL.md) · [设计决策](docs/DECISIONS.md)
 
-<sub>本机实录：Codex App Server 通过 <code>groupx.ask</code> 调用 Grok ACP 与 Kimi ACP，并在真实 GroupX 房间中汇总结果；仅对本机工作目录做了隐私遮罩。</sub>
+<img src="./docs/assets/showcase/pages-home.png" width="100%" alt="GroupX GitHub Pages 首页" />
 
 </div>
 
+## 真实运行记录
+
+下面三条回复来自 **2026-08-14 的同一次真实 GroupX 运行**：三个独立 Kimi ACP session 分别担任 Architect、Builder 与 Reviewer。图片只裁切公开演示问题和模型最终回复，不包含历史聊天、本机路径或凭据。
+
+<p align="center">
+  <img src="./docs/assets/showcase/architect-response.png" width="100%" alt="Architect 的真实 GroupX 回复" />
+  <img src="./docs/assets/showcase/builder-response.png" width="100%" alt="Builder 的真实 GroupX 回复" />
+  <img src="./docs/assets/showcase/reviewer-response.png" width="100%" alt="Reviewer 的真实 GroupX 回复" />
+</p>
+
+> 角色名是 GroupX 的显示身份；本次公开捕获使用三个独立 Kimi ACP session。截图内容由真实模型回合生成并经 Broker 持久化，不是静态 mock 数据。
+
 ## GroupX 是什么
 
 GroupX 是一个只监听本机 loopback 的多 Agent 群聊 Broker。用户从浏览器发送消息，Broker 把消息显式路由给一个或多个本地 CLI Agent，并把公共对话、Turn 状态、记忆与上下文摘要保存在本地 SQLite。
@@ -84,10 +99,10 @@ GroupX 是一个只监听本机 loopback 的多 Agent 群聊 Broker。用户从
 
 ```bash
 npm i -g @susyimes/groupx
-groupx start
+groupx init
 ```
 
-首次启动会打开 Agent 引导页。添加 Agent、填写工作目录和命令并保存后，页面会进入群聊。默认地址为 [http://127.0.0.1:4310/](http://127.0.0.1:4310/)。
+`groupx init` 会打开 Agent 引导页。添加 Agent、填写工作目录和命令并保存后，页面会进入群聊。默认地址为 [http://127.0.0.1:4310/](http://127.0.0.1:4310/)。
 
 常用命令：
 
@@ -228,3 +243,9 @@ npm run build
 - [Kimi ACP](https://www.kimi.com/code/docs/en/kimi-code-cli/reference/kimi-acp)
 - [Grok CLI](https://docs.x.ai/build/cli/reference)
 - [Hermes ACP](https://github.com/nousresearch/hermes-agent/blob/main/website/docs/user-guide/features/acp.md)
+
+## 参与贡献
+
+欢迎通过 Issue 或 Pull Request 改进 Adapter、协议兼容、Web UI 与文档。提交前请运行 `npm run typecheck && npm test && npm run build`。
+
+> 本仓库当前尚未声明开源许可证；在许可证补充前，请不要假设仓库内容可被任意复制或再分发。

docs/assets/showcase/architect-response.png

@@ -0,0 +1,58 @@
+{
+  "projectName": "GroupX",
+  "root": ".",
+  "type": "local-web",
+  "installCommand": "npm install",
+  "startCommand": null,
+  "baseUrl": "http://127.0.0.1:4311",
+  "outputDir": "docs/assets/showcase",
+  "readme": "README.md",
+  "waitMs": 1200,
+  "timeoutMs": 60000,
+  "disableAnimations": true,
+  "viewports": {
+    "desktop": { "width": 1280, "height": 720 },
+    "mobile": { "width": 390, "height": 844 }
+  },
+  "screenshots": [
+    {
+      "id": "builder-response",
+      "title": "Builder — real model response",
+      "path": "/",
+      "viewport": "desktop",
+      "waitFor": "main.conversation-panel",
+      "waitMs": 1500,
+      "fullPage": false,
+      "selector": "article.event-card.tone-grok:not([data-stream-key])",
+      "steps": []
+    },
+    {
+      "id": "reviewer-response",
+      "title": "Reviewer — real model response",
+      "path": "/",
+      "viewport": "desktop",
+      "waitFor": "main.conversation-panel",
+      "waitMs": 1200,
+      "fullPage": false,
+      "selector": "article.event-card.tone-kimi:not([data-stream-key])",
+      "steps": []
+    },
+    {
+      "id": "architect-response",
+      "title": "Architect — real model response",
+      "path": "/",
+      "viewport": "desktop",
+      "waitFor": "main.conversation-panel",
+      "waitMs": 1200,
+      "fullPage": false,
+      "selector": "article.event-card.tone-codex:not([data-stream-key])",
+      "steps": []
+    }
+  ],
+  "hero": {
+    "file": "real-conversation.png",
+    "title": "Three agents. One room. Real responses.",
+    "subtitle": "A real GroupX run with three independent Kimi ACP sessions acting as Architect, Builder, and Reviewer.",
+    "images": ["builder-response", "reviewer-response", "architect-response"]
+  }
+}

docs/assets/showcase/builder-response.png

@@ -0,0 +1,40 @@
+{
+  "projectName": "GroupX Pages",
+  "root": ".",
+  "type": "static-html",
+  "installCommand": null,
+  "startCommand": null,
+  "baseUrl": "http://127.0.0.1:4178",
+  "outputDir": "docs/assets/showcase",
+  "readme": "README.md",
+  "waitMs": 800,
+  "timeoutMs": 30000,
+  "disableAnimations": true,
+  "viewports": {
+    "desktop": { "width": 1280, "height": 720 }
+  },
+  "screenshots": [
+    {
+      "id": "groupx-orbit",
+      "title": "GroupX broker and CLI agents",
+      "path": "/",
+      "viewport": "desktop",
+      "waitFor": ".orbit",
+      "waitMs": 500,
+      "fullPage": false,
+      "selector": ".orbit",
+      "steps": []
+    },
+    {
+      "id": "pages-home",
+      "title": "GroupX GitHub Pages home",
+      "path": "/",
+      "viewport": "desktop",
+      "waitFor": ".hero",
+      "waitMs": 500,
+      "fullPage": false,
+      "selector": null,
+      "steps": []
+    }
+  ]
+}

docs/assets/showcase/groupx-orbit.png

@@ -0,0 +1,19 @@
+const personas = [...document.querySelectorAll("[data-agent]")];
+const responses = [...document.querySelectorAll("[data-response]")];
+
+for (const persona of personas) {
+  persona.addEventListener("click", () => {
+    const selected = persona.dataset.agent;
+    for (const item of personas) item.classList.toggle("active", item === persona);
+    for (const response of responses) {
+      response.classList.toggle("active", response.dataset.response === selected);
+    }
+  });
+}
+
+document.querySelector("#copy-install")?.addEventListener("click", async (event) => {
+  await navigator.clipboard.writeText("npm i -g @susyimes/groupx");
+  const button = event.currentTarget;
+  button.textContent = "已复制";
+  setTimeout(() => { button.textContent = "复制"; }, 1600);
+});