@vertesia/ui 1.5.0-dev.20260725.083715Z → 1.5.0-dev.20260806.125520Z

package/src/shell/login/SignInRecoveryStep.test.tsx

@@ -0,0 +1,112 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import SignInRecoveryStep from './SignInRecoveryStep';
+
+const translations: Record<string, string> = {
+    'auth.recovery.scopeProject.eyebrow': 'Link Unavailable',
+    'auth.recovery.scopeProject.title': 'Project not available',
+    'auth.recovery.scopeProject.body':
+        'You’re signed in, but the project in this link isn’t available. The link may be outdated, or you may not have access.',
+    'auth.recovery.scopeAccount.eyebrow': 'Link Unavailable',
+    'auth.recovery.scopeAccount.title': 'Account not available',
+    'auth.recovery.scopeAccount.body': 'Account unavailable body',
+    'auth.recovery.noAccessibleAccount.eyebrow': 'Account Required',
+    'auth.recovery.noAccessibleAccount.title': 'No account is available',
+    'auth.recovery.noAccessibleAccount.body': 'No accessible account body',
+    'auth.recovery.credential.eyebrow': 'Sign-In Required',
+    'auth.recovery.credential.title': 'Your sign-in could not be verified',
+    'auth.recovery.credential.body': 'Credential body',
+    'auth.recovery.service.eyebrow': 'Service Unavailable',
+    'auth.recovery.service.title': "We couldn't complete sign-in",
+    'auth.recovery.service.body': 'Service body',
+    'auth.recovery.continue': 'Continue to Vertesia',
+    'auth.recovery.tryAgain': 'Try again',
+    'auth.recovery.useDifferentAccount': 'Use a different account',
+    'auth.recovery.supportPrefix': 'If you need help, contact',
+    'auth.recovery.technicalDetails': 'Technical details',
+    'auth.recovery.errorCode': 'Error code',
+    'auth.recovery.httpStatus': 'HTTP status',
+    'auth.recovery.requestedAccount': 'Requested account',
+    'auth.recovery.requestedProject': 'Requested project',
+    'auth.recovery.errorMessage': 'Error message',
+    'auth.returning.notYou': 'Not you?',
+};
+
+vi.mock('@vertesia/ui/i18n', () => ({
+    useUITranslation: () => ({ t: (key: string) => translations[key] ?? key }),
+}));
+
+describe('SignInRecoveryStep', () => {
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('shows project-safe copy, focuses the primary action, and prevents duplicate submissions', () => {
+        const onContinue = vi.fn();
+        render(<SignInRecoveryStep kind="scopeProject" onContinue={onContinue} onUseDifferentAccount={vi.fn()} />);
+
+        expect(screen.getByText('Project not available')).toBeTruthy();
+        expect(screen.getByText(/project in this link isn’t available/)).toBeTruthy();
+        const continueButton = screen.getByRole('button', { name: 'Continue to Vertesia' });
+        expect(document.activeElement).toBe(continueButton);
+
+        fireEvent.click(continueButton);
+        fireEvent.click(continueButton);
+
+        expect(onContinue).toHaveBeenCalledOnce();
+        expect((continueButton as HTMLButtonElement).disabled).toBe(true);
+    });
+
+    it('omits continue for an identity with no accessible account and includes support guidance', () => {
+        const onUseDifferentAccount = vi.fn();
+        render(<SignInRecoveryStep kind="noAccessibleAccount" onUseDifferentAccount={onUseDifferentAccount} />);
+
+        expect(screen.queryByRole('button', { name: 'Continue to Vertesia' })).toBeNull();
+        expect(screen.getByText('No account is available')).toBeTruthy();
+        expect(screen.getByRole('link', { name: 'support@vertesiahq.com' }).getAttribute('href')).toBe(
+            'mailto:support@vertesiahq.com',
+        );
+        expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Use a different account' }));
+    });
+
+    it('shows submitted selectors and the normalized server error in collapsed technical details', () => {
+        render(
+            <SignInRecoveryStep
+                details={{
+                    accountId: 'apple',
+                    errorCode: 'requested_scope_unavailable',
+                    message: 'The requested account or project is not available.',
+                    projectId: 'banana',
+                    status: 403,
+                }}
+                kind="scopeProject"
+                onContinue={vi.fn()}
+                onUseDifferentAccount={vi.fn()}
+            />,
+        );
+
+        const disclosure = screen.getByText('Technical details').closest('details');
+        expect(disclosure?.hasAttribute('open')).toBe(false);
+        expect(screen.getByText('requested_scope_unavailable')).toBeTruthy();
+        expect(screen.getByText('apple')).toBeTruthy();
+        expect(screen.getByText('banana')).toBeTruthy();
+        expect(screen.getByText('The requested account or project is not available.')).toBeTruthy();
+    });
+
+    it('reuses the returning-user identity row for the authenticated credential', () => {
+        const onUseDifferentAccount = vi.fn();
+        render(
+            <SignInRecoveryStep
+                identity={{ email: 'leon@example.com', name: 'Leon Ruggiero' }}
+                kind="scopeProject"
+                onContinue={vi.fn()}
+                onUseDifferentAccount={onUseDifferentAccount}
+            />,
+        );
+
+        expect(screen.getByText('Leon Ruggiero')).toBeTruthy();
+        expect(screen.getByText('leon@example.com')).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: 'Not you?' }));
+        expect(onUseDifferentAccount).toHaveBeenCalledOnce();
+    });
+});

