✨ Add disconnect to MCP plugin

frontend/src/app/main/data/workspace/mcp.cljs

@@ -11,6 +11,7 @@
    [app.config :as cf]
    [app.main.data.plugins :as dp]
    [app.main.repo :as rp]
+   [app.main.store :as st]
    [app.plugins.register :refer [mcp-plugin-id]]
    [beicon.v2.core :as rx]
    [potok.v2.core :as ptk]))
@@ -29,8 +30,12 @@
      "comment:read" "comment:write"
      "content:write" "content:read"}})
 
+(defn finalize-workspace?
+  [event]
+  (= (ptk/type event) :app.main.data.workspace/finalize-workspace))
+
 (defn init-mcp!
-  []
+  [stream]
   (->> (rp/cmd! :get-current-mcp-token)
        (rx/subs!
         (fn [{:keys [token]}]
@@ -48,13 +53,35 @@
                     :setMcpStatus
                     (fn [status]
                       ;; TODO: Visual feedback
-                      (log/info :hint "MCP STATUS" :status status))}}))))))
+                      (log/info :hint "MCP STATUS" :status status))
+
+                    :on
+                    (fn [event cb]
+                      (when-let [event
+                                 (case event
+                                   "disconnect" ::disconnect
+                                   "connect" ::connect
+                                   nil)]
+
+                        (let [stopper (rx/filter finalize-workspace? stream)]
+                          (->> stream
+                               (rx/filter (ptk/type? event))
+                               (rx/take-until stopper)
+                               (rx/subs! #(cb))))))}}))))))
+
+(defn disconnect-mcp
+  []
+  (st/emit! (ptk/data-event ::disconnect)))
+
+(defn connect-mcp
+  []
+  (st/emit! (ptk/data-event ::connect)))
 
 (defn init-mcp-connexion
   []
   (ptk/reify ::init-mcp-connexion
     ptk/EffectEvent
-    (effect [_ state _]
+    (effect [_ state stream]
       (when (and (contains? cf/flags :mcp)
                  (-> state :profile :props :mcp-status))
-        (init-mcp!)))))
+        (init-mcp! stream)))))

mcp/packages/plugin/src/index.d.ts

@@ -2,6 +2,7 @@ interface McpOptions {
     getToken(): string;
     getServerUrl(): string;
     setMcpStatus(status: string);
+    on(eventType: "disconnect" | "connect", cb: () => void);
 }
 
 declare global {

mcp/packages/plugin/src/main.ts

@@ -118,6 +118,9 @@ document.querySelector("[data-handler='connect-mcp']")?.addEventListener("click"
 window.addEventListener("message", (event) => {
     if (event.data.type === "start-server") {
         connectToMcpServer(event.data.url, event.data.token);
+    }
+    if (event.data.type === "stop-server") {
+        ws?.close();
     } else if (event.data.source === "penpot") {
         document.body.dataset.theme = event.data.theme;
     } else if (event.data.type === "task-response") {

mcp/packages/plugin/src/plugin.ts

@@ -73,6 +73,21 @@ async function handlePluginTaskRequest(request: { id: string; task: string; para
     }
 }
 
+if (mcp) {
+    mcp.on("disconnect", async () => {
+        penpot.ui.sendMessage({
+            type: "stop-server",
+        });
+    });
+    mcp.on("connect", async () => {
+        penpot.ui.sendMessage({
+            type: "start-server",
+            url: mcp?.getServerUrl(),
+            token: mcp?.getToken(),
+        });
+    });
+}
+
 // Handle theme change in the iframe
 penpot.on("themechange", (theme) => {
     penpot.ui.sendMessage({