@vrplatform/voice-chat 0.1.0

package/src/SupportAssistantDock.tsx

@@ -0,0 +1,4060 @@
+'use client';
+
+import {
+  type CSSProperties,
+  type FormEvent,
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { BracketsIcon, CopyIcon } from '@vrplatform/icons';
+import {
+  createRealtimeActivityState,
+  reduceRealtimeActivity,
+  type RealtimeActivityState,
+  type RealtimeActivityStatus,
+  type SupportAssistantActivity,
+} from './supportAssistantActivity';
+import {
+  type VRPilotFillFieldRequest,
+  type VRPilotHighlightTargetRequest,
+  useVRPilotHighlights,
+} from './VRPilotHighlightProvider';
+import { useStyles } from './_styles';
+
+export type { SupportAssistantActivity } from './supportAssistantActivity';
+
+export type SupportAssistantLanguage = {
+  code: string;
+  label: string;
+  nativeLabel?: string;
+};
+
+export type SupportAssistantSessionContext = {
+  goal?: string;
+  currentPath?: string;
+  currentTitle?: string;
+  dashboard?: string;
+  isGeneralLedgerEnabled?: boolean;
+  teamCurrency?: string;
+  teamId?: string;
+  teamName?: string;
+  teamPartnerId?: string;
+  teamStatus?: string;
+  teamType?: string;
+  workspaceName?: string;
+  activeIssueSummary?: string;
+  primaryIssueAction?: string;
+  primaryIssueItemName?: string;
+  primaryIssueMessage?: string;
+  primaryIssueTitle?: string;
+  primaryIssueType?: string;
+  userEmail?: string;
+  userFirstName?: string;
+  userId?: string;
+  userLastName?: string;
+  userName?: string;
+  userRole?: string;
+  language?: string;
+};
+
+export type SupportAssistantEvent =
+  | {
+      type: 'status';
+      activity: SupportAssistantActivity;
+      message: string;
+    }
+  | {
+      type: 'realtime';
+      payload: unknown;
+    }
+  | {
+      type: 'screen';
+      shared: boolean;
+    }
+  | {
+      type: 'snapshot';
+      framesSent: number;
+    }
+  | {
+      type: 'session_completed';
+      session: SupportAssistantSessionEvent;
+    };
+
+export type SupportAssistantDockProps = {
+  apiBaseUrl?: string;
+  callEndpoint?: string;
+  dev?: boolean;
+  localApiBaseUrl?: string;
+  productionApiBaseUrl?: string;
+  sessionContext?:
+    | SupportAssistantSessionContext
+    | (() => SupportAssistantSessionContext);
+  languages?: SupportAssistantLanguage[];
+  defaultLanguageCode?: string;
+  defaultGoal?: string;
+  userRole?: string;
+  placement?: 'right' | 'left';
+  floating?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  getCallRequestHeaders?: () => HeadersInit | Promise<HeadersInit>;
+  onEvent?: (event: SupportAssistantEvent) => void;
+  showRealtimeDebug?: boolean;
+};
+
+type RealtimeDebugDirection = 'client' | 'server' | 'local';
+type DevApiTarget = 'production' | 'local';
+
+type RealtimeDebugEntry = {
+  id: number;
+  time: string;
+  label: string;
+  detail: string;
+  payload?: Record<string, unknown>;
+};
+
+type RealtimeRawDebugEntry = RealtimeDebugEntry & {
+  direction: RealtimeDebugDirection;
+  timestamp: string;
+};
+
+type RealtimeTraceDebugContext = {
+  workflowName: string | null;
+  groupId: string | null;
+  sessionId: string | null;
+};
+
+type SupportSessionScreenConfig = {
+  captureIntervalMs: number;
+  activeCaptureIntervalMs?: number;
+  maxImageLongEdgePx: number;
+  imageMimeType: 'image/jpeg';
+  imageQuality: number;
+  imageDetail: 'low';
+  eventType: 'conversation.item.create';
+  itemType: 'message';
+  role: 'user';
+  contentType: 'input_image';
+};
+
+type SupportSessionRealtimeCall = {
+  provider: 'openai';
+  sdpAnswer: string;
+  model: string;
+  voice: string;
+  screen: SupportSessionScreenConfig;
+};
+
+type SupportSourceLink = {
+  articleId: string;
+  title: string;
+  url: string;
+  relevance: number;
+};
+
+export type SupportAssistantTranscriptMessage = {
+  role: 'user' | 'assistant';
+  text: string;
+  timestamp: string;
+  itemId?: string;
+  responseId?: string;
+};
+
+export type SupportAssistantSessionCost = {
+  amountUsd: number | null;
+  currency: 'USD';
+  model: string;
+  pricingSource: string;
+  usage: Record<string, unknown> | null;
+};
+
+export type SupportAssistantSessionEvent = {
+  openAiSessionId: string | null;
+  model: string | null;
+  transcript: SupportAssistantTranscriptMessage[];
+  summary: string;
+  cost: SupportAssistantSessionCost;
+  durationMs: number;
+  framesSent: number;
+  currentPath?: string;
+  currentTitle?: string;
+  language?: string;
+};
+
+type AssistantSessionAnalytics = {
+  startedAt: number;
+  payload: SupportAssistantSessionContext;
+  transcript: SupportAssistantTranscriptMessage[];
+  responseTranscriptDeltas: Map<string, string>;
+  usage: Record<string, unknown> | null;
+  finalized: boolean;
+};
+
+type RuntimeSession = {
+  peerConnection: RTCPeerConnection | null;
+  dataChannel: RTCDataChannel | null;
+  microphoneStream: MediaStream | null;
+  screenStream: MediaStream | null;
+  screenTimer: number | null;
+  visualWatchTimer: number | null;
+  sessionConfig: SupportSessionRealtimeCall | null;
+  muted: boolean;
+  snapshotInFlight: boolean;
+  lastSnapshotStartedAt: number;
+  visualAnalysisCanvas: HTMLCanvasElement | null;
+  lastVisualSignature: Uint8ClampedArray | null;
+  visualChangeActive: boolean;
+  lastVisualChangeAt: number;
+  lastProactivePromptAt: number;
+  proactiveResponseInFlight: boolean;
+  pendingProactiveScreenPrompt: boolean;
+  pendingScreenChangeCorrection: boolean;
+  clientResponseInFlight: boolean;
+  currentResponseId: string | null;
+  interruptedResponseIds: Set<string>;
+  waitingForFirstScreenAcknowledgement: boolean;
+  suppressScreenChangePromptsUntil: number;
+  pendingAcknowledgement: {
+    text: string;
+    instructions?: string;
+  } | null;
+  waitingForInitialResponse: boolean;
+  waitingToEnableAutoResponses: boolean;
+  autoResponseEnabled: boolean;
+};
+
+type ScreenChangePromptOptions = {
+  interruptActiveResponse?: boolean;
+};
+
+type SupportAssistantResponseMode = 'voice' | 'text';
+type RealtimeOutputModality = 'audio' | 'text';
+
+type ChatTranscriptMessage = {
+  id: string;
+  role: 'assistant' | 'user';
+  responseId: string;
+  text: string;
+  time: string;
+  mode: SupportAssistantResponseMode;
+  status: 'streaming' | 'done' | 'cancelled' | 'failed';
+};
+
+type StartCallOptions = {
+  initialTextMessage?: string;
+};
+
+const defaultLanguages: SupportAssistantLanguage[] = [
+  { code: 'en', label: 'English' },
+  { code: 'de', label: 'German', nativeLabel: 'Deutsch' },
+  { code: 'fr', label: 'French', nativeLabel: 'Francais' },
+  { code: 'es', label: 'Spanish', nativeLabel: 'Espanol' },
+];
+
+const minSnapshotSpacingMs = 250;
+const visualWatchIntervalMs = 300;
+const visualSettleDelayMs = 850;
+const visualSampleWidthPx = 48;
+const visualAverageDifferenceThreshold = 4.5;
+const visualChangedPixelRatioThreshold = 0.006;
+const visualPixelDifferenceThreshold = 45;
+const minProactivePromptSpacingMs = 6_000;
+const screenSharePromptWarmupMs = 4_000;
+const maxRealtimeDebugEntries = 500;
+const maxChatTranscriptMessages = 40;
+const realtimeMaxOutputTokens = 'inf';
+const defaultLocalApiBaseUrl = 'http://localhost:8787';
+const defaultProductionApiBaseUrl = 'https://voice-chat.vrplatform.app';
+
+function hasActiveAssistantTurn(state: RealtimeActivityState) {
+  return state.responseInProgress || state.assistantAudioActive;
+}
+
+function createRuntimeSession(): RuntimeSession {
+  return {
+    peerConnection: null,
+    dataChannel: null,
+    microphoneStream: null,
+    screenStream: null,
+    screenTimer: null,
+    visualWatchTimer: null,
+    sessionConfig: null,
+    muted: false,
+    snapshotInFlight: false,
+    lastSnapshotStartedAt: 0,
+    visualAnalysisCanvas: null,
+    lastVisualSignature: null,
+    visualChangeActive: false,
+    lastVisualChangeAt: 0,
+    lastProactivePromptAt: 0,
+    proactiveResponseInFlight: false,
+    pendingProactiveScreenPrompt: false,
+    pendingScreenChangeCorrection: false,
+    clientResponseInFlight: false,
+    currentResponseId: null,
+    interruptedResponseIds: new Set(),
+    waitingForFirstScreenAcknowledgement: false,
+    suppressScreenChangePromptsUntil: 0,
+    pendingAcknowledgement: null,
+    waitingForInitialResponse: false,
+    waitingToEnableAutoResponses: false,
+    autoResponseEnabled: false,
+  };
+}
+
+function getRealtimeOutputModalities(
+  mode: SupportAssistantResponseMode
+): RealtimeOutputModality[] {
+  return [mode === 'text' ? 'text' : 'audio'];
+}
+
+function joinUrl(baseUrl: string, endpoint: string) {
+  if (/^https?:\/\//i.test(endpoint)) {
+    return endpoint;
+  }
+
+  if (!baseUrl) {
+    return endpoint;
+  }
+
+  return `${baseUrl.replace(/\/$/, '')}/${endpoint.replace(/^\//, '')}`;
+}
+
+function getMessage(error: unknown, fallback: string) {
+  return error instanceof Error ? error.message : fallback;
+}
+
+function getRecord(value: unknown): Record<string, unknown> | null {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null;
+}
+
+function getStringValue(value: unknown) {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value);
+  }
+
+  return undefined;
+}
+
+function getDebugValue(value: unknown) {
+  if (typeof value === 'string' || typeof value === 'number') {
+    return String(value);
+  }
+
+  return undefined;
+}
+
+function getNumberValue(value: unknown) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+
+  if (typeof value === 'string' && value.trim()) {
+    const numberValue = Number(value);
+
+    return Number.isFinite(numberValue) ? numberValue : undefined;
+  }
+
+  return undefined;
+}
+
+function getTranscriptText(value: unknown) {
+  return typeof value === 'string' && value.trim() ? value.trim() : undefined;
+}
+
+function getTranscriptDelta(value: unknown) {
+  return typeof value === 'string' && value.length ? value : undefined;
+}
+
+function getTranscriptKey(payload: Record<string, unknown>) {
+  return [
+    getStringValue(payload.response_id),
+    getStringValue(payload.item_id),
+    getStringValue(payload.output_index),
+    getStringValue(payload.content_index),
+  ]
+    .filter(Boolean)
+    .join(':');
+}
+
+function getTokenCount(record: Record<string, unknown> | null, key: string) {
+  return getNumberValue(record?.[key]) ?? 0;
+}
+
+function mergeTokenUsage(
+  current: Record<string, unknown> | null,
+  next: Record<string, unknown>
+): Record<string, unknown> {
+  const merged: Record<string, unknown> = { ...(current ?? {}) };
+
+  for (const [key, value] of Object.entries(next)) {
+    const currentValue = merged[key];
+
+    if (typeof value === 'number') {
+      merged[key] = (getNumberValue(currentValue) ?? 0) + value;
+      continue;
+    }
+
+    const valueRecord = getRecord(value);
+    if (valueRecord) {
+      merged[key] = mergeTokenUsage(getRecord(currentValue), valueRecord);
+    }
+  }
+
+  return merged;
+}
+
+function getCachedAudioTokens(details: Record<string, unknown> | null) {
+  const cachedDetails =
+    getRecord(details?.cached_tokens_details) ??
+    getRecord(details?.cache_read_input_tokens_details);
+
+  return getTokenCount(cachedDetails, 'audio_tokens');
+}
+
+function getCachedImageTokens(details: Record<string, unknown> | null) {
+  const cachedDetails =
+    getRecord(details?.cached_tokens_details) ??
+    getRecord(details?.cache_read_input_tokens_details);
+
+  return getTokenCount(cachedDetails, 'image_tokens');
+}
+
+function calculateRealtimeSessionCost(
+  model: string | null,
+  usage: Record<string, unknown> | null
+): SupportAssistantSessionCost {
+  const pricingSource = 'openai_api_pricing_2026-05-20_gpt-realtime-2';
+
+  if (!usage || model !== 'gpt-realtime-2') {
+    return {
+      amountUsd: null,
+      currency: 'USD',
+      model: model ?? 'unknown',
+      pricingSource,
+      usage,
+    };
+  }
+
+  const inputDetails = getRecord(usage.input_token_details);
+  const outputDetails = getRecord(usage.output_token_details);
+  const inputTokens = getTokenCount(usage, 'input_tokens');
+  const outputTokens = getTokenCount(usage, 'output_tokens');
+  const cachedTokens = getTokenCount(inputDetails, 'cached_tokens');
+  const audioInputTokens = getTokenCount(inputDetails, 'audio_tokens');
+  const imageInputTokens = getTokenCount(inputDetails, 'image_tokens');
+  const cachedAudioTokens = getCachedAudioTokens(inputDetails);
+  const cachedImageTokens = getCachedImageTokens(inputDetails);
+  const cachedTextTokens = Math.max(
+    0,
+    cachedTokens - cachedAudioTokens - cachedImageTokens
+  );
+  const textInputTokens = Math.max(
+    0,
+    inputTokens - audioInputTokens - imageInputTokens
+  );
+  const audioOutputTokens = getTokenCount(outputDetails, 'audio_tokens');
+  const textOutputTokens = Math.max(0, outputTokens - audioOutputTokens);
+  const usd =
+    (Math.max(0, textInputTokens - cachedTextTokens) * 4 +
+      cachedTextTokens * 0.4 +
+      Math.max(0, audioInputTokens - cachedAudioTokens) * 32 +
+      cachedAudioTokens * 0.4 +
+      Math.max(0, imageInputTokens - cachedImageTokens) * 5 +
+      cachedImageTokens * 0.5 +
+      textOutputTokens * 24 +
+      audioOutputTokens * 64) /
+    1_000_000;
+
+  return {
+    amountUsd: Number(usd.toFixed(6)),
+    currency: 'USD',
+    model,
+    pricingSource,
+    usage,
+  };
+}
+
+function buildSessionSummary(transcript: SupportAssistantTranscriptMessage[]) {
+  const userMessages = transcript.filter((message) => message.role === 'user');
+  const assistantMessages = transcript.filter(
+    (message) => message.role === 'assistant'
+  );
+  const firstUserMessage = userMessages[0]?.text;
+  const lastAssistantMessage = assistantMessages.at(-1)?.text;
+
+  if (!transcript.length) {
+    return 'VRPilot session ended without a captured transcript.';
+  }
+
+  return [
+    `${transcript.length} transcript message${
+      transcript.length === 1 ? '' : 's'
+    } captured.`,
+    firstUserMessage ? `User asked: ${firstUserMessage}` : undefined,
+    lastAssistantMessage
+      ? `Latest assistant response: ${lastAssistantMessage}`
+      : undefined,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
+
+function getAssistantTranscriptFromResponse(response: Record<string, unknown>) {
+  const output = Array.isArray(response.output) ? response.output : [];
+  const transcripts: string[] = [];
+
+  for (const outputItem of output) {
+    const item = getRecord(outputItem);
+    const content = Array.isArray(item?.content) ? item.content : [];
+
+    for (const contentItem of content) {
+      const contentRecord = getRecord(contentItem);
+      const transcript =
+        getTranscriptText(contentRecord?.transcript) ??
+        getTranscriptText(contentRecord?.text);
+
+      if (transcript) {
+        transcripts.push(transcript);
+      }
+    }
+  }
+
+  return getTranscriptText(transcripts.join(' '));
+}
+
+function getDebugTimestampParts() {
+  const date = new Date();
+
+  return {
+    timestamp: date.toISOString(),
+    time: date.toLocaleTimeString('en-GB', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    }),
+  };
+}
+
+function sanitizeRealtimeDebugPayload(value: unknown): unknown {
+  if (typeof value === 'string') {
+    if (value.startsWith('data:image/')) {
+      const mimeType = value.slice(5, value.indexOf(';'));
+
+      return `[${mimeType} data URL omitted; chars=${value.length}]`;
+    }
+
+    if (value.length > 4_000) {
+      return `[long string omitted; chars=${value.length}]`;
+    }
+
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map((item) => sanitizeRealtimeDebugPayload(item));
+  }
+
+  const record = getRecord(value);
+  if (!record) {
+    return value;
+  }
+
+  return Object.fromEntries(
+    Object.entries(record).map(([key, item]) => [
+      key,
+      key === 'delta' && typeof item === 'string' && item.length > 512
+        ? `[delta omitted; chars=${item.length}]`
+        : sanitizeRealtimeDebugPayload(item),
+    ])
+  );
+}
+
+function getRealtimeEventType(event: Record<string, unknown>) {
+  return typeof event.type === 'string' ? event.type : 'unknown';
+}
+
+function getRealtimeClientEventDetail(event: Record<string, unknown>) {
+  const eventType = getRealtimeEventType(event);
+
+  if (eventType === 'session.update') {
+    const session = getRecord(event.session);
+    const tracing = getRecord(session?.tracing);
+    const groupId = getDebugValue(tracing?.group_id);
+
+    return groupId ? `group_id=${groupId}` : 'session config';
+  }
+
+  if (eventType === 'response.create') {
+    const response = getRecord(event.response);
+    const instructions = getDebugValue(response?.instructions);
+
+    return instructions
+      ? `instructions=${instructions.slice(0, 120)}`
+      : 'response request';
+  }
+
+  if (eventType === 'conversation.item.create') {
+    const item = getRecord(event.item);
+    const content = item?.content;
+
+    if (Array.isArray(content)) {
+      const contentTypes = content
+        .map((contentItem) => getDebugValue(getRecord(contentItem)?.type))
+        .filter(Boolean)
+        .join(',');
+
+      return contentTypes ? `content=${contentTypes}` : 'conversation item';
+    }
+  }
+
+  return '-';
+}
+
+function getBooleanValue(value: unknown) {
+  return typeof value === 'boolean' ? value : undefined;
+}
+
+async function createCallRequestHeaders(
+  getCallRequestHeaders?: () => HeadersInit | Promise<HeadersInit>
+) {
+  const headers = new Headers({
+    'Content-Type': 'application/json',
+  });
+
+  const requestHeaders = await getCallRequestHeaders?.();
+  if (requestHeaders) {
+    new Headers(requestHeaders).forEach((value, key) => {
+      headers.set(key, value);
+    });
+  }
+
+  return headers;
+}
+
+function waitForDataChannelOpen(channel: RTCDataChannel) {
+  if (channel.readyState === 'open') {
+    return Promise.resolve();
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    channel.addEventListener('open', () => resolve(), { once: true });
+    channel.addEventListener(
+      'error',
+      () => reject(new Error('Realtime data channel failed to open')),
+      { once: true }
+    );
+  });
+}
+
+function waitForIceGatheringComplete(peerConnection: RTCPeerConnection) {
+  if (peerConnection.iceGatheringState === 'complete') {
+    return Promise.resolve();
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    const timeout = window.setTimeout(() => {
+      peerConnection.removeEventListener('icegatheringstatechange', handler);
+      reject(new Error('WebRTC setup timed out while gathering candidates'));
+    }, 10_000);
+
+    function handler() {
+      if (peerConnection.iceGatheringState === 'complete') {
+        window.clearTimeout(timeout);
+        peerConnection.removeEventListener('icegatheringstatechange', handler);
+        resolve();
+      }
+    }
+
+    peerConnection.addEventListener('icegatheringstatechange', handler);
+  });
+}
+
+function getLocalhostUrl() {
+  const port = window.location.port ? `:${window.location.port}` : '';
+
+  return `http://localhost${port}`;
+}
+
+function getMediaUnavailableMessage(feature: string) {
+  if (!window.isSecureContext) {
+    return (
+      `${feature} access needs a secure browser origin. Open ` +
+      `${getLocalhostUrl()} or use HTTPS.`
+    );
+  }
+
+  return (
+    `${feature} access is unavailable in this browser. Open this app in ` +
+    'Chrome, Edge, or Safari and allow media permissions.'
+  );
+}
+
+function requestUserMedia(constraints: MediaStreamConstraints) {
+  if (navigator.mediaDevices?.getUserMedia) {
+    return navigator.mediaDevices.getUserMedia(constraints);
+  }
+
+  return Promise.reject(new Error(getMediaUnavailableMessage('Microphone')));
+}
+
+function requestDisplayMedia(constraints: DisplayMediaStreamOptions) {
+  if (navigator.mediaDevices?.getDisplayMedia) {
+    return navigator.mediaDevices.getDisplayMedia(constraints);
+  }
+
+  return Promise.reject(
+    new Error(getMediaUnavailableMessage('Screen sharing'))
+  );
+}
+
+function assertRealtimeBrowserSupport() {
+  if (typeof RTCPeerConnection === 'undefined') {
+    throw new Error(
+      'WebRTC is unavailable in this browser. Open this app in Chrome, Edge, or Safari.'
+    );
+  }
+}
+
+function waitForVideoMetadata(video: HTMLVideoElement) {
+  if (video.videoWidth > 0 && video.videoHeight > 0) {
+    return Promise.resolve();
+  }
+
+  return new Promise<void>((resolve) => {
+    const timeout = window.setTimeout(done, 1_000);
+
+    function done() {
+      window.clearTimeout(timeout);
+      video.removeEventListener('loadedmetadata', done);
+      video.removeEventListener('resize', done);
+      resolve();
+    }
+
+    video.addEventListener('loadedmetadata', done, { once: true });
+    video.addEventListener('resize', done, { once: true });
+  });
+}
+
+function getScaledCanvasSize(
+  width: number,
+  height: number,
+  maxLongEdge: number
+) {
+  const longEdge = Math.max(width, height);
+  const scale = longEdge > maxLongEdge ? maxLongEdge / longEdge : 1;
+
+  return {
+    width: Math.round(width * scale),
+    height: Math.round(height * scale),
+  };
+}
+
+function blobToDataUrl(blob: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => resolve(String(reader.result)));
+    reader.addEventListener('error', () => reject(reader.error));
+    reader.readAsDataURL(blob);
+  });
+}
+
+function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  mimeType: string,
+  quality: number
+) {
+  return new Promise<Blob | null>((resolve) => {
+    canvas.toBlob(resolve, mimeType, quality);
+  });
+}
+
+function getVisualDifference(
+  previousSignature: Uint8ClampedArray,
+  currentSignature: Uint8ClampedArray
+) {
+  if (previousSignature.length !== currentSignature.length) {
+    return {
+      averageDelta: Number.POSITIVE_INFINITY,
+      changedRatio: 1,
+    };
+  }
+
+  let totalDelta = 0;
+  let changedPixels = 0;
+  const pixelCount = currentSignature.length / 3;
+
+  for (let index = 0; index < currentSignature.length; index += 3) {
+    const pixelDelta =
+      Math.abs(currentSignature[index] - previousSignature[index]) +
+      Math.abs(currentSignature[index + 1] - previousSignature[index + 1]) +
+      Math.abs(currentSignature[index + 2] - previousSignature[index + 2]);
+
+    totalDelta += pixelDelta / 3;
+    if (pixelDelta >= visualPixelDifferenceThreshold) {
+      changedPixels += 1;
+    }
+  }
+
+  return {
+    averageDelta: totalDelta / pixelCount,
+    changedRatio: changedPixels / pixelCount,
+  };
+}
+
+function IconMic() {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z" />
+      <path d="M5 11a7 7 0 0 0 14 0" />
+      <path d="M12 18v3" />
+    </svg>
+  );
+}
+
+function IconMicOff() {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="m4 4 16 16" />
+      <path d="M9 9v3a3 3 0 0 0 5 2.2" />
+      <path d="M15 9.4V6a3 3 0 0 0-5.1-2.1" />
+      <path d="M5 11a7 7 0 0 0 10.7 5.9" />
+      <path d="M19 11a7 7 0 0 1-1 3.6" />
+      <path d="M12 18v3" />
+    </svg>
+  );
+}
+
+function IconScreenShare() {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <rect x="4" y="5" width="16" height="11" rx="2" />
+      <path d="M12 16v3" />
+      <path d="M8.5 19h7" />
+      <path d="m12 8 3 3" />
+      <path d="m15 8v3h-3" />
+    </svg>
+  );
+}
+
+function IconVoiceMode() {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M5 10v4" />
+      <path d="M9 7v10" />
+      <path d="M13 4v16" />
+      <path d="M17 8v8" />
+      <path d="M21 11v2" />
+    </svg>
+  );
+}
+
+function IconEndCall() {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M5.2 10.6c4.3-2.5 9.3-2.5 13.6 0" />
+      <path d="M8 13.6 5.4 16a1.4 1.4 0 0 1-2-.1l-1.3-1.6a1.5 1.5 0 0 1 .2-2.1l2.2-1.7" />
+      <path d="m16 13.6 2.6 2.4a1.4 1.4 0 0 0 2-.1l1.3-1.6a1.5 1.5 0 0 0-.2-2.1l-2.2-1.7" />
+    </svg>
+  );
+}
+
+function IconSend() {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M5 12h13" />
+      <path d="m13 6 6 6-6 6" />
+    </svg>
+  );
+}
+
+const highlightUiTargetTool = {
+  type: 'function',
+  name: 'highlight_ui_target',
+  description:
+    'Visually highlight one visible UI element in the current VRPlatform app. ' +
+    'Use this when pointing the user to a specific button, tab, menu item, field, or section. ' +
+    'Prefer targetKey for data-vrpilot-target/data-testid values, then accessible label or visible text. ' +
+    'This tool only highlights; it never clicks, changes, saves, or submits anything.',
+  parameters: {
+    type: 'object',
+    properties: {
+      targetKey: {
+        type: 'string',
+        description:
+          'Stable target key such as data-vrpilot-target, data-testid, data-test, or element id.',
+      },
+      selector: {
+        type: 'string',
+        description:
+          'CSS selector for the element when a stable key is not available.',
+      },
+      text: {
+        type: 'string',
+        description:
+          'Visible text to match, for example the label on a button or tab.',
+      },
+      label: {
+        type: 'string',
+        description:
+          'Accessible label or title to match, for example aria-label.',
+      },
+      role: {
+        type: 'string',
+        enum: [
+          'any',
+          'button',
+          'checkbox',
+          'heading',
+          'input',
+          'link',
+          'menuitem',
+          'tab',
+        ],
+        description: 'Optional UI role used to narrow text or label matching.',
+      },
+      reason: {
+        type: 'string',
+        description:
+          'Short internal reason for the highlight, useful for debugging.',
+      },
+      durationMs: {
+        type: 'number',
+        minimum: 1_200,
+        maximum: 12_000,
+        description: 'How long the highlight should stay visible.',
+      },
+      scrollIntoView: {
+        type: 'boolean',
+        description:
+          'Whether the app should scroll the matching element into view first.',
+      },
+    },
+    additionalProperties: false,
+  },
+} as const;
+
+const fillUiFieldTool = {
+  type: 'function',
+  name: 'fill_ui_field',
+  description:
+    'Fill or update one visible editable field in the current VRPlatform app. ' +
+    'Use this only for inputs, textareas, selects, checkboxes, and radios when the user clearly asks to enter or choose a value. ' +
+    'This tool never submits, saves, clicks buttons, or triggers irreversible actions. ' +
+    'Do not use it for passwords, tokens, payment fields, bank details, tax IDs, or other sensitive secrets.',
+  parameters: {
+    type: 'object',
+    properties: {
+      targetKey: {
+        type: 'string',
+        description:
+          'Stable target key such as data-vrpilot-target, data-testid, data-test, or element id.',
+      },
+      selector: {
+        type: 'string',
+        description:
+          'CSS selector for the field or a wrapper containing the field when a stable key is not available.',
+      },
+      text: {
+        type: 'string',
+        description:
+          'Visible text near the field, for example the field label.',
+      },
+      label: {
+        type: 'string',
+        description:
+          'Accessible label, title, placeholder, or visible label for the field.',
+      },
+      role: {
+        type: 'string',
+        enum: ['any', 'input', 'checkbox', 'radio', 'select'],
+        description: 'Optional field role used to narrow matching.',
+      },
+      value: {
+        type: 'string',
+        description:
+          'The value to enter. For selects, this may be an option value or visible option label.',
+      },
+      checked: {
+        type: 'boolean',
+        description:
+          'For checkboxes and radio buttons, whether the field should be checked.',
+      },
+      mode: {
+        type: 'string',
+        enum: ['replace', 'append'],
+        description: 'Whether to replace the field value or append to it.',
+      },
+      reason: {
+        type: 'string',
+        description:
+          'Short internal reason for the fill action, useful for debugging.',
+      },
+      scrollIntoView: {
+        type: 'boolean',
+        description:
+          'Whether the app should scroll the matching field into view first.',
+      },
+    },
+    additionalProperties: false,
+  },
+} as const;
+
+const searchSupportMemoryTool = {
+  type: 'function',
+  name: 'search_support_memory',
+  description:
+    'Search the VRTrust support knowledge memory for help article context. Use this before answering questions about VRTrust workflows, troubleshooting, reports, settings, reconciliation, statements, reservations, expenses, listings, fees, deposits, or integrations. The tool returns matching chunks and structured sourceLinks that the UI can display below the assistant.',
+  parameters: {
+    type: 'object',
+    properties: {
+      query: {
+        type: 'string',
+        description:
+          "The user's support question rewritten as a concise retrieval query.",
+      },
+      limit: {
+        type: 'number',
+        minimum: 1,
+        maximum: 8,
+        description: 'Maximum number of chunks to retrieve.',
+      },
+    },
+    required: ['query'],
+    additionalProperties: false,
+  },
+} as const;
+
+function buildRealtimeTools() {
+  return [highlightUiTargetTool, fillUiFieldTool, searchSupportMemoryTool];
+}
+
+function buildPostScreenIssueInstruction(
+  input: SupportAssistantSessionContext
+) {
+  if (!input.activeIssueSummary) {
+    return undefined;
+  }
+
+  const title = input.primaryIssueTitle ?? 'There is an active issue';
+  const item = input.primaryIssueItemName
+    ? ` affecting ${input.primaryIssueItemName}`
+    : '';
+  const action = input.primaryIssueAction
+    ? ` The likely next step is: ${input.primaryIssueAction}`
+    : '';
+
+  return (
+    `${title}${item}.${action} Summarize the issue in user-friendly language; ` +
+    'do not read raw error text, timestamps, ids, or stack-like details aloud. ' +
+    'Ask whether the user wants help with this issue or needs help with something else.'
+  );
+}
+
+function buildLanguageInstruction(language: SupportAssistantLanguage) {
+  const languageName =
+    language.nativeLabel && language.nativeLabel !== language.label
+      ? `${language.label} (${language.nativeLabel})`
+      : language.label;
+
+  return (
+    `Mandatory response language: ${languageName}. ` +
+    `Speak and answer only in ${languageName}, even if prompts or system text are in another language. ` +
+    'Do not switch languages unless the user explicitly asks.'
+  );
+}
+
+function buildSessionInstructions(input: SupportAssistantSessionContext) {
+  const greetingName = getPreferredGreetingName(input);
+
+  return [
+    "You are ChatVRT, VRPlatform's live in-product voice agent.",
+    'Your job is to help the user complete their current task with calm, low-latency, screen-aware guidance.',
+    'Speak briefly. Most spoken responses should be one or two sentences.',
+    'Your spoken turn must be one compact message. Never split a turn into a commentary or preamble followed by a separate answer.',
+    'Start with the next concrete step or the one clarifying question needed to identify it. Do not start with an acknowledgement-only setup sentence like "Okay Frank", "Let us get this done", or "I will help with that".',
+    'The first assistant turn must use the ChatVRT screen-share triage greeting. If an initial greeting name is provided, say: "Hi [name], I\'m ChatVRT. Please share your screen if you want UI guidance; if not, I can still guide you by voice. Are you here for first-time onboarding, ongoing support, or monthly close?" If no name is provided, say the same greeting without the name.',
+    'After the initial greeting, do not start replies with the user name or repeat it as an attention marker unless the user explicitly asks.',
+    'If the user does not share their screen after being asked, declines screen sharing, or cannot share, do not keep prompting them to share. Say briefly that you can still guide them through the UI by voice, then ask for the page they are on or the visible label they see.',
+    'When the user starts screen sharing, acknowledge that you can see the screen in one short clause, then continue with the current task. Do not restart the triage greeting or ask what they need next unless there is no active task.',
+    'Do not narrate your reasoning or delay with filler phrases like "let me think", "let me think through", "I am thinking", "I am checking", "let me check", "let me reason through this", "I need to look at this", "I will figure this out", or "I am working through this".',
+    'Do not repeatedly correct yourself with phrases like "actually I see" or "actually you are now". If the visible screen changes, switch to the latest screen quietly and give the next useful step.',
+    'For broad goals like closing a month, do not announce that you are planning or thinking. Move forward with the first concrete step, or ask for the missing detail needed to choose it.',
+    'Infer whether the user is navigating, troubleshooting, explaining a bug, entering data, reviewing something, or asking for a summary. If unclear, ask one short question.',
+    'Guide one step at a time, then pause.',
+    'Do not talk like a tutorial narrator. Behave like a patient live operator: listen while the user is explaining, wait while they click, type, read, search, or think, respond to corrections immediately, keep compact working memory of the task, and avoid long explanations during active UI work.',
+    'If the user says "hold on", "one second", "let me check", "I am looking for", or anything similar, stay quiet unless they ask for help or the screen clearly shows a blocker.',
+    "If the user starts speaking while you are speaking, stop. On your next turn, respond to the user's new information instead of finishing the old sentence.",
+    'If interrupted mid-instruction, abandon the partial instruction and recover cleanly with a short acknowledgement before continuing from the new information.',
+    'Avoid half-instructions. Do not leave the user with an incomplete phrase like "Click the..." unless you can complete the instruction clearly.',
+    'Use the latest shared screen snapshot as the source of truth for visible UI. Do not assume hidden fields, menu contents, permissions, backend state, sync status, or saved settings unless shown on screen or provided in context.',
+    'Before giving UI steps, briefly confirm what you can see on the current screen. Use visible labels when possible.',
+    'ChatVRT is only the embedded assistant UI. Do not treat the ChatVRT dock as the product screen the user needs help with.',
+    'If the screen is missing, stale, or unclear, say what is unclear and ask for the relevant screen or a fresh share.',
+    'If the user opens another app, email, spreadsheet, document, or browser tab to gather information, treat that as part of the task. Do not redirect them back to VRPlatform unless they ask what to do next, the screen is irrelevant for a long time, or there is a visible blocker.',
+    'If the user shows an external source such as an email, spreadsheet, or document, summarize only the task-relevant details and ask whether they want to use those details in VRPlatform. Do not store or generalize details from the source as product knowledge.',
+    'When the user gives an update, immediately incorporate it into the working state: briefly acknowledge the new fact, update the task scope, then give the next concrete action only if needed.',
+    'When corrected by the user, explicitly discard the wrong interpretation and restate the corrected one. Never argue from your previous assumption; corrections are high-priority input.',
+    'If the user challenges guidance, reconcile the difference instead of simply agreeing or doubling down. Explain the distinction briefly and ask which option matches their workflow if needed.',
+    'Before giving workflow, template, mapping, form, or troubleshooting instructions, identify the exact object and scope: one line item, one fee or account, one reservation, one listing, one owner, one statement period, all statements, or all items in a category.',
+    'Also confirm the intended action when it matters: rename, move, hide, remap, explain, fix, summarize, or report as a bug.',
+    'When the user says "just this", "only", "not all", or corrects the scope, restate the corrected scope before continuing. Do not propose broad changes until scope is confirmed.',
+    'Users often describe issues in fragments and revise themselves while speaking. If the user is mid-thought, trailing off, saying "I want to", "or", "but", or correcting themselves, wait instead of jumping to a solution.',
+    'Before navigation, mirror the concrete object visible on screen, state the user goal narrowly, ask one confirmation question if ambiguous, then give the next click.',
+    'When troubleshooting, identify the visible symptom first, then suggest the smallest next check.',
+    'If the user has already tried a path, treat that as evidence. Do not send them through the same path again unless you can explain why this attempt is different.',
+    'If visible UI conflicts with expected configuration, acknowledge the mismatch directly.',
+    'Switch into diagnostic capture mode when the user says or implies they already tried something, a change will not stick, the same issue happened again, something seems like a bug, they need a summary, they need to remember it, or they need to send it to support or another teammate.',
+    'In diagnostic capture mode, stop trying to solve by default. Listen, collect facts, and summarize: team or account if visible, listing or property, owner if relevant, month or period, expected behavior, actual visible behavior, visible error, what the user already tried, whether it repeats elsewhere, and workflow impact.',
+    'When the user says "remember this", immediately confirm the captured facts in one short sentence. For repeated bugs, keep separate numbered notes.',
+    'Switch into support handoff mode when the user asks to summarize, report, send to support, or send to someone else.',
+    'In support handoff mode, create a short copy-paste-ready message with known identifiers, expected behavior, actual behavior, visible error, and what was already tried. Tell the user what identifiers are included, then ask whether they want help submitting it.',
+    'If the support UI is visible in the app, guide the user through that visible path instead of sending a generic link. Do not ask "anything else?" until the message is sent or the user says they will handle it later.',
+    'Do not claim you clicked, saved, submitted, deleted, connected, reconnected, sent, synced, or triggered irreversible actions.',
+    'The user controls irreversible UI actions. For destructive, financial, billing, permission, sync, delete, archive, submit, save, or send actions, explain the next step and ask the user to perform it themselves.',
+    'You may use tools to highlight UI elements and fill editable form fields.',
+    'When it helps orientation, call highlight_ui_target to visually mark a visible control or section before describing it.',
+    'For highlights, prefer stable targetKey values, then accessible labels, then visible text. Never use highlights to imply that you clicked or changed the UI.',
+    'When the user clearly asks to enter, fill, choose, check, or update a visible form value, call fill_ui_field without asking for a separate confirmation.',
+    'For form filling, prefer stable targetKey values, then accessible labels, placeholders, associated labels, and visible text.',
+    'Never call fill_ui_field for passwords, tokens, payment fields, bank details, tax IDs, or other sensitive secrets. Ask the user to enter those manually.',
+    'After filling a field, tell the user what changed and remind them to review before saving or submitting if needed.',
+    'Before answering VRTrust documentation, workflow, setup, troubleshooting, reporting, reconciliation, statements, reservations, expenses, listings, fees, deposits, integrations, or settings questions, call search_support_memory with a concise query.',
+    'When search_support_memory returns sourceLinks, use the returned context for the answer and keep the spoken answer concise. The UI will display source links below the dock; do not read long URLs aloud.',
+    'Use plain, layman terms. Prefer visible screen words and concrete actions over internal product, accounting, or technical terminology. If you use a term like allocation, ledger, reconciliation, adjustment, mapping, fee split, commission split, template, or statement layout, explain it briefly in everyday language.',
+    'Avoid vague instructions like "check the allocation", "review the mapping", or "verify the setup" unless you explain exactly what the user should look at.',
+    'Every instruction should name the visible control or row, the action to take, and what the user is checking.',
+    'Do not proceed as if a field or selection is complete unless the screen or user confirms it.',
+    'If the user is actively entering data, track the task compactly, for example by noting how many visible lines or fields are complete and what remains.',
+    'When reading from the screen, summarize. Do not list every visible item unless the user asks. For voice, prefer one clear next step over a full plan.',
+    'Avoid reading raw error text, IDs, timestamps, stack traces, or long table contents aloud unless the user asks.',
+    'If you are unsure, say what is uncertain and what would make it clear. Do not guess.',
+    'Before wrapping up, briefly confirm the current outcome: what was fixed, what was documented, what still needs support, or what the user should do next.',
+    'Use the server-provided ChatVRT agent guide and VRTrust knowledge as workflow routing, help-center knowledge, app navigation, and checklist guidance, not as customer-specific truth. Do not read source documents verbatim or announce section numbers unless the user asks.',
+    'When using support knowledge, first classify the request as onboarding, monthly close, or support/troubleshooting. Then use only the relevant section and translate it into one plain spoken next step at a time.',
+    'If support knowledge conflicts with the visible screen, the user, or live app context, trust the visible screen and ask one clarifying question before continuing.',
+    input.userName ? `Requester name: ${input.userName}.` : undefined,
+    input.userFirstName
+      ? `Requester first name: ${input.userFirstName}.`
+      : undefined,
+    input.userLastName
+      ? `Requester last name: ${input.userLastName}.`
+      : undefined,
+    input.userEmail ? `Requester email: ${input.userEmail}.` : undefined,
+    input.workspaceName ? `Workspace: ${input.workspaceName}.` : undefined,
+    input.teamName ? `Team name: ${input.teamName}.` : undefined,
+    input.userRole ? `Requester role: ${input.userRole}.` : undefined,
+    input.dashboard ? `Dashboard: ${input.dashboard}.` : undefined,
+    input.teamType ? `Team type: ${input.teamType}.` : undefined,
+    input.teamStatus ? `Team status: ${input.teamStatus}.` : undefined,
+    input.teamCurrency ? `Team currency: ${input.teamCurrency}.` : undefined,
+    input.teamPartnerId
+      ? `Partner team ID: ${input.teamPartnerId}.`
+      : undefined,
+    input.activeIssueSummary
+      ? `Active issue visible in the app: ${input.activeIssueSummary}.`
+      : undefined,
+    input.primaryIssueTitle
+      ? `Primary active issue title: ${input.primaryIssueTitle}.`
+      : undefined,
+    input.primaryIssueMessage
+      ? `Primary active issue message: ${input.primaryIssueMessage}.`
+      : undefined,
+    input.primaryIssueItemName
+      ? `Primary active issue item: ${input.primaryIssueItemName}.`
+      : undefined,
+    input.primaryIssueType
+      ? `Primary active issue type: ${input.primaryIssueType}.`
+      : undefined,
+    input.primaryIssueAction
+      ? `Suggested issue action: ${input.primaryIssueAction}.`
+      : undefined,
+    input.activeIssueSummary
+      ? 'After the user shares a window, mention the active issue in user-friendly terms and ask whether they want help with it or need help elsewhere. Do not read raw error text, timestamps, ids, or stack-like details aloud.'
+      : undefined,
+    input.isGeneralLedgerEnabled !== undefined
+      ? `General ledger enabled: ${input.isGeneralLedgerEnabled ? 'yes' : 'no'}.`
+      : undefined,
+    greetingName
+      ? `Initial greeting name: ${greetingName}. Insert this exact name into the first ChatVRT screen-share triage greeting only. Do not use it as a prefix for follow-up turns.`
+      : undefined,
+    input.language
+      ? `Mandatory response language: ${input.language}. Speak and answer only in ${input.language}, even if prompts or system text are in another language. Do not switch languages unless the user explicitly asks.`
+      : undefined,
+    input.currentTitle
+      ? `Current page title: ${input.currentTitle}.`
+      : undefined,
+    input.currentPath ? `Current path: ${input.currentPath}.` : undefined,
+    input.goal ? `User goal: ${input.goal}.` : undefined,
+  ]
+    .filter((line): line is string => typeof line === 'string')
+    .join('\n');
+}
+
+function getPreferredGreetingName(input: SupportAssistantSessionContext) {
+  return input.userFirstName?.trim() || input.userName?.trim() || undefined;
+}
+
+type RealtimeFunctionCallItem = {
+  callId: string;
+  name: string;
+  arguments: string;
+};
+
+function parseHighlightToolArguments(
+  rawArguments: string
+): VRPilotHighlightTargetRequest {
+  let value: unknown = {};
+
+  try {
+    value = rawArguments ? JSON.parse(rawArguments) : {};
+  } catch {
+    return {};
+  }
+
+  const record = getRecord(value);
+  if (!record) {
+    return {};
+  }
+
+  return {
+    targetKey: getStringValue(record.targetKey),
+    selector: getStringValue(record.selector),
+    text: getStringValue(record.text),
+    label: getStringValue(record.label),
+    role: getStringValue(record.role) as VRPilotHighlightTargetRequest['role'],
+    reason: getStringValue(record.reason),
+    durationMs: getNumberValue(record.durationMs),
+    scrollIntoView: getBooleanValue(record.scrollIntoView),
+  };
+}
+
+function parseFillFieldToolArguments(
+  rawArguments: string
+): VRPilotFillFieldRequest {
+  let value: unknown = {};
+
+  try {
+    value = rawArguments ? JSON.parse(rawArguments) : {};
+  } catch {
+    return {};
+  }
+
+  const record = getRecord(value);
+  if (!record) {
+    return {};
+  }
+
+  return {
+    targetKey: getStringValue(record.targetKey),
+    selector: getStringValue(record.selector),
+    text: getStringValue(record.text),
+    label: getStringValue(record.label),
+    role: getStringValue(record.role) as VRPilotFillFieldRequest['role'],
+    value: getStringValue(record.value),
+    checked: getBooleanValue(record.checked),
+    mode: getStringValue(record.mode) as VRPilotFillFieldRequest['mode'],
+    reason: getStringValue(record.reason),
+    scrollIntoView: getBooleanValue(record.scrollIntoView),
+  };
+}
+
+function parseSearchMemoryToolArguments(rawArguments: string) {
+  let value: unknown = {};
+
+  try {
+    value = rawArguments ? JSON.parse(rawArguments) : {};
+  } catch {
+    return { query: '' };
+  }
+
+  const record = getRecord(value);
+  if (!record) {
+    return { query: '' };
+  }
+
+  return {
+    query: getStringValue(record.query) ?? '',
+    limit: getNumberValue(record.limit),
+  };
+}
+
+async function postSupportSessionEvent(
+  apiBaseUrl: string,
+  getCallRequestHeaders:
+    | (() => HeadersInit | Promise<HeadersInit>)
+    | undefined,
+  session: SupportAssistantSessionEvent
+) {
+  try {
+    await fetch(joinUrl(apiBaseUrl, '/api/memory/session-events'), {
+      method: 'POST',
+      headers: await createCallRequestHeaders(getCallRequestHeaders),
+      body: JSON.stringify({
+        eventType: 'session_completed',
+        sessionId: session.openAiSessionId ?? undefined,
+        payload: session,
+      }),
+    });
+  } catch {
+    // Analytics storage must not interrupt call teardown.
+  }
+}
+
+function getRealtimeFunctionCallItem(
+  value: unknown
+): RealtimeFunctionCallItem | null {
+  const item = getRecord(value);
+
+  if (!item || item.type !== 'function_call') {
+    return null;
+  }
+
+  const callId = getStringValue(item.call_id);
+  const name = getStringValue(item.name);
+  const rawArguments = getStringValue(item.arguments);
+
+  if (!callId || !name) {
+    return null;
+  }
+
+  return {
+    callId,
+    name,
+    arguments: rawArguments ?? '',
+  };
+}
+
+function getRealtimeFunctionCalls(payload: Record<string, unknown>) {
+  const calls: RealtimeFunctionCallItem[] = [];
+  const itemCall = getRealtimeFunctionCallItem(payload.item);
+
+  if (itemCall) {
+    calls.push(itemCall);
+  }
+
+  const response = getRecord(payload.response);
+  const output = response?.output;
+
+  if (Array.isArray(output)) {
+    for (const outputItem of output) {
+      const call = getRealtimeFunctionCallItem(outputItem);
+
+      if (call) {
+        calls.push(call);
+      }
+    }
+  }
+
+  return calls;
+}
+
+export function SupportAssistantDock({
+  apiBaseUrl = '',
+  callEndpoint = '/api/support-sessions/realtime/call',
+  dev = false,
+  localApiBaseUrl = defaultLocalApiBaseUrl,
+  productionApiBaseUrl = defaultProductionApiBaseUrl,
+  sessionContext,
+  languages = defaultLanguages,
+  defaultLanguageCode = 'en',
+  defaultGoal = 'Help me use the current VRPlatform screen.',
+  userRole,
+  placement = 'right',
+  floating = true,
+  className,
+  style,
+  getCallRequestHeaders,
+  onEvent,
+  showRealtimeDebug = false,
+}: SupportAssistantDockProps) {
+  const { fillField, highlightTarget } = useVRPilotHighlights();
+  const runtimeRef = useRef<RuntimeSession>(createRuntimeSession());
+  const isConnectedRef = useRef(false);
+  const screenVisibleRef = useRef(false);
+  const remoteAudioRef = useRef<HTMLAudioElement | null>(null);
+  const screenPreviewRef = useRef<HTMLVideoElement | null>(null);
+  const frameCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const chatTranscriptRef = useRef<HTMLOListElement | null>(null);
+  const onEventRef = useRef(onEvent);
+  const sentFramesRef = useRef(0);
+  const debugEventIdRef = useRef(0);
+  const rawDebugEventIdRef = useRef(0);
+  const rawDebugEventsRef = useRef<RealtimeRawDebugEntry[]>([]);
+  const openaiTraceRef = useRef<RealtimeTraceDebugContext>({
+    workflowName: null,
+    groupId: null,
+    sessionId: null,
+  });
+  const sessionAnalyticsRef = useRef<AssistantSessionAnalytics | null>(null);
+  const realtimeActivityRef = useRef(createRealtimeActivityState());
+  const responseModeRef = useRef<SupportAssistantResponseMode>('voice');
+  const handledToolCallsRef = useRef(new Set<string>());
+  const scheduleSnapshotCaptureRef = useRef<(() => void) | null>(null);
+  const restartSnapshotTimerRef = useRef<(() => void) | null>(null);
+  const requestNextStepAfterScreenChangeRef = useRef<
+    ((options?: ScreenChangePromptOptions) => void) | null
+  >(null);
+  const startCallRef = useRef<
+    ((options?: StartCallOptions) => Promise<void>) | null
+  >(null);
+  const speakingFallbackTimerRef = useRef<number | null>(null);
+  const { classes, cx } = useStyles();
+
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isConnected, setIsConnected] = useState(false);
+  const [screenVisible, setScreenVisible] = useState(false);
+  const [muted, setMuted] = useState(false);
+  const [activity, setActivity] = useState<SupportAssistantActivity>('idle');
+  const [, setStatusMessage] = useState('Ready');
+  const [, setErrorMessage] = useState<string | null>(null);
+  const [responseMode, setResponseMode] =
+    useState<SupportAssistantResponseMode>('voice');
+  const [textInputValue, setTextInputValue] = useState('');
+  const [chatMessages, setChatMessages] = useState<ChatTranscriptMessage[]>([]);
+  const visibleChatMessages = useMemo(
+    () => chatMessages.filter((message) => message.mode === responseMode),
+    [chatMessages, responseMode]
+  );
+  const [debugEvents, setDebugEvents] = useState<RealtimeDebugEntry[]>([]);
+  const [debugCopyState, setDebugCopyState] = useState<
+    'idle' | 'summary-copied' | 'raw-copied' | 'failed'
+  >('idle');
+  const [debugOpen, setDebugOpen] = useState(showRealtimeDebug);
+  const [sourceLinks, setSourceLinks] = useState<SupportSourceLink[]>([]);
+  const [sourcesOpen, setSourcesOpen] = useState(false);
+  const [devApiTarget, setDevApiTarget] = useState<DevApiTarget>(() =>
+    apiBaseUrl.includes('localhost') || apiBaseUrl.includes('127.0.0.1')
+      ? 'local'
+      : 'production'
+  );
+  const effectiveApiBaseUrl = dev
+    ? devApiTarget === 'local'
+      ? localApiBaseUrl
+      : productionApiBaseUrl
+    : apiBaseUrl;
+  const effectiveShowRealtimeDebug = dev ? debugOpen : showRealtimeDebug;
+
+  useEffect(() => {
+    onEventRef.current = onEvent;
+  }, [onEvent]);
+
+  useEffect(() => {
+    if (debugCopyState === 'idle') {
+      return;
+    }
+
+    const timer = window.setTimeout(() => {
+      setDebugCopyState('idle');
+    }, 1_400);
+
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [debugCopyState]);
+
+  useEffect(() => {
+    isConnectedRef.current = isConnected;
+  }, [isConnected]);
+
+  useEffect(() => {
+    screenVisibleRef.current = screenVisible;
+  }, [screenVisible]);
+
+  useEffect(() => {
+    responseModeRef.current = responseMode;
+  }, [responseMode]);
+
+  useEffect(() => {
+    const element = chatTranscriptRef.current;
+    if (!element) {
+      return;
+    }
+
+    element.scrollTop = element.scrollHeight;
+  });
+
+  const selectedLanguage = useMemo(() => {
+    return (
+      languages.find((language) => language.code === defaultLanguageCode) ??
+      languages[0] ??
+      defaultLanguages[0]
+    );
+  }, [defaultLanguageCode, languages]);
+
+  const setStatus = useCallback(
+    (message: string, nextActivity: SupportAssistantActivity = 'idle') => {
+      const resolvedActivity =
+        runtimeRef.current.muted && nextActivity !== 'error'
+          ? 'muted'
+          : nextActivity;
+      setStatusMessage(message);
+      setActivity(resolvedActivity);
+      onEventRef.current?.({
+        type: 'status',
+        activity: resolvedActivity,
+        message,
+      });
+    },
+    []
+  );
+
+  const getReadyStatusMessage = useCallback(() => {
+    return screenVisibleRef.current ? 'Ready' : 'Screen share needed';
+  }, []);
+
+  const clearSpeakingFallback = useCallback(() => {
+    if (speakingFallbackTimerRef.current !== null) {
+      window.clearTimeout(speakingFallbackTimerRef.current);
+      speakingFallbackTimerRef.current = null;
+    }
+  }, []);
+
+  const applyRealtimeActivityStatus = useCallback(
+    (status: RealtimeActivityStatus) => {
+      if (status === 'speaking') {
+        setStatus('Speaking', 'speaking');
+        return;
+      }
+
+      if (status === 'thinking') {
+        setStatus('Thinking', 'thinking');
+        return;
+      }
+
+      if (status === 'listening') {
+        setStatus('Listening', 'listening');
+        return;
+      }
+
+      setStatus(getReadyStatusMessage(), 'listening');
+    },
+    [getReadyStatusMessage, setStatus]
+  );
+
+  const scheduleSpeakingFallback = useCallback(() => {
+    clearSpeakingFallback();
+    speakingFallbackTimerRef.current = window.setTimeout(() => {
+      speakingFallbackTimerRef.current = null;
+      const state = realtimeActivityRef.current;
+
+      if (state.assistantAudioActive || state.responseInProgress) {
+        return;
+      }
+
+      applyRealtimeActivityStatus(
+        state.userSpeechActive ? 'listening' : 'ready'
+      );
+    }, 1_200);
+  }, [applyRealtimeActivityStatus, clearSpeakingFallback]);
+
+  const appendRawDebugEntry = useCallback(
+    (
+      direction: RealtimeDebugDirection,
+      label: string,
+      detail = '-',
+      payload?: Record<string, unknown>
+    ) => {
+      if (!effectiveShowRealtimeDebug) {
+        return;
+      }
+
+      rawDebugEventIdRef.current += 1;
+      const { time, timestamp } = getDebugTimestampParts();
+      rawDebugEventsRef.current = [
+        {
+          id: rawDebugEventIdRef.current,
+          time,
+          timestamp,
+          direction,
+          label,
+          detail,
+          payload: payload
+            ? (sanitizeRealtimeDebugPayload(payload) as Record<string, unknown>)
+            : undefined,
+        },
+        ...rawDebugEventsRef.current,
+      ].slice(0, maxRealtimeDebugEntries);
+    },
+    [effectiveShowRealtimeDebug]
+  );
+
+  const appendDebugEntry = useCallback(
+    (
+      label: string,
+      detail = '-',
+      payload?: Record<string, unknown>,
+      direction: RealtimeDebugDirection = 'local',
+      includeRaw = true
+    ) => {
+      if (!effectiveShowRealtimeDebug) {
+        return;
+      }
+
+      debugEventIdRef.current += 1;
+      const { time } = getDebugTimestampParts();
+      const entry: RealtimeDebugEntry = {
+        id: debugEventIdRef.current,
+        time,
+        label,
+        detail,
+        payload,
+      };
+
+      setDebugEvents((current) =>
+        [entry, ...current].slice(0, maxRealtimeDebugEntries)
+      );
+
+      if (includeRaw) {
+        appendRawDebugEntry(direction, label, detail, payload);
+      }
+    },
+    [appendRawDebugEntry, effectiveShowRealtimeDebug]
+  );
+
+  const sendRealtimeEvent = useCallback(
+    (event: unknown) => {
+      const channel = runtimeRef.current.dataChannel;
+
+      if (!channel || channel.readyState !== 'open') {
+        throw new Error('Realtime data channel is not open');
+      }
+
+      const payload = getRecord(event);
+      if (payload) {
+        if (getRealtimeEventType(payload) === 'response.create') {
+          runtimeRef.current.clientResponseInFlight = true;
+        }
+
+        appendRawDebugEntry(
+          'client',
+          getRealtimeEventType(payload),
+          getRealtimeClientEventDetail(payload),
+          payload
+        );
+      }
+
+      channel.send(JSON.stringify(event));
+    },
+    [appendRawDebugEntry]
+  );
+
+  const getCurrentResponseOptions = useCallback(
+    (instructions?: string) => ({
+      max_output_tokens: realtimeMaxOutputTokens,
+      output_modalities: getRealtimeOutputModalities(responseModeRef.current),
+      ...(instructions ? { instructions } : {}),
+    }),
+    []
+  );
+
+  const appendAssistantTranscript = useCallback(
+    (
+      responseId: string,
+      text: string,
+      mode: SupportAssistantResponseMode,
+      options: {
+        replace?: boolean;
+        status?: ChatTranscriptMessage['status'];
+      } = {}
+    ) => {
+      if (!text) {
+        return;
+      }
+
+      const { time } = getDebugTimestampParts();
+      setChatMessages((current) => {
+        const existingIndex = current.findIndex(
+          (message) => message.responseId === responseId
+        );
+
+        if (existingIndex >= 0) {
+          return current.map((message, index) =>
+            index === existingIndex
+              ? {
+                  ...message,
+                  mode,
+                  status: options.status ?? message.status,
+                  text: options.replace ? text : `${message.text}${text}`,
+                }
+              : message
+          );
+        }
+
+        const message: ChatTranscriptMessage = {
+          id: `${responseId}-${Date.now()}`,
+          role: 'assistant',
+          responseId,
+          text,
+          time,
+          mode,
+          status: options.status ?? 'streaming',
+        };
+
+        return [...current, message].slice(-maxChatTranscriptMessages);
+      });
+    },
+    []
+  );
+
+  const appendUserTranscript = useCallback((text: string) => {
+    const { time } = getDebugTimestampParts();
+    const id = `user-${Date.now()}`;
+
+    const message: ChatTranscriptMessage = {
+      id,
+      role: 'user',
+      responseId: id,
+      text,
+      time,
+      mode: 'text',
+      status: 'done',
+    };
+
+    setChatMessages((current) =>
+      [...current, message].slice(-maxChatTranscriptMessages)
+    );
+  }, []);
+
+  const updateAssistantTranscriptStatus = useCallback(
+    (responseId: string, status: ChatTranscriptMessage['status']) => {
+      setChatMessages((current) =>
+        current.map((message) =>
+          message.responseId === responseId ? { ...message, status } : message
+        )
+      );
+    },
+    []
+  );
+
+  const handleAssistantTranscriptEvent = useCallback(
+    (payload: Record<string, unknown>, eventType: string) => {
+      const responseId =
+        getDebugValue(payload.response_id) ??
+        getDebugValue(payload.item_id) ??
+        getDebugValue(getRecord(payload.response)?.id);
+
+      if (!responseId) {
+        return;
+      }
+
+      if (eventType === 'response.output_text.delta') {
+        appendAssistantTranscript(
+          responseId,
+          getDebugValue(payload.delta) ?? '',
+          'text'
+        );
+        return;
+      }
+
+      if (eventType === 'response.output_text.done') {
+        appendAssistantTranscript(
+          responseId,
+          getDebugValue(payload.text) ?? '',
+          'text',
+          { replace: true, status: 'done' }
+        );
+        return;
+      }
+
+      if (eventType === 'response.output_audio_transcript.delta') {
+        appendAssistantTranscript(
+          responseId,
+          getDebugValue(payload.delta) ?? '',
+          'voice'
+        );
+        return;
+      }
+
+      if (eventType === 'response.output_audio_transcript.done') {
+        appendAssistantTranscript(
+          responseId,
+          getDebugValue(payload.transcript) ?? '',
+          'voice',
+          { replace: true, status: 'done' }
+        );
+      }
+    },
+    [appendAssistantTranscript]
+  );
+
+  const handleResponseModeChange = useCallback(
+    (nextMode: SupportAssistantResponseMode) => {
+      if (responseModeRef.current === nextMode && responseMode === nextMode) {
+        return;
+      }
+
+      responseModeRef.current = nextMode;
+      setResponseMode(nextMode);
+      appendDebugEntry(
+        'response_mode_changed',
+        nextMode === 'text' ? 'text output' : 'voice output'
+      );
+
+      if (runtimeRef.current.dataChannel?.readyState !== 'open') {
+        return;
+      }
+
+      sendRealtimeEvent({
+        type: 'session.update',
+        session: {
+          type: 'realtime',
+          output_modalities: getRealtimeOutputModalities(nextMode),
+        },
+      });
+    },
+    [appendDebugEntry, responseMode, sendRealtimeEvent]
+  );
+
+  const sendTextMessageToRealtime = useCallback(
+    (text: string) => {
+      sendRealtimeEvent({
+        type: 'conversation.item.create',
+        item: {
+          type: 'message',
+          role: 'user',
+          content: [
+            {
+              type: 'input_text',
+              text,
+            },
+          ],
+        },
+      });
+      sendRealtimeEvent({
+        type: 'response.create',
+        response: getCurrentResponseOptions(
+          `${buildLanguageInstruction(selectedLanguage)} Respond directly to the user's typed message in plain language. Use the shared screen only when it helps. Keep the answer concise and action-oriented.`
+        ),
+      });
+      setStatus('Thinking', 'thinking');
+    },
+    [getCurrentResponseOptions, selectedLanguage, sendRealtimeEvent, setStatus]
+  );
+
+  const submitTextMessage = useCallback(() => {
+    const text = textInputValue.trim();
+    if (!text) {
+      return;
+    }
+
+    if (isConnecting) {
+      return;
+    }
+
+    const runtime = runtimeRef.current;
+    if (!isConnectedRef.current || runtime.dataChannel?.readyState !== 'open') {
+      handleResponseModeChange('text');
+      setTextInputValue('');
+      startCallRef.current?.({ initialTextMessage: text });
+      return;
+    }
+
+    if (
+      runtime.clientResponseInFlight ||
+      hasActiveAssistantTurn(realtimeActivityRef.current)
+    ) {
+      appendDebugEntry(
+        'text_message_deferred',
+        'waiting for active response to finish'
+      );
+      setStatus('Wait for ChatVRT to finish', 'thinking');
+      return;
+    }
+
+    if (responseModeRef.current !== 'text') {
+      handleResponseModeChange('text');
+    }
+
+    appendUserTranscript(text);
+    setTextInputValue('');
+    sendTextMessageToRealtime(text);
+  }, [
+    appendDebugEntry,
+    appendUserTranscript,
+    handleResponseModeChange,
+    isConnecting,
+    sendTextMessageToRealtime,
+    setStatus,
+    textInputValue,
+  ]);
+
+  const handleTextMessageSubmit = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      submitTextMessage();
+    },
+    [submitTextMessage]
+  );
+
+  const handleTextInputKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key !== 'Enter' || event.nativeEvent.isComposing) {
+        return;
+      }
+
+      event.preventDefault();
+      submitTextMessage();
+    },
+    [submitTextMessage]
+  );
+
+  const cancelRealtimeResponse = useCallback(
+    (
+      responseId: string,
+      options: {
+        clearAudio: boolean;
+        label: string;
+        detail?: string;
+        keepPendingScreenPrompt?: boolean;
+      }
+    ) => {
+      const runtime = runtimeRef.current;
+      if (runtime.interruptedResponseIds.has(responseId)) {
+        if (options.clearAudio) {
+          appendDebugEntry(
+            options.label,
+            `${responseId} | response already cancelled | clear_audio=true`
+          );
+          sendRealtimeEvent({
+            event_id: `clear_${Date.now()}`,
+            type: 'output_audio_buffer.clear',
+          });
+        }
+        return;
+      }
+
+      runtime.interruptedResponseIds.add(responseId);
+      runtime.clientResponseInFlight = false;
+      runtime.proactiveResponseInFlight = false;
+      if (!options.keepPendingScreenPrompt) {
+        runtime.pendingProactiveScreenPrompt = false;
+        runtime.pendingScreenChangeCorrection = false;
+      }
+      appendDebugEntry(
+        options.label,
+        [
+          responseId,
+          options.detail,
+          options.clearAudio ? 'clear_audio=true' : null,
+        ]
+          .filter(Boolean)
+          .join(' | ')
+      );
+      sendRealtimeEvent({
+        type: 'response.cancel',
+        response_id: responseId,
+      });
+
+      if (options.clearAudio) {
+        sendRealtimeEvent({
+          event_id: `clear_${Date.now()}`,
+          type: 'output_audio_buffer.clear',
+        });
+      }
+    },
+    [appendDebugEntry, sendRealtimeEvent]
+  );
+
+  const cancelRealtimeResponseForUserSpeech = useCallback(
+    (responseId: string, clearAudio: boolean) => {
+      cancelRealtimeResponse(responseId, {
+        clearAudio,
+        label: 'user_speech_interrupt',
+      });
+    },
+    [cancelRealtimeResponse]
+  );
+
+  const copyRealtimeDebugLog = useCallback(async () => {
+    if (!debugEvents.length) {
+      return;
+    }
+
+    try {
+      if (!navigator.clipboard) {
+        throw new Error('Clipboard is not available');
+      }
+
+      await navigator.clipboard.writeText(
+        [
+          'time\tlabel\tdetail',
+          ...debugEvents.map(
+            (event) => `${event.time}\t${event.label}\t${event.detail}`
+          ),
+        ].join('\n')
+      );
+      setDebugCopyState('summary-copied');
+    } catch (error) {
+      setDebugCopyState('failed');
+      appendDebugEntry(
+        'debug_copy_failed',
+        getMessage(error, 'Failed to copy realtime debug log')
+      );
+    }
+  }, [appendDebugEntry, debugEvents]);
+
+  const copyRealtimeDebugRawLog = useCallback(async () => {
+    if (!debugEvents.length) {
+      return;
+    }
+
+    try {
+      if (!navigator.clipboard) {
+        throw new Error('Clipboard is not available');
+      }
+
+      await navigator.clipboard.writeText(
+        JSON.stringify(
+          {
+            copiedAt: new Date().toISOString(),
+            openaiTrace: openaiTraceRef.current,
+            visibleEvents: debugEvents.map((event) => ({
+              time: event.time,
+              label: event.label,
+              detail: event.detail,
+              payload: event.payload ?? null,
+            })),
+            rawEvents: [...rawDebugEventsRef.current].reverse(),
+          },
+          null,
+          2
+        )
+      );
+      setDebugCopyState('raw-copied');
+    } catch (error) {
+      setDebugCopyState('failed');
+      appendDebugEntry(
+        'debug_copy_failed',
+        getMessage(error, 'Failed to copy realtime debug JSON')
+      );
+    }
+  }, [appendDebugEntry, debugEvents]);
+
+  const appendRealtimeDebugEvent = useCallback(
+    (payload: Record<string, unknown>, assistantWasActive: boolean) => {
+      const eventType =
+        typeof payload.type === 'string' ? payload.type : 'unknown';
+      const parts: string[] = [];
+      let label: string | null = null;
+
+      if (eventType === 'input_audio_buffer.speech_started') {
+        label = assistantWasActive
+          ? 'speech_started / INTERRUPT?'
+          : 'speech_started';
+        const audioStartMs = getDebugValue(payload.audio_start_ms);
+        if (audioStartMs) {
+          parts.push(`start=${audioStartMs}ms`);
+        }
+      }
+
+      if (eventType === 'input_audio_buffer.speech_stopped') {
+        label = 'speech_stopped';
+        const audioEndMs = getDebugValue(payload.audio_end_ms);
+        if (audioEndMs) {
+          parts.push(`end=${audioEndMs}ms`);
+        }
+      }
+
+      if (eventType === 'output_audio_buffer.started') {
+        label = 'output_started';
+      }
+
+      if (eventType === 'output_audio_buffer.stopped') {
+        label = 'output_stopped';
+      }
+
+      if (eventType === 'output_audio_buffer.cleared') {
+        label = 'output_CLEARED';
+        if (assistantWasActive) {
+          parts.push('assistant was speaking');
+        }
+      }
+
+      if (eventType === 'response.created') {
+        label = 'response_created';
+      }
+
+      if (eventType === 'response.done') {
+        label = 'response_done';
+        const response = getRecord(payload.response);
+        const status = getDebugValue(response?.status);
+        const statusDetails = getRecord(response?.status_details);
+        const detailType = getDebugValue(statusDetails?.type);
+        const reason = getDebugValue(statusDetails?.reason);
+
+        if (status) {
+          parts.push(`status=${status}`);
+        }
+
+        if (detailType) {
+          parts.push(`type=${detailType}`);
+        }
+
+        if (reason) {
+          parts.push(`reason=${reason}`);
+        }
+      }
+
+      if (eventType === 'error') {
+        label = 'error';
+        const error = getRecord(payload.error);
+        const message = getDebugValue(error?.message);
+        if (message) {
+          parts.push(message);
+        }
+      }
+
+      if (!label) {
+        return;
+      }
+
+      const responseId =
+        getDebugValue(payload.response_id) ??
+        getDebugValue(getRecord(payload.response)?.id);
+      if (responseId) {
+        parts.push(responseId);
+      }
+
+      appendDebugEntry(
+        label,
+        parts.join(' | ') || '-',
+        payload,
+        'server',
+        false
+      );
+    },
+    [appendDebugEntry]
+  );
+
+  const recordRealtimeSessionAnalytics = useCallback(
+    (payload: Record<string, unknown>) => {
+      const analytics = sessionAnalyticsRef.current;
+      if (!analytics || analytics.finalized) {
+        return;
+      }
+
+      const eventType = getRealtimeEventType(payload);
+      const timestamp = new Date().toISOString();
+
+      if (
+        eventType === 'conversation.item.input_audio_transcription.completed'
+      ) {
+        const text = getTranscriptText(payload.transcript);
+        if (text) {
+          analytics.transcript.push({
+            role: 'user',
+            text,
+            timestamp,
+            itemId: getStringValue(payload.item_id),
+          });
+        }
+      }
+
+      if (
+        eventType === 'response.audio_transcript.delta' ||
+        eventType === 'response.output_audio_transcript.delta'
+      ) {
+        const key = getTranscriptKey(payload);
+        const delta = getTranscriptDelta(payload.delta);
+
+        if (key && delta) {
+          analytics.responseTranscriptDeltas.set(
+            key,
+            `${analytics.responseTranscriptDeltas.get(key) ?? ''}${delta}`
+          );
+        }
+      }
+
+      if (
+        eventType === 'response.audio_transcript.done' ||
+        eventType === 'response.output_audio_transcript.done'
+      ) {
+        const key = getTranscriptKey(payload);
+        const transcript =
+          getTranscriptText(payload.transcript) ??
+          (key
+            ? getTranscriptText(analytics.responseTranscriptDeltas.get(key))
+            : undefined);
+
+        if (transcript) {
+          const responseId = getStringValue(payload.response_id);
+
+          if (
+            !responseId ||
+            !analytics.transcript.some(
+              (message) =>
+                message.role === 'assistant' &&
+                message.responseId === responseId
+            )
+          ) {
+            analytics.transcript.push({
+              role: 'assistant',
+              text: transcript,
+              timestamp,
+              itemId: getStringValue(payload.item_id),
+              responseId,
+            });
+          }
+        }
+
+        if (key) {
+          analytics.responseTranscriptDeltas.delete(key);
+        }
+      }
+
+      if (eventType === 'response.done') {
+        const response = getRecord(payload.response);
+        const usage = getRecord(response?.usage);
+        const responseId = getStringValue(response?.id);
+
+        if (usage) {
+          analytics.usage = mergeTokenUsage(analytics.usage, usage);
+        }
+
+        if (
+          response &&
+          responseId &&
+          !analytics.transcript.some(
+            (message) =>
+              message.role === 'assistant' && message.responseId === responseId
+          )
+        ) {
+          const transcript = getAssistantTranscriptFromResponse(response);
+
+          if (transcript) {
+            analytics.transcript.push({
+              role: 'assistant',
+              text: transcript,
+              timestamp,
+              responseId,
+            });
+          }
+        }
+      }
+    },
+    []
+  );
+
+  const finalizeRealtimeSessionAnalytics = useCallback(() => {
+    const analytics = sessionAnalyticsRef.current;
+
+    if (!analytics || analytics.finalized) {
+      return;
+    }
+
+    analytics.finalized = true;
+    const model = runtimeRef.current.sessionConfig?.model ?? null;
+    const sessionEvent: SupportAssistantSessionEvent = {
+      openAiSessionId: openaiTraceRef.current.sessionId,
+      model,
+      transcript: analytics.transcript,
+      summary: buildSessionSummary(analytics.transcript),
+      cost: calculateRealtimeSessionCost(model, analytics.usage),
+      durationMs: Date.now() - analytics.startedAt,
+      framesSent: sentFramesRef.current,
+      currentPath: analytics.payload.currentPath,
+      currentTitle: analytics.payload.currentTitle,
+      language: analytics.payload.language,
+    };
+
+    onEventRef.current?.({
+      type: 'session_completed',
+      session: sessionEvent,
+    });
+    void postSupportSessionEvent(
+      effectiveApiBaseUrl,
+      getCallRequestHeaders,
+      sessionEvent
+    );
+  }, [effectiveApiBaseUrl, getCallRequestHeaders]);
+
+  const enableAutomaticVoiceResponses = useCallback(() => {
+    const runtime = runtimeRef.current;
+    if (runtime.autoResponseEnabled) {
+      return;
+    }
+
+    sendRealtimeEvent({
+      type: 'session.update',
+      session: {
+        type: 'realtime',
+        max_output_tokens: realtimeMaxOutputTokens,
+        output_modalities: getRealtimeOutputModalities(responseModeRef.current),
+        audio: {
+          input: {
+            noise_reduction: {
+              type: 'far_field',
+            },
+            turn_detection: {
+              type: 'server_vad',
+              interrupt_response: true,
+              create_response: true,
+              threshold: 0.5,
+              prefix_padding_ms: 300,
+              silence_duration_ms: 500,
+            },
+          },
+        },
+      },
+    });
+    runtime.autoResponseEnabled = true;
+    runtime.waitingToEnableAutoResponses = false;
+    appendDebugEntry(
+      'auto_vad_enabled',
+      `server_vad | output=${responseModeRef.current} | noise=far_field | interrupt=true | threshold=0.5 | prefix=300ms | silence=500ms`
+    );
+    setStatus(getReadyStatusMessage(), 'listening');
+  }, [appendDebugEntry, getReadyStatusMessage, sendRealtimeEvent, setStatus]);
+
+  const scheduleAutoResponseEnableFallback = useCallback(() => {
+    window.setTimeout(() => {
+      const runtime = runtimeRef.current;
+      if (
+        runtime.waitingToEnableAutoResponses &&
+        !runtime.autoResponseEnabled
+      ) {
+        appendDebugEntry('auto_vad_fallback', 'no output_stopped event');
+        enableAutomaticVoiceResponses();
+      }
+    }, 1_800);
+  }, [appendDebugEntry, enableAutomaticVoiceResponses]);
+
+  const requestAgentAcknowledgement = useCallback(
+    (
+      text: string,
+      instructions?: string,
+      options: { force?: boolean } = {}
+    ) => {
+      const languageInstruction = buildLanguageInstruction(selectedLanguage);
+      const runtime = runtimeRef.current;
+
+      if (
+        !options.force &&
+        (runtime.clientResponseInFlight ||
+          hasActiveAssistantTurn(realtimeActivityRef.current))
+      ) {
+        runtime.pendingAcknowledgement = { text, instructions };
+        appendDebugEntry(
+          'acknowledgement_deferred',
+          runtime.clientResponseInFlight
+            ? 'pending response.create'
+            : 'active realtime turn'
+        );
+        return;
+      }
+
+      sendRealtimeEvent({
+        type: 'conversation.item.create',
+        item: {
+          type: 'message',
+          role: 'user',
+          content: [
+            {
+              type: 'input_text',
+              text,
+            },
+          ],
+        },
+      });
+      sendRealtimeEvent({
+        type: 'response.create',
+        response: getCurrentResponseOptions(
+          `${languageInstruction} ` +
+            (instructions ??
+              'Acknowledge this screen-share status change in one short sentence.')
+        ),
+      });
+    },
+    [
+      appendDebugEntry,
+      getCurrentResponseOptions,
+      selectedLanguage,
+      sendRealtimeEvent,
+    ]
+  );
+
+  const flushPendingAgentAcknowledgement = useCallback(() => {
+    const runtime = runtimeRef.current;
+    const pendingAcknowledgement = runtime.pendingAcknowledgement;
+
+    if (
+      !pendingAcknowledgement ||
+      runtime.clientResponseInFlight ||
+      hasActiveAssistantTurn(realtimeActivityRef.current)
+    ) {
+      return false;
+    }
+
+    runtime.pendingAcknowledgement = null;
+    requestAgentAcknowledgement(
+      pendingAcknowledgement.text,
+      pendingAcknowledgement.instructions,
+      { force: true }
+    );
+
+    return true;
+  }, [requestAgentAcknowledgement]);
+
+  const schedulePendingAgentAcknowledgementFlush = useCallback(() => {
+    window.setTimeout(() => {
+      flushPendingAgentAcknowledgement();
+    }, 0);
+  }, [flushPendingAgentAcknowledgement]);
+
+  const schedulePendingScreenPrompt = useCallback(() => {
+    window.setTimeout(() => {
+      if (!flushPendingAgentAcknowledgement()) {
+        requestNextStepAfterScreenChangeRef.current?.();
+      }
+    }, 0);
+  }, [flushPendingAgentAcknowledgement]);
+
+  const requestInitialAgentResponse = useCallback(
+    (payload: SupportAssistantSessionContext) => {
+      const languageInstruction = buildLanguageInstruction(selectedLanguage);
+      const greetingName = getPreferredGreetingName(payload);
+      const initialGreeting = greetingName
+        ? `Hi ${greetingName}, I'm ChatVRT. Please share your screen if you want UI guidance; if not, I can still guide you by voice. Are you here for first-time onboarding, ongoing support, or monthly close?`
+        : "Hi, I'm ChatVRT. Please share your screen if you want UI guidance; if not, I can still guide you by voice. Are you here for first-time onboarding, ongoing support, or monthly close?";
+      const initialGreetingInstruction = `Start with this exact ChatVRT screen-share triage greeting and no extra preamble: "${initialGreeting}" `;
+
+      runtimeRef.current.waitingForInitialResponse = true;
+      sendRealtimeEvent({
+        type: 'conversation.item.create',
+        item: {
+          type: 'message',
+          role: 'user',
+          content: [
+            {
+              type: 'input_text',
+              text:
+                `${languageInstruction} ` +
+                initialGreetingInstruction +
+                ' Do not say that the share dialog is already open.',
+            },
+          ],
+        },
+      });
+      sendRealtimeEvent({
+        type: 'response.create',
+        response: getCurrentResponseOptions(
+          `${languageInstruction} ${initialGreetingInstruction}` +
+            'Do not say that the share dialog is already open.'
+        ),
+      });
+      setStatus(
+        responseModeRef.current === 'text' ? 'Thinking' : 'Speaking',
+        responseModeRef.current === 'text' ? 'thinking' : 'speaking'
+      );
+    },
+    [getCurrentResponseOptions, selectedLanguage, sendRealtimeEvent, setStatus]
+  );
+
+  const searchSupportMemory = useCallback(
+    async (rawArguments: string) => {
+      const { query, limit } = parseSearchMemoryToolArguments(rawArguments);
+      if (!query.trim()) {
+        return {
+          ok: false,
+          error: 'query is required',
+          matches: [],
+          sourceLinks: [],
+        };
+      }
+
+      const response = await fetch(
+        joinUrl(effectiveApiBaseUrl, '/api/memory/retrieve'),
+        {
+          method: 'POST',
+          headers: await createCallRequestHeaders(getCallRequestHeaders),
+          body: JSON.stringify({
+            query,
+            limit: limit ?? 6,
+            sessionId: openaiTraceRef.current.sessionId ?? undefined,
+          }),
+        }
+      );
+      const body = (await response.json()) as unknown;
+
+      if (!response.ok) {
+        const record = getRecord(body);
+        throw new Error(
+          getStringValue(record?.error) ??
+            getStringValue(record?.message) ??
+            'Memory retrieval failed'
+        );
+      }
+
+      const record = getRecord(body);
+      const links = Array.isArray(record?.sourceLinks)
+        ? record.sourceLinks
+            .map((item): SupportSourceLink | null => {
+              const link = getRecord(item);
+              const articleId = getStringValue(link?.articleId);
+              const title = getStringValue(link?.title);
+              const url = getStringValue(link?.url);
+              const relevance = getNumberValue(link?.relevance);
+
+              if (!articleId || !title || !url) {
+                return null;
+              }
+
+              return {
+                articleId,
+                title,
+                url,
+                relevance: relevance ?? 0,
+              };
+            })
+            .filter((link): link is SupportSourceLink => Boolean(link))
+        : [];
+
+      setSourceLinks(links);
+      setSourcesOpen(false);
+
+      return body;
+    },
+    [effectiveApiBaseUrl, getCallRequestHeaders]
+  );
+
+  const handleRealtimeToolCalls = useCallback(
+    (payload: Record<string, unknown>) => {
+      let handledCall = false;
+      let handledFill = false;
+      let handledMemory = false;
+
+      for (const call of getRealtimeFunctionCalls(payload)) {
+        if (handledToolCallsRef.current.has(call.callId)) {
+          continue;
+        }
+
+        if (
+          call.name !== highlightUiTargetTool.name &&
+          call.name !== fillUiFieldTool.name &&
+          call.name !== searchSupportMemoryTool.name
+        ) {
+          continue;
+        }
+
+        handledToolCallsRef.current.add(call.callId);
+
+        if (call.name === searchSupportMemoryTool.name) {
+          void searchSupportMemory(call.arguments)
+            .then((result) => {
+              sendRealtimeEvent({
+                type: 'conversation.item.create',
+                item: {
+                  type: 'function_call_output',
+                  call_id: call.callId,
+                  output: JSON.stringify(result),
+                },
+              });
+              sendRealtimeEvent({
+                type: 'response.create',
+                response: {
+                  instructions:
+                    `${buildLanguageInstruction(selectedLanguage)} ` +
+                    'Answer using the memory search result. Keep the spoken answer concise and do not read source URLs aloud; the UI will show the help article link separately.',
+                },
+              });
+            })
+            .catch((error) => {
+              const message = getMessage(error, 'Memory retrieval failed');
+              sendRealtimeEvent({
+                type: 'conversation.item.create',
+                item: {
+                  type: 'function_call_output',
+                  call_id: call.callId,
+                  output: JSON.stringify({
+                    ok: false,
+                    error: message,
+                    matches: [],
+                    sourceLinks: [],
+                  }),
+                },
+              });
+              sendRealtimeEvent({
+                type: 'response.create',
+                response: getCurrentResponseOptions(
+                  `${buildLanguageInstruction(selectedLanguage)} ` +
+                    'Memory search failed. Answer from visible screen context only, say when documentation could not be checked, and keep it concise.'
+                ),
+              });
+            });
+          handledCall = true;
+          handledMemory = true;
+          continue;
+        }
+
+        try {
+          const result =
+            call.name === fillUiFieldTool.name
+              ? fillField(parseFillFieldToolArguments(call.arguments))
+              : highlightTarget(parseHighlightToolArguments(call.arguments));
+
+          sendRealtimeEvent({
+            type: 'conversation.item.create',
+            item: {
+              type: 'function_call_output',
+              call_id: call.callId,
+              output: JSON.stringify(result),
+            },
+          });
+          handledCall = true;
+          handledFill ||= call.name === fillUiFieldTool.name;
+        } catch (error) {
+          const message = getMessage(error, 'ChatVRT tool call failed');
+          setErrorMessage(message);
+          setStatus(message, 'error');
+        }
+      }
+
+      if (handledCall) {
+        if (handledMemory) {
+          return;
+        }
+
+        sendRealtimeEvent({
+          type: 'response.create',
+          response: getCurrentResponseOptions(
+            `${buildLanguageInstruction(selectedLanguage)} ` +
+              (handledFill
+                ? 'If the field update succeeded, briefly tell the user what you filled and remind them to review before saving or submitting. If it failed, ask the user to describe the field or make it visible.'
+                : 'If the highlight succeeded, briefly tell the user what you highlighted. If it failed, ask the user to describe the target or make it visible.')
+          ),
+        });
+      }
+    },
+    [
+      fillField,
+      getCurrentResponseOptions,
+      highlightTarget,
+      searchSupportMemory,
+      selectedLanguage,
+      sendRealtimeEvent,
+      setStatus,
+    ]
+  );
+
+  const stopScreenShare = useCallback(
+    (options: { acknowledge?: boolean } = {}) => {
+      const runtime = runtimeRef.current;
+
+      if (runtime.screenTimer) {
+        window.clearTimeout(runtime.screenTimer);
+        runtime.screenTimer = null;
+      }
+
+      if (runtime.visualWatchTimer) {
+        window.clearInterval(runtime.visualWatchTimer);
+        runtime.visualWatchTimer = null;
+      }
+      runtime.lastVisualSignature = null;
+      runtime.visualChangeActive = false;
+      runtime.lastVisualChangeAt = 0;
+      runtime.pendingProactiveScreenPrompt = false;
+      runtime.pendingScreenChangeCorrection = false;
+      runtime.proactiveResponseInFlight = false;
+      runtime.waitingForFirstScreenAcknowledgement = false;
+      runtime.suppressScreenChangePromptsUntil = 0;
+
+      if (!runtime.screenStream) {
+        setScreenVisible(false);
+        screenVisibleRef.current = false;
+        return;
+      }
+
+      const screenStream = runtime.screenStream;
+      runtime.screenStream = null;
+
+      for (const track of screenStream.getTracks()) {
+        track.stop();
+      }
+
+      if (screenPreviewRef.current) {
+        screenPreviewRef.current.srcObject = null;
+      }
+
+      setScreenVisible(false);
+      screenVisibleRef.current = false;
+      onEventRef.current?.({ type: 'screen', shared: false });
+      setStatus(
+        isConnectedRef.current ? 'Screen share needed' : 'Ready',
+        'listening'
+      );
+
+      if (
+        options.acknowledge !== false &&
+        runtime.dataChannel?.readyState === 'open'
+      ) {
+        requestAgentAcknowledgement(
+          'The user has stopped sharing their screen. Acknowledge that screen ' +
+            'sharing is off and explain that you can continue by voice.'
+        );
+      }
+    },
+    [requestAgentAcknowledgement, setStatus]
+  );
+
+  const cleanupSession = useCallback(
+    (resetStatus = true, reason = resetStatus ? 'manual' : 'cleanup') => {
+      const runtime = runtimeRef.current;
+      clearSpeakingFallback();
+      finalizeRealtimeSessionAnalytics();
+      appendDebugEntry('session_cleanup', reason);
+
+      if (runtime.screenTimer) {
+        window.clearTimeout(runtime.screenTimer);
+      }
+
+      if (runtime.visualWatchTimer) {
+        window.clearInterval(runtime.visualWatchTimer);
+      }
+
+      for (const track of runtime.screenStream?.getTracks() ?? []) {
+        track.stop();
+      }
+
+      for (const track of runtime.microphoneStream?.getTracks() ?? []) {
+        track.stop();
+      }
+
+      runtime.dataChannel?.close();
+      runtime.peerConnection?.close();
+      runtimeRef.current = createRuntimeSession();
+      realtimeActivityRef.current = createRealtimeActivityState();
+      handledToolCallsRef.current = new Set();
+
+      if (remoteAudioRef.current) {
+        remoteAudioRef.current.srcObject = null;
+      }
+
+      if (screenPreviewRef.current) {
+        screenPreviewRef.current.srcObject = null;
+      }
+
+      setIsConnecting(false);
+      setIsConnected(false);
+      setScreenVisible(false);
+      isConnectedRef.current = false;
+      screenVisibleRef.current = false;
+      setMuted(false);
+      sentFramesRef.current = 0;
+
+      if (resetStatus) {
+        setErrorMessage(null);
+        setStatus('Ready', 'idle');
+      }
+    },
+    [
+      appendDebugEntry,
+      clearSpeakingFallback,
+      finalizeRealtimeSessionAnalytics,
+      setStatus,
+    ]
+  );
+
+  useEffect(() => {
+    return () => cleanupSession(false, 'component_unmount');
+  }, [cleanupSession]);
+
+  const buildSupportSessionPayload = useCallback(
+    (language = selectedLanguage.label) => {
+      const providedContext =
+        typeof sessionContext === 'function'
+          ? sessionContext()
+          : (sessionContext ?? {});
+      const providedRecord =
+        providedContext as SupportAssistantSessionContext & {
+          intent?: unknown;
+        };
+      const {
+        intent: _intent,
+        userRole: contextUserRole,
+        ...contextWithoutIntent
+      } = providedRecord;
+
+      return {
+        goal: defaultGoal,
+        currentPath:
+          typeof window === 'undefined' ? undefined : window.location.pathname,
+        currentTitle:
+          typeof document === 'undefined' ? undefined : document.title,
+        workspaceName: 'VRPlatform',
+        ...contextWithoutIntent,
+        userRole: userRole ?? contextUserRole,
+        language,
+      };
+    },
+    [defaultGoal, selectedLanguage.label, sessionContext, userRole]
+  );
+
+  const createRealtimeCall = useCallback(
+    async (payload: SupportAssistantSessionContext, sdpOffer: string) => {
+      const response = await fetch(joinUrl(effectiveApiBaseUrl, callEndpoint), {
+        method: 'POST',
+        headers: await createCallRequestHeaders(getCallRequestHeaders),
+        body: JSON.stringify({
+          ...payload,
+          sdpOffer,
+        }),
+      });
+
+      const body = (await response.json()) as unknown;
+      if (!response.ok) {
+        const responseBody = getRecord(body);
+        const errorMessage =
+          getStringValue(responseBody?.error) ??
+          getStringValue(responseBody?.message);
+
+        throw new Error(errorMessage ?? 'Failed to create support session');
+      }
+
+      return body as SupportSessionRealtimeCall;
+    },
+    [effectiveApiBaseUrl, callEndpoint, getCallRequestHeaders]
+  );
+
+  const handleRealtimeMessage = useCallback(
+    (payload: Record<string, unknown>) => {
+      onEventRef.current?.({ type: 'realtime', payload });
+      recordRealtimeSessionAnalytics(payload);
+      const eventType = typeof payload.type === 'string' ? payload.type : '';
+      appendRawDebugEntry(
+        'server',
+        eventType || 'unknown',
+        getDebugValue(payload.response_id) ??
+          getDebugValue(getRecord(payload.response)?.id) ??
+          '-',
+        payload
+      );
+      if (eventType === 'session.created' || eventType === 'session.updated') {
+        const session = getRecord(payload.session);
+        const tracing = getRecord(session?.tracing);
+        const traceContext: RealtimeTraceDebugContext = {
+          workflowName: getDebugValue(tracing?.workflow_name) ?? null,
+          groupId: getDebugValue(tracing?.group_id) ?? null,
+          sessionId: getDebugValue(session?.id) ?? null,
+        };
+        openaiTraceRef.current = traceContext;
+
+        if (eventType === 'session.created') {
+          appendDebugEntry(
+            'trace_session',
+            [
+              traceContext.sessionId
+                ? `session_id=${traceContext.sessionId}`
+                : null,
+              traceContext.workflowName
+                ? `workflow=${traceContext.workflowName}`
+                : null,
+              traceContext.groupId ? `group_id=${traceContext.groupId}` : null,
+            ]
+              .filter(Boolean)
+              .join(' | ') || '-',
+            payload,
+            'server',
+            false
+          );
+        }
+      }
+      const assistantWasActive =
+        realtimeActivityRef.current.assistantAudioActive ||
+        realtimeActivityRef.current.responseInProgress;
+      appendRealtimeDebugEvent(payload, assistantWasActive);
+      handleAssistantTranscriptEvent(payload, eventType);
+
+      if (eventType === 'error') {
+        const error = payload.error as { message?: string } | undefined;
+        const message = error?.message ?? 'Realtime error';
+        setErrorMessage(message);
+        setStatus(message, 'error');
+        return;
+      }
+
+      const transition = reduceRealtimeActivity(
+        realtimeActivityRef.current,
+        eventType
+      );
+      realtimeActivityRef.current = transition.state;
+
+      if (transition.status) {
+        clearSpeakingFallback();
+        applyRealtimeActivityStatus(transition.status);
+      }
+
+      const responseId =
+        getDebugValue(payload.response_id) ??
+        getDebugValue(getRecord(payload.response)?.id);
+
+      if (eventType === 'input_audio_buffer.speech_started') {
+        const runtime = runtimeRef.current;
+        runtime.pendingProactiveScreenPrompt = false;
+        runtime.pendingScreenChangeCorrection = false;
+        runtime.proactiveResponseInFlight = false;
+
+        if (
+          runtime.currentResponseId &&
+          (transition.state.responseInProgress ||
+            transition.state.assistantAudioActive)
+        ) {
+          cancelRealtimeResponseForUserSpeech(
+            runtime.currentResponseId,
+            transition.state.assistantAudioActive
+          );
+        }
+
+        if (runtime.clientResponseInFlight) {
+          appendDebugEntry(
+            'user_speech_interrupt_pending',
+            'waiting for response.created before cancel'
+          );
+        }
+      }
+
+      if (eventType === 'response.created' && responseId) {
+        const runtime = runtimeRef.current;
+        runtime.currentResponseId = responseId;
+
+        if (transition.state.userSpeechActive) {
+          cancelRealtimeResponseForUserSpeech(responseId, false);
+        }
+      }
+
+      if (eventType === 'output_audio_buffer.started' && responseId) {
+        if (transition.state.userSpeechActive) {
+          cancelRealtimeResponseForUserSpeech(responseId, true);
+        }
+      }
+
+      if (
+        eventType === 'input_audio_buffer.speech_started' ||
+        eventType === 'input_audio_buffer.speech_stopped'
+      ) {
+        scheduleSnapshotCaptureRef.current?.();
+        restartSnapshotTimerRef.current?.();
+      }
+
+      if (eventType === 'response.done') {
+        const response = getRecord(payload.response);
+        const status = getDebugValue(response?.status);
+        if (responseId && status === 'cancelled') {
+          updateAssistantTranscriptStatus(responseId, 'cancelled');
+        } else if (responseId && status === 'failed') {
+          updateAssistantTranscriptStatus(responseId, 'failed');
+        } else if (responseId) {
+          updateAssistantTranscriptStatus(responseId, 'done');
+        }
+        handleRealtimeToolCalls(payload);
+        if (responseId === runtimeRef.current.currentResponseId) {
+          runtimeRef.current.currentResponseId = null;
+        }
+        runtimeRef.current.clientResponseInFlight = false;
+        runtimeRef.current.proactiveResponseInFlight = false;
+
+        if (runtimeRef.current.waitingForFirstScreenAcknowledgement) {
+          runtimeRef.current.waitingForFirstScreenAcknowledgement = false;
+          runtimeRef.current.pendingProactiveScreenPrompt = false;
+          runtimeRef.current.pendingScreenChangeCorrection = false;
+          runtimeRef.current.lastProactivePromptAt = Date.now();
+        }
+
+        if (runtimeRef.current.waitingForInitialResponse) {
+          runtimeRef.current.waitingForInitialResponse = false;
+          if (responseModeRef.current === 'text') {
+            enableAutomaticVoiceResponses();
+          } else {
+            runtimeRef.current.waitingToEnableAutoResponses = true;
+            appendDebugEntry(
+              'auto_vad_pending',
+              'waiting for output_stopped before listening'
+            );
+            scheduleAutoResponseEnableFallback();
+          }
+        }
+
+        if (transition.shouldFallbackToReady) {
+          scheduleSpeakingFallback();
+        }
+
+        if (runtimeRef.current.pendingAcknowledgement) {
+          schedulePendingAgentAcknowledgementFlush();
+        } else if (runtimeRef.current.pendingProactiveScreenPrompt) {
+          schedulePendingScreenPrompt();
+        }
+      }
+
+      if (
+        eventType === 'output_audio_buffer.stopped' ||
+        eventType === 'output_audio_buffer.cleared'
+      ) {
+        if (runtimeRef.current.waitingToEnableAutoResponses) {
+          enableAutomaticVoiceResponses();
+        }
+
+        if (runtimeRef.current.pendingAcknowledgement) {
+          schedulePendingAgentAcknowledgementFlush();
+        } else if (runtimeRef.current.pendingProactiveScreenPrompt) {
+          schedulePendingScreenPrompt();
+        }
+      }
+    },
+    [
+      applyRealtimeActivityStatus,
+      appendDebugEntry,
+      appendRealtimeDebugEvent,
+      appendRawDebugEntry,
+      cancelRealtimeResponseForUserSpeech,
+      clearSpeakingFallback,
+      enableAutomaticVoiceResponses,
+      handleAssistantTranscriptEvent,
+      handleRealtimeToolCalls,
+      recordRealtimeSessionAnalytics,
+      scheduleAutoResponseEnableFallback,
+      schedulePendingAgentAcknowledgementFlush,
+      schedulePendingScreenPrompt,
+      scheduleSpeakingFallback,
+      setStatus,
+      updateAssistantTranscriptStatus,
+    ]
+  );
+
+  const connectRealtime = useCallback(
+    async (payload: SupportAssistantSessionContext) => {
+      assertRealtimeBrowserSupport();
+      const peerConnection = new RTCPeerConnection();
+      const dataChannel = peerConnection.createDataChannel('oai-events');
+      const runtime = runtimeRef.current;
+      runtime.peerConnection = peerConnection;
+      runtime.dataChannel = dataChannel;
+
+      dataChannel.addEventListener('open', () => {
+        appendDebugEntry('data_channel_state', 'open');
+      });
+      dataChannel.addEventListener('close', () => {
+        appendDebugEntry('data_channel_state', 'closed');
+      });
+      dataChannel.addEventListener('error', () => {
+        appendDebugEntry('data_channel_error', dataChannel.readyState);
+      });
+      peerConnection.addEventListener('connectionstatechange', () => {
+        appendDebugEntry(
+          'peer_connection_state',
+          peerConnection.connectionState
+        );
+      });
+      peerConnection.addEventListener('iceconnectionstatechange', () => {
+        appendDebugEntry(
+          'peer_ice_connection_state',
+          peerConnection.iceConnectionState
+        );
+      });
+      peerConnection.addEventListener('signalingstatechange', () => {
+        appendDebugEntry('peer_signaling_state', peerConnection.signalingState);
+      });
+
+      const microphoneStream = await requestUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true,
+        },
+      });
+
+      for (const track of microphoneStream.getAudioTracks()) {
+        peerConnection.addTrack(track, microphoneStream);
+      }
+      runtime.microphoneStream = microphoneStream;
+
+      peerConnection.addEventListener('track', (event) => {
+        if (remoteAudioRef.current) {
+          remoteAudioRef.current.srcObject = event.streams[0];
+        }
+
+        event.track.addEventListener('ended', () => {
+          appendDebugEntry('remote_audio_track_state', 'ended');
+        });
+        event.track.addEventListener('mute', () => {
+          appendDebugEntry('remote_audio_track_state', 'mute');
+        });
+        event.track.addEventListener('unmute', () => {
+          appendDebugEntry('remote_audio_track_state', 'unmute');
+        });
+      });
+
+      dataChannel.addEventListener('message', (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (typeof data === 'object' && data !== null) {
+            handleRealtimeMessage(data);
+          }
+        } catch (error) {
+          setErrorMessage(getMessage(error, 'Invalid realtime event'));
+        }
+      });
+
+      const offer = await peerConnection.createOffer();
+      if (!offer.sdp) {
+        throw new Error('WebRTC offer SDP was empty');
+      }
+
+      await peerConnection.setLocalDescription(offer);
+      waitForIceGatheringComplete(peerConnection).catch(() => undefined);
+
+      const sessionConfig = await createRealtimeCall(payload, offer.sdp);
+      runtime.sessionConfig = sessionConfig;
+
+      await peerConnection.setRemoteDescription({
+        type: 'answer',
+        sdp: sessionConfig.sdpAnswer,
+      });
+      await waitForDataChannelOpen(dataChannel);
+
+      sendRealtimeEvent({
+        type: 'session.update',
+        session: {
+          type: 'realtime',
+          instructions: buildSessionInstructions(payload),
+          max_output_tokens: realtimeMaxOutputTokens,
+          output_modalities: getRealtimeOutputModalities(
+            responseModeRef.current
+          ),
+          audio: {
+            input: {
+              noise_reduction: {
+                type: 'far_field',
+              },
+            },
+          },
+          tools: buildRealtimeTools(),
+          tool_choice: 'auto',
+        },
+      });
+    },
+    [
+      appendDebugEntry,
+      createRealtimeCall,
+      handleRealtimeMessage,
+      sendRealtimeEvent,
+    ]
+  );
+
+  const getSnapshotIntervalMs = useCallback(() => {
+    const config = runtimeRef.current.sessionConfig?.screen;
+
+    if (!config) {
+      return 1_000;
+    }
+
+    if (realtimeActivityRef.current.userSpeechActive) {
+      return config.activeCaptureIntervalMs ?? config.captureIntervalMs;
+    }
+
+    return config.captureIntervalMs;
+  }, []);
+
+  const captureAndSendSnapshot = useCallback(
+    async (options: { force?: boolean } = {}) => {
+      const runtime = runtimeRef.current;
+      const config = runtime.sessionConfig;
+      const video = screenPreviewRef.current;
+      const canvas = frameCanvasRef.current;
+      const force = options.force === true;
+
+      if (!config || !runtime.screenStream || !video || !canvas) {
+        return false;
+      }
+
+      if (runtime.snapshotInFlight || video.videoWidth === 0) {
+        return false;
+      }
+
+      const now = Date.now();
+      if (
+        !force &&
+        now - runtime.lastSnapshotStartedAt <
+          Math.max(minSnapshotSpacingMs, getSnapshotIntervalMs())
+      ) {
+        return false;
+      }
+
+      runtime.snapshotInFlight = true;
+      runtime.lastSnapshotStartedAt = now;
+
+      try {
+        const { width, height } = getScaledCanvasSize(
+          video.videoWidth,
+          video.videoHeight,
+          config.screen.maxImageLongEdgePx
+        );
+        canvas.width = width;
+        canvas.height = height;
+
+        const context = canvas.getContext('2d');
+        if (!context) {
+          throw new Error('Could not create canvas context');
+        }
+
+        context.drawImage(video, 0, 0, width, height);
+        const blob = await canvasToBlob(
+          canvas,
+          config.screen.imageMimeType,
+          config.screen.imageQuality
+        );
+
+        if (!blob) {
+          throw new Error('Screen snapshot could not be encoded');
+        }
+
+        const imageUrl = await blobToDataUrl(blob);
+
+        sendRealtimeEvent({
+          type: config.screen.eventType,
+          event_id: `screen_${Date.now()}`,
+          item: {
+            type: config.screen.itemType,
+            role: config.screen.role,
+            content: [
+              {
+                type: config.screen.contentType,
+                image_url: imageUrl,
+                detail: config.screen.imageDetail,
+              },
+            ],
+          },
+        });
+
+        sentFramesRef.current += 1;
+        onEventRef.current?.({
+          type: 'snapshot',
+          framesSent: sentFramesRef.current,
+        });
+
+        return true;
+      } finally {
+        runtime.snapshotInFlight = false;
+      }
+    },
+    [getSnapshotIntervalMs, sendRealtimeEvent]
+  );
+
+  const scheduleSnapshotCapture = useCallback(
+    (options?: { force?: boolean }) => {
+      return captureAndSendSnapshot(options).catch((error) => {
+        setStatus(getMessage(error, 'Screen capture failed'), 'error');
+
+        return false;
+      });
+    },
+    [captureAndSendSnapshot, setStatus]
+  );
+
+  const restartSnapshotTimer = useCallback(() => {
+    const runtime = runtimeRef.current;
+    const config = runtime.sessionConfig;
+
+    if (runtime.screenTimer) {
+      window.clearTimeout(runtime.screenTimer);
+      runtime.screenTimer = null;
+    }
+
+    if (!config || !runtime.screenStream) {
+      return;
+    }
+
+    runtime.screenTimer = window.setTimeout(() => {
+      scheduleSnapshotCapture();
+      restartSnapshotTimer();
+    }, getSnapshotIntervalMs());
+  }, [getSnapshotIntervalMs, scheduleSnapshotCapture]);
+
+  useEffect(() => {
+    scheduleSnapshotCaptureRef.current = () => {
+      scheduleSnapshotCapture();
+    };
+    restartSnapshotTimerRef.current = restartSnapshotTimer;
+  }, [restartSnapshotTimer, scheduleSnapshotCapture]);
+
+  const startSnapshotLoop = useCallback(async () => {
+    if (!runtimeRef.current.sessionConfig) {
+      throw new Error('Missing session configuration');
+    }
+
+    const sent = await scheduleSnapshotCapture({ force: true });
+    restartSnapshotTimer();
+
+    return sent;
+  }, [restartSnapshotTimer, scheduleSnapshotCapture]);
+
+  const sampleVisualSignature = useCallback(() => {
+    const video = screenPreviewRef.current;
+    if (!video || video.videoWidth === 0 || video.videoHeight === 0) {
+      return null;
+    }
+
+    const width = visualSampleWidthPx;
+    const height = Math.max(
+      1,
+      Math.round((video.videoHeight / video.videoWidth) * width)
+    );
+    const runtime = runtimeRef.current;
+    const canvas =
+      runtime.visualAnalysisCanvas ?? document.createElement('canvas');
+    runtime.visualAnalysisCanvas = canvas;
+    canvas.width = width;
+    canvas.height = height;
+
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    if (!context) {
+      return null;
+    }
+
+    let imageData: Uint8ClampedArray;
+    try {
+      context.drawImage(video, 0, 0, width, height);
+      imageData = context.getImageData(0, 0, width, height).data;
+    } catch {
+      return null;
+    }
+
+    const signature = new Uint8ClampedArray(width * height * 3);
+
+    for (
+      let sourceIndex = 0, targetIndex = 0;
+      sourceIndex < imageData.length;
+      sourceIndex += 4
+    ) {
+      signature[targetIndex] = imageData[sourceIndex];
+      signature[targetIndex + 1] = imageData[sourceIndex + 1];
+      signature[targetIndex + 2] = imageData[sourceIndex + 2];
+      targetIndex += 3;
+    }
+
+    return signature;
+  }, []);
+
+  const requestNextStepAfterScreenChange = useCallback(
+    async (options: ScreenChangePromptOptions = {}) => {
+      const runtime = runtimeRef.current;
+      if (
+        !runtime.sessionConfig ||
+        !runtime.screenStream ||
+        !runtime.dataChannel
+      ) {
+        return;
+      }
+
+      if (
+        runtime.waitingForFirstScreenAcknowledgement ||
+        Date.now() < runtime.suppressScreenChangePromptsUntil
+      ) {
+        runtime.pendingProactiveScreenPrompt = false;
+        runtime.pendingScreenChangeCorrection = false;
+        runtime.proactiveResponseInFlight = false;
+        return;
+      }
+
+      const shouldCorrectStaleScreen =
+        options.interruptActiveResponse === true ||
+        runtime.pendingScreenChangeCorrection;
+      const deferPrompt = (detail: string) => {
+        appendDebugEntry('proactive_screen_prompt_deferred', detail);
+        runtime.proactiveResponseInFlight = false;
+        runtime.pendingProactiveScreenPrompt = true;
+        runtime.pendingScreenChangeCorrection ||= shouldCorrectStaleScreen;
+      };
+
+      const activityBeforeSnapshot = realtimeActivityRef.current;
+      if (activityBeforeSnapshot.userSpeechActive) {
+        deferPrompt('user speech active before snapshot');
+        return;
+      }
+
+      if (
+        hasActiveAssistantTurn(activityBeforeSnapshot) ||
+        runtime.clientResponseInFlight
+      ) {
+        deferPrompt(
+          runtime.clientResponseInFlight
+            ? 'pending response.create before snapshot'
+            : 'active realtime turn before snapshot'
+        );
+        return;
+      }
+
+      const now = Date.now();
+      if (runtime.proactiveResponseInFlight) {
+        runtime.pendingProactiveScreenPrompt ||= shouldCorrectStaleScreen;
+        runtime.pendingScreenChangeCorrection ||= shouldCorrectStaleScreen;
+        return;
+      }
+
+      if (
+        !shouldCorrectStaleScreen &&
+        now - runtime.lastProactivePromptAt < minProactivePromptSpacingMs
+      ) {
+        return;
+      }
+
+      runtime.proactiveResponseInFlight = true;
+      const snapshotSent = await scheduleSnapshotCapture({ force: true });
+      if (!snapshotSent) {
+        runtime.proactiveResponseInFlight = false;
+        return;
+      }
+
+      const activityAfterSnapshot = realtimeActivityRef.current;
+      if (activityAfterSnapshot.userSpeechActive) {
+        deferPrompt('user speech active after snapshot');
+        return;
+      }
+
+      if (
+        hasActiveAssistantTurn(activityAfterSnapshot) ||
+        runtime.clientResponseInFlight
+      ) {
+        deferPrompt(
+          runtime.clientResponseInFlight
+            ? 'pending response.create after snapshot'
+            : 'active realtime turn after snapshot'
+        );
+        return;
+      }
+
+      runtime.pendingProactiveScreenPrompt = false;
+      runtime.pendingScreenChangeCorrection = false;
+      runtime.lastProactivePromptAt = now;
+
+      const languageInstruction = buildLanguageInstruction(selectedLanguage);
+      const promptText = shouldCorrectStaleScreen
+        ? 'The shared screen changed while you were speaking. Stop following the previous screen. Use only the latest shared screen. If the previous spoken step is no longer right, switch direction without saying "actually", then give one short next step. Do not mention snapshots, do not use a preamble, and do not say that you are thinking, checking, or thinking through it.'
+        : "The shared screen changed and now appears stable. Only respond if the change is directly relevant to the user's active task and a short next step would help. If the user appears to be waiting, looking something up, reading, or working outside VRPlatform, stay quiet unless there is a visible error or blocker. If you do respond, give one short, plain-language next step based on the latest screen. Do not use a preamble or say that you are thinking, checking, or thinking through it.";
+      const responseInstructions = shouldCorrectStaleScreen
+        ? `${languageInstruction} The shared screen changed while you were speaking. Stop following the previous screen. Use only the latest shared screen. If the previous spoken step is no longer right, switch direction without saying "actually" or repeating a correction phrase, then give one short next step based on the latest screen. Do not continue the old instruction. Do not apologize repeatedly. Do not mention snapshots. Do not use a preamble. Do not say that you are thinking, checking, reasoning, or thinking through it.`
+        : `${languageInstruction} Only respond if the screen change is directly relevant to the user's active task and a short next step would help. If the user appears to be waiting, looking something up, reading, or working outside VRPlatform, stay quiet unless there is a visible error or blocker. If you do respond, give one short, plain-language next step based on the latest screen. Do not use a preamble. Do not say "actually". Do not say that you are thinking, checking, reasoning, or thinking through it.`;
+
+      sendRealtimeEvent({
+        type: 'conversation.item.create',
+        item: {
+          type: 'message',
+          role: 'user',
+          content: [
+            {
+              type: 'input_text',
+              text: promptText,
+            },
+          ],
+        },
+      });
+      sendRealtimeEvent({
+        type: 'response.create',
+        response: getCurrentResponseOptions(responseInstructions),
+      });
+      setStatus('Thinking', 'thinking');
+    },
+    [
+      appendDebugEntry,
+      getCurrentResponseOptions,
+      scheduleSnapshotCapture,
+      selectedLanguage,
+      sendRealtimeEvent,
+      setStatus,
+    ]
+  );
+
+  useEffect(() => {
+    requestNextStepAfterScreenChangeRef.current = (options) => {
+      requestNextStepAfterScreenChange(options).catch((error) => {
+        runtimeRef.current.proactiveResponseInFlight = false;
+        setStatus(getMessage(error, 'Screen update prompt failed'), 'error');
+      });
+    };
+  }, [requestNextStepAfterScreenChange, setStatus]);
+
+  const analyzeVisualFrame = useCallback(() => {
+    const runtime = runtimeRef.current;
+    if (!runtime.sessionConfig || !runtime.screenStream) {
+      return;
+    }
+
+    const signature = sampleVisualSignature();
+    if (!signature) {
+      return;
+    }
+
+    const previousSignature = runtime.lastVisualSignature;
+    runtime.lastVisualSignature = signature;
+
+    if (!previousSignature) {
+      return;
+    }
+
+    const now = Date.now();
+    if (now < runtime.suppressScreenChangePromptsUntil) {
+      runtime.visualChangeActive = false;
+      runtime.lastVisualChangeAt = 0;
+      return;
+    }
+
+    const difference = getVisualDifference(previousSignature, signature);
+    const hasChanged =
+      difference.averageDelta >= visualAverageDifferenceThreshold ||
+      difference.changedRatio >= visualChangedPixelRatioThreshold;
+
+    if (hasChanged) {
+      runtime.visualChangeActive = true;
+      runtime.lastVisualChangeAt = now;
+      return;
+    }
+
+    if (
+      runtime.visualChangeActive &&
+      now - runtime.lastVisualChangeAt >= visualSettleDelayMs
+    ) {
+      runtime.visualChangeActive = false;
+      requestNextStepAfterScreenChangeRef.current?.();
+    }
+  }, [sampleVisualSignature]);
+
+  const startVisualChangeWatcher = useCallback(() => {
+    const runtime = runtimeRef.current;
+
+    if (runtime.visualWatchTimer) {
+      window.clearInterval(runtime.visualWatchTimer);
+    }
+
+    runtime.lastVisualSignature = null;
+    runtime.visualChangeActive = false;
+    runtime.lastVisualChangeAt = 0;
+    runtime.visualWatchTimer = window.setInterval(
+      analyzeVisualFrame,
+      visualWatchIntervalMs
+    );
+  }, [analyzeVisualFrame]);
+
+  const requestScreenStream = useCallback(() => {
+    const runtime = runtimeRef.current;
+    const maxImageLongEdgePx =
+      runtime.sessionConfig?.screen.maxImageLongEdgePx ?? 960;
+
+    return requestDisplayMedia({
+      video: {
+        frameRate: {
+          max: 5,
+        },
+        width: {
+          ideal: maxImageLongEdgePx,
+        },
+      },
+      audio: false,
+    });
+  }, []);
+
+  const attachScreenStream = useCallback(
+    async (
+      screenStream: MediaStream,
+      options: { acknowledge?: boolean } = {}
+    ) => {
+      const runtime = runtimeRef.current;
+      const video = screenPreviewRef.current;
+
+      if (!runtime.sessionConfig) {
+        throw new Error('Join the call before sharing the screen');
+      }
+
+      if (!video) {
+        throw new Error('Screen preview element is missing');
+      }
+
+      runtime.screenStream = screenStream;
+      runtime.lastSnapshotStartedAt = 0;
+      runtime.lastProactivePromptAt = 0;
+      runtime.proactiveResponseInFlight = false;
+      runtime.pendingProactiveScreenPrompt = false;
+      runtime.pendingScreenChangeCorrection = false;
+      runtime.suppressScreenChangePromptsUntil =
+        Date.now() + screenSharePromptWarmupMs;
+      video.srcObject = screenStream;
+      await video.play();
+      await waitForVideoMetadata(video);
+
+      const [track] = screenStream.getVideoTracks();
+      track?.addEventListener('ended', () => stopScreenShare());
+
+      setScreenVisible(true);
+      screenVisibleRef.current = true;
+      onEventRef.current?.({ type: 'screen', shared: true });
+      setStatus('Ready', 'listening');
+      runtime.waitingForFirstScreenAcknowledgement = true;
+      const firstSnapshotSent = await startSnapshotLoop();
+      startVisualChangeWatcher();
+
+      if (options.acknowledge !== false && firstSnapshotSent) {
+        const payload = buildSupportSessionPayload();
+        const postScreenIssueInstruction =
+          buildPostScreenIssueInstruction(payload);
+
+        requestAgentAcknowledgement(
+          postScreenIssueInstruction
+            ? 'The user has started sharing their VRPlatform screen. Acknowledge that you can use the shared screen as context. Then mention the active issue summary provided in your instructions.'
+            : 'The user has started sharing their VRPlatform screen. Acknowledge that you can see the screen now. Then continue with the current task using the latest screen as context. If there is no active task yet, ask whether they are here for first-time onboarding, ongoing support, or monthly close.',
+          postScreenIssueInstruction
+            ? `${buildLanguageInstruction(selectedLanguage)} Acknowledge that screen sharing is active in one short clause. Then ${postScreenIssueInstruction}`
+            : `${buildLanguageInstruction(selectedLanguage)} Acknowledge that you can see the screen now in one short clause, then continue with the current task using the latest screen as context. Do not restart the greeting. Do not ask what they need next unless there is no active task. Do not say that you are thinking, checking, or thinking through it.`
+        );
+      } else {
+        runtime.waitingForFirstScreenAcknowledgement = false;
+      }
+    },
+    [
+      buildSupportSessionPayload,
+      requestAgentAcknowledgement,
+      selectedLanguage,
+      startSnapshotLoop,
+      startVisualChangeWatcher,
+      stopScreenShare,
+      setStatus,
+    ]
+  );
+
+  const startCall = useCallback(
+    async (options: StartCallOptions = {}) => {
+      const initialTextMessage = options.initialTextMessage?.trim();
+
+      if (initialTextMessage) {
+        responseModeRef.current = 'text';
+        setResponseMode('text');
+      }
+
+      clearSpeakingFallback();
+      realtimeActivityRef.current = createRealtimeActivityState();
+      handledToolCallsRef.current = new Set();
+      debugEventIdRef.current = 0;
+      rawDebugEventIdRef.current = 0;
+      rawDebugEventsRef.current = [];
+      openaiTraceRef.current = {
+        workflowName: null,
+        groupId: null,
+        sessionId: null,
+      };
+      setTextInputValue('');
+      setChatMessages([]);
+      setDebugEvents([]);
+      setDebugCopyState('idle');
+      setIsConnecting(true);
+      setErrorMessage(null);
+      sentFramesRef.current = 0;
+      const payload = buildSupportSessionPayload();
+      setStatus('Requesting microphone', 'connecting');
+
+      try {
+        sessionAnalyticsRef.current = {
+          startedAt: Date.now(),
+          payload,
+          transcript: [],
+          responseTranscriptDeltas: new Map(),
+          usage: null,
+          finalized: false,
+        };
+        await connectRealtime(payload);
+        setIsConnected(true);
+        isConnectedRef.current = true;
+
+        if (initialTextMessage) {
+          appendUserTranscript(initialTextMessage);
+          sendTextMessageToRealtime(initialTextMessage);
+        } else {
+          requestInitialAgentResponse(payload);
+          setStatus('Connected', 'speaking');
+        }
+      } catch (error) {
+        const message = getMessage(error, 'Connection failed');
+        sessionAnalyticsRef.current = null;
+        cleanupSession(false, 'connection_failed');
+        setErrorMessage(message);
+        setStatus(message, 'error');
+      } finally {
+        setIsConnecting(false);
+      }
+    },
+    [
+      buildSupportSessionPayload,
+      clearSpeakingFallback,
+      cleanupSession,
+      connectRealtime,
+      appendUserTranscript,
+      requestInitialAgentResponse,
+      sendTextMessageToRealtime,
+      setStatus,
+    ]
+  );
+
+  useEffect(() => {
+    startCallRef.current = startCall;
+  }, [startCall]);
+
+  const requestScreenShare = useCallback(async () => {
+    let requestedScreenStream: MediaStream | null = null;
+
+    setErrorMessage(null);
+    setStatus('Requesting screen share', 'connecting');
+
+    try {
+      requestedScreenStream = await requestScreenStream();
+      await attachScreenStream(requestedScreenStream);
+      requestedScreenStream = null;
+    } catch (error) {
+      for (const track of requestedScreenStream?.getTracks() ?? []) {
+        track.stop();
+      }
+
+      if (
+        error instanceof DOMException &&
+        (error.name === 'NotAllowedError' || error.name === 'AbortError')
+      ) {
+        setStatus('Screen share needed', 'listening');
+        return;
+      }
+
+      const message = getMessage(error, 'Screen sharing failed');
+      setErrorMessage(message);
+      setStatus(message, 'error');
+    }
+  }, [attachScreenStream, requestScreenStream, setStatus]);
+
+  const toggleScreenShare = useCallback(() => {
+    if (screenVisibleRef.current) {
+      stopScreenShare();
+      return;
+    }
+
+    requestScreenShare();
+  }, [requestScreenShare, stopScreenShare]);
+
+  const handleVoiceButtonClick = useCallback(() => {
+    if (isConnecting) {
+      return;
+    }
+
+    if (!isConnectedRef.current) {
+      handleResponseModeChange('voice');
+      startCall();
+      return;
+    }
+
+    handleResponseModeChange(responseMode === 'voice' ? 'text' : 'voice');
+  }, [handleResponseModeChange, isConnecting, responseMode, startCall]);
+
+  const endConversation = useCallback(() => {
+    if (!isConnectedRef.current && !isConnecting) {
+      return;
+    }
+
+    cleanupSession(true, 'manual_end');
+  }, [cleanupSession, isConnecting]);
+
+  const toggleMute = useCallback(() => {
+    const runtime = runtimeRef.current;
+    const nextMuted = !runtime.muted;
+    runtime.muted = nextMuted;
+
+    for (const track of runtime.microphoneStream?.getAudioTracks() ?? []) {
+      track.enabled = !nextMuted;
+    }
+
+    setMuted(nextMuted);
+    setStatus(
+      nextMuted ? 'Muted' : 'Listening',
+      nextMuted ? 'muted' : 'listening'
+    );
+  }, [setStatus]);
+
+  const isVoiceActive = isConnected && responseMode === 'voice';
+  const canToggleScreenShare = isConnected && !isConnecting;
+  const canEndConversation = isConnected || isConnecting;
+  const canSubmitTextMessage =
+    !isConnecting && textInputValue.trim().length > 0;
+  const rootClassName = cx(
+    classes.root,
+    placement === 'right' ? classes.rootRight : classes.rootLeft,
+    floating ? classes.rootFloating : classes.rootInline,
+    className
+  );
+  const composerClassName = cx(
+    classes.composer,
+    canEndConversation && classes.composerConnected,
+    isVoiceActive && classes.composerVoiceActive
+  );
+  const debugCopyLabel =
+    debugCopyState === 'summary-copied'
+      ? 'Realtime debug log copied'
+      : debugCopyState === 'failed'
+        ? 'Realtime debug log copy failed'
+        : 'Copy realtime debug log';
+  const debugRawCopyLabel =
+    debugCopyState === 'raw-copied'
+      ? 'Realtime raw debug JSON copied'
+      : debugCopyState === 'failed'
+        ? 'Realtime debug log copy failed'
+        : 'Copy realtime raw debug JSON';
+
+  return (
+    <div className={rootClassName} style={style} data-activity={activity}>
+      <section
+        className={classes.responsePanel}
+        aria-label="ChatVRT message composer"
+      >
+        {dev ? (
+          <button
+            aria-expanded={debugOpen}
+            aria-label={debugOpen ? 'Hide realtime debug log' : 'Show realtime debug log'}
+            className={cx(
+              classes.debugToggleButton,
+              debugOpen && classes.debugToggleButtonActive
+            )}
+            onClick={() => setDebugOpen((current) => !current)}
+            title={debugOpen ? 'Hide debug log' : 'Show debug log'}
+            type="button"
+          >
+            Log
+          </button>
+        ) : null}
+        {responseMode === 'text' ? (
+          <div className={classes.chatPanel}>
+            <ol
+              aria-live="polite"
+              className={classes.chatMessages}
+              ref={chatTranscriptRef}
+            >
+              {visibleChatMessages.length > 0 ? (
+                visibleChatMessages.map((message) => (
+                  <li
+                    aria-busy={message.status === 'streaming'}
+                    className={cx(
+                      classes.chatMessage,
+                      message.role === 'user' && classes.chatMessageUser,
+                      message.status === 'streaming' &&
+                        classes.chatMessageStreaming
+                    )}
+                    key={message.id}
+                  >
+                    <div className={classes.chatMeta}>
+                      <strong>
+                        {message.role === 'user' ? 'You' : 'ChatVRT'}
+                      </strong>
+                      <time>{message.time}</time>
+                    </div>
+                    <p>{message.text}</p>
+                  </li>
+                ))
+              ) : (
+                <li className={classes.chatEmpty}>No response yet.</li>
+              )}
+            </ol>
+          </div>
+        ) : null}
+
+        <form className={composerClassName} onSubmit={handleTextMessageSubmit}>
+          <button
+            aria-pressed={screenVisible}
+            className={cx(
+              classes.composerAction,
+              screenVisible && classes.composerActionActive
+            )}
+            disabled={!canToggleScreenShare}
+            onClick={toggleScreenShare}
+            title={screenVisible ? 'Stop screen share' : 'Share screen'}
+            aria-label={screenVisible ? 'Stop screen share' : 'Share screen'}
+            type="button"
+          >
+            <IconScreenShare />
+          </button>
+          <input
+            aria-label="Ask ChatVRT"
+            className={classes.composerInput}
+            onChange={(event) => setTextInputValue(event.currentTarget.value)}
+            onKeyDown={handleTextInputKeyDown}
+            placeholder="Ask anything"
+            type="text"
+            value={textInputValue}
+          />
+          {isVoiceActive ? (
+            <button
+              className={classes.composerAction}
+              type="button"
+              onClick={toggleMute}
+              title={muted ? 'Unmute microphone' : 'Mute microphone'}
+              aria-label={muted ? 'Unmute microphone' : 'Mute microphone'}
+            >
+              {muted ? <IconMicOff /> : <IconMic />}
+            </button>
+          ) : null}
+          {canEndConversation ? (
+            <button
+              className={cx(classes.composerAction, classes.composerEnd)}
+              type="button"
+              onClick={endConversation}
+              title="End conversation"
+              aria-label="End conversation"
+            >
+              <IconEndCall />
+            </button>
+          ) : null}
+          <button
+            aria-pressed={responseMode === 'voice'}
+            className={cx(
+              classes.composerAction,
+              responseMode === 'voice' && classes.composerActionActive
+            )}
+            disabled={isConnecting}
+            onClick={handleVoiceButtonClick}
+            title={
+              !isConnected
+                ? 'Start voice mode'
+                : responseMode === 'voice'
+                  ? 'Turn off voice responses'
+                  : 'Activate voice mode'
+            }
+            aria-label={
+              !isConnected
+                ? 'Start voice mode'
+                : responseMode === 'voice'
+                  ? 'Turn off voice responses'
+                  : 'Activate voice mode'
+            }
+            type="button"
+          >
+            <IconVoiceMode />
+          </button>
+          <button
+            className={classes.composerSubmit}
+            disabled={!canSubmitTextMessage}
+            onClick={submitTextMessage}
+            title="Send message"
+            aria-label="Send message"
+            type="button"
+          >
+            <IconSend />
+          </button>
+        </form>
+      </section>
+
+      {effectiveShowRealtimeDebug ? (
+        <section className={classes.debugPanel} aria-label="Realtime debug log">
+          <div className={classes.debugTitle}>
+            <strong>REALTIME DEBUG</strong>
+            <div className={classes.debugTitleActions}>
+              <button
+                aria-label={debugCopyLabel}
+                className={classes.debugCopyButton}
+                data-tooltip="Copy compact log"
+                disabled={!debugEvents.length}
+                onClick={copyRealtimeDebugLog}
+                type="button"
+              >
+                <CopyIcon aria-hidden size={13} />
+              </button>
+              <button
+                aria-label={debugRawCopyLabel}
+                className={classes.debugCopyButton}
+                data-tooltip="Copy raw event JSON"
+                disabled={!debugEvents.length}
+                onClick={copyRealtimeDebugRawLog}
+                type="button"
+              >
+                <BracketsIcon aria-hidden size={13} />
+              </button>
+            </div>
+          </div>
+          {debugEvents.length > 0 ? (
+            <ol className={classes.debugList}>
+              {debugEvents.map((event) => (
+                <li key={event.id}>
+                  <time>{event.time}</time>
+                  <strong>{event.label}</strong>
+                  <span>{event.detail}</span>
+                </li>
+              ))}
+            </ol>
+          ) : (
+            <p className={classes.debugEmpty}>
+              Waiting for VAD / output buffer events...
+            </p>
+          )}
+          {dev ? (
+            <div className={classes.debugApiSwitch} aria-label="Voice Chat API">
+              <span>API:</span>
+              <button
+                aria-pressed={devApiTarget === 'local'}
+                className={cx(
+                  classes.debugApiOption,
+                  devApiTarget === 'local' && classes.debugApiOptionActive
+                )}
+                onClick={() => setDevApiTarget('local')}
+                type="button"
+              >
+                local
+              </button>
+              <span>|</span>
+              <button
+                aria-pressed={devApiTarget === 'production'}
+                className={cx(
+                  classes.debugApiOption,
+                  devApiTarget === 'production' && classes.debugApiOptionActive
+                )}
+                onClick={() => setDevApiTarget('production')}
+                type="button"
+              >
+                remote
+              </button>
+            </div>
+          ) : null}
+        </section>
+      ) : null}
+
+      {sourceLinks.length ? (
+        <section className={classes.sourcePanel} aria-label="Help articles">
+          <button
+            className={classes.sourceToggle}
+            type="button"
+            onClick={() => setSourcesOpen((current) => !current)}
+            aria-expanded={sourcesOpen}
+          >
+            {sourceLinks.length === 1 ? 'Help article' : 'Help articles'}
+          </button>
+          {sourcesOpen ? (
+            <div className={classes.sourceList}>
+              {sourceLinks.map((link) => (
+                <a
+                  key={`${link.articleId}:${link.url}`}
+                  href={link.url}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {link.title}
+                </a>
+              ))}
+            </div>
+          ) : null}
+        </section>
+      ) : null}
+
+      {/* biome-ignore lint/a11y/useMediaCaption: Remote assistant audio has no text track in this prototype. */}
+      <audio className={classes.hiddenMedia} ref={remoteAudioRef} autoPlay />
+      <video
+        className={classes.captureVideo}
+        ref={screenPreviewRef}
+        muted
+        playsInline
+      />
+      <canvas ref={frameCanvasRef} hidden />
+    </div>
+  );
+}