@cometchat/skills 4.4.2 → 5.0.1

package/skills/cometchat-react-calls/references/recording-screen-share.md

@@ -1,144 +0,0 @@
-# Recording + screen sharing on web
-
-Both features ship with the Calls SDK; both have web-specific gotchas the kit's defaults don't handle.
-
----
-
-## Recording
-
-### Server-side: enable in the dashboard first
-
-Recording is a paid feature gated by your CometChat plan. Enable it in **Dashboard → Chat & Messaging → Calls → Recording**. Without that, the client-side flag below is a no-op.
-
-### Client-side: opt-in per session
-
-```ts
-// SessionSettings object passed to joinSession(token, settings, container).
-// These are object fields — NOT CallSettingsBuilder methods (the v4 builder had
-// enableRecording/setShowRecordingButton; v5 uses the object below).
-const settings = {
-  sessionType: 'VIDEO',          // 'VOICE' for audio-only (replaces setIsAudioOnly)
-  autoStartRecording: true,      // ← server starts recording when the session begins
-  hideRecordingButton: false,    // ← keep the user-toggleable Record button visible
-};
-```
-
-Two fields, two behaviors:
-
-- `autoStartRecording: true` — recording starts the moment the session begins. Server-side flag.
-- `hideRecordingButton: false` — exposes a "Record" toggle in the default control panel. User decides when to start/stop. Custom-UI code must wire its own button (`CometChatCalls.startRecording()` / `stopRecording()` — there is no `toggleRecording()`; track state yourself and call the right one).
-
-**Compliance note:** in some jurisdictions you must notify all participants before recording starts. The default kit UI shows a small "Recording" indicator; if you're using custom UI, you must render this yourself. The skill's verification checklist flags this.
-
-### Recording lifecycle events
-
-```ts
-// v5 uses the static event bus; addEventListener returns an unsubscribe fn.
-const offStarted = CometChatCalls.addEventListener("onRecordingStarted", () => {
-  // server confirmed recording is active
-});
-const offStopped = CometChatCalls.addEventListener("onRecordingStopped", () => {
-  // server stopped — file will appear in dashboard within ~30 seconds
-});
-// Cleanup when the call ends: offStarted(); offStopped();
-//
-// NOTE: there is no `onRecordingFailed` event on the v5 bus (and no
-// onRecordingFailed member on OngoingCallListener). Plan-limit / storage-quota
-// failures surface as a rejection from generateToken/joinSession or a server
-// error — handle those, not a dedicated recording-failed callback.
-```
-
-### Where the recordings go
-
-CometChat hosts the file. It appears in **Dashboard → Calls → Recordings** with a download link. The skill points users at the dashboard path; there is no client-side download API.
-
----
-
-## Screen sharing
-
-### Two roles: presenter + viewer
-
-- **Presenter** (the user sharing their screen) — calls `CometChatCalls.startScreenSharing()`; the SDK handles `getDisplayMedia` + signaling internally
-- **Viewer** (everyone else) — sees the presenter's screen as another video tile, no special API call needed
-
-Browser support: Chrome/Edge (full), Firefox (full), Safari 13+ (full). On mobile browsers, `getDisplayMedia` is supported on iOS 16+ Safari and recent Android Chrome.
-
-### Presenter — start sharing
-
-```ts
-async function startScreenShare() {
-  try {
-    CometChatCalls.startScreenSharing();
-    // SDK handled getDisplayMedia + signaling; UI updates via onScreenShareStarted
-  } catch (err: unknown) {
-    if ((err as Error).name === "NotAllowedError") {
-      // user clicked "Cancel" on the picker — no error UI needed
-      return;
-    }
-    setError("Couldn't start screen share");
-  }
-}
-```
-
-Stop sharing:
-
-```ts
-CometChatCalls.stopScreenSharing();
-```
-
-The browser also fires its own "Stop sharing" button (the system overlay Chrome shows during a screen-share). The SDK listens for this too; `onScreenShareStopped` fires either way.
-
-### Viewer — listen for screen-share events
-
-```ts
-// The v5 bus callbacks take NO arguments — they're notifications, not stream
-// handoffs. The SDK renders the presenter's screen as a tile in its own layout;
-// you don't receive a MediaStream to attach yourself (that was the v4 model).
-const offStart = CometChatCalls.addEventListener("onScreenShareStarted", () => {
-  setSomeoneSharing(true);
-});
-const offStop = CometChatCalls.addEventListener("onScreenShareStopped", () => {
-  setSomeoneSharing(false);
-});
-// Cleanup: offStart(); offStop();
-```
-
-The SDK composes the screen-share tile alongside the camera tiles automatically. (Truly hand-rendering the shared stream requires the deprecated `OngoingCallListener` + `startSession` track-level path — see `custom-ui.md`.)
-
-### Audio passthrough during screen share
-
-By default, `getDisplayMedia` captures video only. To capture system audio (for sharing a video with sound), pass `audio: true`:
-
-```ts
-// Browser-level API — the SDK's startScreenSharing wraps this internally
-const stream = await navigator.mediaDevices.getDisplayMedia({
-  video: true,
-  audio: true,
-});
-```
-
-Browser support is uneven — Chrome desktop has it; Firefox does not; Safari has it for tab capture but not full-screen.
-
-The Calls SDK's `startScreenSharing()` does NOT request audio by default. If you need audio passthrough, use the lower-level `getDisplayMedia` API directly + pipe the audio track via a custom track-add hook (covered in `custom-ui.md`).
-
----
-
-## Combining recording + screen-share
-
-Server-side recording captures the active video composition, including screen-share when a participant is sharing. The recording file is one MP4 with the layout the kit was rendering at the time.
-
-If you're using custom UI, the recording captures what the SDK sends to the server — not your custom DOM. The composition is determined by the SDK's internal layout, not your CSS.
-
----
-
-## Browser permissions for screen-share
-
-Like `getUserMedia`, `getDisplayMedia` requires HTTPS or `localhost`. It also requires an active user gesture (click/tap) — you cannot start it from a `useEffect` or timer. The skill scaffolds the API call inside an onClick handler.
-
-System-level: macOS 10.15+ asks the user once to grant Chrome/Safari/Firefox permission to record the screen (System Preferences → Security & Privacy → Screen Recording). If the user denies, `getDisplayMedia` throws `NotAllowedError` with no remediation path inside the browser — surface a "Open System Preferences" instruction.
-
----
-
-## Cleanup
-
-Both recording and screen-share are part of the call session. `CometChatCalls.leaveSession()` stops both automatically. Custom UI must NOT separately call `getTracks().forEach(t => t.stop())` on the SDK's screen-share stream — the SDK owns it. Stop only the streams YOUR code created (e.g. local preview).

