openvoiceui 1.0.0

package/src/providers/tts/SupertonicProvider.js

@@ -0,0 +1,174 @@
+/**
+ * Supertonic TTS Provider
+ * Handles text-to-speech via the Supertonic backend
+ */
+import { BaseTTSProvider } from './BaseTTSProvider.js';
+
+export class SupertonicProvider extends BaseTTSProvider {
+    constructor(config = {}) {
+        super(config);
+        this.name = 'supertonic';
+        this.serverUrl = config.serverUrl || '';
+        this.voices = ['M1', 'M2', 'F1', 'F2'];  // Available Supertonic voices
+        this.currentVoice = config.voice || 'M1';
+        this.audioQueue = [];
+        this.currentAudio = null;
+        this.audioContext = null;
+    }
+
+    async init() {
+        console.log('[Supertonic] Initializing...');
+        // Pre-warm audio context on user gesture
+        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        console.log('[Supertonic] Ready with voices:', this.voices);
+        return true;
+    }
+
+    getVoices() {
+        return this.voices;
+    }
+
+    setVoice(voiceName) {
+        if (this.voices.includes(voiceName)) {
+            this.currentVoice = voiceName;
+            console.log('[Supertonic] Voice set to:', voiceName);
+        }
+    }
+
+    /**
+     * Synthesize speech by calling the backend API
+     * @param {string} text - Text to speak
+     * @param {object} options - Optional parameters (speed, lang)
+     * @returns {Promise<boolean>} Success
+     */
+    async speak(text, options = {}) {
+        if (!text || !text.trim()) {
+            console.warn('[Supertonic] Empty text, skipping');
+            return false;
+        }
+
+        const payload = {
+            text: text.trim(),
+            provider: 'supertonic',
+            voice: this.currentVoice,
+            speed: options.speed || 1.05,
+            lang: options.lang || 'en'
+        };
+
+        try {
+            console.log('[Supertonic] Requesting TTS for:', text.substring(0, 50) + '...');
+
+            const response = await fetch(`${this.serverUrl}/api/tts/generate`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.error || `TTS request failed: ${response.status}`);
+            }
+
+            // Response is WAV audio directly, not JSON
+            const audioBlob = await response.blob();
+            const audioUrl = URL.createObjectURL(audioBlob);
+
+            this.queueAudioUrl(audioUrl);
+            return true;
+
+        } catch (error) {
+            console.error('[Supertonic] TTS error:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Queue audio URL for playback
+     * @param {string} audioUrl - Blob URL for audio
+     */
+    queueAudioUrl(audioUrl) {
+        this.audioQueue.push(audioUrl);
+
+        if (!this.isPlaying) {
+            this.playNextAudio();
+        }
+    }
+
+    /**
+     * Play next audio in queue
+     */
+    async playNextAudio() {
+        if (this.audioQueue.length === 0) {
+            this.isPlaying = false;
+            this.currentAudio = null;
+            return;
+        }
+
+        this.isPlaying = true;
+        const audioUrl = this.audioQueue.shift();
+
+        try {
+            const audio = new Audio(audioUrl);
+
+            audio.onended = () => {
+                URL.revokeObjectURL(audioUrl);
+                this.playNextAudio();
+            };
+
+            audio.onerror = (e) => {
+                console.error('[Supertonic] Audio playback error:', e);
+                URL.revokeObjectURL(audioUrl);
+                this.playNextAudio();
+            };
+
+            this.currentAudio = audio;
+            await audio.play();
+        } catch (error) {
+            console.error('[Supertonic] Failed to play audio:', error);
+            URL.revokeObjectURL(audioUrl);
+            this.playNextAudio();
+        }
+    }
+
+    /**
+     * Convert base64 to Blob
+     */
+    base64ToBlob(base64, mimeType) {
+        const byteCharacters = atob(base64);
+        const byteNumbers = new Array(byteCharacters.length);
+        for (let i = 0; i < byteCharacters.length; i++) {
+            byteNumbers[i] = byteCharacters.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        return new Blob([byteArray], { type: mimeType });
+    }
+
+    /**
+     * Stop all audio playback
+     */
+    stop() {
+        this.audioQueue = [];
+        if (this.currentAudio) {
+            this.currentAudio.pause();
+            this.currentAudio = null;
+        }
+        this.isPlaying = false;
+    }
+
+    isReady() {
+        return true;
+    }
+
+    getCostPerMinute() {
+        return 0;  // Free
+    }
+
+    destroy() {
+        this.stop();
+        if (this.audioContext) {
+            this.audioContext.close();
+        }
+    }
+}
+
+export default SupertonicProvider;

package/src/providers/tts/index.js

@@ -0,0 +1,140 @@
+/**
+ * TTS Provider Registry
+ * Manages available TTS providers and handles switching
+ */
+import { SupertonicProvider } from './SupertonicProvider.js';
+import { HumeProvider } from './HumeProvider.js';
+
+class TTSProviderRegistry {
+    constructor() {
+        this.providers = new Map();
+        this.currentProvider = null;
+        this.currentProviderId = null;
+    }
+
+    /**
+     * Register a TTS provider
+     * @param {string} id - Unique provider ID
+     * @param {BaseTTSProvider} provider - Provider instance
+     */
+    register(id, provider) {
+        this.providers.set(id, provider);
+        console.log(`[TTSRegistry] Registered provider: ${id}`);
+    }
+
+    /**
+     * Get a provider by ID
+     * @param {string} id
+     * @returns {BaseTTSProvider|null}
+     */
+    get(id) {
+        return this.providers.get(id) || null;
+    }
+
+    /**
+     * Get current provider
+     * @returns {BaseTTSProvider|null}
+     */
+    getCurrent() {
+        return this.currentProvider;
+    }
+
+    /**
+     * Switch to a different provider
+     * @param {string} id
+     * @returns {boolean} Success
+     */
+    switchTo(id) {
+        const provider = this.providers.get(id);
+        if (!provider) {
+            console.error(`[TTSRegistry] Provider not found: ${id}`);
+            return false;
+        }
+
+        // Stop current provider if different
+        if (this.currentProvider && this.currentProviderId !== id) {
+            this.currentProvider.stop();
+        }
+
+        this.currentProvider = provider;
+        this.currentProviderId = id;
+        console.log(`[TTSRegistry] Switched to: ${id}`);
+        return true;
+    }
+
+    /**
+     * Get all registered provider IDs
+     * @returns {string[]}
+     */
+    getProviderIds() {
+        return Array.from(this.providers.keys());
+    }
+
+    /**
+     * Speak text using current provider
+     * @param {string} text
+     * @param {object} options
+     * @returns {Promise<boolean>}
+     */
+    async speak(text, options = {}) {
+        if (!this.currentProvider) {
+            console.error('[TTSRegistry] No provider selected');
+            return false;
+        }
+        return this.currentProvider.speak(text, options);
+    }
+
+    /**
+     * Stop current playback
+     */
+    stop() {
+        if (this.currentProvider) {
+            this.currentProvider.stop();
+        }
+    }
+
+    /**
+     * Set voice on current provider
+     * @param {string} voice
+     */
+    setVoice(voice) {
+        if (this.currentProvider) {
+            this.currentProvider.setVoice(voice);
+        }
+    }
+
+    /**
+     * Get voices for current provider
+     * @returns {string[]}
+     */
+    getVoices() {
+        if (this.currentProvider) {
+            return this.currentProvider.getVoices();
+        }
+        return [];
+    }
+
+    /**
+     * Initialize all providers
+     */
+    async initAll(config) {
+        // Create and register providers
+        const supertonic = new SupertonicProvider(config);
+        const hume = new HumeProvider(config);
+
+        await supertonic.init();
+        await hume.init();
+
+        this.register('supertonic', supertonic);
+        this.register('hume', hume);
+
+        // Default to supertonic
+        this.switchTo('supertonic');
+
+        console.log('[TTSRegistry] All providers initialized');
+    }
+}
+
+// Export singleton
+export const ttsRegistry = new TTSProviderRegistry();
+export default ttsRegistry;

package/src/shell/adapter-registry.js

@@ -0,0 +1,154 @@
+/**
+ * adapter-registry.js — Adapter ID → module path mapping + dynamic import (P6-T5)
+ *
+ * The AdapterRegistry knows which JS file corresponds to each adapter ID
+ * declared in a profile's "adapter" field. It handles dynamic import with
+ * caching so each module is only fetched once, even when multiple profiles
+ * reference the same adapter.
+ *
+ * Adding a new adapter system:
+ *   1. Create src/adapters/my-adapter.js  (copy _template.js)
+ *   2. Add an entry to ADAPTER_PATHS below
+ *   3. Create profiles/my-profile.json with "adapter": "my-adapter"
+ *   Done — no other changes needed.
+ *
+ * Ref: future-dev-plans/17-MULTI-AGENT-FRAMEWORK.md (Plug-and-Play section)
+ *
+ * Usage:
+ *   import { adapterRegistry } from './adapter-registry.js';
+ *   const adapter = await adapterRegistry.load('hume-evi');
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Static adapter map — adapter ID → relative path from this file (src/shell/)
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ADAPTER_PATHS = {
+    'clawdbot':  '../adapters/ClawdBotAdapter.js',
+    'hume-evi':  '../adapters/hume-evi.js',
+    // Add future adapters here:
+    // 'elevenlabs-classic': '../adapters/elevenlabs-classic.js',
+    // 'hybrid':             '../adapters/hybrid.js',
+    // 'openai-realtime':    '../adapters/openai-realtime.js',
+};
+
+/** Default adapter used when a profile omits the "adapter" field. */
+const DEFAULT_ADAPTER_ID = 'clawdbot';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// AdapterRegistry
+// ─────────────────────────────────────────────────────────────────────────────
+
+class AdapterRegistry {
+    constructor() {
+        /**
+         * Cache of already-loaded adapter objects, keyed by adapter ID.
+         * @type {Object.<string, object>}
+         */
+        this._cache = {};
+    }
+
+    /**
+     * Load an adapter by its ID.
+     *
+     * Resolves to the adapter object (the object with init/start/stop/destroy
+     * exported as `default` from the adapter module, or as a named export).
+     *
+     * Results are cached so the module is only dynamically imported once.
+     *
+     * @param {string} [adapterId] - Adapter ID as declared in a profile's "adapter" field.
+     *   Falls back to DEFAULT_ADAPTER_ID if omitted or unknown.
+     * @returns {Promise<object>} Adapter object
+     */
+    async load(adapterId) {
+        const id = adapterId || DEFAULT_ADAPTER_ID;
+
+        // Return cached module if already loaded
+        if (this._cache[id]) return this._cache[id];
+
+        const path = ADAPTER_PATHS[id];
+
+        if (!path) {
+            console.warn(
+                `[AdapterRegistry] Unknown adapter "${id}" — falling back to "${DEFAULT_ADAPTER_ID}".`,
+                `Known adapters: [${this.knownAdapters().join(', ')}]`
+            );
+            // Avoid infinite recursion if default itself is unknown
+            if (id === DEFAULT_ADAPTER_ID) {
+                throw new Error(`[AdapterRegistry] Default adapter "${DEFAULT_ADAPTER_ID}" has no registered path.`);
+            }
+            return this.load(DEFAULT_ADAPTER_ID);
+        }
+
+        try {
+            const module = await import(path);
+
+            // Prefer default export; fall back to first named export that looks like an adapter
+            const adapter =
+                module.default ||
+                Object.values(module).find(
+                    v => v && typeof v === 'object' && typeof v.init === 'function'
+                );
+
+            if (!adapter) {
+                throw new Error(`No adapter export found in "${path}"`);
+            }
+
+            this._cache[id] = adapter;
+            console.log(`[AdapterRegistry] Loaded adapter: "${id}" from ${path}`);
+            return adapter;
+
+        } catch (err) {
+            console.error(`[AdapterRegistry] Failed to load adapter "${id}":`, err);
+
+            // If loading the requested adapter fails, try the default as a fallback
+            if (id !== DEFAULT_ADAPTER_ID) {
+                console.warn(`[AdapterRegistry] Falling back to default adapter "${DEFAULT_ADAPTER_ID}"`);
+                return this.load(DEFAULT_ADAPTER_ID);
+            }
+
+            throw err; // Re-throw if even the default adapter fails
+        }
+    }
+
+    /**
+     * Return true if adapterId is registered in the static map.
+     * @param {string} adapterId
+     * @returns {boolean}
+     */
+    has(adapterId) {
+        return adapterId in ADAPTER_PATHS;
+    }
+
+    /**
+     * Return the list of all registered adapter IDs.
+     * @returns {string[]}
+     */
+    knownAdapters() {
+        return Object.keys(ADAPTER_PATHS);
+    }
+
+    /**
+     * The default adapter ID used when a profile omits "adapter".
+     * @type {string}
+     */
+    get defaultAdapter() {
+        return DEFAULT_ADAPTER_ID;
+    }
+
+    /**
+     * Clear the module cache (primarily for testing).
+     */
+    clearCache() {
+        this._cache = {};
+    }
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Singleton — one registry for the whole app
+// ─────────────────────────────────────────────────────────────────────────────
+
+export const adapterRegistry = new AdapterRegistry();
+
+// Also export class and constants for testing / multiple instances
+export { AdapterRegistry, ADAPTER_PATHS, DEFAULT_ADAPTER_ID };

package/src/shell/caller-bridge.js

@@ -0,0 +1,35 @@
+/**
+ * caller-bridge.js — Connect caller phone effect to EventBridge (P6-T4)
+ *
+ * Only connected when the active adapter has 'caller_effects' capability.
+ * Also blocks music sync during active caller skits.
+ *
+ * Ref: future-dev-plans/17-MULTI-AGENT-FRAMEWORK.md (App Shell section)
+ */
+
+import { AgentEvents } from '../core/EventBridge.js';
+
+/**
+ * Wire caller phone effect to the EventBridge.
+ * Only call this if the active adapter has 'caller_effects' capability.
+ *
+ * @param {import('../core/EventBridge.js').EventBridge} bridge
+ * @param {string[]} capabilities - active adapter capabilities
+ * @returns {Function[]} unsubscribe functions
+ */
+export function connectCallerEffect(bridge, capabilities) {
+    if (!capabilities.includes('caller_effects')) return [];
+
+    const unsubs = [
+        bridge.on(AgentEvents.CALLER_EFFECT, ({ enabled }) => {
+            window.setCallerEffect?.(enabled);
+
+            // Block music sync during caller skit
+            if (window.musicPlayer) {
+                window.musicPlayer.syncBlocked = enabled;
+            }
+        }),
+    ];
+
+    return unsubs;
+}

package/src/shell/camera-bridge.js

@@ -0,0 +1,28 @@
+/**
+ * camera-bridge.js — Connect CameraModule to EventBridge (P6-T4)
+ *
+ * Only connected when the active adapter has 'camera' capability.
+ * Currently a placeholder — camera captures are driven by the
+ * CameraModule internally. This bridge handles future vision events.
+ *
+ * Ref: future-dev-plans/17-MULTI-AGENT-FRAMEWORK.md (App Shell section)
+ */
+
+import { AgentEvents } from '../core/EventBridge.js';
+
+/**
+ * Wire CameraModule to the EventBridge.
+ * Only call this if the active adapter has 'camera' capability.
+ *
+ * @param {import('../core/EventBridge.js').EventBridge} bridge
+ * @param {string[]} capabilities - active adapter capabilities
+ * @returns {Function[]} unsubscribe functions
+ */
+export function connectCamera(bridge, capabilities) {
+    if (!capabilities.includes('camera')) return [];
+
+    // Camera button visibility is handled by _updateFeatureUI in orchestrator.
+    // Future: subscribe to VISION_RESULT events here if adapters emit them.
+
+    return [];
+}

package/src/shell/canvas-bridge.js

@@ -0,0 +1,32 @@
+/**
+ * canvas-bridge.js — Connect CanvasControl to EventBridge (P6-T4)
+ *
+ * Only connected when the active adapter has 'canvas' capability.
+ * Routes CANVAS_CMD events to the canvas display system.
+ *
+ * Ref: future-dev-plans/17-MULTI-AGENT-FRAMEWORK.md (App Shell section)
+ */
+
+import { AgentEvents } from '../core/EventBridge.js';
+
+/**
+ * Wire CanvasControl to the EventBridge.
+ * Only call this if the active adapter has 'canvas' capability.
+ *
+ * @param {import('../core/EventBridge.js').EventBridge} bridge
+ * @param {string[]} capabilities - active adapter capabilities
+ * @returns {Function[]} unsubscribe functions
+ */
+export function connectCanvas(bridge, capabilities) {
+    if (!capabilities.includes('canvas')) return [];
+
+    const unsubs = [
+        bridge.on(AgentEvents.CANVAS_CMD, ({ action, url }) => {
+            if (!window.CanvasControl) return;
+            if (action === 'present') window.CanvasControl.updateDisplay('html', url);
+            else if (action === 'close') window.CanvasControl.hide();
+        }),
+    ];
+
+    return unsubs;
+}

package/src/shell/commercial-bridge.js

@@ -0,0 +1,44 @@
+/**
+ * commercial-bridge.js — Connect commercial system to EventBridge (P6-T4)
+ *
+ * Only connected when the active adapter has 'commercials' capability.
+ * Handles commercial playback: stops music, plays commercial,
+ * then prompts agent to resume.
+ *
+ * Ref: future-dev-plans/17-MULTI-AGENT-FRAMEWORK.md (App Shell section)
+ */
+
+import { AgentEvents, AgentActions } from '../core/EventBridge.js';
+
+/**
+ * Wire commercial system to the EventBridge.
+ * Only call this if the active adapter has 'commercials' capability.
+ *
+ * @param {import('../core/EventBridge.js').EventBridge} bridge
+ * @param {string[]} capabilities - active adapter capabilities
+ * @returns {Function[]} unsubscribe functions
+ */
+export function connectCommercial(bridge, capabilities) {
+    if (!capabilities.includes('commercials')) return [];
+
+    const unsubs = [
+        bridge.on(AgentEvents.COMMERCIAL, async ({ action }) => {
+            if (action !== 'play') return;
+
+            // Stop music for commercial break
+            window.musicPlayer?.stop?.();
+
+            // Play commercial (global function from legacy code)
+            if (window.playCommercial) {
+                await window.playCommercial();
+            }
+
+            // Tell agent commercial is over
+            bridge.emit(AgentActions.FORCE_MESSAGE, {
+                text: "[SYSTEM: Commercial over! Say we're back and play the next track!]",
+            });
+        }),
+    ];
+
+    return unsubs;
+}

package/src/shell/face-bridge.js

@@ -0,0 +1,44 @@
+/**
+ * face-bridge.js — Connect FaceModule to EventBridge (P6-T4)
+ *
+ * Subscribes to agent events and drives face state changes.
+ * Returns an array of unsubscribe functions for clean teardown.
+ *
+ * Ref: future-dev-plans/17-MULTI-AGENT-FRAMEWORK.md (App Shell section)
+ */
+
+import { AgentEvents } from '../core/EventBridge.js';
+
+/**
+ * Wire FaceModule to the EventBridge.
+ * @param {import('../core/EventBridge.js').EventBridge} bridge
+ * @returns {Function[]} unsubscribe functions
+ */
+export function connectFace(bridge) {
+    // FaceModule is a global loaded by index.html (legacy pattern)
+    const face = () => window.FaceModule;
+
+    const unsubs = [
+        bridge.on(AgentEvents.STATE_CHANGED, ({ state }) => {
+            if (!face()) return;
+            if (state === 'speaking')  face().setMood('neutral');
+            if (state === 'listening') face().setMood('listening');
+            if (state === 'thinking')  face().setMood('thinking');
+            if (state === 'idle')      face().setMood('neutral');
+        }),
+        bridge.on(AgentEvents.MOOD, ({ mood }) => {
+            face()?.setMood(mood);
+        }),
+        bridge.on(AgentEvents.CONNECTED, () => {
+            face()?.setMood('happy');
+        }),
+        bridge.on(AgentEvents.DISCONNECTED, () => {
+            face()?.setMood('neutral');
+        }),
+        bridge.on(AgentEvents.ERROR, () => {
+            face()?.setMood('sad');
+        }),
+    ];
+
+    return unsubs;
+}