@speechos/client 0.2.7 → 0.2.9

package/dist/index.cjs

@@ -484,6 +484,11 @@ 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
@@ -535,9 +540,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 +558,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 +682,7 @@ function getLanguageName() {
  * Reset language settings to defaults
  */
 function resetLanguageSettings() {
+    memoryCache$3 = null;
     try {
         localStorage.removeItem(STORAGE_KEY$4);
     }
@@ -669,6 +692,7 @@ function resetLanguageSettings() {
 }
 const languageSettings = {
     getLanguageSettings,
+    setLanguageSettings,
     getInputLanguageCode,
     setInputLanguageCode,
     getOutputLanguageCode,
@@ -679,6 +703,7 @@ const languageSettings = {
     getSmartFormatEnabled,
     setSmartFormatEnabled,
     resetLanguageSettings,
+    resetMemoryCache: resetMemoryCache$2,
     SUPPORTED_LANGUAGES,
     // Legacy aliases
     getLanguageCode,
@@ -694,6 +719,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 +731,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 +750,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 +888,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 +911,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 +931,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 +943,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 +962,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 +1050,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 +1073,13 @@ function isAtVocabularyLimit() {
 }
 const vocabularyStore = {
     getVocabulary,
+    setVocabulary,
     addTerm,
     deleteTerm,
     clearVocabulary,
     getVocabularyCount,
     isAtVocabularyLimit,
+    resetMemoryCache,
     MAX_TERMS,
     MAX_TERM_LENGTH,
 };
@@ -1104,6 +1177,462 @@ 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 custom fetchHandler if configured, otherwise native fetch.
+     * This allows the Chrome extension to route fetch traffic through the service worker
+     * to bypass page CSP restrictions.
+     */
+    async doFetch(url, options) {
+        const config = core.getConfig();
+        const customHandler = core.getFetchHandler();
+        if (customHandler) {
+            if (config.debug) {
+                console.log("[SpeechOS] Using custom fetch handler (extension proxy)", options.method, url);
+            }
+            return customHandler(url, options);
+        }
+        if (config.debug) {
+            console.log("[SpeechOS] Using native fetch", options.method, url);
+        }
+        // Use native fetch and wrap response to match FetchResponse interface
+        const response = await fetch(url, options);
+        return response;
+    }
+    /**
+     * 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 +1716,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 +1842,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 +3839,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 +4329,7 @@ let SpeechOSHistoryTab = class SpeechOSHistoryTab extends i$1 {
     constructor() {
         super(...arguments);
         this.transcripts = [];
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -4025,11 +4466,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 +4566,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 +5122,7 @@ let SpeechOSSettingsTab = class SpeechOSSettingsTab extends i$1 {
         this.permissionGranted = false;
         this.smartFormatEnabled = true;
         this.savedIndicatorTimeout = null;
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -4824,12 +5297,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 */
@@ -5128,6 +5609,7 @@ let SpeechOSSnippetsTab = class SpeechOSSnippetsTab extends i$1 {
         this.trigger = "";
         this.expansion = "";
         this.error = "";
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -5233,6 +5715,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 +5968,7 @@ let SpeechOSVocabularyTab = class SpeechOSVocabularyTab extends i$1 {
         this.showForm = false;
         this.term = "";
         this.error = "";
+        this.unsubscribeSettingsLoaded = null;
     }
     static { this.styles = [
         themeStyles,
@@ -5527,6 +6021,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() {
@@ -7140,6 +7645,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         const originalContent = this.getElementContent(target) || "";
         if (tagName === "input" || tagName === "textarea") {
             const inputEl = target;
+            // Ensure DOM focus is on the input before inserting
+            inputEl.focus();
             // Restore cursor position before inserting
             const start = this.dictationCursorStart ?? inputEl.value.length;
             const end = this.dictationCursorEnd ?? inputEl.value.length;
@@ -7476,8 +7983,6 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             // Note: command:complete event is already emitted by the backend
             // when the command_result message is received, so we don't emit here
             core.state.completeRecording();
-            // Keep widget visible but collapsed (just mic button, no action bubbles)
-            core.state.setState({ isExpanded: false });
             // Show command feedback
             this.showActionFeedback(result ? "command-success" : "command-none");
             backend.disconnect().catch(() => { });
@@ -7635,6 +8140,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         if (tagName === "input" || tagName === "textarea") {
             const inputEl = target;
             originalContent = inputEl.value;
+            // Ensure DOM focus is on the input before editing
+            inputEl.focus();
             // Restore the original selection/cursor position
             const selectionStart = this.editSelectionStart ?? 0;
             const selectionEnd = this.editSelectionEnd ?? inputEl.value.length;
@@ -7802,6 +8309,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
@@ -7883,6 +8414,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);
@@ -7913,6 +8451,8 @@ class SpeechOS {
         resetClientConfig();
         // Reset text input handler to default
         resetTextInputHandler();
+        // Stop settings sync
+        settingsSync.destroy();
         // Clear instance
         this.instance = null;
         this.isInitialized = false;
@@ -8158,6 +8698,7 @@ exports.setLanguageCode = setLanguageCode;
 exports.setOutputLanguageCode = setOutputLanguageCode;
 exports.setSmartFormatEnabled = setSmartFormatEnabled;
 exports.setTextInputHandler = setTextInputHandler;
+exports.settingsSync = settingsSync;
 exports.snippetsStore = snippetsStore;
 exports.transcriptStore = transcriptStore;
 exports.updateSnippet = updateSnippet;