前言¶

在 DeepSeek Harness（DSH）裏用 AI 改 HTML，右側側邊欄的瀏覽器標籤頁往往只負責「顯示結果」。頁面從空白到有內容的過程，對用戶和協作者來說都是瞬間完成的，缺少一種「正在施工」的可視反饋。Swarm Rebuild（倉庫名 Multi-agent-development-dynamic-effect，npm 包名 dsh-swarm-rebuild）是維護者 lanyuxi 提供的 Cordis 插件，把工作區里正在被 AI 編輯的那一頁，在預覽裏用 8–48 個協作式光標從藍圖狀態一塊一塊搭回去，搭完退場，不污染磁盤上的源碼。下面介紹它解決什麼問題、怎麼裝、以及運行時要滿足的前提。

這是什麼¶

Swarm Rebuild 是一個由主機側（index.js）、客戶端側（client.js）和注入頁面的 runtime（runtime.js）組成的 DSH 插件。它不是單獨的演示站：跑的就是 AI 當前在工作區裏寫的那份 HTML。動效只在 AI 修改、新增或刪除頁面內容後重播一次，不會無限循環。

分類上可歸入「工作流」——把「開發中的頁面」和「側邊欄 live 預覽」接在一起，用動效提示「這一版頁面剛被 AI 動過」。

核心功能與效果¶

經過上面的定位，可以把可見能力歸納爲以下幾點（均來自項目 README 對效果的描述）：

1. 藍圖開場：頁面整體淡成藍圖；頂部和左側出現帶刻度的深色標尺；站點圖標停在畫面正中；約 18 個光標繞圖標遊動一圈後散開，各自認領頁面上的一個塊。
2. 塊級搭建：十字光標拖出 1px 藍色選框，塊隨選框生長；選框下浮出如 240 × 96 的尺寸徽章；標尺高亮對應區間；藍色虛線參考線、紅色測量參考線會吸附並閃爍。
3. 文本與編輯：文本塊切換爲 I 形光標，逐字打出真實文字（含詞間與隨機「思考」停頓）；鋼筆線、複製與換樣式等編輯動作也會出現；完成的塊轉爲實心並露出真實顏色。
4. 併發與收尾：同時約有 8–48 個光標在工作，頁面越複雜併發越高。最後一塊完成後，光標聚合成羣繞一圈後飛出，藍圖淡出，只留下乾淨成品——無疊加層、無標尺。同一預覽 URL 在外部瀏覽器打開也會呈現相同效果。
5. 自動重播：主機提供覆蓋被監視 web 資源的版本指紋（/__version）；頁面內 runtime 輪詢指紋，AI 編輯後會自動再播一遍。

runtime 爲零依賴實現：不使用 chrome.* API，無音頻；通過克隆 DOM 做快照，而非截圖。動效引擎設計來自 DhvanilPatel 的 swarm-cursors，本倉庫將其接入 DSH，並增加內存預覽注入、側邊欄自動打開與參考線合成等接線。

工作原理（簡要）¶

先做路由，再做客戶端與 runtime 的配合：

• 內存預覽路由：主機在 Harness 的 web server（ctx.webServer）上註冊前綴 /__dsh_swarm_rebuild__，服務工作區文件；對 HTML 僅在內存注入指向 runtime.js 的 <script>，不寫盤，避免污染源碼或破壞 AI 的文件版本守衛。
• 版本與端口：/__version 供 runtime 輪詢；/__endpoint 返回 loopback 上另一端口的同一預覽地址，供內置瀏覽器標籤頁避開 GUI 同端口限制。
• 客戶端：每個會話默認在右側側邊欄瀏覽器標籤頁打開預覽（帶成功閂鎖，避免重複開 tab）；並通過 /__endpoint 解析端口，把主機內置的 format-1 市場索引註冊進 pluginMarket.setIndexes()。
• 可選根目錄：環境變量 SWARM_REBUILD_ROOT 可指定預覽網頁所在目錄；默認取已安裝插件目錄的上一級（工作區根）。

package.json 聲明版本 3.2.0，許可證 MIT。

