@aether-stack-dev/client-sdk 1.1.5 → 1.2.1

package/dist/AStackCSRClient.d.ts

@@ -35,6 +35,8 @@ export interface AStackCSREvents {
         model_loaded?: boolean;
         blendshape_count?: number;
     }) => void;
+    creditsExhausted: () => void;
+    sessionExpired: (reason: string) => void;
 }
 export type CallStatus = 'idle' | 'starting' | 'active' | 'stopping' | 'error';
 export declare class AStackCSRClient extends EventEmitter<AStackCSREvents> {
@@ -65,6 +67,7 @@ export declare class AStackCSRClient extends EventEmitter<AStackCSREvents> {
     startCall(options?: CallOptions): Promise<void>;
     private startImageCapture;
     private captureAndSendImage;
+    private cleanupLocalAudio;
     stopCall(): void;
     sendText(message: string): void;
     disconnect(): Promise<void>;

package/dist/SupabaseSignalingClient.d.ts

@@ -13,6 +13,8 @@ export declare class SupabaseSignalingClient extends EventEmitter {
     private maxReconnectAttempts;
     private reconnectDelay;
     private heartbeatInterval;
+    private supabaseUrl;
+    private supabasePublishableKey;
     constructor(config: AStackConfig);
     connect(sessionId: string, channelName: string, wsToken: string): Promise<void>;
     private handleSignalingMessage;

package/dist/avatar/index.d.ts

@@ -1,6 +1,4 @@
 export { VRMAvatar } from './VRMAvatar';
 export type { VRMAvatarProps } from './VRMAvatar';
-export { TalkingHeadAvatar } from './TalkingHeadAvatar';
-export type { TalkingHeadAvatarProps } from './TalkingHeadAvatar';
 export { ARKIT_BLENDSHAPES, BLENDSHAPE_COUNT } from './constants';
 export type { ARKitBlendshapeName } from './constants';

package/dist/index.esm.js

@@ -105,22 +105,28 @@ class AudioPlayer extends EventEmitter {
             const blendshapes = hasBlendshapes
                 ? chunk.blendshapes
                 : this.generateAmplitudeBlendshapes(floatArray);
-            const duration = audioBuffer.duration * 1000;
-            const startTime = performance.now();
+            const duration = audioBuffer.duration;
+            const audioStartTime = ctx.currentTime;
             let frameIndex = 0;
             this.isPlaying = true;
             this.emit('playbackStarted');
+            source.onended = () => {
+                if (this.animationFrameId !== null) {
+                    cancelAnimationFrame(this.animationFrameId);
+                    this.animationFrameId = null;
+                }
+                this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
+                this.emit('playbackEnded');
+                this.playNext();
+            };
             const animate = () => {
                 if (!this.isPlaying) {
                     this.animationFrameId = null;
                     return;
                 }
-                const elapsed = performance.now() - startTime;
+                const elapsed = ctx.currentTime - audioStartTime;
                 if (elapsed >= duration || frameIndex >= blendshapes.length) {
                     this.animationFrameId = null;
-                    this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
-                    this.emit('playbackEnded');
-                    this.playNext();
                     return;
                 }
                 const progress = elapsed / duration;
@@ -233,7 +239,7 @@ class AStackCSRClient extends EventEmitter {
                         this.hasConnected = true;
                         if (isReconnect) {
                             if (this.callStatus === 'active' || this.callStatus === 'starting') {
-                                this.stopCall();
+                                this.cleanupLocalAudio();
                                 this.emit('callStopped');
                             }
                             this.emit('reconnected');
@@ -340,6 +346,13 @@ class AStackCSRClient extends EventEmitter {
             case 'connected':
                 if (typeof data.clientId === 'string')
                     this.clientId = data.clientId;
+                if (data.protocol_version) {
+                    const major = parseInt(data.protocol_version.split('.')[0], 10);
+                    if (major > 1) {
+                        console.error(`[CSR] Protocol version mismatch: server=${data.protocol_version}, expected=1.x`);
+                        this.emit('error', new Error(`Protocol version mismatch: server=${data.protocol_version}`));
+                    }
+                }
                 break;
             case 'authenticated':
                 if (this.pendingAuth) {
@@ -432,6 +445,14 @@ class AStackCSRClient extends EventEmitter {
                     blendshape_count: typeof data.blendshape_count === 'number' ? data.blendshape_count : undefined
                 });
                 break;
+            case 'session_expired': {
+                const reason = typeof data.reason === 'string' ? data.reason : 'unknown';
+                this.emit('sessionExpired', reason);
+                if (reason === 'credits_exhausted') {
+                    this.emit('creditsExhausted');
+                }
+                break;
+            }
         }
     }
     async startCall(options) {
@@ -472,10 +493,11 @@ class AStackCSRClient extends EventEmitter {
                     this.startImageCapture();
                 }
             }
+            const { systemPrompt, priorContext, configOverrides, disableA2F, providers } = options || {};
             this.ws.send(JSON.stringify({
                 type: 'call_start',
                 fps: this.config.fps,
-                ...options
+                systemPrompt, priorContext, configOverrides, disableA2F, providers
             }));
             const source = this.audioContext.createMediaStreamSource(this.mediaStream);
             this.audioProcessor = new AudioWorkletNode(this.audioContext, 'audio-processor');
@@ -546,6 +568,33 @@ class AStackCSRClient extends EventEmitter {
             timestamp: Date.now()
         }));
     }
+    cleanupLocalAudio() {
+        if (this.imageCaptureInterval) {
+            clearInterval(this.imageCaptureInterval);
+            this.imageCaptureInterval = null;
+        }
+        if (this.videoRef) {
+            this.videoRef.srcObject = null;
+            this.videoRef = null;
+        }
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(track => track.stop());
+            this.mediaStream = null;
+        }
+        if (this.audioProcessor) {
+            this.audioProcessor.disconnect();
+            this.audioProcessor.port.onmessage = null;
+            this.audioProcessor = null;
+        }
+        if (this.audioContext) {
+            this.audioContext.close();
+            this.audioContext = null;
+        }
+        this.audioPlayer.clearQueue();
+        this.callStatus = 'idle';
+        this.currentBlendshapes = new Array(BLENDSHAPE_COUNT).fill(0);
+        this.emit('blendshapeUpdate', this.currentBlendshapes);
+    }
     stopCall() {
         if (this.imageCaptureInterval) {
             clearInterval(this.imageCaptureInterval);

package/dist/index.js

@@ -109,22 +109,28 @@ class AudioPlayer extends eventemitter3.EventEmitter {
             const blendshapes = hasBlendshapes
                 ? chunk.blendshapes
                 : this.generateAmplitudeBlendshapes(floatArray);
-            const duration = audioBuffer.duration * 1000;
-            const startTime = performance.now();
+            const duration = audioBuffer.duration;
+            const audioStartTime = ctx.currentTime;
             let frameIndex = 0;
             this.isPlaying = true;
             this.emit('playbackStarted');
+            source.onended = () => {
+                if (this.animationFrameId !== null) {
+                    cancelAnimationFrame(this.animationFrameId);
+                    this.animationFrameId = null;
+                }
+                this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
+                this.emit('playbackEnded');
+                this.playNext();
+            };
             const animate = () => {
                 if (!this.isPlaying) {
                     this.animationFrameId = null;
                     return;
                 }
-                const elapsed = performance.now() - startTime;
+                const elapsed = ctx.currentTime - audioStartTime;
                 if (elapsed >= duration || frameIndex >= blendshapes.length) {
                     this.animationFrameId = null;
-                    this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
-                    this.emit('playbackEnded');
-                    this.playNext();
                     return;
                 }
                 const progress = elapsed / duration;
@@ -237,7 +243,7 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
                         this.hasConnected = true;
                         if (isReconnect) {
                             if (this.callStatus === 'active' || this.callStatus === 'starting') {
-                                this.stopCall();
+                                this.cleanupLocalAudio();
                                 this.emit('callStopped');
                             }
                             this.emit('reconnected');
@@ -344,6 +350,13 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
             case 'connected':
                 if (typeof data.clientId === 'string')
                     this.clientId = data.clientId;
+                if (data.protocol_version) {
+                    const major = parseInt(data.protocol_version.split('.')[0], 10);
+                    if (major > 1) {
+                        console.error(`[CSR] Protocol version mismatch: server=${data.protocol_version}, expected=1.x`);
+                        this.emit('error', new Error(`Protocol version mismatch: server=${data.protocol_version}`));
+                    }
+                }
                 break;
             case 'authenticated':
                 if (this.pendingAuth) {
@@ -436,6 +449,14 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
                     blendshape_count: typeof data.blendshape_count === 'number' ? data.blendshape_count : undefined
                 });
                 break;
+            case 'session_expired': {
+                const reason = typeof data.reason === 'string' ? data.reason : 'unknown';
+                this.emit('sessionExpired', reason);
+                if (reason === 'credits_exhausted') {
+                    this.emit('creditsExhausted');
+                }
+                break;
+            }
         }
     }
     async startCall(options) {
@@ -476,10 +497,11 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
                     this.startImageCapture();
                 }
             }
+            const { systemPrompt, priorContext, configOverrides, disableA2F, providers } = options || {};
             this.ws.send(JSON.stringify({
                 type: 'call_start',
                 fps: this.config.fps,
-                ...options
+                systemPrompt, priorContext, configOverrides, disableA2F, providers
             }));
             const source = this.audioContext.createMediaStreamSource(this.mediaStream);
             this.audioProcessor = new AudioWorkletNode(this.audioContext, 'audio-processor');
@@ -550,6 +572,33 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
             timestamp: Date.now()
         }));
     }
+    cleanupLocalAudio() {
+        if (this.imageCaptureInterval) {
+            clearInterval(this.imageCaptureInterval);
+            this.imageCaptureInterval = null;
+        }
+        if (this.videoRef) {
+            this.videoRef.srcObject = null;
+            this.videoRef = null;
+        }
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(track => track.stop());
+            this.mediaStream = null;
+        }
+        if (this.audioProcessor) {
+            this.audioProcessor.disconnect();
+            this.audioProcessor.port.onmessage = null;
+            this.audioProcessor = null;
+        }
+        if (this.audioContext) {
+            this.audioContext.close();
+            this.audioContext = null;
+        }
+        this.audioPlayer.clearQueue();
+        this.callStatus = 'idle';
+        this.currentBlendshapes = new Array(BLENDSHAPE_COUNT).fill(0);
+        this.emit('blendshapeUpdate', this.currentBlendshapes);
+    }
     stopCall() {
         if (this.imageCaptureInterval) {
             clearInterval(this.imageCaptureInterval);

package/dist/react/index.d.ts

@@ -2,5 +2,3 @@ export { useAStackCSR } from './useAStackCSR';
 export type { UseAStackCSROptions, UseAStackCSRReturn } from './useAStackCSR';
 export { VRMAvatar } from '../avatar/VRMAvatar';
 export type { VRMAvatarProps } from '../avatar/VRMAvatar';
-export { TalkingHeadAvatar } from '../avatar/TalkingHeadAvatar';
-export type { TalkingHeadAvatarProps } from '../avatar/TalkingHeadAvatar';

package/dist/react.esm.js

@@ -1,3 +1,4 @@
+'use client';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { EventEmitter } from 'eventemitter3';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -110,22 +111,28 @@ class AudioPlayer extends EventEmitter {
             const blendshapes = hasBlendshapes
                 ? chunk.blendshapes
                 : this.generateAmplitudeBlendshapes(floatArray);
-            const duration = audioBuffer.duration * 1000;
-            const startTime = performance.now();
+            const duration = audioBuffer.duration;
+            const audioStartTime = ctx.currentTime;
             let frameIndex = 0;
             this.isPlaying = true;
             this.emit('playbackStarted');
+            source.onended = () => {
+                if (this.animationFrameId !== null) {
+                    cancelAnimationFrame(this.animationFrameId);
+                    this.animationFrameId = null;
+                }
+                this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
+                this.emit('playbackEnded');
+                this.playNext();
+            };
             const animate = () => {
                 if (!this.isPlaying) {
                     this.animationFrameId = null;
                     return;
                 }
-                const elapsed = performance.now() - startTime;
+                const elapsed = ctx.currentTime - audioStartTime;
                 if (elapsed >= duration || frameIndex >= blendshapes.length) {
                     this.animationFrameId = null;
-                    this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
-                    this.emit('playbackEnded');
-                    this.playNext();
                     return;
                 }
                 const progress = elapsed / duration;
@@ -238,7 +245,7 @@ class AStackCSRClient extends EventEmitter {
                         this.hasConnected = true;
                         if (isReconnect) {
                             if (this.callStatus === 'active' || this.callStatus === 'starting') {
-                                this.stopCall();
+                                this.cleanupLocalAudio();
                                 this.emit('callStopped');
                             }
                             this.emit('reconnected');
@@ -345,6 +352,13 @@ class AStackCSRClient extends EventEmitter {
             case 'connected':
                 if (typeof data.clientId === 'string')
                     this.clientId = data.clientId;
+                if (data.protocol_version) {
+                    const major = parseInt(data.protocol_version.split('.')[0], 10);
+                    if (major > 1) {
+                        console.error(`[CSR] Protocol version mismatch: server=${data.protocol_version}, expected=1.x`);
+                        this.emit('error', new Error(`Protocol version mismatch: server=${data.protocol_version}`));
+                    }
+                }
                 break;
             case 'authenticated':
                 if (this.pendingAuth) {
@@ -437,6 +451,14 @@ class AStackCSRClient extends EventEmitter {
                     blendshape_count: typeof data.blendshape_count === 'number' ? data.blendshape_count : undefined
                 });
                 break;
+            case 'session_expired': {
+                const reason = typeof data.reason === 'string' ? data.reason : 'unknown';
+                this.emit('sessionExpired', reason);
+                if (reason === 'credits_exhausted') {
+                    this.emit('creditsExhausted');
+                }
+                break;
+            }
         }
     }
     async startCall(options) {
@@ -477,10 +499,11 @@ class AStackCSRClient extends EventEmitter {
                     this.startImageCapture();
                 }
             }
+            const { systemPrompt, priorContext, configOverrides, disableA2F, providers } = options || {};
             this.ws.send(JSON.stringify({
                 type: 'call_start',
                 fps: this.config.fps,
-                ...options
+                systemPrompt, priorContext, configOverrides, disableA2F, providers
             }));
             const source = this.audioContext.createMediaStreamSource(this.mediaStream);
             this.audioProcessor = new AudioWorkletNode(this.audioContext, 'audio-processor');
@@ -551,6 +574,33 @@ class AStackCSRClient extends EventEmitter {
             timestamp: Date.now()
         }));
     }
+    cleanupLocalAudio() {
+        if (this.imageCaptureInterval) {
+            clearInterval(this.imageCaptureInterval);
+            this.imageCaptureInterval = null;
+        }
+        if (this.videoRef) {
+            this.videoRef.srcObject = null;
+            this.videoRef = null;
+        }
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(track => track.stop());
+            this.mediaStream = null;
+        }
+        if (this.audioProcessor) {
+            this.audioProcessor.disconnect();
+            this.audioProcessor.port.onmessage = null;
+            this.audioProcessor = null;
+        }
+        if (this.audioContext) {
+            this.audioContext.close();
+            this.audioContext = null;
+        }
+        this.audioPlayer.clearQueue();
+        this.callStatus = 'idle';
+        this.currentBlendshapes = new Array(BLENDSHAPE_COUNT).fill(0);
+        this.emit('blendshapeUpdate', this.currentBlendshapes);
+    }
     stopCall() {
         if (this.imageCaptureInterval) {
             clearInterval(this.imageCaptureInterval);
@@ -786,11 +836,19 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
         const container = containerRef.current;
         if (!container)
             return;
-        const renderer = new THREE.WebGLRenderer({
-            antialias: true,
-            alpha: true,
-            powerPreference: 'high-performance'
-        });
+        let renderer;
+        try {
+            renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                alpha: true,
+                powerPreference: 'high-performance'
+            });
+        }
+        catch {
+            setError('WebGL is not supported in this browser');
+            setLoading(false);
+            return;
+        }
         renderer.setSize(width, height);
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
         renderer.outputColorSpace = THREE.SRGBColorSpace;
@@ -898,149 +956,4 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
     return (jsxs("div", { className: "relative", style: { width, height }, children: [jsx("div", { ref: containerRef, className: "rounded-lg overflow-hidden" }), loading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg", children: jsx("div", { className: "text-white text-sm", children: "Loading VRM avatar..." }) })), error && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg", children: jsx("div", { className: "text-white text-sm", children: error }) }))] }));
 }
 
-function TalkingHeadAvatar({ blendshapes, width = 400, height = 400, avatarUrl = 'https://models.readyplayer.me/6460d95f9ae10f45bffb2864.glb?morphTargets=ARKit,Oculus+Visemes,mouthOpen,mouthSmile,eyesClosed,eyesLookUp,eyesLookDown&textureSizeLimit=1024&textureFormat=png' }) {
-    const iframeRef = useRef(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return;
-        const handleMessage = (event) => {
-            if (event.data?.type === 'talkinghead-ready') {
-                setLoading(false);
-            }
-            else if (event.data?.type === 'talkinghead-error') {
-                setError(event.data.message || 'Failed to load TalkingHead avatar');
-                setLoading(false);
-            }
-        };
-        window.addEventListener('message', handleMessage);
-        return () => window.removeEventListener('message', handleMessage);
-    }, []);
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow || blendshapes.length === 0)
-            return;
-        const blendshapeData = {};
-        ARKIT_BLENDSHAPES.forEach((name, i) => {
-            blendshapeData[name] = blendshapes[i] || 0;
-        });
-        iframe.contentWindow.postMessage({
-            type: 'update-blendshapes',
-            blendshapes: blendshapeData
-        }, '*');
-    }, [blendshapes]);
-    const iframeSrc = `data:text/html,${encodeURIComponent(`
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a2e; }
-    #avatar { width: 100%; height: 100%; }
-  </style>
-  <script type="importmap">
-  {
-    "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
-      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"
-    }
-  }
-  ${"</"}script>
-</head>
-<body>
-  <div id="avatar"></div>
-  <script type="module">
-    import { TalkingHead } from 'https://cdn.jsdelivr.net/npm/@met4citizen/talkinghead@1.6.0/modules/talkinghead.mjs';
-
-    let head = null;
-
-    async function init() {
-      try {
-        const container = document.getElementById('avatar');
-        head = new TalkingHead(container, {
-          ttsEndpoint: null,
-          cameraView: 'head',
-          cameraRotateEnable: false,
-          cameraPanEnable: false,
-          cameraZoomEnable: false,
-          lightAmbientColor: 0xffffff,
-          lightAmbientIntensity: 0.6,
-          lightDirectColor: 0xffffff,
-          lightDirectIntensity: 0.8,
-          lightSpotIntensity: 0,
-          avatarMood: 'neutral',
-          modelPixelRatio: Math.min(window.devicePixelRatio, 2),
-          modelFPS: 30
-        });
-
-        await head.showAvatar({
-          url: '${avatarUrl}',
-          body: 'F',
-          avatarMood: 'neutral',
-          lipsyncLang: 'en'
-        });
-
-        window.parent.postMessage({ type: 'talkinghead-ready' }, '*');
-      } catch (err) {
-        console.error('[TalkingHead] Error:', err);
-        window.parent.postMessage({ type: 'talkinghead-error', message: err.message }, '*');
-      }
-    }
-
-    let started = false;
-
-    window.addEventListener('message', (event) => {
-      if (event.data?.type === 'update-blendshapes' && head) {
-        if (!started) {
-          head.start();
-          started = true;
-        }
-
-        const shapes = event.data.blendshapes;
-        const mtAvatar = head.mtAvatar;
-
-        if (mtAvatar) {
-          for (const [name, value] of Object.entries(shapes)) {
-            const v = Math.min(Number(value) || 0, 1);
-            if (mtAvatar[name]) {
-              mtAvatar[name].value = v;
-              mtAvatar[name].applied = v;
-              if (mtAvatar[name].ms && mtAvatar[name].is) {
-                for (let i = 0; i < mtAvatar[name].ms.length; i++) {
-                  const influences = mtAvatar[name].ms[i];
-                  const idx = mtAvatar[name].is[i];
-                  if (influences && idx !== undefined) {
-                    influences[idx] = v;
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        if (head.morphs) {
-          for (const mesh of head.morphs) {
-            if (mesh.morphTargetDictionary && mesh.morphTargetInfluences) {
-              for (const [name, value] of Object.entries(shapes)) {
-                const idx = mesh.morphTargetDictionary[name];
-                if (idx !== undefined) {
-                  mesh.morphTargetInfluences[idx] = Math.min(Number(value) || 0, 1);
-                }
-              }
-            }
-          }
-        }
-      }
-    });
-
-    init();
-  ${"</"}script>
-</body>
-</html>
-  `)}`;
-    return (jsxs("div", { className: "relative bg-gray-900 rounded-lg overflow-hidden", style: { width, height }, children: [jsx("iframe", { ref: iframeRef, src: iframeSrc, style: { width: '100%', height: '100%', border: 'none' }, sandbox: "allow-scripts allow-same-origin" }), loading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg", children: jsx("div", { className: "text-white text-sm", children: "Loading TalkingHead avatar..." }) })), error && (jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg", children: jsx("div", { className: "text-white text-sm text-center p-4", children: error }) }))] }));
-}
-
-export { TalkingHeadAvatar, VRMAvatar, useAStackCSR };
+export { VRMAvatar, useAStackCSR };

package/dist/react.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var react = require('react');
@@ -131,22 +132,28 @@ class AudioPlayer extends eventemitter3.EventEmitter {
             const blendshapes = hasBlendshapes
                 ? chunk.blendshapes
                 : this.generateAmplitudeBlendshapes(floatArray);
-            const duration = audioBuffer.duration * 1000;
-            const startTime = performance.now();
+            const duration = audioBuffer.duration;
+            const audioStartTime = ctx.currentTime;
             let frameIndex = 0;
             this.isPlaying = true;
             this.emit('playbackStarted');
+            source.onended = () => {
+                if (this.animationFrameId !== null) {
+                    cancelAnimationFrame(this.animationFrameId);
+                    this.animationFrameId = null;
+                }
+                this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
+                this.emit('playbackEnded');
+                this.playNext();
+            };
             const animate = () => {
                 if (!this.isPlaying) {
                     this.animationFrameId = null;
                     return;
                 }
-                const elapsed = performance.now() - startTime;
+                const elapsed = ctx.currentTime - audioStartTime;
                 if (elapsed >= duration || frameIndex >= blendshapes.length) {
                     this.animationFrameId = null;
-                    this.emit('blendshapeUpdate', new Array(BLENDSHAPE_COUNT).fill(0));
-                    this.emit('playbackEnded');
-                    this.playNext();
                     return;
                 }
                 const progress = elapsed / duration;
@@ -259,7 +266,7 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
                         this.hasConnected = true;
                         if (isReconnect) {
                             if (this.callStatus === 'active' || this.callStatus === 'starting') {
-                                this.stopCall();
+                                this.cleanupLocalAudio();
                                 this.emit('callStopped');
                             }
                             this.emit('reconnected');
@@ -366,6 +373,13 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
             case 'connected':
                 if (typeof data.clientId === 'string')
                     this.clientId = data.clientId;
+                if (data.protocol_version) {
+                    const major = parseInt(data.protocol_version.split('.')[0], 10);
+                    if (major > 1) {
+                        console.error(`[CSR] Protocol version mismatch: server=${data.protocol_version}, expected=1.x`);
+                        this.emit('error', new Error(`Protocol version mismatch: server=${data.protocol_version}`));
+                    }
+                }
                 break;
             case 'authenticated':
                 if (this.pendingAuth) {
@@ -458,6 +472,14 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
                     blendshape_count: typeof data.blendshape_count === 'number' ? data.blendshape_count : undefined
                 });
                 break;
+            case 'session_expired': {
+                const reason = typeof data.reason === 'string' ? data.reason : 'unknown';
+                this.emit('sessionExpired', reason);
+                if (reason === 'credits_exhausted') {
+                    this.emit('creditsExhausted');
+                }
+                break;
+            }
         }
     }
     async startCall(options) {
@@ -498,10 +520,11 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
                     this.startImageCapture();
                 }
             }
+            const { systemPrompt, priorContext, configOverrides, disableA2F, providers } = options || {};
             this.ws.send(JSON.stringify({
                 type: 'call_start',
                 fps: this.config.fps,
-                ...options
+                systemPrompt, priorContext, configOverrides, disableA2F, providers
             }));
             const source = this.audioContext.createMediaStreamSource(this.mediaStream);
             this.audioProcessor = new AudioWorkletNode(this.audioContext, 'audio-processor');
@@ -572,6 +595,33 @@ class AStackCSRClient extends eventemitter3.EventEmitter {
             timestamp: Date.now()
         }));
     }
+    cleanupLocalAudio() {
+        if (this.imageCaptureInterval) {
+            clearInterval(this.imageCaptureInterval);
+            this.imageCaptureInterval = null;
+        }
+        if (this.videoRef) {
+            this.videoRef.srcObject = null;
+            this.videoRef = null;
+        }
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(track => track.stop());
+            this.mediaStream = null;
+        }
+        if (this.audioProcessor) {
+            this.audioProcessor.disconnect();
+            this.audioProcessor.port.onmessage = null;
+            this.audioProcessor = null;
+        }
+        if (this.audioContext) {
+            this.audioContext.close();
+            this.audioContext = null;
+        }
+        this.audioPlayer.clearQueue();
+        this.callStatus = 'idle';
+        this.currentBlendshapes = new Array(BLENDSHAPE_COUNT).fill(0);
+        this.emit('blendshapeUpdate', this.currentBlendshapes);
+    }
     stopCall() {
         if (this.imageCaptureInterval) {
             clearInterval(this.imageCaptureInterval);
@@ -807,11 +857,19 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
         const container = containerRef.current;
         if (!container)
             return;
-        const renderer = new THREE__namespace.WebGLRenderer({
-            antialias: true,
-            alpha: true,
-            powerPreference: 'high-performance'
-        });
+        let renderer;
+        try {
+            renderer = new THREE__namespace.WebGLRenderer({
+                antialias: true,
+                alpha: true,
+                powerPreference: 'high-performance'
+            });
+        }
+        catch {
+            setError('WebGL is not supported in this browser');
+            setLoading(false);
+            return;
+        }
         renderer.setSize(width, height);
         renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
         renderer.outputColorSpace = THREE__namespace.SRGBColorSpace;
@@ -919,151 +977,5 @@ function VRMAvatar({ blendshapes, width = 400, height = 400, modelUrl = '/models
     return (jsxRuntime.jsxs("div", { className: "relative", style: { width, height }, children: [jsxRuntime.jsx("div", { ref: containerRef, className: "rounded-lg overflow-hidden" }), loading && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg", children: jsxRuntime.jsx("div", { className: "text-white text-sm", children: "Loading VRM avatar..." }) })), error && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg", children: jsxRuntime.jsx("div", { className: "text-white text-sm", children: error }) }))] }));
 }
 
-function TalkingHeadAvatar({ blendshapes, width = 400, height = 400, avatarUrl = 'https://models.readyplayer.me/6460d95f9ae10f45bffb2864.glb?morphTargets=ARKit,Oculus+Visemes,mouthOpen,mouthSmile,eyesClosed,eyesLookUp,eyesLookDown&textureSizeLimit=1024&textureFormat=png' }) {
-    const iframeRef = react.useRef(null);
-    const [loading, setLoading] = react.useState(true);
-    const [error, setError] = react.useState(null);
-    react.useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return;
-        const handleMessage = (event) => {
-            if (event.data?.type === 'talkinghead-ready') {
-                setLoading(false);
-            }
-            else if (event.data?.type === 'talkinghead-error') {
-                setError(event.data.message || 'Failed to load TalkingHead avatar');
-                setLoading(false);
-            }
-        };
-        window.addEventListener('message', handleMessage);
-        return () => window.removeEventListener('message', handleMessage);
-    }, []);
-    react.useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe?.contentWindow || blendshapes.length === 0)
-            return;
-        const blendshapeData = {};
-        ARKIT_BLENDSHAPES.forEach((name, i) => {
-            blendshapeData[name] = blendshapes[i] || 0;
-        });
-        iframe.contentWindow.postMessage({
-            type: 'update-blendshapes',
-            blendshapes: blendshapeData
-        }, '*');
-    }, [blendshapes]);
-    const iframeSrc = `data:text/html,${encodeURIComponent(`
-<!DOCTYPE html>
-<html>
-<head>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a2e; }
-    #avatar { width: 100%; height: 100%; }
-  </style>
-  <script type="importmap">
-  {
-    "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
-      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"
-    }
-  }
-  ${"</"}script>
-</head>
-<body>
-  <div id="avatar"></div>
-  <script type="module">
-    import { TalkingHead } from 'https://cdn.jsdelivr.net/npm/@met4citizen/talkinghead@1.6.0/modules/talkinghead.mjs';
-
-    let head = null;
-
-    async function init() {
-      try {
-        const container = document.getElementById('avatar');
-        head = new TalkingHead(container, {
-          ttsEndpoint: null,
-          cameraView: 'head',
-          cameraRotateEnable: false,
-          cameraPanEnable: false,
-          cameraZoomEnable: false,
-          lightAmbientColor: 0xffffff,
-          lightAmbientIntensity: 0.6,
-          lightDirectColor: 0xffffff,
-          lightDirectIntensity: 0.8,
-          lightSpotIntensity: 0,
-          avatarMood: 'neutral',
-          modelPixelRatio: Math.min(window.devicePixelRatio, 2),
-          modelFPS: 30
-        });
-
-        await head.showAvatar({
-          url: '${avatarUrl}',
-          body: 'F',
-          avatarMood: 'neutral',
-          lipsyncLang: 'en'
-        });
-
-        window.parent.postMessage({ type: 'talkinghead-ready' }, '*');
-      } catch (err) {
-        console.error('[TalkingHead] Error:', err);
-        window.parent.postMessage({ type: 'talkinghead-error', message: err.message }, '*');
-      }
-    }
-
-    let started = false;
-
-    window.addEventListener('message', (event) => {
-      if (event.data?.type === 'update-blendshapes' && head) {
-        if (!started) {
-          head.start();
-          started = true;
-        }
-
-        const shapes = event.data.blendshapes;
-        const mtAvatar = head.mtAvatar;
-
-        if (mtAvatar) {
-          for (const [name, value] of Object.entries(shapes)) {
-            const v = Math.min(Number(value) || 0, 1);
-            if (mtAvatar[name]) {
-              mtAvatar[name].value = v;
-              mtAvatar[name].applied = v;
-              if (mtAvatar[name].ms && mtAvatar[name].is) {
-                for (let i = 0; i < mtAvatar[name].ms.length; i++) {
-                  const influences = mtAvatar[name].ms[i];
-                  const idx = mtAvatar[name].is[i];
-                  if (influences && idx !== undefined) {
-                    influences[idx] = v;
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        if (head.morphs) {
-          for (const mesh of head.morphs) {
-            if (mesh.morphTargetDictionary && mesh.morphTargetInfluences) {
-              for (const [name, value] of Object.entries(shapes)) {
-                const idx = mesh.morphTargetDictionary[name];
-                if (idx !== undefined) {
-                  mesh.morphTargetInfluences[idx] = Math.min(Number(value) || 0, 1);
-                }
-              }
-            }
-          }
-        }
-      }
-    });
-
-    init();
-  ${"</"}script>
-</body>
-</html>
-  `)}`;
-    return (jsxRuntime.jsxs("div", { className: "relative bg-gray-900 rounded-lg overflow-hidden", style: { width, height }, children: [jsxRuntime.jsx("iframe", { ref: iframeRef, src: iframeSrc, style: { width: '100%', height: '100%', border: 'none' }, sandbox: "allow-scripts allow-same-origin" }), loading && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-800 rounded-lg", children: jsxRuntime.jsx("div", { className: "text-white text-sm", children: "Loading TalkingHead avatar..." }) })), error && (jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg", children: jsxRuntime.jsx("div", { className: "text-white text-sm text-center p-4", children: error }) }))] }));
-}
-
-exports.TalkingHeadAvatar = TalkingHeadAvatar;
 exports.VRMAvatar = VRMAvatar;
 exports.useAStackCSR = useAStackCSR;

package/dist/types.d.ts

@@ -2,7 +2,7 @@ export interface AStackConfig {
     sessionToken: string;
     apiEndpoint?: string;
     supabaseUrl: string;
-    supabaseAnonKey: string;
+    supabasePublishableKey: string;
     organizationId?: string;
     endUserId?: string;
     audio?: {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@aether-stack-dev/client-sdk",
-  "version": "1.1.5",
+  "version": "1.2.1",
   "type": "module",
   "description": "JavaScript/TypeScript SDK for AStack video-to-video AI conversations",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
-  "types": "dist/core.d.ts",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
       "require": "./dist/index.js",
-      "types": "./dist/core.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./react": {
       "import": "./dist/react.esm.js",
@@ -28,6 +28,7 @@
     "build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
     "test": "jest",
     "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
     "lint": "eslint src/**/*.{ts,tsx}",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build"
@@ -43,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@pixiv/three-vrm": "^3.4.4",
-    "@supabase/supabase-js": "^2.86.2",
+    "@supabase/supabase-js": "^2.100.0",
     "eventemitter3": "^5.0.1",
     "three": "^0.181.2",
     "uuid": "^9.0.1"

package/dist/avatar/TalkingHeadAvatar.d.ts

@@ -1,8 +0,0 @@
-export interface TalkingHeadAvatarProps {
-    blendshapes: number[];
-    width?: number;
-    height?: number;
-    avatarUrl?: string;
-}
-export declare function TalkingHeadAvatar({ blendshapes, width, height, avatarUrl }: TalkingHeadAvatarProps): import("react/jsx-runtime").JSX.Element;
-export default TalkingHeadAvatar;