openvoiceui 1.0.0

package/src/ui/ProfileSwitcher.js

@@ -0,0 +1,228 @@
+/**
+ * ProfileSwitcher — Agent profile selector UI (P4-T6)
+ *
+ * Displays available agent profiles as clickable cards. Activating a profile:
+ *   1. POSTs to /api/profiles/activate
+ *   2. Applies UI settings (theme preset, face mode) locally
+ *   3. Emits 'profile:switched' on EventBus so VoiceSession can reload
+ *
+ * Usage (standalone):
+ *   import { ProfileSwitcher } from './ui/ProfileSwitcher.js';
+ *   const switcher = new ProfileSwitcher();
+ *   switcher.mount(document.getElementById('profile-switcher-root'));
+ *
+ * Usage (via SettingsPanel):
+ *   SettingsPanel.open('profiles');
+ *
+ * EventBus events emitted:
+ *   'profile:switched'  { profile }  — after successful activation
+ *   'profile:error'     { message }  — on activation failure
+ *
+ * ADR-002: Profiles stored as JSON files, served via /api/profiles.
+ * ADR-009: Simple manager pattern — no framework.
+ */
+
+import { eventBus } from '../core/EventBus.js';
+
+export class ProfileSwitcher {
+    constructor({ serverUrl = '' } = {}) {
+        this.serverUrl = serverUrl;
+        this._root = null;
+        this._profiles = [];
+        this._activeId = null;
+        this._busy = false;
+    }
+
+    // ── Public API ────────────────────────────────────────────────────────────
+
+    /**
+     * Mount the ProfileSwitcher UI into `container` (replaces contents).
+     * @param {HTMLElement} container
+     */
+    async mount(container) {
+        this._root = container;
+        this._root.innerHTML = '<div class="ps-loading">Loading profiles\u2026</div>';
+        await this._loadProfiles();
+    }
+
+    destroy() {
+        if (this._root) {
+            this._root.innerHTML = '';
+            this._root = null;
+        }
+    }
+
+    // ── Data loading ──────────────────────────────────────────────────────────
+
+    async _loadProfiles() {
+        try {
+            const resp = await fetch(`${this.serverUrl}/api/profiles`);
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = await resp.json();
+            this._profiles = data.profiles || [];
+            this._activeId = data.active || null;
+            this._render();
+        } catch (err) {
+            console.error('[ProfileSwitcher] Failed to load profiles:', err);
+            if (this._root) {
+                this._root.innerHTML = `<div class="ps-error">Failed to load profiles: ${this._esc(err.message)}</div>`;
+            }
+        }
+    }
+
+    // ── Rendering ─────────────────────────────────────────────────────────────
+
+    _render() {
+        if (!this._root) return;
+
+        if (!this._profiles.length) {
+            this._root.innerHTML = '<div class="ps-empty">No profiles found.</div>';
+            return;
+        }
+
+        const cards = this._profiles.map(p => this._renderCard(p)).join('');
+        this._root.innerHTML = `
+            <div class="profile-switcher">
+                <div class="ps-grid">${cards}</div>
+                <div class="ps-status" id="ps-status"></div>
+            </div>
+        `;
+        this._attachListeners();
+    }
+
+    _renderCard(profile) {
+        const isActive = profile.id === this._activeId;
+        const icon = this._esc(profile.icon || '🤖');
+        const name = this._esc(profile.name || profile.id);
+        const desc = this._esc(profile.description || '');
+        const tts = this._esc(profile.voice?.tts_provider || '—');
+        const voice = this._esc(profile.voice?.voice_id || '—');
+        const llm = this._esc(profile.llm?.provider || '—');
+
+        return `
+            <button
+                class="ps-card${isActive ? ' ps-card--active' : ''}"
+                data-profile-id="${this._esc(profile.id)}"
+                title="${isActive ? 'Currently active' : `Switch to ${name}`}"
+                ${isActive ? 'aria-current="true"' : ''}
+            >
+                <div class="ps-card-icon">${icon}</div>
+                <div class="ps-card-body">
+                    <div class="ps-card-name">${name}${isActive ? ' <span class="ps-active-badge">active</span>' : ''}</div>
+                    <div class="ps-card-desc">${desc}</div>
+                    <div class="ps-card-meta">
+                        <span class="ps-meta-item" title="LLM provider">${llm}</span>
+                        <span class="ps-meta-sep">·</span>
+                        <span class="ps-meta-item" title="TTS provider">${tts} / ${voice}</span>
+                    </div>
+                </div>
+                ${isActive ? '<div class="ps-card-check">&#10003;</div>' : ''}
+            </button>
+        `;
+    }
+
+    // ── Events ────────────────────────────────────────────────────────────────
+
+    _attachListeners() {
+        if (!this._root) return;
+        this._root.addEventListener('click', (e) => {
+            const card = e.target.closest('.ps-card');
+            if (!card || this._busy) return;
+            const profileId = card.dataset.profileId;
+            if (profileId && profileId !== this._activeId) {
+                this._activate(profileId);
+            }
+        });
+    }
+
+    async _activate(profileId) {
+        if (this._busy) return;
+        this._busy = true;
+        this._setStatus('Switching profile\u2026', 'pending');
+
+        try {
+            const resp = await fetch(`${this.serverUrl}/api/profiles/activate`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ profile_id: profileId }),
+            });
+
+            if (!resp.ok) {
+                const err = await resp.json().catch(() => ({ error: `HTTP ${resp.status}` }));
+                throw new Error(err.error || `HTTP ${resp.status}`);
+            }
+
+            const data = await resp.json();
+            const profile = data.profile || {};
+
+            this._activeId = profileId;
+
+            // Apply UI settings from the profile
+            this._applyProfileUI(profile);
+
+            // Re-render cards to update active state
+            const cards = this._profiles.map(p => this._renderCard(p)).join('');
+            const grid = this._root?.querySelector('.ps-grid');
+            if (grid) grid.innerHTML = cards;
+            this._attachListeners();
+
+            this._setStatus(`Switched to ${profile.name || profileId}`, 'success');
+            setTimeout(() => this._setStatus('', ''), 3000);
+
+            eventBus.emit('profile:switched', { profile });
+            console.log(`[ProfileSwitcher] Activated: ${profileId}`);
+
+        } catch (err) {
+            console.error('[ProfileSwitcher] Activate failed:', err);
+            this._setStatus(`Failed: ${err.message}`, 'error');
+            eventBus.emit('profile:error', { message: err.message });
+            setTimeout(() => this._setStatus('', ''), 4000);
+        } finally {
+            this._busy = false;
+        }
+    }
+
+    /**
+     * Apply UI-related profile settings immediately (theme preset, face mode).
+     * TTS/LLM provider changes take effect on the next conversation turn
+     * (server reads the active profile before each Gateway call).
+     * @param {object} profile
+     */
+    _applyProfileUI(profile) {
+        const ui = profile.ui || {};
+
+        // Apply theme preset if ThemeManager is available
+        const themePreset = ui.theme_preset;
+        if (themePreset && window.ThemeManager?.applyPreset) {
+            window.ThemeManager.applyPreset(themePreset);
+        }
+
+        // Apply face mood if FaceRenderer is available
+        const faceMood = ui.face_mood;
+        if (faceMood && window.FaceRenderer?.setMood) {
+            window.FaceRenderer.setMood(faceMood);
+        }
+
+        // Toggle face visibility
+        if (typeof ui.face_enabled === 'boolean' && window.FaceRenderer?.setEnabled) {
+            window.FaceRenderer.setEnabled(ui.face_enabled);
+        }
+    }
+
+    _setStatus(text, state) {
+        const el = this._root?.querySelector('#ps-status');
+        if (!el) return;
+        el.textContent = text;
+        el.className = 'ps-status' + (state ? ` ps-status--${state}` : '');
+    }
+
+    _esc(str) {
+        return String(str)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+}
+
+export default ProfileSwitcher;

