@womp/mcp-ui 0.1.6 → 0.1.8

package/src/upload/main.ts

@@ -0,0 +1,351 @@
+import { $, callTool, createCard, openLink, type GenerationResult } from "../shared/bridge";
+
+/**
+ * The upload card — renders `create_upload` / `get_upload` and lets the user
+ * drop a mesh file straight into the conversation.
+ *
+ * Why it exists: MCP has no client→server file channel, and a chat host's
+ * sandbox usually cannot reach Womp (Claude's egress allowlist is package
+ * managers only), so a file the user already attached to the chat could not
+ * reach the print pipeline without a trip to a womp.com page. This card is that
+ * page, inside the chat. The bytes go from the user's disk to the ticket URL
+ * the backend minted — a raw PUT, the same request the agent's own `curl -T`
+ * would make — and never through the model.
+ *
+ * What it needs from the host: `connectDomains` on the resource's CSP must
+ * include the API origin (swan-backend adds its own origin at registration —
+ * the baked CSP cannot know which environment it will serve), and the backend
+ * answers the PUT with open CORS because the iframe origin is opaque. If either
+ * is missing the PUT fails as a network error, which the card turns into the
+ * "open the upload page instead" fallback rather than a dead end.
+ *
+ * It also polls the app-callable `get_upload` while pending, so a file the
+ * AGENT pushed itself (an agent with a shell does that first) flips this card
+ * to done instead of leaving a drop zone for a file that already landed.
+ */
+
+interface UploadSummary {
+  uploadId: number;
+  status: "pending" | "ready" | "expired";
+  fileName: string;
+  format: string;
+  maxBytes: number;
+  maxMb: number;
+  expiresAt: string;
+  uploadUrl: string;
+  browserUploadUrl: string;
+  fileSize?: number;
+  url?: string;
+  lastError?: string;
+}
+
+type Phase = "connecting" | "pending" | "uploading" | "done" | "expired";
+
+const MB = 1024 * 1024;
+const POLL_START_MS = 5_000;
+const POLL_MAX_MS = 15_000;
+
+const state: {
+  summary?: UploadSummary;
+  phase: Phase;
+  /** The name of the file being sent / that was sent — the drop's, not the ticket's. */
+  fileName?: string;
+  fileSize?: number;
+} = { phase: "connecting" };
+
+let pollTimer: number | undefined;
+
+const setStatus = (text: string, isError = false) => {
+  const el = $("status");
+  el.textContent = text;
+  el.classList.toggle("error", isError);
+};
+
+/** "399 KB" below a megabyte, "1.4 MB" / "150 MB" above — never "0.0 MB". */
+const formatSize = (bytes: number) => {
+  if (bytes < MB) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
+  const mb = bytes / MB;
+  return `${mb >= 10 ? mb.toFixed(0) : mb.toFixed(1)} MB`;
+};
+
+const extensionOf = (name: string) => {
+  const i = name.lastIndexOf(".");
+  return i < 0 || i >= name.length - 1 ? "" : name.slice(i + 1).toLowerCase();
+};
+
+/** "until 14:32" in the viewer's clock, so the link's lifetime is concrete. */
+const untilLabel = (iso: string) => {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  return `until ${d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}`;
+};
+
+// --- rendering -----------------------------------------------------------------
+
+function showOnly(id: "drop" | "progress" | "done" | "expired" | null) {
+  for (const key of ["drop", "progress", "done", "expired"] as const) $(key).hidden = key !== id;
+}
+
+function showError(text: string, withPageFallback = false) {
+  $("error-text").textContent = text;
+  $("error-actions").hidden = !withPageFallback || !state.summary?.browserUploadUrl;
+  $("error").hidden = false;
+}
+
+function clearError() {
+  $("error").hidden = true;
+}
+
+function render() {
+  const s = state.summary;
+  if (!s) {
+    $("title").textContent = state.fileName ? `Send ${state.fileName} to Womp` : "Send your 3D model to Womp";
+    $("sub").textContent = "so it can be quoted and printed";
+    showOnly(null);
+    return;
+  }
+
+  $("title").textContent = `Send ${s.fileName} to Womp`;
+  $("sub").textContent = "so it can be quoted and printed";
+
+  switch (state.phase) {
+    case "pending": {
+      $("drop-text").textContent = `Drop ${s.fileName} here`;
+      const until = untilLabel(s.expiresAt);
+      $("drop-hint").textContent = `Only .${s.format} · up to ${s.maxMb} MB${until ? ` · link valid ${until}` : ""}`;
+      ($("file") as HTMLInputElement).accept = `.${s.format}`;
+      showOnly("drop");
+      break;
+    }
+    case "uploading": {
+      $("progress-name").textContent = `Uploading ${state.fileName || s.fileName}…`;
+      showOnly("progress");
+      break;
+    }
+    case "done": {
+      $("done-name").textContent = state.fileName || s.fileName;
+      const size = state.fileSize ?? s.fileSize;
+      $("done-size").textContent = size ? ` (${formatSize(size)})` : "";
+      $("sub").textContent = "ready to quote";
+      showOnly("done");
+      break;
+    }
+    case "expired": {
+      $("expired-name").textContent = s.fileName;
+      $("sub").textContent = "upload link expired";
+      showOnly("expired");
+      break;
+    }
+    default:
+      showOnly(null);
+  }
+}
+
+function setProgress(fraction: number) {
+  // Holds at 99% until the server answers — see the CSS note.
+  const pct = Math.min(99, Math.round(fraction * 100));
+  $("fill").style.width = `${pct}%`;
+  $("progress-pct").textContent = `${pct}%`;
+}
+
+// --- applying a summary ---------------------------------------------------------
+
+function applySummary(s: UploadSummary) {
+  state.summary = s;
+  if (s.status === "ready") {
+    state.phase = "done";
+    stopPolling();
+  } else if (s.status === "expired") {
+    state.phase = "expired";
+    stopPolling();
+  } else if (state.phase !== "uploading") {
+    state.phase = "pending";
+  }
+  clearError();
+  if (s.status === "pending" && s.lastError && state.phase === "pending") {
+    // A PUT elsewhere (the agent's shell, a previous drop) was refused — say
+    // why, since that attempt's own response is not visible here.
+    showError(`A previous attempt was refused: ${s.lastError}`);
+  }
+  render();
+  setStatus("");
+  if (state.phase === "pending") schedulePoll(POLL_START_MS);
+}
+
+// --- polling get_upload while pending ------------------------------------------
+
+function stopPolling() {
+  if (pollTimer !== undefined) {
+    clearTimeout(pollTimer);
+    pollTimer = undefined;
+  }
+}
+
+function schedulePoll(delay: number) {
+  stopPolling();
+  const s = state.summary;
+  if (!s || state.phase !== "pending") return;
+  // The ticket's own expiry bounds the loop; nothing to learn after it.
+  const expiresAt = new Date(s.expiresAt).getTime();
+  if (Number.isFinite(expiresAt) && Date.now() > expiresAt + 60_000) return;
+
+  pollTimer = window.setTimeout(async () => {
+    if (state.phase !== "pending") return;
+    try {
+      const res = await callTool(card.app, "get_upload", { uploadId: s.uploadId });
+      if (!res.isError && res.structuredContent) {
+        const next = res.structuredContent as unknown as UploadSummary;
+        if (next.status !== "pending" || next.lastError !== s.lastError) {
+          applySummary(next);
+          return;
+        }
+      }
+    } catch {
+      // A failed poll is not a failed upload; the expiry bound stops this.
+    }
+    schedulePoll(Math.min(delay * 1.5, POLL_MAX_MS));
+  }, delay);
+}
+
+// --- the upload itself ------------------------------------------------------------
+
+/** Why this file cannot be sent for this ticket, in words, or null when it can. */
+function localRefusal(file: File, s: UploadSummary): string | null {
+  const ext = extensionOf(file.name);
+  if (ext !== s.format) {
+    return `This upload expects a .${s.format} file (${s.fileName}); "${file.name}" is a .${ext || "?"}. Ask your assistant for a new upload if the format changed.`;
+  }
+  if (file.size > s.maxBytes) {
+    return `"${file.name}" is ${formatSize(file.size)}; this account's limit is ${s.maxMb} MB per file.`;
+  }
+  return null;
+}
+
+function messageFrom(body: string, status: number): string {
+  try {
+    const parsed = JSON.parse(body) as { error?: { message?: string } };
+    if (parsed?.error?.message) return parsed.error.message;
+  } catch {
+    // not JSON — a proxy page or nothing; fall through to the status
+  }
+  return status ? `Upload failed (${status}). Try again.` : "";
+}
+
+function upload(file: File) {
+  const s = state.summary;
+  if (!s || state.phase !== "pending") return;
+  clearError();
+  const refusal = localRefusal(file, s);
+  if (refusal) {
+    showError(refusal);
+    return;
+  }
+
+  stopPolling();
+  state.phase = "uploading";
+  state.fileName = file.name;
+  state.fileSize = file.size;
+  setProgress(0);
+  render();
+  setStatus("");
+
+  const xhr = new XMLHttpRequest();
+  xhr.open("PUT", s.uploadUrl);
+  xhr.setRequestHeader("Content-Type", "application/octet-stream");
+  xhr.upload.onprogress = (e) => {
+    if (e.lengthComputable) setProgress(e.loaded / e.total);
+  };
+  xhr.onload = () => {
+    if (xhr.status >= 200 && xhr.status < 300) {
+      let stored: UploadSummary | undefined;
+      try {
+        stored = JSON.parse(xhr.responseText) as UploadSummary;
+      } catch {
+        // keep what we know; the row is ready either way
+      }
+      applySummary(stored ?? { ...s, status: "ready", fileSize: file.size });
+      return;
+    }
+    if (xhr.status === 409) {
+      // Someone else's upload (the agent's shell, another tab) won. Theirs is the file.
+      applySummary({ ...s, status: "ready" });
+      return;
+    }
+    if (xhr.status === 410) {
+      applySummary({ ...s, status: "expired" });
+      return;
+    }
+    state.phase = "pending";
+    render();
+    showError(messageFrom(xhr.responseText, xhr.status) || `Upload failed (${xhr.status}). Try again.`);
+    schedulePoll(POLL_START_MS);
+  };
+  const networkFailure = () => {
+    // No response at all: the host's sandbox refused the request (CSP or
+    // CORS), or the network dropped. The womp.com page does the same job.
+    state.phase = "pending";
+    render();
+    showError("Could not send the file from inside the chat. The upload page does the same thing in a tab.", true);
+    setStatus("PUT to the upload URL got no response — check connectDomains / CORS if this repeats.", true);
+    schedulePoll(POLL_START_MS);
+  };
+  xhr.onerror = networkFailure;
+  xhr.onabort = networkFailure;
+  xhr.send(file);
+}
+
+// --- wiring ---------------------------------------------------------------------
+
+const card = createCard("Womp upload", {
+  onInput: (args) => {
+    // The host announces the call before any result: name the file straight away.
+    if (typeof args.fileName === "string") state.fileName = args.fileName;
+    render();
+    setStatus("Preparing upload…");
+  },
+  onResult: (raw: GenerationResult) => {
+    const data = raw as unknown as Partial<UploadSummary> & GenerationResult;
+    if (data.status === "running") {
+      render();
+      setStatus("Preparing upload…");
+      return;
+    }
+    if (typeof data.uploadId !== "number" || !data.uploadUrl) {
+      setStatus("The upload result is missing its URL — is swan-backend on a build with create_upload?", true);
+      return;
+    }
+    applySummary(data as UploadSummary);
+  },
+});
+
+const drop = $("drop");
+const input = $("file") as HTMLInputElement;
+
+$("choose").addEventListener("click", () => input.click());
+input.addEventListener("change", () => {
+  const file = input.files?.[0];
+  input.value = "";
+  if (file) upload(file);
+});
+
+for (const type of ["dragenter", "dragover"]) {
+  drop.addEventListener(type, (e) => {
+    e.preventDefault();
+    drop.classList.add("active");
+  });
+}
+for (const type of ["dragleave", "drop"]) {
+  drop.addEventListener(type, (e) => {
+    e.preventDefault();
+    drop.classList.remove("active");
+  });
+}
+drop.addEventListener("drop", (e) => {
+  const file = (e as DragEvent).dataTransfer?.files?.[0];
+  if (file) upload(file);
+});
+
+$("open-page").addEventListener("click", () => {
+  const url = state.summary?.browserUploadUrl;
+  if (url) void openLink(card.app, url);
+});