@speechos/client 0.2.6 → 0.2.7

package/dist/index.iife.js

@@ -26910,7 +26910,8 @@
   	apiKey: "",
   	userId: "",
   	host: DEFAULT_HOST,
-  	debug: false
+  	debug: false,
+  	webSocketFactory: void 0
   };
   /**
   * Validates and merges user config with defaults
@@ -26923,7 +26924,8 @@
   		apiKey: userConfig.apiKey,
   		userId: userConfig.userId ?? defaultConfig.userId,
   		host: userConfig.host ?? defaultConfig.host,
-  		debug: userConfig.debug ?? defaultConfig.debug
+  		debug: userConfig.debug ?? defaultConfig.debug,
+  		webSocketFactory: userConfig.webSocketFactory ?? defaultConfig.webSocketFactory
   	};
   }
   /**
@@ -28284,6 +28286,8 @@
   const MESSAGE_TYPE_EXECUTE_COMMAND = "execute_command";
   const MESSAGE_TYPE_COMMAND_RESULT = "command_result";
   const MESSAGE_TYPE_ERROR = "error";
+  const WS_OPEN = 1;
+  const WS_CLOSED = 3;
   /**
   * Response timeout in milliseconds.
   */
@@ -28402,7 +28406,10 @@
   		state.setMicEnabled(true);
   		const wsUrl = this.getWebSocketUrl();
   		if (config.debug) console.log("[SpeechOS] Connecting to WebSocket:", wsUrl);
-  		this.ws = new WebSocket(wsUrl);
+  		this.pendingAuth = new Deferred$1();
+  		this.pendingAuth.setTimeout(RESPONSE_TIMEOUT_MS, "Connection timed out", "connection_timeout", "connection");
+  		const factory = config.webSocketFactory ?? ((url) => new WebSocket(url));
+  		this.ws = factory(wsUrl);
   		this.ws.onopen = () => {
   			if (config.debug) console.log("[SpeechOS] WebSocket connected, authenticating...");
   			this.authenticate();
@@ -28411,19 +28418,21 @@
   			this.handleMessage(event.data);
   		};
   		this.ws.onerror = (event) => {
-  			console.error("[SpeechOS] WebSocket error:", event);
+  			const isConnectionBlocked = this.ws?.readyState === WS_CLOSED;
+  			const errorCode = isConnectionBlocked ? "connection_blocked" : "websocket_error";
+  			const errorMessage = isConnectionBlocked ? "This site's CSP blocks the extension. Try embedded mode instead." : "WebSocket connection error";
+  			console.error("[SpeechOS] WebSocket error:", event, { isConnectionBlocked });
   			events.emit("error", {
-  				code: "websocket_error",
-  				message: "WebSocket connection error",
+  				code: errorCode,
+  				message: errorMessage,
   				source: "connection"
   			});
+  			if (this.pendingAuth) this.pendingAuth.reject(new Error(errorMessage));
   		};
   		this.ws.onclose = (event) => {
   			if (config.debug) console.log("[SpeechOS] WebSocket closed:", event.code, event.reason);
   			state.setConnected(false);
   		};
-  		this.pendingAuth = new Deferred$1();
-  		this.pendingAuth.setTimeout(RESPONSE_TIMEOUT_MS, "Connection timed out", "connection_timeout", "connection");
   		await this.pendingAuth.promise;
   		this.pendingAuth = null;
   		if (this.audioCapture) this.audioCapture.setReady();
