@speechos/client 0.2.8 → 0.2.10

package/dist/index.js

@@ -1,4 +1,4 @@
-import { state, events, getConfig, getBackend, setConfig, updateUserId } from '@speechos/core';
+import { state, events, getConfig, getSettingsToken, clearSettingsToken, getBackend, setConfig, updateUserId } from '@speechos/core';
 export { DEFAULT_HOST, events, getConfig, livekit, resetConfig, setConfig, state } from '@speechos/core';
 
 /**
@@ -12,6 +12,7 @@ const defaultClientConfig = {
     commands: [],
     zIndex: 999999,
     alwaysVisible: false,
+    useExternalSettings: false,
 };
 /**
  * Current client configuration singleton
@@ -27,6 +28,7 @@ function validateClientConfig(config) {
         commands: config.commands ?? defaultClientConfig.commands,
         zIndex: config.zIndex ?? defaultClientConfig.zIndex,
         alwaysVisible: config.alwaysVisible ?? defaultClientConfig.alwaysVisible,
+        useExternalSettings: config.useExternalSettings ?? defaultClientConfig.useExternalSettings,
     };
     // Validate zIndex
     if (typeof resolved.zIndex !== "number" || resolved.zIndex < 0) {
@@ -78,6 +80,12 @@ function getZIndex() {
 function isAlwaysVisible() {
     return currentClientConfig.alwaysVisible;
 }
+/**
+ * Check if external settings page should be used
+ */
+function useExternalSettings() {
+    return currentClientConfig.useExternalSettings;
+}
 
 /**
  * Form field focus detection for SpeechOS Client SDK
@@ -481,15 +489,23 @@ function resetTextInputHandler() {
  * Persists input language preferences to localStorage
  */
 const STORAGE_KEY$4 = "speechos_language_settings";
