@cloudgrid-io/mcp 0.3.4 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudgrid-io/mcp",
-  "version": "0.3.4",
+  "version": "0.4.1",
   "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) ──────────────────────────────────────────
@@ -134,6 +150,15 @@ function looksLikeFullHtml(s) {
 }
 
 async function runDrop(ctx, { html, path: filePath, filename, anonymous, org, fresh }) {
+  // Defensive: the web edition schema excludes `path`, but if a model still
+  // passes one (e.g. from a cached tool description), reject early with a
+  // clear explanation.
+  if (ctx.edition === "web" && filePath) {
+    throw new Error(
+      "The hosted server cannot read local files — pass the full document as `html` instead of a `path`.",
+    );
+  }
+
   let bytes;
   let name;
   let type;
@@ -440,24 +465,64 @@ 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.
-  server.registerTool(
-    "cloudgrid_drop",
-    {
-      description: "Publish an HTML page or file to CloudGrid and get a public shareable URL. Use when the user wants to share, publish, send, or 'deploy' an artifact, or wants a link to send a friend. Re-drops in the same session update the existing drop in place — same link, new version; pass fresh: true to force a new one. If signed in, it publishes into the user's org as an owned inspiration (30-day expiry); if not, it drops anonymously (7-day expiry, claimable later). Calls the API directly.",
-      inputSchema: {
+  // Drop — both editions, but the input schema is edition-aware: the web
+  // edition removes `path` (the cloud server cannot read local files) and
+  // strengthens `html` so the model always pastes the full document inline.
+  const dropInputSchema = ctx.edition === "web"
+    ? {
+        html: z.string().optional().describe(
+          "The COMPLETE HTML document to publish — paste the full file contents here (not a path). " +
+          "For a game, include all HTML/CSS/JS inline so it runs standalone. " +
+          "A fragment is wrapped into a full document automatically.",
+        ),
+        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("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().describe("Force a new drop even if you already dropped in this session (default: update in place)."),
+      }
+    : {
         html: z.string().optional().describe("Inline HTML to publish. A fragment is wrapped into a full document."),
         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("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()
-          .describe("Force a new drop even if you already dropped in this session (default: update in place)."),
-      },
+        fresh: z.boolean().optional().describe("Force a new drop even if you already dropped in this session (default: update in place)."),
+      };
+
+  server.registerTool(
+    "cloudgrid_drop",
+    {
+      description: "Publish an HTML page or file to CloudGrid and get a public shareable URL. Use when the user wants to share, publish, send, or 'deploy' an artifact, or wants a link to send a friend. Re-drops in the same session update the existing drop in place — same link, new version; pass fresh: true to force a new one. If signed in, it publishes into the user's org as an owned inspiration (30-day expiry); if not, it drops anonymously (7-day expiry, claimable later). Calls the API directly.",
+      inputSchema: dropInputSchema,
       outputSchema: {
         url: z.string().optional().describe("The public URL of the drop."),
         status: z.enum(["created", "updated", "unchanged"]).optional().describe("What happened to the drop."),
@@ -479,9 +544,24 @@ 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 {
+        // Web edition: reject `path` early — the hosted server cannot read
+        // local files. The schema already omits it, but a model with a
+        // cached tool description might still send one.
+        if (ctx.edition === "web" && input?.path) {
+          return fail(
+            "The hosted server cannot read local files — pass the full document as `html` instead of a `path`.",
+          );
+        }
+
         // Web edition: sign-in guidance when unauthenticated.
         if (ctx.edition === "web" && input?.anonymous !== true) {
           const token = await ctx.getToken();
@@ -492,26 +572,37 @@ export function registerTools(server, ctx) {
               structured: { needs_sign_in: true, login_url: url },
             });
           }
-          // 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.
+          // Org disambiguation with per-session pick gate: the first drop
+          // always shows the picker when >1 org (even if the model guessed an
+          // org). The flag ctx.state.awaitingOrgPick gates: only after the
+          // picker was shown and the re-call supplies a valid slug do we honor
+          // it. This prevents the model from silently guessing and skipping
+          // the user's choice.
           {
             const orgs = await fetchUserOrgs(token);
-            const suppliedOrg = input?.org;
-            const validOrg = suppliedOrg && orgs.some((o) => o.slug === suppliedOrg);
-            if (!validOrg) {
-              if (orgs.length > 1) {
+            if (orgs.length > 1) {
+              const suppliedOrg = input?.org;
+              const validOrg = suppliedOrg && orgs.some((o) => o.slug === suppliedOrg);
+              if (ctx.state.awaitingOrgPick && validOrg) {
+                // The picker was shown previously and the user (or widget)
+                // picked a valid org — honor it, clear the flag, and publish.
+                ctx.state.awaitingOrgPick = false;
+                input = { ...(input || {}), org: suppliedOrg };
+              } else {
+                // First drop (any model-guessed org is ignored) or the
+                // re-call supplied an invalid slug — show the picker.
+                ctx.state.awaitingOrgPick = true;
                 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 };
-              }
+            } else if (orgs.length === 1) {
+              input = { ...(input || {}), org: orgs[0].slug };
             }
           }
         }

package/src/web.js

@@ -55,7 +55,7 @@ function makeWebContext(sessionId) {
   let sessionToken = null;
   return {
     edition: "web",
-    state: { pendingLoginCode: null, lastAnonClaim: null, lastDrop: null, anonCookie: null },
+    state: { pendingLoginCode: null, lastAnonClaim: null, lastDrop: null, anonCookie: null, awaitingOrgPick: false },
     canOpenBrowser: false,
     // Transport OAuth wins; the in-tool login flow is the fallback.
     getToken: async () => sessionAuth[sessionId] ?? sessionToken,

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,93 @@
+<!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.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>