@speechos/client 0.2.5 → 0.2.7

package/dist/index.cjs

@@ -145,6 +145,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,
+                });
                 core.state.setFocusedElement(target);
                 core.state.show();
                 core.events.emit("form:focus", { element: target });
@@ -1400,6 +1404,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
@@ -1760,7 +1829,9 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         this.activeAction = null;
         this.editPreviewText = "";
         this.errorMessage = null;
-        this.commandFeedback = null;
+        this.showRetryButton = true;
+        this.actionFeedback = null;
+        this.showNoAudioWarning = false;
     }
     static { this.styles = [
         themeStyles,
@@ -2350,8 +2421,9 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         background-position: center;
       }
 
-      /* Command feedback badge - no match state (neutral gray) */
-      .status-label.command-none {
+      /* Command/edit feedback badge - no match/empty state (neutral gray) */
+      .status-label.command-none,
+      .status-label.edit-empty {
         background: #4b5563;
         box-shadow: 0 4px 12px rgba(75, 85, 99, 0.3);
         animation: command-feedback-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
@@ -2467,10 +2539,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;
@@ -2508,6 +2584,60 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         border-color: rgba(255, 255, 255, 0.5);
       }
 
+      /* No audio warning banner */
+      .no-audio-warning {
+        position: absolute;
+        bottom: 120px; /* Above button and waveform visualizer */
+        left: 50%;
+        transform: translateX(-50%) translateY(8px);
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 14px;
+        border-radius: 12px;
+        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+        pointer-events: none;
+        opacity: 0;
+        white-space: nowrap;
+      }
+
+      .no-audio-warning.visible {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+        pointer-events: auto;
+      }
+
+      .no-audio-warning .warning-icon {
+        flex-shrink: 0;
+        color: white;
+      }
+
+      .no-audio-warning .warning-text {
+        font-size: 13px;
+        font-weight: 500;
+        color: white;
+      }
+
+      .no-audio-warning .settings-link {
+        background: rgba(255, 255, 255, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        border-radius: 6px;
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 600;
+        color: white;
+        cursor: pointer;
+        transition: all 0.15s;
+        white-space: nowrap;
+      }
+
+      .no-audio-warning .settings-link:hover {
+        background: rgba(255, 255, 255, 0.3);
+        border-color: rgba(255, 255, 255, 0.5);
+      }
+
       /* Mobile styles - 30% larger */
       @media (max-width: 768px) and (hover: none) {
         .mic-button {
@@ -2629,6 +2759,7 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         .error-message {
           font-size: 15px;
           padding: 14px 18px;
+          min-width: 220px;
           max-width: 300px;
           bottom: 94px;
         }
@@ -2637,6 +2768,21 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
           padding: 8px 14px;
           font-size: 14px;
         }
+
+        .no-audio-warning {
+          padding: 12px 16px;
+          gap: 10px;
+          bottom: 145px; /* Above button and waveform on mobile */
+        }
+
+        .no-audio-warning .warning-text {
+          font-size: 15px;
+        }
+
+        .no-audio-warning .settings-link {
+          padding: 6px 12px;
+          font-size: 14px;
+        }
       }
     `,
     ]; }
@@ -2694,6 +2840,14 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
             composed: true,
         }));
     }
+    handleOpenSettings(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent("open-settings", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
     getButtonClass() {
         const classes = ["mic-button"];
         if (this.expanded && this.recordingState === "idle") {
@@ -2778,13 +2932,16 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         }
         return this.recordingState;
     }
-    getCommandFeedbackLabel() {
-        if (this.commandFeedback === "success") {
+    getActionFeedbackLabel() {
+        if (this.actionFeedback === "command-success") {
             return "Got it!";
         }
-        if (this.commandFeedback === "none") {
+        if (this.actionFeedback === "command-none") {
             return "No command matched";
         }
+        if (this.actionFeedback === "edit-empty") {
+            return "Couldn't understand edit";
+        }
         return "";
     }
     render() {
@@ -2794,9 +2951,9 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         const showSiriEdit = this.recordingState === "processing" && this.activeAction === "edit";
         const statusLabel = this.getStatusLabel();
         const showVisualizer = this.shouldShowVisualizer();
-        // Show status label during recording (either visualizer or edit text) OR command feedback
-        const showCommandFeedback = this.recordingState === "idle" && this.commandFeedback !== null;
-        const showStatus = this.recordingState === "recording" || showCommandFeedback;
+        // Show status label during recording (either visualizer or edit text) OR action feedback
+        const showActionFeedback = this.recordingState === "idle" && this.actionFeedback !== null;
+        const showStatus = this.recordingState === "recording" || showActionFeedback;
         const showCancel = this.recordingState === "connecting" ||
             this.recordingState === "recording" ||
             this.recordingState === "processing";
@@ -2828,13 +2985,46 @@ 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>
             `
             : ""}
 
+        <div
+          class="no-audio-warning ${this.showNoAudioWarning &&
+            this.recordingState === "recording"
+            ? "visible"
+            : ""}"
+        >
+          <svg
+            class="warning-icon"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+            />
+            <line x1="12" y1="9" x2="12" y2="13" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+          <span class="warning-text">We're not hearing anything</span>
+          <button class="settings-link" @click="${this.handleOpenSettings}">
+            Check Settings
+          </button>
+        </div>
+
         <button
           class="${this.getButtonClass()}"
           @click="${this.handleClick}"
@@ -2847,14 +3037,14 @@ let SpeechOSMicButton = class SpeechOSMicButton extends i$1 {
         </button>
 
         <span
-          class="status-label ${showStatus ? "visible" : ""} ${showCommandFeedback
-            ? `command-${this.commandFeedback}`
+          class="status-label ${showStatus ? "visible" : ""} ${showActionFeedback
+            ? this.actionFeedback
             : showVisualizer
                 ? "visualizer"
                 : this.getStatusClass()}"
         >
-          ${showCommandFeedback
-            ? this.getCommandFeedbackLabel()
+          ${showActionFeedback
+            ? this.getActionFeedbackLabel()
             : showVisualizer
                 ? b `<speechos-audio-visualizer
                   ?active="${showVisualizer}"
@@ -2900,9 +3090,15 @@ __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, "commandFeedback", void 0);
+], SpeechOSMicButton.prototype, "actionFeedback", void 0);
+__decorate([
+    n({ type: Boolean })
+], SpeechOSMicButton.prototype, "showNoAudioWarning", void 0);
 SpeechOSMicButton = __decorate([
     t$1("speechos-mic-button")
 ], SpeechOSMicButton);
@@ -5932,6 +6128,7 @@ let SpeechOSDictationOutputModal = class SpeechOSDictationOutputModal extends i$
         super(...arguments);
         this.open = false;
         this.text = "";
+        this.mode = "dictation";
         this.copied = false;
         this.copyTimeout = null;
     }
@@ -6011,6 +6208,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() {
@@ -6063,6 +6295,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
@@ -6072,8 +6315,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"
@@ -6090,7 +6333,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>
 
@@ -6117,6 +6360,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);
@@ -6276,15 +6522,29 @@ var SpeechOSWidget_1;
  * duration so users can see the visual feedback before transitioning to recording.
  */
 const MIN_CONNECTING_ANIMATION_MS = 200;
+/**
+ * Time to wait for a transcription event before showing the "no audio" warning (in milliseconds).
+ * If no transcription:interim event is received within this time during recording,
+ * it indicates the server isn't receiving/processing audio.
+ */
+const NO_AUDIO_WARNING_TIMEOUT_MS = 5000;
+/**
+ * Number of consecutive actions with empty results before showing warning on next action.
+ */
+const CONSECUTIVE_NO_AUDIO_THRESHOLD = 2;
 let SpeechOSWidget = class SpeechOSWidget extends i$1 {
     constructor() {
         super(...arguments);
         this.widgetState = core.state.getState();
         this.settingsOpen = false;
+        this.settingsOpenFromWarning = false;
         this.dictationModalOpen = false;
         this.dictationModalText = "";
+        this.dictationModalMode = "dictation";
         this.editHelpModalOpen = false;
-        this.commandFeedback = null;
+        this.actionFeedback = null;
+        this.showNoAudioWarning = false;
+        this.isErrorRetryable = true;
         this.dictationTargetElement = null;
         this.editTargetElement = null;
         this.dictationCursorStart = null;
@@ -6296,7 +6556,7 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.modalElement = null;
         this.dictationModalElement = null;
         this.editHelpModalElement = null;
-        this.commandFeedbackTimeout = null;
+        this.actionFeedbackTimeout = null;
         this.customPosition = null;
         this.isDragging = false;
         this.dragStartPos = null;
@@ -6306,6 +6566,11 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.suppressNextClick = false;
         this.boundViewportResizeHandler = null;
         this.boundScrollHandler = null;
+        // No-audio warning state tracking
+        this.consecutiveNoAudioActions = 0;
+        this.transcriptionReceived = false;
+        this.noAudioWarningTimeout = null;
+        this.transcriptionInterimUnsubscribe = null;
     }
     static { SpeechOSWidget_1 = this; }
     static { this.styles = [
@@ -6388,6 +6653,7 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.modalElement = document.createElement("speechos-settings-modal");
         this.modalElement.addEventListener("modal-close", () => {
             this.settingsOpen = false;
+            this.settingsOpenFromWarning = false;
         });
         document.body.appendChild(this.modalElement);
         // Mount dictation output modal
@@ -6403,7 +6669,17 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         });
         document.body.appendChild(this.editHelpModalElement);
         this.stateUnsubscribe = core.state.subscribe((newState) => {
-            if (!newState.isVisible || !newState.isExpanded) {
+            if (!newState.isVisible) {
+                if (core.getConfig().debug && this.settingsOpen) {
+                    console.log("[SpeechOS] Closing settings modal: widget hidden");
+                }
+                this.settingsOpen = false;
+                this.settingsOpenFromWarning = false;
+            }
+            else if (!newState.isExpanded && !this.settingsOpenFromWarning) {
+                if (core.getConfig().debug && this.settingsOpen) {
+                    console.log("[SpeechOS] Closing settings modal: widget collapsed");
+                }
                 this.settingsOpen = false;
             }
             // Clear custom position when focused element changes (re-anchor to new element)
@@ -6417,6 +6693,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.errorEventUnsubscribe = core.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";
                 core.state.setError(payload.message);
                 core.getBackend().disconnect().catch(() => { });
             }
@@ -6449,9 +6727,9 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             this.editHelpModalElement.remove();
             this.editHelpModalElement = null;
         }
-        if (this.commandFeedbackTimeout) {
-            clearTimeout(this.commandFeedbackTimeout);
-            this.commandFeedbackTimeout = null;
+        if (this.actionFeedbackTimeout) {
+            clearTimeout(this.actionFeedbackTimeout);
+            this.actionFeedbackTimeout = null;
         }
         if (this.stateUnsubscribe) {
             this.stateUnsubscribe();
@@ -6479,6 +6757,7 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             window.removeEventListener("scroll", this.boundScrollHandler);
             this.boundScrollHandler = null;
         }
+        this.cleanupNoAudioWarningTracking();
     }
     updated(changedProperties) {
         if (changedProperties.has("settingsOpen") && this.modalElement) {
@@ -6490,6 +6769,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;
         }
@@ -6656,7 +6938,7 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         }
         if (this.widgetState.recordingState === "idle") {
             // Clear command feedback on any mic click
-            this.clearCommandFeedback();
+            this.clearActionFeedback();
             // If we're expanding, prefetch the token to reduce latency when user selects an action
             if (!this.widgetState.isExpanded) {
                 // Fire and forget - we don't need to wait for this (LiveKit only)
@@ -6677,6 +6959,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         }
     }
     async handleStopRecording() {
+        // Clean up no-audio warning tracking
+        this.cleanupNoAudioWarningTracking();
         if (this.widgetState.activeAction === "edit") {
             await this.handleStopEdit();
         }
@@ -6688,14 +6972,27 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             const backend = core.getBackend();
             try {
                 const transcription = await this.withMinDisplayTime(backend.stopVoiceSession(), 300);
+                // Track result for consecutive failure detection
+                this.trackActionResult(!!transcription);
                 if (transcription) {
+                    if (core.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 (core.getConfig().debug) {
+                            console.log("[SpeechOS] No target element, showing dictation modal");
+                        }
                         this.dictationModalText = transcription;
+                        this.dictationModalMode = "dictation";
                         this.dictationModalOpen = true;
                     }
                     transcriptStore.saveTranscript(transcription, "dictate");
@@ -6707,6 +7004,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
                 backend.startAutoRefresh?.();
             }
             catch (error) {
+                // Track as failed result
+                this.trackActionResult(false);
                 const errorMessage = error instanceof Error ? error.message : "Failed to transcribe audio";
                 if (errorMessage !== "Disconnected") {
                     core.state.setError(errorMessage);
@@ -6716,6 +7015,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         }
     }
     async handleCancelOperation() {
+        // Clean up no-audio warning tracking
+        this.cleanupNoAudioWarningTracking();
         await core.getBackend().disconnect();
         if (this.widgetState.recordingState === "error") {
             core.state.clearError();
@@ -6745,7 +7046,7 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         }
     }
     handleCloseWidget() {
-        this.clearCommandFeedback();
+        this.clearActionFeedback();
         core.getBackend().stopAutoRefresh?.();
         core.state.hide();
     }
@@ -6836,45 +7137,70 @@ 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;
+            // 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);
             core.state.setFocusedElement(inputEl);
         }
         else if (target.isContentEditable) {
             target.focus();
             core.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);
         }
         core.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 (core.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
-        this.clearCommandFeedback();
+        this.clearActionFeedback();
         core.state.setActiveAction(action);
         if (action === "dictate") {
             this.startDictation();
@@ -6909,6 +7235,13 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.dictationTargetElement = this.widgetState.focusedElement;
         this.dictationCursorStart = null;
         this.dictationCursorEnd = null;
+        if (core.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") {
@@ -6934,13 +7267,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 (core.state.getState().recordingState === "error") {
+                            return;
+                        }
+                        core.state.setRecordingState("recording");
+                        this.startNoAudioWarningTracking();
+                    };
                     if (remainingDelay > 0) {
-                        setTimeout(() => {
-                            core.state.setRecordingState("recording");
-                        }, remainingDelay);
+                        setTimeout(startRecording, remainingDelay);
                     }
                     else {
-                        core.state.setRecordingState("recording");
+                        startRecording();
                     }
                 },
             });
@@ -6948,7 +7286,10 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : "Connection failed";
             if (errorMessage !== "Disconnected") {
-                core.state.setError(`Failed to connect: ${errorMessage}`);
+                // Only set error if not already in error state (error event may have already set it)
+                if (this.widgetState.recordingState !== "error") {
+                    core.state.setError(`Failed to connect: ${errorMessage}`);
+                }
                 await backend.disconnect();
             }
         }
@@ -6958,6 +7299,13 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         this.editSelectionStart = null;
         this.editSelectionEnd = null;
         this.editSelectedText = "";
+        if (core.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") {
@@ -6968,7 +7316,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 {
@@ -6977,13 +7326,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)
@@ -7000,13 +7347,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 (core.state.getState().recordingState === "error") {
+                            return;
+                        }
+                        core.state.setRecordingState("recording");
+                        this.startNoAudioWarningTracking();
+                    };
                     if (remainingDelay > 0) {
-                        setTimeout(() => {
-                            core.state.setRecordingState("recording");
-                        }, remainingDelay);
+                        setTimeout(startRecording, remainingDelay);
                     }
                     else {
-                        core.state.setRecordingState("recording");
+                        startRecording();
                     }
                 },
             });
@@ -7014,7 +7366,10 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : "Connection failed";
             if (errorMessage !== "Disconnected") {
-                core.state.setError(`Failed to connect: ${errorMessage}`);
+                // Only set error if not already in error state (error event may have already set it)
+                if (this.widgetState.recordingState !== "error") {
+                    core.state.setError(`Failed to connect: ${errorMessage}`);
+                }
                 await backend.disconnect();
             }
         }
@@ -7025,12 +7380,30 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         const backend = core.getBackend();
         try {
             const editedText = await this.withMinDisplayTime(backend.requestEditText(originalContent), 300);
+            // Check if server returned no change (couldn't understand edit)
+            const noChange = editedText.trim() === originalContent.trim();
+            if (noChange) {
+                this.trackActionResult(false);
+                this.showActionFeedback("edit-empty");
+                core.state.completeRecording();
+                this.editTargetElement = null;
+                this.editSelectionStart = null;
+                this.editSelectionEnd = null;
+                this.editSelectedText = "";
+                backend.disconnect().catch(() => { });
+                backend.startAutoRefresh?.();
+                return;
+            }
+            // Track result - got a meaningful change
+            this.trackActionResult(true);
             this.applyEdit(editedText);
             backend.disconnect().catch(() => { });
             // Start auto-refresh to keep token fresh for subsequent commands (LiveKit only)
             backend.startAutoRefresh?.();
         }
         catch (error) {
+            // Track as failed result
+            this.trackActionResult(false);
             const errorMessage = error instanceof Error ? error.message : "Failed to apply edit";
             if (errorMessage !== "Disconnected") {
                 core.state.setError(errorMessage);
@@ -7053,13 +7426,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 (core.state.getState().recordingState === "error") {
+                            return;
+                        }
+                        core.state.setRecordingState("recording");
+                        this.startNoAudioWarningTracking();
+                    };
                     if (remainingDelay > 0) {
-                        setTimeout(() => {
-                            core.state.setRecordingState("recording");
-                        }, remainingDelay);
+                        setTimeout(startRecording, remainingDelay);
                     }
                     else {
-                        core.state.setRecordingState("recording");
+                        startRecording();
                     }
                 },
             });
@@ -7067,7 +7445,10 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         catch (error) {
             const errorMessage = error instanceof Error ? error.message : "Connection failed";
             if (errorMessage !== "Disconnected") {
-                core.state.setError(`Failed to connect: ${errorMessage}`);
+                // Only set error if not already in error state (error event may have already set it)
+                if (this.widgetState.recordingState !== "error") {
+                    core.state.setError(`Failed to connect: ${errorMessage}`);
+                }
                 await backend.disconnect();
             }
         }
@@ -7079,6 +7460,8 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         const backend = core.getBackend();
         try {
             const result = await this.withMinDisplayTime(backend.requestCommand(commands), 300);
+            // Track result - null result means no command matched (possibly no audio)
+            this.trackActionResult(result !== null);
             // Get input text from the backend if available
             const inputText = backend.getLastInputText?.();
             // Save to transcript store
@@ -7096,12 +7479,14 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             // Keep widget visible but collapsed (just mic button, no action bubbles)
             core.state.setState({ isExpanded: false });
             // Show command feedback
-            this.showCommandFeedback(result ? "success" : "none");
+            this.showActionFeedback(result ? "command-success" : "command-none");
             backend.disconnect().catch(() => { });
             // Start auto-refresh to keep token fresh for subsequent commands (LiveKit only)
             backend.startAutoRefresh?.();
         }
         catch (error) {
+            // Track as failed result
+            this.trackActionResult(false);
             const errorMessage = error instanceof Error ? error.message : "Failed to process command";
             if (errorMessage !== "Disconnected") {
                 core.state.setError(errorMessage);
@@ -7109,24 +7494,110 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             }
         }
     }
-    showCommandFeedback(feedback) {
-        this.commandFeedback = feedback;
+    showActionFeedback(feedback) {
+        this.actionFeedback = feedback;
         // Clear any existing timeout
-        if (this.commandFeedbackTimeout) {
-            clearTimeout(this.commandFeedbackTimeout);
+        if (this.actionFeedbackTimeout) {
+            clearTimeout(this.actionFeedbackTimeout);
         }
         // Auto-dismiss after 4 seconds
-        this.commandFeedbackTimeout = window.setTimeout(() => {
-            this.commandFeedback = null;
-            this.commandFeedbackTimeout = null;
+        this.actionFeedbackTimeout = window.setTimeout(() => {
+            this.actionFeedback = null;
+            this.actionFeedbackTimeout = null;
         }, 4000);
     }
-    clearCommandFeedback() {
-        if (this.commandFeedbackTimeout) {
-            clearTimeout(this.commandFeedbackTimeout);
-            this.commandFeedbackTimeout = null;
+    clearActionFeedback() {
+        if (this.actionFeedbackTimeout) {
+            clearTimeout(this.actionFeedbackTimeout);
+            this.actionFeedbackTimeout = null;
+        }
+        this.actionFeedback = null;
+    }
+    /**
+     * Start tracking for no-audio warning when recording begins.
+     */
+    startNoAudioWarningTracking() {
+        this.transcriptionReceived = false;
+        this.showNoAudioWarning = false;
+        // If we had consecutive failures, show warning immediately
+        if (this.consecutiveNoAudioActions >= CONSECUTIVE_NO_AUDIO_THRESHOLD) {
+            this.showNoAudioWarning = true;
+        }
+        // Start timeout - if no transcription within 5s, show warning
+        this.noAudioWarningTimeout = window.setTimeout(() => {
+            if (!this.transcriptionReceived &&
+                this.widgetState.recordingState === "recording") {
+                this.showNoAudioWarning = true;
+            }
+        }, NO_AUDIO_WARNING_TIMEOUT_MS);
+        // Subscribe to transcription:interim events
+        this.transcriptionInterimUnsubscribe = core.events.on("transcription:interim", () => {
+            this.transcriptionReceived = true;
+            if (this.showNoAudioWarning) {
+                this.showNoAudioWarning = false;
+            }
+        });
+    }
+    /**
+     * Clean up no-audio warning tracking when recording stops.
+     */
+    cleanupNoAudioWarningTracking() {
+        if (this.noAudioWarningTimeout !== null) {
+            clearTimeout(this.noAudioWarningTimeout);
+            this.noAudioWarningTimeout = null;
         }
-        this.commandFeedback = null;
+        if (this.transcriptionInterimUnsubscribe) {
+            this.transcriptionInterimUnsubscribe();
+            this.transcriptionInterimUnsubscribe = null;
+        }
+        this.showNoAudioWarning = false;
+    }
+    /**
+     * Track the result of an action for consecutive failure detection.
+     */
+    trackActionResult(hasContent) {
+        if (hasContent) {
+            this.consecutiveNoAudioActions = 0;
+        }
+        else {
+            this.consecutiveNoAudioActions++;
+        }
+    }
+    /**
+     * Handle opening settings from the no-audio warning.
+     * Stops the current dictation session immediately, then opens settings.
+     */
+    async handleOpenSettingsFromWarning() {
+        if (core.getConfig().debug) {
+            console.log("[SpeechOS] No-audio settings link clicked");
+        }
+        // Clean up no-audio warning tracking first
+        this.cleanupNoAudioWarningTracking();
+        // Keep settings open even if widget collapses
+        this.settingsOpenFromWarning = true;
+        // Stop audio capture and disconnect immediately (don't wait for transcription)
+        // Kick this off before opening settings so audio stops fast, but don't block UI.
+        const disconnectPromise = core.getBackend().disconnect().catch((error) => {
+            if (core.getConfig().debug) {
+                console.log("[SpeechOS] Disconnect failed while opening settings", error);
+            }
+        });
+        // Update UI state to idle
+        core.state.cancelRecording();
+        // Clear target elements
+        this.dictationTargetElement = null;
+        this.editTargetElement = null;
+        this.dictationCursorStart = null;
+        this.dictationCursorEnd = null;
+        this.editSelectionStart = null;
+        this.editSelectionEnd = null;
+        this.editSelectedText = "";
+        // Open settings modal
+        this.settingsOpen = true;
+        if (core.getConfig().debug) {
+            console.log("[SpeechOS] Settings modal opened from no-audio warning");
+        }
+        await disconnectPromise;
     }
     supportsSelection(element) {
         if (element.tagName.toLowerCase() === "textarea") {
@@ -7142,21 +7613,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 "";
     }
@@ -7171,40 +7635,44 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
         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);
             }
             core.state.setFocusedElement(inputEl);
         }
         else if (target.isContentEditable) {
             originalContent = target.textContent || "";
-            target.focus();
-            core.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);
+            core.state.setFocusedElement(target);
         }
         transcriptStore.saveTranscript(editedText, "edit", originalContent);
         core.events.emit("edit:applied", {
@@ -7213,11 +7681,54 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             element: target,
         });
         core.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 (core.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", "");
@@ -7245,12 +7756,15 @@ let SpeechOSWidget = class SpeechOSWidget extends i$1 {
             activeAction="${this.widgetState.activeAction || ""}"
             editPreviewText="${this.editSelectedText}"
             errorMessage="${this.widgetState.errorMessage || ""}"
-            .commandFeedback="${this.commandFeedback}"
+            ?showRetryButton="${this.isErrorRetryable}"
+            .actionFeedback="${this.actionFeedback}"
+            ?showNoAudioWarning="${this.showNoAudioWarning}"
             @mic-click="${this.handleMicClick}"
             @stop-recording="${this.handleStopRecording}"
             @cancel-operation="${this.handleCancelOperation}"
             @retry-connection="${this.handleRetryConnection}"
             @close-widget="${this.handleCloseWidget}"
+            @open-settings="${this.handleOpenSettingsFromWarning}"
           ></speechos-mic-button>
         </div>
       </div>
@@ -7269,12 +7783,21 @@ __decorate([
 __decorate([
     r()
 ], SpeechOSWidget.prototype, "dictationModalText", void 0);
+__decorate([
+    r()
+], SpeechOSWidget.prototype, "dictationModalMode", void 0);
 __decorate([
     r()
 ], SpeechOSWidget.prototype, "editHelpModalOpen", void 0);
 __decorate([
     r()
-], SpeechOSWidget.prototype, "commandFeedback", void 0);
+], SpeechOSWidget.prototype, "actionFeedback", void 0);
+__decorate([
+    r()
+], SpeechOSWidget.prototype, "showNoAudioWarning", void 0);
+__decorate([
+    r()
+], SpeechOSWidget.prototype, "isErrorRetryable", void 0);
 SpeechOSWidget = SpeechOSWidget_1 = __decorate([
     t$1("speechos-widget")
 ], SpeechOSWidget);