package/src/shell/login/SignInRecoveryStep.tsx

@@ -0,0 +1,177 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { AlertTriangle } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import {
+    SignInAccountRow,
+    SignInIconBadge,
+    SignInInitialsBadge,
+    SignInStepButton,
+    SignInStepHeader,
+    SignInStepLayout,
+} from './SignInPrimitives';
+import { emailInitial, firstNameFromEmail } from './signInUtils';
+
+export type SignInRecoveryKind = 'scopeProject' | 'scopeAccount' | 'noAccessibleAccount' | 'credential' | 'service';
+
+export interface SignInRecoveryDetails {
+    accountId?: string;
+    errorCode?: string;
+    message: string;
+    projectId?: string;
+    status?: number;
+}
+
+export interface SignInRecoveryIdentity {
+    email: string;
+    name?: string;
+}
+
+interface SignInRecoveryStepProps {
+    details?: SignInRecoveryDetails;
+    identity?: SignInRecoveryIdentity;
+    kind: SignInRecoveryKind;
+    onContinue?: () => void;
+    onUseDifferentAccount: () => void;
+}
+
+export default function SignInRecoveryStep({
+    details,
+    identity,
+    kind,
+    onContinue,
+    onUseDifferentAccount,
+}: SignInRecoveryStepProps) {
+    const { t } = useUITranslation();
+    const [submitting, setSubmitting] = useState(false);
+    const initialButtonRef = useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        initialButtonRef.current?.focus();
+    }, []);
+
+    const isScopeFailure = kind === 'scopeProject' || kind === 'scopeAccount';
+    let copy: { eyebrow: string; title: string; body: string };
+    if (kind === 'scopeProject') {
+        copy = {
+            eyebrow: t('auth.recovery.scopeProject.eyebrow'),
+            title: t('auth.recovery.scopeProject.title'),
+            body: t('auth.recovery.scopeProject.body'),
+        };
+    } else if (kind === 'scopeAccount') {
+        copy = {
+            eyebrow: t('auth.recovery.scopeAccount.eyebrow'),
+            title: t('auth.recovery.scopeAccount.title'),
+            body: t('auth.recovery.scopeAccount.body'),
+        };
+    } else if (kind === 'noAccessibleAccount') {
+        copy = {
+            eyebrow: t('auth.recovery.noAccessibleAccount.eyebrow'),
+            title: t('auth.recovery.noAccessibleAccount.title'),
+            body: t('auth.recovery.noAccessibleAccount.body'),
+        };
+    } else if (kind === 'credential') {
+        copy = {
+            eyebrow: t('auth.recovery.credential.eyebrow'),
+            title: t('auth.recovery.credential.title'),
+            body: t('auth.recovery.credential.body'),
+        };
+    } else {
+        copy = {
+            eyebrow: t('auth.recovery.service.eyebrow'),
+            title: t('auth.recovery.service.title'),
+            body: t('auth.recovery.service.body'),
+        };
+    }
+
+    const runAction = (action: () => void) => {
+        if (submitting) return;
+        setSubmitting(true);
+        action();
+    };
+
+    return (
+        <SignInStepLayout>
+            <div role="alert" aria-live="assertive">
+                <SignInIconBadge>
+                    <AlertTriangle className="size-7 text-attention" aria-hidden="true" />
+                </SignInIconBadge>
+                <SignInStepHeader eyebrow={copy.eyebrow} title={copy.title} body={copy.body} />
+            </div>
+
+            {identity && (
+                <SignInAccountRow
+                    badge={<SignInInitialsBadge initials={emailInitial(identity.email)} />}
+                    title={identity.name || firstNameFromEmail(identity.email)}
+                    subtitle={identity.email}
+                    actionLabel={t('auth.returning.notYou')}
+                    onAction={onUseDifferentAccount}
+                />
+            )}
+
+            <div className="flex flex-col gap-2">
+                {onContinue && (
+                    <SignInStepButton
+                        ref={initialButtonRef}
+                        className="w-full"
+                        disabled={submitting}
+                        onClick={() => runAction(onContinue)}
+                    >
+                        {isScopeFailure ? t('auth.recovery.continue') : t('auth.recovery.tryAgain')}
+                    </SignInStepButton>
+                )}
+                <SignInStepButton
+                    ref={onContinue ? undefined : initialButtonRef}
+                    variant={onContinue ? 'ghost' : 'primary'}
+                    disabled={submitting}
+                    onClick={() => runAction(onUseDifferentAccount)}
+                >
+                    {t('auth.recovery.useDifferentAccount')}
+                </SignInStepButton>
+                {(kind === 'noAccessibleAccount' || kind === 'service') && (
+                    <p className="text-center text-xs text-muted">
+                        {t('auth.recovery.supportPrefix')}{' '}
+                        <a className="text-info" href="mailto:support@vertesiahq.com">
+                            support@vertesiahq.com
+                        </a>
+                    </p>
+                )}
+            </div>
+
+            {details && (
+                <details className="rounded-lg border border-mixer-muted/30 bg-mixer-muted/10 px-4 py-3 text-sm">
+                    <summary className="cursor-pointer font-medium text-muted marker:text-muted focus-visible:outline-2 focus-visible:outline-offset-2">
+                        {t('auth.recovery.technicalDetails')}
+                    </summary>
+                    <dl className="mt-3 grid grid-cols-[max-content_minmax(0,1fr)] gap-x-3 gap-y-2 text-xs">
+                        {details.errorCode && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.errorCode')}</dt>
+                                <dd className="wrap-break-word font-mono">{details.errorCode}</dd>
+                            </>
+                        )}
+                        {details.status && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.httpStatus')}</dt>
+                                <dd className="font-mono">{details.status}</dd>
+                            </>
+                        )}
+                        {details.accountId && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.requestedAccount')}</dt>
+                                <dd className="wrap-break-word font-mono">{details.accountId}</dd>
+                            </>
+                        )}
+                        {details.projectId && (
+                            <>
+                                <dt className="text-muted">{t('auth.recovery.requestedProject')}</dt>
+                                <dd className="wrap-break-word font-mono">{details.projectId}</dd>
+                            </>
+                        )}
+                        <dt className="text-muted">{t('auth.recovery.errorMessage')}</dt>
+                        <dd className="wrap-break-word font-mono">{details.message}</dd>
+                    </dl>
+                </details>
+            )}
+        </SignInStepLayout>
+    );
+}

