@speechos/client 0.2.8 → 0.2.10

package/dist/index.iife.js

@@ -26911,7 +26911,8 @@
   	userId: "",
   	host: DEFAULT_HOST,
   	debug: false,
-  	webSocketFactory: void 0
+  	webSocketFactory: void 0,
+  	settingsToken: void 0
   };
   /**
   * Validates and merges user config with defaults
@@ -26919,13 +26920,14 @@
   * @returns Validated and merged configuration
   */
   function validateConfig(userConfig) {
-  	if (!userConfig.apiKey) throw new Error("SpeechOS requires an apiKey. Get one from your team dashboard at /a/<team-slug>/.");
+  	if (!userConfig.apiKey) throw new Error("SpeechOS requires an apiKey. Get one from your team dashboard at /a/.");
   	return {
   		apiKey: userConfig.apiKey,
   		userId: userConfig.userId ?? defaultConfig.userId,
   		host: userConfig.host ?? defaultConfig.host,
   		debug: userConfig.debug ?? defaultConfig.debug,
-  		webSocketFactory: userConfig.webSocketFactory ?? defaultConfig.webSocketFactory
+  		webSocketFactory: userConfig.webSocketFactory ?? defaultConfig.webSocketFactory,
+  		settingsToken: userConfig.settingsToken ?? defaultConfig.settingsToken
   	};
   }
   /**
@@ -26962,6 +26964,22 @@
   	};
   }
   /**
+  * Get the settings token from the current configuration
+  * @returns The settings token or undefined if not configured
+  */
+  function getSettingsToken() {
+  	return currentConfig.settingsToken;
+  }
+  /**
+  * Clear the settings token (e.g., when it expires)
+  */
+  function clearSettingsToken() {
+  	currentConfig = {
+  		...currentConfig,
+  		settingsToken: void 0
+  	};
+  }
+  /**
   * LocalStorage key for anonymous ID persistence
   */
   const ANONYMOUS_ID_KEY = "speechos_anonymous_id";
@@ -28778,6 +28796,7 @@
       commands: [],
       zIndex: 999999,
       alwaysVisible: false,
+      useExternalSettings: false,
   };
   /**
    * Current client configuration singleton
@@ -28793,6 +28812,7 @@
           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) {
@@ -28844,6 +28864,12 @@
   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
@@ -29247,15 +29273,23 @@
    * 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"] },
@@ -29276,18 +29310,26 @@
       { 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"] },
@@ -29298,9 +29340,13 @@
       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)
@@ -29312,14 +29358,27 @@
       }
   }
   /**
-   * 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
       }
   }
   /**
@@ -29423,6 +29482,7 @@
    * Reset language settings to defaults
    */
   function resetLanguageSettings() {
+      memoryCache$3 = null;
       try {
           localStorage.removeItem(STORAGE_KEY$4);
       }
@@ -29432,6 +29492,7 @@
   }
   const languageSettings = {
       getLanguageSettings,
+      setLanguageSettings,
       getInputLanguageCode,
       setInputLanguageCode,
       getOutputLanguageCode,
@@ -29442,6 +29503,7 @@
       getSmartFormatEnabled,
       setSmartFormatEnabled,
       resetLanguageSettings,
+      resetMemoryCache: resetMemoryCache$2,
       SUPPORTED_LANGUAGES,
       // Legacy aliases
       getLanguageCode,
@@ -29457,6 +29519,11 @@
   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
    */
@@ -29464,15 +29531,18 @@
       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 {
@@ -29480,14 +29550,27 @@
       }
   }
   /**
-   * 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
       }
   }
   /**
@@ -29605,13 +29688,14 @@
    * 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
@@ -29627,12 +29711,14 @@
   }
   const snippetsStore = {
       getSnippets,
+      setSnippets,
       addSnippet,
       updateSnippet,
       deleteSnippet,
       clearSnippets,
       getSnippetCount,
       isAtSnippetLimit,
+      resetMemoryCache: resetMemoryCache$1,
       MAX_SNIPPETS,
       MAX_TRIGGER_LENGTH,
       MAX_EXPANSION_LENGTH,
@@ -29645,6 +29731,11 @@
   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
    */
@@ -29652,15 +29743,18 @@
       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 {
@@ -29668,14 +29762,27 @@
       }
   }
   /**
-   * 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
       }
   }
   /**
@@ -29743,13 +29850,14 @@
    * 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
@@ -29765,11 +29873,13 @@
   }
   const vocabularyStore = {
       getVocabulary,
+      setVocabulary,
       addTerm,
       deleteTerm,
       clearVocabulary,
       getVocabularyCount,
       isAtVocabularyLimit,
+      resetMemoryCache,
       MAX_TERMS,
       MAX_TERM_LENGTH,
   };
@@ -29867,6 +29977,451 @@
       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.
 
@@ -29950,6 +30505,9 @@
    */
   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;
@@ -30073,100 +30631,6 @@
   }
 `;
 
-  /**
-   * 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;
   }
@@ -32164,6 +32628,8 @@
     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 {
@@ -32652,6 +33118,7 @@
       constructor() {
           super(...arguments);
           this.transcripts = [];
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -32788,11 +33255,36 @@
         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() {
@@ -32863,7 +33355,13 @@
       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") {
@@ -33413,6 +33911,7 @@
           this.permissionGranted = false;
           this.smartFormatEnabled = true;
           this.savedIndicatorTimeout = null;
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -33506,6 +34005,16 @@
         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;
@@ -33587,12 +34096,20 @@
       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 */
@@ -33679,13 +34196,14 @@
           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
@@ -33803,7 +34321,7 @@
         <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>
@@ -33844,9 +34362,13 @@
         </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>
     `;
       }
@@ -33891,6 +34413,7 @@
           this.trigger = "";
           this.expansion = "";
           this.error = "";
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -33996,6 +34519,17 @@
       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() {
@@ -34238,6 +34772,7 @@
           this.showForm = false;
           this.term = "";
           this.error = "";
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -34290,6 +34825,17 @@
       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() {
@@ -35808,7 +36354,14 @@
           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)
@@ -36349,10 +36902,17 @@
           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;
       }
@@ -36561,6 +37121,30 @@
       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
@@ -36642,6 +37226,13 @@
               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);
@@ -36672,6 +37263,8 @@
           resetClientConfig();
           // Reset text input handler to default
           resetTextInputHandler();
+          // Stop settings sync
+          settingsSync.destroy();
           // Clear instance
           this.instance = null;
           this.isInitialized = false;
@@ -36895,10 +37488,12 @@
   exports.setOutputLanguageCode = setOutputLanguageCode;
   exports.setSmartFormatEnabled = setSmartFormatEnabled;
   exports.setTextInputHandler = setTextInputHandler;
+  exports.settingsSync = settingsSync;
   exports.snippetsStore = snippetsStore;
   exports.state = state;
   exports.transcriptStore = transcriptStore;
   exports.updateSnippet = updateSnippet;
+  exports.useExternalSettings = useExternalSettings;
   exports.vocabularyStore = vocabularyStore;
 
   Object.defineProperty(exports, '__esModule', { value: true });