package/src/ui/SessionControl.js

@@ -0,0 +1,240 @@
+/**
+ * SessionControl — Reset Conversation button and session management UI
+ *
+ * Provides a UI for resetting the conversation session:
+ *   - Soft reset: increment session key only (history stays in server memory)
+ *   - Hard reset: increment session key + clear all in-memory conversation history
+ *
+ * Usage:
+ *   import { SessionControl } from './ui/SessionControl.js';
+ *   const ctrl = new SessionControl({ serverUrl: '' });
+ *   ctrl.mount(document.getElementById('session-control-root'));
+ *
+ * EventBus events emitted:
+ *   'session:reset'  { old, new, mode }  — after successful reset
+ *   'session:error'  { message }         — on reset failure
+ *
+ * ADR-009: simple manager pattern (no framework)
+ */
+
+import { eventBus } from '../core/EventBus.js';
+
+export class SessionControl {
+    /**
+     * @param {object} opts
+     * @param {string} [opts.serverUrl]  — base URL of Flask server (default: '')
+     */
+    constructor({ serverUrl = '' } = {}) {
+        this.serverUrl = serverUrl;
+        this._root = null;
+        this._busy = false;
+    }
+
+    // ── Mount / Unmount ───────────────────────────────────────────────────────
+
+    /**
+     * Mount the SessionControl UI into a container element.
+     * @param {HTMLElement} container
+     */
+    mount(container) {
+        this._root = container;
+        this._render();
+    }
+
+    /**
+     * Destroy the component and clean up DOM.
+     */
+    destroy() {
+        if (this._root) {
+            this._root.innerHTML = '';
+            this._root = null;
+        }
+    }
+
+    // ── Render ────────────────────────────────────────────────────────────────
+
+    _render() {
+        if (!this._root) return;
+        this._root.innerHTML = `
+            <div class="session-control">
+                <div class="sc-header">
+                    <span class="sc-title">Session</span>
+                </div>
+                <div class="sc-actions">
+                    <button class="sc-btn sc-soft-btn" id="sc-soft-reset" title="Soft reset: start a new context window, keep server state">
+                        🔄 Reset (Soft)
+                    </button>
+                    <button class="sc-btn sc-hard-btn" id="sc-hard-reset" title="Hard reset: start fresh — clear all conversation history">
+                        ⚡ Reset (Hard)
+                    </button>
+                </div>
+                <div class="sc-status" id="sc-status"></div>
+                <div class="sc-confirm" id="sc-confirm" style="display:none;">
+                    <div class="sc-confirm-msg" id="sc-confirm-msg"></div>
+                    <div class="sc-confirm-btns">
+                        <button class="sc-btn sc-confirm-yes" id="sc-confirm-yes">Confirm</button>
+                        <button class="sc-btn sc-confirm-cancel" id="sc-confirm-cancel">Cancel</button>
+                    </div>
+                </div>
+            </div>
+        `;
+        this._attachListeners();
+    }
+
+    _attachListeners() {
+        const softBtn = this._root.querySelector('#sc-soft-reset');
+        const hardBtn = this._root.querySelector('#sc-hard-reset');
+        const cancelBtn = this._root.querySelector('#sc-confirm-cancel');
+        const confirmBtn = this._root.querySelector('#sc-confirm-yes');
+
+        if (softBtn) softBtn.addEventListener('click', () => this._confirmReset('soft'));
+        if (hardBtn) hardBtn.addEventListener('click', () => this._confirmReset('hard'));
+        if (cancelBtn) cancelBtn.addEventListener('click', () => this._hideConfirm());
+        if (confirmBtn) confirmBtn.addEventListener('click', () => this._executeReset());
+
+        // Close confirm on outside click
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') this._hideConfirm();
+        }, { once: false });
+    }
+
+    // ── Confirm dialog ────────────────────────────────────────────────────────
+
+    _confirmReset(mode) {
+        this._pendingMode = mode;
+        const msgEl = this._root?.querySelector('#sc-confirm-msg');
+        const confirmEl = this._root?.querySelector('#sc-confirm');
+        if (!confirmEl) return;
+
+        const msgs = {
+            soft: 'Start a fresh conversation context? (Server history stays — this is quick.)',
+            hard: 'Hard reset will clear ALL conversation history on the server. Are you sure?'
+        };
+
+        if (msgEl) msgEl.textContent = msgs[mode] || msgs.soft;
+        confirmEl.style.display = 'block';
+    }
+
+    _hideConfirm() {
+        const confirmEl = this._root?.querySelector('#sc-confirm');
+        if (confirmEl) confirmEl.style.display = 'none';
+        this._pendingMode = null;
+    }
+
+    // ── Reset execution ───────────────────────────────────────────────────────
+
+    async _executeReset() {
+        const mode = this._pendingMode || 'soft';
+        this._hideConfirm();
+
+        if (this._busy) return;
+        this._busy = true;
+        this._setStatus('Resetting…', 'pending');
+
+        try {
+            const res = await fetch(`${this.serverUrl}/api/session/reset`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ mode })
+            });
+
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));
+                throw new Error(err.error || `HTTP ${res.status}`);
+            }
+
+            const data = await res.json();
+            const modeLabel = mode === 'hard' ? 'Hard' : 'Soft';
+            this._setStatus(`${modeLabel} reset done.`, 'success');
+
+            eventBus.emit('session:reset', {
+                old: data.old,
+                new: data.new,
+                mode: data.mode
+            });
+
+            console.log(`[SessionControl] Reset ${mode}: ${data.old} → ${data.new}`);
+
+            // Clear status after 3 s
+            setTimeout(() => this._setStatus('', ''), 3000);
+
+        } catch (err) {
+            console.error('[SessionControl] Reset failed:', err);
+            this._setStatus(`Reset failed: ${err.message}`, 'error');
+            eventBus.emit('session:error', { message: `Session reset failed: ${err.message}` });
+            setTimeout(() => this._setStatus('', ''), 4000);
+        } finally {
+            this._busy = false;
+        }
+    }
+
+    _setStatus(text, state) {
+        const el = this._root?.querySelector('#sc-status');
+        if (!el) return;
+        el.textContent = text;
+        el.className = 'sc-status' + (state ? ` sc-status--${state}` : '');
+    }
+
+    // ── Static convenience ────────────────────────────────────────────────────
+
+    /**
+     * Perform a programmatic soft reset (no UI confirmation).
+     * @param {string} [serverUrl]
+     * @returns {Promise<object>} reset result
+     */
+    static async softReset(serverUrl = '') {
+        const ctrl = new SessionControl({ serverUrl });
+        ctrl._pendingMode = 'soft';
+        return ctrl._executeReset();
+    }
+
+    /**
+     * Perform a programmatic hard reset (no UI confirmation).
+     * @param {string} [serverUrl]
+     * @returns {Promise<object>} reset result
+     */
+    static async hardReset(serverUrl = '') {
+        const ctrl = new SessionControl({ serverUrl });
+        ctrl._pendingMode = 'hard';
+        return ctrl._executeReset();
+    }
+}
+
+// ── Global singleton for legacy/inline usage ──────────────────────────────────
+
+/**
+ * Global SessionControl helper — call from ActionConsole or AppShell inline handlers.
+ * Usage:
+ *   window.SessionControl.reset('soft')
+ *   window.SessionControl.reset('hard')
+ */
+window.SessionControl = {
+    _instance: null,
+
+    /**
+     * Mount a SessionControl into a container.
+     * @param {HTMLElement} container
+     * @param {string} [serverUrl]
+     * @returns {SessionControl}
+     */
+    mount(container, serverUrl = '') {
+        if (this._instance) this._instance.destroy();
+        this._instance = new SessionControl({ serverUrl });
+        this._instance.mount(container);
+        return this._instance;
+    },
+
+    /**
+     * Trigger a reset (soft or hard) programmatically, no UI confirmation.
+     * @param {'soft'|'hard'} [mode]
+     * @param {string} [serverUrl]
+     */
+    async reset(mode = 'soft', serverUrl = '') {
+        if (mode === 'hard') {
+            return SessionControl.hardReset(serverUrl);
+        }
+        return SessionControl.softReset(serverUrl);
+    }
+};
+
+export default SessionControl;

