botschat 0.1.12 → 0.1.13

package/packages/web/src/components/AccountSettings.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { useAppState } from "../store";
+import { setToken, setRefreshToken } from "../api";
+
+export function AccountSettings() {
+  const state = useAppState();
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [confirmText, setConfirmText] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleLogout = () => {
+    setToken(null);
+    setRefreshToken(null);
+    localStorage.clear();
+    window.location.reload();
+  };
+
+  const handleDelete = async () => {
+    if (confirmText !== "DELETE") return;
+    setBusy(true);
+    setError(null);
+    try {
+      const token = localStorage.getItem("botschat_token");
+      const res = await fetch("/api/auth/account", {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({ error: res.statusText }));
+        throw new Error((data as { error?: string }).error ?? `HTTP ${res.status}`);
+      }
+      setToken(null);
+      setRefreshToken(null);
+      localStorage.clear();
+      window.location.reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete account");
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Account Info */}
+      <div>
+        <h3 className="text-h3 font-bold mb-2" style={{ color: "var(--text-primary)" }}>
+          Account
+        </h3>
+        <div className="space-y-1.5">
+          <p className="text-body" style={{ color: "var(--text-secondary)" }}>
+            <span style={{ color: "var(--text-muted)" }}>Email: </span>
+            {state.user?.email ?? "—"}
+          </p>
+        </div>
+      </div>
+
+      {/* Logout */}
+      <div>
+        <button
+          onClick={handleLogout}
+          className="px-4 py-2 rounded-md text-caption font-bold"
+          style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+        >
+          Sign Out
+        </button>
+      </div>
+
+      {/* Danger Zone */}
+      <div
+        className="p-4 rounded-md border"
+        style={{ borderColor: "var(--accent-red, #e53e3e)", background: "rgba(255, 0, 0, 0.04)" }}
+      >
+        <h4 className="text-caption font-bold mb-2" style={{ color: "var(--accent-red, #e53e3e)" }}>
+          Danger Zone
+        </h4>
+        <p className="text-caption mb-3" style={{ color: "var(--text-muted)" }}>
+          Permanently delete your account and all associated data (messages, channels,
+          automations, media). This action cannot be undone.
+        </p>
+
+        {!showConfirm ? (
+          <button
+            onClick={() => setShowConfirm(true)}
+            className="px-4 py-2 rounded-md text-caption font-bold"
+            style={{ background: "var(--accent-red, #e53e3e)", color: "#fff" }}
+          >
+            Delete Account
+          </button>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-caption font-bold" style={{ color: "var(--text-primary)" }}>
+              Type <code style={{ color: "var(--accent-red, #e53e3e)" }}>DELETE</code> to confirm:
+            </p>
+            <input
+              type="text"
+              value={confirmText}
+              onChange={(e) => setConfirmText(e.target.value)}
+              className="w-full px-3 py-2 rounded border text-body"
+              style={{ background: "var(--bg-input, var(--bg-surface))", borderColor: "var(--border)", color: "var(--text-primary)" }}
+              placeholder="DELETE"
+              autoFocus
+            />
+            {error && <p className="text-caption" style={{ color: "var(--accent-red, #e53e3e)" }}>{error}</p>}
+            <div className="flex gap-2">
+              <button
+                onClick={handleDelete}
+                disabled={confirmText !== "DELETE" || busy}
+                className="px-4 py-2 rounded-md text-caption font-bold"
+                style={{
+                  background: "var(--accent-red, #e53e3e)",
+                  color: "#fff",
+                  opacity: confirmText !== "DELETE" || busy ? 0.5 : 1,
+                }}
+              >
+                {busy ? "Deleting..." : "Permanently Delete"}
+              </button>
+              <button
+                onClick={() => { setShowConfirm(false); setConfirmText(""); setError(null); }}
+                className="px-4 py-2 rounded-md text-caption font-bold"
+                style={{ background: "var(--bg-hover)", color: "var(--text-primary)", border: "1px solid var(--border)" }}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/packages/web/src/components/DataConsentModal.tsx

@@ -0,0 +1,249 @@
+import React, { useState, useEffect } from "react";
+
+interface DataConsentModalProps {
+  onAccept: () => void;
+}
+
+export function DataConsentModal({ onAccept }: DataConsentModalProps) {
+  const [scrolledToBottom, setScrolledToBottom] = useState(false);
+  const [timerElapsed, setTimerElapsed] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setTimerElapsed(true), 3000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const canAccept = scrolledToBottom || timerElapsed;
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const el = e.currentTarget;
+    if (el.scrollHeight - el.scrollTop - el.clientHeight < 20) {
+      setScrolledToBottom(true);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center z-50 p-4"
+      style={{ background: "var(--bg-secondary)" }}
+    >
+      <div
+        className="w-full max-w-lg flex flex-col rounded-md"
+        style={{
+          background: "var(--bg-surface)",
+          boxShadow: "var(--shadow-lg)",
+          maxHeight: "90vh",
+        }}
+      >
+        {/* Header */}
+        <div className="px-6 pt-6 pb-4 shrink-0">
+          <div className="flex items-center gap-3 mb-1">
+            <svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="none" stroke="var(--bg-active)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+            </svg>
+            <h1 className="text-h1 font-bold" style={{ color: "var(--text-primary)" }}>
+              How Your Data Works in BotsChat
+            </h1>
+          </div>
+          <p className="text-caption" style={{ color: "var(--text-muted)" }}>
+            Please review before continuing
+          </p>
+        </div>
+
+        {/* Scrollable content */}
+        <div
+          className="flex-1 min-h-0 overflow-y-auto px-6"
+          onScroll={handleScroll}
+        >
+          <div className="space-y-5 pb-2">
+            {/* Message Relay */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                </svg>
+              }
+              title="Message Relay"
+            >
+              BotsChat acts as a WebSocket relay between your browser and your own
+              OpenClaw AI gateway. Messages you send are transmitted through
+              BotsChat Cloud to reach your gateway.
+            </Section>
+
+            {/* E2E Encryption */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0110 0v4" />
+                </svg>
+              }
+              title="End-to-End Encryption"
+            >
+              When E2E encryption is enabled, the server only stores ciphertext
+              it cannot read. Your encryption key never leaves your device.
+            </Section>
+
+            {/* AI Processing */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
+                  <rect x="9" y="9" width="6" height="6" />
+                  <line x1="9" y1="1" x2="9" y2="4" />
+                  <line x1="15" y1="1" x2="15" y2="4" />
+                  <line x1="9" y1="20" x2="9" y2="23" />
+                  <line x1="15" y1="20" x2="15" y2="23" />
+                  <line x1="20" y1="9" x2="23" y2="9" />
+                  <line x1="20" y1="14" x2="23" y2="14" />
+                  <line x1="1" y1="9" x2="4" y2="9" />
+                  <line x1="1" y1="14" x2="4" y2="14" />
+                </svg>
+              }
+              title="AI Processing"
+            >
+              AI processing happens on your OpenClaw gateway using AI services
+              you configure (such as OpenAI, Anthropic, Google, Azure, etc.).
+              BotsChat does not choose or control which AI service processes your
+              data.
+            </Section>
+
+            {/* Your API Keys */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
+                </svg>
+              }
+              title="Your API Keys"
+            >
+              Your API keys are stored on your OpenClaw gateway machine and never
+              pass through BotsChat Cloud.
+            </Section>
+
+            {/* Third-Party Services */}
+            <Section
+              icon={
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="12" cy="12" r="10" />
+                  <line x1="2" y1="12" x2="22" y2="12" />
+                  <path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" />
+                </svg>
+              }
+              title="Third-Party Services"
+            >
+              BotsChat Cloud uses Cloudflare for hosting, database, and media
+              storage. Authentication is provided by Google and GitHub OAuth. No
+              data is sold or shared with advertisers.
+            </Section>
+
+            {/* What You Agree To */}
+            <div
+              className="rounded-md p-4"
+              style={{ background: "var(--bg-secondary)", border: "1px solid var(--border)" }}
+            >
+              <h3 className="text-body font-bold mb-3" style={{ color: "var(--text-primary)" }}>
+                What You Agree To
+              </h3>
+              <ul className="space-y-2">
+                <AgreementItem>
+                  Messages sent through BotsChat may be processed by third-party
+                  AI services configured in your OpenClaw gateway
+                </AgreementItem>
+                <AgreementItem>
+                  Your chat data is stored on Cloudflare infrastructure
+                </AgreementItem>
+                <AgreementItem>
+                  You can enable E2E encryption for additional privacy
+                </AgreementItem>
+                <AgreementItem>
+                  You can delete your account and all data at any time
+                </AgreementItem>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="px-6 py-4 shrink-0"
+          style={{ borderTop: "1px solid var(--border)" }}
+        >
+          <button
+            onClick={onAccept}
+            disabled={!canAccept}
+            className="w-full py-2.5 font-bold text-body text-white rounded-sm transition-all"
+            style={{
+              background: canAccept ? "var(--bg-active)" : "var(--bg-hover, #3a3d41)",
+              cursor: canAccept ? "pointer" : "not-allowed",
+              opacity: canAccept ? 1 : 0.5,
+            }}
+          >
+            I Understand &amp; Accept
+          </button>
+          <div className="flex items-center justify-center gap-2 mt-3">
+            <a
+              href="https://botschat.app/privacy.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-tiny hover:underline"
+              style={{ color: "var(--text-muted)" }}
+            >
+              Privacy Policy
+            </a>
+            <span className="text-tiny" style={{ color: "var(--text-muted)" }}>·</span>
+            <a
+              href="https://botschat.app/terms.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-tiny hover:underline"
+              style={{ color: "var(--text-muted)" }}
+            >
+              Terms of Service
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Section({ icon, title, children }: { icon: React.ReactNode; title: string; children: React.ReactNode }) {
+  return (
+    <div className="flex gap-3">
+      <div
+        className="shrink-0 w-8 h-8 rounded-md flex items-center justify-center mt-0.5"
+        style={{ background: "var(--bg-secondary)", color: "var(--text-secondary)" }}
+      >
+        {icon}
+      </div>
+      <div className="min-w-0">
+        <h3 className="text-body font-bold mb-1" style={{ color: "var(--text-primary)" }}>
+          {title}
+        </h3>
+        <p className="text-caption" style={{ color: "var(--text-secondary)", lineHeight: 1.6 }}>
+          {children}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function AgreementItem({ children }: { children: React.ReactNode }) {
+  return (
+    <li className="flex gap-2 text-caption" style={{ color: "var(--text-secondary)" }}>
+      <svg
+        className="w-4 h-4 shrink-0 mt-0.5"
+        viewBox="0 0 20 20"
+        fill="var(--bg-active)"
+      >
+        <path
+          fillRule="evenodd"
+          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <span style={{ lineHeight: 1.5 }}>{children}</span>
+    </li>
+  );
+}

package/packages/web/src/components/LoginPage.tsx

@@ -3,7 +3,7 @@ import { authApi, setToken, setRefreshToken } from "../api";
 import type { AuthConfig } from "../api";
 import { useAppDispatch } from "../store";
 import { dlog } from "../debug-log";
-import { isFirebaseConfigured, signInWithGoogle, signInWithGitHub } from "../firebase";
+import { isFirebaseConfigured, signInWithGoogle, signInWithGitHub, signInWithApple } from "../firebase";
 
 /** Google "G" logo SVG */
 function GoogleIcon() {
@@ -26,6 +26,15 @@ function GitHubIcon() {
   );
 }
 
+/** Apple logo SVG */
+function AppleIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
+      <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+    </svg>
+  );
+}
+
 export function LoginPage() {
   const dispatch = useAppDispatch();
   const [isRegister, setIsRegister] = useState(false);
@@ -34,7 +43,7 @@ export function LoginPage() {
   const [displayName, setDisplayName] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
-  const [oauthLoading, setOauthLoading] = useState<"google" | "github" | null>(null);
+  const [oauthLoading, setOauthLoading] = useState<"google" | "github" | "apple" | null>(null);
   const [authConfig, setAuthConfig] = useState<AuthConfig | null>(null);
 
   const firebaseEnabled = isFirebaseConfigured();
@@ -44,7 +53,7 @@ export function LoginPage() {
   useEffect(() => {
     authApi.config().then(setAuthConfig).catch(() => {
       // Fallback: assume email enabled (local dev) if config endpoint fails
-      setAuthConfig({ emailEnabled: true, googleEnabled: firebaseEnabled, githubEnabled: firebaseEnabled });
+      setAuthConfig({ emailEnabled: true, googleEnabled: firebaseEnabled, githubEnabled: firebaseEnabled, appleEnabled: firebaseEnabled });
     });
   }, [firebaseEnabled]);
 
@@ -90,26 +99,24 @@ export function LoginPage() {
     }
   };
 
-  const handleOAuthSignIn = async (provider: "google" | "github") => {
+  const handleOAuthSignIn = async (provider: "google" | "github" | "apple") => {
     setError("");
     setOauthLoading(provider);
 
-    // Timeout protection: if sign-in hangs for >30s, reset the UI
+    const timeoutMs = provider === "apple" ? 120000 : 30000;
     const timeout = setTimeout(() => {
       setOauthLoading(null);
-      setError(`${provider} sign-in timed out. Please try again.`);
-    }, 30000);
+    }, timeoutMs);
 
     try {
       dlog.info("Auth", `Starting ${provider} sign-in`);
-      const signInFn = provider === "google" ? signInWithGoogle : signInWithGitHub;
+      const signInFn = provider === "google" ? signInWithGoogle : provider === "github" ? signInWithGitHub : signInWithApple;
       const { idToken } = await signInFn();
       dlog.info("Auth", `Got Firebase ID token from ${provider}, verifying with backend`);
       const res = await authApi.firebase(idToken);
       dlog.info("Auth", `${provider} sign-in success — user ${res.id} (${res.email})`);
       handleAuthSuccess(res);
     } catch (err) {
-      // Don't show error for user-cancelled popup
       if (err instanceof Error && (
         err.message.includes("popup-closed-by-user") ||
         err.message.includes("cancelled")
@@ -179,6 +186,28 @@ export function LoginPage() {
           {configLoaded && firebaseEnabled && (
             <>
               <div className="space-y-3">
+                {/* Apple — listed first per Apple HIG */}
+                <button
+                  type="button"
+                  onClick={() => handleOAuthSignIn("apple")}
+                  disabled={anyLoading}
+                  className="w-full flex items-center justify-center gap-3 py-2.5 px-4 font-medium text-body rounded-sm disabled:opacity-50 transition-colors hover:brightness-95"
+                  style={{
+                    background: "var(--bg-surface)",
+                    color: "var(--text-primary)",
+                    border: "1px solid var(--border)",
+                  }}
+                >
+                  {oauthLoading === "apple" ? (
+                    <span>Signing in...</span>
+                  ) : (
+                    <>
+                      <AppleIcon />
+                      <span>Continue with Apple</span>
+                    </>
+                  )}
+                </button>
+
                 {/* Google */}
                 <button
                   type="button"
@@ -339,6 +368,17 @@ export function LoginPage() {
               </div>
             </>
           )}
+
+          {/* Privacy & Terms links */}
+          <div className="mt-6 text-center">
+            <a href="https://botschat.app/privacy.html" target="_blank" rel="noopener noreferrer" className="text-tiny hover:underline" style={{ color: "var(--text-muted)" }}>
+              Privacy Policy
+            </a>
+            <span className="mx-2 text-tiny" style={{ color: "var(--text-muted)" }}>·</span>
+            <a href="https://botschat.app/terms.html" target="_blank" rel="noopener noreferrer" className="text-tiny hover:underline" style={{ color: "var(--text-muted)" }}>
+              Terms of Service
+            </a>
+          </div>
         </div>
       </div>
     </div>

package/packages/web/src/firebase.ts

@@ -32,6 +32,8 @@ const firebaseConfig = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY as string,
   authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN as string,
   projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID as string,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID as string,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID as string,
 };
 
 let app: FirebaseApp | null = null;
@@ -42,6 +44,14 @@ export function isFirebaseConfigured(): boolean {
   return !!(firebaseConfig.apiKey && firebaseConfig.authDomain && firebaseConfig.projectId);
 }
 
+/** Ensure the Firebase app is initialized (for FCM, independent of OAuth). */
+export function ensureFirebaseApp(): FirebaseApp | null {
+  if (app) return app;
+  if (!isFirebaseConfigured()) return null;
+  app = initializeApp(firebaseConfig);
+  return app;
+}
+
 function getFirebaseAuth(): Auth {
   if (!auth) {
     if (!isFirebaseConfigured()) {
@@ -64,7 +74,7 @@ export type FirebaseSignInResult = {
   email: string;
   displayName: string | null;
   photoURL: string | null;
-  provider: "google" | "github";
+  provider: "google" | "github" | "apple";
 };
 
 // ---------------------------------------------------------------------------
@@ -95,12 +105,14 @@ async function ensureNativeGoogleInit(): Promise<void> {
 
   const iosClientId = import.meta.env.VITE_GOOGLE_IOS_CLIENT_ID as string | undefined;
   const webClientId = import.meta.env.VITE_GOOGLE_WEB_CLIENT_ID as string | undefined;
+  const platform = Capacitor.getPlatform();
 
-  console.log("[NativeGoogleSignIn] initialize: iOSClientId =", iosClientId?.substring(0, 20) + "...", "webClientId =", webClientId?.substring(0, 20) + "...");
+  console.log("[NativeGoogleSignIn] initialize: platform =", platform, "iOSClientId =", iosClientId?.substring(0, 20) + "...", "webClientId =", webClientId?.substring(0, 20) + "...");
 
   await withTimeout(
     SocialLogin.initialize({
       google: {
+        webClientId: webClientId || undefined,
         iOSClientId: iosClientId || undefined,
         iOSServerClientId: webClientId || undefined,
       },
@@ -216,3 +228,78 @@ export async function signInWithGitHub(): Promise<FirebaseSignInResult> {
     provider: "github",
   };
 }
+
+// ---------------------------------------------------------------------------
+// Apple Sign-In
+// ---------------------------------------------------------------------------
+
+/**
+ * Native Apple Sign-In on iOS via @capgo/capacitor-social-login,
+ * then exchange for Firebase credential.
+ */
+async function nativeAppleSignIn(): Promise<FirebaseSignInResult> {
+  console.log("[NativeAppleSignIn] Step 1: initializing");
+  const { SocialLogin } = await import("@capgo/capacitor-social-login");
+
+  if (!_socialLoginInitialized) {
+    await withTimeout(
+      SocialLogin.initialize({ apple: {} }),
+      10000,
+      "SocialLogin.initialize(apple)",
+    );
+    _socialLoginInitialized = true;
+  }
+
+  console.log("[NativeAppleSignIn] Step 2: calling SocialLogin.login()");
+  const res = await SocialLogin.login({
+    provider: "apple",
+    options: { scopes: ["email", "name"] },
+  });
+
+  console.log("[NativeAppleSignIn] Step 3: SocialLogin.login() returned", JSON.stringify(res).substring(0, 200));
+
+  const appleResult = res.result as any;
+  const appleIdToken = appleResult.idToken;
+  if (!appleIdToken) {
+    throw new Error("Apple Sign-In did not return an idToken");
+  }
+
+  // Send the Apple ID token directly to the backend — skip Firebase client
+  // (signInWithCredential hangs in WKWebView on real devices, same as Google)
+  console.log("[NativeAppleSignIn] Step 4: Skipping Firebase client, sending Apple ID token directly to backend");
+
+  return {
+    idToken: appleIdToken,
+    email: appleResult.profile?.email ?? appleResult.email ?? "",
+    displayName: appleResult.profile?.name ?? appleResult.fullName?.givenName ?? null,
+    photoURL: null,
+    provider: "apple",
+  };
+}
+
+/**
+ * Sign in with Apple.
+ * - Web: Firebase popup with Apple OAuthProvider
+ * - Native iOS: Native Apple Sign-In via @capgo/capacitor-social-login → Firebase credential
+ */
+export async function signInWithApple(): Promise<FirebaseSignInResult> {
+  if (Capacitor.isNativePlatform()) {
+    return nativeAppleSignIn();
+  }
+
+  const firebaseAuth = getFirebaseAuth();
+  const provider = new OAuthProvider("apple.com");
+  provider.addScope("email");
+  provider.addScope("name");
+
+  const result = await signInWithPopup(firebaseAuth, provider);
+  const idToken = await result.user.getIdToken();
+
+  return {
+    idToken,
+    email: result.user.email ?? "",
+    displayName: result.user.displayName,
+    photoURL: result.user.photoURL,
+    provider: "apple",
+  };
+}

package/packages/web/src/foreground.ts

@@ -0,0 +1,51 @@
+/**
+ * Foreground/background detection — notifies the ConnectionDO via WebSocket
+ * so it knows whether to send push notifications.
+ */
+
+import { Capacitor } from "@capacitor/core";
+import type { BotsChatWSClient } from "./ws";
+import { dlog } from "./debug-log";
+
+export function setupForegroundDetection(wsClient: BotsChatWSClient): () => void {
+  const notifyForeground = () => {
+    wsClient.send({ type: "foreground.enter" });
+    dlog.info("Foreground", "Entered foreground");
+  };
+
+  const notifyBackground = () => {
+    wsClient.send({ type: "foreground.leave" });
+    dlog.info("Foreground", "Entered background");
+  };
+
+  if (Capacitor.isNativePlatform()) {
+    let cleanup: (() => void) | null = null;
+
+    import("@capacitor/app").then(({ App }) => {
+      const handle = App.addListener("appStateChange", ({ isActive }) => {
+        if (isActive) notifyForeground();
+        else notifyBackground();
+      });
+      cleanup = () => handle.then((h) => h.remove());
+    });
+
+    // Report initial foreground state once WS is connected
+    notifyForeground();
+
+    return () => cleanup?.();
+  }
+
+  // Web: Use Page Visibility API
+  const handleVisibilityChange = () => {
+    if (document.hidden) notifyBackground();
+    else notifyForeground();
+  };
+
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+
+  if (!document.hidden) notifyForeground();
+
+  return () => {
+    document.removeEventListener("visibilitychange", handleVisibilityChange);
+  };
+}