penink-web-wch — Penink Web Preview 工作台
============================================
版本：1.0.0 ｜ 授權：MIT ｜ 狀態：開源


■ 這是什麼？

Penink Web Preview 是一個「給 AI Agent 用的即時網站預覽工作台」。
把網站的 HTML / CSS / JS 原始碼推送進來，左邊立即以手機、平板、
筆電、桌機等裝置邊匡預覽，右邊是可直接編輯的程式碼面板，雙向同步。

整個工具「沒有預設假設」：它是被動的 receiver，等外部『驅動者』送上檔案。

■ 為什麼需要它？

AI Agent（如 opencode）在生成網站時，往往「看得到結果」與「改得動程式碼」
兩者分離。Penink Web Preview 同時解決兩件事：

  • 即時回饋：Agent 每生成一個檔案，預覽馬上更新，不用手動重新整理。
  • 雙向編輯：使用者可以直接改右邊的程式碼，Agent 也能繼續接手修改，
              形成「人 × AI 協作」的閉環。

■ 核心功能

  • 裝置邊匡預覽：手機、平板、筆電、桌機，一鍵切換，可自由調整尺寸。
  • 可編輯代碼面板：Monaco Editor，真實的 HTML/CSS/JS 高亮與補全。
  • 多種接線方式：MCP（Model Context Protocol）、REST API、WebSocket、
                  本地檔案監聽，四種方式都能把檔案送進預覽。
  • AI Agent 整合：已提供 opencode / Claude Desktop / Cursor 一鍵註冊。
  • 一鍵啟動：macOS 雙擊「啟動工作台.command」即可，自動裝依賴、建置、
              註冊 Agent、開瀏覽器。

■ 技術棧

  • 前端：React 18 + TypeScript + Vite + Monaco Editor
  • 後端：Node.js + Express + tsx
  • 通訊：@modelcontextprotocol/sdk（Streamable HTTP）、ws、chokidar

■ 使用方式（三個步驟）

  1. 雙擊「啟動工作台.command」  → 自動開啟 http://localhost:8787
  2. 啟動你的 AI Agent（如 opencode），/mcp 確認 website-preview 已連線
  3. 對 Agent 說：用 website-preview 推送 index.html、style.css、app.js 給我

  過程中有進度立刻 update_file，左邊預覽即時更新。

■ 給開發者的 API

  • MCP Server： http://localhost:8787/mcp
      工具：set_project_files（整包推送）、update_file（單檔更新）、
            delete_file、clear_project、get_project
  • REST：  GET/POST /api/project、/api/file、/api/status
  • WS：    ws://localhost:8787/ws
  • 檔案監聽：watch 資料夾內的 .html/.css/.js 變動自動反映

■ 更新日誌

  ------------------------------------------------------------------
  v1.0.0（2026-09-18）— 第一個正式版本
  ------------------------------------------------------------------
  • 首次公開版本
  • 裝置邊匡預覽（手機/平板/筆電/桌機，尺寸可調）
  • 可編輯代碼面板（Monaco），Agent 與使用者雙向同步
  • MCP / REST / WebSocket / 檔案監聽四種接線
  • opencode / Claude Desktop / Cursor 一鍵註冊腳本
  • macOS 一鍵啟動包（啟動工作台.command）
  • 自動開啟瀏覽器、掛空畫面「複製生網站提示詞」快速開始
  • 開源釋出（MIT），對應官網 site/

■ 專案位置

  • 官網：https://penink-web-wch.pages.dev/
  • 原始碼：penink-web-wch/（本目錄）
  • 官網原始碼：site/（純靜態，可直接部署到 Cloudflare Pages）
  • 部署：將 site/ 上傳至 Cloudflare Pages 即可