@oxvo/ai-live-assist 7.3.4 → 7.4.23

package/cjs/voicePresenceUi.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VoicePresenceView = void 0;
 const lucide_1 = require("lucide");
+const dialogFocusScope_js_1 = require("./dialogFocusScope.js");
 const experienceState_js_1 = require("./experienceState.js");
 const messages_js_1 = require("./messages.js");
 const placement_js_1 = require("./placement.js");
@@ -52,6 +53,12 @@ const confirmationPresentation = (value, fallbackTitle, fallbackApprove) => {
 const INTRO_WAKE_MS = 620;
 const MAX_LIVE_ANNOUNCEMENTS = 6;
 const MAX_VISIBLE_SUBTITLES = 3;
+const PAGE_ASSISTANCE_TITLE = "Let AI Guide help on this page?";
+const PAGE_ASSISTANCE_FALLBACK = "AI Guide wants to navigate or interact with this page.";
+const PAGE_ASSISTANCE_ALLOW = "Allow";
+const PAGE_ASSISTANCE_DECLINE = "Not now";
+const PAGE_ASSISTANCE_ALWAYS = "Always allow on this site";
+const PAGE_ASSISTANCE_REVOKE = "Turn off always allow";
 const styles = `
   :host {
     all: initial;
@@ -136,6 +143,60 @@ const styles = `
     inset-inline-start: max(var(--voice-inline-offset), env(safe-area-inset-left));
     inset-inline-end: auto;
   }