安裝與啓用¶

這是一個本地 / git 插件，尚未發佈到 npm。需要把倉庫放進 DSH 工作區，再從該目錄安裝 bundle。官方 README 給出的步驟如下：

git clone https://github.com/lanyuxi/Multi-agent-development-dynamic-effect.git
# 也可以直接把已克隆的倉庫複製進工作區

# 從倉庫目錄安裝 bundle（或在 DSH 插件界面裏選擇同樣的目錄）
plugin_manager install_bundle /absolute/path/to/Multi-agent-development-dynamic-effect

裝好後插件默認啓用。打開任意 AI 會話後，右側側邊欄瀏覽器標籤頁會自動打開預覽；AI 寫入 HTML 後，動效在預覽中播放。

驗證是否生效：側邊欄能看到頁面，或「正在等待 AI 生成網頁…」的等待頁，說明主機側路由已起來；讓 AI 寫一個 HTML 文件，頁面應自動刷新並開始搭建。

環境要求：需要暴露了 web server 服務（ctx.webServer）和側邊欄瀏覽器標籤頁的 Harness 構建。預覽須允許 JavaScript；禁用 JS 時只能看到靜態頁，看不到動效。

裝好後插件也會出現在 Plugins → Discover（主機路由 /__dsh_swarm_rebuild__/market/index.json）；官方社區目錄 PR 尚未提交，他人還無法在社區目錄站內搜到該插件（見倉庫 docs/PUBLISH.md）。

典型用法¶

典型流程不需要額外配置文件：

1. 在工作區安裝 bundle 後保持插件啓用（默認即啓用）。
2. 在 DSH 中開啓 AI 會話，確認右側側邊欄預覽 tab 已打開。
3. 讓 AI 在工作區內創建或修改 HTML（及關聯的 CSS、JS、圖片等被監視資源）。
4. 觀察預覽：首次有 HTML 後開始搭建動效；之後每次 AI 改動資源，待版本指紋輪詢（約數秒）後自動重播。

若只希望預覽某一目錄下的站點，可在啓動 Harness 前設置：

export SWARM_REBUILD_ROOT=/absolute/path/to/your/web/root

未設置時預覽根目錄爲插件安裝目錄的上一級。

適用場景與注意¶

適合誰：在 DSH 裏頻繁讓 AI 搭落地頁、組件 demo 或靜態站原型，且已使用「側邊欄瀏覽器預覽」工作流的人；動效能向旁觀者直觀展示「這一頁剛被改過」，而不必單獨錄屏或開設計工具。

運行與安全：插件以當前 DSH 進程權限運行，會在本機 web server 上註冊路由並在預覽 HTML 中注入腳本。安裝前應閱讀倉庫源碼與 MIT 許可證，確認符合你的安全與合規要求。主機僅對工作區（或 SWARM_REBUILD_ROOT 指定目錄）內的文件做服務與指紋計算，不改變磁盤上的 HTML 內容。

常見問題（摘自文檔）：

• 側邊欄長期顯示「正在等待 AI 生成網頁…」：工作區尚無 HTML，等 AI 寫出第一個頁面即可。
• 端口已停止 / 加載失敗：預覽端口變化時，重新打開預覽或重啓 Harness；客戶端會重新請求 /__endpoint。
• 改了頁面沒重播：稍等指紋輪詢；確認改的是被監視的 web 資源。
• 完全看不到動效：檢查預覽是否允許 JavaScript。

結尾¶

Swarm Rebuild 把「AI 正在寫的那個文件」和「羣蜂式多光標搭建動效」綁在 Harness 側邊欄預覽上：內存注入、版本指紋自動重播、不寫盤。若你在 DSH 裏做前端智能體開發，又希望每一次 AI 改頁都有可見的「施工」反饋，可以按 README 用 plugin_manager install_bundle 從本地倉庫安裝。

• 社區目錄頁：https://www.skillhub.cn/plugins/lanyuxi/Multi-agent-development-dynamic-effect
• 源碼與說明：https://github.com/lanyuxi/Multi-agent-development-dynamic-effect