@spheredata/embed 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spheredata/embed",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "publishConfig": { "access": "public" },
   "description": "Embeddable SPHERE agent UI — the <sphere-agent> Web Component + optional tool packs.",
   "keywords": ["sphere", "spheredata", "web-component", "custom-element", "ai", "agent", "embed", "pyodide"],

package/sphere-agent.js

@@ -72,6 +72,12 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--_
 .primary { background: var(--_accent); color: #fff; border: none; padding: 10px 18px; border-radius: var(--_radius); font-size: 14px; }
 .primary:hover:not(:disabled) { background: var(--_accent-hover); }
 .primary:disabled { opacity: .5; cursor: default; }
+.divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--_muted); font-size: 13px; }
+.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--_line); }
+.oauth { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 14px; margin-top: 8px; background: var(--_surface); color: inherit; border: 1px solid var(--_line); border-radius: var(--_radius); font: inherit; font-size: 14px; cursor: pointer; }
+.oauth:hover:not(:disabled) { border-color: var(--_accent); }
+.oauth:disabled { opacity: .5; cursor: default; }
+.oauth svg { width: 18px; height: 18px; flex: 0 0 18px; }
 .err { color: var(--_danger); font-size: 13px; margin-top: 10px; min-height: 1em; }
 
 /* chat */
@@ -275,7 +281,18 @@ class SphereAgent extends Base {
   }
 
   // ---- public API (properties) ----
-  set sphere(s) { this._sphere = s; this._refresh(); }
+  set sphere(s) {
+    this._sphere = s;
+    // Returning from a hosted OAuth redirect? Ingest the tokens the backend appended
+    // to the URL, then strip them so they don't linger in history. No-op on a normal
+    // load (completeOAuth returns false when no oauth params are present).
+    try {
+      if (s && typeof s.completeOAuth === "function" && s.completeOAuth()) {
+        history.replaceState({}, "", location.pathname + location.hash);
+      }
+    } catch { /* ignore — a normal load just has no tokens to ingest */ }
+    this._refresh();
+  }
   get sphere() { return this._sphere; }
   set tools(t) { this._tools = Array.isArray(t) ? t : []; }
   set systemPrompt(s) { this._systemPrompt = s || ""; }
@@ -307,6 +324,15 @@ class SphereAgent extends Base {
       <label>Email</label><input id="email" type="email" autocomplete="email" placeholder="you@lab.edu">
       <label>Password</label><input id="password" type="password" autocomplete="current-password" placeholder="••••••••">
       <div style="margin-top:14px"><button class="primary" id="auth-go">Sign in</button></div>
+      <div class="divider"><span>or</span></div>
+      <button class="oauth" id="oauth-google" type="button">
+        <svg viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.97 10.72a5.41 5.41 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/></svg>
+        Continue with Google
+      </button>
+      <button class="oauth" id="oauth-microsoft" type="button">
+        <svg viewBox="0 0 18 18" aria-hidden="true"><path fill="#F25022" d="M0 0h8.5v8.5H0z"/><path fill="#7FBA00" d="M9.5 0H18v8.5H9.5z"/><path fill="#00A4EF" d="M0 9.5h8.5V18H0z"/><path fill="#FFB900" d="M9.5 9.5H18V18H9.5z"/></svg>
+        Continue with Microsoft
+      </button>
       <div class="err" id="auth-err"></div>
       <p id="up-hint" class="hidden" style="margin-top:12px">New accounts start with <strong>$10</strong> in free credit.</p>
     </section>
@@ -348,6 +374,8 @@ class SphereAgent extends Base {
     $("tab-in").onclick = () => this._setMode("signin");
     $("tab-up").onclick = () => this._setMode("signup");
     $("auth-go").onclick = () => this._auth();
+    $("oauth-google").onclick = () => this._oauth("google");
+    $("oauth-microsoft").onclick = () => this._oauth("microsoft");
     $("signout").onclick = () => { this._sphere?.signOut(); this._messages = []; this._seeded = false; this._refresh(); };
     $("reset").onclick = () => this._resetConversation();
     $("send").onclick = () => this._send();
@@ -408,6 +436,24 @@ class SphereAgent extends Base {
     if (this._accountUrl) window.open(this._accountUrl, "_blank", "noopener");
   }
 
+  // Hosted OAuth (Google/Microsoft): redirect the page to the provider; on return the
+  // backend appends tokens to redirect_to, which `set sphere` ingests via completeOAuth().
+  // We drop a sessionStorage breadcrumb so the host page can reopen the agent view.
+  _oauth(provider) {
+    const err = this._$("auth-err");
+    if (!this._sphere || typeof this._sphere.oauthUrl !== "function") {
+      err.textContent = "Sign-in with " + provider + " isn't available.";
+      return;
+    }
+    try {
+      try { sessionStorage.setItem("sphere-agent:oauth-return", "1"); } catch { /* ignore */ }
+      const redirectTo = location.origin + location.pathname; // come back to this page
+      location.href = this._sphere.oauthUrl(provider, redirectTo);
+    } catch {
+      err.textContent = "Could not start sign-in. Please try again.";
+    }
+  }
+
   async _auth() {
     const $ = (id) => this._$(id);
     const email = $("email").value.trim(), password = $("password").value, name = $("name").value.trim();