@speechos/client 0.2.8 → 0.2.10

package/dist/index.cjs

@@ -15,6 +15,7 @@ const defaultClientConfig = {
     commands: [],
     zIndex: 999999,
     alwaysVisible: false,
+    useExternalSettings: false,
 };
 /**
  * Current client configuration singleton
@@ -30,6 +31,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) {
@@ -81,6 +83,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
@@ -484,15 +492,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"] },
@@ -513,18 +529,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"] },
@@ -535,9 +559,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)
@@ -549,14 +577,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
     }
 }
 /**
@@ -660,6 +701,7 @@ function getLanguageName() {
  * Reset language settings to defaults
  */
 function resetLanguageSettings() {
+    memoryCache$3 = null;
     try {
         localStorage.removeItem(STORAGE_KEY$4);
     }
@@ -669,6 +711,7 @@ function resetLanguageSettings() {
 }
 const languageSettings = {
     getLanguageSettings,
+    setLanguageSettings,
     getInputLanguageCode,
     setInputLanguageCode,
     getOutputLanguageCode,
@@ -679,6 +722,7 @@ const languageSettings = {
     getSmartFormatEnabled,
     setSmartFormatEnabled,
     resetLanguageSettings,
+    resetMemoryCache: resetMemoryCache$2,
     SUPPORTED_LANGUAGES,
     // Legacy aliases
     getLanguageCode,
@@ -694,6 +738,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
  */
@@ -701,15 +750,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 {
@@ -717,14 +769,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
     }
 }
 /**
@@ -842,13 +907,14 @@ function deleteSnippet(id) {
  * Clear all snippets
  */
 function clearSnippets() {
+    memoryCache$2 = [];
     try {
         localStorage.removeItem(STORAGE_KEY$3);
-        core.events.emit("settings:changed", { setting: "snippets" });
     }
     catch {
         // Silently fail
     }
+    core.events.emit("settings:changed", { setting: "snippets" });
 }
 /**
  * Get snippet count info
@@ -864,12 +930,14 @@ function isAtSnippetLimit() {
 }
 const snippetsStore = {
     getSnippets,
+    setSnippets,
     addSnippet,
     updateSnippet,
     deleteSnippet,
     clearSnippets,
     getSnippetCount,
     isAtSnippetLimit,
+    resetMemoryCache: resetMemoryCache$1,
     MAX_SNIPPETS,
     MAX_TRIGGER_LENGTH,
     MAX_EXPANSION_LENGTH,
@@ -882,6 +950,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
  */
@@ -889,15 +962,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 {
@@ -905,14 +981,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
     }
 }
 /**
@@ -980,13 +1069,14 @@ function deleteTerm(id) {
  * Clear all vocabulary
  */
 function clearVocabulary() {
+    memoryCache$1 = [];
     try {
         localStorage.removeItem(STORAGE_KEY$2);
-        core.events.emit("settings:changed", { setting: "vocabulary" });
     }
     catch {
         // Silently fail
     }
+    core.events.emit("settings:changed", { setting: "vocabulary" });
 }
 /**
  * Get vocabulary count info
@@ -1002,11 +1092,13 @@ function isAtVocabularyLimit() {
 }
 const vocabularyStore = {
     getVocabulary,
+    setVocabulary,
     addTerm,
     deleteTerm,
     clearVocabulary,
     getVocabularyCount,
     isAtVocabularyLimit,
+    resetMemoryCache,
     MAX_TERMS,
     MAX_TERM_LENGTH,
 };
@@ -1104,6 +1196,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
+    core.events.emit("settings:changed", { setting: "history" });
+    return entry;
+}
+/**
+ * Clear all transcript history
+ */
+function clearTranscripts() {
+    memoryCache = [];
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+    }
+    catch {
+        // Silently fail
+    }
+    core.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
+    }
+    core.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 = core.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 = core.getSettingsToken();
+        if (!token) {
+            // No token configured, sync is disabled
+            return;
+        }
+        if (this.isInitialized) {
+            return;
+        }
+        this.isInitialized = true;
+        // Subscribe to settings changes
+        this.unsubscribe = core.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 = core.getSettingsToken();
+        if (!token) {
+            return;
+        }
+        const config = core.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);
+            core.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);
+            }
+            core.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 = core.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 = core.getSettingsToken();
+        if (!token || this.isSyncing || this.syncDisabled) {
+            return;
+        }
+        this.isSyncing = true;
+        const config = core.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;
+            core.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");
+                }
+                core.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);
+                }
+                core.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 = core.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() {
+        core.clearSettingsToken();
+        core.events.emit("settings:tokenExpired", undefined);
+        const config = core.getConfig();
+        if (config.debug) {
+            console.warn("[SpeechOS] Settings token expired");
+        }
+    }
+    /**
+     * Check if sync is enabled (token is configured)
+     */
+    isEnabled() {
+        return !!core.getSettingsToken();
+    }
+}
+// Singleton instance
+const settingsSync = new SettingsSync();
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -1187,6 +1724,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;
@@ -1310,100 +1850,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;
 }
