Incoming {c.kind === 'video' ? 'video' : 'audio'} call

{/* Avatar with pulsing rings */}

{[0, 1, 2].map(i => (

))}

{c.name}

{c.kind === 'video' ? 'video' : 'voice'} · via {c.conn === 'ble' ? 'BLE mesh' : c.conn === 'mesh' ? 'mesh' : c.conn === 'mediator' ? 'mediator' : 'internet'}

{MIc.shield({ s: 11 })} verified · e2e

{/* Quick actions row */}

{[ { id: 'remind', icon: , label: 'Remind' }, { id: 'msg', icon: MIc.chat({ s: 16 }), label: 'Message' }, ].map(a => ( ))}

{/* Decline / Accept */}

); } // ─── In-call screen (active call) ──────────────────────────── // Supports audio mode (avatar centered) and video mode (remote feed + PiP self). function MInCall({ caller, kind = 'audio', onHangUp }) { const c = caller || M_CALL_LOG[0]; const [elapsed, setElapsed] = React.useState(12); // seconds — visual only const [muted, setMuted] = React.useState(false); const [speaker, setSpeaker] = React.useState(true); const [videoOn, setVideoOn] = React.useState(kind === 'video'); React.useEffect(() => { const id = setInterval(() => setElapsed(s => s + 1), 1000); return () => clearInterval(id); }, []); const fmt = (s) => `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`; return (

{/* Video mode — remote feed simulated as gradient with bottom self-PiP */} {videoOn && ( <>

{/* self PiP */}

You

)} {/* Top bar */}

{c.name}

{fmt(elapsed)} · E2E

{/* Centerpiece (audio mode only) */} {!videoOn && (

{[0, 1].map(i => (

))}

)} {videoOn &&

} {/* Call connection chip */}

32 kbps · 24 ms

{/* Action grid */}

: } label={muted ? 'Unmute' : 'Mute'} active={muted} onClick={() => setMuted(m => !m)} /> } label={speaker ? 'Speaker' : 'Phone'} active={speaker} onClick={() => setSpeaker(s => !s)} /> : } label={videoOn ? 'Video' : 'Off'} active={videoOn} onClick={() => setVideoOn(v => !v)} /> {}} />

{/* Hang up */}

); } // Small button used inside the in-call action grid function CallBtn({ icon, label, active, onClick }) { return ( ); } // Tiny stand-in for a remote video feed — uses the peer's avatar tinted full-bleed function BriefImageFallbackOrAvatar({ c }) { return (

); } // ─── Empty calls state (zero history) ─────────────────────── // Designed zero-state: friendly illustration, primary CTAs, and a few // suggested peers pulled from the mesh so the page never feels dead. const M_CALL_SUGGESTED = [ { name: 'Rohan Sharma', initials: 'RS', bg: '#F472B6', avatar: 'https://i.pravatar.cc/120?img=12', conn: 'internet', sub: 'Online' }, { name: 'Aishwarya Iyer', initials: 'AI', bg: '#EF4444', avatar: 'https://i.pravatar.cc/120?img=49', conn: 'ble', sub: 'Nearby · BLE' }, { name: 'Priya Nair', initials: 'PN', bg: '#22D3EE', avatar: 'https://i.pravatar.cc/120?img=47', conn: 'mesh', sub: 'On mesh' }, ]; function MScreenCallsEmpty({ onCall, onShowHistory }) { return (

{/* Header */}

Calls

{onShowHistory && }

{/* Zero-state hero */}

{/* concentric rings */} {[0, 1, 2].map(i => (

))}

{MIc.calls({ s: 28 })}

No calls yet

Start an end-to-end encrypted voice or video call over DIDComm — no phone number needed.

{/* Primary CTAs */}

{/* Suggested peers */}

Suggested · from your mesh

{M_CALL_SUGGESTED.map((c, i, a) => (

{c.name}

{c.sub}

))}

{/* Privacy footer */}

{MIc.shield({ s: 13 })}

Calls are E2E encrypted via DIDComm WebRTC. Ajna never sees who you talk to.

); } Object.assign(window, { M_CALL_LOG, MScreenCalls, MScreenCallsEmpty, M_CALL_SUGGESTED, MIncomingCall, MInCall, });