+  .page-assistance-revoke {
+    position: absolute;
+    inset-inline-end: calc(100% + 8px);
+    bottom: 9px;
+    width: max-content;
+    max-width: min(220px, calc(100vw - var(--voice-orb-size) - var(--voice-inline-offset) - 24px));
+    min-height: 44px;
+    padding: 7px 10px;
+    overflow-wrap: anywhere;
+    color: var(--voice-text);
+    background: var(--voice-surface);
+    border: 1px solid var(--voice-border);
+    border-radius: 999px;
+    box-shadow: 0 7px 20px rgba(15,23,42,.14);
+    font-size: 11px;
+    font-weight: 620;
+    line-height: 16px;
+    text-align: center;
+    white-space: normal;
+    pointer-events: auto;
+  }
+  .page-assistance-revoke:hover { background: #f7f8f9; }
+  :host([data-position="bottom_left"]) .page-assistance-revoke {
+    inset-inline-start: calc(100% + 8px);
+    inset-inline-end: auto;
+  }
+  .voice-support-action {
+    position: absolute;
+    inset-inline-end: 0;
+    bottom: calc(100% + 10px);
+    width: max-content;
+    max-width: min(260px, calc(100vw - 28px));
+    min-height: 38px;
+    padding: 7px 12px;
+    color: var(--voice-text);
+    background: rgba(255, 255, 255, .92);
+    border: 1px solid var(--voice-border);
+    border-radius: 999px;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
+    font-size: 12px;
+    font-weight: 650;
+    line-height: 17px;
+    text-align: center;
+    pointer-events: auto;
+  }
+  .voice-support-action:hover { background: #f7f8f9; }
+  .voice-support-action.has-reply {
+    border-color: color-mix(in srgb, var(--voice-accent) 34%, white);
+    box-shadow: 0 8px 24px color-mix(in srgb, var(--voice-accent) 16%, transparent);
+  }
+  :host([data-position="bottom_left"]) .voice-support-action {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+  }
   /* Premium orb themes. Light is the backwards-compatible default. */
   :host,
   :host([data-orb-theme="light"]) {
@@ -668,11 +729,16 @@ const styles = `
   .dialog-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
   .dialog h2 { margin: 0; font-size: 18px; line-height: 25px; font-weight: 680; }
   .dialog p { margin: 7px 0 0; color: var(--voice-muted); font-size: 14px; line-height: 21px; }
+  .page-assistance-dialog {
+    width: min(360px, calc(var(--voice-viewport-width, 100vw) - 32px));
+    padding: 16px;
+  }
+  .page-assistance-dialog h2 { font-size: 16px; line-height: 22px; }
   .icon-button {
     display: grid;
-    width: 36px;
-    height: 36px;
-    min-width: 36px;
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
     padding: 0;
     place-items: center;
     color: #4b5563;
@@ -682,7 +748,14 @@ const styles = `
   }
   .icon-button:hover { background: #f3f4f6; }
   .icon-button svg { width: 18px; height: 18px; }
-  .agreement {
+  .page-assistance-copy { overflow-wrap: anywhere; }
+  .page-assistance-target {
+    color: var(--voice-text);
+    font-size: 12px;
+    line-height: 18px;
+    font-weight: 620;
+  }
+  .page-assistance-always {
     display: grid;
     grid-template-columns: 18px minmax(0, 1fr);
     gap: 10px;
@@ -697,16 +770,24 @@ const styles = `
     line-height: 19px;
     cursor: pointer;
   }
-  .agreement input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--voice-accent); }
+  .page-assistance-always span { min-width: 0; overflow-wrap: anywhere; }
+  .page-assistance-always input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--voice-accent); }
   details { margin-top: 12px; color: var(--voice-muted); font-size: 12px; line-height: 18px; }
-  summary { width: fit-content; color: color-mix(in srgb, var(--voice-accent) 78%, #18212b); cursor: pointer; }
+  summary {
+    display: inline-flex;
+    width: fit-content;
+    min-height: 44px;
+    align-items: center;
+    color: color-mix(in srgb, var(--voice-accent) 78%, #18212b);
+    cursor: pointer;
+  }
   .legal-copy { margin-top: 8px; padding: 10px 11px; background: #fafbfc; border: 1px solid #e6e9ed; border-radius: 8px; }
   .legal-copy p { margin: 0; font-size: 12px; line-height: 18px; }
   .legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
   .legal-links a { color: color-mix(in srgb, var(--voice-accent) 82%, #18212b); }
   .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
   .button {
-    min-height: 40px;
+    min-height: 44px;
     padding: 0 14px;
     border: 1px solid #d7dce1;
     border-radius: 8px;
@@ -738,10 +819,10 @@ const styles = `
   .card-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 680; }
   .card-copy { margin: 5px 0 0; color: var(--voice-muted); font-size: 12px; line-height: 18px; }
   .card-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
-  .card-actions .button { min-height: 36px; }
+  .card-actions .button { min-height: 44px; }
   .recovery-head {
     display: grid;
-    grid-template-columns: 28px minmax(0, 1fr) 32px;
+    grid-template-columns: 28px minmax(0, 1fr) 44px;
     gap: 9px;
     align-items: center;
   }
@@ -757,9 +838,9 @@ const styles = `
   }
   .recovery-badge svg { width: 16px; height: 16px; }
   .recovery-close {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
+    width: 44px;
+    height: 44px;
+    min-width: 44px;
     justify-self: end;
   }
   .recovery-card .card-copy { margin-top: 9px; font-size: 13px; line-height: 19px; }
@@ -834,6 +915,37 @@ const styles = `
     .orb.wake::after { animation-duration: 120ms; }
     .presence-field { transition-duration: 120ms; }
   }
+  :host([data-motion="off"]) .orb,
+  :host([data-motion="off"]) .orb::before,
+  :host([data-motion="off"]) .orb::after,
+  :host([data-motion="off"]) .orb-rim,
+  :host([data-motion="off"]) .orb-rim::before,
+  :host([data-motion="off"]) .orb-rim::after,
+  :host([data-motion="off"]) .orb-surface,
+  :host([data-motion="off"]) .orb-surface::before,
+  :host([data-motion="off"]) .orb-surface::after,
+  :host([data-motion="off"]) .orb-core,
+  :host([data-motion="off"]) .orb-core::before,
+  :host([data-motion="off"]) .orb-core::after {
+    animation: none !important;
+    transition: none !important;
+    will-change: auto !important;
+  }
+  :host([data-effects-paused="true"]) .orb,
+  :host([data-effects-paused="true"]) .orb::before,
+  :host([data-effects-paused="true"]) .orb::after,
+  :host([data-effects-paused="true"]) .orb-rim,
+  :host([data-effects-paused="true"]) .orb-rim::before,
+  :host([data-effects-paused="true"]) .orb-rim::after,
+  :host([data-effects-paused="true"]) .orb-surface,
+  :host([data-effects-paused="true"]) .orb-surface::before,
+  :host([data-effects-paused="true"]) .orb-surface::after,
+  :host([data-effects-paused="true"]) .orb-core,
+  :host([data-effects-paused="true"]) .orb-core::before,
+  :host([data-effects-paused="true"]) .orb-core::after {
+    animation-play-state: paused !important;
+    will-change: auto !important;
+  }
   :host([data-visual-test="true"]) *,
   :host([data-visual-test="true"]) *::before,
   :host([data-visual-test="true"]) *::after {
@@ -841,10 +953,71 @@ const styles = `
     transition: none !important;
   }
   :host([data-visual-test="true"]) .caption.entering { animation: none !important; }
+  @media (prefers-reduced-transparency: reduce) {
+    .presence-field {
+      display: none;
+      opacity: 0;
+      transition: none;
+    }
+    .orb {
+      color: #fff;
+      background: #1f2937;
+      background-image: none;
+      border-color: #4b5563;
+      box-shadow: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      filter: none;
+    }
+    .orb::before,
+    .orb::after,
+    .orb-rim,
+    .orb-rim::before,
+    .orb-rim::after,
+    .orb-surface,
+    .orb-surface::before,
+    .orb-surface::after,
+    .orb-core::before,
+    .orb-core::after {
+      display: none;
+      animation: none;
+      background: none;
+      background-image: none;
+      box-shadow: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      filter: none;
+    }
+    .orb-core {
+      background: #111827;
+      background-image: none;
+      box-shadow: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      filter: none;
+    }
+    .orb-icon { filter: none; }
+    .subtitle-track,
+    .first-label,
+    .status-bubble,
+    .attribution-bubble,
+    .dialog,
+    .safety-card,
+    .recovery-card,
+    .page-assistance-revoke {
+      background: #fff;
+      background-image: none;
+      box-shadow: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+      filter: none;
+    }
+  }
   @media (forced-colors: active) {
     .orb { color: ButtonText; background: ButtonFace; border: 2px solid ButtonText; forced-color-adjust: auto; }
     .orb-surface, .orb-core, .orb-rim { display: none; }
     .subtitle-track, .dialog, .safety-card, .recovery-card { color: CanvasText; background: Canvas; border: 1px solid CanvasText; }
+    .page-assistance-revoke { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
     .caption-speaker { color: CanvasText; background: Canvas; border-color: CanvasText; }
   }
   @media (max-width: 520px) {
@@ -853,8 +1026,12 @@ const styles = `
       width: 100%;
       max-height: calc(var(--voice-viewport-height, 100dvh) - 20px);
     }
+    .page-assistance-dialog { border-radius: 14px 14px 8px 8px; }
     .dialog-actions { flex-direction: column-reverse; }
     .dialog-actions .button { width: 100%; }
+    .page-assistance-revoke {
+      max-width: calc(100vw - var(--voice-orb-size) - 36px);
+    }
   }
 `;
 const icon = (node, className) => {
@@ -863,11 +1040,8 @@ const icon = (node, className) => {
     element.setAttribute("aria-hidden", "true");
     return element;
 };
-const isFocusTarget = (value) => value instanceof HTMLElement &&
-    !value.hasAttribute("disabled") &&
-    value.getAttribute("aria-hidden") !== "true";
 class VoicePresenceView {
-    constructor(config, overrides, callbacks, tabId, onFallback = () => undefined, visualTestMode = false) {
+    constructor(config, overrides, callbacks, tabId, onFallback = () => undefined, visualTestMode = false, options = {}) {
         this.callbacks = callbacks;
         this.onFallback = onFallback;
         this.captionTimers = new Map();
@@ -879,7 +1053,10 @@ class VoicePresenceView {
         this.highlightScrollTargets = [];
         this.currentConfirmation = null;
         this.currentVisualRequest = null;
-        this.restoreFocus = null;
+        this.currentHandoffContextRequest = null;
+        this.handoffRequestPreparing = false;
+        this.currentPageAssistanceRequest = null;
+        this.pageAssistancePersistentAllowed = false;
         this.active = false;
         this.activeElsewhere = false;
         this.destroyed = false;
@@ -899,31 +1076,7 @@ class VoicePresenceView {
         this.serverPresenceState = "ready";
         this.playbackState = "idle";
         this.capabilityTier = "standard";
-        this.onModalKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                this.closeActivation();
-                return;
-            }
-            if (event.key !== "Tab")
-                return;
-            const focusable = Array.from(this.modalLayer.querySelectorAll("button,input,summary,a[href]")).filter(isFocusTarget);
-            if (focusable.length === 0)
-                return;
-            const first = focusable[0];
-            const last = focusable.at(-1);
-            if (!first || !last)
-                return;
-            const activeElement = this.shadow.activeElement;
-            if (event.shiftKey && activeElement === first) {
-                event.preventDefault();
-                last.focus();
-            }
-            else if (!event.shiftKey && activeElement === last) {
-                event.preventDefault();
-                first.focus();
-            }
-        };
+        this.reducedMotionQuery = null;
         this.scheduleCaptionLayout = () => {
             if (this.destroyed || this.captionLayoutFrame !== null)
                 return;
@@ -941,10 +1094,10 @@ class VoicePresenceView {
             });
         };
         this.onVisibilityChange = () => {
-            if (document.hidden)
-                this.stopLevelLoop();
-            else if (this.activeAnalyser())
-                this.startLevelLoop();
+            this.syncMotionPolicy();
+        };
+        this.onReducedMotionChange = () => {
+            this.syncMotionPolicy();
         };
         const voiceConfig = config.appearance?.voicePresence;
         if (!voiceConfig?.enabled) {
@@ -969,7 +1122,9 @@ class VoicePresenceView {
         document.documentElement.append(this.host);
         this.orb = this.require('[data-role="orb"]');
         this.modalLayer = this.require('[data-role="activation-layer"]');
-        this.agreement = this.require('[data-role="agreement"]');
+        this.pageAssistanceLayer = this.require('[data-role="page-assistance-layer"]');
+        this.pageAssistanceAlways = this.require('[data-role="page-assistance-always"]');
+        this.pageAssistanceRevoke = this.require('[data-role="page-assistance-revoke"]');
         this.captionStage = this.require(".caption-stage");
         this.subtitleTrack = this.require('[data-role="subtitle-track"]');
         this.statusBubble = this.require('[data-role="status-bubble"]');
@@ -979,6 +1134,10 @@ class VoicePresenceView {
         this.liveRegion = this.require('[data-role="live-region"]');
         this.audio = this.require("audio");
         this.highlight = this.require(".action-highlight");
+        this.dialogFocus = new dialogFocusScope_js_1.DialogFocusScope(this.shadow, this.host);
+        this.reducedMotionQuery =
+            window.matchMedia?.("(prefers-reduced-motion: reduce)") ?? null;
+        this.reducedMotionQuery?.addEventListener?.("change", this.onReducedMotionChange);
         if (typeof ResizeObserver !== "undefined") {
             this.captionResizeObserver = new ResizeObserver(this.scheduleCaptionLayout);
             this.highlightResizeObserver = new ResizeObserver(this.scheduleHighlightLayout);
@@ -988,6 +1147,13 @@ class VoicePresenceView {
             this.host.dataset.state = state;
         });
         this.applyConfig();
+        if (options.previewMode) {
+            for (const link of this.shadow.querySelectorAll("a")) {
+                link.removeAttribute("href");
+                link.removeAttribute("target");
+                link.tabIndex = -1;
+            }
+        }
         this.placement = new placement_js_1.LauncherPlacementController({
             host: this.host,
             preferredSide: this.voiceConfig.launcher.position,
@@ -998,8 +1164,97 @@ class VoicePresenceView {
         });
         this.bind();
         this.bindPlaybackState();
+        this.syncMotionPolicy();
         this.stateMachine.transition("launcher");
     }
+    open(_mode = "voice") {
+        void _mode;
+        if (!this.active && !this.activeElsewhere)
+            this.openActivation();
+    }
+    close() {
+        if (this.currentPageAssistanceRequest) {
+            this.resolvePageAssistanceRequest("decline");
+            return;
+        }
+        if (this.currentHandoffContextRequest) {
+            this.resolveHandoffContextRequest(false);
+            return;
+        }
+        if (this.currentVisualRequest) {
+            this.resolveVisualRequest(false);
+            return;
+        }
+        if (this.currentConfirmation) {
+            this.resolveConfirmation(false);
+            return;
+        }
+        this.closeActivation();
+    }
+    get isOpen() {
+        return !this.modalLayer.hidden || !this.pageAssistanceLayer.hidden;
+    }
+    rootElement() {
+        return this.host;
+    }
+    setSupportCompanion(linked) {
+        const action = this.require('[data-role="voice-support-action"]');
+        action.hidden = !linked;
+        if (linked && !action.classList.contains("has-reply")) {
+            action.textContent = this.messages.support;
+            action.setAttribute("aria-label", this.messages.support);
+        }
+    }
+    showSupportReplyNotice(visible) {
+        const action = this.require('[data-role="voice-support-action"]');
+        action.classList.toggle("has-reply", visible);
+        action.textContent = visible
+            ? `${this.messages.supportReply} · ${this.messages.viewSupport}`
+            : this.messages.support;
+        action.setAttribute("aria-label", action.textContent);
+    }
+    updatePreviewConfig(config) {
+        const voiceConfig = config.appearance?.voicePresence;
+        if (!voiceConfig?.enabled)
+            return false;
+        this.config = config;
+        this.voiceConfig = voiceConfig;
+        this.host.dataset.position = voiceConfig.launcher.position;
+        this.host.dataset.intensity = voiceConfig.visual.intensity;
+        this.setOrbTheme(voiceConfig.launcher.theme ?? "light");
+        this.applyConfig();
+        this.orb.setAttribute("aria-label", this.launcherLabel());
+        const firstLabel = this.shadow.querySelector('[data-role="first-label"]');
+        if (firstLabel) {
+            firstLabel.textContent = config.appearance?.launcherLabel || "Talk to us";
+        }
+        const title = this.shadow.querySelector("#oxvo-voice-title");
+        const description = this.shadow.querySelector("#oxvo-voice-description");
+        const close = this.shadow.querySelector('[data-role="activation-close"]');
+        const secondary = this.shadow.querySelector('[data-role="activation-secondary"]');
+        const primary = this.shadow.querySelector('[data-role="activation-primary"]');
+        if (title)
+            title.textContent = voiceConfig.activation.title;
+        if (description)
+            description.textContent = voiceConfig.activation.description;
+        close?.setAttribute("aria-label", voiceConfig.activation.secondaryLabel);
+        if (secondary)
+            secondary.textContent = voiceConfig.activation.secondaryLabel;
+        if (primary)
+            primary.textContent = voiceConfig.activation.primaryLabel;
+        const details = this.modalLayer.querySelector("details");
+        const summary = details?.querySelector("summary");
+        if (summary) {
+            summary.textContent =
+                voiceConfig.activation.detailsLabel || this.messages.legalDetails;
+        }
+        const disclosure = details?.querySelector(".legal-copy p");
+        if (disclosure) {
+            disclosure.textContent =
+                config.consent?.disclosure || this.messages.disclosure;
+        }
+        return true;
+    }
     setRemoteStream(stream) {
         const previous = this.audio.srcObject;
         if (previous &&
@@ -1018,6 +1273,7 @@ class VoicePresenceView {
     }
     setCapabilityTier(tier) {
         this.capabilityTier = tier;
+        this.syncMotionPolicy();
     }
     setOrbTheme(theme) {
         this.host.dataset.orbTheme = theme;
@@ -1077,14 +1333,12 @@ class VoicePresenceView {
     setAssistantState(state) {
         if (!this.active)
             return;
+        this.serverPresenceState = state;
         if (state === "thinking" || state === "speaking") {
             this.resumeRemotePlayback();
         }
-        this.stateMachine.transition(`active.${state}`);
-        if (state === "listening" || state === "speaking")
-            this.startLevelLoop();
-        else
-            this.stopLevelLoop();
+        this.stateMachine.transition(this.effectivePresenceState());
+        this.syncLevelLoop();
     }
     applyPresenceState(state, sequence, sessionId, pageId, fencingToken) {
         this.serverPresenceState = state;
@@ -1109,7 +1363,7 @@ class VoicePresenceView {
         this.closeActivation(false);
     }
     showRequestingMicrophone() {
-        this.recoveryCard.hidden = true;
+        this.hideRecoveryCard(false);
         this.orb.hidden = false;
         this.stateMachine.transition("requesting_microphone");
         this.showTransientStatus("Requesting microphone access", 0);
@@ -1139,7 +1393,7 @@ class VoicePresenceView {
         this.stateMachine.transition("active.ready");
         if (!this.introPlayed &&
             this.voiceConfig.visual.introWake &&
-            this.capabilityTier === "standard") {
+            this.motionEnabled()) {
             this.introPlayed = true;
             this.orb.classList.add("wake");
             this.wakeTimer = setTimeout(() => {
@@ -1204,12 +1458,29 @@ class VoicePresenceView {
         this.announce(`${role === "assistant" ? "AI" : "You"}: ${normalized}`);
     }
     showConfirmation(value) {
+        this.dismissHandoffRequestPreparing();
+        if (this.currentConfirmation?.actionId === value.actionId &&
+            this.currentConfirmation.proposalChecksum === value.proposalChecksum) {
+            return;
+        }
+        if (this.currentHandoffContextRequest) {
+            this.resolveHandoffContextRequest(false);
+        }
+        if (this.currentVisualRequest)
+            this.resolveVisualRequest(false);
+        if (this.currentConfirmation)
+            this.resolveConfirmation(false);
         this.currentConfirmation = value;
-        this.currentVisualRequest = null;
         this.hideStatus();
         this.stateMachine.transition("active.awaiting_confirmation");
         const presentation = confirmationPresentation(value, this.messages.actionRequest, this.messages.approve);
-        this.renderSafetyCard(presentation.title, presentation.copy, presentation.approve, this.messages.decline, () => this.resolveConfirmation(true), () => this.resolveConfirmation(false));
+        this.renderSafetyCard(presentation.title, presentation.copy, presentation.approve, this.messages.decline, () => this.resolvePendingConfirmation(true, {
+            actionId: value.actionId,
+            proposalChecksum: value.proposalChecksum,
+        }), () => this.resolvePendingConfirmation(false, {
+            actionId: value.actionId,
+            proposalChecksum: value.proposalChecksum,
+        }));
     }
     showActionState(status) {
         this.currentConfirmation = null;
@@ -1224,7 +1495,9 @@ class VoicePresenceView {
             this.hideStatus();
             return;
         }
-        this.showTransientStatus(this.messages.actionFailed, 3500);
+        this.showTransientStatus(status === "unconfirmed"
+            ? this.messages.actionVerificationExpired
+            : this.messages.actionFailed, status === "unconfirmed" ? 6000 : 3500);
     }
     dismissActionState() {
         this.currentConfirmation = null;
@@ -1234,18 +1507,182 @@ class VoicePresenceView {
             this.stateMachine.transition("active.ready");
     }
     showVisualRequest(value) {
+        this.dismissHandoffRequestPreparing();
+        if (this.currentPageAssistanceRequest) {
+            this.resolvePageAssistanceRequest("decline");
+        }
+        if (this.currentHandoffContextRequest) {
+            this.resolveHandoffContextRequest(false);
+        }
+        if (this.currentVisualRequest)
+            this.resolveVisualRequest(false);
+        if (this.currentConfirmation)
+            this.resolveConfirmation(false);
         this.currentVisualRequest = value;
-        this.currentConfirmation = null;
         this.hideStatus();
         this.stateMachine.transition("active.awaiting_confirmation");
-        this.renderSafetyCard(this.messages.visualRequest, value.reason, this.messages.shareVisual, this.messages.declineVisual, () => this.resolveVisualRequest(true), () => this.resolveVisualRequest(false));
+        this.renderSafetyCard(this.messages.visualRequest, value.reason, this.messages.shareVisual, this.messages.declineVisual, () => {
+            if (this.currentVisualRequest === value)
+                this.resolveVisualRequest(true);
+        }, () => {
+            if (this.currentVisualRequest === value)
+                this.resolveVisualRequest(false);
+        });
     }
     showVisualResult(shared) {
+        if (this.currentHandoffContextRequest)
+            return;
         this.currentVisualRequest = null;
         this.hideSafetyCard();
         this.stateMachine.transition("active.ready");
         this.showTransientStatus(shared ? this.messages.visualShared : this.messages.visualUnavailable, 3500);
     }
+    showHandoffRequestPreparing(title, description) {
+        if (this.currentHandoffContextRequest || this.handoffRequestPreparing) {
+            return;
+        }
+        this.handoffRequestPreparing = true;
+        this.hideStatus();
+        this.stateMachine.transition("active.awaiting_confirmation");
+        const heading = document.createElement("h3");
+        heading.className = "card-title";
+        heading.textContent = title.slice(0, 160);
+        const body = document.createElement("p");
+        body.className = "card-copy";
+        body.textContent = description.slice(0, 600);
+        this.safetyCard.replaceChildren(heading, body);
+        this.safetyCard.setAttribute("role", "status");
+        this.safetyCard.setAttribute("aria-live", "polite");
+        this.safetyCard.setAttribute("aria-busy", "true");
+        this.safetyCard.removeAttribute("aria-modal");
+        this.safetyCard.removeAttribute("aria-labelledby");
+        this.safetyCard.removeAttribute("aria-describedby");
+        this.safetyCard.hidden = false;
+        this.syncSubtitleOcclusion();
+    }
+    dismissHandoffRequestPreparing() {
+        if (!this.handoffRequestPreparing)
+            return;
+        this.handoffRequestPreparing = false;
+        this.hideSafetyCard();
+        if (this.active)
+            this.stateMachine.transition("active.ready");
+    }
+    showHandoffContextRequest(value) {
+        this.dismissHandoffRequestPreparing();
+        const exactRequest = this.currentHandoffContextRequest?.requestId === value.requestId &&
+            this.currentHandoffContextRequest.requestChecksum ===
+                value.requestChecksum;
+        if (exactRequest &&
+            !this.safetyCard.hidden &&
+            this.safetyCard.isConnected &&
+            this.safetyCard.querySelector('[data-role="safety-decline"]') &&
+            this.safetyCard.querySelector('[data-role="safety-approve"]')) {
+            return true;
+        }
+        if (!exactRequest) {
+            if (this.currentPageAssistanceRequest) {
+                this.resolvePageAssistanceRequest("decline");
+            }
+            if (this.currentVisualRequest)
+                this.resolveVisualRequest(false);
+            if (this.currentHandoffContextRequest) {
+                this.resolveHandoffContextRequest(false);
+            }
+            if (this.currentConfirmation)
+                this.resolveConfirmation(false);
+            this.currentHandoffContextRequest = value;
+        }
+        const activeRequest = exactRequest
+            ? this.currentHandoffContextRequest
+            : value;
+        this.hideStatus();
+        this.stateMachine.transition("active.awaiting_confirmation");
+        this.renderSafetyCard(activeRequest.title, activeRequest.description, this.messages.handoffContextShare, this.messages.handoffContextNotNow, () => {
+            if (this.currentHandoffContextRequest === activeRequest)
+                this.resolveHandoffContextRequest(true);
+        }, () => {
+            if (this.currentHandoffContextRequest === activeRequest)
+                this.resolveHandoffContextRequest(false);
+        });
+        return Boolean(this.currentHandoffContextRequest?.requestId === activeRequest.requestId &&
+            this.currentHandoffContextRequest.requestChecksum ===
+                activeRequest.requestChecksum &&
+            !this.safetyCard.hidden &&
+            this.safetyCard.isConnected &&
+            this.safetyCard.querySelector('[data-role="safety-decline"]') &&
+            this.safetyCard.querySelector('[data-role="safety-approve"]'));
+    }
+    dismissHandoffContextRequest() {
+        this.dismissHandoffRequestPreparing();
+        this.currentHandoffContextRequest = null;
+        if (this.currentConfirmation ||
+            this.currentVisualRequest ||
+            this.currentPageAssistanceRequest) {
+            return;
+        }
+        this.hideSafetyCard();
+        if (this.active)
+            this.stateMachine.transition("active.ready");
+    }
+    showHandoffContextResult(status) {
+        this.dismissHandoffContextRequest();
+        if (status === "granted") {
+            this.showTransientStatus(this.messages.humanConnecting, 3500);
+            return;
+        }
+        if (status === "expired" || status === "unavailable") {
+            this.showTransientStatus(this.messages.humanUnavailable, 3500);
+            return;
+        }
+        this.hideStatus();
+    }
+    showPageAssistanceRequest(value) {
+        this.dismissHandoffRequestPreparing();
+        if (this.currentConfirmation)
+            this.resolveConfirmation(false);
+        if (this.currentVisualRequest)
+            this.resolveVisualRequest(false);
+        if (this.currentHandoffContextRequest) {
+            this.resolveHandoffContextRequest(false);
+        }
+        if (this.currentPageAssistanceRequest?.requestId === value.requestId)
+            return;
+        if (this.currentPageAssistanceRequest) {
+            this.resolvePageAssistanceRequest("decline", false);
+        }
+        this.currentPageAssistanceRequest = value;
+        const description = compactUiText(value.safeActionDescription, 360);
+        this.require('[data-role="page-assistance-description"]').textContent =
+            description || PAGE_ASSISTANCE_FALLBACK;
+        this.require('[data-role="page-assistance-target"]').textContent =
+            compactUiText(value.safeTargetLabel, 160);
+        const alwaysLabel = this.require('[data-role="page-assistance-always-label"]');
+        this.pageAssistanceAlways.checked = false;
+        alwaysLabel.hidden = !value.persistenceEligible;
+        this.pageAssistanceLayer.hidden = false;
+        this.syncPageAssistanceRevoke();
+        this.hideStatus();
+        this.syncSubtitleOcclusion();
+        if (this.active)
+            this.stateMachine.transition("active.awaiting_confirmation");
+        this.callbacks.onOpenChange?.(true);
+        this.dialogFocus.present({
+            surface: this.pageAssistanceLayer,
+            initialFocus: () => this.require('[data-role="page-assistance-decline"]'),
+            fallbackFocus: () => (this.orb.hidden ? null : this.orb),
+            onEscape: () => {
+                this.resolvePageAssistanceRequest("decline");
+            },
+        });
+    }
+    dismissPageAssistanceRequest() {
+        this.hidePageAssistanceRequest(true);
+    }
+    setPageAssistancePersistentAllowed(allowed) {
+        this.pageAssistancePersistentAllowed = allowed;
+        this.syncPageAssistanceRevoke();
+    }
     setVisualAvailable(_available, _paused = false) {
         void _available;
         void _paused;
@@ -1281,6 +1718,11 @@ class VoicePresenceView {
             this.stateMachine.transition("active.ready");
     }
     showError(message, retryable = false, sessionActive = this.active) {
+        this.hidePageAssistanceRequest(false);
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.currentHandoffContextRequest = null;
+        this.hideSafetyCard();
         const safeMessage = message || this.messages.error;
         if (sessionActive && this.active) {
             this.stateMachine.transition(retryable ? "recoverable_error" : "terminal_error");
@@ -1293,11 +1735,66 @@ class VoicePresenceView {
         this.orb.hidden = true;
         this.renderRecoveryCard(safeMessage, retryable);
     }
+    showEndingDetached(message) {
+        this.active = false;
+        this.hidePageAssistanceRequest(false);
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.currentHandoffContextRequest = null;
+        this.hideSafetyCard();
+        this.hideRecoveryCard(false);
+        this.clearCaptions();
+        this.hideStatus();
+        this.hideAttribution();
+        this.stopAudio();
+        this.stateMachine.transition("ending");
+        this.orb.dataset.active = "false";
+        this.orb.hidden = true;
+        this.showTransientStatus(message || this.messages.ending, 0);
+        this.placement.refresh();
+    }
+    showEndRetry(message) {
+        this.active = true;
+        this.orb.hidden = false;
+        this.orb.dataset.active = "true";
+        this.stateMachine.transition("terminal_error");
+        this.renderRecoveryCard(message || this.messages.endRetry, false, {
+            label: this.messages.end,
+            onSelect: () => {
+                this.hideRecoveryCard();
+                this.stateMachine.transition("ending");
+                this.callbacks.onEnd();
+            },
+        });
+        this.placement.refresh();
+    }
+    showResumeStopped() {
+        this.active = false;
+        this.hidePageAssistanceRequest(false);
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.currentHandoffContextRequest = null;
+        this.hideSafetyCard();
+        this.hideRecoveryCard(false);
+        this.clearCaptions();
+        this.hideStatus();
+        this.hideAttribution();
+        this.stopAudio();
+        this.orb.dataset.active = "false";
+        this.orb.hidden = false;
+        this.orb.setAttribute("aria-label", this.launcherLabel());
+        this.stateMachine.reset();
+        this.stateMachine.transition("launcher");
+        this.placement.refresh();
+    }
     showEnded(message) {
         this.active = false;
+        this.hidePageAssistanceRequest(false);
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.currentHandoffContextRequest = null;
         this.hideSafetyCard();
-        this.recoveryCard.hidden = true;
-        this.recoveryCard.replaceChildren();
+        this.hideRecoveryCard(false);
         this.clearCaptions();
         this.hideStatus();
         this.stopAudio();
@@ -1320,9 +1817,13 @@ class VoicePresenceView {
         this.orb.hidden = active;
         this.orb.setAttribute("aria-label", active ? this.messages.activeElsewhere : this.launcherLabel());
         if (active) {
+            this.hidePageAssistanceRequest(false);
+            this.currentConfirmation = null;
+            this.currentVisualRequest = null;
+            this.currentHandoffContextRequest = null;
             this.closeActivation(false);
             this.hideSafetyCard();
-            this.recoveryCard.hidden = true;
+            this.hideRecoveryCard(false);
             this.hideStatus();
             return;
         }
@@ -1330,6 +1831,11 @@ class VoicePresenceView {
     }
     showLaunchUnavailable(message) {
         this.active = false;
+        this.hidePageAssistanceRequest(false);
+        this.currentConfirmation = null;
+        this.currentVisualRequest = null;
+        this.currentHandoffContextRequest = null;
+        this.hideSafetyCard();
         this.orb.hidden = true;
         this.renderRecoveryCard(message, false);
         this.stateMachine.reset();
@@ -1379,15 +1885,25 @@ class VoicePresenceView {
     cancelPendingConfirmation() {
         if (this.resolvePendingConfirmation(false))
             return true;
+        if (this.currentHandoffContextRequest) {
+            this.resolveHandoffContextRequest(false);
+            return true;
+        }
         if (this.currentVisualRequest) {
             this.resolveVisualRequest(false);
             return true;
         }
         return false;
     }
-    resolvePendingConfirmation(approved) {
-        if (!this.currentConfirmation)
+    resolvePendingConfirmation(approved, expected) {
+        const current = this.currentConfirmation;
+        if (!current)
+            return false;
+        if (expected &&
+            (current.actionId !== expected.actionId ||
+                current.proposalChecksum !== expected.proposalChecksum)) {
             return false;
+        }
         this.resolveConfirmation(approved);
         return true;
     }
@@ -1396,11 +1912,11 @@ class VoicePresenceView {
             return;
         this.destroyed = true;
         document.removeEventListener("visibilitychange", this.onVisibilityChange);
+        this.reducedMotionQuery?.removeEventListener?.("change", this.onReducedMotionChange);
         document.removeEventListener("scroll", this.scheduleHighlightLayout, true);
         window.removeEventListener("resize", this.scheduleHighlightLayout);
         window.visualViewport?.removeEventListener("resize", this.scheduleHighlightLayout);
         window.visualViewport?.removeEventListener("scroll", this.scheduleHighlightLayout);
-        this.modalLayer.removeEventListener("keydown", this.onModalKeyDown);
         if (this.wakeTimer)
             clearTimeout(this.wakeTimer);
         if (this.statusTimer)
@@ -1414,6 +1930,7 @@ class VoicePresenceView {
         this.captionResizeObserver?.disconnect();
         this.highlightResizeObserver?.disconnect();
         this.unbindHighlightScrollTargets();
+        this.dialogFocus.destroy();
         this.placement.destroy();
         this.clearCaptions();
         this.stopAudio();
@@ -1456,13 +1973,30 @@ class VoicePresenceView {
         safety.dataset.role = "safety-card";
         safety.hidden = true;
         safety.setAttribute("role", "alertdialog");
-        safety.setAttribute("aria-modal", "false");
+        safety.setAttribute("aria-modal", "true");
+        safety.setAttribute("aria-labelledby", "oxvo-voice-safety-title");
+        safety.setAttribute("aria-describedby", "oxvo-voice-safety-copy");
         const recovery = document.createElement("div");
         recovery.className = "recovery-card";
         recovery.dataset.role = "recovery-card";
         recovery.hidden = true;
         recovery.setAttribute("role", "alertdialog");
-        recovery.setAttribute("aria-modal", "false");
+        recovery.setAttribute("aria-modal", "true");
+        const pageAssistanceRevoke = document.createElement("button");
+        pageAssistanceRevoke.type = "button";
+        pageAssistanceRevoke.className = "page-assistance-revoke";
+        pageAssistanceRevoke.dataset.role = "page-assistance-revoke";
+        pageAssistanceRevoke.textContent = PAGE_ASSISTANCE_REVOKE;
+        pageAssistanceRevoke.setAttribute("aria-label", PAGE_ASSISTANCE_REVOKE);
+        pageAssistanceRevoke.hidden = true;
+        const supportAction = document.createElement("button");
+        supportAction.type = "button";
+        supportAction.className = "voice-support-action";
+        supportAction.dataset.role = "voice-support-action";
+        supportAction.textContent = this.messages.support;
+        supportAction.setAttribute("aria-label", this.messages.support);
+        supportAction.setAttribute("aria-live", "polite");
+        supportAction.hidden = true;
         const orb = document.createElement("button");
         orb.type = "button";
         orb.className = "orb";
@@ -1496,7 +2030,7 @@ class VoicePresenceView {
             label.textContent = this.config.appearance?.launcherLabel || "Talk to us";
             orbWrap.append(label);
         }
-        orbWrap.append(captions, status, attribution, safety, recovery, orb);
+        orbWrap.append(captions, status, attribution, safety, recovery, pageAssistanceRevoke, supportAction, orb);
         const modalLayer = document.createElement("div");
         modalLayer.className = "dialog-layer";
         modalLayer.dataset.role = "activation-layer";
@@ -1524,24 +2058,21 @@ class VoicePresenceView {
         close.setAttribute("aria-label", this.voiceConfig.activation.secondaryLabel);
         close.append(icon(lucide_1.X, "close-symbol"));
         head.append(copy, close);
-        const agreement = document.createElement("label");
-        agreement.className = "agreement";
-        const checkbox = document.createElement("input");
-        checkbox.type = "checkbox";
-        checkbox.checked = true;
-        checkbox.dataset.role = "agreement";
-        const agreementText = document.createElement("span");
-        agreementText.textContent = `I agree to use ${this.config.appearance?.brandName || "AI voice assist"}.`;
-        agreement.append(checkbox, agreementText);
-        if (this.voiceConfig.activation.detailsLabel) {
+        const pageContextDisclosed = this.config.capabilities?.pageContext === true &&
+            this.config.consent?.requiredScopes.includes("page_context") === true;
+        if (this.voiceConfig.activation.detailsLabel || pageContextDisclosed) {
             const details = document.createElement("details");
             const summary = document.createElement("summary");
-            summary.textContent = this.voiceConfig.activation.detailsLabel;
+            summary.textContent =
+                this.voiceConfig.activation.detailsLabel || this.messages.legalDetails;
             const legal = document.createElement("div");
             legal.className = "legal-copy";
             const disclosure = document.createElement("p");
             disclosure.textContent =
                 this.config.consent?.disclosure || this.messages.disclosure;
+            const pageContext = document.createElement("p");
+            pageContext.textContent = this.messages.pageConsent;
+            pageContext.hidden = !pageContextDisclosed;
             const boundary = document.createElement("p");
             boundary.textContent = this.messages.safetyBoundary;
             const links = document.createElement("div");
@@ -1552,12 +2083,12 @@ class VoicePresenceView {
             if (this.config.consent?.termsUrl) {
                 links.append(this.legalLink(this.config.consent.termsUrl, this.messages.termsOfService));
             }
-            legal.append(disclosure, boundary, links);
+            legal.append(disclosure, pageContext, boundary, links);
             details.append(summary, legal);
-            dialog.append(head, agreement, details);
+            dialog.append(head, details);
         }
         else {
-            dialog.append(head, agreement);
+            dialog.append(head);
         }
         const actions = document.createElement("div");
         actions.className = "dialog-actions";
@@ -1574,6 +2105,63 @@ class VoicePresenceView {
         actions.append(secondary, primary);
         dialog.append(actions);
         modalLayer.append(dialog);
+        const pageAssistanceLayer = document.createElement("div");
+        pageAssistanceLayer.className = "dialog-layer";
+        pageAssistanceLayer.dataset.role = "page-assistance-layer";
+        pageAssistanceLayer.hidden = true;
+        const pageAssistanceDialog = document.createElement("section");
+        pageAssistanceDialog.className = "dialog page-assistance-dialog";
+        pageAssistanceDialog.setAttribute("role", "alertdialog");
+        pageAssistanceDialog.setAttribute("aria-modal", "true");
+        pageAssistanceDialog.setAttribute("aria-labelledby", "oxvo-page-assistance-title");
+        pageAssistanceDialog.setAttribute("aria-describedby", "oxvo-page-assistance-description oxvo-page-assistance-target");
+        const pageAssistanceHead = document.createElement("div");
+        pageAssistanceHead.className = "dialog-head";
+        const pageAssistanceCopy = document.createElement("div");
+        pageAssistanceCopy.className = "page-assistance-copy";
+        const pageAssistanceTitle = document.createElement("h2");
+        pageAssistanceTitle.id = "oxvo-page-assistance-title";
+        pageAssistanceTitle.textContent = PAGE_ASSISTANCE_TITLE;
+        const pageAssistanceDescription = document.createElement("p");
+        pageAssistanceDescription.id = "oxvo-page-assistance-description";
+        pageAssistanceDescription.dataset.role = "page-assistance-description";
+        pageAssistanceDescription.textContent = PAGE_ASSISTANCE_FALLBACK;
+        const pageAssistanceTarget = document.createElement("p");
+        pageAssistanceTarget.id = "oxvo-page-assistance-target";
+        pageAssistanceTarget.className = "page-assistance-target";
+        pageAssistanceTarget.dataset.role = "page-assistance-target";
+        pageAssistanceCopy.append(pageAssistanceTitle, pageAssistanceDescription, pageAssistanceTarget);
+        const pageAssistanceClose = document.createElement("button");
+        pageAssistanceClose.type = "button";
+        pageAssistanceClose.className = "icon-button";
+        pageAssistanceClose.dataset.role = "page-assistance-close";
+        pageAssistanceClose.setAttribute("aria-label", PAGE_ASSISTANCE_DECLINE);
+        pageAssistanceClose.append(icon(lucide_1.X, "close-symbol"));
+        pageAssistanceHead.append(pageAssistanceCopy, pageAssistanceClose);
+        const pageAssistanceAlways = document.createElement("label");
+        pageAssistanceAlways.className = "page-assistance-always";
+        pageAssistanceAlways.dataset.role = "page-assistance-always-label";
+        const pageAssistanceCheckbox = document.createElement("input");
+        pageAssistanceCheckbox.type = "checkbox";
+        pageAssistanceCheckbox.dataset.role = "page-assistance-always";
+        const pageAssistanceAlwaysText = document.createElement("span");
+        pageAssistanceAlwaysText.textContent = PAGE_ASSISTANCE_ALWAYS;
+        pageAssistanceAlways.append(pageAssistanceCheckbox, pageAssistanceAlwaysText);
+        const pageAssistanceActions = document.createElement("div");
+        pageAssistanceActions.className = "dialog-actions";
+        const pageAssistanceDecline = document.createElement("button");
+        pageAssistanceDecline.type = "button";
+        pageAssistanceDecline.className = "button";
+        pageAssistanceDecline.dataset.role = "page-assistance-decline";
+        pageAssistanceDecline.textContent = PAGE_ASSISTANCE_DECLINE;
+        const pageAssistanceAllow = document.createElement("button");
+        pageAssistanceAllow.type = "button";
+        pageAssistanceAllow.className = "button primary";
+        pageAssistanceAllow.dataset.role = "page-assistance-allow";
+        pageAssistanceAllow.textContent = PAGE_ASSISTANCE_ALLOW;
+        pageAssistanceActions.append(pageAssistanceDecline, pageAssistanceAllow);
+        pageAssistanceDialog.append(pageAssistanceHead, pageAssistanceAlways, pageAssistanceActions);
+        pageAssistanceLayer.append(pageAssistanceDialog);
         const live = document.createElement("div");
         live.className = "hidden-live";
         live.dataset.role = "live-region";
@@ -1586,7 +2174,7 @@ class VoicePresenceView {
         const highlight = document.createElement("div");
         highlight.className = "action-highlight";
         highlight.setAttribute("aria-hidden", "true");
-        fragment.append(presenceField, orbWrap, modalLayer, live, audio, highlight);
+        fragment.append(presenceField, orbWrap, modalLayer, pageAssistanceLayer, live, audio, highlight);
         return fragment;
     }
     bind() {
@@ -1602,27 +2190,55 @@ class VoicePresenceView {
         });
         this.require('[data-role="activation-close"]').addEventListener("click", () => this.closeActivation());
         this.require('[data-role="activation-secondary"]').addEventListener("click", () => this.closeActivation());
-        this.require('[data-role="activation-primary"]').addEventListener("click", () => {
-            if (!this.agreement.checked) {
-                this.agreement.focus();
+        const activationPrimary = this.require('[data-role="activation-primary"]');
+        activationPrimary.addEventListener("click", () => {
+            if (this.modalLayer.hidden || activationPrimary.disabled)
+                return;
+            activationPrimary.disabled = true;
+            activationPrimary.setAttribute("aria-busy", "true");
+            const requiredScopes = new Set(this.config.consent?.requiredScopes ?? []);
+            const scopes = [
+                "ai_disclosure",
+                "text",
+                "microphone",
+            ];
+            for (const scope of [
+                "page_context",
+                "presentation_guidance",
+            ]) {
+                if (requiredScopes.has(scope))
+                    scopes.push(scope);
+            }
+            if (!this.callbacks.onStart("voice", scopes)) {
+                activationPrimary.disabled = false;
+                activationPrimary.removeAttribute("aria-busy");
+                activationPrimary.focus({ preventScroll: true });
                 return;
             }
             this.ensureAudioContext();
             this.showPreflight();
-            const consent = this.config.consent;
-            const scopes = [
-                ...new Set([
-                    ...(consent?.requiredScopes ?? []),
-                    ...(consent?.optionalScopes ?? []),
-                ]),
-            ];
-            this.callbacks.onStart("voice", scopes);
         });
-        this.modalLayer.addEventListener("keydown", this.onModalKeyDown);
         this.modalLayer.addEventListener("pointerdown", (event) => {
             if (event.target === this.modalLayer)
                 this.closeActivation();
         });
+        this.pageAssistanceLayer.addEventListener("pointerdown", (event) => {
+            if (event.target === this.pageAssistanceLayer) {
+                this.resolvePageAssistanceRequest("decline");
+            }
+        });
+        this.require('[data-role="page-assistance-close"]').addEventListener("click", () => this.resolvePageAssistanceRequest("decline"));
+        this.require('[data-role="page-assistance-decline"]').addEventListener("click", () => this.resolvePageAssistanceRequest("decline"));
+        this.require('[data-role="page-assistance-allow"]').addEventListener("click", () => {
+            const persistent = this.currentPageAssistanceRequest?.persistenceEligible === true &&
+                this.pageAssistanceAlways.checked;
+            this.resolvePageAssistanceRequest(persistent ? "allow_persistent" : "allow_session");
+        });
+        this.pageAssistanceRevoke.addEventListener("click", () => {
+            this.setPageAssistancePersistentAllowed(false);
+            this.callbacks.onPageAssistanceRevoke?.();
+        });
+        this.require('[data-role="voice-support-action"]').addEventListener("click", () => this.callbacks.onHuman());
         document.addEventListener("visibilitychange", this.onVisibilityChange);
         document.addEventListener("scroll", this.scheduleHighlightLayout, {
             capture: true,
@@ -1687,9 +2303,10 @@ class VoicePresenceView {
             state === "reconnecting") {
             return `active.${state}`;
         }
-        if (this.playbackState === "playing")
-            return "active.speaking";
         if (state === "speaking") {
+            if (this.playbackState === "playing") {
+                return "active.speaking";
+            }
             return this.playbackState === "paused" || this.playbackState === "ended"
                 ? "active.ready"
                 : "active.thinking";
@@ -1729,31 +2346,35 @@ class VoicePresenceView {
         this.host.style.setProperty("--voice-orb-size", this.voiceConfig.launcher.size === "compact" ? "52px" : "58px");
     }
     openActivation() {
+        if (!this.modalLayer.hidden)
+            return;
         this.hideAttribution();
-        const shadowActiveElement = this.shadow.activeElement;
-        const documentActiveElement = document.activeElement;
-        this.restoreFocus =
-            shadowActiveElement instanceof HTMLElement
-                ? shadowActiveElement
-                : documentActiveElement instanceof HTMLElement &&
-                    documentActiveElement !== this.host
-                    ? documentActiveElement
-                    : this.orb;
         this.require('[data-role="first-label"]', false)?.remove();
         this.placement.refresh(true);
+        const primary = this.require('[data-role="activation-primary"]');
+        primary.disabled = false;
+        primary.removeAttribute("aria-busy");
         this.modalLayer.hidden = false;
         this.stateMachine.transition("activation_modal");
-        queueMicrotask(() => this.agreement.focus());
+        this.callbacks.onOpenChange?.(true);
+        this.dialogFocus.present({
+            surface: this.modalLayer,
+            initialFocus: () => primary,
+            fallbackFocus: () => (this.orb.hidden ? null : this.orb),
+            onEscape: () => this.closeActivation(),
+        });
     }
     closeActivation(restore = true) {
         if (this.modalLayer.hidden)
             return;
         this.modalLayer.hidden = true;
+        const primary = this.require('[data-role="activation-primary"]');
+        primary.disabled = false;
+        primary.removeAttribute("aria-busy");
         if (this.stateMachine.state === "activation_modal")
             this.stateMachine.transition("launcher");
-        if (restore)
-            this.restoreFocus?.focus();
-        this.restoreFocus = null;
+        this.callbacks.onOpenChange?.(false);
+        this.dialogFocus.dismiss(this.modalLayer, { restore });
         this.placement.refresh();
     }
     showAttribution() {
@@ -1772,12 +2393,46 @@ class VoicePresenceView {
         this.attributionTimer = null;
         this.attributionBubble.hidden = true;
     }
+    resolvePageAssistanceRequest(decision, restore = true) {
+        const request = this.currentPageAssistanceRequest;
+        if (!request)
+            return;
+        const normalizedDecision = decision === "allow_persistent" && !request.persistenceEligible
+            ? "allow_session"
+            : decision;
+        this.hidePageAssistanceRequest(restore);
+        this.callbacks.onPageAssistance?.(request, normalizedDecision);
+    }
+    hidePageAssistanceRequest(restore) {
+        if (!this.currentPageAssistanceRequest && this.pageAssistanceLayer.hidden) {
+            return;
+        }
+        const wasOpen = !this.pageAssistanceLayer.hidden;
+        this.currentPageAssistanceRequest = null;
+        this.pageAssistanceAlways.checked = false;
+        this.pageAssistanceLayer.hidden = true;
+        this.syncPageAssistanceRevoke();
+        this.syncSubtitleOcclusion();
+        if (this.active && this.stateMachine.state === "active.awaiting_confirmation") {
+            this.stateMachine.transition("active.ready");
+        }
+        if (wasOpen)
+            this.callbacks.onOpenChange?.(false);
+        this.dialogFocus.dismiss(this.pageAssistanceLayer, { restore });
+    }
+    syncPageAssistanceRevoke() {
+        this.pageAssistanceRevoke.hidden =
+            !this.pageAssistancePersistentAllowed || !this.pageAssistanceLayer.hidden;
+    }
     renderSafetyCard(title, copy, approveLabel, declineLabel, approve, decline) {
+        this.restoreSafetyDialogAttributes();
         const heading = document.createElement("h3");
         heading.className = "card-title";
+        heading.id = "oxvo-voice-safety-title";
         heading.textContent = title.slice(0, 160);
         const body = document.createElement("p");
         body.className = "card-copy";
+        body.id = "oxvo-voice-safety-copy";
         body.textContent = copy.slice(0, 600);
         const actions = document.createElement("div");
         actions.className = "card-actions";
@@ -1797,21 +2452,43 @@ class VoicePresenceView {
         this.safetyCard.replaceChildren(heading, body, actions);
         this.safetyCard.hidden = false;
         this.syncSubtitleOcclusion();
-        queueMicrotask(() => no.focus());
+        this.dialogFocus.present({
+            surface: this.safetyCard,
+            initialFocus: () => no,
+            fallbackFocus: () => (this.orb.hidden ? null : this.orb),
+            onEscape: decline,
+        });
     }
-    hideSafetyCard() {
+    hideSafetyCard(restore = true) {
+        this.handoffRequestPreparing = false;
         this.safetyCard.hidden = true;
         this.safetyCard.replaceChildren();
+        this.restoreSafetyDialogAttributes();
+        this.dialogFocus.dismiss(this.safetyCard, { restore });
+        if (!restore)
+            this.dialogFocus.clear({ restore: false });
         this.syncSubtitleOcclusion();
     }
+    restoreSafetyDialogAttributes() {
+        this.safetyCard.setAttribute("role", "alertdialog");
+        this.safetyCard.setAttribute("aria-modal", "true");
+        this.safetyCard.setAttribute("aria-labelledby", "oxvo-voice-safety-title");
+        this.safetyCard.setAttribute("aria-describedby", "oxvo-voice-safety-copy");
+        this.safetyCard.removeAttribute("aria-live");
+        this.safetyCard.removeAttribute("aria-busy");
+    }
     resolveConfirmation(approved) {
         const confirmation = this.currentConfirmation;
         if (!confirmation)
             return;
+        const accepted = approved && Date.parse(confirmation.expiresAt) > Date.now();
         this.currentConfirmation = null;
         this.hideSafetyCard();
         this.stateMachine.transition("active.ready");
-        this.callbacks.onConfirmation(confirmation.actionId, confirmation.proposalChecksum, approved);
+        if (approved && !accepted) {
+            this.showTransientStatus(this.messages.actionFailed, 3500);
+        }
+        this.callbacks.onConfirmation(confirmation.actionId, confirmation.proposalChecksum, accepted);
     }
     resolveVisualRequest(approved) {
         const request = this.currentVisualRequest;
@@ -1822,7 +2499,20 @@ class VoicePresenceView {
         this.stateMachine.transition("active.ready");
         this.callbacks.onVisualContext(request, approved);
     }
-    renderRecoveryCard(message, retryable) {
+    resolveHandoffContextRequest(approved) {
+        const request = this.currentHandoffContextRequest;
+        if (!request)
+            return;
+        this.currentHandoffContextRequest = null;
+        this.hideSafetyCard();
+        if (this.active)
+            this.stateMachine.transition("active.ready");
+        if (approved) {
+            this.showTransientStatus(this.messages.humanConnecting, 3500);
+        }
+        this.callbacks.onHandoffContext?.(request, approved);
+    }
+    renderRecoveryCard(message, retryable, primaryAction) {
         const badge = document.createElement("div");
         badge.className = "recovery-badge";
         badge.setAttribute("aria-hidden", "true");
@@ -1844,21 +2534,27 @@ class VoicePresenceView {
         close.setAttribute("aria-label", this.messages.close);
         close.append(icon(lucide_1.X, "close-symbol"));
         close.addEventListener("click", () => {
-            this.recoveryCard.hidden = true;
-            this.recoveryCard.replaceChildren();
-            this.syncSubtitleOcclusion();
+            this.hideRecoveryCard();
         });
         const heading = document.createElement("div");
         heading.className = "recovery-head";
         heading.append(badge, title, close);
-        if (retryable) {
+        let primary = null;
+        if (primaryAction) {
+            primary = document.createElement("button");
+            primary.type = "button";
+            primary.className = "button primary";
+            primary.textContent = primaryAction.label;
+            primary.addEventListener("click", primaryAction.onSelect);
+            actions.append(primary);
+        }
+        else if (retryable) {
             const retry = document.createElement("button");
             retry.type = "button";
             retry.className = "button primary";
             retry.append(icon(lucide_1.RefreshCw, "retry-symbol"), document.createTextNode(this.messages.retry));
             retry.addEventListener("click", () => {
-                this.recoveryCard.hidden = true;
-                this.syncSubtitleOcclusion();
+                this.hideRecoveryCard();
                 this.callbacks.onRetry();
             });
             actions.append(retry);
@@ -1875,9 +2571,7 @@ class VoicePresenceView {
                     : this.messages.requestHumanFallback;
             fallbackButton.addEventListener("click", () => {
                 fallbackButton.disabled = true;
-                this.recoveryCard.hidden = true;
-                this.recoveryCard.replaceChildren();
-                this.syncSubtitleOcclusion();
+                this.hideRecoveryCard();
                 this.onFallback(fallback);
             }, { once: true });
             actions.append(fallbackButton);
@@ -1889,9 +2583,27 @@ class VoicePresenceView {
             this.recoveryCard.append(actions);
         this.recoveryCard.hidden = false;
         this.syncSubtitleOcclusion();
+        this.dialogFocus.present({
+            surface: this.recoveryCard,
+            initialFocus: () => primary ?? close,
+            fallbackFocus: () => (this.orb.hidden ? null : this.orb),
+            onEscape: () => {
+                this.hideRecoveryCard();
+            },
+        });
+    }
+    hideRecoveryCard(restore = true) {
+        this.recoveryCard.hidden = true;
+        this.recoveryCard.replaceChildren();
+        this.dialogFocus.dismiss(this.recoveryCard, { restore });
+        if (!restore)
+            this.dialogFocus.clear({ restore: false });
+        this.syncSubtitleOcclusion();
     }
     syncSubtitleOcclusion() {
-        const occluded = !this.safetyCard.hidden || !this.recoveryCard.hidden;
+        const occluded = !this.safetyCard.hidden ||
+            !this.recoveryCard.hidden ||
+            !this.pageAssistanceLayer.hidden;
         this.captionStage.hidden = occluded;
         if (occluded) {
             this.host.style.setProperty("--voice-subtitle-height", "0px");
@@ -2095,6 +2807,7 @@ class VoicePresenceView {
     }
     startLevelLoop() {
         if (this.levelFrame !== null ||
+            !this.motionEnabled() ||
             !this.activeAnalyser() ||
             !this.levelBuffer ||
             document.hidden) {
@@ -2103,7 +2816,10 @@ class VoicePresenceView {
         const frame = (timestamp) => {
             this.levelFrame = null;
             const analyser = this.activeAnalyser();
-            if (!this.active || document.hidden || !analyser || !this.levelBuffer) {
+            if (!this.active ||
+                !this.motionEnabled() ||
+                !analyser ||
+                !this.levelBuffer) {
                 this.host.style.setProperty("--voice-level", "0");
                 return;
             }
@@ -2152,6 +2868,28 @@ class VoicePresenceView {
             void this.audioContext.close().catch(() => undefined);
         this.audioContext = null;
     }
+    motionEnabled() {
+        return (this.capabilityTier === "standard" &&
+            this.voiceConfig.visual.lowPowerMode !== "always" &&
+            !this.isReducedMotionRequested() &&
+            !document.hidden);
+    }
+    isReducedMotionRequested() {
+        return (this.reducedMotionQuery?.matches === true ||
+            window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true);
+    }
+    syncMotionPolicy() {
+        const staticMotion = this.capabilityTier !== "standard" ||
+            this.voiceConfig.visual.lowPowerMode === "always" ||
+            this.isReducedMotionRequested();
+        this.host.dataset.motion = staticMotion ? "off" : "on";
+        this.host.dataset.effectsPaused = String(staticMotion || document.hidden);
+        if (staticMotion || document.hidden) {
+            this.stopLevelLoop();
+            return;
+        }
+        this.syncLevelLoop();
+    }
     activeAnalyser() {
         if (this.stateMachine.state === "active.listening")
             return this.inputAnalyser;