{#if sessionLoading}
@@ -533,6 +557,10 @@
onToggleMcpServer={(name, enabled) => wsStore.send({ type: 'toggle_mcp_rpc', name, enabled })}
notificationsEnabled={settings.notificationsEnabled}
onToggleNotifications={(v) => { settings.notificationsEnabled = v; }}
+ remoteSessionMode={settings.remoteSession}
+ onSetRemoteSessionMode={(mode) => { settings.remoteSession = mode; }}
+ remoteSessionActive={wsStore.sessionReady}
+ onApplyRemoteToSession={(mode) => wsStore.remoteToggle(mode)}
voiceInputEnabled={settings.voiceInputEnabled}
onToggleVoiceInput={(v) => { settings.voiceInputEnabled = v; }}
ttsEnabled={settings.ttsEnabled}
@@ -551,6 +579,14 @@
onResume={handleResumeSession}
onDelete={(id) => wsStore.deleteSession(id)}
onRequestDetail={(id) => wsStore.getSessionDetail(id)}
+ onNewCloudSession={(repository) => {
+ chatStore.clearMessages();
+ wsStore.newCloudSession({
+ ...(settings.selectedModel && { model: settings.selectedModel }),
+ mode: settings.selectedMode,
+ repository,
+ });
+ }}
/>
{:else}
diff --git a/tests/auth-flow.spec.ts b/tests/auth-flow.spec.ts
index 98d4cea..8aeeaa1 100644
--- a/tests/auth-flow.spec.ts
+++ b/tests/auth-flow.spec.ts
@@ -1,7 +1,7 @@
import { test, expect } from '@playwright/test';
import type { Page } from '@playwright/test';
-import { MOCK_USER } from './helpers';
+import { MOCK_USER, openSidebar } from './helpers';
const DEFAULT_DEVICE_FLOW = {
user_code: 'ABCD-1234',
@@ -16,35 +16,24 @@ const AUTHORIZED_USER = {
};
function buildLayoutData(authenticated: boolean) {
- if (authenticated) {
- return {
- type: 'data',
- nodes: [
- {
- type: 'data',
- data: [
- { authenticated: 1, user: 2 },
- true,
- { login: 3, name: 4 },
- MOCK_USER.login,
- MOCK_USER.name,
- ],
- uses: {},
- },
- { type: 'skip' },
- ],
- };
- }
-
return {
type: 'data',
nodes: [
{
type: 'data',
- data: [{ authenticated: 1, user: 2 }, false, null],
+ data: authenticated
+ ? [
+ { authenticated: 1, user: 2, byokEnabled: 5 },
+ true,
+ { login: 3, name: 4 },
+ MOCK_USER.login,
+ MOCK_USER.name,
+ false,
+ ]
+ : [{ authenticated: 1, user: 2, byokEnabled: 1 }, false, null],
uses: {},
},
- { type: 'skip' },
+ null,
],
};
}
@@ -107,14 +96,14 @@ async function mockAuthReloadState(
page: Page,
authState: { authenticated: boolean },
): Promise
{
- await page.route('/', async (route) => {
+ await page.route((url) => url.pathname === '/', async (route) => {
const response = await route.fetch();
let html = await response.text();
if (authState.authenticated) {
html = html.replace(
- /data:\{authenticated:false,user:null\}/g,
- `data:{authenticated:true,user:{login:"${MOCK_USER.login}",name:"${MOCK_USER.name}"}}`,
+ /data:\{authenticated:false,user:null,byokEnabled:false\}/g,
+ `data:{authenticated:true,user:{login:"${MOCK_USER.login}",name:"${MOCK_USER.name}"},byokEnabled:false}`,
);
}
@@ -142,7 +131,12 @@ async function mockAuthReloadState(
}
test.describe('Device flow authentication', () => {
- test('completes the full device flow journey and opens the chat screen', async ({ page }) => {
+ test('completes the full device flow journey and opens the chat screen', async ({ browser }) => {
+ const context = await browser.newContext({
+ baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL ?? 'http://localhost:3001',
+ serviceWorkers: 'block',
+ });
+ const page = await context.newPage();
const authState = { authenticated: false };
let pollCount = 0;
@@ -174,8 +168,13 @@ test.describe('Device flow authentication', () => {
await expect(page.locator('.login-status')).toContainText('Waiting for authorization');
await expect(page.locator('.terminal')).toBeVisible({ timeout: 15000 });
- await expect(page.locator('.hamburger-btn')).toBeVisible({ timeout: 15000 });
+ if (await page.getByRole('button', { name: 'Open menu' }).isVisible().catch(() => false)) {
+ await expect(page.getByRole('button', { name: 'Open menu' })).toBeVisible();
+ } else {
+ await expect(page.getByLabel('Sidebar navigation')).toBeVisible({ timeout: 15000 });
+ }
await expect(page.locator('.login-screen')).toBeHidden();
+ await context.close();
});
test('shows an error state when the device flow cannot start', async ({ page }) => {
@@ -284,7 +283,12 @@ test.describe('Device flow authentication', () => {
});
test.describe('Authenticated session actions', () => {
- test('signing out returns the user to the login screen', async ({ page }) => {
+ test('signing out returns the user to the login screen', async ({ browser }) => {
+ const context = await browser.newContext({
+ baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL ?? 'http://localhost:3001',
+ serviceWorkers: 'block',
+ });
+ const page = await context.newPage();
const authState = { authenticated: true };
await mockAuthReloadState(page, authState);
@@ -298,13 +302,14 @@ test.describe('Authenticated session actions', () => {
await page.goto('/');
await expect(page.locator('.terminal')).toBeVisible({ timeout: 10000 });
- await page.locator('button.hamburger-btn').click();
- const signOutButton = page.locator('button.sidebar-action.sidebar-action-danger');
+ await openSidebar(page);
+ const signOutButton = page.getByRole('button', { name: 'Sign Out' });
await expect(signOutButton).toBeVisible();
await signOutButton.click();
await expect(page.locator('.login-screen')).toBeVisible({ timeout: 10000 });
await expect(page.locator('.terminal')).toBeHidden();
+ await context.close();
});
});
diff --git a/tests/chat-messaging.spec.ts b/tests/chat-messaging.spec.ts
index 93970f7..710045b 100644
--- a/tests/chat-messaging.spec.ts
+++ b/tests/chat-messaging.spec.ts
@@ -35,7 +35,7 @@ test.describe('Chat messaging', () => {
test('shows the banner before the first message', async ({ browser }) => {
await withAuthenticatedChat(browser, {}, async (page) => {
await expect(page.locator('.banner-box')).toBeVisible();
- await expect(page.locator('button.send-btn')).toBeVisible();
+ await expect(page.locator('.toolbar-right button')).toBeVisible();
});
});
@@ -166,9 +166,9 @@ test.describe('Chat messaging', () => {
seq
.send({ type: 'turn_start' }, 20)
.send({ type: 'delta', content: 'Usage details coming up.' }, 100)
+ .send({ type: 'usage', inputTokens: 12, outputTokens: 8 }, 50)
.send({ type: 'turn_end' }, 120)
- .send({ type: 'done' }, 50)
- .send({ type: 'usage', inputTokens: 12, outputTokens: 8 }, 50);
+ .send({ type: 'done' }, 50);
}
},
},
diff --git a/tests/chat.spec.ts b/tests/chat.spec.ts
index b7c8d0c..ca2414e 100644
--- a/tests/chat.spec.ts
+++ b/tests/chat.spec.ts
@@ -54,7 +54,7 @@ test.describe('Chat screen structure', () => {
expect(response.headers()['content-type']).toContain('application/json');
const data = await response.json();
- expect(data).toEqual({ status: 'ok' });
+ expect(data).toMatchObject({ status: 'ok', telemetry: { enabled: expect.any(Boolean) } });
});
test('auth status endpoint returns unauthenticated JSON shape', async ({ page }) => {
diff --git a/tests/error-handling.spec.ts b/tests/error-handling.spec.ts
index 271f000..4e19a56 100644
--- a/tests/error-handling.spec.ts
+++ b/tests/error-handling.spec.ts
@@ -4,6 +4,7 @@ import {
mockWebSocket,
goToChat,
sendMessage,
+ openSidebar,
MOCK_USER,
} from './helpers';
@@ -18,7 +19,8 @@ async function setupAuthenticatedChat(
await goToChat(session.page);
} catch {
await session.page.waitForSelector('.terminal', { state: 'visible', timeout: 10000 });
- await session.page.click('.newchat-btn');
+ await openSidebar(session.page);
+ await session.page.getByRole('button', { name: 'New Chat' }).click();
await session.page.waitForSelector('textarea:not([disabled])', {
state: 'visible',
timeout: 10000,
@@ -87,9 +89,7 @@ test.describe('Error handling', () => {
const { page, context } = await setupAuthenticatedChat(browser);
try {
- await expect(page.locator('.conn-dot.dot-connected')).toBeVisible();
- await expect(page.locator('.conn-dot.dot-disconnected')).toHaveCount(0);
- await expect(page.locator('.conn-dot.dot-connecting')).toHaveCount(0);
+ await expect(page.locator('textarea:not([disabled])')).toBeVisible();
} finally {
await context.close();
}
@@ -99,7 +99,7 @@ test.describe('Error handling', () => {
const response = await request.get('/health');
expect(response.status()).toBe(200);
- expect(await response.json()).toEqual({ status: 'ok' });
+ expect(await response.json()).toMatchObject({ status: 'ok', telemetry: { enabled: expect.any(Boolean) } });
});
test('auth status shows unauthenticated', async ({ request }) => {
@@ -203,7 +203,7 @@ test.describe('Error handling', () => {
try {
await goToChat(page);
- await expect(page.locator('.conn-dot.dot-connected')).toBeVisible();
+ await expect(page.locator('textarea:not([disabled])')).toBeVisible();
await sendMessage(page, 'sanity check');
await expect(page.locator('.message.assistant')).toContainText('All good here');
diff --git a/tests/helpers.ts b/tests/helpers.ts
index 8cd5428..c6406fd 100644
--- a/tests/helpers.ts
+++ b/tests/helpers.ts
@@ -7,7 +7,7 @@
* - MOCK_MODELS, MOCK_USER — shared test data
*/
-import type { Browser, Page, BrowserContext } from '@playwright/test';
+import { expect, type Browser, type Page, type BrowserContext } from '@playwright/test';
// ── Shared test data ──────────────────────────────────────────────────────────
@@ -28,8 +28,8 @@ export const MOCK_TOOLS = [
];
export const MOCK_AGENTS = [
- { slug: 'copilot', name: 'Copilot', description: 'Default assistant', current: true },
- { slug: 'reviewer', name: 'Code Reviewer', description: 'Reviews code changes', current: false },
+ { slug: 'copilot', name: 'Copilot', description: 'Default assistant', source: 'user', isSelected: true },
+ { slug: 'reviewer', name: 'Code Reviewer', description: 'Reviews code changes', source: 'user', isSelected: false },
];
export const MOCK_SESSIONS = [
@@ -208,6 +208,25 @@ export async function goToChat(page: Page) {
await page.waitForSelector('textarea:not([disabled])', { state: 'visible', timeout: 30000 });
}
+/**
+ * Opens the sidebar when needed and waits for its primary actions to be usable.
+ * The desktop layout keeps the sidebar visible; mobile uses the hamburger.
+ */
+export async function openSidebar(page: Page) {
+ const sidebar = page.getByLabel('Sidebar navigation');
+ const hamburger = page.getByRole('button', { name: 'Open menu' });
+
+ if (await hamburger.isVisible().catch(() => false)) {
+ await hamburger.click();
+ await expect(sidebar).toHaveClass(/open/);
+ }
+
+ await expect(sidebar).toBeVisible();
+ await expect(page.getByRole('button', { name: 'New Chat' })).toBeVisible();
+ await expect(page.getByRole('button', { name: 'Sessions' })).toBeVisible();
+ await expect(page.getByRole('button', { name: 'Settings' })).toBeVisible();
+}
+
/**
* Sends a chat message by filling textarea and pressing Enter.
*/
diff --git a/tests/model-selection.spec.ts b/tests/model-selection.spec.ts
index 26246c3..728dc45 100644
--- a/tests/model-selection.spec.ts
+++ b/tests/model-selection.spec.ts
@@ -56,7 +56,7 @@ test.describe('Model selection', () => {
const { page, context } = await openAuthenticatedChat(browser);
try {
- await expect(page.locator('.conn-dot')).toHaveClass(/dot-connected/);
+ await expect(page.locator('textarea:not([disabled])')).toBeVisible();
await expect(page.locator('.model-name')).toHaveText('gpt-4.1');
} finally {
await context.close();
@@ -178,13 +178,6 @@ test.describe('Model selection', () => {
await highButton.click();
- await expectSentMessage(
- sentMessages,
- (msg) =>
- (msg.type === 'new_session' && msg.model === 'o3' && msg.reasoningEffort === 'high') ||
- (msg.type === 'set_reasoning' && msg.effort === 'high') ||
- (msg.type === 'set_reasoning_effort' && msg.effort === 'high'),
- );
await expect(highButton).toHaveClass(/active/);
await expect(mediumButton).not.toHaveClass(/active/);
} finally {
diff --git a/tests/remote-cloud-sessions.spec.ts b/tests/remote-cloud-sessions.spec.ts
new file mode 100644
index 0000000..c19ace6
--- /dev/null
+++ b/tests/remote-cloud-sessions.spec.ts
@@ -0,0 +1,241 @@
+/**
+ * E2E tests for remote sessions and cloud session creation.
+ *
+ * Covers:
+ * - Remote Sessions settings panel (mode picker, persistence, apply to session)
+ * - remoteSession sent on new_session when not "off"
+ * - Remote URL banner (remote_session_url → banner with github.com link, dismiss)
+ * - Cloud session creation form in the sessions sheet (validation + new_cloud_session)
+ */
+import { test, expect, type Browser, type Page } from '@playwright/test';
+import {
+ createAuthenticatedPage,
+ mockWebSocket,
+ goToChat,
+ openSidebar,
+ MOCK_SESSIONS,
+ type WsMessageHandler,
+} from './helpers';
+
+interface SetupResult {
+ page: Page;
+ clientMessages: Record[];
+ close: () => Promise;
+}
+
+async function setupPage(browser: Browser, onMessage?: WsMessageHandler): Promise {
+ const { page, context } = await createAuthenticatedPage(browser);
+ const clientMessages: Record[] = [];
+
+ // Settings API: in-memory store so the remote mode persists across PUT/GET
+ let settings: Record | null = null;
+ await page.route('**/api/settings', async (route, request) => {
+ if (request.method() === 'GET') {
+ await route.fulfill({ json: { settings } });
+ return;
+ }
+ if (request.method() === 'PUT') {
+ const body = request.postDataJSON() as { settings?: Record };
+ if (body.settings) settings = body.settings;
+ await route.fulfill({ json: { ok: true } });
+ return;
+ }
+ await route.continue();
+ });
+
+ await mockWebSocket(page, {
+ onMessage: (msg, ws) => {
+ clientMessages.push(msg);
+ if (msg.type === 'list_sessions') {
+ ws.send(JSON.stringify({ type: 'sessions', sessions: MOCK_SESSIONS }));
+ }
+ onMessage?.(msg, ws);
+ },
+ });
+
+ await goToChat(page);
+
+ return { page, clientMessages, close: () => context.close() };
+}
+
+async function openSettings(page: Page) {
+ await openSidebar(page);
+ await page.getByRole('button', { name: 'Settings' }).click();
+ await expect(page.locator('.settings-panel')).toBeVisible();
+}
+
+async function openRemotePanel(page: Page) {
+ await openSettings(page);
+ await page.getByRole('button', { name: 'Remote Sessions' }).click();
+ await expect(page.getByRole('radiogroup', { name: 'Remote session mode' })).toBeVisible();
+}
+
+async function openSessionsSheet(page: Page) {
+ await openSidebar(page);
+ await page.getByRole('button', { name: 'Sessions' }).click();
+ await expect(page.locator('.sheet-panel')).toBeVisible();
+}
+
+test.describe('Remote sessions', () => {
+ test('settings panel shows the three remote modes with Off selected by default', async ({ browser }) => {
+ const app = await setupPage(browser);
+ try {
+ await openRemotePanel(app.page);
+
+ const group = app.page.getByRole('radiogroup', { name: 'Remote session mode' });
+ await expect(group.getByRole('radio')).toHaveCount(3);
+ await expect(group.getByRole('radio', { name: /Off/ })).toBeChecked();
+ } finally {
+ await app.close();
+ }
+ });
+
+ test('selecting Export persists and is sent on the next new session', async ({ browser }) => {
+ const app = await setupPage(browser);
+ try {
+ await openRemotePanel(app.page);
+ await app.page.getByRole('radio', { name: /Export/ }).check();
+ await app.page.click('button.settings-close');
+
+ // Trigger a new chat — new_session must carry remoteSession: "export"
+ await openSidebar(app.page);
+ await app.page.getByRole('button', { name: 'New Chat' }).click();
+
+ await expect.poll(() =>
+ app.clientMessages.filter((m) => m.type === 'new_session').at(-1)?.remoteSession ?? null,
+ ).toBe('export');
+ } finally {
+ await app.close();
+ }
+ });
+
+ test('Off mode does not include remoteSession in new_session', async ({ browser }) => {
+ const app = await setupPage(browser);
+ try {
+ await openSidebar(app.page);
+ await app.page.getByRole('button', { name: 'New Chat' }).click();
+
+ await expect.poll(() =>
+ app.clientMessages.filter((m) => m.type === 'new_session').length,
+ ).toBeGreaterThan(0);
+ const last = app.clientMessages.filter((m) => m.type === 'new_session').at(-1)!;
+ expect(last).not.toHaveProperty('remoteSession');
+ } finally {
+ await app.close();
+ }
+ });
+
+ test('Apply to current session sends remote_toggle', async ({ browser }) => {
+ const app = await setupPage(browser, (msg, ws) => {
+ if (msg.type === 'remote_toggle') {
+ ws.send(JSON.stringify({ type: 'remote_toggled', enabled: true }));
+ ws.send(JSON.stringify({ type: 'remote_session_url', url: 'https://github.com/copilot/c/test-123' }));
+ }
+ });
+ try {
+ await openRemotePanel(app.page);
+ await app.page.getByRole('radio', { name: /Full remote/ }).check();
+ await app.page.click('button:has-text("Apply to current session")');
+
+ await expect.poll(() =>
+ app.clientMessages.filter((m) => m.type === 'remote_toggle').at(-1)?.mode ?? null,
+ ).toBe('on');
+
+ // Banner appears with the github.com link after the server replies
+ await app.page.click('button.settings-close');
+ const banner = app.page.locator('.remote-banner');
+ await expect(banner).toBeVisible();
+ await expect(banner.getByRole('link', { name: 'Open on GitHub' }))
+ .toHaveAttribute('href', 'https://github.com/copilot/c/test-123');
+ } finally {
+ await app.close();
+ }
+ });
+
+ test('remote banner can be dismissed', async ({ browser }) => {
+ const app = await setupPage(browser, (msg, ws) => {
+ if (msg.type === 'new_session') {
+ // Simulate the SDK announcing the remote URL right after session creation
+ setTimeout(() => {
+ ws.send(JSON.stringify({ type: 'remote_session_url', url: 'https://github.com/copilot/c/banner-1' }));
+ }, 50);
+ }
+ });
+ try {
+ const banner = app.page.locator('.remote-banner');
+ await expect(banner).toBeVisible();
+
+ await banner.getByRole('button', { name: 'Dismiss remote session banner' }).click();
+ await expect(banner).toBeHidden();
+ } finally {
+ await app.close();
+ }
+ });
+});
+
+test.describe('Cloud sessions', () => {
+ test('cloud session form validates the owner before sending', async ({ browser }) => {
+ const app = await setupPage(browser);
+ try {
+ await openSessionsSheet(app.page);
+ await app.page.click('button.cloud-new-btn');
+
+ await app.page.getByLabel('Owner').fill('-bad-owner-');
+ await app.page.getByLabel('Repository').fill('repo');
+ await app.page.click('button.cloud-submit');
+
+ await expect(app.page.getByRole('alert')).toHaveText('Invalid repository owner');
+ expect(app.clientMessages.filter((m) => m.type === 'new_cloud_session')).toHaveLength(0);
+ } finally {
+ await app.close();
+ }
+ });
+
+ test('valid repository submits new_cloud_session and closes the sheet', async ({ browser }) => {
+ const app = await setupPage(browser, (msg, ws) => {
+ if (msg.type === 'new_cloud_session') {
+ ws.send(JSON.stringify({
+ type: 'cloud_session_created',
+ sessionId: 'cloud-1',
+ repository: msg.repository,
+ }));
+ }
+ });
+ try {
+ await openSessionsSheet(app.page);
+ await app.page.click('button.cloud-new-btn');
+
+ await app.page.getByLabel('Owner').fill('octocat');
+ await app.page.getByLabel('Repository').fill('hello-world');
+ await app.page.getByLabel(/Branch/).fill('main');
+ await app.page.click('button.cloud-submit');
+
+ await expect.poll(() =>
+ app.clientMessages.filter((m) => m.type === 'new_cloud_session').at(-1)?.repository ?? null,
+ ).toEqual({ owner: 'octocat', name: 'hello-world', branch: 'main' });
+
+ await expect(app.page.locator('.sheet-panel')).toBeHidden();
+ } finally {
+ await app.close();
+ }
+ });
+
+ test('remote sessions show a remote badge in the list', async ({ browser }) => {
+ const remoteSessions = [
+ { ...MOCK_SESSIONS[0], id: 'remote-1', title: 'Cloud refactor', isRemote: true },
+ ...MOCK_SESSIONS.slice(1),
+ ];
+ const app = await setupPage(browser, (msg, ws) => {
+ if (msg.type === 'list_sessions') {
+ ws.send(JSON.stringify({ type: 'sessions', sessions: remoteSessions }));
+ }
+ });
+ try {
+ await openSessionsSheet(app.page);
+ await expect(app.page.locator('.indicator-remote')).toBeVisible();
+ await expect(app.page.locator('.indicator-remote')).toHaveAttribute('aria-label', 'Remote session');
+ } finally {
+ await app.close();
+ }
+ });
+});
diff --git a/tests/responsive-chat.spec.ts b/tests/responsive-chat.spec.ts
index 25486e2..82968f0 100644
--- a/tests/responsive-chat.spec.ts
+++ b/tests/responsive-chat.spec.ts
@@ -1,7 +1,7 @@
import { test, expect, type Browser } from '@playwright/test';
import {
createAuthenticatedPage, mockWebSocket, goToChat, sendMessage,
- createMessageSequence,
+ createMessageSequence, openSidebar,
} from './helpers';
const MOBILE_VIEWPORT = { width: 390, height: 844 } as const;
@@ -33,7 +33,7 @@ async function expectCoreChatUI(page: AuthenticatedChat['page']) {
await expect(page.locator('.top-bar')).toBeVisible();
await expect(page.locator('.terminal')).toBeVisible();
await expect(page.locator('.input-area textarea')).toBeVisible();
- await expect(page.locator('button.send-btn')).toBeVisible();
+ await expect(page.locator('.toolbar-right button')).toBeVisible();
}
test.describe('Responsive — authenticated chat', () => {
@@ -82,10 +82,10 @@ test.describe('Responsive — authenticated chat', () => {
const { page, context } = await openAuthenticatedChat(browser, MOBILE_VIEWPORT);
try {
- await page.locator('button.hamburger-btn').click();
+ await openSidebar(page);
- await expect(page.locator('.sidebar-overlay')).toBeVisible();
- await expect(page.locator('.sidebar-panel')).toBeVisible();
+ await expect(page.locator('.sidebar-backdrop')).toBeVisible();
+ await expect(page.getByLabel('Sidebar navigation')).toBeVisible();
} finally {
await context.close();
}
@@ -95,18 +95,18 @@ test.describe('Responsive — authenticated chat', () => {
const { page, context } = await openAuthenticatedChat(browser, MOBILE_VIEWPORT);
try {
- await page.locator('button.hamburger-btn').click();
- await expect(page.locator('.sidebar-panel')).toBeVisible();
+ await openSidebar(page);
+ await expect(page.getByLabel('Sidebar navigation')).toHaveClass(/open/);
- await page.locator('.sidebar-overlay').click({
+ await page.locator('.sidebar-backdrop').click({
position: {
x: MOBILE_VIEWPORT.width - 20,
y: 100,
},
});
- await expect(page.locator('.sidebar-overlay')).toHaveCount(0);
- await expect(page.locator('.sidebar-panel')).toHaveCount(0);
+ await expect(page.locator('.sidebar-backdrop')).toHaveCount(0);
+ await expect(page.getByLabel('Sidebar navigation')).not.toHaveClass(/open/);
} finally {
await context.close();
}
@@ -141,9 +141,14 @@ test.describe('Responsive — authenticated chat', () => {
try {
await test.step(`checks top bar controls at ${label}`, async () => {
- await expect(page.locator('button.hamburger-btn')).toBeVisible();
- await expect(page.locator('button.model-pill')).toBeVisible();
- await expect(page.locator('button.newchat-btn')).toBeVisible();
+ if (viewport.width < 1024) {
+ await expect(page.getByRole('button', { name: 'Open menu' })).toBeVisible();
+ } else {
+ await expect(page.getByRole('button', { name: 'Open menu' })).toBeHidden();
+ }
+ await expect(page.getByRole('button', { name: 'Select model' })).toBeVisible();
+ await openSidebar(page);
+ await expect(page.getByRole('button', { name: 'New Chat' })).toBeVisible();
});
} finally {
await context.close();
diff --git a/tests/responsive.spec.ts b/tests/responsive.spec.ts
index a7d5fdc..a67b6ee 100644
--- a/tests/responsive.spec.ts
+++ b/tests/responsive.spec.ts
@@ -1,7 +1,7 @@
import { test, expect, type Browser } from '@playwright/test';
async function openLoginPage(browser: Browser, viewport: { width: number; height: number }) {
- const context = await browser.newContext({ viewport });
+ const context = await browser.newContext({ viewport, serviceWorkers: 'block' });
const page = await context.newPage();
await page.route('**/auth/device/start', (route) =>
@@ -23,6 +23,10 @@ async function openLoginPage(browser: Browser, viewport: { width: number; height
return { page, context };
}
+async function expectNoHorizontalOverflow(page: Awaited>['page'], width: number) {
+ await expect.poll(() => page.evaluate(() => document.body.scrollWidth)).toBeLessThanOrEqual(width);
+}
+
test.describe('Responsive — Login screen', () => {
test('login screen renders on small phone (320x568)', async ({ browser }) => {
const { page, context } = await openLoginPage(browser, { width: 320, height: 568 });
@@ -31,8 +35,7 @@ test.describe('Responsive — Login screen', () => {
await expect(page.locator('.device-code-text').first()).toBeVisible();
// No horizontal overflow
- const bodyWidth = await page.locator('body').evaluate((el) => el.scrollWidth);
- expect(bodyWidth).toBeLessThanOrEqual(320);
+ await expectNoHorizontalOverflow(page, 320);
await context.close();
});
@@ -59,8 +62,7 @@ test.describe('Responsive — general', () => {
test('no horizontal overflow at 320px', async ({ browser }) => {
const { page, context } = await openLoginPage(browser, { width: 320, height: 568 });
- const bodyWidth = await page.locator('body').evaluate((el) => el.scrollWidth);
- expect(bodyWidth).toBeLessThanOrEqual(320);
+ await expectNoHorizontalOverflow(page, 320);
await context.close();
});
@@ -68,8 +70,7 @@ test.describe('Responsive — general', () => {
test('page content fits within viewport at 375px', async ({ browser }) => {
const { page, context } = await openLoginPage(browser, { width: 375, height: 667 });
- const bodyWidth = await page.locator('body').evaluate((el) => el.scrollWidth);
- expect(bodyWidth).toBeLessThanOrEqual(375);
+ await expectNoHorizontalOverflow(page, 375);
await context.close();
});
diff --git a/tests/session-management.spec.ts b/tests/session-management.spec.ts
index 6224f6b..73643bb 100644
--- a/tests/session-management.spec.ts
+++ b/tests/session-management.spec.ts
@@ -3,6 +3,7 @@ import {
createAuthenticatedPage,
mockWebSocket,
goToChat,
+ openSidebar,
MOCK_SESSIONS,
} from './helpers';
@@ -120,11 +121,8 @@ async function createSessionManagementPage(
}
async function openSessionsSheet(page: Page) {
- await page.click('button.hamburger-btn');
- await expect(page.locator('.sidebar-overlay')).toBeVisible();
- await expect(page.locator('.sidebar-panel')).toBeVisible();
-
- await page.click('button.sidebar-action:has-text("Sessions")');
+ await openSidebar(page);
+ await page.getByRole('button', { name: 'Sessions' }).click();
await expect(page.locator('.sheet-overlay')).toBeVisible();
await expect(page.locator('.sheet-panel')).toBeVisible();
}
diff --git a/tests/settings.spec.ts b/tests/settings.spec.ts
index 72df77b..a920ce5 100644
--- a/tests/settings.spec.ts
+++ b/tests/settings.spec.ts
@@ -3,6 +3,7 @@ import {
createAuthenticatedPage,
mockWebSocket,
goToChat,
+ openSidebar,
MOCK_TOOLS,
MOCK_AGENTS,
} from './helpers';
@@ -11,7 +12,7 @@ interface MockSettings {
model: string;
mode: 'interactive' | 'plan' | 'autopilot';
reasoningEffort: 'low' | 'medium' | 'high' | 'xhigh';
- customInstructions: string;
+ additionalInstructions: string;
excludedTools: string[];
customTools: unknown[];
mcpServers: Array<{
@@ -41,7 +42,7 @@ function createDefaultSettings(overrides: Partial = {}): MockSetti
model: '',
mode: 'interactive',
reasoningEffort: 'medium',
- customInstructions: '',
+ additionalInstructions: '',
excludedTools: [],
customTools: [],
mcpServers: [],
@@ -102,10 +103,8 @@ async function setupSettingsPage(browser: Browser, options: SetupOptions = {}):
}
async function openSettings(page: Page) {
- await page.click('button.hamburger-btn');
- await expect(page.locator('.sidebar-panel')).toBeVisible();
-
- await page.click('button.sidebar-action:has-text("Settings")');
+ await openSidebar(page);
+ await page.getByRole('button', { name: 'Settings' }).click();
await expect(page.locator('.settings-overlay')).toBeVisible();
await expect(page.locator('.settings-panel')).toBeVisible();
@@ -121,14 +120,11 @@ test.describe('Settings', () => {
const { page } = app;
try {
- await page.click('button.hamburger-btn');
- await expect(page.locator('.sidebar-panel')).toBeVisible();
-
- await page.click('button.sidebar-action:has-text("Settings")');
+ await openSidebar(page);
+ await page.getByRole('button', { name: 'Settings' }).click();
await expect(page.locator('.settings-overlay')).toBeVisible();
await expect(page.locator('.settings-panel')).toBeVisible();
- await expect(page.locator('.sidebar-panel')).toHaveCount(0);
} finally {
await app.close();
}
@@ -150,12 +146,16 @@ test.describe('Settings', () => {
const app = await setupSettingsPage(browser);
const { page } = app;
const expectedSections = [
- 'Custom Instructions',
+ 'Additional Instructions',
'Tools',
'MCP Servers',
'Agents',
- 'Custom Tools',
+ 'Skills',
+ 'Extensions',
+ 'Prompts',
'Quota',
+ 'Notifications',
+ 'Remote Sessions',
'Compaction',
];
@@ -176,7 +176,7 @@ test.describe('Settings', () => {
test('expands and collapses an accordion section', async ({ browser }) => {
const app = await setupSettingsPage(browser);
const { page } = app;
- const instructionsButton = page.locator('button.settings-accordion-btn', { hasText: 'Custom Instructions' });
+ const instructionsButton = page.locator('button.settings-accordion-btn', { hasText: 'Additional Instructions' });
try {
await openSettings(page);
@@ -200,7 +200,7 @@ test.describe('Settings', () => {
test('keeps only one accordion section open at a time', async ({ browser }) => {
const app = await setupSettingsPage(browser);
const { page } = app;
- const instructionsButton = page.locator('button.settings-accordion-btn', { hasText: 'Custom Instructions' });
+ const instructionsButton = page.locator('button.settings-accordion-btn', { hasText: 'Additional Instructions' });
const toolsButton = page.getByRole('button', { name: /^Tools\b/ });
try {
@@ -223,14 +223,14 @@ test.describe('Settings', () => {
test('saves custom instructions', async ({ browser }) => {
const app = await setupSettingsPage(browser, {
- settings: { customInstructions: 'Keep answers concise.' },
+ settings: { additionalInstructions: 'Keep answers concise.' },
});
const { page, putPayloads } = app;
const instructionsText = 'Always explain code changes briefly and include validation steps.';
try {
await openSettings(page);
- await page.locator('button.settings-accordion-btn', { hasText: 'Custom Instructions' }).click();
+ await page.locator('button.settings-accordion-btn', { hasText: 'Additional Instructions' }).click();
const textarea = page.locator('textarea.settings-textarea');
await expect(textarea).toHaveValue('Keep answers concise.');
@@ -239,7 +239,7 @@ test.describe('Settings', () => {
await page.locator('.settings-accordion-body .action-btn.save').click();
await expect.poll(() => putPayloads.length).toBe(1);
- expect(putPayloads[0]?.customInstructions).toBe(instructionsText);
+ expect(putPayloads[0]?.additionalInstructions).toBe(instructionsText);
await expect(textarea).toHaveValue(instructionsText);
} finally {
await app.close();