@vertesia/ui 1.6.0-dev.20260918.090710Z → 1.6.0-dev.20260923.085325Z

package/src/shell/BrandedAuthScreens.test.tsx

@@ -9,6 +9,7 @@ import {
     BrandedPermissionLoadingScreen,
     BrandedSignInScreen,
 } from './BrandedAuthScreens';
+import SignInAuthPending from './login/SignInAuthPending';
 import { SignInFlowSteps, useSignInFlow } from './login/SignInFlow';
 import { DefaultSignInScreen, type SignInRecoveryMode } from './login/SigninScreen';
 import { DefaultAuthLoadingScreen } from './SplashScreen';
@@ -41,6 +42,31 @@ function SignInPreview() {
 }
 
 describe('configuration-driven auth screens', () => {
+    it('keeps the configured loading logo through the Firebase provider handoff', () => {
+        const brand = {
+            name: 'Workspace',
+            loadingIcon: { light: '/workspace-light.svg', dark: '/workspace-dark.svg' },
+        };
+        const cancel = vi.fn();
+        const view = render(
+            <AppBrandingProvider branding={brand}>
+                <BrandedAuthLoadingScreen />
+            </AppBrandingProvider>,
+        );
+        const loadingIcons = Array.from(view.container.querySelectorAll('img'), (img) => img.getAttribute('src'));
+        view.rerender(
+            <AppBrandingProvider branding={brand}>
+                <SignInAuthPending provider="google" onCancel={cancel} />
+            </AppBrandingProvider>,
+        );
+        expect(
+            Array.from(screen.getByRole('status').querySelectorAll('img'), (img) => img.getAttribute('src')),
+        ).toEqual(loadingIcons);
+        expect(loadingIcons).toEqual(['/workspace-light.svg', '/workspace-dark.svg']);
+        fireEvent.click(screen.getByRole('button'));
+        expect(cancel).toHaveBeenCalledOnce();
+    });
+
     it('keeps brand copy local to each shell and preserves the shared translations', () => {
         const original = i18nInstance.t('auth.email.title', { ns: NAMESPACE });
         render(

package/src/shell/BrandedAuthScreens.tsx

@@ -1,12 +1,13 @@
 import { DefaultPermissionLoadingScreen, type PermissionLoadingScreenProps } from '@vertesia/ui/features';
 import { UITranslationOverrides } from '@vertesia/ui/i18n';
-import { createContext, type ReactNode, useContext, useEffect, useId, useMemo, useState } from 'react';
+import { type ReactNode, useContext, useId, useMemo } from 'react';
 import { type AppBranding, renderBrandStyles } from '../boot/branding.js';
+import { BrandedLoadingIndicator, BrandingContext, BrandLoadingIcon } from './BrandedLoadingIndicator';
 import { DefaultSignInScreen, type SignInScreenViewProps } from './login/SigninScreen';
-import { type AuthLoadingScreenProps, DefaultAuthLoadingScreen, LoadingAnimation } from './SplashScreen';
+import { type AuthLoadingScreenProps, DefaultAuthLoadingScreen } from './SplashScreen';
 import type { AuthScreens } from './VertesiaShell';
 
-const BrandingContext = createContext<AppBranding>({ name: '' });
+export { BrandedLoadingIndicator } from './BrandedLoadingIndicator';
 
 export function AppBrandingProvider({ branding, children }: { branding: AppBranding; children: ReactNode }) {
     const id = useId().replace(/[^a-zA-Z0-9_-]/g, '');
@@ -30,20 +31,6 @@ export function AppBrandingProvider({ branding, children }: { branding: AppBrand
     );
 }
 
-function BrandLoadingIcon({ brand }: { brand: AppBranding }) {
-    if (!brand.loadingIcon) return null;
-    return (
-        <>
-            <img src={brand.loadingIcon.light} alt="" className="w-10 h-auto rounded-full block dark:hidden" />
-            <img
-                src={brand.loadingIcon.dark ?? brand.loadingIcon.light}
-                alt=""
-                className="w-10 h-auto rounded-full hidden dark:block"
-            />
-        </>
-    );
-}
-
 export function BrandedAuthLoadingScreen({ loadingIcon }: AuthLoadingScreenProps) {
     const brand = useContext(BrandingContext);
     return (
@@ -92,26 +79,3 @@ export const brandedAuthScreens: AuthScreens = {
     Loading: BrandedAuthLoadingScreen,
     Permissions: BrandedPermissionLoadingScreen,
 };
-
-/** Brand-aware loading indicator that stays inside its container instead of covering the app shell. */
-export function BrandedLoadingIndicator({ loadingIcon, delayMs = 0 }: AuthLoadingScreenProps & { delayMs?: number }) {
-    const brand = useContext(BrandingContext);
-    const [visible, setVisible] = useState(delayMs <= 0);
-    useEffect(() => {
-        if (delayMs <= 0) {
-            setVisible(true);
-            return;
-        }
-        setVisible(false);
-        const timer = setTimeout(() => setVisible(true), delayMs);
-        return () => clearTimeout(timer);
-    }, [delayMs]);
-    if (!visible) return null;
-    return (
-        <div role="status" aria-label={brand.copy?.loading ?? 'Loading'}>
-            <LoadingAnimation
-                loadingIcon={loadingIcon ?? (brand.loadingIcon ? <BrandLoadingIcon brand={brand} /> : undefined)}
-            />
-        </div>
-    );
-}

package/src/shell/BrandedLoadingIndicator.tsx

@@ -0,0 +1,42 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import type { AppBranding } from '../boot/branding.js';
+import { type AuthLoadingScreenProps, LoadingAnimation } from './SplashScreen';
+
+export const BrandingContext = createContext<AppBranding>({ name: '' });
+
+export function BrandLoadingIcon({ brand }: { brand: AppBranding }) {
+    if (!brand.loadingIcon) return null;
+    return (
+        <>
+            <img src={brand.loadingIcon.light} alt="" className="vertesia-loading-icon block dark:hidden" />
+            <img
+                src={brand.loadingIcon.dark ?? brand.loadingIcon.light}
+                alt=""
+                className="vertesia-loading-icon hidden dark:block"
+            />
+        </>
+    );
+}
+
+/** Brand-aware loading indicator that stays inside its container instead of covering the app shell. */
+export function BrandedLoadingIndicator({ loadingIcon, delayMs = 0 }: AuthLoadingScreenProps & { delayMs?: number }) {
+    const brand = useContext(BrandingContext);
+    const [visible, setVisible] = useState(delayMs <= 0);
+    useEffect(() => {
+        if (delayMs <= 0) {
+            setVisible(true);
+            return;
+        }
+        setVisible(false);
+        const timer = setTimeout(() => setVisible(true), delayMs);
+        return () => clearTimeout(timer);
+    }, [delayMs]);
+    if (!visible) return null;
+    return (
+        <div role="status" aria-label={brand.copy?.loading ?? 'Loading'}>
+            <LoadingAnimation
+                loadingIcon={loadingIcon ?? (brand.loadingIcon ? <BrandLoadingIcon brand={brand} /> : undefined)}
+            />
+        </div>
+    );
+}

package/src/shell/SplashScreen.tsx

@@ -1,5 +1,6 @@
 import { useUserSession } from '@vertesia/ui/session';
 import type { ComponentType, ReactNode } from 'react';
+import { LOADING_INDICATOR_STYLES } from '../boot/loading.js';
 
 export interface AuthLoadingScreenProps {
     loadingIcon?: ReactNode;
@@ -81,10 +82,9 @@ function LoadingIcon() {
 /** Shared logo motion for full-screen and in-content loading states. */
 export function LoadingAnimation({ loadingIcon }: AuthLoadingScreenProps) {
     return (
-        <div className="animate-[var(--vertesia-loading-animation,spin_4s_linear_infinite)] motion-reduce:animate-none">
-            <div className="animate-[var(--vertesia-loading-pulse-animation,pulse_2s_cubic-bezier(0.4,0,0.6,1)_infinite)] motion-reduce:animate-none rounded-full bg-transparent">
-                {loadingIcon || <LoadingIcon />}
-            </div>
+        <div className="vertesia-loading-motion">
+            <style>{LOADING_INDICATOR_STYLES}</style>
+            {loadingIcon || <LoadingIcon />}
         </div>
     );
 }

package/src/shell/apps/iframe-auth.test.ts

@@ -82,7 +82,7 @@ describe('iframe host authentication', () => {
         expect(resolveIframeHostOrigin()).toBe('http://localhost:5173');
     });
 
-    it('ignores an empty early response and waits for a usable host token', async () => {
+    it.each([false, true])('settles a denied or expired host response immediately (expired=%s)', async (expired) => {
         const requests: unknown[] = [];
         const parentWindow = { postMessage: (message: unknown) => requests.push(message) } as unknown as Window;
         Object.defineProperty(window, 'parent', { configurable: true, value: parentWindow });
@@ -98,21 +98,18 @@ describe('iframe host authentication', () => {
 
         window.dispatchEvent(
             new MessageEvent('message', {
-                data: { type: IFRAME_AUTH_RESPONSE, requestId: request.requestId },
+                data: {
+                    type: IFRAME_AUTH_RESPONSE,
+                    requestId: request.requestId,
+                    ...(expired ? { token: 'expired', expiresAt: Date.now() - 1 } : {}),
+                },
                 origin: 'https://cloud.vertesia.io',
                 source: parentWindow,
             }),
         );
         await Promise.resolve();
-        expect(settled).toBe(false);
+        expect(settled).toBe(true);
 
-        window.dispatchEvent(
-            new MessageEvent('message', {
-                data: { type: IFRAME_AUTH_RESPONSE, requestId: request.requestId, token: 'fresh-token' },
-                origin: 'https://cloud.vertesia.io',
-                source: parentWindow,
-            }),
-        );
-        await expect(tokenPromise).resolves.toBe('fresh-token');
+        await expect(tokenPromise).resolves.toBeUndefined();
     });
 });

package/src/shell/apps/iframe-auth.ts

@@ -19,6 +19,8 @@ export interface IframeAuthResponse {
     type: typeof IFRAME_AUTH_RESPONSE;
     requestId: string;
     token?: string;
+    /** Unix epoch milliseconds. */
+    expiresAt?: number;
 }
 
 export interface IframeAppContextRequest {
@@ -178,7 +180,14 @@ export function requestIframeHostAuthToken(timeoutMs = 5000): Promise<string | u
             if (event.source !== window.parent || event.origin !== parentOrigin || !isIframeAuthResponse(event.data)) {
                 return;
             }
-            if (event.data.requestId === requestId && event.data.token) finish(event.data.token);
+            if (event.data.requestId === requestId) {
+                const expires = event.data.expiresAt;
+                finish(
+                    expires !== undefined && (!Number.isFinite(expires) || expires <= Date.now())
+                        ? undefined
+                        : event.data.token,
+                );
+            }
         };
         const request = { type: IFRAME_AUTH_REQUEST, requestId } satisfies IframeAuthRequest;
         const sendRequest = () => {

package/src/shell/index.tsx

@@ -1,3 +1,4 @@
+export { vertesiaBranding } from '../boot/branding.js';
 export * from './AuthScreenPreview';
 export * from './apps/index';
 export * from './BrandedAuthScreens';

package/src/shell/login/SignInAuthPending.tsx

@@ -1,5 +1,5 @@
-import { Spinner } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
+import { BrandedLoadingIndicator } from '../BrandedLoadingIndicator';
 import { providerIcon } from './SignInIcons';
 import { SignInIconBadge, SignInStepButton, SignInStepHeader, SignInStepLayout } from './SignInPrimitives';
 import { type ProviderId, providerLabel } from './signInUtils';
@@ -29,7 +29,7 @@ export default function SignInAuthPending({ provider, onCancel }: SignInAuthPend
 
             <div className="w-full flex flex-col gap-2">
                 <div className="flex justify-center">
-                    <Spinner />
+                    <BrandedLoadingIndicator />
                 </div>
                 <span>{t('auth.pending.authenticating')}</span>
                 {onCancel && (

package/src/shell/login/SignInEmailStep.tsx

@@ -1,9 +1,9 @@
 import type { UIResolvedTenant } from '@vertesia/common';
-import { Spinner } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { setFirebaseTenant } from '@vertesia/ui/session';
 import { ArrowRight } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import { BrandedLoadingIndicator } from '../BrandedLoadingIndicator';
 import { SignInEmailField, SignInStepButton, SignInStepHeader, SignInStepLayout } from './SignInPrimitives';
 import { isValidEmail } from './signInUtils';
 
@@ -73,7 +73,9 @@ export default function SignInEmailStep({ initialEmail, onProceed }: SignInEmail
                         aria-label={t('auth.pending.authenticating')}
                         className="h-[42px] flex items-center justify-center"
                     >
-                        <Spinner />
+                        <div aria-hidden="true">
+                            <BrandedLoadingIndicator />
+                        </div>
                     </div>
                 ) : (
                     <SignInStepButton type="submit">

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

@@ -0,0 +1,111 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Env } from '@vertesia/ui/env';
+import { afterEach, beforeEach, expect, it, vi } from 'vitest';
+import { vertesiaBranding } from '../../boot/branding';
+import { BrandingContext } from '../BrandedLoadingIndicator';
+import { TerminalLogin } from './TerminalLogin';
+
+const mocks = vi.hoisted(() => ({ exchange: vi.fn(), token: vi.fn(), projects: vi.fn() }));
+const account = { id: 'account-a', name: 'Account A' };
+const project = { id: 'project-a', name: 'Project A', account: account.id };
+const session = {
+    user: { sub: 'user-a' },
+    account,
+    project,
+    accounts: [account],
+    client: { projects: { list: mocks.projects } },
+    get rawAuthToken() {
+        return mocks.token();
+    },
+};
+vi.mock('@vertesia/ui/session', () => ({
+    useUserSession: () => session,
+    fetchComposableTokenFromVertesiaToken: mocks.exchange,
+}));
+vi.mock('@vertesia/ui/router', () => ({ useLocation: () => window.location }));
+vi.mock('@vertesia/ui/i18n', async (original) => ({
+    ...(await original<typeof import('@vertesia/ui/i18n')>()),
+    useUITranslation: () => ({ t: (key: string) => key }),
+}));
+vi.mock('@vertesia/ui/core', async (original) => ({
+    ...(await original<typeof import('@vertesia/ui/core')>()),
+    useToast: () => vi.fn(),
+}));
+
+beforeEach(() => {
+    Env.init({
+        version: 'test',
+        isLocalDev: true,
+        isDocker: false,
+        type: 'development',
+        name: 'test',
+        endpoints: {
+            studio: 'https://studio.example.test',
+            zeno: 'https://zeno.example.test',
+            sts: 'https://branch-sts.example.test',
+        },
+    });
+    history.replaceState({}, '', '/cli?redirect_uri=http%3A%2F%2Flocalhost%3A49369&code=1716&profile=custom');
+    mocks.exchange.mockReset().mockResolvedValue('cli-token');
+    mocks.token.mockReset();
+    mocks.projects.mockReset().mockResolvedValue([project]);
+    vi.stubGlobal('fetch', vi.fn().mockResolvedValue(new Response('{}')));
+});
+afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+});
+
+it.each(['oauth-session', 'firebase-session', 'central-session'])(
+    'exchanges the active %s and returns the deployment STS to custom CLI profiles',
+    async (token) => {
+        mocks.token.mockResolvedValue(token);
+        render(<TerminalLogin />);
+        fireEvent.click(await screen.findByRole('button', { name: 'login.terminal.authorizeClient' }));
+        await waitFor(() => expect(fetch).toHaveBeenCalledOnce());
+        expect(mocks.exchange).toHaveBeenCalledWith(token, account.id, project.id, 86400);
+        const [, init] = vi.mocked(fetch).mock.calls[0];
+        expect(JSON.parse(init?.body as string)).toMatchObject({
+            token: 'cli-token',
+            profile: 'custom',
+            account: account.id,
+            project: project.id,
+            oauth_server_url: 'https://branch-sts.example.test',
+        });
+    },
+);
+
+it('does not send a credential to the CLI when the exchange fails', async () => {
+    mocks.token.mockResolvedValue('oauth-session');
+    mocks.exchange.mockRejectedValue(new Error('Exchange denied'));
+    render(<TerminalLogin />);
+    fireEvent.click(await screen.findByRole('button', { name: 'login.terminal.authorizeClient' }));
+    await waitFor(() => expect(mocks.exchange).toHaveBeenCalledOnce());
+    expect(fetch).not.toHaveBeenCalled();
+});
+
+it('uses the shared full-screen branded loader while projects load', () => {
+    mocks.projects.mockReturnValue(new Promise(() => {}));
+    render(
+        <BrandingContext.Provider value={vertesiaBranding}>
+            <TerminalLogin />
+        </BrandingContext.Provider>,
+    );
+    const status = screen.getByRole('status');
+    expect(status.style.position).toBe('fixed');
+    expect(status.style.inset).toBe('0px');
+    expect(status.querySelector('.vertesia-loading-motion')).not.toBeNull();
+    expect(status.querySelector('img.vertesia-loading-icon')).not.toBeNull();
+});
+
+it('uses the shared sign-in page shell for the authorization form', async () => {
+    render(
+        <BrandingContext.Provider value={vertesiaBranding}>
+            <TerminalLogin />
+        </BrandingContext.Provider>,
+    );
+    await screen.findByRole('button', { name: 'login.terminal.authorizeClient' });
+    expect(screen.getByText('auth.privacyPolicy')).toBeTruthy();
+    expect(screen.getAllByAltText('Vertesia')).toHaveLength(2);
+    expect(screen.queryByRole('status')).toBeNull();
+});

package/src/shell/login/TerminalLogin.tsx

@@ -4,22 +4,20 @@ import {
     Center,
     ErrorBox,
     errorMessage,
+    FormItem,
     Input,
     SelectBox,
-    Spinner,
     useFetch,
     useToast,
 } from '@vertesia/ui/core';
 import { Env } from '@vertesia/ui/env';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useLocation } from '@vertesia/ui/router';
-import {
-    fetchComposableTokenFromFirebaseToken,
-    fetchComposableTokenFromVertesiaToken,
-    getCurrentVertesiaToken,
-    useUserSession,
-} from '@vertesia/ui/session';
-import { useState } from 'react';
+import { fetchComposableTokenFromVertesiaToken, useUserSession } from '@vertesia/ui/session';
+import { useContext, useState } from 'react';
+import { BrandedAuthLoadingScreen } from '../BrandedAuthScreens';
+import { BrandingContext } from '../BrandedLoadingIndicator';
+import { SignInPageShell } from './SignInPageShell';
 
 interface ProfileData {
     profile?: string;
@@ -31,6 +29,7 @@ interface LoginResult extends Required<ProfileData> {
     token: string;
     studio_server_url: string;
     zeno_server_url: string;
+    oauth_server_url: string;
 }
 
 interface ClientInfo extends ProfileData {
@@ -92,10 +91,16 @@ function getClientInfo(location: Location): ClientInfo | null {
 }
 
 export function TerminalLogin() {
+    const session = useUserSession();
+    const brand = useContext(BrandingContext);
     const [payload, setPayload] = useState<LoginResult | undefined>();
     const [error, setError] = useState<Error>();
     const location = useLocation();
     const clientInfo = getClientInfo(location);
+    const { data: allProjects, error: projectsError } = useFetch(
+        () => (session.user ? session.client.projects.list() : Promise.resolve([])),
+        { deps: [session.user], condition: () => !!clientInfo },
+    );
     const toast = useToast();
     const { t } = useUITranslation();
 
@@ -132,15 +137,20 @@ export function TerminalLogin() {
         // expire in 1 day
         let payload: LoginResult | undefined;
         try {
-            const vertesiaToken = getCurrentVertesiaToken();
-            const token = vertesiaToken
-                ? await fetchComposableTokenFromVertesiaToken(vertesiaToken, data.account, data.project, 24 * 3600)
-                : await fetchComposableTokenFromFirebaseToken(data.account, data.project, 24 * 3600);
+            // Resolve the active session through the shared provider (OAuth, Firebase or central auth).
+            // Exchange it server-side for the selected project rather than handing the browser's token to the CLI.
+            const token = await fetchComposableTokenFromVertesiaToken(
+                await session.rawAuthToken,
+                data.account,
+                data.project,
+                24 * 3600,
+            );
             if (token) {
                 payload = {
                     ...data,
                     studio_server_url: Env.endpoints.studio,
                     zeno_server_url: Env.endpoints.zeno,
+                    oauth_server_url: Env.endpoints.sts,
                     token,
                 } as LoginResult;
                 await fetch(clientInfo.redirect, {
@@ -180,31 +190,46 @@ export function TerminalLogin() {
             );
         }
 
+        if (projectsError) {
+            return <ErrorBox title={t('login.terminal.errorLoadingProjects')}>{errorMessage(projectsError)}</ErrorBox>;
+        }
+
         return payload ? (
             <AuthDoneScreen payload={payload} error={error} />
         ) : (
-            <AuthAcceptScreen clientInfo={clientInfo} onAccept={onAccept} />
+            <AuthAcceptScreen clientInfo={clientInfo} onAccept={onAccept} allProjects={allProjects ?? []} />
         );
     };
 
+    if (clientInfo && !projectsError && (!session.user || !allProjects)) {
+        return <BrandedAuthLoadingScreen />;
+    }
     const page = getPageContent();
 
-    return <div className="w-full flex flex-col items-center gap-4 mt-24">{page}</div>;
+    return (
+        <div className="fixed inset-0 overflow-y-auto bg-background text-foreground">
+            <SignInPageShell
+                lightLogo={brand.logo?.light}
+                darkLogo={brand.logo?.dark ?? brand.logo?.light}
+                logoAlt={brand.logo?.alt ?? brand.name}
+                footer={brand.copy?.footer}
+            >
+                <div className="w-full max-w-xl space-y-4 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm">
+                    {page}
+                </div>
+            </SignInPageShell>
+        </div>
+    );
 }
 
 interface AuthAcceptScreenProps {
+    allProjects: ProjectRef[];
     onAccept: (data: ProfileData) => void;
     clientInfo: ClientInfo;
 }
-function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenProps>) {
-    const { client, user } = useUserSession();
-    const { data: allProjects, error } = useFetch(() => (user ? client.projects.list() : Promise.resolve([])), [user]);
+function AuthAcceptScreen({ onAccept, clientInfo, allProjects }: Readonly<AuthAcceptScreenProps>) {
     const { t } = useUITranslation();
 
-    if (error) {
-        return <ErrorBox title={t('login.terminal.errorLoadingProjects')}>{errorMessage(error)}</ErrorBox>;
-    }
-
     const getEnvironmentName = () => {
         if (Env.isLocalDev) {
             return t('login.terminal.envLocalDev');
@@ -216,9 +241,9 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
 
     const envName = getEnvironmentName();
 
-    return user && allProjects ? (
+    return (
         <>
-            <div className="w-1/3">
+            <div className="w-full">
                 <div className="mb-4 text-xl font-semibold text-info">Authorizing client on {envName} environment.</div>
                 <div className="mb-2 text-base text-muted">
                     <div>{t('login.terminal.clientWantsAuth')}</div>
@@ -234,8 +259,6 @@ function AuthAcceptScreen({ onAccept, clientInfo }: Readonly<AuthAcceptScreenPro
             </div>
             <ProfileForm onAccept={onAccept} allProjects={allProjects} data={clientInfo} />
         </>
-    ) : (
-        <Spinner size="lg" />
     );
 }
 
@@ -305,19 +328,16 @@ function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>
     const projects = allProjects.filter((p) => p.account === currentData.account);
 
     return (
-        <div className="w-1/3">
-            <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted">{t('login.terminal.profileName')}</span>
+        <div className="w-full">
+            <FormItem className="mb-4" label={t('login.terminal.profileName')}>
                 <Input type="text" value={currentData.profile} onChange={onChangeProfile} />
-            </div>
-            <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted">{t('login.terminal.account')}</span>
+            </FormItem>
+            <FormItem className="mb-4" label={t('login.terminal.account')}>
                 <SelectAccount value={currentData.account} onChange={onChangeAccount} accounts={accounts || []} />
-            </div>
-            <div className="mb-4 flex flex-col gap-2">
-                <span className="font-semibold text-muted">{t('login.terminal.project')}</span>
+            </FormItem>
+            <FormItem className="mb-4" label={t('login.terminal.project')}>
                 <SelectProject value={currentData.project} onChange={onChangeProject} projects={projects} />
-            </div>
+            </FormItem>
             <div className="mb-4 text-sm text-attention">{t('login.terminal.browserPermissionNote')}</div>
             <div>
                 <Button size="xl" onClick={() => onAccept(currentData)}>
@@ -329,17 +349,19 @@ function ProfileForm({ allProjects, data, onAccept }: Readonly<ProfileFormProps>
 }
 
 interface SelectAccountProps {
+    id?: string;
     value?: string;
     accounts: AccountRef[];
     onChange: (value: AccountRef) => void;
 }
-function SelectAccount({ value, accounts, onChange }: Readonly<SelectAccountProps>) {
+function SelectAccount({ id, value, accounts, onChange }: Readonly<SelectAccountProps>) {
     const { t } = useUITranslation();
     const _onChange = (value: AccountRef) => {
         onChange(value);
     };
     return (
         <SelectBox
+            id={id}
             options={accounts}
             value={accounts?.find((a) => a.id === value)}
             onChange={_onChange}
@@ -351,17 +373,19 @@ function SelectAccount({ value, accounts, onChange }: Readonly<SelectAccountProp
 }
 
 interface SelectProjectProps {
+    id?: string;
     value?: string;
     projects: ProjectRef[];
     onChange: (value: ProjectRef) => void;
 }
-function SelectProject({ value, projects, onChange }: Readonly<SelectProjectProps>) {
+function SelectProject({ id, value, projects, onChange }: Readonly<SelectProjectProps>) {
     const { t } = useUITranslation();
     const _onChange = (value: ProjectRef) => {
         onChange(value);
     };
     return (
         <SelectBox
+            id={id}
             by="id"
             value={projects.find((p) => p.id === value)}
             options={projects}

package/lib/features/store/objects/selection/actions/StartWorkflowButton.d.ts

@@ -1,7 +0,0 @@
-/**
- * Standalone "Start Workflow" button for the content objects toolbar. Renders only when objects are
- * selected; opens a modal to pick a workflow rule and runs it on the selected object ids. Gated by
- * the caller via the `allowWorkflowRun` prop on {@link SelectionActions}.
- */
-export declare function StartWorkflowButton(): import("react").JSX.Element | null;
-//# sourceMappingURL=StartWorkflowButton.d.ts.map

package/lib/features/store/objects/selection/actions/StartWorkflowButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StartWorkflowButton.d.ts","sourceRoot":"","sources":["../../../../../../src/features/store/objects/selection/actions/StartWorkflowButton.tsx"],"names":[],"mappings":"AAiBA;;;;GAIG;AACH,wBAAgB,mBAAmB,uCAelC"}