@opengeni/react 1.4.0 → 1.4.4

package/src/components/composer-transcription-control.tsx

@@ -1,3 +1,7 @@
+import {
+  COMPOSER_VOICE_INPUT_START_EVENT,
+  composerVoiceEventScope,
+} from "../composer-voice-events";
 import type {
   ClientVoiceInputConfig,
   OpenGeniClient,
@@ -35,6 +39,10 @@ export type ComposerTranscriptionMessages = {
   stop: string;
   cancel: string;
   retry: string;
+  /** Transcribe a recording that was stopped without transcribing or recovered. */
+  transcribeSaved: string;
+  /** Shown near the automatic stop; `{seconds}` is replaced. */
+  timeRemaining: string;
   pauseRetrying: string;
   requestingPermission: string;
   recording: string;
@@ -64,32 +72,34 @@ export type ComposerTranscriptionMessages = {
 const defaultMessages: ComposerTranscriptionMessages = {
   start: "Start voice input",
   stop: "Stop and transcribe",
-  cancel: "Cancel recording",
+  cancel: "Stop without transcribing",
   retry: "Retry voice input",
+  transcribeSaved: "Transcribe saved recording",
+  timeRemaining: "Stops and transcribes in {seconds}s",
   pauseRetrying: "Pause automatic retry",
   requestingPermission: "Requesting microphone…",
-  recording: "Recording. Press Escape to cancel.",
+  recording: "Recording. Press Escape to stop without transcribing.",
   saving: "Saving audio locally…",
   transcribing: "Transcribing…",
-  retrying: "Recording saved. Retrying automatically…",
-  recovered: "Recording recovered and saved locally.",
-  recoveredTranscript: "Transcript saved locally. Check your draft before inserting.",
+  retrying: "Saved. Retrying transcription…",
+  recovered: "Recording saved on this device.",
+  recoveredTranscript: "Transcript saved. Insert it into your draft?",
   insertRecoveredTranscript: "Insert saved transcript",
   discardRecovered: "Discard saved recording",
   unavailableDisabled: "Voice input is unavailable while the composer is disabled.",
   unavailable: "Voice input is unavailable for this workspace.",
-  errorPermissionDenied: "Microphone permission was denied. Your draft was not changed.",
+  errorPermissionDenied: "Microphone access is blocked. Allow it in site settings, then try again.",
   errorNotSupported: "Voice input is not supported on this device.",
   errorUnavailable: "Voice input is not configured.",
   errorInsufficientCredits:
-    "Voice input needs Opengeni credits. Add credits, then retry your saved recording.",
-  errorAllowanceExhausted: "Your usage limit was reached. Your recording is saved for later.",
+    "Voice input needs credits. Recording saved; retry after adding credits.",
+  errorAllowanceExhausted: "Usage limit reached. Recording saved for later.",
   errorPolicyBlocked: "Voice input isn't allowed for this account or workspace.",
   errorTooLarge: "Recording is too large. Try a shorter message.",
   errorInvalidAudio: "The recording could not be read. Try again.",
   errorStorageUnavailable: "Voice input stopped because audio could not be saved safely.",
-  errorRetryable: "Recording is saved locally. Retry transcription when ready.",
-  errorHandoffUncertain: "Transcript is saved. Check your draft before inserting it again.",
+  errorRetryable: "Saved. Transcription failed, retry when ready.",
+  errorHandoffUncertain: "Transcript saved. Check your draft before inserting again.",
   errorUnknown: "Voice input could not start. Try again.",
 };
 
@@ -153,12 +163,18 @@ export function ComposerTranscriptionControl({
   const capturing = status === "requesting-permission" || status === "recording";
 
   const cancelTranscription = transcription.cancel;
+  const discardTranscription = transcription.discard;
+  const hasRecoverableRecording = transcription.hasRecoverableRecording;
   useEffect(() => {
     if (!suppressed) return;
     if (status === "recording" || status === "requesting-permission") {
       cancelTranscription();
+    } else if (status === "error" && !hasRecoverableRecording) {
+      // Live voice took over: a stale start error (nothing saved) would only
+      // duplicate whatever live voice reports next to it.
+      void discardTranscription();
     }
-  }, [cancelTranscription, status, suppressed]);
+  }, [cancelTranscription, discardTranscription, hasRecoverableRecording, status, suppressed]);
   const active = capturing || status === "saving" || status === "transcribing";
   const recoverable =
     transcription.hasRecoverableRecording &&
@@ -194,11 +210,22 @@ export function ComposerTranscriptionControl({
                     ? (errorMessage ?? messages.errorUnknown)
                     : unavailableMessage;
 
+  const recoveredLabel = savedTranscript
+    ? (errorMessage ?? messages.recoveredTranscript)
+    : retrying
+      ? messages.retrying
+      : status === "error"
+        ? (errorMessage ?? messages.errorRetryable)
+        : messages.recovered;
+
   function start(event: MouseEvent<HTMLButtonElement>) {
     if (unavailableMessage) {
       event.preventDefault();
       return;
     }
+    composerVoiceEventScope(event.currentTarget)?.dispatchEvent(
+      new Event(COMPOSER_VOICE_INPUT_START_EVENT),
+    );
     void transcription.start();
   }
 
@@ -220,6 +247,9 @@ export function ComposerTranscriptionControl({
           )}
           data-transcription-status={status}
           data-transcription-capturing={capturing ? "" : undefined}
+          data-transcription-attention={
+            !capturing && (recoverable || (status === "error" && errorMessage)) ? "" : undefined
+          }
         >
           <span className="inline-flex min-w-0 items-center gap-1.5">
             <AnimatePresence mode="popLayout" initial={false}>
@@ -235,14 +265,11 @@ export function ComposerTranscriptionControl({
                     "bg-og-surface-2/70 pl-2 pr-1 pointer-coarse:h-11",
                   )}
                 >
-                  <span className="og-transcription-recovered-label max-w-44 truncate text-og-xs text-og-fg-muted max-sm:max-w-28">
-                    {savedTranscript
-                      ? (errorMessage ?? messages.recoveredTranscript)
-                      : retrying
-                        ? messages.retrying
-                        : status === "error"
-                          ? (errorMessage ?? messages.errorRetryable)
-                          : messages.recovered}
+                  <span
+                    title={recoveredLabel}
+                    className="og-transcription-recovered-label max-w-56 line-clamp-2 text-og-xs leading-tight text-og-fg-muted max-sm:max-w-32"
+                  >
+                    {recoveredLabel}
                   </span>
                   <Tip
                     tip={
@@ -250,7 +277,9 @@ export function ComposerTranscriptionControl({
                         ? messages.insertRecoveredTranscript
                         : retrying
                           ? messages.pauseRetrying
-                          : messages.retry
+                          : status === "recovered"
+                            ? messages.transcribeSaved
+                            : messages.retry
                     }
                   >
                     <button
@@ -268,7 +297,9 @@ export function ComposerTranscriptionControl({
                           ? messages.insertRecoveredTranscript
                           : retrying
                             ? messages.pauseRetrying
-                            : messages.retry
+                            : status === "recovered"
+                              ? messages.transcribeSaved
+                              : messages.retry
                       }
                       className={cn(
                         "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm",
@@ -330,6 +361,13 @@ export function ComposerTranscriptionControl({
                         stream={status === "recording" ? transcription.stream : null}
                         mode={status === "recording" ? "recording" : "transcribing"}
                       />
+                      {status === "recording" && transcription.recordingStartedAt !== null ? (
+                        <RecordingClock
+                          startedAt={transcription.recordingStartedAt}
+                          maxSeconds={transcription.maxRecordingSeconds}
+                          remainingLabel={messages.timeRemaining}
+                        />
+                      ) : null}
                     </span>
                   )}
                   {status === "recording" ? (
@@ -401,14 +439,22 @@ export function ComposerTranscriptionControl({
               )}
             </AnimatePresence>
             {status === "error" && errorMessage && !recoverable ? (
-              <Tip tip={errorMessage}>
-                <span
-                  aria-hidden="true"
-                  className="og-transcription-error-label max-w-40 truncate text-og-xs text-og-status-failed max-sm:max-w-24"
-                >
+              // Nothing is saved in this state, so dismissing loses no speech.
+              <button
+                type="button"
+                title={errorMessage}
+                aria-label={`Dismiss: ${errorMessage}`}
+                onClick={() => void transcription.discard()}
+                className={cn(
+                  "inline-flex min-w-0 items-center gap-1 rounded-og-sm text-left outline-hidden",
+                  "text-og-status-failed focus-visible:ring-2 focus-visible:ring-og-accent/45",
+                )}
+              >
+                <span className="og-transcription-error-label max-w-56 line-clamp-2 text-og-xs leading-tight max-sm:max-w-32">
                   {errorMessage}
                 </span>
-              </Tip>
+                <XIcon className="size-3 shrink-0 opacity-70" aria-hidden />
+              </button>
             ) : null}
             <span
               className="sr-only"
@@ -424,6 +470,42 @@ export function ComposerTranscriptionControl({
   );
 }
 
+/** Elapsed dictation time; warns before the automatic stop-and-transcribe. */
+function RecordingClock({
+  startedAt,
+  maxSeconds,
+  remainingLabel,
+}: {
+  startedAt: number;
+  maxSeconds: number | null;
+  remainingLabel: string;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 500);
+    return () => clearInterval(timer);
+  }, []);
+  const elapsed = Math.max(0, Math.floor((now - startedAt) / 1_000));
+  const remaining = maxSeconds === null ? null : Math.max(0, maxSeconds - elapsed);
+  const warn = remaining !== null && remaining <= 15;
+  const label = `${Math.floor(elapsed / 60)}:${String(elapsed % 60).padStart(2, "0")}`;
+  return (
+    <span
+      data-recording-clock
+      title={warn ? remainingLabel.replace("{seconds}", String(remaining)) : undefined}
+      className={cn(
+        "min-w-[2.25rem] text-right text-og-xs tabular-nums",
+        warn ? "font-medium text-og-status-failed" : "text-og-fg-muted",
+      )}
+    >
+      {label}
+      {warn ? (
+        <span className="sr-only">{remainingLabel.replace("{seconds}", String(remaining))}</span>
+      ) : null}
+    </span>
+  );
+}
+
 function VoiceWaveform({
   stream,
   mode,

package/src/components/computer-viewer.tsx

@@ -1,5 +1,6 @@
 import type {
   ComputerAction,
+  ComputerActionReceipt,
   ComputerClipboard,
   ComputerFrame,
   ComputerObservation,
@@ -42,7 +43,11 @@ import {
   type ComputerFrameWebSocketFactory,
   useComputerFrameStream,
 } from "../hooks/use-computer-frame-stream";
-import { useComputerSession } from "../hooks/use-computer-session";
+import {
+  computerActionReceiptError,
+  isStaleComputerActionResult,
+  useComputerSession,
+} from "../hooks/use-computer-session";
 import { useComputerInputPosture } from "../hooks/use-computer-input-posture";
 import { useComputerSessions } from "../hooks/use-computer-sessions";
 import { useInteractionInterventions } from "../hooks/use-interaction-interventions";
@@ -174,6 +179,7 @@ export function ComputerViewer({
 
   const notifyError = useCallback(
     (cause: unknown, fallback: string) => {
+      if (isStaleComputerActionResult(cause)) return;
       onNotify?.({
         kind: "error",
         message: cause instanceof Error ? cause.message : fallback,
@@ -490,19 +496,24 @@ export function ComputerViewer({
   ]);
 
   const perform = useCallback(
-    async (action: ComputerAction, frame: ComputerFrame | null): Promise<void> => {
+    async (
+      action: ComputerAction,
+      frame: ComputerFrame | null,
+      operationId?: string,
+    ): Promise<ComputerActionReceipt> => {
       if (computer.controlError) throw computer.controlError;
       if (inputDenied) throw new Error("Desktop is view only. Refresh to check desktop controls.");
       let receipt;
       if (action.type === "pointer") {
         if (!frame) throw new Error("Desktop view is not ready for pointer input.");
-        receipt = await actFromFrame(action, frame);
+        receipt = await actFromFrame(action, frame, operationId);
       } else {
-        receipt = await act(action);
+        receipt = await act(action, operationId);
       }
-      if (receipt.state !== "completed") {
-        throw new Error(receipt.error?.message ?? "Desktop input did not complete.");
+      if (!isStaleComputerActionResult(receipt) && receipt.state !== "completed") {
+        throw computerActionReceiptError(receipt);
       }
+      return receipt;
     },
     [act, actFromFrame, computer.controlError, inputDenied],
   );
@@ -519,14 +530,15 @@ export function ComputerViewer({
         return;
       event.preventDefault();
       event.stopPropagation();
-      void perform({ type: "clipboard", operation: "copy" }, null)
-        .then(() => computer.readClipboard())
-        .then(async (clipboard) => {
-          if (clipboard.text && !(await copyTextToClipboard(clipboard.text))) {
-            throw new Error("Desktop text could not be copied to the local clipboard");
-          }
-        })
-        .catch((cause) => notifyError(cause, "Could not copy from the desktop."));
+      void (async () => {
+        const receipt = await perform({ type: "clipboard", operation: "copy" }, null);
+        if (isStaleComputerActionResult(receipt)) return;
+        const clipboard = await computer.readClipboard();
+        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
+        if (clipboard.text && !(await copyTextToClipboard(clipboard.text))) {
+          throw new Error("Desktop text could not be copied to the local clipboard");
+        }
+      })().catch((cause) => notifyError(cause, "Could not copy from the desktop."));
     },
     [computer, notifyError, perform, rfbInputEnabled, rfbStream],
   );
@@ -543,8 +555,11 @@ export function ComputerViewer({
       // ownership is asynchronous, so a successful write response alone does
       // not prove that the graphical seat can already serve the selection.
       void (async () => {
-        await perform({ type: "clipboard", operation: "write", text }, null);
-        assertExactComputerClipboard(await computer.readClipboard(), text);
+        const receipt = await perform({ type: "clipboard", operation: "write", text }, null);
+        if (isStaleComputerActionResult(receipt)) return;
+        const clipboard = await computer.readClipboard();
+        if (isStaleComputerActionResult(receipt) || isStaleComputerActionResult(clipboard)) return;
+        assertExactComputerClipboard(clipboard, text);
         await perform({ type: "clipboard", operation: "paste" }, null);
       })().catch((cause) => notifyError(cause, "Could not paste into the desktop."));
       return true;
@@ -750,6 +765,10 @@ export function ComputerViewer({
                 pointerInput={
                   attachmentInputAllowed && computer.session?.capabilities?.pointerInput === true
                 }
+                pointerClickContinuation={
+                  attachmentInputAllowed &&
+                  computer.session?.capabilities?.pointerClickContinuation === true
+                }
                 keyboardInput={
                   attachmentInputAllowed && computer.session?.capabilities?.keyboardInput === true
                 }
@@ -1194,6 +1213,12 @@ function ComputerLifecyclePanel(props: {
   );
 }
 
+type ComputerQueuedAction = {
+  operationId: string;
+  started: Promise<boolean>;
+  completion: Promise<void>;
+};
+
 function ComputerViewport(props: {
   frame: ComputerFrame | null;
   observation: ComputerObservation | null;
@@ -1208,8 +1233,13 @@ function ComputerViewport(props: {
   backgroundInput: boolean;
   clipboardEnabled: boolean;
   pointerInput: boolean;
+  pointerClickContinuation: boolean;
   keyboardInput: boolean;
-  onAction: (action: ComputerAction, frame: ComputerFrame | null) => Promise<void>;
+  onAction: (
+    action: ComputerAction,
+    frame: ComputerFrame | null,
+    operationId?: string,
+  ) => Promise<ComputerActionReceipt>;
   onReadClipboard: () => Promise<ComputerClipboard>;
   onReconnect: () => void;
   onError: (cause: unknown) => void;
@@ -1224,6 +1254,11 @@ function ComputerViewport(props: {
     x: number;
     y: number;
     frame: ComputerFrame;
+    clientX: number;
+    clientY: number;
+    canvasRect: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    pending: boolean;
+    delivery: ComputerQueuedAction | null;
   } | null>(null);
   const wheelRef = useRef<{
     x: number;
@@ -1394,24 +1429,48 @@ function ComputerViewport(props: {
       action: ComputerAction,
       frame: ComputerFrame | null,
       after?: (isCurrent: () => boolean) => Promise<void>,
+      continuation?: ComputerQueuedAction,
     ) => {
       const epoch = actionQueueEpochRef.current;
       const dispatch = actionRef.current;
       const isCurrent = () => mountedRef.current && epoch === actionQueueEpochRef.current;
-      actionTailRef.current = actionTailRef.current
-        .catch(() => undefined)
-        .then(async () => {
-          if (!isCurrent()) return;
-          await dispatch(action, frame);
-          if (!isCurrent()) return;
-          await after?.(isCurrent);
+      const operationId = crypto.randomUUID();
+      let markStarted!: (value: boolean) => void;
+      const started = new Promise<boolean>((resolve) => {
+        markStarted = resolve;
+      });
+      const previous = actionTailRef.current;
+      // Only the real second click may start before its first HTTP receipt.
+      // The controller queue and native causal proof still serialize delivery.
+      const ready =
+        continuation && previous === continuation.completion
+          ? continuation.started
+          : previous.then(() => true);
+      const delivery = ready
+        .then(async (firstStarted) => {
+          if (!firstStarted || !isCurrent()) {
+            markStarted(false);
+            return;
+          }
+          const pending = dispatch(action, frame, operationId);
+          markStarted(true);
+          const receipt = await pending;
+          const isCurrentResult = () => isCurrent() && !isStaleComputerActionResult(receipt);
+          if (!isCurrentResult()) return;
+          await after?.(isCurrentResult);
         })
         .catch((cause) => {
-          if (!isCurrent()) return;
+          markStarted(false);
+          if (!isCurrent() || isStaleComputerActionResult(cause)) return;
           actionQueueEpochRef.current += 1;
           clearBufferedInput();
           errorRef.current(cause);
         });
+      const completion = continuation
+        ? Promise.all([previous, delivery]).then(() => undefined)
+        : delivery;
+      actionTailRef.current = completion;
+      return { operationId, started, completion };
     },
     [clearBufferedInput],
   );
@@ -1436,6 +1495,7 @@ function ComputerViewport(props: {
     if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
     clickTimerRef.current = null;
     lastClickRef.current = null;
+    if (!pending.pending) return;
     enqueue(
       {
         type: "pointer",
@@ -1469,7 +1529,13 @@ function ComputerViewport(props: {
 
   const pointerDown = (event: PointerEvent<HTMLCanvasElement>) => {
     const frame = paintedFrameRef.current;
-    if (!frame || props.mutating || !rawInputEnabled || event.button !== 0) return;
+    if (
+      !frame ||
+      (!props.pointerClickContinuation && props.mutating) ||
+      !rawInputEnabled ||
+      event.button !== 0
+    )
+      return;
     // Preserve the keyboard sink's focus through the canvas pointer default action.
     event.preventDefault();
     if (keyboardInputEnabled) inputRef.current?.focus({ preventScroll: true });
@@ -1490,6 +1556,7 @@ function ComputerViewport(props: {
     const start = pointerStartRef.current;
     pointerStartRef.current = null;
     if (!start || start.pointerId !== event.pointerId) return;
+    const canvasRect = event.currentTarget.getBoundingClientRect();
     const from = point(start.frame, start.x, start.y);
     const to = point(start.frame, event.clientX, event.clientY);
     if (!from || !to) return;
@@ -1514,8 +1581,18 @@ function ComputerViewport(props: {
     if (
       previous &&
       now - previous.at < 280 &&
-      Math.hypot(previous.x - to.x, previous.y - to.y) < 6 &&
-      sameFrameFence(previous.frame, start.frame)
+      previous.pending === !props.pointerClickContinuation &&
+      (props.pointerClickContinuation
+        ? Math.hypot(previous.clientX - event.clientX, previous.clientY - event.clientY) < 6 &&
+          previous.canvasRect.left === canvasRect.left &&
+          previous.canvasRect.top === canvasRect.top &&
+          previous.canvasRect.width === canvasRect.width &&
+          previous.canvasRect.height === canvasRect.height &&
+          sameComputerTarget(previous.frame, start.frame) &&
+          previous.frame.width === start.frame.width &&
+          previous.frame.height === start.frame.height
+        : Math.hypot(previous.x - to.x, previous.y - to.y) < 6 &&
+          sameFrameFence(previous.frame, start.frame))
     ) {
       if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
       clickTimerRef.current = null;
@@ -1524,15 +1601,47 @@ function ComputerViewport(props: {
         {
           type: "pointer",
           frameId: start.frame.frameId,
-          action: "double_click",
+          action: props.pointerClickContinuation ? "click" : "double_click",
+          ...(props.pointerClickContinuation ? { clickCount: 2 as const } : {}),
+          ...(previous.delivery
+            ? { continuationOfOperationId: previous.delivery.operationId }
+            : {}),
+          x: to.x,
+          y: to.y,
+        },
+        start.frame,
+        undefined,
+        previous.delivery ?? undefined,
+      );
+      return;
+    }
+    flushPendingClick();
+    lastClickRef.current = {
+      at: now,
+      x: to.x,
+      y: to.y,
+      frame: start.frame,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      canvasRect,
+      pending: !props.pointerClickContinuation,
+      delivery: null,
+    };
+    if (props.pointerClickContinuation) {
+      const delivery = enqueue(
+        {
+          type: "pointer",
+          frameId: start.frame.frameId,
+          action: "click",
+          clickCount: 1,
           x: to.x,
           y: to.y,
         },
         start.frame,
       );
+      if (lastClickRef.current) lastClickRef.current.delivery = delivery;
       return;
     }
-    lastClickRef.current = { at: now, x: to.x, y: to.y, frame: start.frame };
     clickTimerRef.current = setTimeout(() => {
       clickTimerRef.current = null;
       lastClickRef.current = null;

package/src/components/markdown.tsx

@@ -230,7 +230,7 @@ const baseComponents: Components = {
   ),
   td: ({ children, ...props }) => (
     <td
-      className="border-b border-og-border/70 px-0 py-1.5 pr-4 align-top text-og-fg-muted [tr:last-child>&]:border-b-0"
+      className="border-b border-og-border/70 px-0 py-1.5 pr-4 align-top text-og-fg-muted"
       {...props}
     >
       {children}
@@ -615,7 +615,12 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
       <div className="overflow-x-auto" tabIndex={0}>
         <table
           ref={tableRef}
-          className={cn("w-full min-w-0 border-collapse text-og-base", className)}
+          className={cn(
+            // Leading `&` only: a trailing one (`tr:last-child>&`) under the scoped
+            // selector list needs `:is()`, which bundlers warn about for older targets.
+            "w-full min-w-0 border-collapse text-og-base [&_tr:last-child>td]:border-b-0",
+            className,
+          )}
           {...props}
         >
           {children}

package/src/components/message-timeline.tsx

@@ -2496,6 +2496,16 @@ export function MessageTimeline({
     }
     releasePinAfterScrollSettled(node);
   };
+  // React 18 has no `onScrollEnd` prop: it warns and never calls it, while
+  // `supportsScrollEndEvent()` still makes the camera wait for scrollend. A
+  // native listener (re-bound each commit, so it always sees this render's
+  // handler and scroller) works on every supported React version.
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (!node) return;
+    node.addEventListener("scrollend", onScrollEnd);
+    return () => node.removeEventListener("scrollend", onScrollEnd);
+  });
 
   const timeline = (
     <AllowancePresentationProvider
@@ -2538,7 +2548,6 @@ export function MessageTimeline({
                           }
                           tabIndex={-1}
                           onScroll={onScroll}
-                          onScrollEnd={onScrollEnd}
                           onWheel={onWheel}
                           onTouchStart={(event) => {
                             stopSettlement();

package/src/components/session-conversation.tsx

@@ -34,6 +34,7 @@ import {
   createWorkspaceRetainedArtifactLoader,
   createWorkspaceRetainedVideoLoader,
 } from "../timeline/retained-loaders";
+import { useRealtimeVoiceModels } from "../hooks/use-realtime-voice-models";
 import { projectPendingApprovals } from "../approvals";
 import { ApprovalSurface } from "./approval-surface";
 import { ChatComposer, type ChatComposerProps } from "./chat-composer";
@@ -126,6 +127,12 @@ export type SessionConversationProps = ClientOverride &
      * (`createSessionProxyHandler({ voiceInput: false })` turns it off).
      */
     voiceInput?: boolean | undefined;
+    /**
+     * Live speech-to-speech voice in the composer. Defaults to true; the voice
+     * button appears only when the workspace offers an available voice model
+     * and the proxy has not turned it off (`realtimeVoice: false`).
+     */
+    realtimeVoice?: boolean | undefined;
     /**
      * Show the model/reasoning picker. End users of an embedded product rarely
      * choose models, so it is hidden unless this is `true` or the client config
@@ -210,6 +217,7 @@ function Conversation({
   allowanceExhaustedLabels,
   attachments: attachmentsRequested = true,
   voiceInput: voiceInputRequested = true,
+  realtimeVoice: realtimeVoiceRequested = true,
   modelPicker,
   modelPickerProps,
   userMessageDisclosureLabels,
@@ -319,6 +327,30 @@ function Conversation({
     if (feed.error) void feed.jumpToLatest();
   };
   const running = status === "running" || status === "recovering" || status === "waiting_capacity";
+  const voiceModels = useRealtimeVoiceModels(
+    context.client,
+    context.workspaceId,
+    realtimeVoiceRequested && config.realtimeVoice && !importedArchive,
+  );
+  const [voiceActive, setVoiceActive] = useState(false);
+  const voiceControl =
+    composer.effectiveControl ?? queue.effectiveControl ?? detail.session?.effectiveControl;
+  const voice =
+    voiceModels.length > 0 && status && !terminal && voiceControl ? (
+      <Suspense fallback={null}>
+        <LazyEmbeddedRealtimeVoice
+          client={context.client}
+          workspaceId={context.workspaceId}
+          models={voiceModels}
+          sessionId={sessionId}
+          sessionStatus={status}
+          effectiveControl={voiceControl}
+          events={feed.events}
+          eventsReady={!feed.initialLoading}
+          onVoiceActiveChange={setVoiceActive}
+        />
+      </Suspense>
+    ) : null;
   return (
     <div
       className={cn(
@@ -467,6 +499,17 @@ function Conversation({
               {...(transcription && composerProps?.transcription === undefined
                 ? { transcription }
                 : {})}
+              actionsStart={
+                voice ? (
+                  <>
+                    {composerProps?.actionsStart}
+                    {voice}
+                  </>
+                ) : (
+                  composerProps?.actionsStart
+                )
+              }
+              transcriptionSuppressed={composerProps?.transcriptionSuppressed ?? voiceActive}
               composer={composer}
               attachments={uploadsEnabled ? files : undefined}
               disabled={terminal || composerProps?.disabled}
@@ -534,6 +577,7 @@ function GoalChrome({ sessionId, client, workspaceId, events, chrome }: Conversa
   });
   return <SessionChrome {...chrome} goal={goal} />;
 }
+const LazyEmbeddedRealtimeVoice = lazy(() => import("../realtime/embedded-voice"));
 
 const LazyChatInteractiveBlock = lazy(() =>
   import("./artifacts/chat-interactive-block").then((module) => ({