batter-pixso-mcp 0.1.0

package/dist/plugin/ui.html

@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    /* 贴近 Figma/Pixso 原生插件：白底、Inter 11px、细边框圆角控件、语义色状态 */
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font: 11px/1.5 Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
+      background: #ffffff;
+      color: #1e1e1e;
+      padding: 8px 12px;
+      overflow: hidden;
+      user-select: none;
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      white-space: nowrap;
+    }
+    .row + .row {
+      margin-top: 4px;
+    }
+    .grow {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    /* 连接状态行 */
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #b3b3b3;
+      flex-shrink: 0;
+      animation: pulse 1.6s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.35; }
+    }
+    .dot.ok {
+      background: #14ae5c;
+      animation: none;
+    }
+    .dot.err {
+      background: #f24822;
+      animation: none;
+    }
+    #conn {
+      font-weight: 500;
+      color: #1e1e1e;
+    }
+    /* 端口输入 + 重连：Figma 风格次控件 */
+    #port {
+      width: 42px;
+      padding: 1px 4px;
+      font: inherit;
+      color: #1e1e1e;
+      background: #ffffff;
+      border: 1px solid #e6e6e6;
+      border-radius: 5px;
+      text-align: center;
+    }
+    #port:hover { border-color: #b3b3b3; }
+    #port:focus {
+      outline: none;
+      border-color: #0d99ff;
+      box-shadow: 0 0 0 1px #0d99ff;
+    }
+    #retry {
+      padding: 1px 10px;
+      font: inherit;
+      font-weight: 500;
+      color: #1e1e1e;
+      background: #ffffff;
+      border: 1px solid #e6e6e6;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    #retry:hover {
+      background: #f5f5f5;
+      border-color: #b3b3b3;
+    }
+    #retry:active { background: #ebebeb; }
+    /* 执行状态行：次级灰，忙碌时蓝色呼吸 */
+    #exec {
+      color: #7b7b7b;
+    }
+    #exec::before {
+      content: "▸ ";
+      color: #b3b3b3;
+    }
+    #exec.busy {
+      color: #0d99ff;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    #exec.busy::before { color: #0d99ff; }
+    #exec.ok { color: #14ae5c; }
+    #exec.ok::before { color: #14ae5c; }
+    #exec.err { color: #f24822; }
+    #exec.err::before { color: #f24822; }
+  </style>
+</head>
+<body>
+  <div class="row">
+    <span class="dot" id="dot"></span>
+    <span id="conn" class="grow">连接中…</span>
+    <input id="port" inputmode="numeric" spellcheck="false" title="服务端口" />
+    <button id="retry" type="button">重连</button>
+  </div>
+  <div class="row"><span id="exec" class="grow">空闲</span></div>
+  <script>
+"use strict";
+(() => {
+  // src/ui.ts
+  var DEFAULT_PORT = "3210";
+  var dotEl = document.getElementById("dot");
+  var connEl = document.getElementById("conn");
+  var execEl = document.getElementById("exec");
+  var portInput = document.getElementById("port");
+  var retryBtn = document.getElementById("retry");
+  var serverBase = `http://127.0.0.1:${DEFAULT_PORT}`;
+  function setConn(text, cls) {
+    connEl.textContent = text;
+    dotEl.className = `dot${cls ? ` ${cls}` : ""}`;
+  }
+  function setExec(text, cls) {
+    execEl.textContent = text;
+    execEl.className = `grow${cls ? ` ${cls}` : ""}`;
+  }
+  var sessionId = null;
+  var lastContext = null;
+  async function ensureSession() {
+    if (sessionId) return sessionId;
+    const res = await fetch(`${serverBase}/sessions/register`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(lastContext ?? {})
+    });
+    if (!res.ok) throw new Error(`register failed: HTTP ${res.status}`);
+    const data = await res.json();
+    sessionId = data.sessionId;
+    return sessionId;
+  }
+  function sleep(ms) {
+    const { promise, resolve } = Promise.withResolvers();
+    setTimeout(resolve, ms);
+    return promise;
+  }
+  function report(payload) {
+    lastContext = payload;
+    void (async () => {
+      try {
+        let sid = await ensureSession();
+        let res = await postContext(sid, payload);
+        if (res.status === 404) {
+          sessionId = null;
+          sid = await ensureSession();
+          res = await postContext(sid, payload);
+        }
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        setConn(`\u5DF2\u8FDE\u63A5 \xB7 \u9009\u533A ${payload.selection?.length ?? 0}`, "ok");
+      } catch {
+        setConn("\u540C\u6B65\u5931\u8D25", "err");
+      }
+    })();
+  }
+  function postContext(sid, payload) {
+    return fetch(`${serverBase}/context?session=${sid}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload)
+    });
+  }
+  function checkHealth() {
+    fetch(`${serverBase}/health`).then(() => setConn("\u5DF2\u8FDE\u63A5", "ok")).catch(() => setConn("\u8FDE\u63A5\u5931\u8D25", "err"));
+  }
+  var pendingCommands = /* @__PURE__ */ new Map();
+  function toBytes(raw) {
+    return new Uint8Array(raw);
+  }
+  async function uploadAsset(format, bytes) {
+    const res = await fetch(`${serverBase}/assets?format=${format}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/octet-stream" },
+      body: bytes
+    });
+    if (!res.ok) throw new Error(`asset upload failed: HTTP ${res.status}`);
+    const data = await res.json();
+    if (!data.url) throw new Error("asset upload failed: \u54CD\u5E94\u7F3A\u5C11 url \u5B57\u6BB5");
+    return data.url;
+  }
+  async function handleCommand(command) {
+    setExec(`\u6267\u884C\u4E2D ${command.type}`, "busy");
+    const reply = await new Promise((resolve) => {
+      pendingCommands.set(command.id, resolve);
+      parent.postMessage({ pluginMessage: { type: "command", command } }, "*");
+    });
+    if (!reply.ok) {
+      await postResult(command.id, false, reply.error ?? "unknown error");
+      setExec(`\u5931\u8D25 ${command.type}`, "err");
+      return;
+    }
+    let result = reply.result;
+    const assets = [...reply.assets ?? []].sort((a, b) => b.key.length - a.key.length);
+    for (const asset of assets) {
+      const url = await uploadAsset(asset.format, toBytes(asset.bytes));
+      const text = JSON.stringify(result);
+      const quoted = JSON.stringify(asset.key);
+      result = JSON.parse(text.split(quoted).join(JSON.stringify(url)));
+    }
+    await postResult(command.id, true, result);
+    setExec(`\u5B8C\u6210 ${command.type}`, "ok");
+  }
+  async function postResult(id, ok, payload) {
+    const body = ok ? { ok: true, result: payload } : { ok: false, error: String(payload) };
+    await fetch(`${serverBase}/commands/${id}/result`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body)
+    });
+  }
+  var currentES = null;
+  var channelMode = null;
+  async function startChannel() {
+    for (; ; ) {
+      try {
+        const sid = await ensureSession();
+        const es = new EventSource(`${serverBase}/commands/stream?session=${sid}`);
+        currentES = es;
+        channelMode = "sse";
+        es.onmessage = (e) => {
+          const { command } = JSON.parse(e.data);
+          void handleCommand(command);
+        };
+        es.onerror = () => {
+          if (es.readyState === EventSource.CLOSED) {
+            currentES = null;
+            channelMode = "poll";
+            void pollLoop();
+          }
+        };
+        return;
+      } catch {
+        await sleep(2e3);
+      }
+    }
+  }
+  async function pollLoop() {
+    for (; ; ) {
+      try {
+        const sid = await ensureSession();
+        const res = await fetch(`${serverBase}/commands/next?session=${sid}`);
+        if (res.status === 404) {
+          sessionId = null;
+          await sleep(500);
+          continue;
+        }
+        if (res.status === 204) continue;
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const { command } = await res.json();
+        await handleCommand(command);
+      } catch {
+        await sleep(2e3);
+      }
+    }
+  }
+  function reconnect() {
+    const port = portInput.value.trim() || DEFAULT_PORT;
+    serverBase = `http://127.0.0.1:${port}`;
+    sessionId = null;
+    setConn("\u8FDE\u63A5\u4E2D\u2026");
+    if (channelMode === "sse") {
+      currentES?.close();
+      currentES = null;
+      channelMode = null;
+      void startChannel();
+    }
+    checkHealth();
+    parent.postMessage({ pluginMessage: { type: "pull" } }, "*");
+  }
+  retryBtn.addEventListener("click", reconnect);
+  window.onmessage = (event) => {
+    const msg = event.data?.pluginMessage;
+    if (msg?.type === "context") {
+      report(msg.payload);
+      return;
+    }
+    if (msg?.type === "command-result") {
+      const waiter = pendingCommands.get(msg.id);
+      pendingCommands.delete(msg.id);
+      waiter?.(msg);
+    }
+  };
+  portInput.value = DEFAULT_PORT;
+  portInput.addEventListener("change", reconnect);
+  parent.postMessage({ pluginMessage: { type: "pull" } }, "*");
+  checkHealth();
+  void startChannel();
+})();
+</script>
+</body>
+</html>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "batter-pixso-mcp",
+  "version": "0.1.0",
+  "description": "MCP bridge: Pixso plugin -> local MCP server -> Pixso remote MCP",
+  "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
+  "exports": {
+    "./protocol": "./src/protocol.ts"
+  },
+  "bin": {
+    "batter-pixso-mcp": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run typecheck && node build.mjs",
+    "prepack": "node ../../scripts/sync-plugin-dist.mjs",
+    "typecheck": "tsc --noEmit",
+    "dev": "tsx watch src/index.ts",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.17.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "esbuild": "^0.24.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  }
+}