@datalayer/agent-runtimes 1.5.44 → 1.5.46

package/lib/portable/semantic.js

@@ -0,0 +1,100 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The semantic agent events a chat host renders (Slack, Discord), version 1:
+ * a session's AG-UI stream reduced to what a host shows (`semanticOfAgUi.ts`),
+ * never a notebook widget or a web component. The contract and its fixture
+ * cases are `semantic-events.json`, beside this file, tested here
+ * (`__tests__/semantic.unit.test.ts`) and by the runtime that emits the
+ * events (`agent_runtimes/tests/test_semantic_events_contract.py`).
+ *
+ * Moved from the Slack service (plans/DISCORD.md DC-005, SLACK S-004, S-205).
+ *
+ * @module portable/semantic
+ */
+export const SEMANTIC_EVENTS_VERSION = 1;
+export const SEMANTIC_KINDS = [
+    'text',
+    'progress',
+    'tool',
+    'approval',
+    'table',
+    'file',
+    'citation',
+    'ask',
+    'completion',
+    'stop',
+    'error',
+];
+/** Whether an event ends the turn's presentation. */
+export function isTerminal(event) {
+    return (event.kind === 'completion' ||
+        event.kind === 'stop' ||
+        event.kind === 'error' ||
+        event.kind === 'ask');
+}
+const TABLE_ROW = /^\s*\|.*\|\s*$/;
+const TABLE_RULE = /^\s*\|(\s*:?-{3,}:?\s*\|)+\s*$/;
+const LINK = /\[([^\]\n]{1,300})\]\((https:\/\/[^\s)]{1,2000})\)/g;
+function cells(line) {
+    return line
+        .trim()
+        .replace(/^\|/, '')
+        .replace(/\|$/, '')
+        .split('|')
+        .map(cell => cell.trim());
+}
+/**
+ * The parts of an answer as a host shows them: its Markdown tables as tables,
+ * its HTTPS links as citations (once each, in order), the rest as words. Only
+ * `https:` links are citations: any other scheme stays words.
+ */
+export function answerParts(answer) {
+    const parts = [];
+    const lines = answer.split('\n');
+    let words = [];
+    const flush = () => {
+        const text = words.join('\n').trim();
+        if (text) {
+            parts.push({ kind: 'text', text });
+        }
+        words = [];
+    };
+    for (let index = 0; index < lines.length; index += 1) {
+        const line = lines[index] ?? '';
+        const rule = lines[index + 1] ?? '';
+        if (TABLE_ROW.test(line) && TABLE_RULE.test(rule)) {
+            flush();
+            const columns = cells(line);
+            const rows = [];
+            index += 2;
+            while (index < lines.length && TABLE_ROW.test(lines[index] ?? '')) {
+                const row = cells(lines[index] ?? '');
+                rows.push(columns.map((_, column) => row[column] ?? ''));
+                index += 1;
+            }
+            index -= 1;
+            parts.push({ kind: 'table', columns, rows });
+            continue;
+        }
+        words.push(line);
+    }
+    flush();
+    const seen = new Set();
+    for (const part of [...parts]) {
+        if (part.kind !== 'text') {
+            continue;
+        }
+        for (const match of part.text.matchAll(LINK)) {
+            const [, title, url] = match;
+            if (!title || !url || seen.has(url)) {
+                continue;
+            }
+            seen.add(url);
+            parts.push({ kind: 'citation', title, url });
+        }
+    }
+    return parts;
+}

