oysterun 1.5.5 → 1.5.7-beta.0

package/dev/client/web/index.html

@@ -2061,6 +2061,117 @@
         line-height: 1.35;
       }
 
+      .settings-list-page .voice-input-secret-input {
+        -webkit-text-security: disc;
+      }
+
+      .settings-list-page .voice-input-secret-input::placeholder {
+        -webkit-text-security: none;
+        color: var(--tc-surface-low);
+        opacity: 1;
+      }
+
+      .settings-list-page .voice-input-token-status {
+        text-align: left;
+        overflow-wrap: anywhere;
+      }
+
+      .settings-list-page .voice-input-sample-player {
+        display: block;
+        width: 100%;
+        max-width: 520px;
+        height: 44px;
+      }
+
+      .settings-list-page .voice-input-sample-expected {
+        display: inline-block;
+        margin-left: 4px;
+      }
+
+      .settings-list-page .voice-input-warning {
+        color: var(--danger, #c53030);
+        font-weight: 700;
+      }
+
+      .settings-list-page .host-voice-input-toggle:disabled {
+        cursor: not-allowed;
+      }
+
+      .settings-list-page .voice-input-usage-summary {
+        display: grid;
+        gap: 8px;
+        margin-top: 14px;
+        padding-top: 14px;
+        border-top: 1px solid var(--line);
+        color: var(--ink);
+        font-size: 13px;
+        line-height: 1.45;
+      }
+
+      .settings-list-page .voice-input-usage-summary.hidden {
+        display: none;
+      }
+
+      .settings-list-page .voice-input-usage-detail-link {
+        justify-self: start;
+        min-height: 38px;
+        padding: 6px 0;
+        border: 0;
+        color: var(--accent-strong, #0b6f64);
+        background: transparent;
+        font-weight: 800;
+      }
+
+      .voice-input-usage-page {
+        width: min(100%, 920px);
+        margin: 0 auto;
+      }
+
+      .voice-input-usage-table-wrap {
+        width: 100%;
+        overflow-x: auto;
+        border: 1px solid var(--line);
+        border-radius: 8px;
+        background: #fff;
+      }
+
+      .voice-input-usage-table {
+        width: 100%;
+        min-width: 680px;
+        border-collapse: collapse;
+        color: var(--ink);
+        font-size: 14px;
+      }
+
+      .voice-input-usage-table th,
+      .voice-input-usage-table td {
+        padding: 12px 14px;
+        border-bottom: 1px solid var(--line);
+        text-align: right;
+        white-space: nowrap;
+      }
+
+      .voice-input-usage-table th:first-child,
+      .voice-input-usage-table td:first-child {
+        text-align: left;
+      }
+
+      .voice-input-usage-table thead th {
+        background: #f3eee6;
+        font-size: 12px;
+        font-weight: 850;
+        text-transform: uppercase;
+      }
+
+      .voice-input-usage-table tbody th {
+        font-weight: 750;
+      }
+
+      .voice-input-usage-table tbody tr:last-child th,
+      .voice-input-usage-table tbody tr:last-child td {
+        border-bottom: 0;
+      }
+
       .settings-list-page .field {
         padding: 14px;
         border: 1px solid var(--line);
@@ -8496,6 +8607,16 @@
                               </button>
                             </div>
                             <div class="field-hint" id="runtime-hint"></div>
+                            <button
+                              id="create-provider-retry-btn"
+                              class="btn-ghost btn-compact hidden"
+                              type="button"
+                              onClick=${call(
+                                "retryHostPreferencesProviderSection"
+                              )}
+                            >
+                              Retry
+                            </button>
                           </div>
                         </div>
                         <label
@@ -8659,6 +8780,13 @@
                               data-session-setup-web-shared="web.enabled"
                             />
                           </label>
+                          <div
+                            id="create-website-authority-hint"
+                            class="field-hint field-warning"
+                          >
+                            Website is available only for agents in the Browser
+                            Root.
+                          </div>
                         </div>
                         <label
                           class="kv-label"
@@ -9109,6 +9237,168 @@
                         </div>
                       </div>
                     </section>
+                    <section class="table-panel">
+                      <div class="table-title">
+                        <div class="table-title-main">
+                          <strong id="host-voice-input-title">
+                            Voice Input
+                          </strong>
+                          <div class="table-title-copy">
+                            Record from the Chat composer and append a GPT-4o
+                            transcript for review before sending.
+                          </div>
+                        </div>
+                        <span class="pill" id="host-voice-input-state-pill">
+                          Disabled
+                        </span>
+                      </div>
+                      <div class="kv-table">
+                        <div class="kv-label">OpenAI API Token</div>
+                        <div class="kv-value">
+                          <div class="value-stack">
+                            <div class="control-cell">
+                              <input
+                                id="host-voice-input-token"
+                                class="voice-input-secret-input"
+                                type="text"
+                                inputmode="text"
+                                autocomplete="off"
+                                autocapitalize="none"
+                                autocorrect="off"
+                                spellcheck=${false}
+                                placeholder="Enter a new token"
+                              />
+                              <button
+                                class="btn-primary btn-compact"
+                                id="host-voice-input-discard-token-draft-btn"
+                                type="button"
+                                onClick=${call(
+                                  "discardHostVoiceInputTokenDraft"
+                                )}
+                              >
+                                Discard New Token
+                              </button>
+                              <button
+                                class="btn-primary btn-compact"
+                                id="host-voice-input-remove-saved-token-btn"
+                                type="button"
+                                onClick=${call(
+                                  "removeHostVoiceInputSavedToken"
+                                )}
+                              >
+                                Remove Saved Token
+                              </button>
+                            </div>
+                            <div
+                              class="field-hint mono-path voice-input-token-status"
+                              id="host-voice-input-token-status"
+                            >
+                              No token saved.
+                            </div>
+                            <div
+                              class="field-hint voice-input-warning"
+                              id="host-voice-input-client-warning"
+                            ></div>
+                          </div>
+                        </div>
+                        <div class="kv-label">Sample</div>
+                        <div class="kv-value">
+                          <div class="value-stack">
+                            <audio
+                              class="voice-input-sample-player"
+                              id="host-voice-input-sample-player"
+                              controls
+                              preload="metadata"
+                            ></audio>
+                            <div
+                              class="field-hint"
+                              id="host-voice-input-sample-status"
+                            ></div>
+                            <div class="field-hint">
+                              <strong>Expected transcript:</strong>
+                              <span
+                                class="voice-input-sample-expected"
+                                id="host-voice-input-sample-expected"
+                              >
+                                How much money can I withdraw per day from the
+                                ATM?
+                              </span>
+                            </div>
+                            <div class="toolbar">
+                              <button
+                                class="btn-primary"
+                                id="host-voice-input-test-btn"
+                                type="button"
+                                onClick=${call("testHostVoiceInput")}
+                              >
+                                Test &amp; Save Token
+                              </button>
+                            </div>
+                            <div
+                              class="field-hint"
+                              id="host-voice-input-test-status"
+                            ></div>
+                            <div
+                              class="mono-path"
+                              id="host-voice-input-test-transcript"
+                            ></div>
+                          </div>
+                        </div>
+                        <div class="kv-label">Availability</div>
+                        <div class="kv-value settings-checkbox-row-value">
+                          <div class="toggle-row">
+                            <span>
+                              <strong>Enable Voice Input</strong>
+                              <div
+                                class="field-hint"
+                                id="host-voice-input-availability"
+                              >
+                                Test and save a valid OpenAI API token first.
+                              </div>
+                            </span>
+                            <button
+                              class="scheduler-row-toggle host-voice-input-toggle"
+                              id="host-voice-input-enabled-toggle"
+                              type="button"
+                              role="switch"
+                              aria-checked="false"
+                              aria-disabled="true"
+                              aria-label="Enable Voice Input"
+                              onClick=${call("toggleHostVoiceInputEnabled")}
+                            >
+                              <span aria-hidden="true"></span>
+                            </button>
+                          </div>
+                          <div
+                            class="field-hint voice-input-warning"
+                            id="host-voice-input-enable-warning"
+                          >
+                            Test and save a valid OpenAI API token before
+                            enabling Voice Input.
+                          </div>
+                          <div
+                            class="voice-input-usage-summary hidden"
+                            id="host-voice-input-usage-summary"
+                          >
+                            <div id="host-voice-input-usage-24h"></div>
+                            <div id="host-voice-input-usage-7d"></div>
+                            <div id="host-voice-input-usage-30d"></div>
+                            <div
+                              class="field-hint voice-input-warning hidden"
+                              id="host-voice-input-usage-error"
+                            ></div>
+                            <button
+                              class="btn-ghost voice-input-usage-detail-link"
+                              id="host-voice-input-usage-detail-btn"
+                              type="button"
+                              onClick=${call("openHostVoiceInputUsageDetail")}
+                            >
+                              View Usage Stats Detail
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </section>
                     <section class="table-panel">
                       <div class="table-title">
                         <div class="table-title-main">
@@ -9785,6 +10075,55 @@
           `;
         }
 
+        function VoiceInputUsageView() {
+          return html`
+            <section
+              id="voice-input-usage-view"
+              class="view view-page-scroll"
+              data-oysterun-voice-input-usage-page="true"
+            >
+              <div class="page-screen">
+                <section class="panel page-form-panel voice-input-usage-page">
+                  <div
+                    class="field-hint"
+                    id="voice-input-usage-generated-at"
+                  ></div>
+                  <div
+                    class="error-box hidden"
+                    id="voice-input-usage-error"
+                  ></div>
+                  <div
+                    class="voice-input-usage-table-wrap"
+                    id="voice-input-usage-table-wrap"
+                  >
+                    <table class="voice-input-usage-table">
+                      <thead>
+                        <tr>
+                          <th scope="col">Metric</th>
+                          <th scope="col">24 hours</th>
+                          <th scope="col">7 days</th>
+                          <th scope="col">30 days</th>
+                        </tr>
+                      </thead>
+                      <tbody id="voice-input-usage-table-body"></tbody>
+                    </table>
+                  </div>
+                  <div class="toolbar">
+                    <button
+                      class="btn-primary hidden"
+                      id="voice-input-usage-retry-btn"
+                      type="button"
+                      onClick=${call("retryHostVoiceInputUsage")}
+                    >
+                      Retry
+                    </button>
+                  </div>
+                </section>
+              </div>
+            </section>
+          `;
+        }
+
         function ChangePasswordView() {
           return html`
             <section id="change-password-view" class="view view-page-scroll">
@@ -10573,19 +10912,6 @@ Terminal output will appear here.</pre
                               class="session-profile-action-stack"
                               data-session-profile-action-block="session_identity"
                             >
-                              <label
-                                class="toggle-row"
-                                data-session-profile-identity-update-config-row="session_identity"
-                              >
-                                <span>
-                                  <strong>Update .oysterun/config.json</strong>
-                                </span>
-                                <input
-                                  id="agent-profile-identity-update-config"
-                                  type="checkbox"
-                                  data-session-profile-update-config="session_identity"
-                                />
-                              </label>
                               <button
                                 class="btn-secondary session-profile-save-row"
                                 id="agent-profile-identity-save-btn"
@@ -11399,6 +11725,7 @@ Waiting for Claude login output…</pre
                         <${SessionLoopView} />
 		                    <${SessionSetupView} />
 		                    <${HostPreferencesView} />
+                        <${VoiceInputUsageView} />
 		                    <${ChangePasswordView} />
 	                      <${TerminalView} />
 		                    <${FolderPickerView} />
@@ -13325,6 +13652,12 @@ Waiting for Claude login output…</pre
       let lastCreateStartActivationAt = 0;
       let createFormPreferenceVersion = 0;
       let latestCreateFolderConfigRequestId = 0;
+      let createWebsiteAuthorityState = {
+        folderPath: "",
+        projectId: "",
+        eligible: false,
+        reason: "Website is available only for agents in the Browser Root.",
+      };
       let createFormDraftRouteKey = "";
       let createSubmitState = {
         inFlight: false,
@@ -13375,8 +13708,37 @@ Waiting for Claude login output…</pre
         preview: null,
         roots: {},
       };
+      const PROVIDER_CATALOG_STATUS_UNKNOWN = "unknown";
+      const PROVIDER_CATALOG_STATUS_PENDING = "pending";
+      const PROVIDER_CATALOG_STATUS_READY = "ready";
+      const PROVIDER_CATALOG_STATUS_UNAVAILABLE = "unavailable";
+      const PROVIDER_CATALOG_STATUS_REQUEST_FAILED = "request_failed";
+
+      function getProviderCatalogStatusForProviders(providers) {
+        return providers.some(
+          (entry) =>
+            entry.commandAvailable === true && entry.runtimeSupported === true
+        )
+          ? PROVIDER_CATALOG_STATUS_READY
+          : PROVIDER_CATALOG_STATUS_UNAVAILABLE;
+      }
+
+      function isProviderCatalogInitialPending() {
+        return (
+          providerCatalogState.status === PROVIDER_CATALOG_STATUS_UNKNOWN ||
+          providerCatalogState.status === PROVIDER_CATALOG_STATUS_PENDING
+        );
+      }
+
+      function isProviderCatalogRequestFailed() {
+        return (
+          providerCatalogState.status === PROVIDER_CATALOG_STATUS_REQUEST_FAILED
+        );
+      }
+
       function createProviderCatalogState() {
         return {
+          status: PROVIDER_CATALOG_STATUS_UNKNOWN,
           loaded: false,
           loading: false,
           error: "",
@@ -13446,6 +13808,7 @@ Waiting for Claude login output…</pre
         notificationSoundWebEnabled = true,
         notificationSoundAppEnabled = true,
         dailyTelemetryEnabled = false,
+        voiceInputEnabled = false,
         defaultWebsiteAccess = HOST_DEFAULT_SESSION_DEFAULTS.web.access,
         defaultNotificationsEnabled = HOST_DEFAULT_SESSION_DEFAULTS
           .notifications.enabled,
@@ -13472,6 +13835,7 @@ Waiting for Claude login output…</pre
           notificationSoundWebEnabled,
           notificationSoundAppEnabled,
           dailyTelemetryEnabled,
+          voiceInputEnabled,
           defaultWebsiteAccess,
           defaultNotificationsEnabled,
           defaultRuntimeCapabilities: normalizeRuntimeCapabilityState(
@@ -13503,6 +13867,34 @@ Waiting for Claude login output…</pre
           dailyTelemetryEnabled: false,
           dailyTelemetryConsentRecordedAt: "",
           dailyTelemetryHostIdPresent: false,
+          voiceInputEnabled: false,
+          voiceInputAvailable: false,
+          voiceInputCanEnable: false,
+          voiceInputTokenConfigured: false,
+          voiceInputTokenValidated: false,
+          voiceInputTokenMasked: "",
+          voiceInputTokenDraft: "",
+          voiceInputValidatedAt: "",
+          voiceInputValidatedModel: "",
+          voiceInputValidatedSampleExact: null,
+          voiceInputModel: "gpt-4o-transcribe",
+          voiceInputSampleExpected:
+            "How much money can I withdraw per day from the ATM?",
+          voiceInputSampleLoading: false,
+          voiceInputSampleLoaded: false,
+          voiceInputSampleError: "",
+          voiceInputTestRunning: false,
+          voiceInputTokenClearing: false,
+          voiceInputTestStatus: "",
+          voiceInputTestError: "",
+          voiceInputTestTranscript: "",
+          voiceInputTestLatencyMs: null,
+          voiceInputNativeAppVersion: "",
+          voiceInputNativeAppVersionLoaded: false,
+          voiceInputUsage: null,
+          voiceInputUsageLoading: false,
+          voiceInputUsageLoaded: false,
+          voiceInputUsageError: "",
           defaultWebsiteAccess: HOST_DEFAULT_SESSION_DEFAULTS.web.access,
           defaultNotificationsEnabled:
             HOST_DEFAULT_SESSION_DEFAULTS.notifications.enabled,
@@ -13576,6 +13968,7 @@ Waiting for Claude login output…</pre
         };
       }
       let providerCatalogState = createProviderCatalogState();
+      let providerCatalogLoadPromise = null;
       let providerModelRefreshState = {
         provider: "",
         refreshing: false,
@@ -13601,6 +13994,10 @@ Waiting for Claude login output…</pre
       let browserSurfaceState = createBrowserSurfaceState();
       let browserSurfaceLaunchRequestId = 0;
       let hostPreferencesState = createHostPreferencesState();
+      let hostVoiceInputSampleObjectUrl = "";
+      let hostVoiceInputSampleLoadPromise = null;
+      let hostVoiceInputNativeAppVersionLoadPromise = null;
+      let hostVoiceInputUsageLoadPromise = null;
       let hostRestartHandoffTimer = null;
       let hostRestartLoginGatePollTimer = null;
       let hostRestartLoginGatePollGeneration = 0;
@@ -14026,6 +14423,7 @@ Waiting for Claude login output…</pre
             $("host-notification-app-sound-toggle")?.checked !== false,
           dailyTelemetryEnabled:
             $("host-daily-telemetry-toggle")?.checked === true,
+          voiceInputEnabled: getHostVoiceInputEnabledControlValue(),
           defaultWebsiteAccess: hostPreferencesState.defaultWebsiteAccess,
           defaultNotificationsEnabled:
             $("host-default-notifications-enabled")?.checked !== false,
@@ -14080,6 +14478,7 @@ Waiting for Claude login output…</pre
           notificationSoundWebEnabled: draft.notificationSoundWebEnabled,
           notificationSoundAppEnabled: draft.notificationSoundAppEnabled,
           dailyTelemetryEnabled: draft.dailyTelemetryEnabled,
+          voiceInputEnabled: draft.voiceInputEnabled,
           defaultWebsiteAccess: draft.defaultWebsiteAccess,
           defaultNotificationsEnabled: draft.defaultNotificationsEnabled,
           defaultRuntimeCapabilities: normalizeRuntimeCapabilityState(
@@ -14112,6 +14511,7 @@ Waiting for Claude login output…</pre
           a.notificationSoundWebEnabled === b.notificationSoundWebEnabled &&
           a.notificationSoundAppEnabled === b.notificationSoundAppEnabled &&
           a.dailyTelemetryEnabled === b.dailyTelemetryEnabled &&
+          a.voiceInputEnabled === b.voiceInputEnabled &&
           a.defaultWebsiteAccess === b.defaultWebsiteAccess &&
           a.defaultNotificationsEnabled === b.defaultNotificationsEnabled &&
           JSON.stringify(a.defaultRuntimeCapabilities) ===
@@ -14171,6 +14571,7 @@ Waiting for Claude login output…</pre
         const normalized = normalizeClientRoute(route);
         return (
           normalized.screen === "host-preferences" ||
+          normalized.screen === "voice-input-usage" ||
           (normalized.screen === "folder-picker" &&
             normalized.targetInputId === HOST_PREFERENCES_FOLDER_PICKER_TARGET)
         );
@@ -14186,6 +14587,8 @@ Waiting for Claude login output…</pre
           defaultBrowsePath: savedDraft.defaultBrowsePath,
           notificationSoundWebEnabled: savedDraft.notificationSoundWebEnabled,
           notificationSoundAppEnabled: savedDraft.notificationSoundAppEnabled,
+          dailyTelemetryEnabled: savedDraft.dailyTelemetryEnabled,
+          voiceInputEnabled: savedDraft.voiceInputEnabled,
           defaultWebsiteAccess: savedDraft.defaultWebsiteAccess,
           defaultNotificationsEnabled: savedDraft.defaultNotificationsEnabled,
           defaultRuntimeCapabilities: normalizeRuntimeCapabilityState(
@@ -14221,6 +14624,7 @@ Waiting for Claude login output…</pre
         const normalized = normalizeClientRoute(route);
         return (
           normalized.screen === "host-preferences" ||
+          normalized.screen === "voice-input-usage" ||
           normalized.screen === "agent-profile"
         );
       }
@@ -14229,6 +14633,14 @@ Waiting for Claude login output…</pre
         const current = normalizeClientRoute(currentRoute);
         const next = normalizeClientRoute(nextRoute);
         if (current.screen === next.screen) return true;
+        if (
+          (current.screen === "host-preferences" &&
+            next.screen === "voice-input-usage") ||
+          (current.screen === "voice-input-usage" &&
+            next.screen === "host-preferences")
+        ) {
+          return true;
+        }
         if (
           current.screen === "host-preferences" &&
           next.screen === "folder-picker" &&
@@ -14340,11 +14752,8 @@ Waiting for Claude login output…</pre
           liveSession.sessionName || liveSession.session_name || ""
         ).trim();
         const draftName = String(agentProfileRenameState.draft || "").trim();
-        const updateConfig =
-          $("agent-profile-identity-update-config")?.checked === true;
         return (
           agentProfileRenameState.dirty === true ||
-          updateConfig === true ||
           (Boolean(draftName) && draftName !== currentName)
         );
       }
@@ -14384,7 +14793,10 @@ Waiting for Claude login output…</pre
 
       function getP75DirtyFormState() {
         const current = normalizeClientRoute(getCurrentRoute());
-        if (current.screen === "host-preferences") {
+        if (
+          current.screen === "host-preferences" ||
+          current.screen === "voice-input-usage"
+        ) {
           return hasUnsavedHostPreferencesChanges()
             ? {
                 screen: "host-preferences",
@@ -15124,6 +15536,9 @@ Waiting for Claude login output…</pre
       // topbar/back handlers execute a declared route map instead of browser history.
       function getFallbackRoute(route = currentRoute) {
         const normalized = normalizeClientRoute(route);
+        if (normalized.screen === "voice-input-usage") {
+          return buildSettingsRoute();
+        }
         if (normalized.screen === "file-preview") {
           // Source-aware File Preview routes return to their validated source first.
           // Direct or invalid routes still fall back to the containing Explorer.
@@ -15184,6 +15599,7 @@ Waiting for Claude login output…</pre
         const normalized = normalizeClientRoute(route);
         return (
           normalized.screen === "chat" ||
+          normalized.screen === "voice-input-usage" ||
           normalized.screen === "file-preview" ||
           (normalized.screen === "mail" && Boolean(normalized.mailId)) ||
           (normalized.screen === "folder-picker" &&
@@ -19213,12 +19629,13 @@ Waiting for Claude login output…</pre
         entry,
         providerId,
         commandAvailable,
+        authSupported,
         canStartLogin
       ) {
         if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
           return {
             provider: providerId,
-            supported: false,
+            supported: authSupported,
             canStartLogin,
             state: "unknown",
             message: "",
@@ -19316,6 +19733,7 @@ Waiting for Claude login output…</pre
             entry.auth_status,
             providerId,
             entry.command_available === true,
+            entry.auth_supported === true,
             entry.auth_start_supported === true
           ),
           modelCatalogStatus:
@@ -19426,6 +19844,20 @@ Waiting for Claude login output…</pre
         return getProviderCatalogEntry(providerId)?.commandAvailable === true;
       }
 
+      function describeProviderCommandAvailability(providerId) {
+        if (isProviderCatalogInitialPending()) {
+          return "Checking availability on this Host...";
+        }
+        if (isProviderCatalogRequestFailed()) {
+          return "Could not load availability. Retry the provider check.";
+        }
+        return isProviderAvailable(providerId)
+          ? "Available on this Host."
+          : `Unavailable on this Host. Blank disables ${getProviderDisplayLabel(
+              providerId
+            )} explicitly.`;
+      }
+
       function getProviderAuthStatus(providerId) {
         return getProviderCatalogEntry(providerId)?.authStatus || null;
       }
@@ -19441,6 +19873,7 @@ Waiting for Claude login output…</pre
                     nextStatus,
                     providerId,
                     entry.commandAvailable === true,
+                    entry.authSupported === true,
                     entry.authStartSupported === true
                   ),
                 }
@@ -19478,7 +19911,12 @@ Waiting for Claude login output…</pre
       function buildDefaultProviderWarning(
         savedProvider = hostPreferencesState.defaultProvider
       ) {
-        if (!savedProvider || isProviderAvailable(savedProvider)) {
+        if (
+          !savedProvider ||
+          isProviderCatalogInitialPending() ||
+          isProviderCatalogRequestFailed() ||
+          isProviderAvailable(savedProvider)
+        ) {
           return "";
         }
         const effectiveProvider =
@@ -21160,6 +21598,10 @@ Waiting for Claude login output…</pre
         return normalizeClientRoute({ screen: "host-preferences" });
       }
 
+      function buildVoiceInputUsageRoute() {
+        return normalizeClientRoute({ screen: "voice-input-usage" });
+      }
+
       function buildChangePasswordRoute() {
         return normalizeClientRoute({ screen: "change-password" });
       }
@@ -21424,6 +21866,9 @@ Waiting for Claude login output…</pre
         if (screen === "host-preferences") {
           return { screen: "host-preferences", warning };
         }
+        if (screen === "voice-input-usage") {
+          return { screen: "voice-input-usage", warning };
+        }
         if (screen === "change-password") {
           return { screen: "change-password", warning };
         }
@@ -21655,6 +22100,9 @@ Waiting for Claude login output…</pre
         if (pathname === "/app/settings") {
           return buildSettingsRoute();
         }
+        if (pathname === "/app/host-preferences/voice-input-usage") {
+          return buildVoiceInputUsageRoute();
+        }
         if (pathname === "/app/change-password") {
           return buildChangePasswordRoute();
         }
@@ -21782,6 +22230,8 @@ Waiting for Claude login output…</pre
           }
         } else if (normalized.screen === "host-preferences") {
           url.pathname = "/app/settings";
+        } else if (normalized.screen === "voice-input-usage") {
+          url.pathname = "/app/host-preferences/voice-input-usage";
         } else if (normalized.screen === "change-password") {
           url.pathname = "/app/change-password";
         } else if (normalized.screen === "terminal") {
@@ -22013,6 +22463,12 @@ Waiting for Claude login output…</pre
           }
         } else if (normalized.screen === "host-preferences") {
           renderHostPreferences();
+          if (hostPreferencesState.voiceInputEnabled) {
+            void loadHostVoiceInputUsage({ force: true });
+          }
+        } else if (normalized.screen === "voice-input-usage") {
+          renderHostVoiceInputUsageDetail();
+          await loadHostVoiceInputUsage();
         } else if (normalized.screen === "change-password") {
           renderChangePasswordView();
         } else if (normalized.screen === "terminal") {
@@ -24974,6 +25430,7 @@ Waiting for Claude login output…</pre
         explorer: "file_explorer",
         "session-setup": "session_setup",
         "host-preferences": "host_preferences",
+        "voice-input-usage": "host_preferences",
         terminal: "terminal",
         "folder-picker": "file_explorer",
         "file-preview": "file_preview",
@@ -26803,6 +27260,7 @@ Waiting for Claude login output…</pre
       function renderAgentProfileWebsiteAccessRow(liveSession) {
         syncAgentProfileWebsiteAccessSession(liveSession);
         const website = getLiveSessionWebsite(liveSession);
+        const websiteAuthorized = website?.browser_root_authorized === true;
         const enabled = website?.enabled === true;
         const access = normalizeAgentWebAccess(website?.access);
         const websitePassword = getOwnerVisibleWebsitePassword(website);
@@ -26836,16 +27294,27 @@ Waiting for Claude login output…</pre
                 type="checkbox"
                 data-session-profile-web-enabled="web.enabled"
                 ${enabled ? "checked" : ""}
-                ${saving ? "disabled" : ""}
+                ${saving || !websiteAuthorized ? "disabled" : ""}
               />
             </label>
+            ${
+              websiteAuthorized
+                ? ""
+                : `<div
+                    class="field-hint field-warning"
+                    data-session-profile-website-authority="outside_browser_root"
+                  >${esc(
+                    website?.reason_message ||
+                      "Website is available only for agents in the Browser Root."
+                  )}</div>`
+            }
             <label class="field compact-field" for="agent-profile-website-access">
               <span>Access</span>
               <select
                 id="agent-profile-website-access"
                 data-session-profile-web-access="web.access"
                 onchange="window.syncAgentProfileWebsitePasswordMode && window.syncAgentProfileWebsitePasswordMode()"
-                ${saving ? "disabled" : ""}
+                ${saving || !websiteAuthorized ? "disabled" : ""}
               >${renderAgentWebAccessOptions(access)}</select>
             </label>
             <label
@@ -26863,7 +27332,11 @@ Waiting for Claude login output…</pre
                 value="${esc(websitePassword)}"
                 data-session-profile-web-local="web.password"
                 oninput="window.syncAgentProfileWebsitePasswordMode && window.syncAgentProfileWebsitePasswordMode()"
-                ${access === "password" && !saving ? "" : "disabled"}
+                ${
+                  access === "password" && !saving && websiteAuthorized
+                    ? ""
+                    : "disabled"
+                }
               />
               <div
                 id="agent-profile-website-password-status"
@@ -26895,7 +27368,7 @@ Waiting for Claude login output…</pre
                 data-session-profile-save="website"
                 data-session-profile-web-access-save="explicit"
                 onclick="window.saveAgentProfileWebsiteAccess && window.saveAgentProfileWebsiteAccess()"
-                ${saving ? "disabled" : ""}
+                ${saving || !websiteAuthorized ? "disabled" : ""}
               >${saving ? "Saving..." : "Save"}</button>
             </div>
             ${
@@ -26914,6 +27387,9 @@ Waiting for Claude login output…</pre
       }
 
       function syncAgentProfileWebsitePasswordMode() {
+        const liveSession = getSelectedLiveSession();
+        const websiteAuthorized =
+          getLiveSessionWebsite(liveSession)?.browser_root_authorized === true;
         const access = normalizeAgentWebAccess(
           $("agent-profile-website-access")?.value
         );
@@ -26923,13 +27399,12 @@ Waiting for Claude login output…</pre
         const passwordMode = access === "password";
         if (row) row.classList.remove("hidden");
         if (input) {
-          input.disabled = !passwordMode;
+          input.disabled = !websiteAuthorized || !passwordMode;
         }
         if (status) {
-          status.textContent = formatOwnerWebsitePasswordHint(
-            access,
-            input?.value || ""
-          );
+          status.textContent = websiteAuthorized
+            ? formatOwnerWebsitePasswordHint(access, input?.value || "")
+            : "Website is available only for agents in the Browser Root.";
         }
       }
 
@@ -26938,6 +27413,19 @@ Waiting for Claude login output…</pre
         if (!liveSession?.sessionId) return;
         syncAgentProfileWebsiteAccessSession(liveSession);
         if (agentProfileWebsiteAccessState.saving === true) return;
+        const previousWebsite = getLiveSessionWebsite(liveSession);
+        if (previousWebsite?.browser_root_authorized !== true) {
+          agentProfileWebsiteAccessState = {
+            ...agentProfileWebsiteAccessState,
+            saving: false,
+            error:
+              previousWebsite?.reason_message ||
+              "Website is available only for agents in the Browser Root.",
+            status: "",
+          };
+          renderAgentProfileView();
+          return;
+        }
         const select = $("agent-profile-website-access");
         const updateConfig = true;
         const nextEnabled =
@@ -26947,7 +27435,6 @@ Waiting for Claude login output…</pre
           nextAccess === "password"
             ? String($("agent-profile-website-password")?.value || "").trim()
             : "";
-        const previousWebsite = getLiveSessionWebsite(liveSession);
         if (nextAccess === "password" && !nextWebsitePassword) {
           agentProfileWebsiteAccessState = {
             ...agentProfileWebsiteAccessState,
@@ -29566,6 +30053,12 @@ Waiting for Claude login output…</pre
             subtitle: "",
           };
         }
+        if (screen === "voice-input-usage") {
+          return {
+            title: "Voice Input Usage",
+            subtitle: "",
+          };
+        }
         if (screen === "change-password") {
           return {
             title: "Change Password",
@@ -29926,6 +30419,10 @@ Waiting for Claude login output…</pre
           "active",
           screen === "host-preferences"
         );
+        $("voice-input-usage-view").classList.toggle(
+          "active",
+          screen === "voice-input-usage"
+        );
         $("change-password-view").classList.toggle(
           "active",
           screen === "change-password"
@@ -29979,6 +30476,14 @@ Waiting for Claude login output…</pre
         }
         if (screen === "host-preferences") {
           renderHostPreferences();
+        } else if (
+          hostPreferencesState.voiceInputSampleLoaded ||
+          hostVoiceInputSampleObjectUrl
+        ) {
+          releaseHostVoiceInputSampleAudio();
+        }
+        if (screen === "voice-input-usage") {
+          renderHostVoiceInputUsageDetail();
         }
         if (screen === "change-password") {
           renderChangePasswordView();
@@ -30008,6 +30513,10 @@ Waiting for Claude login output…</pre
           void navigateToRoute(buildSettingsRoute());
           return;
         }
+        if (entry.screen === "voice-input-usage") {
+          void navigateToRoute(buildVoiceInputUsageRoute());
+          return;
+        }
         if (entry.screen === "change-password") {
           void navigateToRoute(buildChangePasswordRoute());
           return;
@@ -34274,6 +34783,11 @@ Waiting for Claude login output…</pre
         const notificationSoundAppEnabled =
           data.notification_sound_app_enabled !== false;
         const dailyTelemetryEnabled = data.daily_telemetry_enabled === true;
+        const voiceInput =
+          data.voice_input && typeof data.voice_input === "object"
+            ? data.voice_input
+            : {};
+        const voiceInputEnabled = voiceInput.enabled === true;
         const debugShowCapabilityUi = data.debug_show_capability_ui === true;
         const showInterfaceStyleInSessionSetupProfile =
           data.show_interface_style_in_session_setup_profile === true;
@@ -34310,6 +34824,7 @@ Waiting for Claude login output…</pre
           notificationSoundWebEnabled,
           notificationSoundAppEnabled,
           dailyTelemetryEnabled,
+          voiceInputEnabled,
           defaultWebsiteAccess: normalizeAgentWebAccess(webDefaults.access),
           defaultNotificationsEnabled: notificationDefaults.enabled !== false,
           defaultRuntimeCapabilities: runtimeCapabilityDefaults,
@@ -34366,6 +34881,42 @@ Waiting for Claude login output…</pre
               : "",
           dailyTelemetryHostIdPresent:
             data.daily_telemetry_host_id_present === true,
+          voiceInputEnabled,
+          voiceInputAvailable: voiceInput.available === true,
+          voiceInputCanEnable: voiceInput.can_enable === true,
+          voiceInputTokenConfigured: voiceInput.token_configured === true,
+          voiceInputTokenValidated: voiceInput.token_validated === true,
+          voiceInputTokenMasked:
+            typeof voiceInput.token_masked === "string"
+              ? voiceInput.token_masked
+              : "",
+          voiceInputTokenDraft: "",
+          voiceInputValidatedAt:
+            typeof voiceInput.validated_at === "string"
+              ? voiceInput.validated_at
+              : "",
+          voiceInputValidatedModel:
+            typeof voiceInput.validated_model === "string"
+              ? voiceInput.validated_model
+              : "",
+          voiceInputValidatedSampleExact:
+            typeof voiceInput.validated_sample_exact === "boolean"
+              ? voiceInput.validated_sample_exact
+              : null,
+          voiceInputModel:
+            typeof voiceInput.model === "string"
+              ? voiceInput.model
+              : "gpt-4o-transcribe",
+          voiceInputSampleExpected:
+            typeof voiceInput.sample_expected === "string"
+              ? voiceInput.sample_expected
+              : "How much money can I withdraw per day from the ATM?",
+          voiceInputTestRunning: false,
+          voiceInputTokenClearing: false,
+          voiceInputTestStatus: "",
+          voiceInputTestError: "",
+          voiceInputTestTranscript: "",
+          voiceInputTestLatencyMs: null,
           defaultWebsiteAccess: normalizeAgentWebAccess(webDefaults.access),
           defaultNotificationsEnabled: notificationDefaults.enabled !== false,
           defaultRuntimeCapabilities: runtimeCapabilityDefaults,
@@ -34455,17 +35006,6 @@ Waiting for Claude login output…</pre
         });
         syncSessionSetupInterfaceStyleVisibility();
         renderCreateTelegramFeatureVisibility();
-        if (!providerCatalogState.loaded) {
-          providerCatalogState = {
-            ...providerCatalogState,
-            providers: KNOWN_PROVIDER_ORDER.map((providerId) => ({
-              id: providerId,
-              label: getProviderDisplayLabel(providerId),
-              commandAvailable: false,
-              runtimeSupported: true,
-            })),
-          };
-        }
         renderHostPreferences();
         setCreateRuntime(getEffectiveCreateRuntime(createRuntime), {
           preserveSelection: true,
@@ -34477,11 +35017,18 @@ Waiting for Claude login output…</pre
         const normalizedProviders = Array.isArray(data?.providers)
           ? data.providers.map(normalizeProviderCatalogEntry).filter(Boolean)
           : [];
+        const providers = normalizedProviders.map((entry) => {
+          const currentEntry = getProviderCatalogEntry(entry.id);
+          return currentEntry?.authStatus?.checkedAt
+            ? { ...entry, authStatus: currentEntry.authStatus }
+            : entry;
+        });
         providerCatalogState = {
+          status: getProviderCatalogStatusForProviders(providers),
           loaded: true,
           loading: false,
           error: "",
-          providers: normalizedProviders,
+          providers,
         };
         hostPreferencesState = {
           ...hostPreferencesState,
@@ -34502,36 +35049,50 @@ Waiting for Claude login output…</pre
         });
       }
 
-      async function loadProviderCatalog(opts = {}) {
-        if (providerCatalogState.loading) return;
+      function loadProviderCatalog(opts = {}) {
+        if (providerCatalogLoadPromise) return providerCatalogLoadPromise;
         providerCatalogState = {
           ...providerCatalogState,
+          status: providerCatalogState.loaded
+            ? providerCatalogState.status
+            : PROVIDER_CATALOG_STATUS_PENDING,
           loading: true,
           error: "",
         };
         renderHostPreferences();
-        try {
-          const data = await readDashboardProviderCatalog({
-            force: opts.force === true,
-          });
-          applyProviderCatalogData(data);
-        } catch (err) {
-          if (await handleHostPreferencesAuthFailure(err)) return;
-          providerCatalogState = {
-            ...providerCatalogState,
-            loading: false,
-            error: err.message || "Could not load provider status.",
-          };
-          renderHostPreferences();
-          if (opts.quiet !== true) {
-            showBanner(providerCatalogState.error, true);
+        renderCreateRuntimeAvailability();
+        providerCatalogLoadPromise = (async () => {
+          try {
+            const data = await readDashboardProviderCatalog({
+              force: opts.force === true,
+            });
+            applyProviderCatalogData(data);
+            return data;
+          } catch (err) {
+            if (await handleHostPreferencesAuthFailure(err)) return null;
+            providerCatalogState = {
+              ...providerCatalogState,
+              status: providerCatalogState.loaded
+                ? providerCatalogState.status
+                : PROVIDER_CATALOG_STATUS_REQUEST_FAILED,
+              loading: false,
+              error: err.message || "Could not load provider availability.",
+            };
+            renderHostPreferences();
+            renderCreateRuntimeAvailability();
+            if (opts.quiet !== true) {
+              showBanner(providerCatalogState.error, true);
+            }
+            return null;
+          } finally {
+            providerCatalogLoadPromise = null;
           }
-        }
+        })();
+        return providerCatalogLoadPromise;
       }
 
       function retryHostPreferencesProviderSection() {
-        if (providerCatalogState.loading) return;
-        void loadProviderCatalog({ force: true, quiet: true });
+        return loadProviderCatalog({ force: true, quiet: true });
       }
 
       function clearProviderAuthJobPollTimer() {
@@ -34703,7 +35264,6 @@ Waiting for Claude login output…</pre
             ? response.provider.trim()
             : "claude";
         if (response.provider_auth) {
-          invalidateDashboardDataCaches({ providers: true });
           setProviderCatalogAuthStatus(providerId, response.provider_auth);
         }
         providerAuthModalState = {
@@ -34715,6 +35275,7 @@ Waiting for Claude login output…</pre
                 response.provider_auth,
                 providerId,
                 getProviderCatalogEntry(providerId)?.commandAvailable === true,
+                getProviderCatalogEntry(providerId)?.authSupported === true,
                 getProviderCatalogEntry(providerId)?.authStartSupported === true
               )
             : getProviderAuthStatus(providerId),
@@ -34786,13 +35347,13 @@ Waiting for Claude login output…</pre
             "GET",
             `/provider-auth/status?provider=${encodeURIComponent(providerId)}`
           );
-          invalidateDashboardDataCaches({ providers: true });
           setProviderCatalogAuthStatus(providerId, data.provider_auth || null);
           if (providerAuthModalState.provider === providerId) {
             const normalizedStatus = normalizeProviderAuthStatus(
               data.provider_auth,
               providerId,
               getProviderCatalogEntry(providerId)?.commandAvailable === true,
+              getProviderCatalogEntry(providerId)?.authSupported === true,
               getProviderCatalogEntry(providerId)?.authStartSupported === true
             );
             providerAuthModalState = {
@@ -34961,6 +35522,7 @@ Waiting for Claude login output…</pre
               data.provider_auth,
               providerId,
               getProviderCatalogEntry(providerId)?.commandAvailable === true,
+              getProviderCatalogEntry(providerId)?.authSupported === true,
               getProviderCatalogEntry(providerId)?.authStartSupported === true
             ),
             job,
@@ -35646,7 +36208,11 @@ Waiting for Claude login output…</pre
         if (!availableProviderIds.length) {
           const option = document.createElement("option");
           option.value = "";
-          option.textContent = "No available providers";
+          option.textContent = isProviderCatalogInitialPending()
+            ? "Checking providers..."
+            : isProviderCatalogRequestFailed()
+            ? "Provider status unavailable"
+            : "No available providers";
           option.disabled = true;
           option.selected = true;
           select.appendChild(option);
@@ -35695,6 +36261,8 @@ Waiting for Claude login output…</pre
         );
         const runtimeLocked =
           isResumeMode() && Boolean(pendingResumeSourceRuntime);
+        const providerCatalogPending = isProviderCatalogInitialPending();
+        const providerCatalogFailed = isProviderCatalogRequestFailed();
         setVisible("runtime-claude", claudeVisible);
         setVisible("runtime-codex", codexVisible);
         setVisible("runtime-debug-fixture", debugFixtureVisible);
@@ -35740,6 +36308,26 @@ Waiting for Claude login output…</pre
         }
         refreshCreateStartButtonEnabled();
         applyCreateSessionSetupProofAttributes();
+        setVisible("create-provider-retry-btn", providerCatalogFailed);
+        $("create-provider-retry-btn")?.toggleAttribute(
+          "disabled",
+          providerCatalogState.loading
+        );
+        if (providerCatalogPending || providerCatalogFailed) {
+          if (modelSelect) {
+            modelSelect.innerHTML = "";
+            modelSelect.disabled = true;
+          }
+          $("claude-options").classList.add("hidden");
+          $("codex-options").classList.add("hidden");
+          if (runtimeHintEl) {
+            runtimeHintEl.textContent = providerCatalogFailed
+              ? "Could not load provider status. Retry the provider check."
+              : "Checking providers...";
+          }
+          renderCreateProviderAuthCard();
+          return;
+        }
         if (!visibleProviderIds.length) {
           if (modelSelect) {
             modelSelect.innerHTML = "";
@@ -35894,6 +36482,711 @@ Waiting for Claude login output…</pre
         };
       }
 
+      function getHostVoiceInputEnabledControlValue() {
+        return (
+          $("host-voice-input-enabled-toggle")?.getAttribute("aria-checked") ===
+          "true"
+        );
+      }
+
+      function setHostVoiceInputEnabledControlValue(enabled) {
+        const toggle = $("host-voice-input-enabled-toggle");
+        if (!toggle) return;
+        toggle.setAttribute("aria-checked", enabled ? "true" : "false");
+      }
+
+      function isHostVoiceInputTokenCandidateTestable(value) {
+        return typeof value === "string" && value.trim().length >= 10;
+      }
+
+      const OYSTERUN_VOICE_INPUT_MINIMUM_NATIVE_APP_VERSION = "1.6.0";
+
+      function parseOysterunNumericVersion(value) {
+        const match = String(value || "")
+          .trim()
+          .match(/^(\d+)(?:\.(\d+))?(?:\.(\d+))?$/);
+        if (!match) return null;
+        return [
+          Number.parseInt(match[1], 10),
+          Number.parseInt(match[2] || "0", 10),
+          Number.parseInt(match[3] || "0", 10),
+        ];
+      }
+
+      function isOysterunVersionBefore(value, minimum) {
+        const version = parseOysterunNumericVersion(value);
+        const required = parseOysterunNumericVersion(minimum);
+        if (!version || !required) return false;
+        for (let index = 0; index < required.length; index += 1) {
+          if (version[index] < required[index]) return true;
+          if (version[index] > required[index]) return false;
+        }
+        return false;
+      }
+
+      async function loadHostVoiceInputNativeAppVersion() {
+        if (!isOysterunCapacitorIOSRuntime()) {
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            voiceInputNativeAppVersion: "",
+            voiceInputNativeAppVersionLoaded: true,
+          };
+          return;
+        }
+        if (hostPreferencesState.voiceInputNativeAppVersionLoaded) return;
+        if (hostVoiceInputNativeAppVersionLoadPromise) {
+          return hostVoiceInputNativeAppVersionLoadPromise;
+        }
+        hostVoiceInputNativeAppVersionLoadPromise = (async () => {
+          let version = "";
+          const plugin = getOysterunCapacitorAppPlugin();
+          if (plugin) {
+            try {
+              const appInfo = await plugin.getInfo();
+              version =
+                typeof appInfo?.version === "string"
+                  ? appInfo.version.trim()
+                  : "";
+            } catch (err) {
+              console.warn(
+                "[oysterun-voice-input] native app version unavailable",
+                err
+              );
+            }
+          }
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            voiceInputNativeAppVersion: version,
+            voiceInputNativeAppVersionLoaded: true,
+          };
+          if (getCurrentScreen() === "host-preferences") {
+            renderHostVoiceInputPreferences({
+              disabled:
+                hostPreferencesState.loading || hostPreferencesState.saving,
+            });
+          }
+        })().finally(() => {
+          hostVoiceInputNativeAppVersionLoadPromise = null;
+        });
+        return hostVoiceInputNativeAppVersionLoadPromise;
+      }
+
+      function getHostVoiceInputClientWarning() {
+        if (isOysterunCapacitorIOSRuntime()) {
+          const appVersion =
+            hostPreferencesState.voiceInputNativeAppVersion || "";
+          if (
+            hostPreferencesState.voiceInputNativeAppVersionLoaded &&
+            isOysterunVersionBefore(
+              appVersion,
+              OYSTERUN_VOICE_INPUT_MINIMUM_NATIVE_APP_VERSION
+            )
+          ) {
+            return `Voice Input recording requires Oysterun App 1.6 or newer. This App is ${appVersion}. Update the App before using this feature.`;
+          }
+          const capacitor = window.Capacitor;
+          if (
+            typeof capacitor?.isPluginAvailable === "function" &&
+            capacitor.isPluginAvailable("OysterunVoiceRecorder")
+          ) {
+            return "";
+          }
+          return "This Oysterun app build does not include native voice recording. Token testing remains available here.";
+        }
+        if (window.isSecureContext !== true) {
+          return "Microphone recording requires HTTPS or a supported native app. Token testing remains available here.";
+        }
+        if (!navigator.mediaDevices?.getUserMedia) {
+          return "This browser does not expose microphone recording. Token testing remains available here.";
+        }
+        if (typeof MediaRecorder === "undefined") {
+          return "This browser does not support the required recorder. Token testing remains available here.";
+        }
+        return "";
+      }
+
+      function applyHostVoiceInputStatusPayload(
+        voiceInput,
+        { syncSavedDraft = true } = {}
+      ) {
+        if (!voiceInput || typeof voiceInput !== "object") return;
+        const voiceInputEnabled = voiceInput.enabled === true;
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputEnabled,
+          voiceInputAvailable: voiceInput.available === true,
+          voiceInputCanEnable: voiceInput.can_enable === true,
+          voiceInputTokenConfigured: voiceInput.token_configured === true,
+          voiceInputTokenValidated: voiceInput.token_validated === true,
+          voiceInputTokenMasked:
+            typeof voiceInput.token_masked === "string"
+              ? voiceInput.token_masked
+              : "",
+          voiceInputValidatedAt:
+            typeof voiceInput.validated_at === "string"
+              ? voiceInput.validated_at
+              : "",
+          voiceInputValidatedModel:
+            typeof voiceInput.validated_model === "string"
+              ? voiceInput.validated_model
+              : "",
+          voiceInputValidatedSampleExact:
+            typeof voiceInput.validated_sample_exact === "boolean"
+              ? voiceInput.validated_sample_exact
+              : null,
+          voiceInputModel:
+            typeof voiceInput.model === "string"
+              ? voiceInput.model
+              : hostPreferencesState.voiceInputModel,
+          voiceInputSampleExpected:
+            typeof voiceInput.sample_expected === "string"
+              ? voiceInput.sample_expected
+              : hostPreferencesState.voiceInputSampleExpected,
+          ...(syncSavedDraft
+            ? {
+                savedDraft: {
+                  ...(hostPreferencesState.savedDraft ||
+                    buildHostPreferencesDraft()),
+                  voiceInputEnabled,
+                },
+              }
+            : {}),
+        };
+      }
+
+      function releaseHostVoiceInputSampleAudio() {
+        const player = $("host-voice-input-sample-player");
+        if (player) {
+          player.pause();
+          player.removeAttribute("src");
+          player.load();
+        }
+        if (hostVoiceInputSampleObjectUrl) {
+          URL.revokeObjectURL(hostVoiceInputSampleObjectUrl);
+          hostVoiceInputSampleObjectUrl = "";
+        }
+        hostVoiceInputSampleLoadPromise = null;
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputSampleLoading: false,
+          voiceInputSampleLoaded: false,
+          voiceInputSampleError: "",
+        };
+      }
+
+      function ensureHostVoiceInputSampleAudio() {
+        if (
+          hostPreferencesState.voiceInputSampleLoaded ||
+          hostVoiceInputSampleLoadPromise
+        ) {
+          return hostVoiceInputSampleLoadPromise || Promise.resolve();
+        }
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputSampleLoading: true,
+          voiceInputSampleError: "",
+        };
+        hostVoiceInputSampleLoadPromise = (async () => {
+          try {
+            const response = await apiRawWithAuthRetry(
+              "GET",
+              "/dev/preferences/voice-input/sample"
+            );
+            const blob = await response.blob();
+            if (!blob.size) {
+              throw new Error("Voice Input sample audio is empty.");
+            }
+            if (hostVoiceInputSampleObjectUrl) {
+              URL.revokeObjectURL(hostVoiceInputSampleObjectUrl);
+            }
+            hostVoiceInputSampleObjectUrl = URL.createObjectURL(blob);
+            hostPreferencesState = {
+              ...hostPreferencesState,
+              voiceInputSampleLoading: false,
+              voiceInputSampleLoaded: true,
+              voiceInputSampleError: "",
+            };
+          } catch (err) {
+            if (await handleHostPreferencesAuthFailure(err)) return;
+            hostPreferencesState = {
+              ...hostPreferencesState,
+              voiceInputSampleLoading: false,
+              voiceInputSampleLoaded: false,
+              voiceInputSampleError:
+                err.message || "Could not load Voice Input sample audio.",
+            };
+          } finally {
+            hostVoiceInputSampleLoadPromise = null;
+            if (getCurrentScreen() === "host-preferences") {
+              renderHostVoiceInputPreferences({
+                disabled:
+                  hostPreferencesState.loading || hostPreferencesState.saving,
+              });
+            }
+          }
+        })();
+        return hostVoiceInputSampleLoadPromise;
+      }
+
+      function formatVoiceInputUsageTokens(value) {
+        const normalized = Number(value);
+        return Number.isFinite(normalized)
+          ? Math.max(0, Math.round(normalized)).toLocaleString("en-US")
+          : "0";
+      }
+
+      function formatVoiceInputUsageCost(value) {
+        const normalized = Number(value);
+        const usd = Number.isFinite(normalized)
+          ? Math.max(0, normalized) / 1_000_000_000
+          : 0;
+        return `US$${usd.toFixed(6)}`;
+      }
+
+      function formatVoiceInputUsageDuration(value) {
+        const milliseconds = Number(value);
+        if (!Number.isFinite(milliseconds) || milliseconds <= 0) return "0 s";
+        const seconds = milliseconds / 1000;
+        if (seconds < 60) return `${seconds.toFixed(seconds < 10 ? 1 : 0)} s`;
+        const minutes = seconds / 60;
+        if (minutes < 60) return `${minutes.toFixed(1)} min`;
+        return `${(minutes / 60).toFixed(1)} hr`;
+      }
+
+      function formatVoiceInputUsageSummary(label, windowStats) {
+        if (!windowStats) return `${label}: No usage data.`;
+        const unknownCostRequests = Number(
+          windowStats.unknown_cost_requests || 0
+        );
+        return `${label}: ${formatVoiceInputUsageTokens(
+          windowStats.total_tokens
+        )} tokens used · Estimated cost: ${formatVoiceInputUsageCost(
+          windowStats.estimated_cost_nano_usd
+        )}${
+          unknownCostRequests > 0
+            ? ` · ${unknownCostRequests.toLocaleString("en-US")} request${
+                unknownCostRequests === 1 ? "" : "s"
+              } not included`
+            : ""
+        }`;
+      }
+
+      function renderHostVoiceInputUsageSummary() {
+        const container = $("host-voice-input-usage-summary");
+        if (!container) return;
+        const enabled = hostPreferencesState.voiceInputEnabled === true;
+        container.classList.toggle("hidden", !enabled);
+        if (!enabled) return;
+        const usage = hostPreferencesState.voiceInputUsage;
+        const loading =
+          hostPreferencesState.voiceInputUsageLoading === true && !usage;
+        const error = hostPreferencesState.voiceInputUsageError || "";
+        setText(
+          "host-voice-input-usage-24h",
+          loading
+            ? "Last 24 hours: Loading usage..."
+            : formatVoiceInputUsageSummary(
+                "Last 24 hours",
+                usage?.windows?.["24h"]
+              )
+        );
+        setText(
+          "host-voice-input-usage-7d",
+          loading
+            ? "Last 7 days: Loading usage..."
+            : formatVoiceInputUsageSummary(
+                "Last 7 days",
+                usage?.windows?.["7d"]
+              )
+        );
+        setText(
+          "host-voice-input-usage-30d",
+          loading
+            ? "Last 30 days: Loading usage..."
+            : formatVoiceInputUsageSummary(
+                "Last 30 days",
+                usage?.windows?.["30d"]
+              )
+        );
+        setText("host-voice-input-usage-error", error);
+        $("host-voice-input-usage-error")?.classList.toggle("hidden", !error);
+        $("host-voice-input-usage-detail-btn")?.toggleAttribute(
+          "disabled",
+          loading
+        );
+      }
+
+      function getVoiceInputUsageDetailRows(usage) {
+        const windows = ["24h", "7d", "30d"].map(
+          (windowId) => usage?.windows?.[windowId] || {}
+        );
+        return [
+          [
+            "Requests",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.request_count)
+            ),
+          ],
+          [
+            "Successful transcriptions",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.successful_transcriptions)
+            ),
+          ],
+          [
+            "Failed requests",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.failed_requests)
+            ),
+          ],
+          [
+            "Token tests",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.token_tests)
+            ),
+          ],
+          [
+            "Recorded audio",
+            ...windows.map((item) =>
+              formatVoiceInputUsageDuration(item.recorded_duration_ms)
+            ),
+          ],
+          [
+            "Input tokens",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.input_tokens)
+            ),
+          ],
+          [
+            "Output tokens",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.output_tokens)
+            ),
+          ],
+          [
+            "Total tokens",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.total_tokens)
+            ),
+          ],
+          [
+            "Average provider latency",
+            ...windows.map((item) =>
+              item.average_provider_latency_ms === null ||
+              item.average_provider_latency_ms === undefined
+                ? "--"
+                : `${formatVoiceInputUsageTokens(
+                    item.average_provider_latency_ms
+                  )} ms`
+            ),
+          ],
+          [
+            "Estimated cost",
+            ...windows.map((item) =>
+              formatVoiceInputUsageCost(item.estimated_cost_nano_usd)
+            ),
+          ],
+          [
+            "Requests not included in cost",
+            ...windows.map((item) =>
+              formatVoiceInputUsageTokens(item.unknown_cost_requests)
+            ),
+          ],
+        ];
+      }
+
+      function renderHostVoiceInputUsageDetail() {
+        const usage = hostPreferencesState.voiceInputUsage;
+        const loading = hostPreferencesState.voiceInputUsageLoading === true;
+        const error = hostPreferencesState.voiceInputUsageError || "";
+        setText(
+          "voice-input-usage-generated-at",
+          usage?.generated_at
+            ? `Updated ${new Date(usage.generated_at).toLocaleString()}`
+            : loading
+            ? "Loading usage..."
+            : ""
+        );
+        setText("voice-input-usage-error", error);
+        $("voice-input-usage-error")?.classList.toggle("hidden", !error);
+        $("voice-input-usage-retry-btn")?.classList.toggle("hidden", !error);
+        const tableWrap = $("voice-input-usage-table-wrap");
+        tableWrap?.classList.toggle("hidden", !usage);
+        const tableBody = $("voice-input-usage-table-body");
+        if (!tableBody || !usage) return;
+        const rows = getVoiceInputUsageDetailRows(usage).map((cells) => {
+          const row = document.createElement("tr");
+          cells.forEach((cell, index) => {
+            const element = document.createElement(index === 0 ? "th" : "td");
+            element.textContent = cell;
+            if (index === 0) element.scope = "row";
+            row.appendChild(element);
+          });
+          return row;
+        });
+        tableBody.replaceChildren(...rows);
+      }
+
+      async function loadHostVoiceInputUsage({ force = false } = {}) {
+        if (hostVoiceInputUsageLoadPromise) {
+          return hostVoiceInputUsageLoadPromise;
+        }
+        if (
+          !force &&
+          hostPreferencesState.voiceInputUsageLoaded &&
+          hostPreferencesState.voiceInputUsage
+        ) {
+          return hostPreferencesState.voiceInputUsage;
+        }
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputUsageLoading: true,
+          voiceInputUsageError: "",
+        };
+        renderHostVoiceInputUsageSummary();
+        renderHostVoiceInputUsageDetail();
+        hostVoiceInputUsageLoadPromise = (async () => {
+          try {
+            const usage = await apiWithAuthRetry(
+              "GET",
+              "/dev/preferences/voice-input/usage"
+            );
+            hostPreferencesState = {
+              ...hostPreferencesState,
+              voiceInputUsage: usage,
+              voiceInputUsageLoading: false,
+              voiceInputUsageLoaded: true,
+              voiceInputUsageError: "",
+            };
+            return usage;
+          } catch (err) {
+            if (await handleHostPreferencesAuthFailure(err)) return null;
+            hostPreferencesState = {
+              ...hostPreferencesState,
+              voiceInputUsageLoading: false,
+              voiceInputUsageLoaded: false,
+              voiceInputUsageError:
+                err.message || "Could not load Voice Input usage.",
+            };
+            return null;
+          } finally {
+            hostVoiceInputUsageLoadPromise = null;
+            renderHostVoiceInputUsageSummary();
+            renderHostVoiceInputUsageDetail();
+          }
+        })();
+        return hostVoiceInputUsageLoadPromise;
+      }
+
+      function openHostVoiceInputUsageDetail() {
+        void navigateToRoute(buildVoiceInputUsageRoute());
+      }
+
+      function retryHostVoiceInputUsage() {
+        void loadHostVoiceInputUsage({ force: true });
+      }
+
+      function renderHostVoiceInputPreferences({ disabled = false } = {}) {
+        const toggle = $("host-voice-input-enabled-toggle");
+        const voiceInputEnabled =
+          hostPreferencesState.voiceInputEnabled === true;
+        const voiceInputModel =
+          typeof hostPreferencesState.voiceInputModel === "string"
+            ? hostPreferencesState.voiceInputModel.trim()
+            : "";
+        setText(
+          "host-voice-input-title",
+          voiceInputModel ? `Voice Input (${voiceInputModel})` : "Voice Input"
+        );
+        setHostVoiceInputEnabledControlValue(voiceInputEnabled);
+        const tokenInput = $("host-voice-input-token");
+        if (tokenInput && document.activeElement !== tokenInput) {
+          tokenInput.value = hostPreferencesState.voiceInputTokenDraft || "";
+        }
+        const tokenCandidate =
+          tokenInput?.value?.trim() ||
+          hostPreferencesState.voiceInputTokenDraft ||
+          "";
+        const tokenConfigured =
+          hostPreferencesState.voiceInputTokenConfigured === true;
+        const tokenValidated =
+          hostPreferencesState.voiceInputTokenValidated === true;
+        const pendingReplacement = Boolean(tokenCandidate);
+        if (tokenInput) {
+          tokenInput.placeholder =
+            tokenConfigured && hostPreferencesState.voiceInputTokenMasked
+              ? hostPreferencesState.voiceInputTokenMasked
+              : "Enter a new token";
+          tokenInput.setAttribute(
+            "aria-label",
+            tokenConfigured && !pendingReplacement
+              ? `Saved OpenAI API token ${hostPreferencesState.voiceInputTokenMasked}. Enter a new token to replace it.`
+              : "OpenAI API token"
+          );
+        }
+        setText(
+          "host-voice-input-token-status",
+          pendingReplacement
+            ? tokenConfigured
+              ? "New token entered. Test & Save Token to replace the saved token, or discard this draft."
+              : "New token entered. Run Test & Save Token."
+            : tokenConfigured
+            ? tokenValidated
+              ? "Validated and saved."
+              : "Saved token requires validation."
+            : "No token saved."
+        );
+        setText(
+          "host-voice-input-client-warning",
+          getHostVoiceInputClientWarning()
+        );
+        setText(
+          "host-voice-input-availability",
+          hostPreferencesState.voiceInputAvailable
+            ? `Ready with ${hostPreferencesState.voiceInputModel}.`
+            : pendingReplacement
+            ? voiceInputEnabled
+              ? "The saved token remains active. Test or discard the replacement draft."
+              : "Test or discard the replacement draft before enabling Voice Input."
+            : hostPreferencesState.voiceInputCanEnable
+            ? "Token validation passed. Enable Voice Input and save Preferences."
+            : "Test and save a valid OpenAI API token first."
+        );
+        const pill = $("host-voice-input-state-pill");
+        if (pill) {
+          pill.textContent = hostPreferencesState.voiceInputAvailable
+            ? "Ready"
+            : hostPreferencesState.voiceInputCanEnable
+            ? "Validated"
+            : "Disabled";
+        }
+        setText(
+          "host-voice-input-sample-expected",
+          hostPreferencesState.voiceInputSampleExpected
+        );
+        const samplePlayer = $("host-voice-input-sample-player");
+        if (
+          samplePlayer &&
+          hostVoiceInputSampleObjectUrl &&
+          samplePlayer.src !== hostVoiceInputSampleObjectUrl
+        ) {
+          samplePlayer.src = hostVoiceInputSampleObjectUrl;
+        }
+        setText(
+          "host-voice-input-sample-status",
+          hostPreferencesState.voiceInputSampleLoading
+            ? "Loading D1.wav..."
+            : hostPreferencesState.voiceInputSampleError
+            ? hostPreferencesState.voiceInputSampleError
+            : hostPreferencesState.voiceInputSampleLoaded
+            ? "D1.wav"
+            : ""
+        );
+        const testStatus =
+          hostPreferencesState.voiceInputTestError ||
+          hostPreferencesState.voiceInputTestStatus ||
+          "";
+        setText(
+          "host-voice-input-test-status",
+          hostPreferencesState.voiceInputTestLatencyMs !== null
+            ? `${testStatus} ${hostPreferencesState.voiceInputTestLatencyMs} ms`
+            : testStatus
+        );
+        setText(
+          "host-voice-input-test-transcript",
+          hostPreferencesState.voiceInputTestTranscript
+            ? `Actual transcript: ${hostPreferencesState.voiceInputTestTranscript}`
+            : ""
+        );
+        const testStatusElement = $("host-voice-input-test-status");
+        testStatusElement?.classList.toggle(
+          "voice-input-warning",
+          Boolean(hostPreferencesState.voiceInputTestError)
+        );
+        const canEnable = hostPreferencesState.voiceInputCanEnable === true;
+        toggle?.toggleAttribute(
+          "disabled",
+          disabled ||
+            hostPreferencesState.voiceInputTestRunning ||
+            hostPreferencesState.voiceInputTokenClearing ||
+            (!voiceInputEnabled && (!canEnable || pendingReplacement))
+        );
+        toggle?.setAttribute(
+          "aria-disabled",
+          toggle?.disabled ? "true" : "false"
+        );
+        const enableWarning = $("host-voice-input-enable-warning");
+        setText(
+          "host-voice-input-enable-warning",
+          pendingReplacement
+            ? "Test or discard the new token before enabling Voice Input."
+            : "Test and save a valid OpenAI API token before enabling Voice Input."
+        );
+        enableWarning?.classList.toggle(
+          "hidden",
+          voiceInputEnabled || (canEnable && !pendingReplacement)
+        );
+        tokenInput?.toggleAttribute(
+          "disabled",
+          disabled ||
+            hostPreferencesState.voiceInputTestRunning ||
+            hostPreferencesState.voiceInputTokenClearing
+        );
+        const discardDraftButton = $(
+          "host-voice-input-discard-token-draft-btn"
+        );
+        discardDraftButton?.classList.toggle("hidden", !pendingReplacement);
+        discardDraftButton?.toggleAttribute(
+          "disabled",
+          disabled ||
+            hostPreferencesState.voiceInputTestRunning ||
+            hostPreferencesState.voiceInputTokenClearing
+        );
+        const removeSavedButton = $("host-voice-input-remove-saved-token-btn");
+        removeSavedButton?.classList.toggle(
+          "hidden",
+          pendingReplacement || !tokenConfigured
+        );
+        removeSavedButton?.toggleAttribute(
+          "disabled",
+          disabled ||
+            hostPreferencesState.voiceInputTestRunning ||
+            hostPreferencesState.voiceInputTokenClearing
+        );
+        const testButton = $("host-voice-input-test-btn");
+        if (testButton) {
+          testButton.disabled =
+            disabled ||
+            hostPreferencesState.voiceInputTestRunning ||
+            hostPreferencesState.voiceInputTokenClearing ||
+            (pendingReplacement
+              ? !isHostVoiceInputTokenCandidateTestable(tokenCandidate)
+              : !tokenConfigured);
+          testButton.textContent = hostPreferencesState.voiceInputTestRunning
+            ? "Testing..."
+            : tokenCandidate
+            ? "Test & Save Token"
+            : tokenConfigured
+            ? "Retest Saved Token"
+            : "Test & Save Token";
+        }
+        if (
+          getCurrentScreen() === "host-preferences" &&
+          !hostPreferencesState.voiceInputSampleLoaded &&
+          !hostPreferencesState.voiceInputSampleLoading
+        ) {
+          void ensureHostVoiceInputSampleAudio();
+        }
+        renderHostVoiceInputUsageSummary();
+        if (
+          voiceInputEnabled &&
+          !hostPreferencesState.voiceInputUsageLoaded &&
+          !hostPreferencesState.voiceInputUsageLoading
+        ) {
+          void loadHostVoiceInputUsage();
+        }
+      }
+
       function renderHostPreferences() {
         const pathInput = $("host-default-browse-path");
         if (
@@ -36024,10 +37317,8 @@ Waiting for Claude login output…</pre
           basicPreferencesUnavailable;
         const providerSectionStatusVisible =
           providerCatalogState.loading || Boolean(providerCatalogState.error);
-        const providerSectionInitialPending =
-          providerCatalogState.loading && !providerCatalogState.loaded;
-        const providerSectionUnavailable =
-          !providerCatalogState.loaded && Boolean(providerCatalogState.error);
+        const providerSectionInitialPending = isProviderCatalogInitialPending();
+        const providerSectionUnavailable = isProviderCatalogRequestFailed();
         const providerControlsDisabled =
           disabled ||
           providerSectionInitialPending ||
@@ -36035,12 +37326,12 @@ Waiting for Claude login output…</pre
         let providerSectionStatusCopy = "";
         if (providerCatalogState.loading) {
           providerSectionStatusCopy = providerCatalogState.loaded
-            ? "Refreshing provider status..."
-            : "Checking provider status...";
+            ? "Refreshing provider availability..."
+            : "Checking provider availability...";
         } else if (providerCatalogState.error) {
           providerSectionStatusCopy = providerCatalogState.loaded
-            ? "Could not refresh provider status. Existing values remain available."
-            : "Could not load provider status.";
+            ? "Could not refresh provider availability. Existing values remain available."
+            : "Could not load provider availability.";
         }
         setVisible(
           "host-provider-section-status-label",
@@ -36428,15 +37719,11 @@ Waiting for Claude login output…</pre
         );
         setText(
           "host-claude-command-status",
-          isProviderAvailable("claude")
-            ? "Available on this Host."
-            : "Unavailable on this Host. Blank disables Claude explicitly."
+          describeProviderCommandAvailability("claude")
         );
         setText(
           "host-codex-command-status",
-          isProviderAvailable("codex")
-            ? "Available on this Host."
-            : "Unavailable on this Host. Blank disables Codex explicitly."
+          describeProviderCommandAvailability("codex")
         );
         setText(
           "host-default-provider-warning",
@@ -36456,6 +37743,7 @@ Waiting for Claude login output…</pre
           hostPreferencesState.debugHostPreferencesFullDiskAccessBlockEnabled ===
             true;
         renderHostNotificationPreferences({ disabled });
+        renderHostVoiceInputPreferences({ disabled });
         setVisible("host-folder-access-card", folderAccessVisible);
         $("host-public-base-url")?.toggleAttribute(
           "disabled",
@@ -36542,6 +37830,7 @@ Waiting for Claude login output…</pre
           error: "",
         };
         renderHostPreferences();
+        void loadHostVoiceInputNativeAppVersion();
         try {
           const data = await apiWithAuthRetry("GET", "/dev/preferences");
           applyHostPreferencesData(data);
@@ -36975,6 +38264,192 @@ Waiting for Claude login output…</pre
         discardUnsavedHostPreferencesChanges();
       }
 
+      function handleHostVoiceInputTokenInput() {
+        const tokenDraft = $("host-voice-input-token")?.value || "";
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputTokenDraft: tokenDraft,
+          voiceInputTestStatus: "",
+          voiceInputTestError: "",
+          voiceInputTestTranscript: "",
+          voiceInputTestLatencyMs: null,
+        };
+        renderHostVoiceInputPreferences({
+          disabled: hostPreferencesState.loading || hostPreferencesState.saving,
+        });
+      }
+
+      function toggleHostVoiceInputEnabled() {
+        const toggle = $("host-voice-input-enabled-toggle");
+        if (!toggle || toggle.disabled) return;
+        const enabled = !getHostVoiceInputEnabledControlValue();
+        setHostVoiceInputEnabledControlValue(enabled);
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputEnabled: enabled,
+        };
+        stageHostPreferencesDraftFromControls();
+        renderHostPreferences();
+      }
+
+      function discardHostVoiceInputTokenDraft() {
+        if (
+          hostPreferencesState.loading ||
+          hostPreferencesState.saving ||
+          hostPreferencesState.voiceInputTestRunning ||
+          hostPreferencesState.voiceInputTokenClearing
+        ) {
+          return;
+        }
+        const tokenInput = $("host-voice-input-token");
+        if (tokenInput) tokenInput.value = "";
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputTokenDraft: "",
+          voiceInputTestStatus: "",
+          voiceInputTestError: "",
+          voiceInputTestTranscript: "",
+          voiceInputTestLatencyMs: null,
+        };
+        renderHostPreferences();
+      }
+
+      async function removeHostVoiceInputSavedToken() {
+        if (
+          hostPreferencesState.loading ||
+          hostPreferencesState.saving ||
+          hostPreferencesState.voiceInputTestRunning ||
+          hostPreferencesState.voiceInputTokenClearing
+        ) {
+          return;
+        }
+        if (!hostPreferencesState.voiceInputTokenConfigured) {
+          return;
+        }
+        if (
+          !window.confirm(
+            "Remove the saved OpenAI API token and disable Voice Input?"
+          )
+        ) {
+          return;
+        }
+        const tokenInput = $("host-voice-input-token");
+        if (tokenInput) tokenInput.value = "";
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputTokenDraft: "",
+          voiceInputTokenClearing: true,
+          voiceInputTestStatus: "Clearing saved token...",
+          voiceInputTestError: "",
+          voiceInputTestTranscript: "",
+          voiceInputTestLatencyMs: null,
+        };
+        renderHostPreferences();
+        try {
+          const data = await apiWithAuthRetry("PUT", "/dev/preferences", {
+            voice_input: {
+              enabled: false,
+              token_action: "clear",
+            },
+          });
+          applyHostVoiceInputStatusPayload(data.preferences?.voice_input);
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            voiceInputTokenClearing: false,
+            voiceInputTokenDraft: "",
+            voiceInputTestStatus: "Saved token cleared.",
+            voiceInputTestError: "",
+            voiceInputTestTranscript: "",
+            voiceInputTestLatencyMs: null,
+          };
+        } catch (err) {
+          if (await handleHostPreferencesAuthFailure(err)) return;
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            voiceInputTokenClearing: false,
+            voiceInputTestStatus: "",
+            voiceInputTestError:
+              err.message || "Could not clear the Voice Input token.",
+          };
+        }
+        renderHostPreferences();
+      }
+
+      async function testHostVoiceInput() {
+        const candidateToken =
+          $("host-voice-input-token")?.value?.trim() ||
+          hostPreferencesState.voiceInputTokenDraft.trim();
+        if (hostPreferencesState.voiceInputTestRunning) {
+          return;
+        }
+        if (
+          candidateToken &&
+          !isHostVoiceInputTokenCandidateTestable(candidateToken)
+        ) {
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            voiceInputTestStatus: "",
+            voiceInputTestError:
+              "Enter a complete OpenAI API token before testing.",
+          };
+          renderHostPreferences();
+          return;
+        }
+        if (
+          !candidateToken &&
+          !hostPreferencesState.voiceInputTokenConfigured
+        ) {
+          return;
+        }
+        hostPreferencesState = {
+          ...hostPreferencesState,
+          voiceInputTestRunning: true,
+          voiceInputTestStatus: "Testing D1.wav...",
+          voiceInputTestError: "",
+          voiceInputTestTranscript: "",
+          voiceInputTestLatencyMs: null,
+          error: "",
+        };
+        renderHostPreferences();
+        try {
+          const data = await apiWithAuthRetry(
+            "POST",
+            "/dev/preferences/voice-input/test",
+            candidateToken ? { openai_api_token: candidateToken } : {}
+          );
+          applyHostVoiceInputStatusPayload(data.voice_input);
+          const tokenInput = $("host-voice-input-token");
+          if (tokenInput) tokenInput.value = "";
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            voiceInputTestRunning: false,
+            voiceInputTokenDraft: "",
+            voiceInputTestStatus:
+              data.sample_exact === true
+                ? "Token saved. Exact sample match."
+                : "Token saved. Sample completed; review the actual transcript.",
+            voiceInputTestError: "",
+            voiceInputTestTranscript: data.transcript || "",
+            voiceInputTestLatencyMs: Number.isFinite(Number(data.duration_ms))
+              ? Number(data.duration_ms)
+              : null,
+          };
+        } catch (err) {
+          if (await handleHostPreferencesAuthFailure(err)) return;
+          hostPreferencesState = {
+            ...hostPreferencesState,
+            voiceInputTestRunning: false,
+            voiceInputTestStatus: "",
+            voiceInputTestError:
+              err.message || "Voice Input token test failed.",
+            voiceInputTestTranscript: "",
+            voiceInputTestLatencyMs: null,
+          };
+        }
+        void loadHostVoiceInputUsage({ force: true });
+        renderHostPreferences();
+      }
+
       async function saveHostPreferences() {
         if (hostPreferencesState.saving) {
           refreshHostPreferencesSaveButton();
@@ -37010,6 +38485,8 @@ Waiting for Claude login output…</pre
           $("host-notification-app-sound-toggle")?.checked !== false;
         const requestedDailyTelemetryEnabled =
           $("host-daily-telemetry-toggle")?.checked === true;
+        const requestedVoiceInputEnabled =
+          getHostVoiceInputEnabledControlValue();
         const claudeCommandInput = $("host-claude-command");
         const requestedClaudeCommand = claudeCommandInput
           ? claudeCommandInput.value.trim()
@@ -37084,6 +38561,7 @@ Waiting for Claude login output…</pre
           notificationSoundWebEnabled: requestedWebNotificationSound,
           notificationSoundAppEnabled: requestedAppNotificationSound,
           dailyTelemetryEnabled: requestedDailyTelemetryEnabled,
+          voiceInputEnabled: requestedVoiceInputEnabled,
           publicBaseUrl: requestedPublicBaseUrl,
           defaultBrowsePath: requestedPath,
           defaultProvider: nextDefaultProvider,
@@ -37113,6 +38591,10 @@ Waiting for Claude login output…</pre
             notification_sound_web_enabled: requestedWebNotificationSound,
             notification_sound_app_enabled: requestedAppNotificationSound,
             daily_telemetry_enabled: requestedDailyTelemetryEnabled,
+            voice_input: {
+              enabled: requestedVoiceInputEnabled,
+              token_action: "retain",
+            },
             direct_host_url: requestedPublicBaseUrl || null,
             public_base_url: requestedPublicBaseUrl || null,
             default_browse_path: requestedPath,
@@ -37739,6 +39221,55 @@ Waiting for Claude login output…</pre
         syncCreateAllowedPathsShortcutState();
       }
 
+      function isCreateWebsiteEligible() {
+        return createWebsiteAuthorityState.eligible === true;
+      }
+
+      function syncCreateWebsiteAuthorityState() {
+        const eligible = isCreateWebsiteEligible();
+        const enabledInput = $("create-website-enabled");
+        const accessSelect = $("create-website-access");
+        const hint = $("create-website-authority-hint");
+        if (enabledInput) {
+          enabledInput.disabled = !eligible;
+          if (!eligible) enabledInput.checked = false;
+        }
+        if (accessSelect) {
+          accessSelect.disabled = !eligible;
+          if (!eligible) accessSelect.value = "owner_only";
+        }
+        if (!eligible) setCreateWebsitePasswordValue("");
+        if (hint) {
+          hint.textContent =
+            createWebsiteAuthorityState.reason ||
+            "Website is available only for agents in the Browser Root.";
+          hint.classList.toggle("hidden", eligible);
+        }
+        syncCreateWebsitePasswordMode();
+      }
+
+      function setCreateWebsiteAuthorityState({
+        folderPath = "",
+        projectId = "",
+        eligible = false,
+        reason = "",
+      } = {}) {
+        createWebsiteAuthorityState = {
+          folderPath: String(folderPath || "").trim(),
+          projectId: String(projectId || "").trim(),
+          eligible: eligible === true,
+          reason:
+            String(reason || "").trim() ||
+            "Website is available only for agents in the Browser Root.",
+        };
+        if (eligible !== true) {
+          setCreateWebsiteEnabledValue(false);
+          setCreateWebsiteAccessValue("owner_only");
+          setCreateWebsitePasswordValue("");
+        }
+        syncCreateWebsiteAuthorityState();
+      }
+
       function setCreateWebsiteAccessValue(value) {
         const select = $("create-website-access");
         if (!select) return;
@@ -37774,16 +39305,19 @@ Waiting for Claude login output…</pre
         const row = $("create-website-password-row");
         const input = $("create-website-password");
         const status = $("create-website-password-status");
+        const eligible = isCreateWebsiteEligible();
         const passwordMode = getCreateWebsiteAccessValue() === "password";
         if (row) row.classList.remove("hidden");
         if (input) {
-          input.disabled = !passwordMode;
+          input.disabled = !eligible || !passwordMode;
         }
         if (status) {
-          status.textContent = formatOwnerWebsitePasswordHint(
-            getCreateWebsiteAccessValue(),
-            input?.value || ""
-          );
+          status.textContent = eligible
+            ? formatOwnerWebsitePasswordHint(
+                getCreateWebsiteAccessValue(),
+                input?.value || ""
+              )
+            : "Website settings are unavailable outside the Browser Root.";
         }
       }
 
@@ -37889,6 +39423,10 @@ Waiting for Claude login output…</pre
         syncSessionSetupInterfaceStyleVisibility();
         setCreateWebsiteEnabledValue(HOST_DEFAULT_SESSION_DEFAULTS.web.enabled);
         setCreateWebsiteAccessValue(HOST_DEFAULT_SESSION_DEFAULTS.web.access);
+        setCreateWebsiteAuthorityState({
+          folderPath: startFolder,
+          eligible: false,
+        });
         setCreateNotificationsEnabledValue(
           HOST_DEFAULT_SESSION_DEFAULTS.notifications.enabled
         );
@@ -37981,6 +39519,10 @@ Waiting for Claude login output…</pre
         syncSessionSetupInterfaceStyleVisibility();
         setCreateWebsiteEnabledValue(HOST_DEFAULT_SESSION_DEFAULTS.web.enabled);
         setCreateWebsiteAccessValue(HOST_DEFAULT_SESSION_DEFAULTS.web.access);
+        setCreateWebsiteAuthorityState({
+          folderPath: record.agent_folder || "",
+          eligible: false,
+        });
         setCreateNotificationsEnabledValue(
           HOST_DEFAULT_SESSION_DEFAULTS.notifications.enabled
         );
@@ -38389,14 +39931,15 @@ Waiting for Claude login output…</pre
         if (liveSession?.website && typeof liveSession.website === "object") {
           return liveSession.website;
         }
-        if (
-          selectedAgent?.agent_id &&
-          selectedAgent.agent_id === liveSession?.agentId &&
-          selectedAgent.website
-        ) {
-          return selectedAgent.website;
-        }
-        return null;
+        return {
+          enabled: false,
+          available: false,
+          access: "owner_only",
+          browser_root_authorized: false,
+          reason: "session_folder_outside_browser_root",
+          reason_message:
+            "Website is available only for agents in the Browser Root.",
+        };
       }
 
       function getOwnerVisibleWebsitePassword(website = {}) {
@@ -39038,7 +40581,6 @@ Waiting for Claude login output…</pre
         liveSession = getSelectedLiveSession()
       ) {
         const input = $("agent-profile-rename-input");
-        const updateConfig = $("agent-profile-identity-update-config");
         const saveBtn =
           $("agent-profile-identity-save-btn") ||
           $("agent-profile-rename-save-btn");
@@ -39046,10 +40588,6 @@ Waiting for Claude login output…</pre
         if (!liveSession) {
           input.value = "";
           input.disabled = true;
-          if (updateConfig) {
-            updateConfig.checked = false;
-            updateConfig.disabled = true;
-          }
           saveBtn.disabled = true;
           saveBtn.textContent = "Save";
           showError("agent-profile-rename-error", "");
@@ -39062,18 +40600,14 @@ Waiting for Claude login output…</pre
         ).trim();
         const draftName = String(agentProfileRenameState.draft || "");
         const normalizedDraft = draftName.trim();
-        const persistIdentity = updateConfig?.checked === true;
         input.value = draftName;
         input.disabled = agentProfileRenameState.saving === true;
-        if (updateConfig) {
-          updateConfig.disabled = agentProfileRenameState.saving === true;
-        }
         saveBtn.textContent =
           agentProfileRenameState.saving === true ? "Saving..." : "Save";
         saveBtn.disabled =
           agentProfileRenameState.saving === true ||
           !normalizedDraft ||
-          (normalizedDraft === currentName && !persistIdentity);
+          normalizedDraft === currentName;
         showError(
           "agent-profile-rename-error",
           agentProfileRenameState.error || ""
@@ -39091,8 +40625,6 @@ Waiting for Claude login output…</pre
         const currentSessionName = String(
           liveSession.sessionName || liveSession.session_name || ""
         ).trim();
-        const updateConfig =
-          $("agent-profile-identity-update-config")?.checked === true;
         if (!nextSessionName) {
           agentProfileRenameState = {
             ...agentProfileRenameState,
@@ -39101,7 +40633,7 @@ Waiting for Claude login output…</pre
           renderAgentProfileRenameView(liveSession);
           return;
         }
-        if (nextSessionName === currentSessionName && !updateConfig) {
+        if (nextSessionName === currentSessionName) {
           agentProfileRenameState = {
             ...agentProfileRenameState,
             draft: currentSessionName,
@@ -39123,7 +40655,6 @@ Waiting for Claude login output…</pre
           const data = await api("POST", "/session/rename", {
             session_id: liveSession.sessionId,
             session_name: nextSessionName,
-            update_config: updateConfig,
           });
           const resolvedSessionName = data.session_name || nextSessionName;
           patchLiveSession(liveSession.sessionId, {
@@ -39138,11 +40669,7 @@ Waiting for Claude login output…</pre
             resolvedSessionName
           );
           renderSelectedAgent();
-          showBanner(
-            data.config_mutated === true
-              ? `Renamed session to ${resolvedSessionName} and updated .oysterun/config.json.`
-              : `Renamed session to ${resolvedSessionName}.`
-          );
+          showBanner(`Renamed session to ${resolvedSessionName}.`);
         } catch (err) {
           agentProfileRenameState = {
             ...agentProfileRenameState,
@@ -40377,7 +41904,6 @@ Waiting for Claude login output…</pre
           "approval_policy",
           "allow_dangerously_skip_permissions",
           "dangerous_mode",
-          "web_access",
           "notifications_enabled",
           "allowed_paths",
           "runtime_capabilities",
@@ -40529,8 +42055,10 @@ Waiting for Claude login output…</pre
           payload.interface_type || getCreateDefaultInterfaceType()
         );
         syncSessionSetupInterfaceStyleVisibility();
-        setCreateWebsiteEnabledValue(payload.web_enabled === true);
-        setCreateWebsiteAccessValue(payload.web_access || "owner_only");
+        setCreateWebsiteAuthorityState({
+          folderPath: draft.agentFolder || "",
+          eligible: false,
+        });
         setCreateTelegramSettingsValue({});
         $("create-allowed-paths").value = normalizeAllowedPathsForForm(
           payload.allowed_paths
@@ -40603,6 +42131,13 @@ Waiting for Claude login output…</pre
         syncCreateAllowedPathsShortcutState();
         refreshCreateStartButtonEnabled();
         refreshUpdateSessionNameButton();
+        if (draft.agentFolder) {
+          void loadFolderConfigIntoCreateForm(draft.agentFolder, {
+            fillAgentIdIfEmpty: false,
+            applyFormValues: false,
+            showError: false,
+          });
+        }
       }
 
       function readSessionSetupSchedulerDraftForEditor(
@@ -48648,14 +50183,6 @@ Waiting for Claude login output…</pre
         const allowedPaths = isAllowedPathDebugUiVisible()
           ? parseAllowedPathsInput($("create-allowed-paths").value)
           : null;
-        const webAccess = getCreateWebsiteAccessValue();
-        const webPassword =
-          webAccess === "password" ? getCreateWebsitePasswordValue() : "";
-        if (webAccess === "password" && !webPassword) {
-          throw new Error(
-            "Website Password is required when Website Access is Password. Switch Website Access away from Password before clearing it."
-          );
-        }
 
         const payload = {
           provider: createRuntime,
@@ -48672,8 +50199,6 @@ Waiting for Claude login output…</pre
             createRuntime === "codex" ? codexApproval : undefined,
           allow_dangerously_skip_permissions: allowDanger,
           dangerous_mode: allowDanger,
-          web_enabled: getCreateWebsiteEnabledValue(),
-          web_access: webAccess,
           notifications_enabled: getCreateNotificationsEnabledValue(),
           install_oysterun_skills: getCreateInstallOysterunSkillsValue(),
           ...readTelegramFieldsPayload("create"),
@@ -48692,9 +50217,6 @@ Waiting for Claude login output…</pre
         ) {
           payload.confirm_beta_provider_permission_mode = true;
         }
-        if (webPassword) {
-          payload.web_password = webPassword;
-        }
         validateTelegramEnabledPayloadOrThrow(
           payload,
           getCreateTelegramConfiguredState()
@@ -48702,6 +50224,23 @@ Waiting for Claude login output…</pre
         return payload;
       }
 
+      function buildCreateWebsitePayload() {
+        if (!isCreateWebsiteEligible()) return null;
+        const webAccess = getCreateWebsiteAccessValue();
+        const webPassword =
+          webAccess === "password" ? getCreateWebsitePasswordValue() : "";
+        if (webAccess === "password" && !webPassword) {
+          throw new Error(
+            "Website Password is required when Website Access is Password. Switch Website Access away from Password before clearing it."
+          );
+        }
+        return {
+          web_enabled: getCreateWebsiteEnabledValue(),
+          web_access: webAccess,
+          ...(webPassword ? { web_password: webPassword } : {}),
+        };
+      }
+
       function readCreateFormRequest() {
         const agent_id = $("create-agent-id").value.trim();
         const agent_folder = $("create-agent-folder").value.trim();
@@ -48724,12 +50263,17 @@ Waiting for Claude login output…</pre
             configToggleChecked
           ),
           sessionPayload: buildCreateSessionPayload(),
+          websitePayload: buildCreateWebsitePayload(),
         };
       }
 
       async function submitCreateAgent() {
         if (!hasRunnableCreateProvider()) {
-          const message = createRuntime
+          const message = isProviderCatalogInitialPending()
+            ? "Checking providers. Wait for the Host provider check to finish."
+            : isProviderCatalogRequestFailed()
+            ? "Could not load provider status. Retry the provider check before starting a session."
+            : createRuntime
             ? `${getProviderDisplayLabel(
                 createRuntime
               )} is currently unavailable on this Host. Update Host Preferences before starting a session.`
@@ -48754,6 +50298,7 @@ Waiting for Claude login output…</pre
           persistConfig,
           preventConfigCreate,
           sessionPayload,
+          websitePayload,
         } = request;
         const sessionSetupProof = applyCreateSessionSetupProofAttributes(
           buildCreateSessionSetupProviderModelPermissionProof(sessionPayload)
@@ -48791,28 +50336,37 @@ Waiting for Claude login output…</pre
 
         const configPersistenceAction =
           getCreateConfigPersistenceAction(configToggleMode);
-        let failureStep = shouldPersistConfig
-          ? `Could not ${configPersistenceAction.toLowerCase()} .oysterun/config.json`
-          : resumeSessionId
-          ? "Could not resume session"
-          : "Could not start session";
+        const shouldPersistWebsite = Boolean(websitePayload);
+        let failureStep =
+          shouldPersistConfig || shouldPersistWebsite
+            ? `Could not ${configPersistenceAction.toLowerCase()} .oysterun/config.json`
+            : resumeSessionId
+            ? "Could not resume session"
+            : "Could not start session";
         try {
-          if (shouldPersistConfig) {
+          if (shouldPersistConfig || shouldPersistWebsite) {
             await apiWithAuthRetry(
               "PUT",
               "/agent/config",
               {
                 agent_id,
                 agent_folder,
-                ...sessionPayload,
-                session_setup_provider_model_permission_proof:
-                  sessionSetupProof,
+                ...(shouldPersistConfig
+                  ? {
+                      ...sessionPayload,
+                      session_setup_provider_model_permission_proof:
+                        sessionSetupProof,
+                    }
+                  : {}),
+                ...(websitePayload || {}),
               },
               {
                 onRetry: () => {
                   if (!isCurrentCreateAttempt(attemptId)) return;
                   setCreateStatus(
-                    `${configPersistenceAction} .oysterun/config.json...`,
+                    shouldPersistConfig
+                      ? `${configPersistenceAction} .oysterun/config.json...`
+                      : "Updating Website settings...",
                     "Retrying config save after a brief auth settle."
                   );
                 },
@@ -50190,6 +51744,7 @@ Waiting for Claude login output…</pre
         const folderPath = String(path || "").trim();
         if (!folderPath) {
           hideCreateConfigToggle("");
+          setCreateWebsiteAuthorityState();
           refreshCreateStartButtonEnabled();
           return;
         }
@@ -50207,20 +51762,38 @@ Waiting for Claude login output…</pre
             )}${providerQuery}`
           );
           const resolvedFolderPath = data.agent_folder || folderPath;
+          const currentFolderPath = String(
+            $("create-agent-folder").value || ""
+          ).trim();
+          if (
+            requestId !== latestCreateFolderConfigRequestId ||
+            currentFolderPath !== folderPath
+          ) {
+            return;
+          }
+          setCreateWebsiteAuthorityState({
+            folderPath: resolvedFolderPath,
+            projectId: data.websiteProjectId || "",
+            eligible:
+              data.websiteEligible === true ||
+              data.website?.browser_root_authorized === true,
+            reason:
+              data.website?.reason_message ||
+              "Website is available only for agents in the Browser Root.",
+          });
+          if (opts.applyFormValues === false && isCreateWebsiteEligible()) {
+            setCreateWebsiteEnabledValue(
+              HOST_DEFAULT_SESSION_DEFAULTS.web.enabled
+            );
+            setCreateWebsiteAccessValue(
+              HOST_DEFAULT_SESSION_DEFAULTS.web.access
+            );
+          }
           applyCreateConfigToggleMode(
             resolvedFolderPath,
             data.hasConfig === true
           );
           if (opts.applyFormValues !== false) {
-            const currentFolderPath = String(
-              $("create-agent-folder").value || ""
-            ).trim();
-            if (
-              requestId !== latestCreateFolderConfigRequestId ||
-              currentFolderPath !== folderPath
-            ) {
-              return;
-            }
             const preferencesUntouched =
               createFormPreferenceVersion === requestPreferenceVersion;
             $("create-agent-folder").value = resolvedFolderPath;
@@ -50307,6 +51880,10 @@ Waiting for Claude login output…</pre
           refreshCreateStartButtonEnabled();
         } catch (err) {
           hideCreateConfigToggle(folderPath);
+          setCreateWebsiteAuthorityState({
+            folderPath,
+            eligible: false,
+          });
           setCreateProviderSkillStatus(null);
           setCreateProviderTrustStatus(null);
           refreshCreateStartButtonEnabled();
@@ -50827,6 +52404,10 @@ Waiting for Claude login output…</pre
         markCreatePreferencesEdited();
         syncCreateAllowedPathsShortcutState();
         hideCreateConfigToggle($("create-agent-folder").value);
+        setCreateWebsiteAuthorityState({
+          folderPath: $("create-agent-folder").value,
+          eligible: false,
+        });
         refreshUpdateSessionNameButton();
         void refreshCreateProviderTrustStatus();
         refreshCreateStartButtonEnabled();
@@ -50834,6 +52415,7 @@ Waiting for Claude login output…</pre
       $("create-agent-id").addEventListener("input", () => {
         markCreatePreferencesEdited();
         syncCreateSessionNameDefault();
+        syncCreateWebsiteAuthorityState();
         void refreshCreateProviderSkillStatus();
         void refreshCreateProviderTrustStatus();
         refreshCreateStartButtonEnabled();
@@ -50898,7 +52480,7 @@ Waiting for Claude login output…</pre
         );
         if (
           control instanceof HTMLInputElement &&
-          ["text", "url", "search"].includes(control.type)
+          ["text", "url", "search", "password"].includes(control.type)
         ) {
           control.addEventListener(
             "input",
@@ -50906,6 +52488,10 @@ Waiting for Claude login output…</pre
           );
         }
       }
+      $("host-voice-input-token")?.addEventListener(
+        "input",
+        handleHostVoiceInputTokenInput
+      );
       document.addEventListener("change", (event) => {
         if (event.target.closest("[data-host-default-runtime-capability]")) {
           stageHostPreferencesDraftFromControls();
@@ -50914,6 +52500,9 @@ Waiting for Claude login output…</pre
       window.useStartFolderForAllowedPaths = useStartFolderForAllowedPaths;
       window.openPermissionsSettings = openPermissionsSettings;
       window.saveHostPreferences = saveHostPreferences;
+      window.discardHostVoiceInputTokenDraft = discardHostVoiceInputTokenDraft;
+      window.removeHostVoiceInputSavedToken = removeHostVoiceInputSavedToken;
+      window.testHostVoiceInput = testHostVoiceInput;
       window.generateDirectHostLoginQr = generateDirectHostLoginQr;
       window.copyHostPreferencesDirectHostUrl =
         copyHostPreferencesDirectHostUrl;
@@ -51088,10 +52677,6 @@ Waiting for Claude login output…</pre
           refreshAgentProfileWorkspacePolicySaveState();
           return;
         }
-        if (event.target.closest("#agent-profile-identity-update-config")) {
-          renderAgentProfileRenameView(getSelectedLiveSession());
-          return;
-        }
         handleSessionLoopChange(event);
         handleHostSchedulerChange(event);
       });