@speechos/client 0.2.6 → 0.2.8

package/dist/index.js

@@ -142,6 +142,10 @@ class FormDetector {
         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 });
@@ -1397,6 +1401,71 @@ const transcriptStore = {
     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
@@ -1757,6 +1826,7 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         this.activeAction = null;
         this.editPreviewText = "";
         this.errorMessage = null;
+        this.showRetryButton = true;
         this.actionFeedback = null;
         this.showNoAudioWarning = false;
     }
@@ -2466,10 +2536,14 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         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;
@@ -2682,6 +2756,7 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         .error-message {
           font-size: 15px;
           padding: 14px 18px;
+          min-width: 220px;
           max-width: 300px;
           bottom: 94px;
         }
@@ -2907,9 +2982,13 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
             ? 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>
             `
             : ""}
@@ -3008,6 +3087,9 @@ __decorate([
 __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);
@@ -6043,6 +6125,7 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         super(...arguments);
         this.open = false;
         this.text = "";
+        this.mode = "dictation";
         this.copied = false;
         this.copyTimeout = null;
     }
@@ -6122,6 +6205,41 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         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() {
@@ -6174,6 +6292,17 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
             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
@@ -6183,8 +6312,8 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         <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"
@@ -6201,7 +6330,7 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
               <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>
 
@@ -6228,6 +6357,9 @@ __decorate([
 __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);
@@ -6405,9 +6537,11 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         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;
@@ -6556,6 +6690,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         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(() => { });
             }
@@ -6630,6 +6766,9 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         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;
         }
@@ -6833,13 +6972,24 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
                 // 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");
@@ -6984,41 +7134,68 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             return;
         }
         const tagName = target.tagName.toLowerCase();
+        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;
-            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
@@ -7057,6 +7234,13 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         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") {
@@ -7082,15 +7266,18 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
                     // 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();
                     }
                 },
             });
@@ -7111,6 +7298,13 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         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") {
@@ -7121,7 +7315,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
                     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 {
@@ -7130,13 +7325,11 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
                 }
             }
             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)
@@ -7153,15 +7346,18 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
                     // 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();
                     }
                 },
             });
@@ -7229,15 +7425,18 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
                     // 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();
                     }
                 },
             });
@@ -7276,8 +7475,6 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             // Note: command:complete event is already emitted by the backend
             // when the command_result message is received, so we don't emit here
             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(() => { });
@@ -7413,21 +7610,14 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         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 "";
     }
@@ -7442,40 +7632,46 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         if (tagName === "input" || tagName === "textarea") {
             const inputEl = target;
             originalContent = inputEl.value;
+            // Ensure DOM focus is on the input before editing
             inputEl.focus();
-            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", {
@@ -7484,11 +7680,54 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             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", "");
@@ -7516,6 +7755,7 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             activeAction="${this.widgetState.activeAction || ""}"
             editPreviewText="${this.editSelectedText}"
             errorMessage="${this.widgetState.errorMessage || ""}"
+            ?showRetryButton="${this.isErrorRetryable}"
             .actionFeedback="${this.actionFeedback}"
             ?showNoAudioWarning="${this.showNoAudioWarning}"
             @mic-click="${this.handleMicClick}"
@@ -7542,6 +7782,9 @@ __decorate([
 __decorate([
     r()
 ], SpeechOSWidget.prototype, "dictationModalText", void 0);
+__decorate([
+    r()
+], SpeechOSWidget.prototype, "dictationModalMode", void 0);
 __decorate([
     r()
 ], SpeechOSWidget.prototype, "editHelpModalOpen", void 0);
@@ -7551,6 +7794,9 @@ __decorate([
 __decorate([
     r()
 ], SpeechOSWidget.prototype, "showNoAudioWarning", void 0);
+__decorate([
+    r()
+], SpeechOSWidget.prototype, "isErrorRetryable", void 0);
 SpeechOSWidget = SpeechOSWidget_1 = __decorate([
     t$1("speechos-widget")
 ], SpeechOSWidget);