with-figma 0.1.6 → 0.2.0

package/bin/with-figma.js

@@ -24,9 +24,6 @@ if (command === "init") {
   mcpJson.servers["with-figma"] = {
     command: "npx",
     args: ["-y", "with-figma", "serve"],
-    env: {
-      OPENAI_API_KEY: "${env:OPENAI_API_KEY}",
-    },
   };
   fs.writeFileSync(mcpJsonPath, JSON.stringify(mcpJson, null, 2) + "\n");
   console.log("✓ .vscode/mcp.json updated");
@@ -44,9 +41,6 @@ if (command === "init") {
   claudeJson.mcpServers["with-figma"] = {
     command: "npx",
     args: ["-y", "with-figma", "serve"],
-    env: {
-      OPENAI_API_KEY: "${env:OPENAI_API_KEY}",
-    },
   };
   fs.writeFileSync(claudePath, JSON.stringify(claudeJson, null, 2) + "\n");
   console.log("✓ .claude/settings.json updated");

package/figma-plugin/ui.html

@@ -13,9 +13,8 @@
       height: 100vh;
     }
 
-    /* ─── Header ─── */
     .header {
-      padding: 12px 16px;
+      padding: 10px 16px;
       border-bottom: 1px solid var(--figma-color-border, #e5e5e5);
       display: flex;
       align-items: center;
@@ -25,13 +24,14 @@
       width: 8px; height: 8px;
       border-radius: 50%;
       background: #ccc;
+      flex-shrink: 0;
     }
     .status-dot.connected { background: #18a957; }
     .status-dot.connecting { background: #f5a623; animation: pulse 1s infinite; }
     @keyframes pulse { 50% { opacity: 0.5; } }
-    .header-title { font-weight: 600; flex: 1; }
+    .header-title { font-weight: 600; flex: 1; font-size: 13px; }
+    .header-status { font-size: 11px; color: var(--figma-color-text-secondary, #999); }
 
-    /* ─── Selection Info ─── */
     .selection-bar {
       padding: 8px 16px;
       background: var(--figma-color-bg-secondary, #f5f5f5);
@@ -44,96 +44,69 @@
       color: var(--figma-color-text, #333);
     }
 
-    /* ─── Chat Area ─── */
-    .chat-area {
+    /* Activity Log */
+    .log-area {
       flex: 1;
       overflow-y: auto;
-      padding: 16px;
+      padding: 12px 16px;
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 6px;
     }
-    .message {
-      max-width: 85%;
-      padding: 10px 14px;
-      border-radius: 12px;
+    .log-entry {
+      display: flex;
+      gap: 8px;
+      align-items: flex-start;
+      font-size: 12px;
       line-height: 1.5;
-      word-break: break-word;
-    }
-    .message.user {
-      align-self: flex-end;
-      background: #0d99ff;
-      color: #fff;
-      border-bottom-right-radius: 4px;
-    }
-    .message.assistant {
-      align-self: flex-start;
-      background: var(--figma-color-bg-secondary, #f0f0f0);
-      border-bottom-left-radius: 4px;
+      padding: 4px 0;
     }
-    .message.system {
-      align-self: center;
+    .log-entry .log-time {
+      color: var(--figma-color-text-tertiary, #aaa);
       font-size: 11px;
-      color: var(--figma-color-text-tertiary, #999);
-      background: none;
-      padding: 4px;
+      flex-shrink: 0;
+      font-variant-numeric: tabular-nums;
     }
-
-    /* ─── Input Area ─── */
-    .input-area {
-      padding: 12px 16px;
-      border-top: 1px solid var(--figma-color-border, #e5e5e5);
-      display: flex;
-      gap: 8px;
+    .log-entry .log-icon {
+      flex-shrink: 0;
+      width: 16px;
+      text-align: center;
     }
-    .input-area textarea {
-      flex: 1;
-      border: 1px solid var(--figma-color-border, #ddd);
-      border-radius: 8px;
-      padding: 8px 12px;
-      font-size: 13px;
-      font-family: inherit;
-      resize: none;
-      outline: none;
-      background: var(--figma-color-bg, #fff);
+    .log-entry .log-text {
       color: var(--figma-color-text, #333);
-      min-height: 40px;
-      max-height: 120px;
+      word-break: break-word;
     }
-    .input-area textarea:focus { border-color: #0d99ff; }
-    .input-area button {
-      background: #0d99ff;
-      color: #fff;
-      border: none;
-      border-radius: 8px;
-      padding: 8px 16px;
-      font-size: 13px;
-      font-weight: 600;
-      cursor: pointer;
-      align-self: flex-end;
+    .log-entry.status .log-text { color: var(--figma-color-text-secondary, #888); }
+    .log-entry.action .log-text { color: #0d99ff; }
+    .log-entry.success .log-text { color: #18a957; }
+    .log-entry.error .log-text { color: #f24822; }
+
+    .empty-state {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--figma-color-text-tertiary, #aaa);
+      font-size: 12px;
+      text-align: center;
+      padding: 40px;
+      line-height: 1.6;
     }
-    .input-area button:hover { background: #0b85e0; }
-    .input-area button:disabled { opacity: 0.5; cursor: not-allowed; }
   </style>
 </head>
 <body>
   <div class="header">
     <div class="status-dot" id="statusDot"></div>
-    <span class="header-title">With Figma AI</span>
-    <span id="statusText" style="font-size:11px; color:#999">Disconnected</span>
-  </div>
-
-  <div class="selection-bar" id="selectionBar">
-    No selection
+    <span class="header-title">With Figma</span>
+    <span class="header-status" id="statusText">Disconnected</span>
   </div>
 
-  <div class="chat-area" id="chatArea">
-    <div class="message system">Select an element and describe what you want to do.</div>
-  </div>
+  <div class="selection-bar" id="selectionBar">No selection</div>
 
-  <div class="input-area">
-    <textarea id="input" placeholder="이 요소를 어떻게 작업할까요?" rows="1"></textarea>
-    <button id="sendBtn" disabled>Send</button>
+  <div class="log-area" id="logArea">
+    <div class="empty-state" id="emptyState">
+      Select elements in Figma,<br>then tell your AI agent in VS Code<br>what to do with them.
+    </div>
   </div>
 
   <script>
@@ -144,9 +117,8 @@
     let currentPage = null;
     let reconnectTimer = null;
 
-    const chatArea = document.getElementById("chatArea");
-    const input = document.getElementById("input");
-    const sendBtn = document.getElementById("sendBtn");
+    const logArea = document.getElementById("logArea");
+    const emptyState = document.getElementById("emptyState");
     const statusDot = document.getElementById("statusDot");
     const statusText = document.getElementById("statusText");
     const selectionBar = document.getElementById("selectionBar");
@@ -156,19 +128,13 @@
     function connect() {
       if (ws && ws.readyState <= 1) return;
       setStatus("connecting");
-
       ws = new WebSocket(WS_URL);
 
       ws.onopen = () => {
         setStatus("connected");
-        addMessage("system", "Connected to AI server.");
-        // Send current selection state
+        addLog("status", "Connected to MCP server");
         if (currentSelection.length > 0) {
-          ws.send(JSON.stringify({
-            type: "selection-update",
-            nodes: currentSelection,
-            page: currentPage,
-          }));
+          ws.send(JSON.stringify({ type: "selection-update", nodes: currentSelection, page: currentPage }));
         }
       };
 
@@ -176,9 +142,7 @@
         try {
           const msg = JSON.parse(event.data);
           handleServerMessage(msg);
-        } catch (e) {
-          console.error("Failed to parse message:", e);
-        }
+        } catch (e) {}
       };
 
       ws.onclose = () => {
@@ -186,9 +150,7 @@
         scheduleReconnect();
       };
 
-      ws.onerror = () => {
-        ws.close();
-      };
+      ws.onerror = () => ws.close();
     }
 
     function scheduleReconnect() {
@@ -199,28 +161,23 @@
     function setStatus(state) {
       statusDot.className = "status-dot " + (state === "connected" ? "connected" : state === "connecting" ? "connecting" : "");
       statusText.textContent = state === "connected" ? "Connected" : state === "connecting" ? "Connecting..." : "Disconnected";
-      sendBtn.disabled = state !== "connected";
     }
 
-    // ─── Server message handling ──────────────────────────────────
+    // ─── Server messages ──────────────────────────────────────────
 
     function handleServerMessage(msg) {
       switch (msg.type) {
-        case "chat-response":
-          addMessage("assistant", msg.text);
+        case "activity":
+          addLog(msg.level || "status", msg.text);
           break;
-
         case "figma-command":
-          // Relay command to Figma plugin sandbox
           parent.postMessage({ pluginMessage: msg.command }, "*");
           break;
-
         case "request-selection":
           parent.postMessage({ pluginMessage: { type: "get-selection" } }, "*");
           break;
-
         case "status":
-          addMessage("system", msg.text);
+          addLog("status", msg.text);
           break;
       }
     }
@@ -236,13 +193,8 @@
           currentSelection = msg.nodes;
           currentPage = msg.page;
           updateSelectionUI();
-          // Forward to server
           if (ws && ws.readyState === WebSocket.OPEN) {
-            ws.send(JSON.stringify({
-              type: "selection-update",
-              nodes: msg.nodes,
-              page: msg.page,
-            }));
+            ws.send(JSON.stringify({ type: "selection-update", nodes: msg.nodes, page: msg.page }));
           }
           break;
 
@@ -252,7 +204,6 @@
           }
           break;
 
-        // Forward all result messages to server
         case "node-data":
         case "node-created":
         case "node-modified":
@@ -265,57 +216,46 @@
       }
     };
 
-    // ─── UI Helpers ───────────────────────────────────────────────
+    // ─── UI ───────────────────────────────────────────────────────
 
     function updateSelectionUI() {
       if (currentSelection.length === 0) {
         selectionBar.innerHTML = "No selection";
       } else if (currentSelection.length === 1) {
         const n = currentSelection[0];
-        selectionBar.innerHTML = `<span class="node-name">${n.name}</span> (${n.type}) — ${Math.round(n.width)}×${Math.round(n.height)}`;
+        selectionBar.innerHTML = '<span class="node-name">' + esc(n.name) + '</span> (' + n.type + ') — ' + Math.round(n.width) + '×' + Math.round(n.height);
       } else {
-        selectionBar.innerHTML = `<span class="node-name">${currentSelection.length} elements</span> selected`;
+        selectionBar.innerHTML = '<span class="node-name">' + currentSelection.length + ' elements</span> selected';
       }
     }
 
-    function addMessage(role, text) {
-      const div = document.createElement("div");
-      div.className = "message " + role;
-      div.textContent = text;
-      chatArea.appendChild(div);
-      chatArea.scrollTop = chatArea.scrollHeight;
-    }
+    const ICONS = { status: "○", action: "▶", success: "✓", error: "✗" };
+
+    function addLog(level, text) {
+      if (emptyState) emptyState.remove();
+      const entry = document.createElement("div");
+      entry.className = "log-entry " + level;
 
-    // ─── User Input ───────────────────────────────────────────────
-
-    function sendMessage() {
-      const text = input.value.trim();
-      if (!text || !ws || ws.readyState !== WebSocket.OPEN) return;
-
-      addMessage("user", text);
-      ws.send(JSON.stringify({
-        type: "chat-message",
-        text,
-        selection: currentSelection,
-        page: currentPage,
-      }));
-      input.value = "";
-      input.style.height = "auto";
+      const now = new Date();
+      const time = now.getHours().toString().padStart(2, "0") + ":" +
+                   now.getMinutes().toString().padStart(2, "0") + ":" +
+                   now.getSeconds().toString().padStart(2, "0");
+
+      entry.innerHTML =
+        '<span class="log-time">' + time + '</span>' +
+        '<span class="log-icon">' + (ICONS[level] || "○") + '</span>' +
+        '<span class="log-text">' + esc(text) + '</span>';
+
+      logArea.appendChild(entry);
+      logArea.scrollTop = logArea.scrollHeight;
     }
 
-    sendBtn.addEventListener("click", sendMessage);
-    input.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        sendMessage();
-      }
-    });
-    input.addEventListener("input", () => {
-      input.style.height = "auto";
-      input.style.height = Math.min(input.scrollHeight, 120) + "px";
-    });
+    function esc(s) {
+      const d = document.createElement("div");
+      d.textContent = s;
+      return d.innerHTML;
+    }
 
-    // Start connection
     connect();
   </script>
 </body>

package/mcp-server/dist/index.js

@@ -30114,238 +30114,27 @@ var StdioServerTransport = class {
 
 // mcp-server/index.ts
 var import_ws = require("ws");
-
-// mcp-server/agent.ts
-var import_openai = __toESM(require("openai"));
-var TOOLS = [
-  {
-    type: "function",
-    function: {
-      name: "create_frame",
-      description: "Create a new frame (artboard)",
-      parameters: {
-        type: "object",
-        properties: {
-          name: { type: "string" },
-          width: { type: "number", default: 375 },
-          height: { type: "number", default: 812 },
-          x: { type: "number", default: 0 },
-          y: { type: "number", default: 0 }
-        },
-        required: ["name"]
-      }
-    }
-  },
-  {
-    type: "function",
-    function: {
-      name: "create_rectangle",
-      description: "Create a rectangle, optionally inside a parent frame",
-      parameters: {
-        type: "object",
-        properties: {
-          name: { type: "string" },
-          width: { type: "number" },
-          height: { type: "number" },
-          x: { type: "number", default: 0 },
-          y: { type: "number", default: 0 },
-          parentId: { type: "string" },
-          cornerRadius: { type: "number" },
-          fillColor: {
-            type: "object",
-            properties: { r: { type: "number" }, g: { type: "number" }, b: { type: "number" }, a: { type: "number" } }
-          }
-        },
-        required: ["width", "height"]
-      }
-    }
-  },
-  {
-    type: "function",
-    function: {
-      name: "create_text",
-      description: "Create a text element",
-      parameters: {
-        type: "object",
-        properties: {
-          characters: { type: "string" },
-          name: { type: "string" },
-          fontSize: { type: "number", default: 16 },
-          x: { type: "number", default: 0 },
-          y: { type: "number", default: 0 },
-          parentId: { type: "string" },
-          fillColor: {
-            type: "object",
-            properties: { r: { type: "number" }, g: { type: "number" }, b: { type: "number" }, a: { type: "number" } }
-          }
-        },
-        required: ["characters"]
-      }
-    }
-  },
-  {
-    type: "function",
-    function: {
-      name: "modify_node",
-      description: "Modify properties of an existing node",
-      parameters: {
-        type: "object",
-        properties: {
-          nodeId: { type: "string" },
-          properties: { type: "object" }
-        },
-        required: ["nodeId", "properties"]
-      }
-    }
-  },
-  {
-    type: "function",
-    function: {
-      name: "delete_node",
-      description: "Delete a node",
-      parameters: {
-        type: "object",
-        properties: { nodeId: { type: "string" } },
-        required: ["nodeId"]
-      }
-    }
-  },
-  {
-    type: "function",
-    function: {
-      name: "get_node",
-      description: "Get detailed info about a node by ID",
-      parameters: {
-        type: "object",
-        properties: { nodeId: { type: "string" } },
-        required: ["nodeId"]
-      }
-    }
-  }
-];
-async function executeTool(name, args, deps) {
-  try {
-    switch (name) {
-      case "create_frame": {
-        const r = await deps.sendToFigma({ type: "create-frame", ...args });
-        return JSON.stringify(r.node);
-      }
-      case "create_rectangle": {
-        const cmd = { type: "create-rectangle", ...args };
-        if (args.fillColor) {
-          cmd.fills = [{ type: "SOLID", color: args.fillColor }];
-          delete cmd.fillColor;
-        }
-        const r = await deps.sendToFigma(cmd);
-        return JSON.stringify(r.node);
-      }
-      case "create_text": {
-        const cmd = { type: "create-text", ...args };
-        if (args.fillColor) {
-          cmd.fills = [{ type: "SOLID", color: args.fillColor }];
-          delete cmd.fillColor;
-        }
-        const r = await deps.sendToFigma(cmd);
-        return JSON.stringify(r.node);
-      }
-      case "modify_node": {
-        const r = await deps.sendToFigma({ type: "modify-node", nodeId: args.nodeId, properties: args.properties });
-        return JSON.stringify(r.node);
-      }
-      case "delete_node": {
-        const r = await deps.sendToFigma({ type: "delete-node", nodeId: args.nodeId });
-        return `Deleted: ${r.nodeId}`;
-      }
-      case "get_node": {
-        const r = await deps.sendToFigma({ type: "get-node", nodeId: args.nodeId });
-        return JSON.stringify(r.node);
-      }
-      default:
-        return `Unknown tool: ${name}`;
-    }
-  } catch (err) {
-    return `Error: ${err.message}`;
-  }
-}
-var SYSTEM_PROMPT = `You are a Figma design agent. You receive messages from a user via a Figma plugin chat.
-You directly manipulate their Figma document using the provided tools.
-
-Guidelines:
-- When creating wireframes: use a Frame as container, Rectangles for sections/buttons/cards, Text for labels
-- Mobile wireframe: 375\xD7812, Desktop: 1440\xD7900
-- Wireframe fills: light gray (r:0.95,g:0.95,b:0.95), text: dark (r:0.2,g:0.2,b:0.2)
-- Respond in the same language as the user
-- Keep responses short \u2014 the chat panel is small
-- When the user has selected elements, use their IDs to modify/inspect them`;
-var conversationHistory = [
-  { role: "system", content: SYSTEM_PROMPT }
-];
-async function handleChatMessage(text, selection, page, deps) {
-  const apiKey = process.env.OPENAI_API_KEY;
-  if (!apiKey) {
-    deps.sendChat("OPENAI_API_KEY \uD658\uACBD\uBCC0\uC218\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4.");
-    return;
-  }
-  const openai = new import_openai.default({ apiKey });
-  let userContent = text;
-  if (selection.length > 0) {
-    userContent += `
-
-[Selected elements: ${JSON.stringify(selection)}]`;
-  }
-  if (page) {
-    userContent += `
-[Page: ${page.name}]`;
-  }
-  conversationHistory.push({ role: "user", content: userContent });
-  deps.sendChat("\uC791\uC5C5 \uC911...");
-  try {
-    for (let i = 0; i < 20; i++) {
-      const response = await openai.chat.completions.create({
-        model: process.env.OPENAI_MODEL || "gpt-4o",
-        messages: conversationHistory,
-        tools: TOOLS,
-        tool_choice: "auto"
-      });
-      const msg = response.choices[0].message;
-      conversationHistory.push(msg);
-      if (msg.tool_calls && msg.tool_calls.length > 0) {
-        for (const tc of msg.tool_calls) {
-          const args = JSON.parse(tc.function.arguments);
-          console.error(`[agent] ${tc.function.name}(${JSON.stringify(args)})`);
-          const result = await executeTool(tc.function.name, args, deps);
-          conversationHistory.push({ role: "tool", tool_call_id: tc.id, content: result });
-        }
-        continue;
-      }
-      if (msg.content) {
-        deps.sendChat(msg.content);
-      }
-      break;
-    }
-  } catch (err) {
-    console.error("[agent] Error:", err.message);
-    deps.sendChat(`Error: ${err.message}`);
-  }
-}
-
-// mcp-server/index.ts
 var figmaSocket = null;
 var currentSelection = [];
 var currentPage = null;
 var pages = [];
 var pendingRequests = /* @__PURE__ */ new Map();
 var requestCounter = 0;
-var chatQueue = [];
 function genRequestId() {
   return `req_${++requestCounter}_${Date.now()}`;
 }
+function sendActivity(text, level = "status") {
+  if (figmaSocket && figmaSocket.readyState === import_ws.WebSocket.OPEN) {
+    figmaSocket.send(JSON.stringify({ type: "activity", text, level }));
+  }
+  console.error(`[with-figma] [${level}] ${text}`);
+}
 var wss = new import_ws.WebSocketServer({ port: 3055 });
 console.error("[with-figma] WebSocket server listening on ws://127.0.0.1:3055");
 wss.on("connection", (socket) => {
   console.error("[with-figma] Figma plugin connected");
   figmaSocket = socket;
-  socket.send(JSON.stringify({ type: "status", text: "MCP server connected. Ready for commands." }));
+  sendActivity("MCP server connected. Waiting for agent commands.");
   socket.on("message", (raw) => {
     try {
       const msg = JSON.parse(raw.toString());
@@ -30368,24 +30157,6 @@ function handleFigmaMessage(msg) {
     case "pages-list":
       pages = msg.pages || [];
       break;
-    case "chat-message":
-      currentSelection = msg.selection || currentSelection;
-      currentPage = msg.page || currentPage;
-      console.error(`[with-figma] Chat: "${msg.text}"`);
-      handleChatMessage(
-        msg.text,
-        msg.selection || currentSelection,
-        msg.page || currentPage,
-        {
-          sendToFigma,
-          sendChat: (text) => {
-            if (figmaSocket && figmaSocket.readyState === import_ws.WebSocket.OPEN) {
-              figmaSocket.send(JSON.stringify({ type: "chat-response", text }));
-            }
-          }
-        }
-      );
-      break;
     // Results from Figma plugin operations
     case "node-data":
     case "node-created":
@@ -30422,7 +30193,7 @@ function sendToFigma(command, timeoutMs = 1e4) {
 }
 var server = new McpServer({
   name: "with-figma",
-  version: "0.1.0"
+  version: "0.2.0"
 });
 server.resource("selection", "figma://selection", async (uri) => ({
   contents: [
@@ -30446,24 +30217,25 @@ server.tool(
   "get_selection",
   "Get the currently selected elements in Figma. Returns node details including type, size, position, and properties.",
   {},
-  async () => ({
-    content: [
-      {
-        type: "text",
-        text: currentSelection.length > 0 ? JSON.stringify({ page: currentPage, nodes: currentSelection }, null, 2) : "No elements are currently selected in Figma."
-      }
-    ]
-  })
+  async () => {
+    sendActivity("Inspecting current selection...", "action");
+    const result = currentSelection.length > 0 ? JSON.stringify({ page: currentPage, nodes: currentSelection }, null, 2) : "No elements are currently selected in Figma.";
+    sendActivity(
+      currentSelection.length > 0 ? `Found ${currentSelection.length} selected element(s)` : "No elements selected",
+      currentSelection.length > 0 ? "success" : "status"
+    );
+    return { content: [{ type: "text", text: result }] };
+  }
 );
 server.tool(
   "get_node",
   "Get detailed information about a specific Figma node by ID.",
   { nodeId: external_exports3.string().describe("The Figma node ID") },
   async ({ nodeId }) => {
+    sendActivity(`Inspecting node ${nodeId}...`, "action");
     const result = await sendToFigma({ type: "get-node", nodeId });
-    return {
-      content: [{ type: "text", text: JSON.stringify(result.node, null, 2) }]
-    };
+    sendActivity(`Inspected: ${result.node?.name || nodeId}`, "success");
+    return { content: [{ type: "text", text: JSON.stringify(result.node, null, 2) }] };
   }
 );
 server.tool(
@@ -30477,10 +30249,10 @@ server.tool(
     y: external_exports3.number().default(0).describe("Y position")
   },
   async (params) => {
+    sendActivity(`Creating frame "${params.name}" (${params.width}\xD7${params.height})...`, "action");
     const result = await sendToFigma({ type: "create-frame", ...params });
-    return {
-      content: [{ type: "text", text: `Frame created: ${JSON.stringify(result.node, null, 2)}` }]
-    };
+    sendActivity(`Created frame "${params.name}"`, "success");
+    return { content: [{ type: "text", text: `Frame created: ${JSON.stringify(result.node, null, 2)}` }] };
   }
 );
 server.tool(
@@ -30497,15 +30269,15 @@ server.tool(
     fillColor: external_exports3.object({ r: external_exports3.number(), g: external_exports3.number(), b: external_exports3.number(), a: external_exports3.number().default(1) }).optional().describe("Fill color (RGBA 0-1)")
   },
   async (params) => {
+    sendActivity(`Creating rectangle "${params.name}" (${params.width}\xD7${params.height})...`, "action");
     const command = { type: "create-rectangle", ...params };
     if (params.fillColor) {
       command.fills = [{ type: "SOLID", color: params.fillColor }];
       delete command.fillColor;
     }
     const result = await sendToFigma(command);
-    return {
-      content: [{ type: "text", text: `Rectangle created: ${JSON.stringify(result.node, null, 2)}` }]
-    };
+    sendActivity(`Created rectangle "${params.name}"`, "success");
+    return { content: [{ type: "text", text: `Rectangle created: ${JSON.stringify(result.node, null, 2)}` }] };
   }
 );
 server.tool(
@@ -30521,15 +30293,15 @@ server.tool(
     fillColor: external_exports3.object({ r: external_exports3.number(), g: external_exports3.number(), b: external_exports3.number(), a: external_exports3.number().default(1) }).optional().describe("Text color (RGBA 0-1)")
   },
   async (params) => {
+    sendActivity(`Creating text "${params.characters.slice(0, 30)}${params.characters.length > 30 ? "..." : ""}"...`, "action");
     const command = { type: "create-text", ...params };
     if (params.fillColor) {
       command.fills = [{ type: "SOLID", color: params.fillColor }];
       delete command.fillColor;
     }
     const result = await sendToFigma(command);
-    return {
-      content: [{ type: "text", text: `Text created: ${JSON.stringify(result.node, null, 2)}` }]
-    };
+    sendActivity(`Created text "${params.name}"`, "success");
+    return { content: [{ type: "text", text: `Text created: ${JSON.stringify(result.node, null, 2)}` }] };
   }
 );
 server.tool(
@@ -30540,10 +30312,11 @@ server.tool(
     properties: external_exports3.record(external_exports3.unknown()).describe("Object of properties to set (e.g. { x: 10, name: 'New Name', visible: false })")
   },
   async ({ nodeId, properties }) => {
+    const propKeys = Object.keys(properties).join(", ");
+    sendActivity(`Modifying node ${nodeId} (${propKeys})...`, "action");
     const result = await sendToFigma({ type: "modify-node", nodeId, properties });
-    return {
-      content: [{ type: "text", text: `Node modified: ${JSON.stringify(result.node, null, 2)}` }]
-    };
+    sendActivity(`Modified: ${result.node?.name || nodeId}`, "success");
+    return { content: [{ type: "text", text: `Node modified: ${JSON.stringify(result.node, null, 2)}` }] };
   }
 );
 server.tool(
@@ -30551,10 +30324,10 @@ server.tool(
   "Delete a node from the Figma document.",
   { nodeId: external_exports3.string().describe("The node ID to delete") },
   async ({ nodeId }) => {
+    sendActivity(`Deleting node ${nodeId}...`, "action");
     const result = await sendToFigma({ type: "delete-node", nodeId });
-    return {
-      content: [{ type: "text", text: `Deleted node: ${result.nodeId}` }]
-    };
+    sendActivity(`Deleted node ${result.nodeId}`, "success");
+    return { content: [{ type: "text", text: `Deleted node: ${result.nodeId}` }] };
   }
 );
 server.tool(
@@ -30566,7 +30339,9 @@ server.tool(
     scale: external_exports3.number().default(2).describe("Export scale factor")
   },
   async ({ nodeId, format, scale }) => {
+    sendActivity(`Exporting node ${nodeId} as ${format}...`, "action");
     const result = await sendToFigma({ type: "export-node", nodeId, format, scale });
+    sendActivity(`Exported as ${format}`, "success");
     if (format === "SVG") {
       const text = new TextDecoder().decode(new Uint8Array(result.data));
       return { content: [{ type: "text", text }] };
@@ -30584,37 +30359,15 @@ server.tool(
   }
 );
 server.tool(
-  "get_chat_messages",
-  "Get pending chat messages from the Figma plugin. Users send design requests via the Figma chat UI. Call this tool to check for new messages, then use other Figma tools to fulfill the requests. After processing, the queue is cleared.",
-  {},
-  async () => {
-    if (chatQueue.length === 0) {
-      return {
-        content: [{ type: "text", text: "No pending messages from Figma." }]
-      };
-    }
-    const messages = [...chatQueue];
-    chatQueue.length = 0;
-    return {
-      content: [
-        {
-          type: "text",
-          text: JSON.stringify(messages, null, 2)
-        }
-      ]
-    };
-  }
-);
-server.tool(
-  "send_chat_message",
-  "Send a message back to the Figma plugin chat UI to communicate with the user.",
-  { text: external_exports3.string().describe("Message text to display in chat") },
-  async ({ text }) => {
-    if (figmaSocket && figmaSocket.readyState === import_ws.WebSocket.OPEN) {
-      figmaSocket.send(JSON.stringify({ type: "chat-response", text }));
-      return { content: [{ type: "text", text: `Message sent to Figma chat: "${text}"` }] };
-    }
-    return { content: [{ type: "text", text: "Error: Figma plugin is not connected" }] };
+  "send_activity",
+  "Send an activity/status message to the Figma plugin log panel.",
+  {
+    text: external_exports3.string().describe("Activity message to display"),
+    level: external_exports3.enum(["status", "action", "success", "error"]).default("status").describe("Log level")
+  },
+  async ({ text, level }) => {
+    sendActivity(text, level);
+    return { content: [{ type: "text", text: `Activity logged: "${text}"` }] };
   }
 );
 async function main() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "with-figma",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "MCP server that connects AI agents to Figma via WebSocket",
   "license": "MIT",
   "bin": {
@@ -15,12 +15,11 @@
   ],
   "scripts": {
     "build:plugin": "esbuild figma-plugin/code.ts --bundle --outfile=figma-plugin/dist/code.js --target=es2020",
-    "build:server": "esbuild mcp-server/index.ts --bundle --outfile=mcp-server/dist/index.js --platform=node --target=node18 --format=cjs --external:ws --external:openai",
+    "build:server": "esbuild mcp-server/index.ts --bundle --outfile=mcp-server/dist/index.js --platform=node --target=node18 --format=cjs --external:ws",
     "build": "npm run build:plugin && npm run build:server",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "openai": "^6.34.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {