@prabhjeet.me/wakeywakey 1.1.0 → 2.1.0

package/fesm2022/prabhjeet.me-wakeywakey.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, PLATFORM_ID, HostListener, ViewChild, Component, EventEmitter, Output, provideAppInitializer } from '@angular/core';
-import { Subject, withLatestFrom, concatMap, filter, map, distinctUntilChanged, switchMap, EMPTY, tap, ignoreElements, timer, merge, take, throttleTime, share, delay, takeUntil, scan } from 'rxjs';
+import { Injectable, InjectionToken, inject, PLATFORM_ID, NgZone, HostListener, ViewChild, Component, EventEmitter, Output, provideAppInitializer } from '@angular/core';
+import { Subject, filter, withLatestFrom, concatMap, map, tap, distinctUntilChanged, switchMap, EMPTY, ignoreElements, timer, merge, take, throttleTime, share, takeUntil, scan } from 'rxjs';
 import { SubSink } from 'subsink';
 import { Tensor, env, InferenceSession } from 'onnxruntime-web';
 import { loadRnnoise, RnnoiseWorkletNode } from '@sapphi-red/web-noise-suppressor';
-import { isPlatformBrowser, isPlatformServer } from '@angular/common';
+import { isPlatformBrowser, isPlatformServer, NgClass } from '@angular/common';
 import * as THREE from 'three';
 
 /**
@@ -143,6 +143,25 @@ class AudioUtil {
     }
 }
 
+class OrbComponentService {
+    constructor() {
+        this.state = new Subject();
+    }
+    /**
+     * Set state of orb
+     */
+    setState(state) {
+        this.state.next(state);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrbComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrbComponentService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrbComponentService, decorators: [{
+            type: Injectable
+        }] });
+
+const DEFAULT_THROTTLE_TIME = 1000;
+
 /**
  * Wakey wakey config token
  */
@@ -174,7 +193,7 @@ class ConfigService {
      * Throttle time
      */
     get throttleTime() {
-        return this._config.throttleTime;
+        return this._config.throttleTime ?? DEFAULT_THROTTLE_TIME;
     }
     /**
      * Mode
@@ -186,7 +205,13 @@ class ConfigService {
      * Base path of assets
      */
     get basePath() {
-        return this._config.basePath || '/wakeywakey';
+        return this._config.basePath ?? '/wakeywakey';
+    }
+    /**
+     * Hotkey
+     */
+    get hotkey() {
+        return this._config.hotkey ?? 'Space';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigService }); }
@@ -400,6 +425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 
 const DEFAULT_SILENCE_DURATION = 1000;
+const DEFAULT_SPEECH_THRESHOLD_TIME = 300;
 
 class MicrophoneService {
     constructor() {
@@ -416,6 +442,10 @@ class MicrophoneService {
          * List of available microphones
          */
         this._microphones = [];
+        /**
+         * Is muted
+         */
+        this._isMuted = false;
     }
     /**
      * List of available microphones
@@ -429,6 +459,43 @@ class MicrophoneService {
     get data() {
         return this._data;
     }
+    /**
+     * Audio context
+     */
+    get audioContext() {
+        return this._audioContext;
+    }
+    /**
+     * Analyzer node
+     */
+    get analyzer() {
+        return this._analyser;
+    }
+    /**
+     * Media steam source node
+     */
+    get sourceNode() {
+        return this._source;
+    }
+    /**
+     * Muted state
+     */
+    get isMuted() {
+        return this._isMuted;
+    }
+    /**
+     * Set gain
+     */
+    set gain(value) {
+        if (this._gainNode)
+            this._gainNode.gain.value = value;
+    }
+    /**
+     * Set muted state
+     */
+    set isMuted(set) {
+        this._isMuted = set;
+    }
     /**
      * Set input source
      */
@@ -438,6 +505,8 @@ class MicrophoneService {
     ngOnDestroy() {
         // close audio context
         this._audioContext?.close();
+        this._source?.disconnect();
+        this._analyser?.disconnect();
         this._stream?.getTracks().forEach((track) => {
             track.stop();
         });
@@ -453,13 +522,18 @@ class MicrophoneService {
             this.ngOnDestroy();
             // request permission
             this._stream = await navigator.mediaDevices.getUserMedia({
-                audio: { deviceId: { exact: deviceId }, noiseSuppression: false, echoCancellation: false },
+                audio: {
+                    deviceId: { exact: deviceId },
+                    noiseSuppression: this._config.audio.noiseSuppression?.nativeNoiseSuppression || false,
+                    echoCancellation: this._config.audio.noiseSuppression?.nativeEchoCancellation || false,
+                    autoGainControl: this._config.audio.noiseSuppression?.autoGainControl || false,
+                },
             });
             this._event.log.next(`${MicrophoneService.name}: Microphone permission granted (deviceid: '${deviceId ?? 'default'}')!`);
             // save list of microphones
             this._microphones = await this._microphoneList();
             // monitor audio
-            this._monitor();
+            await this._monitor();
             return true;
         }
         catch (error) {
@@ -497,6 +571,8 @@ class MicrophoneService {
     async _workletNode() {
         // Create audio context
         this._audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
+        this._analyser = this._audioContext.createAnalyser();
+        this._analyser.fftSize = 256;
         if (this._config.audio.noiseSuppression) {
             await this._audioContext.audioWorklet.addModule(this._config.audio.noiseSuppression.worklet ??
                 `${this._config.basePath}/worklets/workletProcessor.js`);
@@ -507,7 +583,7 @@ class MicrophoneService {
         await this._audioContext.audioWorklet.addModule(workletURL);
         URL.revokeObjectURL(workletURL);
         // Create Nodes
-        const source = this._audioContext.createMediaStreamSource(this._stream);
+        this._source = this._audioContext.createMediaStreamSource(this._stream);
         // Gain Node
         const gainNode = this._audioContext.createGain();
         gainNode.gain.value = this._config.audio.gain;
@@ -524,12 +600,16 @@ class MicrophoneService {
                 wasmBinary: rnnoiseWasmBinary,
                 maxChannels: 1, // Standard for mono microphone input
             });
-            source.connect(rnnoiseNode);
+            this._source.connect(rnnoiseNode);
             rnnoiseNode.connect(gainNode);
         }
         else {
-            source.connect(gainNode);
+            this._source.connect(gainNode);
         }
+        this._source.connect(this._analyser);
+        // loop back mic sound
+        if (this._config.audio.loopBackToSpeakers)
+            this._analyser.connect(this.audioContext.destination);
         // Custom Worklet Node
         const workletNode = new AudioWorkletNode(this._audioContext, MICROPHONE_PROCESSOR_NAME);
         // Connect the Graph: Source -> RNNoise (if noise suppression) -> Gain -> Custom Worklet
@@ -573,6 +653,7 @@ class SpeechRecognitionService {
          */
         this._event = inject(EventService);
         this._platform = inject(PlatformService);
+        this._mic = inject(MicrophoneService);
         /**
          * Transcript
          */
@@ -606,9 +687,16 @@ class SpeechRecognitionService {
         this._recognition.lang = 'en-US'; // Set language
         this._recognition.continuous = true; // Keep listening even if the user pauses
         this._recognition.interimResults = true; // Show results while the user is still speaking
+        this._recognition.onend = () => {
+            this.reset();
+            this.init(); // start
+        };
         // 3. Handle Results
         this._recognition.onresult = (event) => {
             this._transcript = '';
+            // Don't capture if muted
+            if (this._mic.isMuted)
+                return;
             for (let i = event.resultIndex; i < event.results.length; i++)
                 this._transcript += event.results[i][0].transcript;
         };
@@ -762,7 +850,8 @@ class AudioService {
             // Fire a speech event
             this._event.speech.next({
                 ...data,
-                vadScore: await this._vad.score(data.sample),
+                sample: this._mic.isMuted ? new Float32Array(1280).fill(0) : data.sample, // no speech data if muted
+                vadScore: await this._vad.score(data.sample), // emit vad score even if muted
                 get hasVoiceActivity() {
                     return this.vadScore > (that._config.audio.vadThreshold ?? DEFAULT_VAD_THRESHOLD);
                 },
@@ -794,6 +883,7 @@ class AudioService {
      */
     forceEndRecording() {
         this._endCurrentRecording = true;
+        this._isInitialized = false;
         this._event.silence.next({
             chunk: new Float32Array(),
             transcript: '',
@@ -817,10 +907,24 @@ class AudioService {
     _listenForWakeword() {
         const vad$ = this._getWakeWordStream();
         this._subs.sink = this._event.speech
-            .pipe(withLatestFrom(vad$), concatMap(async ([speech, vadState]) => {
+            .pipe(filter(() => !this._isInitialized && !this._mic.isMuted), withLatestFrom(vad$), concatMap(async ([speech, vadState]) => {
             const score = await this._pipeline.run(speech);
             return { speech, score, chunk: vadState.buffer };
-        }), filter(({ score }) => score > (this._config.onnx.wakewordInferenceThreshold ?? DEFAULT_INFERENCE_SCORE)))
+        }), filter(({ score }) => {
+            if (this._config.onnx.wakeword) {
+                const transcriptArray = this._speechRecognition.transcript
+                    .toLowerCase()
+                    .trim()
+                    .split(' ');
+                // use speech recognition for wake word identification
+                if (transcriptArray.length === this._config.onnx.wakeword.length)
+                    for (const idx in this._config.onnx.wakeword)
+                        if (+idx < transcriptArray.length &&
+                            transcriptArray[idx].includes(this._config.onnx.wakeword[idx].toLowerCase()))
+                            return true;
+            }
+            return score > (this._config.onnx.wakewordInferenceThreshold ?? DEFAULT_INFERENCE_SCORE);
+        }))
             .subscribe(({ speech, score, chunk }) => {
             this._event.wakeword.next({ ...speech, inferenceScore: score, chunk });
         });
@@ -831,66 +935,88 @@ class AudioService {
     _captureCommandAfterWakeword() {
         const SILENCE_DURATION = this._config.audio.silenceDuration ?? DEFAULT_SILENCE_DURATION;
         const VAD_THRESHOLD = this._config.audio.vadThreshold ?? DEFAULT_VAD_THRESHOLD;
-        // --- TRIGGER 1: Wakeword ---
+        const PRE_ROLL_MS = this._config.audio.speechThresholdTime ?? DEFAULT_SPEECH_THRESHOLD_TIME;
+        const CHUNK_DURATION_MS = 80; // Each speech event is fired (by audio processor) at 80 ms
+        const MAX_SLIDING_WINDOW_CHUNKS = Math.ceil(PRE_ROLL_MS / CHUNK_DURATION_MS);
+        // speech sliding window state
+        const speechSlidingWindow = [];
+        // trigger 1: wakeword
         const wakewordTrigger$ = this._event.wakeword.pipe(filter(() => !this._isRecording), // Ignore wakeword if already recording
         map(() => []));
-        // --- TRIGGER 2: Continuous VAD > THRESHOLD for 1 second ---
-        const continuousVadTrigger$ = this._event.speech.pipe(map((s) => s.vadScore > VAD_THRESHOLD), filter(() => !this._isRecording && this._isInitialized), // Ignore and prevent background buffering if already recording
-        distinctUntilChanged(), switchMap((isVoiceActive) => {
+        // trigger 2: Continuous VAD > THRESHOLD
+        const continuousVadTrigger$ = this._event.speech.pipe(filter(() => !this._mic.isMuted), 
+        // intercept the raw stream to constantly update the threshold window
+        tap((s) => {
+            // Only buffer if we aren't already formally recording
+            if (!this._isRecording && this._isInitialized) {
+                speechSlidingWindow.push(s.sample);
+                // Keep the array length strictly to our configured window size
+                if (speechSlidingWindow.length > MAX_SLIDING_WINDOW_CHUNKS)
+                    speechSlidingWindow.shift();
+            }
+        }), 
+        // check VAD score
+        map((s) => s.vadScore > VAD_THRESHOLD), filter(() => !this._isRecording && this._isInitialized), distinctUntilChanged(), switchMap((isVoiceActive) => {
             if (!isVoiceActive)
-                return EMPTY; // Cancel if voice stops
+                return EMPTY; // Cancel if voice stops before threshold
             this._speechRecognition.reset();
-            const bufferedChunks = [];
-            // 1. Accumulate audio chunks silently
-            const buffer$ = this._event.speech.pipe(tap((s) => bufferedChunks.push(s.sample)), ignoreElements());
-            // 2. Timer that emits the accumulated chunks after 1 second
-            const timer$ = timer(300).pipe(map(() => bufferedChunks));
-            // Merge both. If the timer fires, take(1) stops the buffer$ stream.
-            // If isVoiceActive turns false before 1s, switchMap cancels both.
+            // PRE-FILL the actual recording buffer with our duration (ex: 300ms) look back window!
+            // clone so future sliding window updates don't mutate the captured audio.
+            const bufferedChunks = [...speechSlidingWindow];
+            // continue accumulating new chunks silently while we wait for the timer
+            const buffer$ = this._event.speech.pipe(filter(() => !this._mic.isMuted), tap((s) => bufferedChunks.push(s.sample)), ignoreElements());
+            // timer that emits the fully accumulated chunks (pre-roll)
+            const timer$ = timer(PRE_ROLL_MS).pipe(map(() => bufferedChunks));
             return merge(buffer$, timer$).pipe(take(1));
         }));
-        // --- COMBINE TRIGGERS ---
+        // combine triggers
         const startRecordingTrigger$ = merge(wakewordTrigger$.pipe(tap(() => {
             if (!this._isInitialized)
                 this._isInitialized = true; // initialized
-        })), continuousVadTrigger$).pipe(throttleTime(1000));
-        // --- MAIN RECORDING PIPELINE ---
+        })), continuousVadTrigger$).pipe(filter(() => !this._mic.isMuted), throttleTime(this._config.throttleTime));
+        // recording pipeline
         this._subs.sink = startRecordingTrigger$
             .pipe(tap(() => {
             this._isRecording = true;
             this._speechRecognition.reset();
-            this._event.recording.next(); // recording event
         }), switchMap((bufferedChunks) => {
             // Initialize our command chunks with anything captured during the 1s VAD wait
             const commandChunks = [...bufferedChunks];
-            const speech$ = this._event.speech.pipe(tap((speech) => commandChunks.push(speech.sample)), share());
+            const speech$ = this._event.speech.pipe(filter(() => !this._mic.isMuted), tap((speech) => {
+                commandChunks.push(speech.sample);
+                if (this._isRecording)
+                    // emit recording events
+                    this._event.recording.next({
+                        chunk: this._flatten(commandChunks),
+                        transcript: this._speechRecognition.transcript,
+                    });
+            }), share());
             const silence$ = speech$.pipe(map((s) => s.vadScore < VAD_THRESHOLD), distinctUntilChanged());
-            // 1. Normal silence timeout logic
-            const normalSilenceTimeout$ = silence$.pipe(delay(500), switchMap((isSilent) => {
+            // silence timeout logic
+            const normalSilenceTimeout$ = silence$.pipe(switchMap((isSilent) => {
                 if (!isSilent) {
                     return EMPTY; // if voice cancel the timer
                 }
                 // silence started, start timer
                 return timer(SILENCE_DURATION).pipe(takeUntil(silence$.pipe(filter((silent) => !silent))));
             }));
-            // 2. Force complete logic checking the variable
+            // force end recording
             const forceComplete$ = speech$.pipe(filter(() => this._endCurrentRecording));
-            // 3. Complete whenever the timer fires OR the flag is set to true
             return merge(normalSilenceTimeout$, forceComplete$).pipe(take(1), map(() => this._flatten(commandChunks)));
         }))
             .subscribe({
             next: (chunk) => {
-                const interimResponse = this._config.mode === 'DEFAULT' ? false : true;
+                const interimResponse = this._config.mode === 'DEFAULT' || this._config.mode === 'PTT' ? false : true;
                 this._event.silence.next({
                     chunk,
                     transcript: this._speechRecognition.transcript,
                     interimResponse,
                 }); // emit silence event
                 // Default case
-                if (this._config.mode === 'DEFAULT') {
+                if (this._config.mode === 'DEFAULT' || this._config.mode === 'PTT') {
                     this._isInitialized = false;
-                    this._endCurrentRecording = false; // reset flag after recording ends
                 }
+                this._endCurrentRecording = false; // reset flag after recording ends
                 this._isRecording = false;
             },
             error: (err) => {
@@ -916,7 +1042,7 @@ class AudioService {
      * @returns
      */
     _getWakeWordStream() {
-        return this._event.speech.pipe(scan((state, speech) => {
+        return this._event.speech.pipe(filter(() => !this._mic.isMuted), scan((state, speech) => {
             const { hasVoiceActivity, sample } = speech;
             let { isActive, hangoverCounter, buffer } = state;
             if (hasVoiceActivity) {
@@ -960,7 +1086,12 @@ class SpeakerService {
         this._config = inject(ConfigService);
         this._platform = inject(PlatformService);
         this._event = inject(EventService);
+        this._mic = inject(MicrophoneService);
+        this._orb = inject(OrbComponentService);
+        this._audio = inject(AudioService);
         this._subs = new SubSink();
+        this._nextPlayTime = 0;
+        this._sources = [];
         if (this._config.audio.sound?.enable === false)
             return;
         // Audio is only available in browser context
@@ -974,6 +1105,55 @@ class SpeakerService {
     ngOnDestroy() {
         this._subs.unsubscribe();
     }
+    /**
+     * Play audio chunk
+     *
+     * @param buffer audio buffer
+     * @param sampleRate sample rate to play in
+     */
+    playChunk(buffer, sampleRate) {
+        // Calculate how many full 32-bit floats fit in this buffer
+        const float32Count = Math.floor(buffer.byteLength / 4);
+        // Convert raw bytes back to 32-bit floats
+        const float32Array = new Float32Array(buffer, 0, float32Count);
+        // Create an empty audio buffer mapping
+        const audioBuffer = this._mic.audioContext.createBuffer(1, float32Array.length, sampleRate);
+        audioBuffer.copyToChannel(float32Array, 0);
+        this.playAudioBuffer(audioBuffer);
+    }
+    /**
+     * Play audio buffer
+     *
+     * @param audioBuffer
+     */
+    playAudioBuffer(audioBuffer) {
+        // if recording, clear the queue
+        if (this._audio.isRecording) {
+            this._clearQueue();
+            return;
+        }
+        // Create a source node to play the buffer
+        const source = this._mic.audioContext.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(this._mic.analyzer);
+        source.connect(this._mic.audioContext.destination);
+        // Schedule the chunk to play exactly when the previous chunk finishes
+        const currentTime = this._mic.audioContext.currentTime;
+        if (this._nextPlayTime < currentTime) {
+            this._nextPlayTime = currentTime; // Reset if the queue has emptied
+        }
+        source.start(this._nextPlayTime);
+        this._sources.push(source); // keep instance of source to stop later
+        this._nextPlayTime += audioBuffer.duration;
+        source.onended = () => {
+            this._sources.shift();
+            if (!this._sources.length)
+                if (!this._config.orb?.mode || this._config.orb?.mode === 'auto')
+                    this._orb.setState('initialized'); // reset
+        };
+        if (!this._config.orb?.mode || this._config.orb?.mode === 'auto')
+            this._orb.setState('speaking'); // speaking
+    }
     /**
      * Play on sound
      */
@@ -990,11 +1170,21 @@ class SpeakerService {
             return;
         this._downSound.play();
     }
+    /**
+     * Clear playback queue
+     */
+    _clearQueue() {
+        this._sources.forEach((s) => s.stop());
+        this._sources = [];
+        this._nextPlayTime = 0;
+    }
     /**
      * Load subscriptions
      */
     _loadSubscriptions() {
-        this._subs.sink = this._event.wakeword.subscribe(() => {
+        this._subs.sink = this._event.wakeword
+            .pipe(throttleTime(this._config.throttleTime))
+            .subscribe(() => {
             this.playUp();
         });
         // If default, on silence, play down
@@ -1002,6 +1192,10 @@ class SpeakerService {
             if (!ev.interimResponse)
                 this.playDown();
         });
+        // If recording event
+        this._subs.sink = this._event.recording.subscribe(() => {
+            this._clearQueue();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpeakerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SpeakerService }); }
@@ -1022,6 +1216,7 @@ class BridgeService {
         this.model = inject(ModelService);
         this.pipeline = inject(PipelineService);
         this.platform = inject(PlatformService);
+        this.orbComponentService = inject(OrbComponentService);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BridgeService }); }
@@ -1035,208 +1230,393 @@ class OrbComponent {
         this._config = inject(ConfigService);
         this._platform = inject(PlatformService);
         this._audio = inject(AudioService);
+        this._mic = inject(MicrophoneService);
         this._event = inject(EventService);
+        this._ngZone = inject(NgZone);
+        this._service = inject(OrbComponentService);
         this._subs = new SubSink();
-        this.originalVertices = null;
-        this.targetIntensity = 0;
-        this.currentIntensity = 0;
-        this.clock = new THREE.Timer();
-        this.elapsedTime = 0;
-        /**
-         * Should orb be reacting to speech
-         */
-        this._isActive = false;
+        this._clock = new THREE.Clock();
+        this.micVolume = 0;
+        // State Management
+        this.currentState = 'idle';
+        this.agentProfiles = {
+            idle: {
+                spike: 0.05,
+                noiseScale: 1.0,
+                speed: 0.2,
+                twist: 0.0,
+                pulse: 0.0,
+                base: '#001133',
+                peak: '#ff4000',
+            },
+            initialized: {
+                spike: 0.05,
+                noiseScale: 1.0,
+                speed: 0.2,
+                twist: 0.0,
+                pulse: 0.0,
+                base: '#001133',
+                peak: '#00aaff',
+            },
+            listening: {
+                spike: 0.2,
+                noiseScale: 2.5,
+                speed: 1.0,
+                twist: 0.0,
+                pulse: 0.0,
+                base: '#002211',
+                peak: '#00ff88',
+            },
+            thinking: {
+                spike: 0.2,
+                noiseScale: 1.5,
+                speed: 1.5,
+                twist: 1.5,
+                pulse: 0.0,
+                base: '#220033',
+                peak: '#ff00ff',
+            },
+            speaking: {
+                spike: 0.1,
+                noiseScale: 1.0,
+                speed: 0.5,
+                twist: 0.0,
+                pulse: 0.1,
+                base: '#331100',
+                peak: '#ff8800',
+            },
+        };
+        this.targets = { ...this.agentProfiles.idle };
+        this.targetColorBase = new THREE.Color(this.targets.base);
+        this.targetColorPeak = new THREE.Color(this.targets.peak);
         /**
-         * Animate
+         * Animator
          */
         this._animate = () => {
-            this.animationId = requestAnimationFrame(this._animate);
-            // 1. Get the time passed since the last frame (delta)
-            const delta = this.clock.getDelta();
-            // 2. Smoothly update currentIntensity
-            this.currentIntensity += (this.targetIntensity - this.currentIntensity) * 0.05;
-            // 3. Increment our own elapsedTime ticker.
-            // We multiply delta by intensity so the pulse speeds up when busy,
-            // but it won't "run away" as performance.now() grows.
-            const speedFactor = 1 + this.currentIntensity / 20;
-            this.elapsedTime += delta * speedFactor;
-            // 4. Rotation (Constant per frame, scaled by intensity)
-            this.orb.rotation.y += 0.005 + this.currentIntensity / 5000;
-            this.orb.rotation.z += 0.002;
-            // 5. Vertex Displacement
-            const positionAttribute = this.orb.geometry.getAttribute('position');
-            for (let i = 0; i < positionAttribute.count; i++) {
-                const ix = i * 3;
-                const iy = i * 3 + 1;
-                const iz = i * 3 + 2;
-                const x = this.originalVertices[ix];
-                const y = this.originalVertices[iy];
-                const z = this.originalVertices[iz];
-                // We use this.elapsedTime instead of performance.now()
-                // This creates a stable frequency regardless of how long the app has been open
-                const wave = Math.sin(x * 2 + this.elapsedTime) *
-                    Math.cos(y * 2 + this.elapsedTime) *
-                    (this.currentIntensity / 300);
-                const currentRadius = Math.sqrt(x * x + y * y + z * z) + wave;
-                const finalScale = Math.min(currentRadius, 2.5) / 1.5;
-                positionAttribute.setXYZ(i, x * finalScale, y * finalScale, z * finalScale);
+            this._animationFrameId = requestAnimationFrame(this._animate);
+            const elapsedTime = this._clock.getElapsedTime();
+            this._material.uniforms['uTime'].value = elapsedTime;
+            let dynamicSpike = this.targets.spike;
+            let dynamicPulse = this.targets.pulse;
+            if (this.currentState === 'listening') {
+                dynamicSpike += this.micVolume * 1.0;
             }
-            positionAttribute.needsUpdate = true;
-            // Optional: Update material feedback based on intensity
-            const material = this.orb.material;
-            material.emissiveIntensity = 0.2 + this.currentIntensity / 100;
-            material.opacity = 0.3 + this.currentIntensity / 200;
-            this.renderer.render(this.scene, this.camera);
+            else if (this.currentState === 'speaking') {
+                const ttsVolume = this._getTTSVolume();
+                dynamicPulse += ttsVolume * 0.5;
+            }
+            const lerpFactor = 0.08;
+            this._material.uniforms['uSpike'].value +=
+                (dynamicSpike - this._material.uniforms['uSpike'].value) * lerpFactor;
+            this._material.uniforms['uPulse'].value +=
+                (dynamicPulse - this._material.uniforms['uPulse'].value) * lerpFactor;
+            this._material.uniforms['uNoiseScale'].value +=
+                (this.targets.noiseScale - this._material.uniforms['uNoiseScale'].value) * lerpFactor;
+            this._material.uniforms['uSpeed'].value +=
+                (this.targets.speed - this._material.uniforms['uSpeed'].value) * lerpFactor;
+            this._material.uniforms['uTwist'].value +=
+                (this.targets.twist - this._material.uniforms['uTwist'].value) * lerpFactor;
+            this._material.uniforms['uColorBase'].value.lerp(this.targetColorBase, lerpFactor);
+            this._material.uniforms['uColorPeak'].value.lerp(this.targetColorPeak, lerpFactor);
+            this._sphere.rotation.y = elapsedTime * 0.1;
+            this._sphere.rotation.z = elapsedTime * 0.01;
+            this._renderer.render(this._scene, this._camera);
         };
     }
-    get isRecording() {
-        return this._audio.isRecording;
-    }
     get orbSize() {
         return this._config.orb?.size ?? 400;
     }
-    /**
-     * Change color or orb
-     *
-     * @param color
-     * @param emissive
-     */
-    changeColor(color, emissive) {
-        const material = this.orb.material;
-        material.color = color;
-        material.emissive = emissive;
-    }
-    /**
-     * Toggle recording
-     */
-    toggleRecording() {
-        this._audio.toggleRecording();
+    get isMuted() {
+        return this._mic.isMuted;
     }
-    ngOnInit() {
+    ngAfterViewInit() {
         if (this._platform.isServer)
             return;
-        this._init();
-        this._animate();
+        this.dataArray = new Uint8Array(this._mic.analyzer.frequencyBinCount);
         this._loadSubscribers();
-    }
-    ngOnChanges(changes) {
-        if (this._platform.isServer)
-            return;
-        if (changes['intensity']) {
-            this.targetIntensity = changes['intensity'].currentValue;
-        }
+        // MUST run outside Angular to prevent CD loops
+        this._ngZone.runOutsideAngular(() => {
+            this._initThreeJs();
+            this._animate();
+        });
     }
     ngOnDestroy() {
         if (this._platform.isServer)
             return;
-        cancelAnimationFrame(this.animationId);
-        this.renderer.dispose();
-        this.orb.geometry.dispose();
-        this.orb.material.dispose();
+        cancelAnimationFrame(this._animationFrameId);
         this._subs.unsubscribe();
+        if (this._renderer) {
+            this._renderer.dispose();
+            this._renderer.forceContextLoss();
+            // Remove canvas from DOM to ensure cleanup
+            const domElement = this._renderer.domElement;
+            if (domElement && domElement.parentNode) {
+                domElement.parentNode.removeChild(domElement);
+            }
+        }
+        if (this._geometry)
+            this._geometry.dispose();
+        if (this._material)
+            this._material.dispose();
     }
+    /**
+     * Space bar press
+     */
     handleSpacebarPress(event) {
-        event.preventDefault(); // Prevents the default space bar action (e.g., scrolling)
+        if (event.code !== this._config.hotkey)
+            return;
+        event.preventDefault();
         this.toggleRecording();
     }
     /**
-     * Initialize
+     * Toggle recording
      */
-    _init() {
-        this.scene = new THREE.Scene();
-        this.camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
-        this.camera.position.z = 3;
-        this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
-        // Initial resize to fit container
-        this._resize();
-        // Orb Geometry (Icosahedron for organic detail)
-        const geometry = new THREE.IcosahedronGeometry(1.2, 32);
-        this.originalVertices = geometry.attributes['position'].array.slice();
-        const material = new THREE.MeshStandardMaterial({
-            color: 'red',
-            wireframe: true,
-            transparent: true,
-            opacity: 0.6,
-            emissive: 'red',
-            emissiveIntensity: 0.5,
-        });
-        this.orb = new THREE.Mesh(geometry, material);
-        this.scene.add(this.orb);
-        const light = new THREE.PointLight(0xffffff, 15, 10);
-        light.position.set(2, 2, 2);
-        this.scene.add(light);
-        this.scene.add(new THREE.AmbientLight(0x404040));
+    toggleRecording() {
+        if (this.isMuted)
+            return;
+        this._audio.toggleRecording();
     }
     /**
-     * Resize container
+     * Set state of orb
+     *
+     * @param state orb state
      */
-    _resize() {
-        const width = this.orbSize ?? this.rendererContainer.nativeElement.clientWidth;
-        const height = this.orbSize ?? this.rendererContainer.nativeElement.clientHeight;
-        this.renderer.setSize(width, height);
-        this.camera.aspect = width / height;
-        this.camera.updateProjectionMatrix();
+    setState(state) {
+        const profile = this.agentProfiles[state];
+        this.currentState = state;
+        this.targets = { ...profile };
+        this.targetColorBase.set(profile.base);
+        this.targetColorPeak.set(profile.peak);
     }
     /**
      * Subscriptions
      */
     _loadSubscribers() {
-        // Speech event
-        this._subs.sink = this._event.speech.subscribe((e) => {
-            if (this._isActive)
-                this.targetIntensity = e.dbNormalized * 100;
-            else
-                this.targetIntensity = 0;
-        });
-        // Wake word event
-        this._subs.sink = this._event.wakeword.subscribe(() => {
-            this.changeColor(new THREE.Color(0x00d2ff), new THREE.Color(0x0066ff));
-            this._isActive = true;
+        this._subs.sink = this._event.speech.subscribe((data) => {
+            this.micVolume = this.isMuted ? 0 : data.dbNormalized;
         });
-        // Silence
-        this._subs.sink = this._event.silence.subscribe((ev) => {
-            if (!ev.interimResponse) {
-                // on silence, set color to red
-                this.changeColor(new THREE.Color('red'), new THREE.Color('red'));
-                this._isActive = false;
-            }
+        // only update orb state if mode is auto
+        if (!this._config.orb?.mode || this._config.orb?.mode === 'auto') {
+            // after wakeword, set to listening
+            this._subs.sink = this._event.wakeword.subscribe(() => {
+                this.setState('listening');
+            });
+            // after silence, set thinking or idle
+            this._subs.sink = this._event.silence.subscribe((ev) => {
+                if (ev.interimResponse)
+                    this.setState('thinking');
+                else
+                    this.setState('idle');
+            });
+            // if recording started
+            this._subs.sink = this._event.recording.subscribe(() => {
+                this.setState('listening');
+            });
+            // state change using service
+            this._subs.sink = this._service.state.subscribe((state) => {
+                this.setState(state);
+            });
+        }
+    }
+    /**
+     * Speech volume for animation
+     */
+    _getTTSVolume() {
+        this._mic.analyzer.getByteFrequencyData(this.dataArray);
+        const sum = this.dataArray.reduce((a, b) => a + b, 0);
+        return sum / this.dataArray.length / 255.0;
+    }
+    /**
+     * Init
+     */
+    _initThreeJs() {
+        const size = this.orbSize;
+        this._scene = new THREE.Scene();
+        this._camera = new THREE.PerspectiveCamera(50, 1, 0.1, 1000);
+        this._camera.position.z = 6;
+        this._renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        this._renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        this._renderer.setSize(size, size);
+        this._rendererContainer.nativeElement.appendChild(this._renderer.domElement);
+        const particlesCount = this._config.orb?.particlesCount ?? 30000;
+        this._geometry = new THREE.BufferGeometry();
+        const posArray = new Float32Array(particlesCount * 3);
+        const randomArray = new Float32Array(particlesCount);
+        const radius = this._config.orb?.radius ?? 1.8;
+        for (let i = 0; i < particlesCount; i++) {
+            const phi = Math.acos(-1 + (2 * i) / particlesCount);
+            const theta = Math.sqrt(particlesCount * Math.PI) * phi;
+            posArray[i * 3] = radius * Math.cos(theta) * Math.sin(phi);
+            posArray[i * 3 + 1] = radius * Math.sin(theta) * Math.sin(phi);
+            posArray[i * 3 + 2] = radius * Math.cos(phi);
+            randomArray[i] = Math.random();
+        }
+        this._geometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
+        this._geometry.setAttribute('aRandom', new THREE.BufferAttribute(randomArray, 1));
+        this._material = new THREE.ShaderMaterial({
+            uniforms: {
+                uTime: { value: 0 },
+                uSpike: { value: 0.05 },
+                uNoiseScale: { value: 1.0 },
+                uSpeed: { value: 0.2 },
+                uTwist: { value: 0.0 },
+                uPulse: { value: 0.0 },
+                uColorBase: { value: new THREE.Color('#002244') },
+                uColorPeak: { value: new THREE.Color('#00ffff') },
+            },
+            vertexShader: this._getVertexShader(),
+            fragmentShader: this._getFragmentShader(),
+            transparent: true,
+            blending: THREE.AdditiveBlending,
+            depthWrite: false,
         });
+        this._sphere = new THREE.Points(this._geometry, this._material);
+        this._scene.add(this._sphere);
+    }
+    /**
+     * Vertex shader
+     */
+    _getVertexShader() {
+        return `
+      uniform float uTime;
+      uniform float uSpike;       
+      uniform float uNoiseScale;  
+      uniform float uSpeed;       
+      uniform float uTwist;       
+      uniform float uPulse;       
+      
+      varying vec3 vColor;
+      varying float vDisplacement;
+
+      attribute float aRandom;
+
+      // Simplex 3D Noise
+      vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
+      vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
+      float snoise(vec3 v){ 
+        const vec2  C = vec2(1.0/6.0, 1.0/3.0);
+        const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);
+        vec3 i  = floor(v + dot(v, C.yyy) );
+        vec3 x0 = v - i + dot(i, C.xxx) ;
+        vec3 g = step(x0.yzx, x0.xyz);
+        vec3 l = 1.0 - g;
+        vec3 i1 = min( g.xyz, l.zxy );
+        vec3 i2 = max( g.xyz, l.zxy );
+        vec3 x1 = x0 - i1 + 1.0 * C.xxx;
+        vec3 x2 = x0 - i2 + 2.0 * C.xxx;
+        vec3 x3 = x0 - 1.0 + 3.0 * C.xxx;
+        i = mod(i, 289.0 ); 
+        vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+        float n_ = 1.0/7.0;
+        vec3  ns = n_ * D.wyz - D.xzx;
+        vec4 j = p - 49.0 * floor(p * ns.z *ns.z);
+        vec4 x_ = floor(j * ns.z);
+        vec4 y_ = floor(j - 7.0 * x_ );
+        vec4 x = x_ *ns.x + ns.yyyy;
+        vec4 y = y_ *ns.x + ns.yyyy;
+        vec4 h = 1.0 - abs(x) - abs(y);
+        vec4 b0 = vec4( x.xy, y.xy );
+        vec4 b1 = vec4( x.zw, y.zw );
+        vec4 s0 = floor(b0)*2.0 + 1.0;
+        vec4 s1 = floor(b1)*2.0 + 1.0;
+        vec4 sh = -step(h, vec4(0.0));
+        vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
+        vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
+        vec3 p0 = vec3(a0.xy,h.x);
+        vec3 p1 = vec3(a0.zw,h.y);
+        vec3 p2 = vec3(a1.xy,h.z);
+        vec3 p3 = vec3(a1.zw,h.w);
+        vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
+        p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;
+        vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
+        m = m * m;
+        return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) );
+      }
+
+      void main() {
+          vec3 pos = position;
+          float time = uTime * uSpeed;
+          
+          float angle = pos.y * uTwist;
+          mat2 rot = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
+          pos.xz *= rot;
+
+          vec3 normal = normalize(pos);
+          float noise = snoise(pos * uNoiseScale + time);
+          
+          float totalDisplacement = (noise * uSpike) + uPulse;
+          pos += normal * totalDisplacement;
+          
+          vDisplacement = totalDisplacement;
+
+          vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+          
+          gl_PointSize = (15.0 + totalDisplacement * 20.0) * (1.0 / -mvPosition.z);
+          gl_PointSize *= (1.0 + sin(uTime * 5.0 + aRandom * 50.0) * 0.2);
+
+          gl_Position = projectionMatrix * mvPosition;
+      }
+    `;
+    }
+    /**
+     * Fragment shader
+     */
+    _getFragmentShader() {
+        return `
+      varying float vDisplacement;
+      uniform vec3 uColorBase; 
+      uniform vec3 uColorPeak;
+
+      void main() {
+          float dist = distance(gl_PointCoord, vec2(0.5));
+          if (dist > 0.5) discard;
+          float alpha = 1.0 - pow(dist * 2.0, 2.0);
+          
+          float mixValue = smoothstep(-0.2, 0.5, vDisplacement);
+          vec3 finalColor = mix(uColorBase, uColorPeak, mixValue);
+
+          gl_FragColor = vec4(finalColor, alpha * 0.9);
+      }
+    `;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OrbComponent, isStandalone: true, selector: "app-orb-component", host: { listeners: { "window:keydown.Space": "handleSpacebarPress($event)" } }, viewQueries: [{ propertyName: "rendererContainer", first: true, predicate: ["rendererContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `<div
-    #rendererContainer
-    tabindex="0"
-    role="button"
-    class="orb-viewport"
-    [style.height]="orbSize"
-    [style.width]="orbSize"
-    (click)="toggleRecording()"
-    (keypress)="toggleRecording()"
-  ></div>`, isInline: true, styles: [".orb-viewport{background:transparent;cursor:pointer}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: OrbComponent, isStandalone: true, selector: "app-orb-component", host: { listeners: { "window:keydown": "handleSpacebarPress($event)" } }, viewQueries: [{ propertyName: "_rendererContainer", first: true, predicate: ["rendererContainer"], descendants: true, static: true }], ngImport: i0, template: `
+    <div
+      #rendererContainer
+      role="button"
+      tabindex="0"
+      class="orb-container"
+      [style.width.px]="orbSize"
+      [style.height.px]="orbSize"
+      (click)="toggleRecording()"
+      (keypress)="toggleRecording()"
+      [ngClass]="{ muted: isMuted }"
+    ></div>
+  `, isInline: true, styles: [".orb-container{display:flex;justify-content:center;align-items:center;overflow:hidden;cursor:pointer}.muted{cursor:not-allowed}canvas{display:block;outline:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: OrbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-orb-component', standalone: true, template: `<div
-    #rendererContainer
-    tabindex="0"
-    role="button"
-    class="orb-viewport"
-    [style.height]="orbSize"
-    [style.width]="orbSize"
-    (click)="toggleRecording()"
-    (keypress)="toggleRecording()"
-  ></div>`, styles: [".orb-viewport{background:transparent;cursor:pointer}\n"] }]
-        }], propDecorators: { rendererContainer: [{
+            args: [{ selector: 'app-orb-component', imports: [NgClass], template: `
+    <div
+      #rendererContainer
+      role="button"
+      tabindex="0"
+      class="orb-container"
+      [style.width.px]="orbSize"
+      [style.height.px]="orbSize"
+      (click)="toggleRecording()"
+      (keypress)="toggleRecording()"
+      [ngClass]="{ muted: isMuted }"
+    ></div>
+  `, styles: [".orb-container{display:flex;justify-content:center;align-items:center;overflow:hidden;cursor:pointer}.muted{cursor:not-allowed}canvas{display:block;outline:none}\n"] }]
+        }], propDecorators: { _rendererContainer: [{
                 type: ViewChild,
                 args: ['rendererContainer', { static: true }]
             }], handleSpacebarPress: [{
                 type: HostListener,
-                args: ['window:keydown.Space', ['$event']]
+                args: ['window:keydown', ['$event']]
             }] } });
 
-const DEFAULT_THROTTLE_TIME = 1000;
 class WakeyWakeyComponent {
     constructor() {
         /**
@@ -1331,7 +1711,7 @@ class WakeyWakeyComponent {
         });
         // Wake word event
         this._subs.sink = this._event.wakeword
-            .pipe(throttleTime(this._config.throttleTime ?? DEFAULT_THROTTLE_TIME))
+            .pipe(throttleTime(this._config.throttleTime))
             .subscribe((e) => {
             this.wakeword.emit(e);
         });
@@ -1392,6 +1772,7 @@ function provideWakeyWakey(config) {
         SpeechRecognitionService,
         ModelService,
         BridgeService,
+        OrbComponentService,
         provideAppInitializer(async () => {
             const _config = inject(ConfigService);
             const _model = inject(ModelService);