@@ -28472,7 +28481,7 @@
   	* Actually send the audio chunk (async operation).
   	*/
   	async doSendAudioChunk(chunk) {
-  		if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+  		if (this.ws && this.ws.readyState === WS_OPEN) {
   			const arrayBuffer = await chunk.arrayBuffer();
   			this.ws.send(arrayBuffer);
   		}
@@ -28658,7 +28667,7 @@
   	* the transcript. Uses the same pattern as LiveKit's ReadableStream approach.
   	*/
   	async waitForBufferDrain() {
-  		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
+  		if (!this.ws || this.ws.readyState !== WS_OPEN) return;
   		const config = getConfig();
   		const startTime = Date.now();
   		while (this.ws.bufferedAmount > 0) {
@@ -28674,7 +28683,7 @@
   	* Send a JSON message over the WebSocket.
   	*/
   	sendMessage(message) {
-  		if (this.ws && this.ws.readyState === WebSocket.OPEN) this.ws.send(JSON.stringify(message));
+  		if (this.ws && this.ws.readyState === WS_OPEN) this.ws.send(JSON.stringify(message));
   	}
   	/**
   	* Disconnect from the WebSocket.
@@ -28716,7 +28725,7 @@
   	* Check if connected to WebSocket.
   	*/
   	isConnected() {
-  		return this.ws !== null && this.ws.readyState === WebSocket.OPEN;
+  		return this.ws !== null && this.ws.readyState === WS_OPEN;
   	}
   	/**
   	* Get the last input text from a command result.
@@ -28897,6 +28906,10 @@
           this.focusHandler = (event) => {
               const target = event.target;
               if (isFormField(target)) {
+                  console.log("[SpeechOS] FormDetector: focus on form field", {
+                      element: target,
+                      tagName: target?.tagName,
+                  });
                   state.setFocusedElement(target);
                   state.show();
                   events.emit("form:focus", { element: target });
@@ -30152,6 +30165,71 @@
       deleteTranscript: deleteTranscript,
   };
 
+  function isNativeField(field) {
+      return field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement;
+  }
+  /** Call a function after focusing a field and then restore the previous focus afterwards if necessary */
+  function withFocus(field, callback) {
+      const document = field.ownerDocument;
+      const initialFocus = document.activeElement;
+      if (initialFocus === field) {
+          return callback();
+      }
+      try {
+          field.focus();
+          return callback();
+      }
+      finally {
+          field.blur(); // Supports `intialFocus === body`
+          if (initialFocus instanceof HTMLElement) {
+              initialFocus.focus();
+          }
+      }
+  }
+  // This will insert into the focused field. It shouild always be called inside withFocus.
+  // Use this one locally if there are multiple `insertTextIntoField` or `document.execCommand` calls
+  function insertTextWhereverTheFocusIs(document, text) {
+      if (text === '') {
+          // https://github.com/fregante/text-field-edit/issues/16
+          document.execCommand('delete');
+      }
+      else {
+          document.execCommand('insertText', false, text);
+      }
+  }
+  /** Inserts `text` at the cursor’s position, replacing any selection, with **undo** support and by firing the `input` event. */
+  function insertTextIntoField(field, text) {
+      withFocus(field, () => {
+          insertTextWhereverTheFocusIs(field.ownerDocument, text);
+      });
+  }
+  /** Replaces the entire content, equivalent to `field.value = text` but with **undo** support and by firing the `input` event. */
+  function setFieldText(field, text) {
+      if (isNativeField(field)) {
+          field.select();
+          insertTextIntoField(field, text);
+      }
+      else {
+          const document = field.ownerDocument;
+          withFocus(field, () => {
+              document.execCommand('selectAll', false, text);
+              insertTextWhereverTheFocusIs(document, text);
+          });
+      }
+  }
+  /** Get the selected text in a field or an empty string if nothing is selected. */
+  function getFieldSelection(field) {
+      if (isNativeField(field)) {
+          return field.value.slice(field.selectionStart, field.selectionEnd);
+      }
+      const selection = field.ownerDocument.getSelection();
+      if (selection && field.contains(selection.anchorNode)) {
+          // The selection is inside the field
+          return selection.toString();
+      }
+      return '';
+  }
+
   /**
    * @license
    * Copyright 2017 Google LLC
@@ -30512,6 +30590,7 @@
           this.activeAction = null;
           this.editPreviewText = "";
           this.errorMessage = null;
+          this.showRetryButton = true;
           this.actionFeedback = null;
           this.showNoAudioWarning = false;
       }
@@ -31221,10 +31300,14 @@
         bottom: 72px; /* Above button */
         left: 50%;
         transform: translateX(-50%) translateY(8px);
+        min-width: 200px;
         max-width: 280px;
+        width: max-content;
         font-size: 13px;
         color: white;
         white-space: normal;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
         text-align: center;
         padding: 12px 16px;
         border-radius: 12px;
@@ -31437,6 +31520,7 @@
         .error-message {
           font-size: 15px;
           padding: 14px 18px;
+          min-width: 220px;
           max-width: 300px;
           bottom: 94px;
         }
@@ -31662,9 +31746,13 @@
             ? b `
               <div class="error-message ${showError ? "visible" : ""}">
                 ${this.errorMessage}
-                <button class="retry-button" @click="${this.handleRetry}">
-                  Retry Connection
-                </button>
+                ${this.showRetryButton
+                ? b `
+                      <button class="retry-button" @click="${this.handleRetry}">
+                        Retry Connection
+                      </button>
+                    `
+                : ""}
               </div>
             `
             : ""}
@@ -31763,6 +31851,9 @@
   __decorate([
       n({ type: String })
   ], SpeechOSMicButton.prototype, "errorMessage", void 0);
+  __decorate([
+      n({ type: Boolean })
+  ], SpeechOSMicButton.prototype, "showRetryButton", void 0);
   __decorate([
       n({ type: String })
   ], SpeechOSMicButton.prototype, "actionFeedback", void 0);
@@ -34798,6 +34889,7 @@
           super(...arguments);
           this.open = false;
           this.text = "";
+          this.mode = "dictation";
           this.copied = false;
           this.copyTimeout = null;
       }
@@ -34877,6 +34969,41 @@
         color: #10b981;
         flex-shrink: 0;
       }
