feat(vela): support end-to-end mocked turn cancelation

This commit is contained in:
2026-04-08 19:49:31 +02:00
parent ff78fc4c8f
commit 0d5b53be00
7 changed files with 197 additions and 9 deletions

View File

@@ -22,7 +22,8 @@ function createSessionRecord() {
audioChunkCount: 0,
started: false,
mockedTurnInFlight: false,
mockedTurnTimers: []
mockedTurnTimers: [],
activeMockedTurnId: null
};
}
@@ -33,11 +34,17 @@ function clearMockedTurn(session) {
session.mockedTurnTimers = [];
session.mockedTurnInFlight = false;
session.activeMockedTurnId = null;
}
function scheduleMockedTurnStep(session, delay, callback) {
function scheduleMockedTurnStep(session, turnId, delay, callback) {
const timer = setTimeout(() => {
session.mockedTurnTimers = session.mockedTurnTimers.filter((activeTimer) => activeTimer !== timer);
if (!session.mockedTurnInFlight || session.activeMockedTurnId !== turnId) {
return;
}
callback();
}, delay);
@@ -53,23 +60,25 @@ function startMockedTurn(socket, session) {
clearMockedTurn(session);
session.audioChunkCount = 0;
session.mockedTurnInFlight = true;
const turnId = crypto.randomUUID();
session.activeMockedTurnId = turnId;
updateSessionState(socket, session, 'listening');
scheduleMockedTurnStep(session, 75, () => {
scheduleMockedTurnStep(session, turnId, 75, () => {
sendSocketMessage(socket, 'transcript.final', { text: MOCKED_USER_TRANSCRIPT });
updateSessionState(socket, session, 'thinking');
});
scheduleMockedTurnStep(session, 150, () => {
scheduleMockedTurnStep(session, turnId, 150, () => {
updateSessionState(socket, session, 'speaking');
sendSocketMessage(socket, 'response.text.delta', { text: '[mocked assistant] ' });
});
scheduleMockedTurnStep(session, 225, () => {
scheduleMockedTurnStep(session, turnId, 225, () => {
sendSocketMessage(socket, 'response.text.delta', { text: MOCKED_ASSISTANT_RESPONSE.replace('[mocked assistant] ', '') });
});
scheduleMockedTurnStep(session, 300, () => {
scheduleMockedTurnStep(session, turnId, 300, () => {
sendSocketMessage(socket, 'response.completed', {});
clearMockedTurn(session);
updateSessionState(socket, session, 'idle');

View File

@@ -405,3 +405,67 @@ test('websocket rejects a second mocked turn while one is in flight', async () =
await server.close();
}
});
test('websocket cancel stops an active mocked turn and allows a new one without reconnecting', async () => {
const server = await startServer();
try {
const client = await connectWebSocket(server.port);
await client.nextMessage();
await client.nextMessage();
client.sendJson({ type: 'mocked.turn.trigger', payload: {} });
assert.deepEqual(await client.nextMessage(), {
type: 'session.state',
payload: { value: 'listening' }
});
assert.deepEqual(await client.nextMessage(), {
type: 'transcript.final',
payload: { text: '[mocked user] What is the current mocked vertical slice?' }
});
assert.deepEqual(await client.nextMessage(), {
type: 'session.state',
payload: { value: 'thinking' }
});
client.sendJson({ type: 'response.cancel', payload: {} });
assert.deepEqual(await client.nextMessage(), {
type: 'session.state',
payload: { value: 'idle' }
});
await assert.rejects(() => client.nextMessage(150), /timed out waiting for websocket message/);
client.sendJson({ type: 'mocked.turn.trigger', payload: {} });
assert.deepEqual(await client.nextMessage(), {
type: 'session.state',
payload: { value: 'listening' }
});
await client.close();
} finally {
await server.close();
}
});
test('websocket safely accepts cancel when no turn is active', async () => {
const server = await startServer();
try {
const client = await connectWebSocket(server.port);
await client.nextMessage();
await client.nextMessage();
client.sendJson({ type: 'response.cancel', payload: {} });
await assert.rejects(() => client.nextMessage(150), /timed out waiting for websocket message/);
client.sendJson({ type: 'mocked.turn.trigger', payload: {} });
assert.deepEqual(await client.nextMessage(), {
type: 'session.state',
payload: { value: 'listening' }
});
await client.close();
} finally {
await server.close();
}
});

View File

@@ -46,3 +46,34 @@ test('voice session shell covers the mocked transcript/response slice', async ({
await expect(page.getByTestId('user-transcript')).toHaveText(MOCKED_USER_TRANSCRIPT);
await expect(page.getByTestId('assistant-response')).toHaveText(MOCKED_ASSISTANT_RESPONSE);
});
test('voice session shell can cancel an active mocked turn and start another one', async ({ page }) => {
await page.goto('/');
await expect(page.getByTestId('hydration-status')).toHaveText('ready');
await expect(page.getByTestId('cancel-turn-button')).toBeDisabled();
await page.getByTestId('connect-button').click();
await expect(page.getByTestId('connection-state')).toHaveText('connected');
await expect(page.getByTestId('mocked-turn-button')).toBeEnabled();
await page.getByTestId('mocked-turn-button').click();
await expect(page.getByTestId('mocked-turn-status')).toHaveText('running');
await expect(page.getByTestId('cancel-turn-button')).toBeEnabled();
await expect(page.getByTestId('user-transcript')).toHaveText(MOCKED_USER_TRANSCRIPT);
await expect(page.getByTestId('assistant-response')).toContainText('[mocked assistant]');
await page.getByTestId('cancel-turn-button').click();
await expect(page.getByTestId('gateway-session-state')).toHaveText('idle');
await expect(page.getByTestId('mocked-turn-status')).toHaveText('idle');
await expect(page.getByTestId('cancel-turn-button')).toBeDisabled();
await expect(page.getByTestId('mocked-turn-button')).toBeEnabled();
await expect(page.getByTestId('user-transcript')).toHaveText(MOCKED_USER_TRANSCRIPT);
await expect(page.getByTestId('assistant-response')).toContainText('[mocked assistant]');
await page.getByTestId('mocked-turn-button').click();
await expect(page.getByTestId('mocked-turn-status')).toHaveText('running');
await expect(page.getByTestId('assistant-response')).toHaveText(MOCKED_ASSISTANT_RESPONSE);
await expect(page.getByTestId('mocked-turn-status')).toHaveText('idle');
});

View File

@@ -62,6 +62,13 @@
sessionReadyReceived &&
!mockedTurnInFlight;
$: canCancelMockedTurn =
typeof WebSocket !== 'undefined' &&
connectionState === 'connected' &&
socket?.readyState === WebSocket.OPEN &&
sessionReadyReceived &&
mockedTurnInFlight;
function clearSocketHandlers(targetSocket) {
targetSocket.onopen = null;
targetSocket.onmessage = null;
@@ -105,6 +112,23 @@
socket.send(JSON.stringify(createMessageEnvelope('mocked.turn.trigger', {})));
}
function cancelActiveResponse() {
if (!socket || socket.readyState !== WebSocket.OPEN || connectionState !== 'connected') {
connectionDetail = 'Connect to the gateway before cancelling a mocked turn.';
lastError = 'response.cancel requires an active WebSocket connection';
return;
}
if (!sessionReadyReceived) {
connectionDetail = 'Wait for the gateway session to be ready before cancelling a mocked turn.';
lastError = 'response.cancel requires session.ready';
return;
}
lastError = 'none';
socket.send(JSON.stringify(createMessageEnvelope('response.cancel', {})));
}
function connect() {
if (typeof window === 'undefined') {
return;
@@ -301,6 +325,9 @@
<button data-testid="mocked-turn-button" on:click={triggerMockedTurn} disabled={!canTriggerMockedTurn}>
Run mocked turn
</button>
<button data-testid="cancel-turn-button" on:click={cancelActiveResponse} disabled={!canCancelMockedTurn}>
Cancel active turn
</button>
</div>
<div class="conversation">

View File

@@ -154,4 +154,48 @@ describe('voice session shell', () => {
expect(socket.sent).toHaveLength(1);
expect(JSON.parse(socket.sent[0]).type).toBe('mocked.turn.trigger');
});
it('shows cancel control during an active mocked turn and preserves rendered text after cancel', async () => {
render(VoiceSessionShell);
await fireEvent.click(getByTestId('connect-button'));
const socket = MockWebSocket.latest();
socket.open();
socket.message(createMessageEnvelope('session.ready', { sessionId: 'session-cancel' }));
socket.message(createMessageEnvelope('session.state', { value: 'idle' }));
await waitFor(() => {
expect(getByTestId('cancel-turn-button').hasAttribute('disabled')).toBe(true);
});
await fireEvent.click(getByTestId('mocked-turn-button'));
expect(JSON.parse(socket.sent[0]).type).toBe('mocked.turn.trigger');
socket.message(createMessageEnvelope('session.state', { value: 'listening' }));
socket.message(createMessageEnvelope('transcript.final', { text: 'Keep this transcript.' }));
socket.message(createMessageEnvelope('session.state', { value: 'thinking' }));
socket.message(createMessageEnvelope('session.state', { value: 'speaking' }));
socket.message(createMessageEnvelope('response.text.delta', { text: 'Partial response' }));
await waitFor(() => {
expect(getByTestId('cancel-turn-button').hasAttribute('disabled')).toBe(false);
expect(getByTestId('assistant-response').textContent).toBe('Partial response');
});
await fireEvent.click(getByTestId('cancel-turn-button'));
expect(JSON.parse(socket.sent[1]).type).toBe('response.cancel');
socket.message(createMessageEnvelope('session.state', { value: 'idle' }));
await waitFor(() => {
expect(getByTestId('mocked-turn-status').textContent).toBe('idle');
expect(getByTestId('gateway-session-state').textContent).toBe('idle');
expect(getByTestId('cancel-turn-button').hasAttribute('disabled')).toBe(true);
expect(getByTestId('mocked-turn-button').hasAttribute('disabled')).toBe(false);
expect(getByTestId('user-transcript').textContent).toBe('Keep this transcript.');
expect(getByTestId('assistant-response').textContent).toBe('Partial response');
});
});
});