package/src/shell/login/SigninScreen.tsx

@@ -1,12 +1,22 @@
-import type { SignupData, SignupPayload } from '@vertesia/common';
+import { REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE, type SignupData, type SignupPayload } from '@vertesia/common';
 import { Env } from '@vertesia/ui/env';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { RegionTag } from '@vertesia/ui/layout';
-import { RestrictedEnvironmentError, UserNotFoundError, useUserSession, useUXTracking } from '@vertesia/ui/session';
+import {
+    AuthenticationServiceError,
+    CredentialError,
+    NoAccessibleAccountError,
+    RequestedScopeUnavailableError,
+    RestrictedEnvironmentError,
+    UserNotFoundError,
+    useUserSession,
+    useUXTracking,
+} from '@vertesia/ui/session';
 import { useCallback, useEffect, useState } from 'react';
 import SignInAuthPending from './SignInAuthPending';
 import SignInEmailStep, { type TenantInfo } from './SignInEmailStep';
 import SignInProvidersStep from './SignInProvidersStep';
+import SignInRecoveryStep, { type SignInRecoveryKind } from './SignInRecoveryStep';
 import SignInRestrictedEnvStep from './SignInRestrictedEnvStep';
 import SignInReturningStep from './SignInReturningStep';
 import SignInTenantBlockedStep from './SignInTenantBlockedStep';
@@ -65,7 +75,30 @@ function matchesPathPrefix(pathname: string, prefix?: string | string[]) {
     });
 }
 