package/lib/portable/semanticOfAgUi.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A session's AG-UI events reduced to the semantic events a chat host
+ * renders (`semantic.ts`, version 1). A stream is read with `AgUiFrames` or
+ * `readRunStream` (`agui.ts`); this says what each event means to a host.
+ *
+ * The runtime's `loop.turn` event says which turn a stream is and where it
+ * stands (`running`, `finished`, `failed`: agent_runtimes/loop/apps/
+ * external_turns.py); a stopped session's stream ends without a run end,
+ * so `stop` is never read from an event: the host that pressed Stop says it.
+ * A question is read from `RUN_FINISHED.result.asking` only: the run stream
+ * carries no `loop.ask` event (that is the record's word, `record.py`).
+ *
+ * Moved from the Slack service (plans/DISCORD.md DC-005, SLACK S-205).
+ *
+ * @module portable/semanticOfAgUi
+ */
+import type { AgUiEvent } from './agui';
+import type { AskQuestion, SemanticEvent } from './semantic';
+/** What one turn says of itself: its id, and whether it is a replay. */
+export type TurnInfo = Readonly<{
+    replayed: boolean;
+    session: string;
+    state: string;
+    turn: string;
+}>;
+/** The turn a `loop.turn` event names, or `undefined` for any other event. */
+export declare function turnOf(event: AgUiEvent): TurnInfo | undefined;
+/**
+ * The question a turn ends on (`RUN_FINISHED.result.asking`), as
+ * a host asks it, or `undefined` when the value is not a question. A kind a
+ * host does not know is answered in Datalayer, as a form (SLACK S-307):
+ * never guessed to be text. (`conversation.ts`'s `questionOf`, for a native
+ * client, throws on such a kind instead.)
+ */
+export declare function askQuestionOf(value: unknown): AskQuestion | undefined;
+/**
+ * The semantic events (version 1) one AG-UI event means: none for an event a
+ * host does not show. `tools` keeps each running call's name by its id, for
+ * its result.
+ */
+export declare function semanticOf(event: AgUiEvent, tools: Map<string, string>): SemanticEvent[];

package/lib/portable/semanticOfAgUi.js

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** A string field of an event, or the fallback: never an object stringified. */
+const stringOf = (value, fallback = '') => typeof value === 'string' ? value : fallback;
+const isRecord = (value) => Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+/** The turn a `loop.turn` event names, or `undefined` for any other event. */
+export function turnOf(event) {
+    if (event.type !== 'CUSTOM' || event.name !== 'loop.turn') {
+        return undefined;
+    }
+    const value = isRecord(event.value) ? event.value : {};
+    return {
+        replayed: value.replayed === true,
+        session: stringOf(value.session),
+        state: stringOf(value.state),
+        turn: stringOf(value.turn),
+    };
+}
+/** What a tool's result says of itself: JSON when it is JSON, else nothing. */
+function resultRecord(content) {
+    if (isRecord(content)) {
+        return content;
+    }
+    if (typeof content !== 'string') {
+        return undefined;
+    }
+    try {
+        const parsed = JSON.parse(content);
+        return isRecord(parsed) ? parsed : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * The question a turn ends on (`RUN_FINISHED.result.asking`), as
+ * a host asks it, or `undefined` when the value is not a question. A kind a
+ * host does not know is answered in Datalayer, as a form (SLACK S-307):
+ * never guessed to be text. (`conversation.ts`'s `questionOf`, for a native
+ * client, throws on such a kind instead.)
+ */
+export function askQuestionOf(value) {
+    if (!isRecord(value) || typeof value.prompt !== 'string') {
+        return undefined;
+    }
+    const kind = value.kind === 'text' ||
+        value.kind === 'choice' ||
+        value.kind === 'file' ||
+        value.kind === 'form'
+        ? value.kind
+        : 'form';
+    const options = Array.isArray(value.options)
+        ? value.options.filter((one) => typeof one === 'string')
+        : undefined;
+    return kind === 'choice'
+        ? { kind, prompt: value.prompt, options: options ?? [] }
+        : { kind, prompt: value.prompt };
+}
+/**
+ * The semantic events (version 1) one AG-UI event means: none for an event a
+ * host does not show. `tools` keeps each running call's name by its id, for
+ * its result.
+ */
+export function semanticOf(event, tools) {
+    switch (event.type) {
+        case 'TEXT_MESSAGE_CONTENT':
+        case 'TEXT_MESSAGE_CHUNK':
+            return typeof event.delta === 'string' && event.delta
+                ? [{ kind: 'text', text: event.delta }]
+                : [];
+        case 'TOOL_CALL_START': {
+            const id = stringOf(event.toolCallId);
+            const name = stringOf(event.toolCallName, 'a tool');
+            tools.set(id, name);
+            return [{ kind: 'tool', id, name, status: 'running' }];
+        }
+        case 'TOOL_CALL_RESULT': {
+            const id = stringOf(event.toolCallId);
+            const name = tools.get(id) ?? 'a tool';
+            const result = resultRecord(event.content);
+            if (result?.pending_approval === true) {
+                return [{ kind: 'approval', toolCallId: id, toolName: name }];
+            }
+            const failed = result?.success === false || result?.isError === true;
+            return [
+                { kind: 'tool', id, name, status: failed ? 'failed' : 'complete' },
+            ];
+        }
+        case 'STEP_STARTED':
+            return typeof event.stepName === 'string' && event.stepName
+                ? [{ kind: 'progress', label: event.stepName }]
+                : [];
+        case 'RUN_FINISHED': {
+            const asking = askQuestionOf(isRecord(event.result) ? event.result.asking : undefined);
+            return asking
+                ? [{ kind: 'ask', question: asking }]
+                : [{ kind: 'completion' }];
+        }
+        case 'RUN_ERROR':
+            return [
+                { kind: 'error', message: stringOf(event.message, 'The run failed.') },
+            ];
+        default:
+            return [];
+    }
+}

package/lib/protocols/A2AAdapter.js

@@ -10,6 +10,7 @@
 import { ORCHESTRATION_EXTENSION_URI, ENVELOPE_KEY as DATALAYER_META_KEY, readUsageMeta, } from '@datalayer/agent-teams';
 import { generateMessageId, createAssistantMessage } from '../types/messages';
 import { BaseProtocolAdapter } from './BaseProtocolAdapter';
+import { VOICE_SAY_EVENT, VOICE_SETTINGS_EVENT } from '../voice/sayAloud';
 /**
  * The header fasta2a-based workers (`agent-runtimes`'s own, and any other
  * built on it) actually read to activate an extension for one request —
@@ -432,6 +433,24 @@ export class A2AAdapter extends BaseProtocolAdapter {
         if (eventKind === 'status-update') {
             const state = task.status?.state;
             console.log('[A2AAdapter] Status update:', state, 'final:', task.final);
+            // The agent's voice and the lines it says aloud, in a working status
+            // message's metadata (VOICE.md VO-36): activities the chat says and
+            // captions, as AG-UI's `voice.settings` and `voice.say` custom events.
+            const voice = task.status?.message?.metadata?.voice;
+            if (voice?.settings) {
+                this.emit({
+                    type: 'activity',
+                    activity: { type: VOICE_SETTINGS_EVENT, data: voice.settings },
+                    timestamp: new Date(),
+                });
+            }
+            if (voice?.say) {
+                this.emit({
+                    type: 'activity',
+                    activity: { type: VOICE_SAY_EVENT, data: voice.say },
+                    timestamp: new Date(),
+                });
+            }
             if (task.final &&
                 (state === 'completed' || state === 'failed' || state === 'canceled')) {
                 // Only read the envelope once the worker actually named the

package/lib/protocols/VercelAIAdapter.js

@@ -627,6 +627,17 @@ export class VercelAIAdapter extends BaseProtocolAdapter {
                                     });
                                 }
                             }
+                            else if (typeof event.type === 'string' &&
+                                event.type.startsWith('data-')) {
+                                // What the server says besides the conversation's text, as
+                                // AG-UI's custom events say it: `data-voice.say`, a line the
+                                // agent says aloud, and `data-voice.settings` (VOICE.md VO-36).
+                                this.emit({
+                                    type: 'activity',
+                                    activity: { type: event.type, data: event.data },
+                                    timestamp: new Date(),
+                                });
+                            }
                         }
                         catch (parseError) {
                             console.error('[VercelAIAdapter] Failed to parse SSE data:', parseError);

package/lib/specs/voices.js

@@ -100,6 +100,68 @@ export const SPEECH_MODEL_CATALOGUE = {
             },
         ],
     },
+    'moonshine-base-en-server': {
+        id: 'moonshine-base-en-server',
+        version: '0.0.1',
+        name: 'Moonshine Base (English, server)',
+        description: "Speech to text on Datalayer's servers, in English: Useful Sensors' Moonshine Base (61M parameters), the same 8-bit ONNX export the browser runs, run by onnxruntime on the CPU with a greedy decoder. Its encoder is as long as the speech, with no 30-second window: measured beside Whisper small for short spoken turns (decision 18).",
+        provider: 'usefulsensors',
+        task: 'stt',
+        engine: 'onnxruntime',
+        dtype: 'q8',
+        languages: ['en'],
+        where: ['server'],
+        streaming: false,
+        licence: {
+            weights: 'MIT',
+            code: 'MIT',
+        },
+        attribution: '',
+        upstream: 'https://huggingface.co/UsefulSensors/moonshine-base',
+        revision: 'b1e9b6aae3c3c7298f10c3798393fdf38e8fbbad',
+        files: [
+            {
+                path: 'config.json',
+                sha256: 'fab7241d1e9fc6c2370c4c6dfb5da79bb54d67ed9ab6b507ac51d29d2abe01d1',
+                size: 922,
+            },
+            {
+                path: 'generation_config.json',
+                sha256: 'f9b3f711b57be7def2e50a8942f64f36ee0a55fad5b84ff93a687b6c5bcc1d44',
+                size: 147,
+            },
+            {
+                path: 'preprocessor_config.json',
+                sha256: 'fa43a7017ef85cd1d0fba0d9aae77c8adb16990ae6f11115631f41ec5d8aa679',
+                size: 128,
+            },
+            {
+                path: 'special_tokens_map.json',
+                sha256: 'ca3d163bab055381827226140568f3bef7eaac187cebd76878e0b63e9e442356',
+                size: 3,
+            },
+            {
+                path: 'tokenizer.json',
+                sha256: '7b913404bdd039af4756783218af4440bc07fb7d6d8258d677e34f95b3ec416f',
+                size: 3761754,
+            },
+            {
+                path: 'tokenizer_config.json',
+                sha256: 'edaee394565d428ea98a663ae7209cdcfeefc5585c42d7a570ff7c986df2cd15',
+                size: 135735,
+            },
+            {
+                path: 'onnx/encoder_model_quantized.onnx',
+                sha256: '1dd9ab0a7f987113d30affcba5a068d11c8f90fa0223caa3e491ade431ad9751',
+                size: 20513063,
+            },
+            {
+                path: 'onnx/decoder_model_merged_quantized.onnx',
+                sha256: 'cc9f3cd6698a369c6008b41aa60aa3fb3322e7f03c9bdf19d8e6b7200afca4f3',
+                size: 42498870,
+            },
+        ],
+    },
     'moonshine-base-en': {
         id: 'moonshine-base-en',
         version: '0.0.1',

package/lib/test-setup.js

@@ -68,20 +68,23 @@ class MockDataTransfer {
 // Add missing DOM APIs to global scope
 global.DragEvent = MockDragEvent;
 global.DataTransfer = MockDataTransfer;
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: (query) => ({
-        matches: false,
-        media: query,
-        onchange: null,
-        addListener: () => { }, // deprecated
-        removeListener: () => { }, // deprecated
-        addEventListener: () => { },
-        removeEventListener: () => { },
-        dispatchEvent: () => { },
-    }),
-});
+// Mock window.matchMedia. A test that runs in node (`@vitest-environment
+// node`, the portable host code: plans/DISCORD.md §4.2) has no window.
+if (typeof window !== 'undefined') {
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: (query) => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: () => { }, // deprecated
+            removeListener: () => { }, // deprecated
+            addEventListener: () => { },
+            removeEventListener: () => { },
+            dispatchEvent: () => { },
+        }),
+    });
+}
 // Mock Simple-related modules to prevent import errors
 import { vi } from 'vitest';
 vi.mock('@datalayer/jupyter-react', () => ({

package/lib/types/chat.d.ts

@@ -689,6 +689,11 @@ export interface ChatBaseProps {
          * Absent while its answers are not heard.
          */
         stopSpeaking?: () => void;
+        /**
+         * Marks the answer the person spoke over *interrupted* (VOICE.md
+         * VO-13), for a host whose composer holds the microphone.
+         */
+        markInterrupted: () => void;
     } | null) => void;
     /**
      * Reports whether the agent's voice is speaking, for a host that draws the
@@ -1013,6 +1018,11 @@ export interface ChatBaseProps {
     voice?: ChatVoice;
     /** The agent is speaking: the composer offers *Stop speaking* (`Esc`). */
     voiceSpeaking?: boolean;
+    /**
+     * The sentence the host's speaker is saying, marked in the conversation
+     * (VOICE.md VO-65); a chat that speaks for itself marks its own.
+     */
+    voiceSentence?: string;
     /** Stops the agent's voice: the composer's *Stop speaking*, and the microphone opening (VO-13). */
     onStopSpeaking?: () => void;
     /**

package/lib/voice/ComposerVoice.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from 'react';
 import { DeviceHearing } from './hearing';
 import { HandsFree } from './HandsFree';
-import { ServerHearing, hearingPlace } from './serverHearing';
+import { AutoHearing, ServerHearing, hearingPlace } from './serverHearing';
 import { VoiceInput } from './VoiceInput';
 import { VoiceMenu } from './VoiceMenu';
 /** Whether something rides on a run as a spoken message's metadata (VO-27). */
@@ -24,13 +24,20 @@ export function ComposerVoice({ voice, input, setInput, onSpoken, send, disabled
             return undefined;
         }
         const device = new DeviceHearing(voice.modelsUrl, voice.engines);
-        return place === 'server' && voice.speechUrl
+        const server = voice.speechUrl
             ? new ServerHearing(device, {
                 speechUrl: voice.speechUrl,
                 token: voice.token,
                 detect: voice.detect,
             })
-            : device;
+            : undefined;
+        // `where: auto` (§5): the device when it hears the language and its model
+        // loads, the server otherwise — and back to the device when the server
+        // refuses (a visitor's day spent).
+        if (server && !voice.detect && (voice.where ?? 'auto') === 'auto') {
+            return new AutoHearing(device, server, voice.language);
+        }
+        return place === 'server' && server ? server : device;
     }, [
         voice.input,
         voice.modelsUrl,
@@ -39,6 +46,8 @@ export function ComposerVoice({ voice, input, setInput, onSpoken, send, disabled
         voice.speechUrl,
         voice.token,
         voice.detect,
+        voice.where,
+        voice.language,
     ]);
     // What the box held when the microphone opened: the words heard go after it.
     const base = useRef('');

package/lib/voice/captions.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Captions always (VOICE.md VO-65): the sentence being said is marked in the
+ * open conversation, not by colour alone. The answer that holds it is marked
+ * `aria-current` and `data-voice-saying` with a bar beside it; the sentence
+ * itself is underlined in place through the CSS Custom Highlight API, which
+ * draws over the text without touching the DOM React owns. A browser without
+ * that API keeps the answer's mark.
+ *
+ * @module voice/captions
+ */
+import { type RefObject } from 'react';
+/** The name the sentence's highlight is registered under. */
+export declare const SAID_HIGHLIGHT = "voice-said";
+/**
+ * The id of the answer a sentence is being said from: the newest answer of
+ * the agent whose words hold it, or none.
+ */
+export declare function saidMessageId(items: readonly unknown[], sentence: string | undefined): string | undefined;
+/**
+ * Where a sentence is in what an element shows, as a `Range` over its text
+ * — across the bold, the links and the line breaks it is drawn with — or
+ * none when the element does not show it as said (a code block said as *a
+ * code block*).
+ */
+export declare function sentenceRange(root: Node, sentence: string): Range | undefined;
+/**
+ * Underlines `sentence` in the answer marked `data-voice-saying` under
+ * `root`, for as long as it is said; the mark goes when it ends. Drawn
+ * again whenever `version` changes (the answer still being written).
+ */
+export declare function useSaidSentence(root: RefObject<HTMLElement | null>, sentence: string | undefined, version: unknown): void;

package/lib/voice/captions.js

@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Captions always (VOICE.md VO-65): the sentence being said is marked in the
+ * open conversation, not by colour alone. The answer that holds it is marked
+ * `aria-current` and `data-voice-saying` with a bar beside it; the sentence
+ * itself is underlined in place through the CSS Custom Highlight API, which
+ * draws over the text without touching the DOM React owns. A browser without
+ * that API keeps the answer's mark.
+ *
+ * @module voice/captions
+ */
+import { useEffect } from 'react';
+import { plainWords } from './sentences';
+import { answerText } from './useSpokenAnswers';
+/** The name the sentence's highlight is registered under. */
+export const SAID_HIGHLIGHT = 'voice-said';
+/** What the sentence being said looks like: underlined, thick, offset. */
+const SAID_STYLE = `::highlight(${SAID_HIGHLIGHT}) {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  background-color: var(--bgColor-accent-muted, rgba(84, 174, 255, 0.2));
+}`;
+/** Words compared as words: spaces collapsed, case kept. */
+function squeezed(text) {
+    return text.replace(/\s+/g, ' ').trim();
+}
+/**
+ * The id of the answer a sentence is being said from: the newest answer of
+ * the agent whose words hold it, or none.
+ */
+export function saidMessageId(items, sentence) {
+    const said = squeezed(sentence ?? '');
+    if (!said) {
+        return undefined;
+    }
+    for (let index = items.length - 1; index >= 0; index -= 1) {
+        const text = answerText(items[index]);
+        if (text !== undefined && squeezed(plainWords(text)).includes(said)) {
+            const id = items[index].id;
+            return typeof id === 'string' ? id : undefined;
+        }
+    }
+    return undefined;
+}
+/**
+ * Where a sentence is in what an element shows, as a `Range` over its text
+ * — across the bold, the links and the line breaks it is drawn with — or
+ * none when the element does not show it as said (a code block said as *a
+ * code block*).
+ */
+export function sentenceRange(root, sentence) {
+    const said = squeezed(sentence);
+    if (!said || !root.ownerDocument) {
+        return undefined;
+    }
+    const document = root.ownerDocument;
+    const walker = document.createTreeWalker(root, 4 /* NodeFilter.SHOW_TEXT */);
+    // The text, spaces collapsed, and where each of its characters came from.
+    let text = '';
+    const from = [];
+    let space = true;
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const value = node.nodeValue ?? '';
+        for (let offset = 0; offset < value.length; offset += 1) {
+            const char = value[offset];
+            if (/\s/.test(char)) {
+                if (space) {
+                    continue;
+                }
+                space = true;
+                text += ' ';
+            }
+            else {
+                space = false;
+                text += char;
+            }
+            from.push({ node, offset });
+        }
+    }
+    const start = text.indexOf(said);
+    if (start < 0) {
+        return undefined;
+    }
+    const first = from[start];
+    const last = from[start + said.length - 1];
+    const range = document.createRange();
+    range.setStart(first.node, first.offset);
+    range.setEnd(last.node, last.offset + 1);
+    return range;
+}
+function registry() {
+    const css = globalThis.CSS;
+    return css?.highlights;
+}
+function highlightOf(range) {
+    const Highlight = globalThis.Highlight;
+    return Highlight ? new Highlight(range) : undefined;
+}
+let styled = false;
+function ensureStyle(document) {
+    if (styled || document.getElementById('datalayer-voice-said')) {
+        styled = true;
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = 'datalayer-voice-said';
+    style.textContent = SAID_STYLE;
+    document.head.appendChild(style);
+    styled = true;
+}
+/**
+ * Underlines `sentence` in the answer marked `data-voice-saying` under
+ * `root`, for as long as it is said; the mark goes when it ends. Drawn
+ * again whenever `version` changes (the answer still being written).
+ */
+export function useSaidSentence(root, sentence, version) {
+    useEffect(() => {
+        const highlights = registry();
+        const element = root.current?.querySelector('[data-voice-saying]');
+        if (!highlights || !element || !sentence) {
+            return;
+        }
+        const underline = () => {
+            const range = sentenceRange(element, sentence);
+            const highlight = range ? highlightOf(range) : undefined;
+            if (!highlight) {
+                return false;
+            }
+            ensureStyle(element.ownerDocument);
+            highlights.set(SAID_HIGHLIGHT, highlight);
+            return true;
+        };
+        // The answer's Markdown may be drawn after this effect: wait for it.
+        let watcher;
+        if (!underline() && typeof MutationObserver !== 'undefined') {
+            watcher = new MutationObserver(() => {
+                if (underline()) {
+                    watcher?.disconnect();
+                }
+            });
+            watcher.observe(element, {
+                childList: true,
+                subtree: true,
+                characterData: true,
+            });
+        }
+        return () => {
+            watcher?.disconnect();
+            highlights.delete(SAID_HIGHLIGHT);
+        };
+    }, [root, sentence, version]);
+}