+/**
+ * In-memory cache for language settings. When server sync is enabled, this is the
+ * source of truth. localStorage is only used when server sync is disabled.
+ */
+let memoryCache$3 = null;
 /**
  * Supported input languages for speech recognition
  * Each language has a name, primary code, and available variants
  * Sorted alphabetically by name for dropdown display
  */
 const SUPPORTED_LANGUAGES = [
+    { name: "Belarusian", code: "be", variants: ["be"] },
+    { name: "Bengali", code: "bn", variants: ["bn"] },
+    { name: "Bosnian", code: "bs", variants: ["bs"] },
     { name: "Bulgarian", code: "bg", variants: ["bg"] },
     { name: "Catalan", code: "ca", variants: ["ca"] },
-    { name: "Chinese", code: "zh", variants: ["zh"] },
+    { name: "Croatian", code: "hr", variants: ["hr"] },
     { name: "Czech", code: "cs", variants: ["cs"] },
     { name: "Danish", code: "da", variants: ["da", "da-DK"] },
     { name: "Dutch", code: "nl", variants: ["nl"] },
@@ -510,18 +526,26 @@ const SUPPORTED_LANGUAGES = [
     { name: "Indonesian", code: "id", variants: ["id"] },
     { name: "Italian", code: "it", variants: ["it"] },
     { name: "Japanese", code: "ja", variants: ["ja"] },
+    { name: "Kannada", code: "kn", variants: ["kn"] },
     { name: "Korean", code: "ko", variants: ["ko", "ko-KR"] },
     { name: "Latvian", code: "lv", variants: ["lv"] },
     { name: "Lithuanian", code: "lt", variants: ["lt"] },
+    { name: "Macedonian", code: "mk", variants: ["mk"] },
     { name: "Malay", code: "ms", variants: ["ms"] },
+    { name: "Marathi", code: "mr", variants: ["mr"] },
     { name: "Norwegian", code: "no", variants: ["no"] },
     { name: "Polish", code: "pl", variants: ["pl"] },
     { name: "Portuguese", code: "pt", variants: ["pt", "pt-BR", "pt-PT"] },
     { name: "Romanian", code: "ro", variants: ["ro"] },
     { name: "Russian", code: "ru", variants: ["ru"] },
+    { name: "Serbian", code: "sr", variants: ["sr"] },
     { name: "Slovak", code: "sk", variants: ["sk"] },
+    { name: "Slovenian", code: "sl", variants: ["sl"] },
     { name: "Spanish", code: "es", variants: ["es", "es-419"] },
     { name: "Swedish", code: "sv", variants: ["sv", "sv-SE"] },
+    { name: "Tagalog", code: "tl", variants: ["tl"] },
+    { name: "Tamil", code: "ta", variants: ["ta"] },
+    { name: "Telugu", code: "te", variants: ["te"] },
     { name: "Turkish", code: "tr", variants: ["tr"] },
     { name: "Ukrainian", code: "uk", variants: ["uk"] },
     { name: "Vietnamese", code: "vi", variants: ["vi"] },
@@ -532,9 +556,13 @@ const defaultSettings$1 = {
     smartFormat: true,
 };
 /**
- * Get current language settings from localStorage
+ * Get current language settings. Prefers in-memory cache (from server sync),
+ * then falls back to localStorage.
  */
 function getLanguageSettings() {
+    if (memoryCache$3 !== null) {
+        return { ...memoryCache$3 };
+    }
     try {
         const stored = localStorage.getItem(STORAGE_KEY$4);
         if (!stored)
@@ -546,14 +574,27 @@ function getLanguageSettings() {
     }
 }
 /**
- * Save language settings to localStorage
+ * Set language settings directly (used by settings sync from server data).
+ */
+function setLanguageSettings(settings) {
+    memoryCache$3 = { ...defaultSettings$1, ...settings };
+}
+/**
+ * Reset memory cache (for testing only)
+ */
+function resetMemoryCache$2() {
+    memoryCache$3 = null;
+}
+/**
+ * Save language settings (updates memory cache and tries localStorage)
  */
 function saveLanguageSettings(settings) {
+    memoryCache$3 = settings;
     try {
         localStorage.setItem(STORAGE_KEY$4, JSON.stringify(settings));
     }
     catch {
-        // localStorage full or unavailable - silently fail
+        // localStorage full or unavailable - memory cache still updated
     }
 }
 /**
@@ -657,6 +698,7 @@ function getLanguageName() {
  * Reset language settings to defaults
  */
 function resetLanguageSettings() {
+    memoryCache$3 = null;
     try {
         localStorage.removeItem(STORAGE_KEY$4);
     }
@@ -666,6 +708,7 @@ function resetLanguageSettings() {
 }
 const languageSettings = {
     getLanguageSettings,
+    setLanguageSettings,
     getInputLanguageCode,
     setInputLanguageCode,
     getOutputLanguageCode,
@@ -676,6 +719,7 @@ const languageSettings = {
     getSmartFormatEnabled,
     setSmartFormatEnabled,
     resetLanguageSettings,
+    resetMemoryCache: resetMemoryCache$2,
     SUPPORTED_LANGUAGES,
     // Legacy aliases
     getLanguageCode,
@@ -691,6 +735,11 @@ const STORAGE_KEY$3 = "speechos_snippets";
 const MAX_SNIPPETS = 25;
 const MAX_TRIGGER_LENGTH = 30;
 const MAX_EXPANSION_LENGTH = 300;
+/**
+ * In-memory cache for snippets. When server sync is enabled, this is the
+ * source of truth. localStorage is only used when server sync is disabled.
+ */
+let memoryCache$2 = null;
 /**
  * Generate a unique ID for snippet entries
  */
@@ -698,15 +747,18 @@ function generateId$2() {
     return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 }
 /**
- * Get all snippets from localStorage
+ * Get all snippets. Prefers in-memory cache (from server sync),
+ * then falls back to localStorage.
  */
 function getSnippets() {
+    if (memoryCache$2 !== null) {
+        return [...memoryCache$2].sort((a, b) => b.createdAt - a.createdAt);
+    }
     try {
         const stored = localStorage.getItem(STORAGE_KEY$3);
         if (!stored)
             return [];
         const entries = JSON.parse(stored);
-        // Return newest first
         return entries.sort((a, b) => b.createdAt - a.createdAt);
     }
     catch {
@@ -714,14 +766,27 @@ function getSnippets() {
     }
 }
 /**
- * Save snippets to localStorage
+ * Set snippets directly (used by settings sync from server data).
+ */
+function setSnippets(snippets) {
+    memoryCache$2 = snippets.slice(0, MAX_SNIPPETS);
+}
+/**
+ * Reset memory cache (for testing only)
+ */
+function resetMemoryCache$1() {
+    memoryCache$2 = null;
+}
+/**
+ * Save snippets (updates memory cache and tries localStorage)
  */
 function saveSnippets(snippets) {
+    memoryCache$2 = snippets;
     try {
         localStorage.setItem(STORAGE_KEY$3, JSON.stringify(snippets));
     }
     catch {
-        // localStorage full or unavailable - silently fail
+        // localStorage full or unavailable - memory cache still updated
     }
 }
 /**
@@ -839,13 +904,14 @@ function deleteSnippet(id) {
  * Clear all snippets
  */
 function clearSnippets() {
+    memoryCache$2 = [];
     try {
         localStorage.removeItem(STORAGE_KEY$3);
-        events.emit("settings:changed", { setting: "snippets" });
     }
     catch {
         // Silently fail
     }
+    events.emit("settings:changed", { setting: "snippets" });
 }
 /**
  * Get snippet count info
@@ -861,12 +927,14 @@ function isAtSnippetLimit() {
 }
 const snippetsStore = {
     getSnippets,
+    setSnippets,
     addSnippet,
     updateSnippet,
     deleteSnippet,
     clearSnippets,
     getSnippetCount,
     isAtSnippetLimit,
+    resetMemoryCache: resetMemoryCache$1,
     MAX_SNIPPETS,
     MAX_TRIGGER_LENGTH,
     MAX_EXPANSION_LENGTH,
@@ -879,6 +947,11 @@ const snippetsStore = {
 const STORAGE_KEY$2 = "speechos_vocabulary";
 const MAX_TERMS = 50;
 const MAX_TERM_LENGTH = 50;
+/**
+ * In-memory cache for vocabulary. When server sync is enabled, this is the
+ * source of truth. localStorage is only used when server sync is disabled.
+ */
+let memoryCache$1 = null;
 /**
  * Generate a unique ID for vocabulary entries
  */
@@ -886,15 +959,18 @@ function generateId$1() {
     return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 }
 /**
- * Get all vocabulary terms from localStorage
+ * Get all vocabulary terms. Prefers in-memory cache (from server sync),
+ * then falls back to localStorage.
  */
 function getVocabulary() {
+    if (memoryCache$1 !== null) {
+        return [...memoryCache$1].sort((a, b) => b.createdAt - a.createdAt);
+    }
     try {
         const stored = localStorage.getItem(STORAGE_KEY$2);
         if (!stored)
             return [];
         const entries = JSON.parse(stored);
-        // Return newest first
         return entries.sort((a, b) => b.createdAt - a.createdAt);
     }
     catch {
@@ -902,14 +978,27 @@ function getVocabulary() {
     }
 }
 /**
- * Save vocabulary to localStorage
+ * Set vocabulary directly (used by settings sync from server data).
+ */
+function setVocabulary(terms) {
+    memoryCache$1 = terms.slice(0, MAX_TERMS);
+}
+/**
+ * Reset memory cache (for testing only)
+ */
+function resetMemoryCache() {
+    memoryCache$1 = null;
+}
+/**
+ * Save vocabulary (updates memory cache and tries localStorage)
  */
 function saveVocabulary(terms) {
+    memoryCache$1 = terms;
     try {
         localStorage.setItem(STORAGE_KEY$2, JSON.stringify(terms));
     }
     catch {
-        // localStorage full or unavailable - silently fail
+        // localStorage full or unavailable - memory cache still updated
     }
 }
 /**
@@ -977,13 +1066,14 @@ function deleteTerm(id) {
  * Clear all vocabulary
  */
 function clearVocabulary() {
+    memoryCache$1 = [];
     try {
         localStorage.removeItem(STORAGE_KEY$2);
-        events.emit("settings:changed", { setting: "vocabulary" });
     }
     catch {
         // Silently fail
     }
+    events.emit("settings:changed", { setting: "vocabulary" });
 }
 /**
  * Get vocabulary count info
@@ -999,11 +1089,13 @@ function isAtVocabularyLimit() {
 }
 const vocabularyStore = {
     getVocabulary,
+    setVocabulary,
     addTerm,
     deleteTerm,
     clearVocabulary,
     getVocabularyCount,
     isAtVocabularyLimit,
+    resetMemoryCache,
     MAX_TERMS,
     MAX_TERM_LENGTH,
 };
@@ -1101,6 +1193,451 @@ const audioSettings = {
     resetAudioSettings,
 };
 
+/**
+ * Transcript history store
+ * Persists transcripts to localStorage for viewing in the settings modal
+ */
+const STORAGE_KEY = "speechos_transcripts";
+const MAX_ENTRIES = 50;
+/**
+ * In-memory cache for transcripts. When server sync is enabled, this is the
+ * source of truth. localStorage is only used when server sync is disabled.
+ */
+let memoryCache = null;
+/**
+ * Generate a unique ID for transcript entries
+ */
+function generateId() {
+    return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+/**
+ * Get all transcripts. Prefers in-memory cache (from server sync),
+ * then falls back to localStorage.
+ */
+function getTranscripts() {
+    // If we have in-memory data (from server sync), use it
+    if (memoryCache !== null) {
+        return [...memoryCache].sort((a, b) => b.timestamp - a.timestamp);
+    }
+    // Fall back to localStorage (when server sync is disabled)
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (!stored)
+            return [];
+        const entries = JSON.parse(stored);
+        return entries.sort((a, b) => b.timestamp - a.timestamp);
+    }
+    catch {
+        return [];
+    }
+}
+/**
+ * Set transcripts directly (used by settings sync from server data).
+ * Server data is the source of truth - just update memory cache.
+ */
+function setTranscripts(entries) {
+    memoryCache = entries.slice(0, MAX_ENTRIES);
+}
+/**
+ * Save a new transcript entry
+ */
+function saveTranscript(text, action, originalTextOrOptions) {
+    const entry = {
+        id: generateId(),
+        text,
+        timestamp: Date.now(),
+        action,
+    };
+    // Handle edit action with originalText string
+    if (action === "edit" && typeof originalTextOrOptions === "string") {
+        entry.originalText = originalTextOrOptions;
+    }
+    // Handle command action with options object
+    if (action === "command" && typeof originalTextOrOptions === "object") {
+        const options = originalTextOrOptions;
+        if (options.inputText !== undefined)
+            entry.inputText = options.inputText;
+        if (options.commandResult !== undefined)
+            entry.commandResult = options.commandResult;
+        if (options.commandConfig !== undefined)
+            entry.commandConfig = options.commandConfig;
+    }
+    const entries = getTranscripts();
+    entries.unshift(entry);
+    // Prune to max entries
+    const pruned = entries.slice(0, MAX_ENTRIES);
+    // Update memory cache (always)
+    memoryCache = pruned;
+    // Try to persist to localStorage (for when server sync is disabled)
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(pruned));
+    }
+    catch {
+        // Quota exceeded - memory cache is still updated
+    }
+    // Emit settings change event to trigger sync
+    events.emit("settings:changed", { setting: "history" });
+    return entry;
+}
+/**
+ * Clear all transcript history
+ */
+function clearTranscripts() {
+    memoryCache = [];
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    catch {
+        // Silently fail
+    }
+    events.emit("settings:changed", { setting: "history" });
+}
+/**
+ * Delete a single transcript by ID
+ */
+function deleteTranscript(id) {
+    const entries = getTranscripts().filter((e) => e.id !== id);
+    memoryCache = entries;
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+    }
+    catch {
+        // Silently fail
+    }
+    events.emit("settings:changed", { setting: "history" });
+}
+const transcriptStore = {
+    getTranscripts,
+    setTranscripts,
+    saveTranscript,
+    clearTranscripts,
+    deleteTranscript,
+};
+
+/**
+ * Settings sync manager
+ * Syncs user settings (language, vocabulary, snippets, history) with the server
+ */
+// Sync debounce delay in milliseconds
+const SYNC_DEBOUNCE_MS = 2000;
+// Maximum retry attempts
+const MAX_RETRIES = 3;
+// Base retry delay in milliseconds (exponential backoff)
+const BASE_RETRY_DELAY_MS = 2000;
+/**
+ * Settings sync manager singleton
+ */
+class SettingsSync {
+    constructor() {
+        this.syncTimer = null;
+        this.isSyncing = false;
+        this.retryCount = 0;
+        this.isInitialized = false;
+        this.unsubscribe = null;
+        /** When true, sync is disabled due to CSP or network restrictions */
+        this.syncDisabled = false;
+    }
+    /**
+     * Make a fetch request using native fetch.
+     */
+    async doFetch(url, options) {
+        const config = getConfig();
+        if (config.debug) {
+            console.log("[SpeechOS] Using native fetch", options.method, url);
+        }
+        return fetch(url, options);
+    }
+    /**
+     * Initialize the settings sync manager
+     * If a settingsToken is configured, loads settings from server
+     */
+    async init() {
+        const token = getSettingsToken();
+        if (!token) {
+            // No token configured, sync is disabled
+            return;
+        }
+        if (this.isInitialized) {
+            return;
+        }
+        this.isInitialized = true;
+        // Subscribe to settings changes
+        this.unsubscribe = events.on("settings:changed", () => {
+            this.scheduleSyncToServer();
+        });
+        // Load settings from server
+        await this.loadFromServer();
+    }
+    /**
+     * Stop the sync manager and clean up
+     */
+    destroy() {
+        if (this.syncTimer) {
+            clearTimeout(this.syncTimer);
+            this.syncTimer = null;
+        }
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        this.isInitialized = false;
+        this.retryCount = 0;
+        this.syncDisabled = false;
+    }
+    /**
+     * Load settings from the server and merge with local
+     */
+    async loadFromServer() {
+        const token = getSettingsToken();
+        if (!token) {
+            return;
+        }
+        const config = getConfig();
+        try {
+            const response = await this.doFetch(`${config.host}/api/user-settings/`, {
+                method: "GET",
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json",
+                },
+            });
+            if (config.debug) {
+                console.log("[SpeechOS] Settings fetch response:", response.status, response.ok ? "OK" : response.statusText);
+            }
+            if (response.status === 404) {
+                // No settings on server yet (new user) - sync local settings to server
+                if (config.debug) {
+                    console.log("[SpeechOS] No server settings found, syncing local to server");
+                }
+                await this.syncToServer();
+                return;
+            }
+            if (response.status === 401 || response.status === 403) {
+                // Token expired or invalid
+                this.handleTokenExpired();
+                return;
+            }
+            if (!response.ok) {
+                throw new Error(`Server returned ${response.status}`);
+            }
+            const serverSettings = (await response.json());
+            if (config.debug) {
+                console.log("[SpeechOS] Settings received from server:", {
+                    language: serverSettings.language,
+                    vocabularyCount: serverSettings.vocabulary?.length ?? 0,
+                    snippetsCount: serverSettings.snippets?.length ?? 0,
+                    historyCount: serverSettings.history?.length ?? 0,
+                    lastSyncedAt: serverSettings.lastSyncedAt,
+                });
+                if (serverSettings.history?.length > 0) {
+                    console.log("[SpeechOS] History entries:", serverSettings.history);
+                }
+            }
+            this.mergeSettings(serverSettings);
+            events.emit("settings:loaded", undefined);
+            if (config.debug) {
+                console.log("[SpeechOS] Settings merged and loaded");
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Unknown error";
+            // Check if this is a CSP/network restriction - disable sync permanently for this session
+            if (this.isNetworkRestrictionError(error)) {
+                this.syncDisabled = true;
+                if (config.debug) {
+                    console.log("[SpeechOS] Settings sync disabled (CSP/network restriction), using localStorage only");
+                }
+            }
+            else if (config.debug) {
+                console.warn("[SpeechOS] Failed to load settings from server:", errorMessage);
+            }
+            events.emit("settings:syncFailed", { error: errorMessage });
+            // Continue with local settings on error
+        }
+    }
+    /**
+     * Merge server settings with local (server wins).
+     * Uses store setters to update memory cache - localStorage is a fallback.
+     */
+    mergeSettings(serverSettings) {
+        // Language settings - server wins
+        if (serverSettings.language) {
+            setLanguageSettings(serverSettings.language);
+        }
+        // Vocabulary - server wins
+        if (serverSettings.vocabulary) {
+            setVocabulary(serverSettings.vocabulary);
+        }
+        // Snippets - server wins
+        if (serverSettings.snippets) {
+            setSnippets(serverSettings.snippets);
+        }
+        // History - server wins
+        if (serverSettings.history) {
+            setTranscripts(serverSettings.history);
+        }
+    }
+    /**
+     * Schedule a debounced sync to server
+     */
+    scheduleSyncToServer() {
+        const token = getSettingsToken();
+        if (!token || this.syncDisabled) {
+            return;
+        }
+        // Cancel any pending sync
+        if (this.syncTimer) {
+            clearTimeout(this.syncTimer);
+        }
+        // Schedule new sync
+        this.syncTimer = setTimeout(() => {
+            this.syncToServer();
+        }, SYNC_DEBOUNCE_MS);
+    }
+    /**
+     * Sync current settings to server
+     */
+    async syncToServer() {
+        const token = getSettingsToken();
+        if (!token || this.isSyncing || this.syncDisabled) {
+            return;
+        }
+        this.isSyncing = true;
+        const config = getConfig();
+        try {
+            const languageSettings = getLanguageSettings();
+            const vocabulary = getVocabulary();
+            const snippets = getSnippets();
+            const transcripts = getTranscripts();
+            const payload = {
+                language: {
+                    inputLanguageCode: languageSettings.inputLanguageCode,
+                    outputLanguageCode: languageSettings.outputLanguageCode,
+                    smartFormat: languageSettings.smartFormat,
+                },
+                vocabulary: vocabulary.map((v) => ({
+                    id: v.id,
+                    term: v.term,
+                    createdAt: v.createdAt,
+                })),
+                snippets: snippets.map((s) => ({
+                    id: s.id,
+                    trigger: s.trigger,
+                    expansion: s.expansion,
+                    createdAt: s.createdAt,
+                })),
+                // Sync history (excluding commandConfig to reduce payload size)
+                history: transcripts.map((t) => ({
+                    id: t.id,
+                    text: t.text,
+                    timestamp: t.timestamp,
+                    action: t.action,
+                    ...(t.originalText && { originalText: t.originalText }),
+                    ...(t.inputText && { inputText: t.inputText }),
+                    ...(t.commandResult !== undefined && { commandResult: t.commandResult }),
+                })),
+            };
+            const response = await this.doFetch(`${config.host}/api/user-settings/`, {
+                method: "PUT",
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(payload),
+            });
+            if (response.status === 401 || response.status === 403) {
+                this.handleTokenExpired();
+                return;
+            }
+            if (!response.ok) {
+                throw new Error(`Server returned ${response.status}`);
+            }
+            // Reset retry count on success
+            this.retryCount = 0;
+            events.emit("settings:synced", undefined);
+            if (config.debug) {
+                console.log("[SpeechOS] Settings synced to server");
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : "Unknown error";
+            // Check if this is a CSP/network restriction - disable sync permanently for this session
+            if (this.isNetworkRestrictionError(error)) {
+                this.syncDisabled = true;
+                if (config.debug) {
+                    console.log("[SpeechOS] Settings sync disabled (CSP/network restriction), using localStorage only");
+                }
+                events.emit("settings:syncFailed", { error: errorMessage });
+                // Don't retry - CSP errors are permanent
+            }
+            else {
+                if (config.debug) {
+                    console.warn("[SpeechOS] Failed to sync settings to server:", errorMessage);
+                }
+                events.emit("settings:syncFailed", { error: errorMessage });
+                // Retry with exponential backoff (only for transient errors)
+                this.scheduleRetry();
+            }
+        }
+        finally {
+            this.isSyncing = false;
+        }
+    }
+    /**
+     * Schedule a retry with exponential backoff
+     */
+    scheduleRetry() {
+        if (this.retryCount >= MAX_RETRIES) {
+            const config = getConfig();
+            if (config.debug) {
+                console.warn("[SpeechOS] Max retries reached, giving up sync");
+            }
+            this.retryCount = 0;
+            return;
+        }
+        this.retryCount++;
+        const delay = BASE_RETRY_DELAY_MS * Math.pow(2, this.retryCount - 1);
+        this.syncTimer = setTimeout(() => {
+            this.syncToServer();
+        }, delay);
+    }
+    /**
+     * Check if an error is a CSP or network restriction error
+     * These errors are permanent and shouldn't trigger retries
+     */
+    isNetworkRestrictionError(error) {
+        if (error instanceof TypeError) {
+            const message = error.message.toLowerCase();
+            // Common CSP/network error messages
+            return (message.includes("failed to fetch") ||
+                message.includes("network request failed") ||
+                message.includes("content security policy") ||
+                message.includes("csp") ||
+                message.includes("blocked"));
+        }
+        return false;
+    }
+    /**
+     * Handle token expiration
+     */
+    handleTokenExpired() {
+        clearSettingsToken();
+        events.emit("settings:tokenExpired", undefined);
+        const config = getConfig();
+        if (config.debug) {
+            console.warn("[SpeechOS] Settings token expired");
+        }
+    }
+    /**
+     * Check if sync is enabled (token is configured)
+     */
+    isEnabled() {
+        return !!getSettingsToken();
+    }
+}
+// Singleton instance
+const settingsSync = new SettingsSync();
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -1184,6 +1721,9 @@ const t$1=t=>(e,o)=>{ void 0!==o?o.addInitializer(()=>{customElements.define(t,e
  */
 const themeStyles = i$4 `
   :host {
+    /* Font stack - system fonts for consistent rendering across sites */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+
     /* Color tokens */
     --speechos-primary: #10B981;
     --speechos-primary-hover: #059669;
@@ -1307,100 +1847,6 @@ i$4 `
   }
 `;
 
-/**
- * Transcript history store
- * Persists transcripts to localStorage for viewing in the settings modal
- */
-const STORAGE_KEY = "speechos_transcripts";
-const MAX_ENTRIES = 50;
-/**
- * Generate a unique ID for transcript entries
- */
-function generateId() {
-    return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-}
-/**
- * Get all transcripts from localStorage
- */
-function getTranscripts() {
-    try {
-        const stored = localStorage.getItem(STORAGE_KEY);
-        if (!stored)
-            return [];
-        const entries = JSON.parse(stored);
-        // Return newest first
-        return entries.sort((a, b) => b.timestamp - a.timestamp);
-    }
-    catch {
-        return [];
-    }
-}
-/**
- * Save a new transcript entry
- */
-function saveTranscript(text, action, originalTextOrOptions) {
-    const entry = {
-        id: generateId(),
-        text,
-        timestamp: Date.now(),
-        action,
-    };
-    // Handle edit action with originalText string
-    if (action === "edit" && typeof originalTextOrOptions === "string") {
-        entry.originalText = originalTextOrOptions;
-    }
-    // Handle command action with options object
-    if (action === "command" && typeof originalTextOrOptions === "object") {
-        const options = originalTextOrOptions;
-        if (options.inputText !== undefined)
-            entry.inputText = options.inputText;
-        if (options.commandResult !== undefined)
-            entry.commandResult = options.commandResult;
-        if (options.commandConfig !== undefined)
-            entry.commandConfig = options.commandConfig;
-    }
-    const entries = getTranscripts();
-    entries.unshift(entry);
-    // Prune to max entries
-    const pruned = entries.slice(0, MAX_ENTRIES);
-    try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(pruned));
-    }
-    catch {
-        // localStorage full or unavailable - silently fail
-    }
-    return entry;
-}
-/**
- * Clear all transcript history
- */
-function clearTranscripts() {
-    try {
-        localStorage.removeItem(STORAGE_KEY);
-    }
-    catch {
-        // Silently fail
-    }
-}
-/**
- * Delete a single transcript by ID
- */
-function deleteTranscript(id) {
-    const entries = getTranscripts().filter((e) => e.id !== id);
-    try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
-    }
-    catch {
-        // Silently fail
-    }
-}
-const transcriptStore = {
-    getTranscripts: getTranscripts,
-    saveTranscript: saveTranscript,
-    clearTranscripts: clearTranscripts,
-    deleteTranscript: deleteTranscript,
-};
-
 function isNativeField(field) {
     return field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement;
 }
@@ -3398,6 +3844,8 @@ const modalLayoutStyles = i$4 `
     inset: 0;
     pointer-events: none;
     z-index: calc(var(--speechos-z-base) + 100);
+    /* Ensure consistent font rendering across all sites */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   }
 
   .modal-overlay {
@@ -3886,6 +4334,7 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
     constructor() {
         super(...arguments);
         this.transcripts = [];
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -4022,11 +4471,36 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
         background: rgba(239, 68, 68, 0.18);
         border-color: rgba(239, 68, 68, 0.25);
       }
+
+      .command-matched {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.5);
+        margin-top: 6px;
+      }
+
+      .command-matched code {
+        background: rgba(245, 158, 11, 0.15);
+        color: #fbbf24;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-family: monospace;
+      }
     `,
     ]; }
     connectedCallback() {
         super.connectedCallback();
         this.loadTranscripts();
+        // Refresh when settings are loaded from the server (history may have changed)
+        this.unsubscribeSettingsLoaded = events.on("settings:loaded", () => {
+            this.loadTranscripts();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.unsubscribeSettingsLoaded) {
+            this.unsubscribeSettingsLoaded();
+            this.unsubscribeSettingsLoaded = null;
+        }
     }
     /** Reload transcripts from store */
     refresh() {
@@ -4097,7 +4571,13 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
     renderCommandDetails(entry) {
         // Show the transcript text (what the user said)
         const displayText = entry.inputText || entry.text;
-        return b `<div class="transcript-text">${displayText}</div>`;
+        const commandName = entry.commandResult?.name;
+        return b `
+      <div class="transcript-text">${displayText}</div>
+      ${commandName
+            ? b `<div class="command-matched">Matched: <code>${commandName}</code></div>`
+            : null}
+    `;
     }
     getCopyText(entry) {
         if (entry.action === "command") {
@@ -4647,6 +5127,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         this.permissionGranted = false;
         this.smartFormatEnabled = true;
         this.savedIndicatorTimeout = null;
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -4740,6 +5221,16 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         padding: 8px;
       }
 
+      .settings-select:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .settings-select:disabled:hover {
+        border-color: rgba(255, 255, 255, 0.08);
+        background: rgba(0, 0, 0, 0.3);
+      }
+
       .settings-select-arrow {
         position: absolute;
         right: 14px;
@@ -4821,12 +5312,20 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
     connectedCallback() {
         super.connectedCallback();
         this.loadSettings();
+        // Refresh when settings are loaded from the server
+        this.unsubscribeSettingsLoaded = events.on("settings:loaded", () => {
+            this.loadSettings();
+        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this.savedIndicatorTimeout) {
             clearTimeout(this.savedIndicatorTimeout);
         }
+        if (this.unsubscribeSettingsLoaded) {
+            this.unsubscribeSettingsLoaded();
+            this.unsubscribeSettingsLoaded = null;
+        }
         this.isTestingMic = false;
     }
     /** Called when tab becomes active */
@@ -4913,13 +5412,14 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         setSmartFormatEnabled(this.smartFormatEnabled);
         this.showSaved();
     }
-    renderLanguageSelector(selectedCode, onChange) {
+    renderLanguageSelector(selectedCode, onChange, disabled = false) {
         return b `
       <div class="settings-select-wrapper">
         <select
           class="settings-select"
           .value="${selectedCode}"
           @change="${onChange}"
+          ?disabled="${disabled}"
         >
           ${SUPPORTED_LANGUAGES.map((lang) => b `
               <option
@@ -5037,7 +5537,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         <div class="settings-section-description">
           AI automatically removes filler words, adds punctuation, and polishes
           your text. Disable for raw transcription output. Note: disabling also
-          turns off text snippets.
+          turns off text snippets and output language translation.
         </div>
         <div class="settings-toggle-row">
           <span class="settings-toggle-label">Enable AI formatting</span>
@@ -5078,9 +5578,13 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         </div>
         <div class="settings-section-description">
           The language for your transcribed text. Usually the same as input, but
-          can differ for translation.
+          can differ for translation.${!this.smartFormatEnabled
+            ? " Requires Smart Format to be enabled."
+            : ""}
         </div>
-        ${this.renderLanguageSelector(this.selectedOutputLanguageCode, this.handleOutputLanguageChange.bind(this))}
+        ${this.renderLanguageSelector(this.smartFormatEnabled
+            ? this.selectedOutputLanguageCode
+            : this.selectedInputLanguageCode, this.handleOutputLanguageChange.bind(this), !this.smartFormatEnabled)}
       </div>
     `;
     }
@@ -5125,6 +5629,7 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
         this.trigger = "";
         this.expansion = "";
         this.error = "";
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -5230,6 +5735,17 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
     connectedCallback() {
         super.connectedCallback();
         this.loadSnippets();
+        // Refresh when settings are loaded from the server
+        this.unsubscribeSettingsLoaded = events.on("settings:loaded", () => {
+            this.loadSnippets();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.unsubscribeSettingsLoaded) {
+            this.unsubscribeSettingsLoaded();
+            this.unsubscribeSettingsLoaded = null;
+        }
     }
     /** Reload snippets from store */
     refresh() {
@@ -5472,6 +5988,7 @@ let SpeechOSVocabularyTab = class SpeechOSVocabularyTab extends i$1 {
         this.showForm = false;
         this.term = "";
         this.error = "";
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -5524,6 +6041,17 @@ let SpeechOSVocabularyTab = class SpeechOSVocabularyTab extends i$1 {
     connectedCallback() {
         super.connectedCallback();
         this.loadVocabulary();
+        // Refresh when settings are loaded from the server
+        this.unsubscribeSettingsLoaded = events.on("settings:loaded", () => {
+            this.loadVocabulary();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.unsubscribeSettingsLoaded) {
+            this.unsubscribeSettingsLoaded();
+            this.unsubscribeSettingsLoaded = null;
+        }
     }
     /** Reload vocabulary from store */
     refresh() {
@@ -7048,7 +7576,14 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         state.hide();
     }
     handleSettingsClick() {
-        this.settingsOpen = true;
+        if (useExternalSettings()) {
+            const host = getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
     }
     handleDragStart(e) {
         if (e.button !== 0)
@@ -7589,10 +8124,17 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.editSelectionStart = null;
         this.editSelectionEnd = null;
         this.editSelectedText = "";
-        // Open settings modal
-        this.settingsOpen = true;
+        // Open settings - either external URL or modal
+        if (useExternalSettings()) {
+            const host = getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
         if (getConfig().debug) {
-            console.log("[SpeechOS] Settings modal opened from no-audio warning");
+            console.log("[SpeechOS] Settings opened from no-audio warning", { useExternalSettings: useExternalSettings() });
         }
         await disconnectPromise;
     }
@@ -7801,6 +8343,30 @@ SpeechOSWidget = SpeechOSWidget_1 = __decorate([
     t$1("speechos-widget")
 ], SpeechOSWidget);
 
+/**
+ * UI module exports
+ * Lit-based Shadow DOM components
+ */
+// Patch customElements.define to silently ignore duplicate registrations for speechos-* elements.
+// This prevents errors when the extension loads on a page that already has SpeechOS.
+// The patch is scoped to only affect speechos-* tags to avoid unintended effects on host pages.
+const originalDefine = customElements.define.bind(customElements);
+customElements.define = (name, constructor, options) => {
+    // Only intercept speechos-* elements
+    if (name.startsWith("speechos-")) {
+        if (customElements.get(name) === undefined) {
+            originalDefine(name, constructor, options);
+        }
+        // Skip silently if already registered
+    }
+    else {
+        // Pass through for non-speechos elements
+        originalDefine(name, constructor, options);
+    }
+};
+// Restore original customElements.define after our components are registered
+customElements.define = originalDefine;
+
 /**
  * Main SpeechOS Client SDK class
  * Composes core logic with UI components
@@ -7882,6 +8448,13 @@ class SpeechOS {
             state.show();
         }
         this.isInitialized = true;
+        // Initialize settings sync if token is configured
+        // This loads settings from server and subscribes to changes
+        settingsSync.init().catch((error) => {
+            if (finalConfig.debug) {
+                console.warn("[SpeechOS] Settings sync initialization failed:", error);
+            }
+        });
         // Log initialization in debug mode
         if (finalConfig.debug) {
             console.log("[SpeechOS] Initialized with config:", finalConfig);
@@ -7912,6 +8485,8 @@ class SpeechOS {
         resetClientConfig();
         // Reset text input handler to default
         resetTextInputHandler();
+        // Stop settings sync
+        settingsSync.destroy();
         // Clear instance
         this.instance = null;
         this.isInitialized = false;
@@ -8073,5 +8648,5 @@ class SpeechOS {
 // Version
 const VERSION = "0.1.0";
 
-export { DefaultTextInputHandler, FormDetector, SUPPORTED_LANGUAGES, SpeechOS, VERSION, addSnippet, addTerm, audioSettings, clearSnippets, clearTranscripts, clearVocabulary, SpeechOS as default, defaultTextInputHandler, deleteSnippet, deleteTerm, deleteTranscript, formDetector, getAudioDeviceId, getAudioInputDevices, getAudioSettings, getClientConfig, getCommands, getInputLanguageCode, getInputLanguageName, getLanguageByCode, getLanguageCode, getLanguageName, getLanguageSettings, getOutputLanguageCode, getOutputLanguageName, getSessionSettings, getSmartFormatEnabled, getSnippetCount, getSnippets, getTextInputHandler, getTranscripts, getVocabulary, getVocabularyCount, getZIndex, hasCommands, isAtSnippetLimit, isAtVocabularyLimit, isSelectedDeviceAvailable, languageSettings, resetAudioSettings, resetClientConfig, resetLanguageSettings, resetTextInputHandler, saveTranscript, setAudioDeviceId, setClientConfig, setInputLanguageCode, setLanguageCode, setOutputLanguageCode, setSmartFormatEnabled, setTextInputHandler, snippetsStore, transcriptStore, updateSnippet, vocabularyStore };
+export { DefaultTextInputHandler, FormDetector, SUPPORTED_LANGUAGES, SpeechOS, VERSION, addSnippet, addTerm, audioSettings, clearSnippets, clearTranscripts, clearVocabulary, SpeechOS as default, defaultTextInputHandler, deleteSnippet, deleteTerm, deleteTranscript, formDetector, getAudioDeviceId, getAudioInputDevices, getAudioSettings, getClientConfig, getCommands, getInputLanguageCode, getInputLanguageName, getLanguageByCode, getLanguageCode, getLanguageName, getLanguageSettings, getOutputLanguageCode, getOutputLanguageName, getSessionSettings, getSmartFormatEnabled, getSnippetCount, getSnippets, getTextInputHandler, getTranscripts, getVocabulary, getVocabularyCount, getZIndex, hasCommands, isAtSnippetLimit, isAtVocabularyLimit, isSelectedDeviceAvailable, languageSettings, resetAudioSettings, resetClientConfig, resetLanguageSettings, resetTextInputHandler, saveTranscript, setAudioDeviceId, setClientConfig, setInputLanguageCode, setLanguageCode, setOutputLanguageCode, setSmartFormatEnabled, setTextInputHandler, settingsSync, snippetsStore, transcriptStore, updateSnippet, useExternalSettings, vocabularyStore };
 //# sourceMappingURL=index.js.map