feat: update push notification URL and add call notifications

app/src/components/call/controls/InviteToCallPopover.vue

@@ -0,0 +1,172 @@
+<template>
+  <j-popover ref="popover" placement="top">
+    <j-tooltip slot="trigger" placement="top" title="Invite to call">
+      <j-button variant="transparent" square circle :size="isMobile ? 'md' : 'lg'">
+        <j-icon name="person-plus" :size="isMobile ? 'sm' : 'md'" />
+      </j-button>
+    </j-tooltip>
+
+    <div slot="content" class="invite-popover">
+      <j-flex direction="column" gap="400">
+        <j-text nomargin variant="heading-sm" size="400">Invite to call</j-text>
+
+        <j-input
+          size="sm"
+          placeholder="Search members..."
+          type="search"
+          :value="searchInput"
+          @input="(e: any) => (searchInput = e.target.value)"
+        >
+          <j-icon name="search" size="xs" slot="start" />
+        </j-input>
+
+        <div class="member-list">
+          <label
+            v-for="member in filteredMembers"
+            :key="member.did"
+            class="member-row"
+            :class="{ selected: selectedDids.has(member.did!) }"
+            @click="() => member.did && toggleMember(member.did)"
+          >
+            <j-avatar size="sm" :did="member.did" :hash="member.did" :src="member.profileThumbnailPicture" />
+            <j-text nomargin size="400" style="flex: 1">
+              {{ member.username || 'Loading...' }}
+            </j-text>
+            <j-icon
+              v-if="selectedDids.has(member.did!)"
+              name="check-circle-fill"
+              color="primary-500"
+              size="sm"
+            />
+          </label>
+
+          <j-text v-if="!filteredMembers.length" nomargin size="400" color="ui-400" style="text-align: center; padding: 8px">
+            {{ searchInput ? 'No members found' : 'No members to invite' }}
+          </j-text>
+        </div>
+
+        <j-flex gap="300">
+          <j-button size="sm" variant="primary" :disabled="!selectedDids.size" @click="sendInvites">
+            <j-icon name="telephone-plus" size="xs" style="margin-right: 4px" />
+            Invite {{ selectedDids.size ? `(${selectedDids.size})` : '' }}
+          </j-button>
+          <j-button size="sm" @click="inviteAll" :disabled="!invitableMembers.length">
+            Invite all
+          </j-button>
+        </j-flex>
+      </j-flex>
+    </div>
+  </j-popover>
+</template>
+
+<script setup lang="ts">
+import { useAppStore, useWebrtcStore } from '@/stores';
+import { useUiStore } from '@/stores';
+import { storeToRefs } from 'pinia';
+import { computed, ref, unref, watch } from 'vue';
+
+const appStore = useAppStore();
+const webrtcStore = useWebrtcStore();
+const uiStore = useUiStore();
+
+const { me } = storeToRefs(appStore);
+const { agentsInCall, communityService } = storeToRefs(webrtcStore);
+const { isMobile } = storeToRefs(uiStore);
+
+// Resolve members via the community of the active call, not the current route.
+// InviteToCallPopover renders inside CallContainer (sibling of RouterView in MainView),
+// so Vue inject() cannot reach CommunityView's provider. unref() handles the case
+// where Pinia's reactive proxy auto-unwraps the nested members ref.
+const members = computed(() => unref(communityService.value?.members) ?? []);
+function getMembers() {
+  communityService.value?.getMembers();
+}
+
+const popover = ref<HTMLElement | null>(null);
+const searchInput = ref('');
+const selectedDids = ref<Set<string>>(new Set());
+
+// Members who are not already in the call and not the current user
+const invitableMembers = computed(() =>
+  members.value.filter((m) => {
+    if (!m.did || m.did === me.value.did) return false;
+    return !agentsInCall.value.some((a) => a.did === m.did);
+  }),
+);
+
+const filteredMembers = computed(() => {
+  if (!searchInput.value) return invitableMembers.value;
+  const q = searchInput.value.toLowerCase();
+  return invitableMembers.value.filter((m) => {
+    const fields = [m.username, m.givenName, m.familyName].filter(Boolean);
+    return fields.some((f) => f?.toLowerCase().includes(q));
+  });
+});
+
+function toggleMember(did: string) {
+  const next = new Set(selectedDids.value);
+  if (next.has(did)) next.delete(did);
+  else next.add(did);
+  selectedDids.value = next;
+}
+
+function sendInvites() {
+  if (!selectedDids.value.size) return;
+  webrtcStore.sendCallInvite([...selectedDids.value]);
+  selectedDids.value = new Set();
+  popover.value?.removeAttribute('open');
+}
+
+function inviteAll() {
+  const dids = invitableMembers.value.map((m) => m.did!).filter(Boolean);
+  if (!dids.length) return;
+  webrtcStore.sendCallInvite(dids);
+  popover.value?.removeAttribute('open');
+}
+
+// Refresh members when popover is opened
+watch(
+  () => popover.value?.hasAttribute('open'),
+  (isOpen) => {
+    if (isOpen) {
+      getMembers();
+      selectedDids.value = new Set();
+      searchInput.value = '';
+    }
+  },
+);
+</script>
+
+<style scoped lang="scss">
+.invite-popover {
+  padding: var(--j-space-400);
+  min-width: 240px;
+  max-width: 300px;
+}
+
+.member-list {
+  max-height: 200px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--j-space-200);
+}
+
+.member-row {
+  display: flex;
+  align-items: center;
+  gap: var(--j-space-300);
+  padding: var(--j-space-200) var(--j-space-300);
+  border-radius: var(--j-border-radius);
+  cursor: pointer;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: var(--j-color-ui-100);
+  }
+
+  &.selected {
+    background-color: var(--j-color-primary-50);
+  }
+}
+</style>

