@cloudgrid-io/mcp 0.3.3 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/mcp",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "MCP server for CloudGrid. Two editions: a local stdio server (full toolset) and a hosted web server (light, CLI-free toolset) over MCP Streamable HTTP.",
   "type": "module",
   "bin": {

package/src/tools.js

@@ -11,6 +11,7 @@
 import { execFile } from "node:child_process";
 import { promisify } from "node:util";
 import { readFile } from "node:fs/promises";
+import { readFileSync } from "node:fs";
 import { basename } from "node:path";
 import { z } from "zod";
 import { newLoginCode, buildLoginUrl, pollStatusOnce, decodeJwt } from "./auth.js";
@@ -24,6 +25,17 @@ export const API_BASE = (process.env.CLOUDGRID_API_URL || "https://api.cloudgrid
 
 const ANON_HTML_MAX_BYTES = 2_000_000;
 const CONSOLE_URL = "https://console.cloudgrid.io/";
+
+// ── Widget resources (ChatGPT Apps SDK, web edition only) ────────────────────
+const LIVE_RESULT_URI = "ui://cloudgrid/live-result.html";
+const ORG_PICKER_URI = "ui://cloudgrid/org-picker.html";
+const LIVE_RESULT_HTML = readFileSync(new URL("./widgets/live-result.html", import.meta.url), "utf-8");
+const ORG_PICKER_HTML = readFileSync(new URL("./widgets/org-picker.html", import.meta.url), "utf-8");
+const WIDGET_CSP = {
+  connectDomains: ["https://*.cloudgrid.io"],
+  resourceDomains: ["https://*.cloudgrid.io"],
+};
+
 const VISIBILITY_LABELS = {
   private: "Only you",
   org: "Your org",
@@ -38,8 +50,12 @@ function ok(text) {
 function fail(text) {
   return { content: [{ type: "text", text }], isError: true };
 }
-function okResult({ text, structured }) {
-  return { content: [{ type: "text", text }], structuredContent: structured };
+function okResult({ text, structured, meta }) {
+  return {
+    content: [{ type: "text", text }],
+    structuredContent: structured,
+    ...(meta ? { _meta: meta } : {}),
+  };
 }
 
 // ── CLI wrapping (local edition only) ──────────────────────────────────────────
@@ -107,6 +123,26 @@ async function fetchUserOrgs(token) {
   }
 }
 
+// After an authenticated web drop, upgrade visibility to "link" so the artifact
+// is shareable and its preview renders without a sign-in wall. Best-effort — a
+// failure here does not fail the drop; the user can always call cloudgrid_visibility.
+async function upgradeVisibilityToLink(ctx, entityId, orgSlug) {
+  const token = await ctx.getToken();
+  if (!token || !entityId) return false;
+  try {
+    const hdrs = { Authorization: `Bearer ${token}`, "Content-Type": "application/json" };
+    if (orgSlug) hdrs["X-CloudGrid-Org"] = orgSlug;
+    const res = await fetch(`${API_BASE}/api/v2/inspirations/${encodeURIComponent(entityId)}`, {
+      method: "PATCH",
+      headers: hdrs,
+      body: JSON.stringify({ visibility: "link" }),
+    });
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
 // ── Direct-API tools (both editions) ───────────────────────────────────────────
 function looksLikeFullHtml(s) {
   const head = s.replace(/^/, "").trimStart().slice(0, 256).toLowerCase();
@@ -240,9 +276,14 @@ async function runDrop(ctx, { html, path: filePath, filename, anonymous, org, fr
       ...(data.expires_at ? { expires_at: data.expires_at } : {}),
     };
     if (ctx.edition === "web") {
+      // Default authed web drops to "link" visibility so the URL is shareable
+      // and the console thumbnail renders without a sign-in wall.
+      if (data.visibility !== "link" && data.entity_id) {
+        await upgradeVisibilityToLink(ctx, data.entity_id, orgSlug);
+      }
       lines.push(`See and manage all your apps in your grid: ${CONSOLE_URL}`);
-      const vis = data.visibility || "link";
-      lines.push(`Visible to: ${VISIBILITY_LABELS[vis] || vis}. Want to change who can see it? I can set it to only you, your org, or anyone with the link.`);
+      const vis = "link";
+      lines.push(`Visible to: ${VISIBILITY_LABELS[vis]}. Want to restrict access? I can set it to only you or your org.`);
       structured.console_url = CONSOLE_URL;
       structured.current_visibility = vis;
       structured.visibility_options = Object.entries(VISIBILITY_LABELS).map(([v, l]) => ({ value: v, label: l }));
@@ -263,9 +304,13 @@ async function runDrop(ctx, { html, path: filePath, filename, anonymous, org, fr
       ...(data.expires_at ? { expires_at: data.expires_at } : {}),
     };
     if (ctx.edition === "web") {
+      // Default authed web drops to "link" visibility (same as above).
+      if (data.visibility !== "link" && data.entity_id) {
+        await upgradeVisibilityToLink(ctx, data.entity_id, orgSlug);
+      }
       lines.push(`See and manage all your apps in your grid: ${CONSOLE_URL}`);
-      const vis = data.visibility || "link";
-      lines.push(`Visible to: ${VISIBILITY_LABELS[vis] || vis}. Want to change who can see it? I can set it to only you, your org, or anyone with the link.`);
+      const vis = "link";
+      lines.push(`Visible to: ${VISIBILITY_LABELS[vis]}. Want to restrict access? I can set it to only you or your org.`);
       structured.console_url = CONSOLE_URL;
       structured.current_visibility = vis;
       structured.visibility_options = Object.entries(VISIBILITY_LABELS).map(([v, l]) => ({ value: v, label: l }));
@@ -411,6 +456,33 @@ async function runVisibility(ctx, { target, visibility, org }) {
 // Registers the tools onto `server`. ctx.edition decides whether the CLI-wrapping
 // tools are included (they need a local machine).
 export function registerTools(server, ctx) {
+  // ── Widget resources (web edition, ChatGPT Apps SDK) ──────────────────────
+  if (ctx.edition === "web") {
+    server.registerResource("cloudgrid-live-result", LIVE_RESULT_URI, {
+      description: "Live result card after a CloudGrid drop — shows URL, grid link, and visibility controls.",
+      mimeType: "text/html;profile=mcp-app",
+    }, async () => ({
+      contents: [{
+        uri: LIVE_RESULT_URI,
+        mimeType: "text/html;profile=mcp-app",
+        text: LIVE_RESULT_HTML,
+        _meta: { ui: { csp: WIDGET_CSP } },
+      }],
+    }));
+
+    server.registerResource("cloudgrid-org-picker", ORG_PICKER_URI, {
+      description: "Org picker card — lets the user choose which organization to publish into.",
+      mimeType: "text/html;profile=mcp-app",
+    }, async () => ({
+      contents: [{
+        uri: ORG_PICKER_URI,
+        mimeType: "text/html;profile=mcp-app",
+        text: ORG_PICKER_HTML,
+        _meta: { ui: { csp: WIDGET_CSP } },
+      }],
+    }));
+  }
+
   // ── Direct-API tools (both editions) ──────────────────────────────────────
 
   // Drop — both editions.
@@ -423,7 +495,7 @@ export function registerTools(server, ctx) {
         path: z.string().optional().describe("Path to a local file to upload instead of inline HTML."),
         filename: z.string().optional().describe("Filename to present. Defaults to index.html for inline HTML."),
         anonymous: z.boolean().optional().describe("Force an anonymous drop even if the user is signed in."),
-        org: z.string().optional().describe("Org slug to publish into when signed in. Defaults to the active org."),
+        org: z.string().optional().describe("Leave unset; the tool will ask the user which org to publish into. Only set this after the user picks from the list the tool returns."),
         fresh: z
           .boolean()
           .optional()
@@ -450,6 +522,12 @@ export function registerTools(server, ctx) {
         login_url: z.string().optional().describe("Sign-in URL when authentication is needed."),
       },
       annotations: { readOnlyHint: false, destructiveHint: false, openWorldHint: true },
+      ...(ctx.edition === "web" ? {
+        _meta: {
+          ui: { resourceUri: LIVE_RESULT_URI, csp: WIDGET_CSP },
+          "openai/outputTemplate": LIVE_RESULT_URI,
+        },
+      } : {}),
     },
     async (input) => {
       try {
@@ -463,20 +541,27 @@ export function registerTools(server, ctx) {
               structured: { needs_sign_in: true, login_url: url },
             });
           }
-          // Org disambiguation: if signed in, no org arg, list the user's orgs.
-          if (!input?.org) {
+          // Org disambiguation: always validate the org against the user's real
+          // orgs. If the LLM guessed an org slug that doesn't match, ignore it
+          // and ask — this is why the >1-org ask didn't fire in the first test.
+          {
             const orgs = await fetchUserOrgs(token);
-            if (orgs.length > 1) {
-              const lines = ["Which org should this be published to?"];
-              for (const o of orgs) lines.push(`  ${o.slug} — ${o.name} (${o.role})`);
-              lines.push("Pass the org slug in the org parameter to publish.");
-              return okResult({
-                text: lines.join("\n"),
-                structured: { needs_org: true, orgs },
-              });
-            }
-            if (orgs.length === 1) {
-              input = { ...(input || {}), org: orgs[0].slug };
+            const suppliedOrg = input?.org;
+            const validOrg = suppliedOrg && orgs.some((o) => o.slug === suppliedOrg);
+            if (!validOrg) {
+              if (orgs.length > 1) {
+                const lines = ["Which org should this be published to?"];
+                for (const o of orgs) lines.push(`  ${o.slug} — ${o.name} (${o.role})`);
+                lines.push("Pass the org slug in the org parameter to publish.");
+                return okResult({
+                  text: lines.join("\n"),
+                  structured: { needs_org: true, orgs },
+                  meta: { "openai/outputTemplate": ORG_PICKER_URI },
+                });
+              }
+              if (orgs.length === 1) {
+                input = { ...(input || {}), org: orgs[0].slug };
+              }
             }
           }
         }

package/src/widgets/live-result.html

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#1a1a2e;color:#e0e0e0;padding:16px}
+.card{background:#16213e;border-radius:12px;padding:20px;border:1px solid rgba(138,107,255,.2)}
+.title{font-size:14px;font-weight:600;color:#fff;margin-bottom:12px}
+.url{font-size:13px;color:#4dd0ff;word-break:break-all;margin-bottom:16px}
+.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
+.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:500;border:none;cursor:pointer;transition:opacity .15s}
+.btn:hover{opacity:.85}
+.btn-primary{background:linear-gradient(135deg,#8a6bff,#4dd0ff);color:#fff}
+.btn-secondary{background:rgba(138,107,255,.15);color:#a78bfa;border:1px solid rgba(138,107,255,.3)}
+.vis-section{margin-top:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px}
+.vis-label{font-size:12px;color:#9ca3af;margin-bottom:8px}
+.vis-pills{display:flex;gap:6px;flex-wrap:wrap}
+.vis-pill{padding:6px 12px;border-radius:6px;font-size:12px;border:1px solid rgba(138,107,255,.3);background:transparent;color:#d1d5db;cursor:pointer;transition:all .15s}
+.vis-pill:hover{border-color:#8a6bff;color:#fff}
+.vis-pill.active{background:rgba(138,107,255,.25);border-color:#8a6bff;color:#fff}
+.vis-pill.updating{opacity:.6;pointer-events:none}
+.status{font-size:12px;color:#9ca3af;margin-top:8px}
+.sign-in{text-align:center;padding:20px 0}
+.sign-in p{margin-bottom:12px;color:#9ca3af;font-size:13px}
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(function () {
+  var root = document.getElementById("root");
+
+  function esc(s) {
+    var d = document.createElement("div");
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  function render(data) {
+    if (!data) { root.innerHTML = ""; return; }
+
+    if (data.needs_sign_in) {
+      root.innerHTML =
+        '<div class="card sign-in">' +
+          '<p>Sign in to publish to your org</p>' +
+          '<button class="btn btn-primary" id="sign-in-btn">Sign in with Google</button>' +
+        '</div>';
+      var signInBtn = document.getElementById("sign-in-btn");
+      if (signInBtn) {
+        signInBtn.addEventListener("click", function () {
+          if (data.login_url && window.openai && window.openai.openExternal) {
+            window.openai.openExternal({ href: data.login_url, redirectUrl: false });
+          }
+        });
+      }
+      return;
+    }
+
+    if (!data.url) {
+      root.innerHTML = '<div class="card"><div class="title">Done</div></div>';
+      return;
+    }
+
+    var label =
+      data.status === "created" ? "Published" :
+      data.status === "updated" ? "Updated" :
+      data.status === "unchanged" ? "Already live" : "Live";
+
+    var html =
+      '<div class="card">' +
+        '<div class="title">' + esc(label) + '</div>' +
+        '<div class="url">' + esc(data.url) + '</div>' +
+        '<div class="buttons">' +
+          '<button class="btn btn-primary" id="open-btn">Open</button>';
+
+    if (data.console_url) {
+      html += '<button class="btn btn-secondary" id="grid-btn">Open in your grid</button>';
+    }
+    html += '</div>';
+
+    if (data.visibility_options && data.current_visibility) {
+      html +=
+        '<div class="vis-section">' +
+          '<div class="vis-label">Visible to</div>' +
+          '<div class="vis-pills">';
+      for (var i = 0; i < data.visibility_options.length; i++) {
+        var opt = data.visibility_options[i];
+        var cls = opt.value === data.current_visibility ? " active" : "";
+        html += '<button class="vis-pill' + cls + '" data-vis="' + esc(opt.value) + '">' + esc(opt.label) + '</button>';
+      }
+      html += '</div><div class="status" id="vis-status"></div></div>';
+    }
+
+    html += '</div>';
+    root.innerHTML = html;
+
+    var openBtn = document.getElementById("open-btn");
+    if (openBtn) {
+      openBtn.addEventListener("click", function () {
+        if (window.openai && window.openai.openExternal) {
+          window.openai.openExternal({ href: data.url, redirectUrl: false });
+        }
+      });
+    }
+    var gridBtn = document.getElementById("grid-btn");
+    if (gridBtn) {
+      gridBtn.addEventListener("click", function () {
+        if (window.openai && window.openai.openExternal) {
+          window.openai.openExternal({ href: data.console_url, redirectUrl: false });
+        }
+      });
+    }
+
+    var pills = document.querySelectorAll(".vis-pill");
+    for (var j = 0; j < pills.length; j++) {
+      (function (pill) {
+        pill.addEventListener("click", function () {
+          var vis = pill.getAttribute("data-vis");
+          if (vis === data.current_visibility) return;
+          var all = document.querySelectorAll(".vis-pill");
+          for (var k = 0; k < all.length; k++) all[k].classList.add("updating");
+          var statusEl = document.getElementById("vis-status");
+          if (statusEl) statusEl.textContent = "Updating\u2026";
+          if (!window.openai || !window.openai.callTool) return;
+          window.openai.callTool("cloudgrid_visibility", { visibility: vis }).then(function (res) {
+            var newVis = res && res.structuredContent && res.structuredContent.visibility;
+            if (newVis) {
+              data.current_visibility = newVis;
+              for (var m = 0; m < all.length; m++) {
+                all[m].classList.remove("updating", "active");
+                if (all[m].getAttribute("data-vis") === newVis) all[m].classList.add("active");
+              }
+              if (statusEl) statusEl.textContent = "";
+            }
+          }).catch(function () {
+            for (var m = 0; m < all.length; m++) all[m].classList.remove("updating");
+            if (statusEl) statusEl.textContent = "Failed to update visibility";
+          });
+        });
+      })(pills[j]);
+    }
+  }
+
+  var data = window.openai && window.openai.toolOutput;
+  if (data) render(data);
+  window.addEventListener("message", function (e) {
+    if (e.data && e.data.method === "ui/notifications/tool-result" &&
+        e.data.params && e.data.params.structuredContent) {
+      render(e.data.params.structuredContent);
+    }
+  });
+})();
+</script>
+</body>
+</html>

package/src/widgets/org-picker.html

@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#1a1a2e;color:#e0e0e0;padding:16px}
+.card{background:#16213e;border-radius:12px;padding:20px;border:1px solid rgba(138,107,255,.2)}
+.title{font-size:14px;font-weight:600;color:#fff;margin-bottom:4px}
+.subtitle{font-size:12px;color:#9ca3af;margin-bottom:16px}
+.orgs{display:flex;flex-direction:column;gap:8px}
+.org-btn{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:8px;border:1px solid rgba(138,107,255,.3);background:transparent;color:#e0e0e0;cursor:pointer;transition:all .15s;font-size:13px;text-align:left}
+.org-btn:hover{border-color:#8a6bff;background:rgba(138,107,255,.1)}
+.org-btn.loading{opacity:.6;pointer-events:none}
+.org-name{font-weight:500;color:#fff}
+.org-role{font-size:11px;color:#9ca3af}
+.status{font-size:12px;color:#9ca3af;margin-top:12px}
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(function () {
+  var root = document.getElementById("root");
+
+  function esc(s) {
+    var d = document.createElement("div");
+    d.textContent = s;
+    return d.innerHTML;
+  }
+
+  function render(data) {
+    if (!data || !data.orgs || data.orgs.length === 0) {
+      root.innerHTML = '<div class="card"><div class="title">No organizations found</div></div>';
+      return;
+    }
+
+    var html =
+      '<div class="card">' +
+        '<div class="title">Choose an organization</div>' +
+        '<div class="subtitle">Which org should this be published to?</div>' +
+        '<div class="orgs">';
+    for (var i = 0; i < data.orgs.length; i++) {
+      var org = data.orgs[i];
+      html +=
+        '<button class="org-btn" data-slug="' + esc(org.slug) + '">' +
+          '<span class="org-name">' + esc(org.name) + '</span>' +
+          '<span class="org-role">' + esc(org.role) + '</span>' +
+        '</button>';
+    }
+    html += '</div><div class="status" id="status"></div></div>';
+    root.innerHTML = html;
+
+    var buttons = document.querySelectorAll(".org-btn");
+    for (var j = 0; j < buttons.length; j++) {
+      (function (btn) {
+        btn.addEventListener("click", function () {
+          var slug = btn.getAttribute("data-slug");
+          var all = document.querySelectorAll(".org-btn");
+          for (var k = 0; k < all.length; k++) all[k].classList.add("loading");
+          var statusEl = document.getElementById("status");
+          if (statusEl) statusEl.textContent = "Publishing\u2026";
+          if (!window.openai || !window.openai.callTool) return;
+          var input = (window.openai && window.openai.toolInput) || {};
+          var args = {};
+          if (input.html) args.html = input.html;
+          if (input.path) args.path = input.path;
+          if (input.filename) args.filename = input.filename;
+          if (input.fresh !== undefined) args.fresh = input.fresh;
+          args.org = slug;
+          window.openai.callTool("cloudgrid_drop", args).then(function () {
+            // The host will render the new result with the live-result card.
+          }).catch(function () {
+            for (var m = 0; m < all.length; m++) all[m].classList.remove("loading");
+            if (statusEl) statusEl.textContent = "Failed to publish";
+          });
+        });
+      })(buttons[j]);
+    }
+  }
+
+  var data = window.openai && window.openai.toolOutput;
+  if (data) render(data);
+  window.addEventListener("message", function (e) {
+    if (e.data && e.data.method === "ui/notifications/tool-result" &&
+        e.data.params && e.data.params.structuredContent) {
+      render(e.data.params.structuredContent);
+    }
+  });
+})();
+</script>
+</body>
+</html>