+
+      /* Edit mode styles */
+      :host([mode="edit"]) .logo-icon {
+        background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+      }
+
+      :host([mode="edit"]) .modal-title {
+        background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      :host([mode="edit"]) .hint {
+        background: rgba(139, 92, 246, 0.08);
+      }
+
+      :host([mode="edit"]) .hint-icon {
+        color: #8b5cf6;
+      }
+
+      :host([mode="edit"]) .btn-primary {
+        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+      }
+
+      :host([mode="edit"]) .btn-primary:hover {
+        background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+        box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
+      }
+
+      :host([mode="edit"]) .btn-success {
+        background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
+        box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
+      }
     `,
       ]; }
       disconnectedCallback() {
@@ -34929,6 +35056,17 @@
               console.error("[SpeechOS] Failed to copy text:", err);
           }
       }
+      get modalTitle() {
+          return this.mode === "edit" ? "Edit Complete" : "Dictation Complete";
+      }
+      get modalIcon() {
+          return this.mode === "edit" ? editIcon(18) : micIcon(18);
+      }
+      get hintText() {
+          return this.mode === "edit"
+              ? "Tip: The editor didn't accept the edit. Copy and paste manually."
+              : "Tip: Focus a text field first to auto-insert next time";
+      }
       render() {
           return b `
       <div
@@ -34938,8 +35076,8 @@
         <div class="modal-card">
           <div class="modal-header">
             <div class="header-content">
-              <div class="logo-icon">${micIcon(18)}</div>
-              <h2 class="modal-title">Dictation Complete</h2>
+              <div class="logo-icon">${this.modalIcon}</div>
+              <h2 class="modal-title">${this.modalTitle}</h2>
             </div>
             <button
               class="close-button"
@@ -34956,7 +35094,7 @@
               <svg class="hint-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                 <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
               </svg>
-              <span>Tip: Focus a text field first to auto-insert next time</span>
+              <span>${this.hintText}</span>
             </div>
           </div>
 
@@ -34983,6 +35121,9 @@
   __decorate([
       n({ type: String })
   ], SpeechOSDictationOutputModal.prototype, "text", void 0);
+  __decorate([
+      n({ type: String, reflect: true })
+  ], SpeechOSDictationOutputModal.prototype, "mode", void 0);
   __decorate([
       r()
   ], SpeechOSDictationOutputModal.prototype, "copied", void 0);
@@ -35160,9 +35301,11 @@
           this.settingsOpenFromWarning = false;
           this.dictationModalOpen = false;
           this.dictationModalText = "";
+          this.dictationModalMode = "dictation";
           this.editHelpModalOpen = false;
           this.actionFeedback = null;
           this.showNoAudioWarning = false;
+          this.isErrorRetryable = true;
           this.dictationTargetElement = null;
           this.editTargetElement = null;
           this.dictationCursorStart = null;
@@ -35311,6 +35454,8 @@
           this.errorEventUnsubscribe = events.on("error", (payload) => {
               if (this.widgetState.recordingState !== "idle" &&
                   this.widgetState.recordingState !== "error") {
+                  // Check if this is a non-retryable error (e.g., CSP blocked connection)
+                  this.isErrorRetryable = payload.code !== "connection_blocked";
                   state.setError(payload.message);
                   getBackend().disconnect().catch(() => { });
               }
@@ -35385,6 +35530,9 @@
           if (changedProperties.has("dictationModalText") && this.dictationModalElement) {
               this.dictationModalElement.text = this.dictationModalText;
           }
+          if (changedProperties.has("dictationModalMode") && this.dictationModalElement) {
+              this.dictationModalElement.mode = this.dictationModalMode;
+          }
           if (changedProperties.has("editHelpModalOpen") && this.editHelpModalElement) {
               this.editHelpModalElement.open = this.editHelpModalOpen;
           }
@@ -35583,13 +35731,24 @@
                   // Track result for consecutive failure detection
                   this.trackActionResult(!!transcription);
                   if (transcription) {
+                      if (getConfig().debug) {
+                          console.log("[SpeechOS] Transcription received:", {
+                              transcription,
+                              dictationTargetElement: this.dictationTargetElement,
+                              tagName: this.dictationTargetElement?.tagName,
+                          });
+                      }
                       // Check if we have a target element to insert into
                       if (this.dictationTargetElement) {
                           this.insertTranscription(transcription);
                       }
                       else {
                           // No target element - show dictation output modal
+                          if (getConfig().debug) {
+                              console.log("[SpeechOS] No target element, showing dictation modal");
+                          }
                           this.dictationModalText = transcription;
+                          this.dictationModalMode = "dictation";
                           this.dictationModalOpen = true;
                       }
                       transcriptStore.saveTranscript(transcription, "dictate");
@@ -35733,41 +35892,66 @@
               return;
           }
           const tagName = target.tagName.toLowerCase();
+          const originalContent = this.getElementContent(target) || "";
           if (tagName === "input" || tagName === "textarea") {
               const inputEl = target;
+              // Restore cursor position before inserting
               const start = this.dictationCursorStart ?? inputEl.value.length;
               const end = this.dictationCursorEnd ?? inputEl.value.length;
-              const before = inputEl.value.substring(0, start);
-              const after = inputEl.value.substring(end);
-              inputEl.value = before + text + after;
-              if (this.supportsSelection(inputEl)) {
-                  const newCursorPos = start + text.length;
-                  inputEl.setSelectionRange(newCursorPos, newCursorPos);
-              }
-              inputEl.dispatchEvent(new Event("input", { bubbles: true }));
-              inputEl.focus();
+              inputEl.setSelectionRange(start, end);
+              // Use text-field-edit to insert text (handles undo, events, etc.)
+              insertTextIntoField(inputEl, text);
               state.setFocusedElement(inputEl);
           }
           else if (target.isContentEditable) {
               target.focus();
               state.setFocusedElement(target);
-              const textNode = document.createTextNode(text);
-              target.appendChild(textNode);
-              const selection = window.getSelection();
-              if (selection) {
-                  const range = document.createRange();
-                  range.selectNodeContents(textNode);
-                  range.collapse(false);
-                  selection.removeAllRanges();
-                  selection.addRange(range);
-              }
-              target.dispatchEvent(new Event("input", { bubbles: true }));
+              // Use text-field-edit for contentEditable elements
+              insertTextIntoField(target, text);
           }
           events.emit("transcription:inserted", { text, element: target });
+          // Verify insertion was applied after DOM updates
+          this.verifyInsertionApplied(target, text, originalContent);
           this.dictationTargetElement = null;
           this.dictationCursorStart = null;
           this.dictationCursorEnd = null;
       }
+      /**
+       * Verify that a dictation insertion was actually applied to the target element.
+       * Some custom editors (CodeMirror, Monaco, Slate, etc.) don't respond to
+       * standard DOM editing methods. If the insertion fails, show a fallback modal.
+       */
+      verifyInsertionApplied(target, insertedText, originalContent) {
+          // Use requestAnimationFrame to check after DOM updates
+          requestAnimationFrame(() => {
+              const tagName = target.tagName.toLowerCase();
+              let currentContent = "";
+              if (tagName === "input" || tagName === "textarea") {
+                  currentContent = target.value;
+              }
+              else if (target.isContentEditable) {
+                  currentContent = target.textContent || "";
+              }
+              // Check if the insertion was applied:
+              // - Content should contain the inserted text
+              // - Or content should be different from original (for empty fields)
+              const insertionApplied = currentContent.includes(insertedText) ||
+                  (originalContent === "" && currentContent !== "");
+              if (!insertionApplied) {
+                  if (getConfig().debug) {
+                      console.log("[SpeechOS] Dictation failed to insert, showing fallback modal", {
+                          insertedText,
+                          currentContent,
+                          originalContent,
+                      });
+                  }
+                  // Show fallback modal with dictation mode styling
+                  this.dictationModalText = insertedText;
+                  this.dictationModalMode = "dictation";
+                  this.dictationModalOpen = true;
+              }
+          });
+      }
       handleActionSelect(event) {
           const { action } = event.detail;
           // Clear any existing command feedback when a new action is selected
@@ -35806,6 +35990,13 @@
           this.dictationTargetElement = this.widgetState.focusedElement;
           this.dictationCursorStart = null;
           this.dictationCursorEnd = null;
+          if (getConfig().debug) {
+              console.log("[SpeechOS] startDictation:", {
+                  focusedElement: this.widgetState.focusedElement,
+                  dictationTargetElement: this.dictationTargetElement,
+                  tagName: this.dictationTargetElement?.tagName,
+              });
+          }
           if (this.dictationTargetElement) {
               const tagName = this.dictationTargetElement.tagName.toLowerCase();
               if (tagName === "input" || tagName === "textarea") {
@@ -35831,15 +36022,18 @@
                       // Ensure minimum animation duration before transitioning to recording
                       const elapsed = Date.now() - connectingStartTime;
                       const remainingDelay = MIN_CONNECTING_ANIMATION_MS - elapsed;
+                      const startRecording = () => {
+                          if (state.getState().recordingState === "error") {
+                              return;
+                          }
+                          state.setRecordingState("recording");
+                          this.startNoAudioWarningTracking();
+                      };
                       if (remainingDelay > 0) {
-                          setTimeout(() => {
-                              state.setRecordingState("recording");
-                              this.startNoAudioWarningTracking();
-                          }, remainingDelay);
+                          setTimeout(startRecording, remainingDelay);
                       }
                       else {
-                          state.setRecordingState("recording");
-                          this.startNoAudioWarningTracking();
+                          startRecording();
                       }
                   },
               });
@@ -35860,6 +36054,13 @@
           this.editSelectionStart = null;
           this.editSelectionEnd = null;
           this.editSelectedText = "";
+          if (getConfig().debug) {
+              console.log("[SpeechOS] startEdit:", {
+                  focusedElement: this.widgetState.focusedElement,
+                  editTargetElement: this.editTargetElement,
+                  tagName: this.editTargetElement?.tagName,
+              });
+          }
           if (this.editTargetElement) {
               const tagName = this.editTargetElement.tagName.toLowerCase();
               if (tagName === "input" || tagName === "textarea") {
@@ -35870,7 +36071,8 @@
                       const start = this.editSelectionStart ?? 0;
                       const end = this.editSelectionEnd ?? 0;
                       if (start !== end) {
-                          this.editSelectedText = inputEl.value.substring(start, end);
+                          // Use getFieldSelection from text-field-edit
+                          this.editSelectedText = getFieldSelection(inputEl);
                       }
                   }
                   else {
@@ -35879,13 +36081,11 @@
                   }
               }
               else if (this.editTargetElement.isContentEditable) {
-                  const selection = window.getSelection();
-                  if (selection && selection.rangeCount > 0) {
-                      const selectedText = selection.toString();
-                      this.editSelectionStart = 0;
-                      this.editSelectionEnd = selectedText.length;
-                      this.editSelectedText = selectedText;
-                  }
+                  // Use getFieldSelection from text-field-edit for contentEditable too
+                  const selectedText = getFieldSelection(this.editTargetElement);
+                  this.editSelectionStart = 0;
+                  this.editSelectionEnd = selectedText.length;
+                  this.editSelectedText = selectedText;
               }
           }
           // Capture the content to edit at start time (sent with auth message)
@@ -35902,15 +36102,18 @@
                       // Ensure minimum animation duration before transitioning to recording
                       const elapsed = Date.now() - connectingStartTime;
                       const remainingDelay = MIN_CONNECTING_ANIMATION_MS - elapsed;
+                      const startRecording = () => {
+                          if (state.getState().recordingState === "error") {
+                              return;
+                          }
+                          state.setRecordingState("recording");
+                          this.startNoAudioWarningTracking();
+                      };
                       if (remainingDelay > 0) {
-                          setTimeout(() => {
-                              state.setRecordingState("recording");
-                              this.startNoAudioWarningTracking();
-                          }, remainingDelay);
+                          setTimeout(startRecording, remainingDelay);
                       }
                       else {
-                          state.setRecordingState("recording");
-                          this.startNoAudioWarningTracking();
+                          startRecording();
                       }
                   },
               });