app/src/components/call/controls/MainCallControls.vue

@@ -92,6 +92,8 @@
       </j-menu>
     </j-popover>
 
+    <InviteToCallPopover v-if="!isMobile" />
+
     <j-tooltip placement="top" :title="hasCopiedLink ? 'Copied!' : 'Copy invite link'">
       <j-button @click="webrtcStore.copyCallLink" square circle :size="isMobile ? 'md' : 'lg'">
         <j-icon
@@ -131,6 +133,7 @@
 </template>
 
 <script setup lang="ts">
+import InviteToCallPopover from './InviteToCallPopover.vue';
 import TranscriptionIcon from '@/components/icons/TranscriptionIcon.vue';
 import {
   useAiStore,

app/src/composables/useSignallingService.ts

@@ -1,4 +1,4 @@
-import { useAiStore, useAppStore, useMediaDevicesStore, useRouteMemoryStore, useWebrtcStore } from '@/stores';
+import { useAiStore, useAppStore, useMediaDevicesStore, useRouteMemoryStore, useUiStore, useWebrtcStore } from '@/stores';
 import { stripChannelPrefix } from '@/utils/routeUtils';
 import { getCachedAgentProfile } from '@/utils/userProfileCache';
 import { Link, NeighbourhoodProxy, PerspectiveExpression } from '@coasys/ad4m';
@@ -12,6 +12,7 @@ const CLEANUP_INTERVAL = 10000; // 10 seconds between evaluations
 const ASLEEP_THRESHOLD = 30000; // 30 seconds before "asleep"
 const MAX_AGE = 60000; // 60 seconds before "offline"
 const NEW_STATE = 'agent/new-state';
+const CALL_INVITE = 'flux://call_invite';
 
 export function useSignallingService(neighbourhood: NeighbourhoodProxy): SignallingService {
   const tabCoordinator = useTabCoordinator();
@@ -20,6 +21,7 @@ export function useSignallingService(neighbourhood: NeighbourhoodProxy): Signall
   const mediaDevicesStore = useMediaDevicesStore();
   const routeMemoryStore = useRouteMemoryStore();
   const aiStore = useAiStore();
+  const uiStore = useUiStore();
 
   const { me } = storeToRefs(appStore);
   const { inCall, callRoute, myAgentStatus } = storeToRefs(webrtcStore);
@@ -201,6 +203,18 @@ export function useSignallingService(neighbourhood: NeighbourhoodProxy): Signall
     const { author, data } = link;
     const { source, predicate, target } = data;
 
+    // Handle call invites targeted at this agent
+    if (predicate === CALL_INVITE && target === me.value.did && author !== me.value.did) {
+      getCachedAgentProfile(author, appStore.ad4mClient).then((profile) => {
+        const name = profile?.username || author.slice(0, 12);
+        appStore.showSuccessToast({ message: `📞 ${name} invited you to a call` });
+      });
+      // Open the call window so the user can easily join
+      if (!webrtcStore.inCall) {
+        if (!uiStore.callWindowOpen) uiStore.setCallWindowOpen(true);
+      }
+    }
+
     if (predicate === NEW_STATE && link.author !== me.value.did) {
       // If this is their first broadcast, immediately broadcast my state so they dont have to wait for my next heartbeat
       if (target === 'first-broadcast') broadcastState();

app/src/stores/webrtcStore.ts

@@ -5,27 +5,29 @@ import popWav from '@/assets/audio/pop.wav';
 import { HEARTBEAT_INTERVAL } from '@/composables/useSignallingService';
 import { useTabCoordinator } from '@/composables/useTabCoordinator';
 import { getCachedAgentProfile } from '@/utils/userProfileCache';
-import { PerspectiveExpression } from '@coasys/ad4m';
+import { Link, PerspectiveExpression } from '@coasys/ad4m';
 import { AgentState, AgentStatus, CallHealth, Profile, RouteParams } from '@coasys/flux-types';
 import { Howl } from 'howler';
 import { defineStore, storeToRefs } from 'pinia';
 import type { Instance } from 'simple-peer';
-import { computed, ref, watch } from 'vue';
+import { computed, ref, toRaw, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useAppStore } from './appStore';
 import { useCommunityServiceStore } from './communityServiceStore';
 import { useMediaDevicesStore } from './mediaDevicesStore';
 import { useUiStore } from './uiStore';
 // @ts-ignore
 import SimplePeer from 'simple-peer/simplepeer.min.js';
-import { restoreNeighbourhoodPrefix } from '@/utils/routeUtils';
+import { restoreChannelPrefix, restoreNeighbourhoodPrefix } from '@/utils/routeUtils';
 
 export const CALL_HEALTH_CHECK_INTERVAL = 6000;
 export const WEBRTC_SIGNAL = 'webrtc/signal';
 export const WEBRTC_STREAM_REQUEST = 'webrtc/stream-request';
 export const WEBRTC_EMOJI = 'webrtc/emoji';
 export const WEBRTC_MEDIA_SETTINGS_CHANGED = 'webrtc/media-settings-changed';
 export const WEBRTC_LEAVING_CALL = 'webrtc/leaving-call';
+export const CALL_INVITE = 'flux://call_invite';
+export const CALL_STARTED = 'flux://call_started';
 const MAX_RECONNECTION_ATTEMPTS = 3;
 const defaultIceServers = [
   {
@@ -628,6 +630,23 @@ export const useWebrtcStore = defineStore(
           uiStore.setVideoLayout({ label: 'Focused', class: 'focused', icon: 'person-video2' });
         }
 
+        // If nobody else is in the call, persist a flux://call_started link so the
+        // AD4M notification trigger fires a push notification for the neighbourhood.
+        // Only the initiator emits this — late joiners don't, to avoid duplicate pushes.
+        // The link is cleaned up in leaveRoom() to prevent stale triggers.
+        if (agentsInCall.value.length === 0 && callRoute.value.channelId) {
+          const perspective = toRaw(communityService.value?.perspective);
+          const channelUrl = restoreChannelPrefix(callRoute.value.channelId);
+          if (perspective) {
+            perspective
+              .add(new Link({ source: channelUrl, predicate: CALL_STARTED, target: channelUrl }))
+              .then(() => {
+                persistedCallStartedLink.value = { source: channelUrl, target: channelUrl };
+              })
+              .catch((error) => console.error('Failed to persist call_started link:', error));
+          }
+        }
+
         inCall.value = true;
       } catch (error) {
         console.error('Error joining call:', error);
@@ -642,6 +661,10 @@ export const useWebrtcStore = defineStore(
         // Signal all peers that we're leaving the call
         signalPeers(WEBRTC_LEAVING_CALL);
 
+        // Clean up persisted call invite links to prevent stale notifications
+        cleanupInviteLinks();
+        cleanupCallStartedLink();
+
         // Close all peer connections
         peerConnections.value.forEach((_, did) => cleanupPeerConnection(did));
 
@@ -689,6 +712,61 @@ export const useWebrtcStore = defineStore(
       }
     }
 
+    // Track persisted invite links so we can clean them up when leaving the call
+    const persistedInviteLinks = ref<Array<{ source: string; target: string }>>([]);
+    const persistedCallStartedLink = ref<{ source: string; target: string } | null>(null);
+
+    function sendCallInvite(dids: string[]): void {
+      if (!signallingService.value || !callRoute.value.channelId) return;
+      const channelUrl = restoreChannelPrefix(callRoute.value.channelId);
+      const perspective = toRaw(communityService.value?.perspective);
+
+      for (const did of dids) {
+        // Broadcast signal for real-time notification (when recipient is online)
+        signallingService.value.sendSignal({
+          source: channelUrl,
+          predicate: CALL_INVITE,
+          target: did,
+        });
+
+        // Persist link for AD4M push notification trigger (when recipient is offline)
+        if (perspective) {
+          perspective
+            .add(new Link({ source: channelUrl, predicate: CALL_INVITE, target: did }))
+            .then(() => persistedInviteLinks.value.push({ source: channelUrl, target: did }))
+            .catch((error) => console.error('Failed to persist call invite link:', error));
+        }
+      }
+
+      const count = dids.length;
+      appStore.showSuccessToast({
+        message: `Call invite sent to ${count} member${count > 1 ? 's' : ''}`,
+      });
+    }
+
+    function cleanupInviteLinks(): void {
+      const perspective = toRaw(communityService.value?.perspective);
+      if (!perspective || !persistedInviteLinks.value.length) return;
+
+      for (const invite of persistedInviteLinks.value) {
+        perspective
+          .remove(new Link({ source: invite.source, predicate: CALL_INVITE, target: invite.target }))
+          .catch((error) => console.error('Failed to remove call invite link:', error));
+      }
+      persistedInviteLinks.value = [];
+    }
+
+    function cleanupCallStartedLink(): void {
+      const perspective = toRaw(communityService.value?.perspective);
+      const link = persistedCallStartedLink.value;
+      if (!perspective || !link) return;
+
+      perspective
+        .remove(new Link({ source: link.source, predicate: CALL_STARTED, target: link.target }))
+        .catch((error) => console.error('Failed to remove call_started link:', error));
+      persistedCallStartedLink.value = null;
+    }
+
     // Close the call window on route param changes if not in a call or a channel
     watch(
       () => route.params,
@@ -812,6 +890,7 @@ export const useWebrtcStore = defineStore(
       signalAgentsInCall,
       displayEmoji,
       copyCallLink,
+      sendCallInvite,
     };
   },
   { persist: false },