@speechos/client 0.2.7 → 0.2.9

package/dist/index.iife.js

@@ -26911,7 +26911,9 @@
   	userId: "",
   	host: DEFAULT_HOST,
   	debug: false,
-  	webSocketFactory: void 0
+  	webSocketFactory: void 0,
+  	fetchHandler: void 0,
+  	settingsToken: void 0
   };
   /**
   * Validates and merges user config with defaults
@@ -26925,7 +26927,9 @@
   		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,
+  		fetchHandler: userConfig.fetchHandler ?? defaultConfig.fetchHandler,
+  		settingsToken: userConfig.settingsToken ?? defaultConfig.settingsToken
   	};
   }
   /**
@@ -26962,6 +26966,29 @@
   	};
   }
   /**
+  * 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
+  	};
+  }
+  /**
+  * Get the fetch handler from the current configuration
+  * @returns The fetch handler or undefined if not configured
+  */
+  function getFetchHandler() {
+  	return currentConfig.fetchHandler;
+  }
+  /**
   * LocalStorage key for anonymous ID persistence
   */
   const ANONYMOUS_ID_KEY = "speechos_anonymous_id";
@@ -27214,14 +27241,16 @@
   		});
   	}
   	/**
-  	* Complete the recording flow and return to idle
+  	* Complete the recording flow and return to idle.
+  	* Keeps widget visible but collapsed (just mic button, no action bubbles).
   	*/
   	completeRecording() {
   		this.setState({
   			recordingState: "idle",
   			activeAction: null,
   			isConnected: false,
-  			isMicEnabled: false
+  			isMicEnabled: false,
+  			isExpanded: false
   		});
   	}
   	/**
@@ -29245,6 +29274,11 @@
    * 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
@@ -29296,9 +29330,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)
@@ -29310,14 +29348,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
       }
   }
   /**
@@ -29421,6 +29472,7 @@
    * Reset language settings to defaults
    */
   function resetLanguageSettings() {
+      memoryCache$3 = null;
       try {
           localStorage.removeItem(STORAGE_KEY$4);
       }
@@ -29430,6 +29482,7 @@
   }
   const languageSettings = {
       getLanguageSettings,
+      setLanguageSettings,
       getInputLanguageCode,
       setInputLanguageCode,
       getOutputLanguageCode,
@@ -29440,6 +29493,7 @@
       getSmartFormatEnabled,
       setSmartFormatEnabled,
       resetLanguageSettings,
+      resetMemoryCache: resetMemoryCache$2,
       SUPPORTED_LANGUAGES,
       // Legacy aliases
       getLanguageCode,
@@ -29455,6 +29509,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
    */
@@ -29462,15 +29521,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 {
@@ -29478,14 +29540,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
       }
   }
   /**
@@ -29603,13 +29678,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
@@ -29625,12 +29701,14 @@
   }
   const snippetsStore = {
       getSnippets,
+      setSnippets,
       addSnippet,
       updateSnippet,
       deleteSnippet,
       clearSnippets,
       getSnippetCount,
       isAtSnippetLimit,
+      resetMemoryCache: resetMemoryCache$1,
       MAX_SNIPPETS,
       MAX_TRIGGER_LENGTH,
       MAX_EXPANSION_LENGTH,
@@ -29643,6 +29721,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
    */
@@ -29650,15 +29733,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 {
@@ -29666,14 +29752,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
       }
   }
   /**
@@ -29741,13 +29840,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
@@ -29763,11 +29863,13 @@
   }
   const vocabularyStore = {
       getVocabulary,
+      setVocabulary,
       addTerm,
       deleteTerm,
       clearVocabulary,
       getVocabularyCount,
       isAtVocabularyLimit,
+      resetMemoryCache,
       MAX_TERMS,
       MAX_TERM_LENGTH,
   };
@@ -29865,6 +29967,462 @@
       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 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 = getConfig();
+          const customHandler = 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 = 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.
 
@@ -29948,6 +30506,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;
@@ -30071,100 +30632,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;
   }
@@ -32162,6 +32629,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 {
@@ -32650,6 +33119,7 @@
       constructor() {
           super(...arguments);
           this.transcripts = [];
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -32786,11 +33256,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() {
@@ -32861,7 +33356,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") {
@@ -33411,6 +33912,7 @@
           this.permissionGranted = false;
           this.smartFormatEnabled = true;
           this.savedIndicatorTimeout = null;
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -33585,12 +34087,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 */
@@ -33889,6 +34399,7 @@
           this.trigger = "";
           this.expansion = "";
           this.error = "";
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -33994,6 +34505,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() {
@@ -34236,6 +34758,7 @@
           this.showForm = false;
           this.term = "";
           this.error = "";
+          this.unsubscribeSettingsLoaded = null;
       }
       static { this.styles = [
           themeStyles,
@@ -34288,6 +34811,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() {
@@ -35895,6 +36429,8 @@
           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;
@@ -36231,8 +36767,6 @@
               // Note: command:complete event is already emitted by the backend
               // when the command_result message is received, so we don't emit here
               state.completeRecording();
-              // Keep widget visible but collapsed (just mic button, no action bubbles)
-              state.setState({ isExpanded: false });
               // Show command feedback
               this.showActionFeedback(result ? "command-success" : "command-none");
               backend.disconnect().catch(() => { });
@@ -36390,6 +36924,8 @@
           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;
@@ -36557,6 +37093,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
@@ -36638,6 +37198,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);
@@ -36668,6 +37235,8 @@
           resetClientConfig();
           // Reset text input handler to default
           resetTextInputHandler();
+          // Stop settings sync
+          settingsSync.destroy();
           // Clear instance
           this.instance = null;
           this.isInitialized = false;
@@ -36891,6 +37460,7 @@
   exports.setOutputLanguageCode = setOutputLanguageCode;
   exports.setSmartFormatEnabled = setSmartFormatEnabled;
   exports.setTextInputHandler = setTextInputHandler;
+  exports.settingsSync = settingsSync;
   exports.snippetsStore = snippetsStore;
   exports.state = state;
   exports.transcriptStore = transcriptStore;