@@ -35978,15 +36181,18 @@
                       // Ensure minimum animation duration before transitioning to recording
                       const elapsed = Date.now() - connectingStartTime;
                       const remainingDelay = MIN_CONNECTING_ANIMATION_MS - elapsed;
+                      const startRecording = () => {
+                          if (state.getState().recordingState === "error") {
+                              return;
+                          }
+                          state.setRecordingState("recording");
+                          this.startNoAudioWarningTracking();
+                      };
                       if (remainingDelay > 0) {
-                          setTimeout(() => {
-                              state.setRecordingState("recording");
-                              this.startNoAudioWarningTracking();
-                          }, remainingDelay);
+                          setTimeout(startRecording, remainingDelay);
                       }
                       else {
-                          state.setRecordingState("recording");
-                          this.startNoAudioWarningTracking();
+                          startRecording();
                       }
                   },
               });
@@ -36162,21 +36368,14 @@
           const tagName = element.tagName.toLowerCase();
           if (tagName === "input" || tagName === "textarea") {
               const inputEl = element;
-              const fullContent = inputEl.value;
-              const start = this.editSelectionStart ?? 0;
-              const end = this.editSelectionEnd ?? fullContent.length;
-              const hasSelection = start !== end;
-              if (hasSelection) {
-                  return fullContent.substring(start, end);
-              }
-              return fullContent;
+              const selectedText = getFieldSelection(inputEl);
+              // If there's selected text, return it; otherwise return full content
+              return selectedText || inputEl.value;
           }
           else if (element.isContentEditable) {
-              const selection = window.getSelection();
-              if (selection && selection.toString().length > 0) {
-                  return selection.toString();
-              }
-              return element.textContent || "";
+              const selectedText = getFieldSelection(element);
+              // If there's selected text, return it; otherwise return full content
+              return selectedText || element.textContent || "";
           }
           return "";
       }
