@speechos/client 0.2.5 → 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);
   		}
@@ -28518,6 +28527,10 @@
   	}
   	handleIntermediateTranscription(message) {
   		const config = getConfig();
+  		events.emit("transcription:interim", {
+  			transcript: message.transcript,
+  			isFinal: message.is_final
+  		});
   		if (config.debug) console.log("[SpeechOS] Intermediate transcription:", message.transcript, "final:", message.is_final);
   	}
   	handleFinalTranscript(message) {
@@ -28654,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) {
@@ -28670,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.
@@ -28712,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.
@@ -28893,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 });
@@ -30148,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
@@ -30508,7 +30590,9 @@
           this.activeAction = null;
           this.editPreviewText = "";
           this.errorMessage = null;
-          this.commandFeedback = null;
+          this.showRetryButton = true;
+          this.actionFeedback = null;
+          this.showNoAudioWarning = false;
       }
       static { this.styles = [
           themeStyles,
@@ -31098,8 +31182,9 @@
         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)
@@ -31215,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;
@@ -31256,6 +31345,60 @@
         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 {
@@ -31377,6 +31520,7 @@
         .error-message {
           font-size: 15px;
           padding: 14px 18px;
+          min-width: 220px;
           max-width: 300px;
           bottom: 94px;
         }
@@ -31385,6 +31529,21 @@
           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;
+        }
       }
     `,
       ]; }
@@ -31442,6 +31601,14 @@
               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") {
@@ -31526,13 +31693,16 @@
           }
           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() {
@@ -31542,9 +31712,9 @@
           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";
@@ -31576,13 +31746,46 @@
             ? 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}"
@@ -31595,14 +31798,14 @@
         </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}"
@@ -31648,9 +31851,15 @@
   __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);
@@ -34680,6 +34889,7 @@
           super(...arguments);
           this.open = false;
           this.text = "";
+          this.mode = "dictation";
           this.copied = false;
           this.copyTimeout = null;
       }
@@ -34759,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() {
@@ -34811,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
@@ -34820,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"
@@ -34838,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>
 
@@ -34865,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);
@@ -35024,15 +35283,29 @@
    * 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 = 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;
@@ -35044,7 +35317,7 @@
           this.modalElement = null;
           this.dictationModalElement = null;
           this.editHelpModalElement = null;
-          this.commandFeedbackTimeout = null;
+          this.actionFeedbackTimeout = null;
           this.customPosition = null;
           this.isDragging = false;
           this.dragStartPos = null;
@@ -35054,6 +35327,11 @@
           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 = [
@@ -35136,6 +35414,7 @@
           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
@@ -35151,7 +35430,17 @@
           });
           document.body.appendChild(this.editHelpModalElement);
           this.stateUnsubscribe = state.subscribe((newState) => {
-              if (!newState.isVisible || !newState.isExpanded) {
+              if (!newState.isVisible) {
+                  if (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 (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)
@@ -35165,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(() => { });
               }
@@ -35197,9 +35488,9 @@
               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();
@@ -35227,6 +35518,7 @@
               window.removeEventListener("scroll", this.boundScrollHandler);
               this.boundScrollHandler = null;
           }
+          this.cleanupNoAudioWarningTracking();
       }
       updated(changedProperties) {
           if (changedProperties.has("settingsOpen") && this.modalElement) {
@@ -35238,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;
           }
@@ -35403,7 +35698,7 @@
           }
           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)
@@ -35420,6 +35715,8 @@
           }
       }
       async handleStopRecording() {
+          // Clean up no-audio warning tracking
+          this.cleanupNoAudioWarningTracking();
           if (this.widgetState.activeAction === "edit") {
               await this.handleStopEdit();
           }
@@ -35431,14 +35728,27 @@
               const backend = getBackend();
               try {
                   const transcription = await this.withMinDisplayTime(backend.stopVoiceSession(), 300);
+                  // 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");
@@ -35450,6 +35760,8 @@
                   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") {
                       state.setError(errorMessage);
@@ -35459,6 +35771,8 @@
           }
       }
       async handleCancelOperation() {
+          // Clean up no-audio warning tracking
+          this.cleanupNoAudioWarningTracking();
           await getBackend().disconnect();
           if (this.widgetState.recordingState === "error") {
               state.clearError();
@@ -35488,7 +35802,7 @@
           }
       }
       handleCloseWidget() {
-          this.clearCommandFeedback();
+          this.clearActionFeedback();
           state.hide();
       }
       handleSettingsClick() {
@@ -35578,45 +35892,70 @@
               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
-          this.clearCommandFeedback();
+          this.clearActionFeedback();
           state.setActiveAction(action);
           if (action === "dictate") {
               this.startDictation();
@@ -35651,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") {
@@ -35676,13 +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");
-                          }, remainingDelay);
+                          setTimeout(startRecording, remainingDelay);
                       }
                       else {
-                          state.setRecordingState("recording");
+                          startRecording();
                       }
                   },
               });
@@ -35690,7 +36041,10 @@
           catch (error) {
               const errorMessage = error instanceof Error ? error.message : "Connection failed";
               if (errorMessage !== "Disconnected") {
-                  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") {
+                      state.setError(`Failed to connect: ${errorMessage}`);
+                  }
                   await backend.disconnect();
               }
           }
@@ -35700,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") {
@@ -35710,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 {
@@ -35719,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)
@@ -35742,13 +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");
-                          }, remainingDelay);
+                          setTimeout(startRecording, remainingDelay);
                       }
                       else {
-                          state.setRecordingState("recording");
+                          startRecording();
                       }
                   },
               });
@@ -35756,7 +36121,10 @@
           catch (error) {
               const errorMessage = error instanceof Error ? error.message : "Connection failed";
               if (errorMessage !== "Disconnected") {
-                  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") {
+                      state.setError(`Failed to connect: ${errorMessage}`);
+                  }
                   await backend.disconnect();
               }
           }
@@ -35767,12 +36135,30 @@
           const backend = 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");
+                  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") {
                   state.setError(errorMessage);
@@ -35795,13 +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");
-                          }, remainingDelay);
+                          setTimeout(startRecording, remainingDelay);
                       }
                       else {
-                          state.setRecordingState("recording");
+                          startRecording();
                       }
                   },
               });
@@ -35809,7 +36200,10 @@
           catch (error) {
               const errorMessage = error instanceof Error ? error.message : "Connection failed";
               if (errorMessage !== "Disconnected") {
-                  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") {
+                      state.setError(`Failed to connect: ${errorMessage}`);
+                  }
                   await backend.disconnect();
               }
           }
@@ -35821,6 +36215,8 @@
           const backend = 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
@@ -35838,12 +36234,14 @@
               // Keep widget visible but collapsed (just mic button, no action bubbles)
               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") {
                   state.setError(errorMessage);
@@ -35851,24 +36249,110 @@
               }
           }
       }
-      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.commandFeedback = 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 = 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;
+          }
+          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 (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 = getBackend().disconnect().catch((error) => {
+              if (getConfig().debug) {
+                  console.log("[SpeechOS] Disconnect failed while opening settings", error);
+              }
+          });
+          // Update UI state to idle
+          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 (getConfig().debug) {
+              console.log("[SpeechOS] Settings modal opened from no-audio warning");
+          }
+          await disconnectPromise;
       }
       supportsSelection(element) {
           if (element.tagName.toLowerCase() === "textarea") {
@@ -35884,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 "";
       }
@@ -35913,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", {
@@ -35955,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", "");
@@ -35987,12 +36511,15 @@
             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>
@@ -36011,12 +36538,21 @@
   __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);