feat(transcription): background-only — remove captions overlay and interim broadcast

client/src/components/TranscriptPanel.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@mui/material/styles';
+import { beforeAll, describe, expect, it, vi } from 'vitest';
+import theme from '../theme/theme';
+import TranscriptPanel from './TranscriptPanel';
+
+beforeAll(() => {
+  Element.prototype.scrollIntoView = vi.fn();
+});
+
+const finalizedEntries = [{
+  id: 'final-1',
+  speaker: { name: 'Alice' },
+  ts: new Date('2026-07-30T10:15:00Z'),
+  text: 'The finalized speech turn.',
+}, {
+  id: 'final-2',
+  speaker: { name: 'Bob' },
+  ts: new Date('2026-07-30T10:16:00Z'),
+  text: 'The next finalized speech turn.',
+}];
+
+function renderPanel() {
+  return render(
+    <ThemeProvider theme={theme}>
+      <TranscriptPanel
+        open
+        active
+        entries={finalizedEntries}
+        isHost={false}
+        canContribute
+        onEnableContribution={vi.fn()}
+        onStop={vi.fn()}
+        onDownload={vi.fn()}
+        onClose={vi.fn()}
+      />
+    </ThemeProvider>,
+  );
+}
+
+describe('TranscriptPanel', () => {
+  it('shows finalized speech turns only', () => {
+    renderPanel();
+
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('The finalized speech turn.')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('The next finalized speech turn.')).toBeInTheDocument();
+    expect(screen.queryByText(/^listening$/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+});

client/src/components/TranscriptPanel.tsx

@@ -17,17 +17,10 @@ interface TranscriptEntry {
   ts: string | number | Date;
   text: string;
 }
-interface TranscriptInterim {
-  utteranceId: string;
-  speaker?: TranscriptSpeaker;
-  text: string;
-}
 interface TranscriptPanelProps {
   open: boolean;
   entries: TranscriptEntry[];
   active: boolean;
-  interims: TranscriptInterim[];
-  contributorStatus: string;
   contributorError?: string;
   isHost: boolean;
   canContribute: boolean;
@@ -45,8 +38,6 @@ export default function TranscriptPanel({
   open,
   entries,
   active,
-  interims,
-  contributorStatus,
   contributorError,
   isHost,
   canContribute,
@@ -58,7 +49,7 @@ export default function TranscriptPanel({
   const bottomRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     if (open) bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [open, entries.length, interims.length]);
+  }, [open, entries.length]);
 
   if (!open) return null;
 
@@ -138,7 +129,7 @@ export default function TranscriptPanel({
       ) : null}
 
       <Box sx={{ flex: 1, overflowY: 'auto', px: 2.25, py: 2, contentVisibility: 'auto' }}>
-        {!entries.length && !interims.length ? (
+        {!entries.length ? (
           <Stack sx={{ alignItems: 'center', justifyContent: 'center', minHeight: 260, color: 'text.secondary', textAlign: 'center', px: 3 }}>
             <NotesIcon sx={{ fontSize: 36, mb: 1.5, opacity: 0.5 }} />
             <Typography sx={{ fontWeight: 650, color: 'text.primary' }}>The conversation will appear here</Typography>
@@ -165,19 +156,6 @@ export default function TranscriptPanel({
               </Box>
             </Box>
           ))}
-          {interims.map((interim) => (
-            <Box key={interim.utteranceId} role="status" aria-live="polite" sx={{ display: 'flex', gap: 1.25, textAlign: 'left', opacity: 0.76 }}>
-              <Box sx={{ width: 30, display: 'grid', placeItems: 'center' }}>
-                <ListeningIcon sx={{ color: 'info.main', animation: 'blink 1.4s ease-in-out infinite' }} />
-              </Box>
-              <Box>
-                <Typography variant="caption" sx={{ color: 'info.main', fontWeight: 700 }}>
-                  {interim.speaker?.name || 'Participant'} · {contributorStatus === 'error' ? 'provider issue' : 'listening'}
-                </Typography>
-                <Typography variant="body2" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>{interim.text}</Typography>
-              </Box>
-            </Box>
-          ))}
         </Stack>
         <div ref={bottomRef} />
       </Box>

client/src/pages/RoomPage.tsx

@@ -32,7 +32,6 @@ import ChatPanel from '../components/ChatPanel';
 import PeoplePanel from '../components/PeoplePanel';
 import MediaReconnectingAlert from '../components/MediaReconnectingAlert';
 import TranscriptPanel from '../components/TranscriptPanel';
-import LiveCaptions from '../components/LiveCaptions';
 import CallNotifications from '../components/CallNotifications';
 import ReactionsOverlay from '../components/ReactionsOverlay';
 import type { ChatMessage } from '../components/ChatPanel';
@@ -43,7 +42,6 @@ import type {
   RoomUser,
   TranscriptContributorState,
   TranscriptEntry,
-  TranscriptInterim,
   TranscriptState,
 } from '@a-meet/contracts';
 import { playSound, isSoundEnabled, toggleSound } from '../services/sounds';
@@ -113,13 +111,10 @@ export default function RoomPage() {
   });
   const [transcriptEntries, setTranscriptEntries] = useState<TranscriptEntry[]>([]);
   const [transcriptConfigured, setTranscriptConfigured] = useState<boolean | null>(null);
-  const [transcriptInterims, setTranscriptInterims] = useState<Record<string, TranscriptInterim>>({});
   const [contributorState, setContributorState] = useState<ContributorViewState>({ status: 'idle', provider: null, error: '' });
   const [transcriptConsent, setTranscriptConsent] = useState(hasTranscriptConsent);
   const [transcriptConsentOpen, setTranscriptConsentOpen] = useState(false);
   const pendingTranscriptStartRef = useRef(false);
-  const [latestCaption, setLatestCaption] = useState<TranscriptEntry | null>(null);
-  const captionTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const [unreadCount, setUnreadCount] = useState(0);
   // Host asked us to unmute — surfaced as a one-tap prompt (never forced).
   const [unmuteRequestFrom, setUnmuteRequestFrom] = useState<string | null>(null);
@@ -240,9 +235,6 @@ export default function RoomPage() {
     audioTrack: localAudioOn ? audioTrack : null,
     onChunk: sendTranscriptAudio,
   });
-  const transcriptInterimList = Object.values(transcriptInterims).sort((a, b) => a.ts - b.ts);
-  const latestInterim = transcriptInterimList[transcriptInterimList.length - 1] ?? null;
-
   useEffect(() => {
     if (!shouldContributeTranscript || !pcmCapture.supported) return undefined;
     let cancelled = false;
@@ -356,9 +348,6 @@ export default function RoomPage() {
       setMessages((prev) => [...prev, { type: 'event', text: `${u.name} left`, ts: Date.now() }]);
       pushNote({ kind: 'event', variant: 'leave', name: u.name, avatar: u.avatar });
       playSound('leave');
-      setTranscriptInterims((current) => Object.fromEntries(
-        Object.entries(current).filter(([, interim]) => interim.speaker?.id !== u.id),
-      ));
     });
     socket.on('chat-message', (msg) => {
       setMessages((prev) => [...prev, { type: 'chat', ...msg }]);
@@ -393,7 +382,6 @@ export default function RoomPage() {
     });
     socket.on('transcript-state', (state) => {
       setTranscriptState(state);
-      setTranscriptInterims({});
       if (state.active) {
         setActivePanel('transcript');
         if (!hasTranscriptConsent()
@@ -404,17 +392,6 @@ export default function RoomPage() {
     });
     socket.on('transcript-segment', (entry) => {
       setTranscriptEntries((current) => mergeTranscriptEntries(current, [entry]));
-      setLatestCaption(entry);
-      clearTimeout(captionTimerRef.current);
-      captionTimerRef.current = setTimeout(() => setLatestCaption(null), 6500);
-    });
-    socket.on('transcript-interim', (interim) => {
-      setTranscriptInterims((current) => {
-        const next = { ...current };
-        if (interim.text) next[interim.utteranceId] = interim;
-        else delete next[interim.utteranceId];
-        return next;
-      });
     });
     socket.on('transcript-contributor-state', (state) => {
       setContributorState({
@@ -443,7 +420,6 @@ export default function RoomPage() {
       socket.off('transcript-snapshot');
       socket.off('transcript-state');
       socket.off('transcript-segment');
-      socket.off('transcript-interim');
       socket.off('transcript-contributor-state');
       socket.off('sfu-meeting-ended');
       socket.off('sfu-hand-raise-update', onPeerHandRaise);
@@ -454,7 +430,6 @@ export default function RoomPage() {
       // the packet doesn't flush before disconnect, the grace window still covers it.
       socket.emit('leave-room', roomId);
       socket.disconnect();
-      clearTimeout(captionTimerRef.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [roomId]);
@@ -1285,11 +1260,6 @@ export default function RoomPage() {
           {/* Bottom-left floating emoji stream (M7.5) */}
           <ReactionsOverlay reactions={floatingReactions} />
 
-          <LiveCaptions
-            entry={transcriptState.active ? latestCaption : null}
-            interim={transcriptState.active ? latestInterim : null}
-          />
-
           {/* Top overlay: meeting info (left) + participants (right) */}
           <Box
             sx={{
@@ -1470,8 +1440,6 @@ export default function RoomPage() {
           open={showTranscript}
           entries={transcriptEntries}
           active={transcriptState.active}
-          interims={transcriptInterimList}
-          contributorStatus={shouldContributeTranscript ? contributorState.status : (localAudioOn ? 'idle' : 'paused')}
           contributorError={contributorState.error || pcmCapture.error}
           isHost={isHost}
           canContribute={transcriptConsent && pcmCapture.supported && !!transcriptConfigured}

client/tsconfig.json

@@ -12,7 +12,6 @@
     "typecheck",
     "src/components/BrandMark.tsx",
     "src/components/EtherealShadow.tsx",
-    "src/components/LiveCaptions.tsx",
     "src/components/ReactionsOverlay.tsx",
     "src/components/RemoteAudio.tsx",
     "src/components/RtcStatsOverlay.tsx",
@@ -59,6 +58,7 @@
     "src/components/RoomGuard.test.tsx",
     "src/components/SpaceCanvas.tsx",
     "src/components/TranscriptPanel.tsx",
+    "src/components/TranscriptPanel.test.tsx",
     "src/components/BrandMark.test.tsx",
     "src/components/ChatPanel.tsx",
     "src/components/ChatPanel.test.tsx",

server/src/transcription/meeting-transcription.ts

@@ -31,14 +31,9 @@ export async function startContributor({ io, socket, roomId }: { io: Server; soc
   const session = new DeepgramMeetingSession({
     socketId: socket.id,
     onStatus: (state) => socket.emit('transcript-contributor-state', state),
-    onInterim: ({ utteranceId, text }) => {
-      io.to(roomId).emit('transcript-interim', {
-        utteranceId,
-        speaker: { id: user.id, name: user.name, avatar: user.avatar || '' },
-        text,
-        ts: Date.now(),
-      });
-    },
+    // Deepgram still returns interims so it can assemble a complete final turn.
+    // They are deliberately not sent to meeting participants.
+    onInterim: () => {},
     onFinal: ({ utteranceId, text, audio }) => {
       const appended = appendTranscriptSegment(roomId, user, {
         clientSegmentId: `provider:${utteranceId}`,

server/test/deepgram-session.test.js

@@ -142,7 +142,7 @@ describe('DeepgramMeetingSession provider lifecycle', () => {
 });
 
 describe('DeepgramMeetingSession turn assembly', () => {
-  it('broadcasts interim text and finalizes one audio-backed utterance', () => {
+  it('accumulates interim text and finalizes one audio-backed utterance', () => {
     const onInterim = vi.fn();
     const onFinal = vi.fn();
     const session = new DeepgramMeetingSession({

server/test/meeting-transcription.test.js

@@ -144,6 +144,21 @@ describe('startContributor', () => {
     expect(mockSessionInstance.start).toHaveBeenCalledTimes(1);
   });
 
+  // Contract-level removal makes an interim emit a type error; this fake-io assertion covers the existing server seam.
+  it('does not broadcast provider interim results to room participants', async () => {
+    const socketId = uid();
+    const { io, emits } = makeIo();
+    const socket = makeSocket(socketId);
+    env.transcription.deepgramApiKey = 'key';
+
+    await startContributor({ io, socket, roomId: ROOM });
+
+    const { onInterim } = DeepgramMeetingSession.mock.calls.at(-1)[0];
+    onInterim({ utteranceId: 'utterance-1', text: 'still speaking' });
+
+    expect(emits).not.toContainEqual(expect.objectContaining({ event: 'transcript-interim' }));
+  });
+
   it('cleans up the sessions map if session.start() throws', async () => {
     const socketId = uid();
     const { io } = makeIo();

shared/src/events.ts

@@ -28,12 +28,6 @@ export interface TranscriptEntry {
   provisional: boolean;
   revisedAt?: number;
 }
-export interface TranscriptInterim {
-  utteranceId: string;
-  speaker: { id: string; name: string; avatar: string };
-  text: string;
-  ts: number;
-}
 export interface TranscriptSnapshot extends TranscriptState {
   entries: TranscriptEntry[];
   configured: boolean;
@@ -100,7 +94,6 @@ export interface ServerToClientEvents extends WebRtcServerToClientEvents {
   'transcript-snapshot': (snapshot: TranscriptSnapshot) => void;
   'transcript-state': (state: TranscriptState) => void;
   'transcript-segment': (entry: TranscriptEntry) => void;
-  'transcript-interim': (interim: TranscriptInterim) => void;
   'transcript-contributor-state': (state: TranscriptContributorState) => void;
   'sfu-meeting-ended': () => void;
   'sfu-force-muted': () => void;