@@ -3401,6 +3847,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 {
@@ -3889,6 +4337,7 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
     constructor() {
         super(...arguments);
         this.transcripts = [];
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -4025,11 +4474,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 = core.events.on("settings:loaded", () => {
+            this.loadTranscripts();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.unsubscribeSettingsLoaded) {
+            this.unsubscribeSettingsLoaded();
+            this.unsubscribeSettingsLoaded = null;
+        }
     }
     /** Reload transcripts from store */
     refresh() {
@@ -4100,7 +4574,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") {
@@ -4650,6 +5130,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         this.permissionGranted = false;
         this.smartFormatEnabled = true;
         this.savedIndicatorTimeout = null;
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -4743,6 +5224,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;
@@ -4824,12 +5315,20 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
     connectedCallback() {
         super.connectedCallback();
         this.loadSettings();
+        // Refresh when settings are loaded from the server
+        this.unsubscribeSettingsLoaded = core.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 */
@@ -4916,13 +5415,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
@@ -5040,7 +5540,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>
@@ -5081,9 +5581,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>
     `;
     }
@@ -5128,6 +5632,7 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
         this.trigger = "";
         this.expansion = "";
         this.error = "";
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -5233,6 +5738,17 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
     connectedCallback() {
         super.connectedCallback();
         this.loadSnippets();
+        // Refresh when settings are loaded from the server
+        this.unsubscribeSettingsLoaded = core.events.on("settings:loaded", () => {
+            this.loadSnippets();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.unsubscribeSettingsLoaded) {
+            this.unsubscribeSettingsLoaded();
+            this.unsubscribeSettingsLoaded = null;
+        }
     }
     /** Reload snippets from store */
     refresh() {
@@ -5475,6 +5991,7 @@ let SpeechOSVocabularyTab = class SpeechOSVocabularyTab extends i$1 {
         this.showForm = false;
         this.term = "";
         this.error = "";
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -5527,6 +6044,17 @@ let SpeechOSVocabularyTab = class SpeechOSVocabularyTab extends i$1 {
     connectedCallback() {
         super.connectedCallback();
         this.loadVocabulary();
+        // Refresh when settings are loaded from the server
+        this.unsubscribeSettingsLoaded = core.events.on("settings:loaded", () => {
+            this.loadVocabulary();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.unsubscribeSettingsLoaded) {
+            this.unsubscribeSettingsLoaded();
+            this.unsubscribeSettingsLoaded = null;
+        }
     }
     /** Reload vocabulary from store */
     refresh() {
@@ -7051,7 +7579,14 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         core.state.hide();
     }
     handleSettingsClick() {
-        this.settingsOpen = true;
+        if (useExternalSettings()) {
+            const host = core.getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
     }
     handleDragStart(e) {
         if (e.button !== 0)
@@ -7592,10 +8127,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 = core.getConfig().host;
+            const fullUrl = `${host}/a/extension-settings`;
+            window.open(fullUrl, '_blank', 'noopener,noreferrer');
+        }
+        else {
+            this.settingsOpen = true;
+        }
         if (core.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;
     }
@@ -7804,6 +8346,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
@@ -7885,6 +8451,13 @@ class SpeechOS {
             core.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);
@@ -7915,6 +8488,8 @@ class SpeechOS {
         resetClientConfig();
         // Reset text input handler to default
         resetTextInputHandler();
+        // Stop settings sync
+        settingsSync.destroy();
         // Clear instance
         this.instance = null;
         this.isInitialized = false;
@@ -8160,8 +8735,10 @@ exports.setLanguageCode = setLanguageCode;
 exports.setOutputLanguageCode = setOutputLanguageCode;
 exports.setSmartFormatEnabled = setSmartFormatEnabled;
 exports.setTextInputHandler = setTextInputHandler;
+exports.settingsSync = settingsSync;
 exports.snippetsStore = snippetsStore;
 exports.transcriptStore = transcriptStore;
 exports.updateSnippet = updateSnippet;
+exports.useExternalSettings = useExternalSettings;
 exports.vocabularyStore = vocabularyStore;
 //# sourceMappingURL=index.cjs.map