-type Mode = 'email' | 'providers' | 'tenant' | 'blocked' | 'returning' | 'pending' | 'signup' | 'restricted';
+type Mode =
+    | 'email'
+    | 'providers'
+    | 'tenant'
+    | 'blocked'
+    | 'returning'
+    | 'pending'
+    | 'signup'
+    | 'restricted'
+    | 'scopeUnavailable'
+    | 'noAccessibleAccount'
+    | 'credentialFailure'
+    | 'serviceFailure';
+
+function isDedicatedAuthError(error: Error): boolean {
+    return (
+        error instanceof UserNotFoundError ||
+        error instanceof RestrictedEnvironmentError ||
+        error instanceof RequestedScopeUnavailableError ||
+        error instanceof NoAccessibleAccountError ||
+        error instanceof CredentialError ||
+        error instanceof AuthenticationServiceError
+    );
+}
 
 function SigninScreenImpl({
     isNested = false,
@@ -87,8 +120,20 @@ function SigninScreenImpl({
     const [tenant, setTenant] = useState<TenantInfo | undefined>(undefined);
     const [pendingProvider, setPendingProvider] = useState<ProviderId | null>(null);
 
+    const recoveryIdentity =
+        authError instanceof RequestedScopeUnavailableError || authError instanceof NoAccessibleAccountError
+            ? authError.identity
+            : undefined;
+    const matchingStoredIdentity =
+        recoveryIdentity && storedSession?.email.toLowerCase() === recoveryIdentity.email.toLowerCase()
+            ? storedSession
+            : undefined;
+    const displayedRecoveryIdentity = recoveryIdentity
+        ? { email: recoveryIdentity.email, name: recoveryIdentity.name ?? matchingStoredIdentity?.name }
+        : undefined;
+
     useEffect(() => {
-        if (!preservePath) {
+        if (!preservePath && !isLoading && !authError) {
             // Reset to the app's mount root, not the bare origin. A gateway-mounted app carries a
             // served `<base href>` deep mount; collapsing to '/' drops the app off that mount (the
             // bare origin serves no app) and the address bar can no longer be reloaded. This effect
@@ -99,7 +144,7 @@ function SigninScreenImpl({
             const mountRoot = new URL(document.baseURI).pathname || '/';
             history.replaceState({}, '', mountRoot);
         }
-    }, [preservePath]);
+    }, [authError, isLoading, preservePath]);
 
     // Route based on authError surfaced by the session.
     useEffect(() => {
@@ -108,6 +153,14 @@ function SigninScreenImpl({
             setMode('signup');
         } else if (authError instanceof RestrictedEnvironmentError) {
             setMode('restricted');
+        } else if (authError instanceof RequestedScopeUnavailableError) {
+            setMode('scopeUnavailable');
+        } else if (authError instanceof NoAccessibleAccountError) {
+            setMode('noAccessibleAccount');
+        } else if (authError instanceof CredentialError) {
+            setMode('credentialFailure');
+        } else if (authError instanceof AuthenticationServiceError) {
+            setMode('serviceFailure');
         } else if (isInviteRequiredError(authError)) {
             const pending = readPendingSignin();
             if (pending) setEmail(pending.email);
@@ -176,6 +229,37 @@ function SigninScreenImpl({
         void resetSignInState();
     }, []);
 
+    const useDifferentAccount = useCallback(() => {
+        Env.logger.info('Authentication recovery action selected', {
+            vertesia: { recovery_action: 'use_different_account' },
+        });
+        setStoredSession(null);
+        setEmail('');
+        setTenant(undefined);
+        setMode('email');
+        void resetSignInState().finally(() => signOut());
+    }, [signOut]);
+
+    const continueWithSanitizedScope = useCallback(() => {
+        if (!(authError instanceof RequestedScopeUnavailableError)) return;
+        Env.logger.info('Authentication recovery action selected', {
+            vertesia: {
+                error_code: REQUESTED_SCOPE_UNAVAILABLE_ERROR_CODE,
+                selector_source: authError.selectorSource,
+                requested_scope: authError.requestedScope,
+                recovery_action: 'continue_sanitized',
+            },
+        });
+        window.location.replace(authError.recoveryUrl ?? window.location.href);
+    }, [authError]);
+
+    const retryAuthentication = useCallback(() => {
+        Env.logger.info('Authentication recovery action selected', {
+            vertesia: { recovery_action: 'retry' },
+        });
+        window.location.reload();
+    }, []);
+
     // Submits the signup form to /auth/signup, then redirects into the app.
     const onSignup = (data: SignupData, fbToken: string) => {
         const payload: SignupPayload = { signupData: data, firebaseToken: fbToken };
@@ -190,10 +274,7 @@ function SigninScreenImpl({
     };
 
     const shouldHideTransientAuthError =
-        suppressAuthError &&
-        authError !== undefined &&
-        !(authError instanceof UserNotFoundError) &&
-        !(authError instanceof RestrictedEnvironmentError);
+        suppressAuthError && authError !== undefined && !isDedicatedAuthError(authError);
 
     if (isLoading || user || shouldHideTransientAuthError) return null;
 
@@ -210,6 +291,49 @@ function SigninScreenImpl({
         );
     } else if (mode === 'restricted') {
         content = <SignInRestrictedEnvStep onUseDifferentEmail={startOver} />;
+    } else if (mode === 'scopeUnavailable' && authError instanceof RequestedScopeUnavailableError) {
+        const kind: SignInRecoveryKind = authError.requestedScope === 'project' ? 'scopeProject' : 'scopeAccount';
+        content = (
+            <SignInRecoveryStep
+                details={{
+                    accountId: authError.accountId,
+                    errorCode: authError.errorCode,
+                    message: authError.message,
+                    projectId: authError.projectId,
+                    status: authError.status,
+                }}
+                identity={displayedRecoveryIdentity}
+                kind={kind}
+                onContinue={continueWithSanitizedScope}
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
+    } else if (mode === 'noAccessibleAccount' && authError instanceof NoAccessibleAccountError) {
+        content = (
+            <SignInRecoveryStep
+                details={{ errorCode: authError.errorCode, message: authError.message, status: authError.status }}
+                identity={displayedRecoveryIdentity}
+                kind="noAccessibleAccount"
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
+    } else if (mode === 'credentialFailure' && authError instanceof CredentialError) {
+        content = (
+            <SignInRecoveryStep
+                details={{ errorCode: authError.errorCode, message: authError.message, status: authError.status }}
+                kind="credential"
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
+    } else if (mode === 'serviceFailure' && authError instanceof AuthenticationServiceError) {
+        content = (
+            <SignInRecoveryStep
+                details={{ errorCode: authError.errorCode, message: authError.message, status: authError.status }}
+                kind="service"
+                onContinue={retryAuthentication}
+                onUseDifferentAccount={useDifferentAccount}
+            />
+        );
     } else if (mode === 'signup' && !localStorage.getItem('tenantName')) {
         content = <SignupForm onSignup={onSignup} goBack={startOver} />;
     } else if (mode === 'tenant' && tenant) {
@@ -247,25 +371,19 @@ function SigninScreenImpl({
 
                     {content}
 
-                    {authError &&
-                        !(authError instanceof UserNotFoundError) &&
-                        !(authError instanceof RestrictedEnvironmentError) &&
-                        !isInviteRequiredError(authError) && (
-                            <div className="mt-6 max-w-[420px] text-center text-sm text-muted">
-                                <div>
-                                    {t('auth.signInError')}
-                                    <br />
-                                    {t('auth.signInErrorContact')}
-                                    <a className="text-info mx-1" href="mailto:support@vertesiahq.com">
-                                        support@vertesiahq.com
-                                    </a>
-                                    {t('auth.signInErrorPersists')}
-                                    <pre className="mt-2 text-xs">
-                                        {t('auth.error', { message: authError.message })}
-                                    </pre>
-                                </div>
+                    {authError && !isDedicatedAuthError(authError) && !isInviteRequiredError(authError) && (
+                        <div className="mt-6 max-w-[420px] text-center text-sm text-muted">
+                            <div>
+                                {t('auth.signInError')}
+                                <br />
+                                {t('auth.signInErrorContact')}
+                                <a className="text-info mx-1" href="mailto:support@vertesiahq.com">
+                                    support@vertesiahq.com
+                                </a>
+                                {t('auth.signInErrorPersists')}
                             </div>
-                        )}
+                        </div>
+                    )}
 
                     <div className="flex items-center gap-5 mt-10 text-xs text-muted-foreground">
                         <a href="https://vertesiahq.com/privacy" className="hover:text-foreground transition">

package/src/widgets/markdown/ArtifactEditingSurface.test.tsx

@@ -13,6 +13,10 @@ import {
 } from './ArtifactEditingSurface.js';
 import type { MarkdownEditingAction } from './CollaborativeMarkdownRenderer.js';
 
+// Document mode is loaded through React.lazy(). CI transforms many test files concurrently, so the
+// first document-mode test can legitimately take longer than Testing Library's one-second default.
+const LAZY_EDITOR_WAIT = { timeout: 5_000 } as const;
+
 const mocks = vi.hoisted(() => {
     const getArtifactContent = vi.fn();
     const updateArtifactContent = vi.fn();
@@ -151,7 +155,7 @@ describe('ArtifactEditingSurface', () => {
         const user = userEvent.setup();
         renderSurface({ viewMode: 'document' });
 
-        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' });
+        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' }, LAZY_EDITOR_WAIT);
         await user.click(editor);
         await user.type(editor, ' revised');
 
@@ -174,7 +178,7 @@ describe('ArtifactEditingSurface', () => {
             onSendMessage: vi.fn(),
         });
 
-        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' });
+        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' }, LAZY_EDITOR_WAIT);
         expect(editor.getAttribute('contenteditable')).toBe('false');
         expect(screen.queryByRole('button', { name: 'Comment on selection' })).toBeNull();
     });
@@ -188,7 +192,7 @@ describe('ArtifactEditingSurface', () => {
             toolbarStatus: <span>AI is editing</span>,
         });
 
-        const button = await screen.findByRole('button', { name: 'Send changes to agent' });
+        const button = await screen.findByRole('button', { name: 'Send changes to agent' }, LAZY_EDITOR_WAIT);
         expect(screen.getByRole('toolbar').contains(button)).toBe(true);
         expect(button.previousElementSibling?.textContent).toBe('AI is editing');
         expect(button).toHaveProperty('disabled', false);
@@ -203,7 +207,7 @@ describe('ArtifactEditingSurface', () => {
         > = { current: null };
         renderSurface({ viewMode: 'document', flushChangesRef });
 
-        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' });
+        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' }, LAZY_EDITOR_WAIT);
         await user.click(editor);
         await user.type(editor, ' immediate');
 
@@ -228,7 +232,7 @@ describe('ArtifactEditingSurface', () => {
         });
         const view = renderSurface({ viewMode: 'document' });
 
-        fireEvent.click(await screen.findByRole('button', { name: 'Edit Markdown source' }));
+        fireEvent.click(await screen.findByRole('button', { name: 'Edit Markdown source' }, LAZY_EDITOR_WAIT));
         const sourceEditor = screen.getByRole('textbox', { name: 'Markdown source editor' });
         fireEvent.focus(sourceEditor);
         fireEvent.change(sourceEditor, {
@@ -249,7 +253,7 @@ describe('ArtifactEditingSurface', () => {
     it('shows a navigable ruler for changes from the original document', async () => {
         renderSurface({ viewMode: 'document', baselineContent: 'Different paragraph.' });
 
-        await screen.findByRole('textbox', { name: 'Markdown document editor' });
+        await screen.findByRole('textbox', { name: 'Markdown document editor' }, LAZY_EDITOR_WAIT);
         expect(screen.getByRole('navigation', { name: 'Change ruler' })).not.toBeNull();
         expect(screen.getByRole('button', { name: 'Change near line 1' })).not.toBeNull();
     });
@@ -257,7 +261,7 @@ describe('ArtifactEditingSurface', () => {
     it('keeps the focused editor base generation when the agent refreshes the artifact', async () => {
         const user = userEvent.setup();
         const view = renderSurface({ viewMode: 'document' });
-        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' });
+        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' }, LAZY_EDITOR_WAIT);
         await user.click(editor);
 
         mocks.getArtifactContent.mockResolvedValueOnce({
@@ -311,7 +315,7 @@ describe('ArtifactEditingSurface', () => {
             .mockResolvedValueOnce({ path: 'drafts/document.md', generation: 'generation-merged' });
 
         const view = renderSurface({ viewMode: 'document' });
-        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' });
+        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' }, LAZY_EDITOR_WAIT);
         await user.click(editor);
 
         view.rerender(
@@ -363,7 +367,7 @@ describe('ArtifactEditingSurface', () => {
         mocks.updateArtifactContent.mockRejectedValueOnce({ status: 412 });
         renderSurface({ viewMode: 'document' });
 
-        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' });
+        const editor = await screen.findByRole('textbox', { name: 'Markdown document editor' }, LAZY_EDITOR_WAIT);
         await user.click(editor);
         await user.type(editor, ' local edit');