@@ -36191,40 +36390,44 @@
           if (tagName === "input" || tagName === "textarea") {
               const inputEl = target;
               originalContent = inputEl.value;
-              inputEl.focus();
-              if (this.supportsSelection(inputEl)) {
-                  const selectionStart = this.editSelectionStart ?? 0;
-                  const selectionEnd = this.editSelectionEnd ?? inputEl.value.length;
-                  const hasSelection = selectionStart !== selectionEnd;
-                  if (hasSelection) {
-                      inputEl.setSelectionRange(selectionStart, selectionEnd);
-                  }
-                  else {
-                      inputEl.setSelectionRange(0, inputEl.value.length);
-                  }
-                  document.execCommand("insertText", false, editedText);
+              // Restore the original selection/cursor position
+              const selectionStart = this.editSelectionStart ?? 0;
+              const selectionEnd = this.editSelectionEnd ?? inputEl.value.length;
+              const hasSelection = selectionStart !== selectionEnd;
+              if (hasSelection) {
+                  // Restore selection, then use insertTextIntoField() to replace it
+                  inputEl.setSelectionRange(selectionStart, selectionEnd);
+                  insertTextIntoField(inputEl, editedText);
               }
               else {
-                  inputEl.value = editedText;
-                  inputEl.dispatchEvent(new Event("input", { bubbles: true }));
+                  // No selection - replace entire content using setFieldText()
+                  setFieldText(inputEl, editedText);
               }
               state.setFocusedElement(inputEl);
           }
           else if (target.isContentEditable) {
               originalContent = target.textContent || "";
-              target.focus();
-              state.setFocusedElement(target);
               const hasSelection = this.editSelectionStart !== null &&
                   this.editSelectionEnd !== null &&
                   this.editSelectionStart !== this.editSelectionEnd;
-              if (!hasSelection) {
+              if (hasSelection) {
+                  // Selection exists - focus and insert (assumes selection is still active or we restore it)
+                  target.focus();
+                  insertTextIntoField(target, editedText);
+              }
+              else {
+                  // No selection - select all content first, then replace with insertTextIntoField()
+                  target.focus();
                   const selection = window.getSelection();
-                  const range = document.createRange();
-                  range.selectNodeContents(target);
-                  selection?.removeAllRanges();
-                  selection?.addRange(range);
+                  if (selection) {
+                      const range = document.createRange();
+                      range.selectNodeContents(target);
+                      selection.removeAllRanges();
+                      selection.addRange(range);
+                  }
+                  insertTextIntoField(target, editedText);
               }
-              document.execCommand("insertText", false, editedText);
+              state.setFocusedElement(target);
           }
           transcriptStore.saveTranscript(editedText, "edit", originalContent);
           events.emit("edit:applied", {
@@ -36233,11 +36436,54 @@
               element: target,
           });
           state.completeRecording();
+          // Verify edit was applied after DOM updates
+          this.verifyEditApplied(target, editedText, originalContent);
           this.editTargetElement = null;
           this.editSelectionStart = null;
           this.editSelectionEnd = null;
           this.editSelectedText = "";
       }
+      /**
+       * Verify that an edit was actually applied to the target element.
+       * Some custom editors (CodeMirror, Monaco, Slate, etc.) don't respond to
+       * standard DOM editing methods. If the edit fails, show a fallback modal.
+       */
+      verifyEditApplied(target, editedText, originalContent) {
+          // Use requestAnimationFrame to check after DOM updates
+          requestAnimationFrame(() => {
+              const tagName = target.tagName.toLowerCase();
+              let currentContent = "";
+              if (tagName === "input" || tagName === "textarea") {
+                  currentContent = target.value;
+              }
+              else if (target.isContentEditable) {
+                  currentContent = target.textContent || "";
+              }
+              // Normalize whitespace for comparison
+              const normalizedCurrent = currentContent.trim();
+              const normalizedEdited = editedText.trim();
+              const normalizedOriginal = originalContent.trim();
+              // Check if the edit was applied:
+              // - Content should be different from original (unless edit was no-op)
+              // - Content should contain or match the edited text
+              const editApplied = normalizedCurrent !== normalizedOriginal ||
+                  normalizedCurrent === normalizedEdited ||
+                  normalizedCurrent.includes(normalizedEdited);
+              if (!editApplied) {
+                  if (getConfig().debug) {
+                      console.log("[SpeechOS] Edit failed to apply, showing fallback modal", {
+                          expected: editedText,
+                          actual: currentContent,
+                          original: originalContent,
+                      });
+                  }
+                  // Show fallback modal with edit mode styling
+                  this.dictationModalText = editedText;
+                  this.dictationModalMode = "edit";
+                  this.dictationModalOpen = true;
+              }
+          });
+      }
       render() {
           if (!this.widgetState.isVisible) {
               this.setAttribute("hidden", "");
@@ -36265,6 +36511,7 @@
             activeAction="${this.widgetState.activeAction || ""}"
             editPreviewText="${this.editSelectedText}"
             errorMessage="${this.widgetState.errorMessage || ""}"
+            ?showRetryButton="${this.isErrorRetryable}"
             .actionFeedback="${this.actionFeedback}"
             ?showNoAudioWarning="${this.showNoAudioWarning}"
             @mic-click="${this.handleMicClick}"
@@ -36291,6 +36538,9 @@
   __decorate([
       r()
   ], SpeechOSWidget.prototype, "dictationModalText", void 0);
+  __decorate([
+      r()
+  ], SpeechOSWidget.prototype, "dictationModalMode", void 0);
   __decorate([
       r()
   ], SpeechOSWidget.prototype, "editHelpModalOpen", void 0);
@@ -36300,6 +36550,9 @@
   __decorate([
       r()
   ], SpeechOSWidget.prototype, "showNoAudioWarning", void 0);
+  __decorate([
+      r()
+  ], SpeechOSWidget.prototype, "isErrorRetryable", void 0);
   SpeechOSWidget = SpeechOSWidget_1 = __decorate([
       t$1("speechos-widget")
   ], SpeechOSWidget);