package/src/ui/face/FacePicker.js

@@ -0,0 +1,195 @@
+/**
+ * FacePicker — gallery UI for selecting the active face/avatar.
+ *
+ * Reads face definitions from /src/face/manifest.json, renders a card grid,
+ * and delegates activation to faceManager (ES module) or FaceRenderer (legacy).
+ *
+ * Usage (standalone):
+ *   const picker = new FacePicker();
+ *   await picker.mount(document.getElementById('face-picker-root'));
+ *
+ * Usage (embedded in SettingsPanel):
+ *   const html = await FacePicker.renderHTML();
+ *   container.innerHTML = html;
+ *   FacePicker.attachListeners(container);
+ */
+
+const MANIFEST_URL = '/src/face/manifest.json';
+const STORAGE_KEY  = 'ai-face-active';
+
+// ── helpers ────────────────────────────────────────────────────────────────
+
+function getActiveFaceId() {
+    // ES module faceManager takes priority
+    try {
+        if (window._faceManager?.activeFaceId) return window._faceManager.activeFaceId;
+    } catch (_) {}
+    // Server profile is source of truth
+    try {
+        if (window._serverProfile?.ui?.face_mode) return window._serverProfile.ui.face_mode;
+    } catch (_) {}
+    return 'eyes';
+}
+
+function persistFaceId(id) {
+    // Save to server profile so all devices see the same face
+    const profileId = window.providerManager?._activeProfileId || 'default';
+    fetch('/api/profiles/' + profileId, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ui: { face_mode: id } })
+    }).catch(e => console.warn('Failed to save face to profile:', e));
+    // Update cached profile
+    if (window._serverProfile) {
+        if (!window._serverProfile.ui) window._serverProfile.ui = {};
+        window._serverProfile.ui.face_mode = id;
+    }
+}
+
+async function loadManifest() {
+    try {
+        const res = await fetch(MANIFEST_URL);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        return await res.json();
+    } catch (err) {
+        console.warn('[FacePicker] Could not load manifest, using defaults:', err.message);
+        return {
+            default: 'eyes',
+            faces: [
+                { id: 'eyes', name: 'AI Eyes',   description: 'Classic animated eyes', preview: null, moods: [], features: [] },
+                { id: 'orb',  name: 'Sound Orb', description: 'Audio-reactive orb',   preview: null, moods: [], features: [] }
+            ]
+        };
+    }
+}
+
+async function activateFace(id) {
+    persistFaceId(id);
+
+    // Try ES module faceManager first
+    if (window._faceManager && typeof window._faceManager.load === 'function') {
+        await window._faceManager.load(id);
+        return;
+    }
+
+    // Fall back to legacy FaceRenderer
+    if (window.FaceRenderer && typeof window.FaceRenderer.setMode === 'function') {
+        window.FaceRenderer.setMode(id);
+        return;
+    }
+
+    console.warn('[FacePicker] No face system available to activate face:', id);
+}
+
+// ── rendering ──────────────────────────────────────────────────────────────
+
+function renderFeatureTags(features) {
+    if (!features || features.length === 0) return '';
+    return `<div class="face-card-features">
+        ${features.map(f => `<span class="face-feature-tag">${f}</span>`).join('')}
+    </div>`;
+}
+
+function renderMoodDots(moods) {
+    if (!moods || moods.length === 0) return '';
+    const dots = moods.map(m => `<span class="face-mood-dot" title="${m}" data-mood="${m}"></span>`).join('');
+    return `<div class="face-card-moods" title="Supported moods">${dots}</div>`;
+}
+
+function renderCard(face, isActive) {
+    const previewSrc  = face.preview || '';
+    const previewHtml = previewSrc
+        ? `<img class="face-card-preview" src="${previewSrc}" alt="${face.name} preview" loading="lazy">`
+        : `<div class="face-card-preview face-card-preview--placeholder">
+               <span>${face.name.charAt(0)}</span>
+           </div>`;
+
+    return `
+        <div class="face-card ${isActive ? 'face-card--active' : ''}" data-face-id="${face.id}" role="button" tabindex="0"
+             aria-label="Select ${face.name}${isActive ? ' (active)' : ''}">
+            <div class="face-card-media">
+                ${previewHtml}
+                ${isActive ? '<div class="face-card-active-badge">Active</div>' : ''}
+            </div>
+            <div class="face-card-info">
+                <div class="face-card-name">${face.name}</div>
+                <div class="face-card-desc">${face.description}</div>
+                ${renderMoodDots(face.moods)}
+                ${renderFeatureTags(face.features)}
+            </div>
+        </div>
+    `;
+}
+
+function renderGallery(manifest, activeFaceId) {
+    const cards = manifest.faces.map(f => renderCard(f, f.id === activeFaceId)).join('');
+    return `
+        <div class="face-picker-gallery" role="radiogroup" aria-label="Face picker">
+            ${cards}
+        </div>
+    `;
+}
+
+// ── event attachment ───────────────────────────────────────────────────────
+
+function attachListeners(root) {
+    root.querySelectorAll('.face-card').forEach(card => {
+        const activate = async () => {
+            const id = card.dataset.faceId;
+            if (!id) return;
+
+            // Update UI immediately
+            root.querySelectorAll('.face-card').forEach(c => {
+                c.classList.remove('face-card--active');
+                c.setAttribute('aria-label', c.querySelector('.face-card-name')?.textContent || '');
+                const badge = c.querySelector('.face-card-active-badge');
+                if (badge) badge.remove();
+            });
+            card.classList.add('face-card--active');
+            card.setAttribute('aria-label', `${card.querySelector('.face-card-name')?.textContent || id} (active)`);
+            const media = card.querySelector('.face-card-media');
+            if (media && !media.querySelector('.face-card-active-badge')) {
+                const badge = document.createElement('div');
+                badge.className = 'face-card-active-badge';
+                badge.textContent = 'Active';
+                media.appendChild(badge);
+            }
+
+            await activateFace(id);
+        };
+
+        card.addEventListener('click', activate);
+        card.addEventListener('keydown', e => {
+            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); activate(); }
+        });
+    });
+}
+
+// ── public API ─────────────────────────────────────────────────────────────
+
+/**
+ * Render gallery HTML string (async, loads manifest).
+ * @returns {Promise<string>}
+ */
+async function renderHTML() {
+    const manifest = await loadManifest();
+    const activeFaceId = getActiveFaceId();
+    return renderGallery(manifest, activeFaceId);
+}
+
+/**
+ * Mount the face picker into a container element.
+ * @param {HTMLElement} container
+ * @returns {Promise<void>}
+ */
+async function mount(container) {
+    container.innerHTML = '<div class="face-picker-loading">Loading faces...</div>';
+    container.innerHTML = await renderHTML();
+    attachListeners(container);
+}
+
+// Expose as window global for SettingsPanel
+const FacePicker = { renderHTML, mount, attachListeners };
+if (typeof window !== 'undefined') {
+    window.FacePicker = FacePicker;
+}