tabwright 1.0.0

package/dist/options-page.test.js

@@ -0,0 +1,773 @@
+import fs from 'node:fs';
+import http from 'node:http';
+import path from 'node:path';
+import { afterAll, beforeAll, describe, expect, test } from 'vitest';
+import { cleanupTestContext, setupTestContext } from './test-utils.js';
+const TEST_PORT = 19984;
+let testCtx = null;
+function getExtensionDistRoot() {
+    const candidates = [
+        path.join(process.cwd(), 'extension', `dist-${TEST_PORT}`),
+        path.resolve(process.cwd(), '..', 'extension', `dist-${TEST_PORT}`),
+    ];
+    const distRoot = candidates.find((candidate) => {
+        return fs.existsSync(path.join(candidate, 'src', 'options.html'));
+    });
+    if (!distRoot) {
+        throw new Error(`Could not find extension dist for port ${TEST_PORT}`);
+    }
+    return distRoot;
+}
+async function createStaticServer(rootDir) {
+    const openSockets = new Set();
+    const server = http.createServer((req, res) => {
+        const url = new URL(req.url || '/', 'http://127.0.0.1');
+        const pathname = url.pathname === '/' ? '/src/options.html' : url.pathname;
+        const filePath = path.resolve(rootDir, `.${pathname}`);
+        if (filePath !== rootDir && !filePath.startsWith(`${rootDir}${path.sep}`)) {
+            res.writeHead(403);
+            res.end('forbidden');
+            return;
+        }
+        if (!fs.existsSync(filePath)) {
+            res.writeHead(404);
+            res.end('not found');
+            return;
+        }
+        const contentType = filePath.endsWith('.js')
+            ? 'text/javascript'
+            : filePath.endsWith('.html')
+                ? 'text/html'
+                : filePath.endsWith('.css')
+                    ? 'text/css'
+                    : 'application/octet-stream';
+        res.writeHead(200, { 'Content-Type': contentType });
+        res.end(fs.readFileSync(filePath));
+    });
+    server.on('connection', (socket) => {
+        openSockets.add(socket);
+        socket.on('close', () => {
+            openSockets.delete(socket);
+        });
+    });
+    await new Promise((resolve) => {
+        server.listen(0, '127.0.0.1', () => {
+            resolve();
+        });
+    });
+    const address = server.address();
+    if (!address || typeof address === 'string') {
+        throw new Error('Failed to start static server');
+    }
+    return {
+        baseUrl: `http://127.0.0.1:${address.port}`,
+        close: async () => {
+            openSockets.forEach((socket) => {
+                socket.destroy();
+            });
+            await new Promise((resolve, reject) => {
+                server.close((error) => {
+                    if (error) {
+                        reject(error);
+                        return;
+                    }
+                    resolve();
+                });
+            });
+        },
+    };
+}
+describe('extension options page', () => {
+    beforeAll(async () => {
+        testCtx = await setupTestContext({ port: TEST_PORT, tempDirPrefix: 'options-page-test-' });
+    }, 600000);
+    afterAll(async () => {
+        await cleanupTestContext(testCtx);
+        testCtx = null;
+    });
+    test('shows DOM replays and loads selected playback from the options page', async () => {
+        if (!testCtx) {
+            throw new Error('Test context is not initialized');
+        }
+        const distRoot = getExtensionDistRoot();
+        const staticServer = await createStaticServer(distRoot);
+        let replayEventsRequested = false;
+        const replay = {
+            id: 'replay-options-smoke',
+            path: '/Users/test/.tabwright/rrweb-recordings/replay-options-smoke.json',
+            startedAt: Date.now() - 2000,
+            savedAt: Date.now(),
+            duration: 2000,
+            size: 2048,
+            eventCount: 2,
+            tabId: 7,
+            sessionId: 'pw-tab-options',
+            url: 'https://example.com/materials/new',
+        };
+        const recordings = Array.from({ length: 30 }, (_, index) => {
+            return {
+                ...replay,
+                id: index === 0 ? replay.id : `replay-options-smoke-${index}`,
+                path: index === 0 ? replay.path : `/Users/test/.tabwright/rrweb-recordings/replay-options-smoke-${index}.json`,
+                startedAt: replay.startedAt - index * 1000,
+                savedAt: replay.savedAt - index * 1000,
+                tabId: replay.tabId + index,
+            };
+        });
+        const replayEvents = [
+            {
+                type: 4,
+                timestamp: replay.startedAt,
+                data: { href: replay.url, width: 1280, height: 720 },
+            },
+            {
+                type: 2,
+                timestamp: replay.startedAt + 100,
+                data: { node: { id: 1, type: 0, childNodes: [] } },
+            },
+            {
+                type: 3,
+                timestamp: replay.startedAt + 200,
+                data: {
+                    source: 0,
+                    adds: [],
+                    removes: [],
+                    texts: [{ id: 404, value: 'missing node update' }],
+                    attributes: [],
+                },
+            },
+            {
+                type: 5,
+                timestamp: replay.startedAt + 5000,
+                data: { tag: 'end', payload: {} },
+            },
+        ];
+        const page = await testCtx.browserContext.newPage();
+        const missingNodeConsoleWarnings = [];
+        page.on('console', (message) => {
+            if (message.type() === 'warning' && message.text().includes('Node with id')) {
+                missingNodeConsoleWarnings.push(message.text());
+            }
+        });
+        await page.setViewportSize({ width: 1280, height: 720 });
+        try {
+            await testCtx.browserContext.grantPermissions(['clipboard-read', 'clipboard-write'], {
+                origin: staticServer.baseUrl,
+            });
+            await page.route(`http://127.0.0.1:${TEST_PORT}/**`, async (route) => {
+                const request = route.request();
+                const url = new URL(request.url());
+                const corsHeaders = {
+                    'access-control-allow-origin': '*',
+                    'access-control-allow-methods': 'GET,POST,OPTIONS',
+                    'access-control-allow-headers': 'content-type',
+                };
+                if (request.method() === 'OPTIONS') {
+                    await route.fulfill({ status: 204, headers: corsHeaders, body: '' });
+                    return;
+                }
+                if (url.pathname === '/rrweb-recordings') {
+                    await route.fulfill({
+                        status: 200,
+                        headers: { ...corsHeaders, 'content-type': 'application/json' },
+                        body: JSON.stringify({ recordings }),
+                    });
+                    return;
+                }
+                if (url.pathname === `/rrweb-recordings/${replay.id}/events`) {
+                    replayEventsRequested = true;
+                    await route.fulfill({
+                        status: 200,
+                        headers: { ...corsHeaders, 'content-type': 'application/json' },
+                        body: JSON.stringify({ recording: replay, events: replayEvents }),
+                    });
+                    return;
+                }
+                await route.fulfill({ status: 404, headers: corsHeaders, body: 'not found' });
+            });
+            await page.goto(`${staticServer.baseUrl}/src/options.html`);
+            await page.locator('.language-button[data-language="en"]').click();
+            const recordingItem = page.locator('.recording-item').first();
+            await recordingItem.waitFor({ timeout: 10000 });
+            await expect
+                .poll(async () => {
+                return await recordingItem.textContent();
+            })
+                .toContain('2 events');
+            const replaysList = page.locator('#replays-list');
+            await expect
+                .poll(async () => {
+                return await replaysList.evaluate((element) => {
+                    const list = element;
+                    return list.scrollHeight > list.clientHeight;
+                });
+            })
+                .toBe(true);
+            await replaysList.evaluate((element) => {
+                const list = element;
+                list.scrollTop = list.scrollHeight;
+            });
+            await expect
+                .poll(async () => {
+                return await replaysList.evaluate((element) => {
+                    const list = element;
+                    return list.scrollTop > 0;
+                });
+            })
+                .toBe(true);
+            await replaysList.evaluate((element) => {
+                const list = element;
+                list.scrollTop = 0;
+            });
+            await recordingItem.locator('.recording-select').click();
+            await expect
+                .poll(() => {
+                return replayEventsRequested;
+            })
+                .toBe(true);
+            await expect
+                .poll(async () => {
+                return await page.locator('#status-text').textContent();
+            })
+                .toContain('Replay ready');
+            await expect
+                .poll(async () => {
+                return await page.locator('#replay-controls').isVisible();
+            })
+                .toBe(true);
+            await expect
+                .poll(async () => {
+                return await page.locator('#replay-play-toggle').textContent();
+            })
+                .toBe('Play');
+            await expect
+                .poll(async () => {
+                return Number(await page.locator('#replay-timeline').inputValue());
+            })
+                .toBe(0);
+            await page.locator('#replay-play-toggle').click();
+            await expect
+                .poll(async () => {
+                return await page.locator('#replay-play-toggle').textContent();
+            })
+                .toBe('Pause');
+            await expect
+                .poll(async () => {
+                return await page.locator('#replay-warning').textContent();
+            })
+                .toContain('1 DOM update');
+            expect(missingNodeConsoleWarnings).toEqual([]);
+            await page.locator('#replay-play-toggle').click();
+            await expect
+                .poll(async () => {
+                return await page.locator('#replay-play-toggle').textContent();
+            })
+                .toBe('Play');
+            await expect
+                .poll(async () => {
+                return await page.locator('#replay-details').textContent();
+            })
+                .toContain('replay-options-smoke');
+            await expect
+                .poll(async () => {
+                return await page.locator('#replay-details').textContent();
+            })
+                .toContain('https://example.com/materials/new');
+            await recordingItem.getByRole('button', { name: 'Copy for AI' }).click();
+            const replayContext = await page.evaluate(async () => {
+                const clipboardNavigator = navigator;
+                return await clipboardNavigator.clipboard.readText();
+            });
+            expect(replayContext).toContain('Replay ID: replay-options-smoke');
+            expect(replayContext).toContain(replay.path);
+            await page.locator('#replay-player .replayer-wrapper').waitFor();
+            await expect
+                .poll(async () => {
+                const playerBox = await page.locator('#replay-player').boundingBox();
+                const wrapperBox = await page.locator('#replay-player .replayer-wrapper').boundingBox();
+                if (!playerBox || !wrapperBox) {
+                    return false;
+                }
+                return wrapperBox.width <= playerBox.width + 1 && wrapperBox.height <= playerBox.height + 1;
+            })
+                .toBe(true);
+        }
+        finally {
+            await testCtx.browserContext.clearPermissions();
+            await page.close();
+            await staticServer.close();
+        }
+    }, 30000);
+    test('shows capabilities with clear status labels and focused actions', async () => {
+        if (!testCtx) {
+            throw new Error('Test context is not initialized');
+        }
+        const distRoot = getExtensionDistRoot();
+        const staticServer = await createStaticServer(distRoot);
+        const capabilityBase = {
+            id: 'query-user',
+            title: 'Query User',
+            description: 'Look up a user by email.',
+            status: 'trusted',
+            runtime: 'browser',
+            match: ['https://admin.example.com/users*'],
+            routingHint: 'exact-match-direct-run',
+            permissions: ['browser.read', 'browser.write'],
+            sideEffect: 'write',
+            requiresConfirmation: true,
+            whenToUse: ['Use when the user asks to look up an admin user by email.'],
+            whenNotToUse: ['Do not use for public profile lookup.'],
+            tags: ['admin'],
+            inputSchema: {
+                type: 'object',
+                properties: {
+                    email: { type: 'string' },
+                },
+                required: ['email'],
+            },
+            outputSchema: {
+                type: 'object',
+                properties: {
+                    id: { type: 'string' },
+                },
+            },
+            location: 'project',
+            dir: '/Users/test/project/.tabwright/capabilities/query-user',
+            autonomousInvocation: {
+                allowed: false,
+                reasons: ['sideEffect is write', 'requires confirmation'],
+            },
+            recentRuns: [
+                {
+                    id: 'run-1',
+                    status: 'success',
+                    durationMs: 42,
+                    inputHash: 'abc',
+                    createdAt: '2026-07-07T00:00:00.000Z',
+                },
+            ],
+            agentSkill: {
+                target: 'codex',
+                draftExists: true,
+                draftPath: '/Users/test/project/.tabwright/capabilities/query-user/agent-skills/codex/SKILL.md',
+                installedExists: false,
+                installedPath: '/Users/test/.codex/skills/query-user/SKILL.md',
+                initCommand: 'tabwright capability skill init query-user',
+                showCommand: 'tabwright capability skill show query-user',
+                installCommand: 'tabwright capability skill install query-user',
+            },
+        };
+        const trustedNextCommand = 'tabwright capability run query-user --browser user --input-json \'{"email":"from-contract@example.com"}\' --confirm query-user --json';
+        let authRefreshAttempts = 0;
+        let capabilityAuthState = {
+            type: 'cookie',
+            status: 'missing',
+            canRefresh: true,
+            browserUrls: ['https://admin.example.com/'],
+            requiredCookieNames: ['SESSION'],
+            cookieNames: [],
+            refreshCommand: 'tabwright capability refresh-auth query-user --browser user --json',
+        };
+        const capability = {
+            ...capabilityBase,
+            authState: capabilityAuthState,
+            lifecycle: {
+                stage: 'trusted',
+                nextAction: 'run',
+                nextCommand: trustedNextCommand,
+                contractHealth: {
+                    state: 'healthy',
+                    checkedAt: '2026-07-07T00:00:00.000Z',
+                    reasons: [],
+                },
+            },
+        };
+        const driftedNextCommand = 'tabwright capability show drifted-user --json';
+        const driftedCapability = {
+            ...capabilityBase,
+            id: 'drifted-user',
+            title: 'Drifted User Query',
+            status: 'draft',
+            autonomousInvocation: {
+                allowed: false,
+                reasons: ['current contract failed conformance'],
+            },
+            lifecycle: {
+                stage: 'drifted',
+                nextAction: 'repair',
+                nextCommand: driftedNextCommand,
+                contractHealth: {
+                    state: 'drifted',
+                    checkedAt: '2026-07-08T00:00:00.000Z',
+                    reasons: ['output.userId must be string'],
+                },
+            },
+        };
+        const disabledCapability = {
+            ...capabilityBase,
+            id: 'legacy-disabled',
+            title: 'Legacy Disabled',
+            status: 'disabled',
+            autonomousInvocation: {
+                allowed: false,
+                reasons: ['status is disabled'],
+            },
+        };
+        const legacyTrustedCapability = {
+            ...capabilityBase,
+            id: 'legacy-trusted',
+            title: 'Legacy Trusted',
+            sideEffect: 'read',
+            requiresConfirmation: false,
+            autonomousInvocation: {
+                allowed: true,
+                reasons: [],
+            },
+        };
+        const historicalTrustedNextCommand = "tabwright capability run historical-trusted --input-json '{}' --json";
+        const historicalTrustedCapability = {
+            ...legacyTrustedCapability,
+            id: 'historical-trusted',
+            title: 'Historical Trusted',
+            lifecycle: {
+                stage: 'trusted',
+                nextAction: 'run',
+                nextCommand: historicalTrustedNextCommand,
+                contractHealth: {
+                    state: 'unknown',
+                    reasons: [],
+                },
+            },
+        };
+        const futureLifecycleCapability = {
+            ...legacyTrustedCapability,
+            id: 'future-lifecycle',
+            title: 'Future Lifecycle',
+            recentRuns: [{ status: 'future-run-format' }],
+            lifecycle: {
+                stage: 'reviewed',
+                nextAction: 'approve',
+                nextCommand: 'tabwright capability trust future-lifecycle',
+                contractHealth: {
+                    state: 'future-health',
+                    reasons: [],
+                },
+            },
+        };
+        const page = await testCtx.browserContext.newPage();
+        await page.setViewportSize({ width: 1280, height: 720 });
+        page.setDefaultTimeout(10000);
+        async function readClipboard() {
+            return await page.evaluate(async () => {
+                const clipboardNavigator = navigator;
+                return await clipboardNavigator.clipboard.readText();
+            });
+        }
+        try {
+            await testCtx.browserContext.grantPermissions(['clipboard-read', 'clipboard-write'], {
+                origin: staticServer.baseUrl,
+            });
+            await page.route(`http://127.0.0.1:${TEST_PORT}/**`, async (route) => {
+                const request = route.request();
+                const url = new URL(request.url());
+                const corsHeaders = {
+                    'access-control-allow-origin': '*',
+                    'access-control-allow-methods': 'GET,POST,OPTIONS',
+                    'access-control-allow-headers': 'content-type',
+                };
+                if (request.method() === 'OPTIONS') {
+                    await route.fulfill({ status: 204, headers: corsHeaders, body: '' });
+                    return;
+                }
+                if (url.pathname === '/rrweb-recordings') {
+                    await route.fulfill({
+                        status: 200,
+                        headers: { ...corsHeaders, 'content-type': 'application/json' },
+                        body: JSON.stringify({ recordings: [] }),
+                    });
+                    return;
+                }
+                if (url.pathname === '/capabilities') {
+                    await route.fulfill({
+                        status: 200,
+                        headers: { ...corsHeaders, 'content-type': 'application/json' },
+                        body: JSON.stringify({
+                            cwd: '/Users/test/project',
+                            capabilities: [
+                                { ...capability, authState: capabilityAuthState },
+                                driftedCapability,
+                                disabledCapability,
+                                legacyTrustedCapability,
+                                historicalTrustedCapability,
+                                futureLifecycleCapability,
+                            ],
+                        }),
+                    });
+                    return;
+                }
+                if (url.pathname === '/capabilities/query-user/auth/refresh' && request.method() === 'POST') {
+                    authRefreshAttempts += 1;
+                    if (authRefreshAttempts === 1) {
+                        await route.fulfill({
+                            status: 409,
+                            headers: { ...corsHeaders, 'content-type': 'application/json' },
+                            body: JSON.stringify({
+                                code: 'no_enabled_tab',
+                                error: 'enable Tabwright on a browser tab before authenticating this capability',
+                            }),
+                        });
+                        return;
+                    }
+                    capabilityAuthState = {
+                        ...capabilityAuthState,
+                        status: 'authenticated',
+                        cookieNames: ['SESSION'],
+                        refreshedAt: '2026-07-13T10:00:00.000Z',
+                        expiresAt: '2026-07-20T10:00:00.000Z',
+                    };
+                    await route.fulfill({
+                        status: 200,
+                        headers: { ...corsHeaders, 'content-type': 'application/json' },
+                        body: JSON.stringify({ capability: 'query-user', saved: true, authState: capabilityAuthState }),
+                    });
+                    return;
+                }
+                await route.fulfill({ status: 404, headers: corsHeaders, body: 'not found' });
+            });
+            await page.goto(`${staticServer.baseUrl}/src/options.html`, { waitUntil: 'domcontentloaded' });
+            await page.locator('.language-button[data-language="en"]').click();
+            const skillsTab = page.locator('.tab-button[data-tab="skills"]');
+            await skillsTab.waitFor();
+            await skillsTab.click();
+            const capabilityItem = page.locator('.skill-item').filter({ hasText: 'Query User' });
+            await capabilityItem.waitFor({ timeout: 10000 });
+            await capabilityItem.click();
+            await expect
+                .poll(async () => {
+                return await page.locator('#skill-detail').textContent();
+            })
+                .toContain('query-user');
+            await expect
+                .poll(async () => {
+                return await page.locator('#skill-detail').textContent();
+            })
+                .toContain('Needs your confirmation');
+            await expect
+                .poll(async () => {
+                return await page.locator('#skill-detail').textContent();
+            })
+                .toContain('AI instructions need publishing');
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('Contract healthy');
+            await page.locator('.lifecycle-card').getByRole('button', { name: 'Copy next step' }).click();
+            const runCommand = await readClipboard();
+            expect(runCommand).toBe(trustedNextCommand);
+            await page.getByRole('button', { name: 'Copy for AI' }).click();
+            const aiContext = await readClipboard();
+            expect(aiContext).toContain('Capability ID: query-user');
+            expect(aiContext).toContain('Look up a user by email.');
+            const authCard = page.locator('.auth-card');
+            await expect
+                .poll(async () => {
+                return await authCard.textContent();
+            })
+                .toContain('Not authenticated');
+            await authCard.getByRole('button', { name: 'Authenticate with current Chrome' }).click();
+            const authDialog = page.locator('.auth-dialog');
+            await expect
+                .poll(async () => {
+                return await authDialog.textContent();
+            })
+                .toContain('admin.example.com');
+            await authDialog.getByRole('button', { name: 'Allow and authenticate' }).click();
+            await expect.poll(() => authRefreshAttempts).toBe(1);
+            await expect
+                .poll(async () => {
+                return await authCard.locator('.auth-error').textContent();
+            })
+                .toContain('Enable Tabwright on a normal browser tab');
+            await authCard.getByRole('button', { name: 'Authenticate with current Chrome' }).click();
+            await page.locator('.auth-dialog').getByRole('button', { name: 'Allow and authenticate' }).click();
+            await expect.poll(() => authRefreshAttempts).toBe(2);
+            await expect
+                .poll(async () => {
+                return await page.locator('.auth-card').textContent();
+            })
+                .toContain('Authenticated');
+            await page.locator('.skill-item').filter({ hasText: 'Drifted User Query' }).click();
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('Repair contract drift');
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('output.userId must be string');
+            await page.locator('.lifecycle-card').getByRole('button', { name: 'Copy next step' }).click();
+            expect(await readClipboard()).toBe(driftedNextCommand);
+            await page.locator('.skill-item').filter({ hasText: 'Legacy Disabled' }).click();
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('Enable as draft');
+            await page.locator('.lifecycle-card').getByRole('button', { name: 'Copy next step' }).click();
+            expect(await readClipboard()).toBe("tabwright capability draft 'legacy-disabled'");
+            await page.locator('.skill-item').filter({ hasText: 'Legacy Trusted' }).click();
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('Not yet checked for usability');
+            await page.locator('.lifecycle-card').getByRole('button', { name: 'Copy next step' }).click();
+            expect(await readClipboard()).toContain("tabwright capability run 'legacy-trusted'");
+            await page.locator('.skill-item').filter({ hasText: 'Historical Trusted' }).click();
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('Not yet checked for usability');
+            await page.locator('.lifecycle-card').getByRole('button', { name: 'Copy next step' }).click();
+            expect(await readClipboard()).toBe(historicalTrustedNextCommand);
+            await page.locator('.skill-item').filter({ hasText: 'Future Lifecycle' }).click();
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('This extension cannot interpret the capability lifecycle');
+            await expect
+                .poll(async () => {
+                return await page.locator('#skill-detail').textContent();
+            })
+                .not.toContain('future-run-format');
+            await page.locator('.lifecycle-card').getByRole('button', { name: 'Copy next step' }).click();
+            expect(await readClipboard()).toBe("tabwright capability describe 'future-lifecycle' --json");
+            await page.locator('.skill-item').filter({ hasText: 'Drifted User Query' }).click();
+            await page.locator('.language-button[data-language="zh_CN"]').click();
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('下一步：重新检查');
+            await expect
+                .poll(async () => {
+                return await page.locator('.lifecycle-card').textContent();
+            })
+                .toContain('配置发生变化 · 检查于');
+            expect(await page.locator('.lifecycle-card').textContent()).not.toContain('$action$');
+        }
+        finally {
+            await testCtx.browserContext.clearPermissions();
+            await page.close();
+            await staticServer.close();
+        }
+    }, 30000);
+    test('shows a persistent degraded warning for stale relay review endpoints and clears it after recovery', async () => {
+        if (!testCtx) {
+            throw new Error('Test context is not initialized');
+        }
+        const distRoot = getExtensionDistRoot();
+        const staticServer = await createStaticServer(distRoot);
+        let reviewEndpointsAvailable = false;
+        const page = await testCtx.browserContext.newPage();
+        page.setDefaultTimeout(10000);
+        try {
+            await page.route(`http://127.0.0.1:${TEST_PORT}/**`, async (route) => {
+                const request = route.request();
+                const url = new URL(request.url());
+                const corsHeaders = {
+                    'access-control-allow-origin': '*',
+                    'access-control-allow-methods': 'GET,POST,OPTIONS',
+                    'access-control-allow-headers': 'content-type',
+                };
+                if (request.method() === 'OPTIONS') {
+                    await route.fulfill({ status: 204, headers: corsHeaders, body: '' });
+                    return;
+                }
+                if (!reviewEndpointsAvailable) {
+                    await route.fulfill({ status: 404, headers: corsHeaders, body: 'not found' });
+                    return;
+                }
+                if (url.pathname === '/rrweb-recordings') {
+                    await route.fulfill({
+                        status: 200,
+                        headers: { ...corsHeaders, 'content-type': 'application/json' },
+                        body: JSON.stringify({ recordings: [] }),
+                    });
+                    return;
+                }
+                if (url.pathname === '/capabilities') {
+                    await route.fulfill({
+                        status: 200,
+                        headers: { ...corsHeaders, 'content-type': 'application/json' },
+                        body: JSON.stringify({ cwd: '/Users/test/project', capabilities: [] }),
+                    });
+                    return;
+                }
+                await route.fulfill({ status: 404, headers: corsHeaders, body: 'not found' });
+            });
+            await page.goto(`${staticServer.baseUrl}/src/options.html`, { waitUntil: 'domcontentloaded' });
+            await page.locator('.language-button[data-language="en"]').click();
+            await expect
+                .poll(async () => {
+                return await page.locator('#relay-review-warning').isVisible();
+            })
+                .toBe(true);
+            await expect
+                .poll(async () => {
+                return await page.locator('#relay-review-warning').textContent();
+            })
+                .toContain('Your files were not deleted');
+            await expect
+                .poll(async () => {
+                return await page.locator('#recordings-count').textContent();
+            })
+                .toBe('–');
+            await page.locator('.tab-button[data-tab="skills"]').click();
+            await expect
+                .poll(async () => {
+                return await page.locator('#skills-count').textContent();
+            })
+                .toBe('–');
+            await expect
+                .poll(async () => {
+                return await page.locator('#relay-review-warning').isVisible();
+            })
+                .toBe(true);
+            reviewEndpointsAvailable = true;
+            await page.locator('#refresh-button').click();
+            await expect
+                .poll(async () => {
+                return await page.locator('#skills-count').textContent();
+            })
+                .toBe('0');
+            await expect
+                .poll(async () => {
+                return await page.locator('#relay-review-warning').isVisible();
+            })
+                .toBe(true);
+            await page.locator('.tab-button[data-tab="recordings"]').click();
+            await page.locator('#refresh-button').click();
+            await expect
+                .poll(async () => {
+                return await page.locator('#recordings-count').textContent();
+            })
+                .toBe('0');
+            await expect
+                .poll(async () => {
+                return await page.locator('#relay-review-warning').isVisible();
+            })
+                .toBe(false);
+        }
+        finally {
+            await page.close();
+            await staticServer.close();
+        }
+    }, 30000);
+});
+//# sourceMappingURL=options-page.test.js.map