Commit 34bba4e

[browser fixtures](../../apps/console/ui/e2e/fixtures.ts) load credentials inside the Playwright worker and authenticate

through the real form. Feature tests use `async ({ page, signIn })` and `await signIn()` (Developer), or

`await signIn('admin')`. Each worker reuses a separate in-memory session for each identity and verified UI/API/auth

target, for up to five minutes. Each test still has a fresh browser context; changed cookies, selected organizations and

other test state never update the cached seed. Use the fixture matching the intended role; do not ask the owner to

repeat login or create another identity before checking these fixtures.

Login, logout, revocation and session-expiry scenarios must use the fresh

[`signInBrowserUser(page, identity)`](../../apps/console/ui/e2e/sign-in.ts) helper instead of cached sessions. A failed

application request does not trigger a hidden login retry. Cached state is discarded when the worker ends and is never

saved to disk. Run `pnpm --filter @stacktape/console-ui test:e2e:sessions` and `test:e2e:privacy` after changing these

helpers; both qualifiers are offline.

There is no shared-dev authentication bypass. Synthetic identities belong to the planned isolated harness, not the live

dev API. Shared-dev tests remain serialized under a reservation; session reuse does not isolate server-side data.

Console login also does not authenticate GitHub/GitLab/Bitbucket provider sessions; follow the private guide for those

callbacks and approvals.

The public shared-control gallery is available now: `pnpm --filter @stacktape/ui-react test:e2e` runs Chromium against

real components and CSS; `pnpm --filter @stacktape/ui-react dev:e2e` opens the same synthetic gallery for inspection.

Add scenarios under [`packages/ui-react/e2e`](../../packages/ui-react/e2e), importing its `test` fixture. It owns a

loopback Vite server and temporary cache per worker, fresh contexts per test and external-traffic rejection. It does not

need Console or AWS. Use `--repeat-each=3 --workers=1` to check repeatability, then the default two workers to check

independent execution. Public CI runs this lane on Linux and retains synthetic failure artifacts for seven days. The

normal public gate does not require an installed browser.

snapshots. The current Console `signIn` fixture caches authenticated state in worker memory, separated by identity and

verified target, with fresh test contexts and a five-minute maximum seed age. Keep login/logout and revocation tests on

the fresh-login helper. Auth state files also contain secrets; do not save these Console sessions to disk. Loading

storage state does not make later HTTP traces safe: authenticated requests still carry tokens. Before changing these

settings or upgrading browser tools, run `pnpm --filter @stacktape/console-ui test:e2e:privacy`. A new agent CLI must be

qualified separately before giving it real credential-bearing flows; the runner's privacy test does not automatically

cover another tool. [Private browser procedure](../../apps/console/e2e/README.md#agent-browser-access).

"packages/ui-react": {

"entry": ["src/**/*.{ts,tsx}", "scripts/**/*.ts"],

"project": ["**/*.{ts,tsx}", "!e2e/**!"],

"vite": false

},

import { mkdtemp, rm } from 'node:fs/promises';

import { tmpdir } from 'node:os';

import { join } from 'node:path';

import { test as base } from '@playwright/test';

import { createServer, type ViteDevServer } from 'vite';

import galleryConfig from '../vite.e2e.config.ts';

export const test = base.extend<{ networkBoundary: void }, { galleryURL: string }>({

galleryURL: [

// Playwright requires a destructured first argument even when this fixture has no dependencies.

// oxlint-disable-next-line no-empty-pattern

async ({}, use) => {

const cacheDir = await mkdtemp(join(tmpdir(), 'stacktape-ui-gallery-'));

let server: ViteDevServer | undefined;

try {

server = await createServer({ ...galleryConfig, configFile: false, cacheDir });

await server.listen();

const address = server.httpServer?.address();

if (!address || typeof address === 'string' || address.address !== '127.0.0.1') {

throw new Error('The gallery must own a loopback HTTP listener.');

}

const url = `http://127.0.0.1:${address.port}`;

const response = await fetch(url, { signal: AbortSignal.timeout(10_000) });

if (!response.ok || !(await response.text()).includes('Shared UI gallery')) {

throw new Error('The gallery did not serve its expected entrypoint.');

}

await use(url);

} finally {

try {

await server?.close();

} finally {

await rm(cacheDir, { recursive: true, force: true });

}

}

},

{ scope: 'worker', timeout: 30_000 }

],

baseURL: async ({ galleryURL }, use) => use(galleryURL),

networkBoundary: [

async ({ context, galleryURL }, use) => {

const unexpectedOrigins = new Set<string>();

await context.route('**/*', async (route) => {

const origin = new URL(route.request().url()).origin;

if (origin === galleryURL) {

await route.continue();

} else {

unexpectedOrigins.add(origin);

await route.abort('blockedbyclient');

}

});

await context.routeWebSocket('**/*', (socket) => {

const origin = new URL(socket.url()).origin;

if (origin === galleryURL.replace('http:', 'ws:')) {

socket.connectToServer();

} else {

unexpectedOrigins.add(origin);

socket.close();

}

});

await use();

if (unexpectedOrigins.size) {

throw new Error(`The synthetic gallery attempted external traffic: ${[...unexpectedOrigins].join(', ')}`);

}

},

{ auto: true }

]

import { expect } from '@playwright/test';

import { test } from './fixtures.ts';

test('the gallery serves an interactive shared Dialog', async ({ page }) => {

await page.goto('/');

expect(await page.evaluate(() => localStorage.getItem('gallery-smoke'))).toBeNull();

await page.evaluate(() => localStorage.setItem('gallery-smoke', 'dialog case'));

await page.getByRole('button', { name: 'Open example dialog' }).click();

await expect(page.getByRole('dialog', { name: 'Example dialog' })).toBeVisible();

test('an independent gallery case starts with fresh browser state', async ({ page }) => {

await page.goto('/');

await expect(page.getByRole('heading', { name: 'Shared UI gallery' })).toBeVisible();

expect(await page.evaluate(() => localStorage.getItem('gallery-smoke'))).toBeNull();

await page.evaluate(() => localStorage.setItem('gallery-smoke', 'independent case'));

await expect(page.getByRole('dialog')).toHaveCount(0);

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Shared UI gallery</title>

</head>

<body>

<div id="root"></div>

<script type="module" src="/main.tsx"></script>

</body>

import { useState } from 'react';

import { createRoot } from 'react-dom/client';

import { Button } from '../../src/button/Button.tsx';

import { Dialog } from '../../src/dialog/Dialog.tsx';

import '../../src/styles.css';

function Gallery() {

const [open, setOpen] = useState(false);

return (

<main>

<h1>Shared UI gallery</h1>

<Button variant="primary" onClick={() => setOpen(true)}>

Open example dialog

</Button>

<Dialog

open={open}

onOpenChange={setOpen}

title="Example dialog"

actions={

<Button variant="secondary" onClick={() => setOpen(false)}>

Done

</Button>

}

>

<p>This dialog uses the shared component and stylesheet with synthetic content.</p>

<label htmlFor="example-name">Example name</label>

<input id="example-name" defaultValue="Example project" />

<Button variant="primary" disabled>

Unavailable action

</Button>

</Dialog>

</main>

);

const root = document.getElementById('root');

if (!root) throw new Error('The gallery root is missing.');

createRoot(root).render(<Gallery />);

{

"extends": "../tsconfig.json",

"include": ["./**/*.ts", "./**/*.tsx", "../playwright.config.ts", "../vite.e2e.config.ts"],

"exclude": [],

"compilerOptions": {

"types": ["bun", "vite/client"]

}

}