package/skills/cometchat-react-calls/references/ringing-integration.md

@@ -1,255 +0,0 @@
-# Ringing — call signaling with custom UI (web)
-
-The Ringing flow uses the **Chat SDK's call entity** for signaling (initiate / ring / accept / reject / cancel) and the **Calls SDK** for the actual WebRTC session. This is the right pattern when you want a custom incoming-call UI on top of CometChat's signaling — not the kit's prebuilt `CometChatIncomingCall`.
-
-**Three calling modes — pick the right one:**
-
-| Mode | Driver | When to use |
-|---|---|---|
-| **Standard** | UI Kit (`CometChatCallButtons` + `CometChatIncomingCall`) | 80% case — chat-driven calls with prebuilt UI |
-| **Ringing (this doc)** | Chat SDK call entity + Calls SDK session | Custom incoming/outgoing call UI on top of CometChat signaling |
-| **Call Session** (see `call-session.md`) | Calls SDK `joinSession` directly | Meeting-room URLs, scheduled calls, no ringing |
-
-**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/ringing
-
----
-
-## Architecture
-
-```
-Caller                              CometChat                       Recipient
-  │                                     │                                │
-  │ CometChat.initiateCall(call)        │                                │
-  ├────────────────────────────────────>│                                │
-  │                                     │ onIncomingCallReceived         │
-  │                                     ├───────────────────────────────>│
-  │                                     │                                │
-  │                                     │     CometChat.acceptCall(sid)  │
-  │                                     │<───────────────────────────────│
-  │ onOutgoingCallAccepted              │                                │
-  │<────────────────────────────────────┤                                │
-  │                                     │                                │
-  │  CometChatCalls.joinSession(token)  │  CometChatCalls.joinSession(token)
-  ├────────────────────────────────────>│<───────────────────────────────│
-  │              ───── WebRTC session active ─────                       │
-```
-
-The Chat SDK is the signaling channel; the Calls SDK is the media channel. Same sessionId binds them.
-
----
-
-## Hard rules
-
-1. **Both SDKs must be initialized** — `CometChat.init` for signaling, `CometChatCalls.init` for media. Sequential, in that order.
-2. **`addCallListener` must be live BEFORE you start receiving calls.** Add it on app start, after login. Otherwise incoming-call events are missed.
-3. **`CometChatCalls.joinSession` happens AFTER `CometChat.acceptCall` resolves** — accepting tells the backend you're ready; joining the session enters WebRTC. Reversing this fires media before the chat-side state agrees.
-4. **End the call on BOTH SDKs.** `CometChatCalls.leaveSession()` for media, `CometChat.endCall(sessionId)` for the chat-side call record. Skipping either leaves a zombie.
-5. **Listen for `onCallEndedMessageReceived`** for the case where the OTHER party ended. Without it, your UI keeps showing "in-call" while the session is dead.
-6. **Custom timeout (default 45s)** — `CometChat.initiateCall(call, 60)` sets ringing duration. After timeout, the backend auto-cancels and the recipient stops seeing the call.
-
----
-
-## Initiate (caller side)
-
-```ts
-import { CometChat } from "@cometchat/chat-sdk-javascript";
-
-async function initiateCall(receiverUid: string, callType: "audio" | "video" = "video") {
-  const call = new CometChat.Call(
-    receiverUid,
-    callType === "video" ? CometChat.CALL_TYPE.VIDEO : CometChat.CALL_TYPE.AUDIO,
-    CometChat.RECEIVER_TYPE.USER,
-  );
-  // Optional: 60-second ring timeout (default 45)
-  const outgoingCall = await CometChat.initiateCall(call, 60);
-  showOutgoingCallScreen(outgoingCall);
-  return outgoingCall;
-}
-```
-
-For **group calls**, change `RECEIVER_TYPE` to `CometChat.RECEIVER_TYPE.GROUP` and use the group GUID. Only group members get the ring.
-
----
-
-## Listen for events (recipient + caller)
-
-```tsx
-import { useEffect } from "react";
-
-const LISTENER_ID = "app-call-listener";
-
-export function useCometChatCallListener() {
-  useEffect(() => {
-    CometChat.addCallListener(
-      LISTENER_ID,
-      new CometChat.CallListener({
-        onIncomingCallReceived: (call) => {
-          // Show your custom incoming-call UI
-          showIncomingCallScreen(call);
-        },
-        onOutgoingCallAccepted: (acceptedCall) => {
-          // Other party accepted — start the session
-          hideOutgoingCallScreen();
-          startCallSession(acceptedCall.getSessionId());
-        },
-        onOutgoingCallRejected: (rejectedCall) => {
-          hideOutgoingCallScreen();
-          // Optional: toast "User declined"
-        },
-        onIncomingCallCancelled: (cancelledCall) => {
-          // Caller hung up before you accepted
-          hideIncomingCallScreen();
-        },
-        onCallEndedMessageReceived: (endedCall) => {
-          // Other party ended the active session
-          teardownCallUI();
-        },
-      }),
-    );
-    return () => CometChat.removeCallListener(LISTENER_ID);
-  }, []);
-}
-```
-
-Mount this hook at app root (e.g. in `App.tsx`) so listeners survive route changes — the same reasoning as for `<CometChatIncomingCall />`.
-
----
-
-## Accept (recipient side)
-
-```ts
-async function acceptIncomingCall(call: CometChat.Call) {
-  const accepted = await CometChat.acceptCall(call.getSessionId());
-  hideIncomingCallScreen();
-  startCallSession(accepted.getSessionId());
-}
-```
-
----
-
-## Reject (recipient side)
-
-```ts
-async function rejectIncomingCall(call: CometChat.Call) {
-  await CometChat.rejectCall(
-    call.getSessionId(),
-    CometChat.CALL_STATUS.REJECTED,
-  );
-  hideIncomingCallScreen();
-}
-```
-
----
-
-## Cancel outgoing (caller side, before recipient answers)
-
-```ts
-async function cancelOutgoingCall(call: CometChat.Call) {
-  await CometChat.rejectCall(
-    call.getSessionId(),
-    CometChat.CALL_STATUS.CANCELLED,
-  );
-  hideOutgoingCallScreen();
-}
-```
-
-`rejectCall` is the same API for both recipient-rejecting and caller-cancelling — the `CALL_STATUS` enum distinguishes intent.
-
----
-
-## Start the session (both parties, after accept)
-
-```tsx
-async function startCallSession(sessionId: string) {
-  const container = document.getElementById("call-container")!;
-  const tokenResult = await CometChatCalls.generateToken(sessionId);
-
-  await CometChatCalls.joinSession(
-    tokenResult.token,
-    { sessionType: "VIDEO", layout: "TILE" },
-    container,
-  );
-
-  // Listen for session end (you ended it OR connection lost)
-  const unsub = CometChatCalls.addEventListener("onSessionLeft", () => {
-    endCall(sessionId);
-    unsub();
-  });
-}
-```
-
-The container element must exist in the DOM **before** calling `joinSession`. In React, render a div with `id="call-container"` inside your call screen component, and call `startCallSession` from `useEffect`.
-
----
-
-## End the call
-
-```ts
-async function endCall(sessionId: string) {
-  CometChatCalls.leaveSession();
-  await CometChat.endCall(sessionId);
-  teardownCallUI();
-}
-```
-
----
-
-## Custom incoming-call UI
-
-```tsx
-function IncomingCallScreen({ call, onAccept, onReject }: Props) {
-  const caller = call.getCallInitiator();
-  return (
-    <div role="alertdialog" aria-labelledby="incoming-title" className="incoming-call-overlay">
-      <div className="card">
-        <img src={caller.getAvatar()} alt="" />
-        <h3 id="incoming-title">{caller.getName()}</h3>
-        <p>Incoming {call.getType()} call</p>
-        <div className="actions">
-          <button onClick={onReject} className="reject" aria-label="Decline call">Decline</button>
-          <button onClick={onAccept} className="accept" aria-label="Accept call">Accept</button>
-        </div>
-      </div>
-      <audio src="/sounds/ringtone.mp3" autoPlay loop />
-    </div>
-  );
-}
-```
-
-`role="alertdialog"` is the right ARIA role — interrupting modal that requires user action. `<audio autoPlay loop>` plays ringtone; pause it on accept/reject in the parent.
-
----
-
-## Anti-patterns
-
-1. **`addCallListener` inside the chat route component.** Listener tears down on route change → calls received while user is on home screen are silently dropped.
-2. **Calling `joinSession` before `acceptCall` resolves.** Race — recipient enters WebRTC before backend marks the call as "ongoing." Caller's `onOutgoingCallAccepted` may never fire.
-3. **Forgetting to `removeCallListener` on unmount.** Multiple listeners → events fire N times. Causes "double accept" toasts.
-4. **No `onCallEndedMessageReceived` handler.** The other party ends the call → your UI stays "in-call" → user has to refresh.
-5. **Using `endCall` on the chat SDK without `leaveSession` on the calls SDK.** Camera light stays on; mic stays hot. The flex-shrink trap of calls.
-6. **Mounting `CometChatIncomingCall` (kit) AND custom listener AT THE SAME TIME.** Both fire — you get duplicate incoming-call UIs. Pick one mode per app.
-7. **`CometChat.initiateCall` without timeout when phone-ringing UX is the goal.** Default 45s is fine; if your UX rings longer, override explicitly so the recipient sees consistent UI.
-
----
-
-## Verification checklist
-
-- [ ] Both SDKs initialized in order (`CometChat.init` → `CometChatCalls.init`)
-- [ ] `addCallListener` registered at app root (survives route changes)
-- [ ] `removeCallListener` on unmount
-- [ ] `acceptCall` precedes `joinSession`
-- [ ] `endCall` (chat) AND `leaveSession` (calls) both fire on hangup
-- [ ] `onCallEndedMessageReceived` tears down UI when other party ends
-- [ ] `onIncomingCallCancelled` tears down UI when caller cancels mid-ring
-- [ ] Custom UI: `role="alertdialog"`, ringtone audio, accept/decline buttons with aria-labels
-- [ ] Smoke: **two ISOLATED browser contexts** (normal + Incognito window, or two browsers/devices — NOT two tabs of one browser; the Chat SDK is a single shared session per origin, so a second tab can't be an independent callee), caller initiates → recipient sees custom incoming UI → accept → both join session → either ends → both UIs dismiss
-
----
-
-## Pointers
-
-- `cometchat-react-calls/SKILL.md` — architecture + seven hard rules
-- `cometchat-react-calls/references/call-session.md` — Mode 3 (joinSession with no ringing)
-- `cometchat-react-calls/references/in-call-chat.md` — chat panel during a call
-- `cometchat-react-calls/references/recording-screen-share.md` — recording mid-call
-- Canonical docs: https://www.cometchat.com/docs/calls/javascript/ringing

package/skills/cometchat-react-calls/references/server-web-push-vapid.md

@@ -1,241 +0,0 @@
-# Server-side Web Push VAPID for browser ringing
-
-Browsers don't have a true VoIP-push equivalent (the way iOS PushKit + Android FCM data-messages do). But **Web Push** with VAPID is the closest analog: when a CometChat call event fires, your server sends a push, the browser's Service Worker receives it (even with the tab closed), and posts a notification + plays a ringtone.
-
-**Caveat — set expectations:** Web Push is best-effort. It works reliably when:
-- The user has the tab open OR a recent installed PWA
-- The browser is running (Chrome/Edge/Firefox running but minimized → ✓)
-- Battery saver isn't aggressive
-
-It does NOT work when:
-- The user closed all browser windows
-- iOS Safari except in PWA-only mode (16.4+)
-- The user denied notification permission
-
-For production-grade ringing on the web, recommend customers offer the iOS/Android app for unreliable-recipient scenarios.
-
-**Canonical docs:** https://datatracker.ietf.org/doc/html/rfc8030 (Web Push), https://datatracker.ietf.org/doc/html/rfc8292 (VAPID), https://developer.mozilla.org/en-US/docs/Web/API/Push_API
-
----
-
-## Hard rules
-
-1. **VAPID keys are mandatory.** Browsers will reject pushes without them since 2018.
-2. **Use the `web-push` library or its equivalents** — implementing VAPID JWT + AES128GCM payload encryption from scratch is error-prone.
-3. **HTTPS required.** Web Push doesn't work on HTTP except localhost.
-4. **Subscriptions expire.** Browsers rotate `endpoint` URLs every ~3 months on Chrome desktop. Implement re-subscription on push failure (410 Gone).
-5. **TTL ≤ 60s for VoIP-style ringing.** A push that arrives 5 minutes late is worse than no push.
-6. **Topic must be set** so a fresh ringing push displaces an older queued one (avoid stacking).
-
----
-
-## Generate VAPID keys (one-time)
-
-```bash
-npx web-push generate-vapid-keys
-# Output:
-# Public Key:  BNa...   (paste into your client code)
-# Private Key: 3kL...   (server-side env var only)
-```
-
-Or via Node API:
-
-```js
-import webpush from "web-push";
-const keys = webpush.generateVAPIDKeys();
-console.log("VAPID_PUBLIC_KEY=", keys.publicKey);
-console.log("VAPID_PRIVATE_KEY=", keys.privateKey);
-```
-
----
-
-## Node.js template
-
-```js
-// npm install web-push
-import webpush from "web-push";
-
-webpush.setVapidDetails(
-  `mailto:${process.env.VAPID_CONTACT_EMAIL}`,
-  process.env.VAPID_PUBLIC_KEY,
-  process.env.VAPID_PRIVATE_KEY,
-);
-
-export async function sendWebVoipPush(opts) {
-  const { recipientUid, sessionId, callerName, callerUid, callType } = opts;
-
-  // A user may have multiple subscriptions (laptop + work computer); fan out.
-  const subscriptions = await db.getWebPushSubscriptions(recipientUid);
-
-  const payload = JSON.stringify({
-    type: "incoming_call",
-    sessionId,
-    callerName,
-    callerUid,
-    callType,
-    timestamp: Date.now(),
-  });
-
-  await Promise.allSettled(
-    subscriptions.map(async (sub) => {
-      try {
-        await webpush.sendNotification(sub, payload, {
-          TTL: 30,                                 // Hard Rule 5
-          urgency: "high",                          // urgency header
-          topic: `call-${sessionId}`.slice(0, 32),  // Hard Rule 6 — replaces older with same topic
-        });
-      } catch (err) {
-        if (err.statusCode === 410 || err.statusCode === 404) {
-          // Endpoint dead — purge from DB
-          await db.removeWebPushSubscription(recipientUid, sub.endpoint);
-          return;
-        }
-        console.error("Web push failed", err);
-      }
-    }),
-  );
-}
-```
-
----
-
-## Python template (pywebpush)
-
-```python
-# pip install pywebpush
-from pywebpush import webpush, WebPushException
-import json, os
-
-VAPID_CLAIMS = {"sub": f"mailto:{os.environ['VAPID_CONTACT_EMAIL']}"}
-VAPID_PRIVATE_KEY = os.environ["VAPID_PRIVATE_KEY"]
-
-def send_web_voip_push(subscription_info: dict, payload: dict):
-    try:
-        webpush(
-            subscription_info=subscription_info,
-            data=json.dumps(payload),
-            vapid_private_key=VAPID_PRIVATE_KEY,
-            vapid_claims=VAPID_CLAIMS,
-            ttl=30,
-            headers={
-                "Urgency": "high",
-                "Topic": f"call-{payload['sessionId']}"[:32],
-            },
-        )
-    except WebPushException as ex:
-        if ex.response and ex.response.status_code in (404, 410):
-            return "expired"
-        raise
-```
-
----
-
-## Receiver: Service Worker
-
-`/public/sw.js`:
-
-```js
-self.addEventListener("push", (event) => {
-  if (!event.data) return;
-  const data = event.data.json();
-  if (data.type !== "incoming_call") return;
-
-  event.waitUntil((async () => {
-    // 1. Show notification (must happen synchronously in `push` event,
-    //    otherwise browser shows "[App] is sending notifications in the background"
-    //    indicator and may unsubscribe you).
-    await self.registration.showNotification(`Incoming call from ${data.callerName}`, {
-      body: data.callType === "video" ? "Video call" : "Audio call",
-      tag: `call-${data.sessionId}`,
-      icon: "/icons/incoming-call-192.png",
-      badge: "/icons/badge-72.png",
-      requireInteraction: true,        // stays until user acts
-      silent: false,                    // play default ringtone (some OSes ignore this for browser pushes)
-      vibrate: [500, 200, 500],         // mobile haptic
-      actions: [
-        { action: "accept", title: "Accept" },
-        { action: "reject", title: "Decline" },
-      ],
-      data: {
-        sessionId: data.sessionId,
-        callerName: data.callerName,
-        callerUid: data.callerUid,
-        callType: data.callType,
-      },
-    });
-
-    // 2. Wake any open clients so the in-app ringer can fire too
-    const clients = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
-    clients.forEach((client) => client.postMessage({ type: "incoming_call", ...data }));
-  })());
-});
-
-self.addEventListener("notificationclick", (event) => {
-  const { sessionId } = event.notification.data;
-  event.notification.close();
-  const url = `/call/${sessionId}?action=${event.action || "open"}`;
-
-  event.waitUntil((async () => {
-    const clients = await self.clients.matchAll({ type: "window" });
-    const existing = clients.find((c) => c.url.includes(`/call/${sessionId}`));
-    if (existing) {
-      return existing.focus();
-    }
-    return self.clients.openWindow(url);
-  })());
-});
-```
-
-Register in `main.tsx`:
-
-```tsx
-useEffect(() => {
-  if (!("serviceWorker" in navigator)) return;
-  navigator.serviceWorker.register("/sw.js")
-    .then(async (reg) => {
-      const sub = await reg.pushManager.subscribe({
-        userVisibleOnly: true,
-        applicationServerKey: urlBase64ToUint8Array(import.meta.env.VITE_VAPID_PUBLIC_KEY),
-      });
-      await api.registerWebPushSubscription(currentUserUid, sub.toJSON());
-    })
-    .catch((err) => console.warn("SW register / push subscribe failed:", err));
-}, []);
-```
-
----
-
-## Anti-patterns
-
-1. **Embedding VAPID private key in client code.** Push spam by anyone who views source. Server-only.
-2. **Skipping `requireInteraction: true`.** Notification disappears in 5s on Chrome desktop — call seems to "ring once" then vanish.
-3. **No `tag` on the notification.** Multiple incoming-call notifications stack.
-4. **TTL: 0.** Notification dies the instant the device is offline. Use 30s minimum.
-5. **`silent: true`.** Browser doesn't ring, only shows the visual notification.
-6. **Forgetting to handle `notificationclick`.** User taps notification → nothing happens.
-7. **Implementing Web Push for iOS Safari without checking PWA-only mode.** iOS Safari requires the user to "Add to Home Screen" first — Web Push doesn't work in regular tabs.
-
----
-
-## Verification checklist
-
-- [ ] VAPID keys generated; private key in env var
-- [ ] HTTPS (or localhost for dev)
-- [ ] Subscription stored server-side keyed to user UID
-- [ ] `topic` set so newer push replaces older
-- [ ] `requireInteraction: true` + `tag` set on notification
-- [ ] 410/404 responses purge dead subscriptions
-- [ ] `notificationclick` opens a call route
-- [ ] Smoke: 2 browsers, recipient minimizes window, caller dials, recipient sees notification + ringtone
-
----
-
-## Pointers
-
-- `cometchat-react-calls/SKILL.md` — calls architecture
-- `cometchat-react-push/SKILL.md` — chat web push (sister, different payload)
-- `cometchat-ios-calls/references/server-apns-pushkit.md` — iOS sibling
-- `cometchat-android-v5-calls/references/server-fcm-voip.md` — Android sibling
-- Web Push spec (RFC 8030): https://datatracker.ietf.org/doc/html/rfc8030
-- VAPID (RFC 8292): https://datatracker.ietf.org/doc/html/rfc8292
-- web-push npm: https://www.npmjs.com/package/web-push