@vertesia/ui 1.5.0-dev.20260910.052912Z → 1.6.0-dev.20260912.110338Z

package/src/boot/vite.ts

@@ -0,0 +1,118 @@
+/** Node-only adapter. Import from @vertesia/ui/boot/vite, never from browser code. */
+import { readFileSync } from 'node:fs';
+import { extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { type AppBranding, brandedBootOptions, escapeBrandHtml } from './branding.js';
+import { injectBootScreenHtml } from './index.js';
+
+const VIRTUAL_ID = 'virtual:vertesia-branding';
+const RESOLVED_ID = `\0${VIRTUAL_ID}`;
+const MIME: Record<string, string> = {
+    '.svg': 'image/svg+xml',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.webp': 'image/webp',
+    '.ico': 'image/x-icon',
+    '.woff2': 'font/woff2',
+    '.woff': 'font/woff',
+    '.otf': 'font/otf',
+    '.ttf': 'font/ttf',
+    '.avif': 'image/avif',
+};
+
+/** Inline local assets so React and pre-React markup work under any gateway base path. */
+export function resolveBrandingAssets(branding: AppBranding, moduleUrl: URL, watch: (file: string) => void = () => {}) {
+    function asset(value: string, base = moduleUrl): string {
+        if (/^(https?:|data:|#)/i.test(value)) return value;
+        const url = new URL(value, base);
+        if (url.protocol !== 'file:') throw new Error(`Unsupported branding asset URL: ${value}`);
+        const file = fileURLToPath(url);
+        const mime = MIME[extname(file).toLowerCase()];
+        if (!mime) throw new Error(`Unsupported branding asset type: ${file}`);
+        watch(file);
+        return `data:${mime};base64,${readFileSync(file).toString('base64')}`;
+    }
+    function source(value: string, css: boolean): string {
+        const url = new URL(value, moduleUrl);
+        const file = fileURLToPath(url);
+        watch(file);
+        const text = readFileSync(file, 'utf8');
+        return css
+            ? text.replace(
+                  /url\(\s*['"]?([^'"\s)]+)['"]?\s*\)/g,
+                  (_match, path: string) => `url("${asset(path, url)}")`,
+              )
+            : text.replace(
+                  /(<(?:img|source|link)\b[^>]*?\s)(src|href)=["']([^"']+)["']/gi,
+                  (_match, tag: string, attr: string, path: string) =>
+                      `${tag}${attr}="${escapeBrandHtml(asset(path, url))}"`,
+              );
+    }
+    return {
+        ...branding,
+        logo: branding.logo && {
+            ...branding.logo,
+            light: asset(branding.logo.light),
+            dark: branding.logo.dark ? asset(branding.logo.dark) : undefined,
+        },
+        loadingIcon: branding.loadingIcon && {
+            ...branding.loadingIcon,
+            light: asset(branding.loadingIcon.light),
+            dark: branding.loadingIcon.dark ? asset(branding.loadingIcon.dark) : undefined,
+        },
+        favicon: branding.favicon ? asset(branding.favicon) : undefined,
+        font: branding.font && {
+            ...branding.font,
+            regular: asset(branding.font.regular),
+            bold: branding.font.bold ? asset(branding.font.bold) : undefined,
+        },
+        boot: branding.boot && {
+            html: branding.boot.html ? source(branding.boot.html, false) : undefined,
+            styles: branding.boot.styles ? source(branding.boot.styles, true) : undefined,
+        },
+    } satisfies AppBranding;
+}
+
+export function createAppBrandingPlugin(branding: AppBranding, moduleUrl: URL) {
+    const watched = new Set<string>();
+    const resolve = () => resolveBrandingAssets(branding, moduleUrl, (file) => watched.add(file));
+    return {
+        name: 'vertesia-app-branding',
+        resolveId(id: string) {
+            if (id === VIRTUAL_ID) return RESOLVED_ID;
+        },
+        load(this: { addWatchFile(file: string): void }, id: string) {
+            if (id !== RESOLVED_ID) return;
+            const resolved = resolve();
+            for (const file of watched) this.addWatchFile(file);
+            return `export default ${JSON.stringify(resolved)};`;
+        },
+        handleHotUpdate<Module>(context: {
+            file: string;
+            server: {
+                moduleGraph: { getModuleById(id: string): Module | undefined; invalidateModule(module: Module): void };
+                ws: { send(payload: { type: 'full-reload' }): void };
+            };
+        }) {
+            if (!watched.has(context.file)) return;
+            const module = context.server.moduleGraph.getModuleById(RESOLVED_ID);
+            if (module) context.server.moduleGraph.invalidateModule(module);
+            context.server.ws.send({ type: 'full-reload' });
+            return [];
+        },
+        transformIndexHtml(html: string) {
+            const resolved = resolve();
+            const title = escapeBrandHtml(resolved.title ?? resolved.name);
+            let result = html.replace(/<title\b[^>]*>[\s\S]*?<\/title>/i, `<title>${title}</title>`);
+            if (resolved.favicon) {
+                result = result.replace(/<link\b(?=[^>]*\brel=["'](?:shortcut )?icon["'])[^>]*>/gi, '');
+                result = result.replace(
+                    '</head>',
+                    `<link rel="icon" href="${escapeBrandHtml(resolved.favicon)}"></head>`,
+                );
+            }
+            return injectBootScreenHtml(result, brandedBootOptions(resolved));
+        },
+    };
+}

package/src/core/components/Link.tsx

@@ -12,7 +12,7 @@ export function Link({ underline = 'always', className, children, ...others }: L
         underlineClass = 'hover:underline';
     }
     return (
-        <a className={clsx('text-primary', className, underlineClass)} {...others}>
+        <a className={clsx('text-info', className, underlineClass)} {...others}>
             {children}
         </a>
     );

package/src/core/components/Spinner.tsx

@@ -27,7 +27,7 @@ export function Spinner({ size, className }: SpinnerProps) {
     const sizeClass = getRealSize(size || 'md');
     return (
         <svg
-            className={clsx('animate-[spin_0.8s_linear_infinite] text-primary', sizeClass, className)}
+            className={clsx('animate-[spin_0.8s_linear_infinite] text-info', sizeClass, className)}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"

package/src/core/components/TagsInput.tsx

@@ -278,7 +278,7 @@ function TagsInputContent({
                                 <span
                                     key={item}
                                     className={clsx(
-                                        'inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-primary/20 text-foreground ring-1 ring-primary/30 rounded-md w-full transition-all',
+                                        'inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-info text-foreground ring-1 ring-primary/30 rounded-md w-full transition-all',
                                         pendingDeleteIndex === index &&
                                             'ring-2 ring-destructive shadow-[0_0_8px_rgba(252,165,165,0.5)]',
                                     )}
@@ -288,7 +288,7 @@ function TagsInputContent({
                                         type="button"
                                         onClick={(e) => handleRemove(item, e)}
                                         disabled={disabled}
-                                        className="hover:bg-primary/30 rounded-sm transition-colors flex-shrink-0"
+                                        className="hover:bg-info rounded-sm transition-colors flex-shrink-0"
                                     >
                                         <X className="h-3 w-3" />
                                     </button>
@@ -303,7 +303,7 @@ function TagsInputContent({
                             <span
                                 key={item}
                                 className={clsx(
-                                    'inline-flex items-center gap-1 px-2 py-1 text-sm bg-primary/20 text-foreground ring-1 ring-primary/30 rounded-md transition-all',
+                                    'inline-flex items-center gap-1 px-2 py-1 text-sm bg-info text-foreground ring-1 ring-primary/30 rounded-md transition-all',
                                     pendingDeleteIndex === index &&
                                         'ring-2 ring-destructive shadow-[0_0_8px_rgba(252,165,165,0.5)]',
                                 )}
@@ -313,7 +313,7 @@ function TagsInputContent({
                                     type="button"
                                     onClick={(e) => handleRemove(item, e)}
                                     disabled={disabled}
-                                    className="hover:bg-primary/30 rounded-sm transition-colors"
+                                    className="hover:bg-info rounded-sm transition-colors"
                                 >
                                     <X className="h-3 w-3" />
                                 </button>
@@ -381,7 +381,7 @@ function TagsInputContent({
                                             className={clsx(
                                                 'px-3 py-2 text-sm cursor-pointer transition-colors',
                                                 index === highlightedIndex
-                                                    ? 'bg-primary/20 text-foreground'
+                                                    ? 'bg-info text-foreground'
                                                     : 'hover:bg-muted/50',
                                             )}
                                         >
@@ -404,9 +404,9 @@ function TagsInputContent({
                                         onClick={() => handleCreate(searchTerm)}
                                         onMouseEnter={() => setHighlightedIndex(filteredOptions.length)}
                                         className={clsx(
-                                            '!flex w-full justify-start px-3 py-2 text-sm cursor-pointer transition-colors text-primary',
+                                            '!flex w-full justify-start px-3 py-2 text-sm cursor-pointer transition-colors text-info',
                                             highlightedIndex === filteredOptions.length
-                                                ? 'bg-primary/20'
+                                                ? 'bg-info'
                                                 : 'hover:bg-muted/50',
                                         )}
                                     >

package/src/core/components/shadcn/badge.tsx

@@ -8,7 +8,7 @@ const badgeVariants = cva('inline-flex items-center rounded-md px-2 py-1 text-xs
     variants: {
         variant: {
             default: 'text-foreground bg-muted',
-            secondary: 'bg-secondary text-primary',
+            secondary: 'bg-secondary text-info',
             destructive: 'bg-destructive text-destructive',
             attention: 'bg-attention text-attention',
             success: 'bg-success text-success',

package/src/core/components/shadcn/button.tsx

@@ -5,7 +5,6 @@ import { Slot } from '@radix-ui/react-slot';
 // pinned to the fallback language regardless of LanguageProvider changes.
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { cva, type VariantProps } from 'class-variance-authority';
-import clsx from 'clsx';
 import { Check, CopyIcon, Loader2 } from 'lucide-react';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
@@ -47,11 +46,10 @@ const buttonVariants = cva(
                 destructive:
                     'bg-destructive text-destructive ring-1 ring-inset ring-destructive/50 shadow-xs hover:bg-destructive/50',
                 outline: 'border border-input bg-background shadow-xs hover:bg-muted ring-inset',
-                secondary:
-                    'bg-primary/5 dark:bg-primary/10 text-primary shadow-xs hover:bg-primary/10 dark:hover:bg-primary/20 ring-inset',
+                secondary: 'bg-info text-info shadow-xs hover:bg-mixer-info/10 ring-inset',
                 ghost: 'hover:bg-muted/50 dark:hover:bg-muted/20 ring-inset',
                 link: 'text-foreground underline-offset-4 hover:underline ring-inset',
-                primary: 'bg-primary text-white shadow-xs hover:bg-primary/90 ring-inset',
+                primary: 'bg-primary text-primary shadow-xs hover:bg-primary/90 ring-inset',
                 unstyled: '',
             },
             size: {
@@ -150,7 +148,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
         const buttonElement = (
             <Comp
-                className={clsx(cn(buttonVariants({ variant, size })), className)}
+                className={cn(buttonVariants({ variant, size }), className)}
                 disabled={isDisabled || isLoading || props.disabled}
                 ref={ref}
                 onClick={onClick}

package/src/core/components/shadcn/filters/comboBox/DateCombobox.tsx

@@ -91,7 +91,7 @@ export const DateCombobox = ({
 
     return (
         <Popover _open={open} onOpenChange={setOpen}>
-            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition">
+            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-info shrink-0 transition">
                 <div className="flex gap-1.5 items-center min-h-[20px]">{getDisplayText()}</div>
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0" align="start" side="bottom" alignOffset={-4} sideOffset={6}>
@@ -137,7 +137,7 @@ export const DateCombobox = ({
                                                         return 'bg-primary text-primary-foreground rounded-e-md font-semibold';
                                                     }
                                                     if (currentDate > startDate && currentDate < endDate) {
-                                                        return 'bg-primary/20 text-primary font-medium';
+                                                        return 'bg-info text-info font-medium';
                                                     }
                                                 } else {
                                                     // Only start date selected

package/src/core/components/shadcn/filters/comboBox/SelectCombobox.tsx

@@ -50,7 +50,7 @@ export const SelectionCombobox = ({
                 }
             }}
         >
-            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 transition text-muted hover:text-primary shrink-0">
+            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 transition text-muted hover:text-info shrink-0">
                 <div className="flex gap-1.5 items-center">
                     {filterValues?.length === 1
                         ? (() => {

package/src/core/components/shadcn/filters/comboBox/StringListCombobox.tsx

@@ -30,7 +30,7 @@ export const StringListCombobox = ({
                 }
             }}
         >
-            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition">
+            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-info shrink-0 transition">
                 <div className="flex gap-1.5 items-center">
                     {filterValues.length > 0
                         ? filterValues.length === 1

package/src/core/components/shadcn/filters/comboBox/TextCombobox.tsx

@@ -32,7 +32,7 @@ export const TextCombobox = ({
                 }
             }}
         >
-            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition">
+            <PopoverTrigger className="rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-info shrink-0 transition">
                 <div className="flex gap-1.5 items-center">{filterValue || 'Enter text...'}</div>
             </PopoverTrigger>
             <PopoverContent className="w-[300px] p-3">

package/src/core/components/shadcn/filters/filter/dateFilter.tsx

@@ -205,7 +205,7 @@ export default function DateFilter({
                                                 return 'bg-primary text-primary-foreground rounded-e-md font-semibold';
                                             }
                                             if (currentDate > startDate && currentDate < endDate) {
-                                                return 'bg-primary/20 text-primary font-medium';
+                                                return 'bg-info text-info font-medium';
                                             }
                                         } else {
                                             // Only start date selected

package/src/core/components/shadcn/filters/filter-styles.ts

@@ -20,13 +20,13 @@ export const calendarStyles = `
   min-width: 32px !important;
   height: 32px !important;
   border-radius: 4px !important;
-  border: 1px solid hsl(var(--border)) !important;
-  background: hsl(var(--background)) !important;
-  color: hsl(var(--foreground)) !important;
+  border: 1px solid var(--border) !important;
+  background: var(--background) !important;
+  color: var(--foreground) !important;
 }
 
 .calendar-wrapper .react-calendar__navigation__arrow:hover {
-  background: oklch(var(--muted)) !important;
+  background: var(--muted) !important;
 }
 
 .calendar-wrapper .react-calendar__tile {

package/src/core/components/shadcn/filters/filters.tsx

@@ -130,7 +130,7 @@ export default function Filters({ filters, setFilters, filterGroups }: FiltersPr
                             onClick={() => {
                                 setFilters((prev) => prev.filter((f) => f !== filter));
                             }}
-                            className="bg-muted rounded-s-none rounded-e-sm size-8 hover:text-primary hover:bg-muted/50 transition shrink-0"
+                            className="bg-muted rounded-s-none rounded-e-sm size-8 hover:text-info hover:bg-muted/50 transition shrink-0"
                         >
                             <X className="size-6" />
                         </Button>

package/src/core/components/shadcn/label.tsx

@@ -17,7 +17,7 @@ const Label: React.ForwardRefExoticComponent<
     ({ className, required, ...props }, ref) => (
         <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props}>
             {props.children}
-            {required && <span className="text-destructive-foreground ms-1">*</span>}
+            {required && <span className="text-destructive ms-1">*</span>}
         </LabelPrimitive.Root>
     ),
 );

package/src/core/components/shadcn/overflowTabs.tsx

@@ -15,7 +15,7 @@ const VARIANT_CLASSES: Record<OverflowTabsVariant, { base: string; active: strin
     tabs: {
         base: 'flex items-center border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer shrink-0',
         inactive: 'border-transparent text-muted hover:border-border hover:text-foreground',
-        active: 'border-primary text-primary',
+        active: 'border-primary text-info',
         icon: 'ms-1 size-4',
     },
     pills: {
@@ -307,7 +307,7 @@ export function OverflowTabsBar({ tabs, current, onTabChange, variant = 'tabs',
                                 key={tab.name}
                                 disabled={tab.disabled}
                                 onClick={() => onTabChange(tab.name)}
-                                className={cn(tab.name === current && 'text-primary')}
+                                className={cn(tab.name === current && 'text-info')}
                             >
                                 {tab.label}
                             </DropdownMenuItem>

package/src/core/components/shadcn/tabs.tsx

@@ -344,7 +344,7 @@ const TabsTrigger: React.ForwardRefExoticComponent<
                         ? cn(
                               'border-b-2 px-2 py-1.5 text-sm font-medium whitespace-nowrap cursor-pointer',
                               'border-transparent text-muted hover:border-border hover:text-foreground',
-                              'data-[state=active]:border-primary data-[state=active]:text-primary',
+                              'data-[state=active]:border-primary data-[state=active]:text-info',
                               'disabled:pointer-events-none disabled:opacity-50',
                           )
                         : cn(

package/src/css/utilities.css

@@ -4,6 +4,13 @@
 .dark {
     --mixer: oklch(0 0 0);
 }
+/* PROTOTYPE: mirror of `bg-*`. Resolves --color-<name>-foreground first so `text-info`
+ * yields white on the solid primary surface; tokens without a -foreground (the six status
+ * semantics) fall through to the built-in utility and keep their current meaning. */
+@utility text-* {
+    color: --value(--color-* -foreground, [*]);
+}
+
 @utility text-mixer-* {
     color: color-mix(
         in oklab,

package/src/env/index.test.ts

@@ -92,3 +92,103 @@ describe('VertesiaEnvironment runtime configuration', () => {
         expect(window.AUTH_MODE).toBe('central');
     });
 });
+
+describe('VertesiaEnvironment build configuration', () => {
+    const buildEnv = {
+        VITE_FIREBASE_API_KEY: 'build-key',
+        VITE_FIREBASE_AUTH_DOMAIN: 'project.firebaseapp.com',
+        VITE_FIREBASE_PROJECT_ID: 'project',
+        VITE_FIREBASE_APP_ID: 'build-app',
+    };
+
+    afterEach(() => vi.unstubAllGlobals());
+
+    it('enables Firebase only with an explicit mode and complete build settings', () => {
+        vi.stubGlobal('window', {});
+        const env = new VertesiaEnvironment().init(baseProps, { ...buildEnv, VITE_AUTH_MODE: 'firebase' });
+        expect(env.firebase?.apiKey).toBe('build-key');
+        expect(env.firebase?.authDomain).toBe('project.firebaseapp.com');
+        expect(window.AUTH_MODE).toBe('firebase');
+    });
+
+    it.each([buildEnv, { VITE_FIREBASE_API_KEY: 'unused-key' }])(
+        'retains central auth when Firebase values exist without an explicit mode',
+        (settings) => {
+            vi.stubGlobal('window', {});
+            const env = new VertesiaEnvironment().init(baseProps, settings);
+            expect(env.firebase).toBeUndefined();
+            expect(window.AUTH_MODE).toBeUndefined();
+        },
+    );
+
+    it('allows explicit central mode even with Firebase build settings', () => {
+        vi.stubGlobal('window', {});
+        const env = new VertesiaEnvironment().init(baseProps, { ...buildEnv, VITE_AUTH_MODE: 'central' });
+        expect(env.firebase).toBeUndefined();
+        expect(window.AUTH_MODE).toBe('central');
+    });
+
+    it('rejects incomplete settings when Firebase is selected', () => {
+        vi.stubGlobal('window', {});
+        expect(() =>
+            new VertesiaEnvironment().init(baseProps, {
+                VITE_AUTH_MODE: 'firebase',
+                VITE_FIREBASE_API_KEY: 'key',
+            }),
+        ).toThrow('VITE_FIREBASE_AUTH_DOMAIN, VITE_FIREBASE_PROJECT_ID, VITE_FIREBASE_APP_ID');
+    });
+
+    it('rejects an unknown mode', () => {
+        vi.stubGlobal('window', {});
+        expect(() => new VertesiaEnvironment().init(baseProps, { VITE_AUTH_MODE: 'typo' })).toThrow(
+            'VITE_AUTH_MODE must be firebase or central',
+        );
+    });
+
+    it('preserves gateway Firebase configuration ahead of conflicting build settings', () => {
+        const firebase = {
+            apiKey: 'runtime-key',
+            authDomain: 'gateway.example.com',
+            projectId: 'runtime',
+            appId: 'runtime-app',
+        };
+        vi.stubGlobal('window', { __VERTESIA_RUNTIME_CONFIG__: { authMode: 'firebase', firebase } });
+        const env = new VertesiaEnvironment().init(baseProps, { VITE_AUTH_MODE: 'central' });
+        expect(env.firebase).toEqual(firebase);
+        expect(window.AUTH_MODE).toBe('firebase');
+    });
+
+    it('preserves gateway central mode ahead of Firebase build settings', () => {
+        vi.stubGlobal('window', { __VERTESIA_RUNTIME_CONFIG__: { authMode: 'central' } });
+        const env = new VertesiaEnvironment().init(baseProps, buildEnv);
+        expect(env.firebase).toBeUndefined();
+        expect(window.AUTH_MODE).toBe('central');
+    });
+
+    it('leaves the existing central default unchanged without settings', () => {
+        vi.stubGlobal('window', {});
+        const env = new VertesiaEnvironment().init(baseProps, {});
+        expect(env.firebase).toBeUndefined();
+        expect(window.AUTH_MODE).toBeUndefined();
+    });
+});
+
+describe('build-time default workspace', () => {
+    it('reads and trims Vertesia IDs independently of the Firebase project', () => {
+        const env = new VertesiaEnvironment().init(baseProps, {
+            VITE_VERTESIA_ACCOUNT_ID: ' account-1 ',
+            VITE_VERTESIA_PROJECT_ID: ' project-1 ',
+        });
+        expect(env.defaultAuthSelection).toEqual({ accountId: 'account-1', projectId: 'project-1' });
+    });
+    it('ignores blank settings and preserves an explicit selection as a whole pair', () => {
+        expect(
+            new VertesiaEnvironment().init(baseProps, { VITE_VERTESIA_ACCOUNT_ID: ' ' }).defaultAuthSelection,
+        ).toBeUndefined();
+        const env = new VertesiaEnvironment().init(
+            { ...baseProps, defaultAuthSelection: { accountId: 'explicit' } },
+            { VITE_VERTESIA_ACCOUNT_ID: 'build', VITE_VERTESIA_PROJECT_ID: 'other-project' },
+        );
+        expect(env.defaultAuthSelection).toEqual({ accountId: 'explicit' });
+    });
+});

package/src/env/index.ts

@@ -15,6 +15,14 @@ export interface EnvProps {
         zeno: string;
         studio: string;
         sts: string; // Security Token Service endpoint
+        /**
+         * Central Auth broker that issues the sign-in redirect and hosts `/logout`.
+         *
+         * Optional: when unset the session falls back to the long-standing broker, so an app that
+         * does not set it keeps its current behaviour exactly. Set it to move one environment at a
+         * time onto a different broker.
+         */
+        auth?: string;
         git?: string; // Smart HTTP app source git endpoint
         mcp?: string;
         /** Appgen app-gateway endpoint (serves live development previews and app bundles). */
@@ -27,6 +35,8 @@ export interface EnvProps {
         appId?: string;
         providerType?: string;
     };
+    /** Default workspace selection when the URL does not explicitly select an account or project. */
+    defaultAuthSelection?: { accountId?: string; projectId?: string };
     region?: string;
     datadogRum?: boolean;
     datadogLogs?: boolean;
@@ -87,14 +97,63 @@ function injectedRuntimeConfig(): VertesiaRuntimeConfig | undefined {
     return runtimeConfig;
 }
 
+/** Public build-time settings, for example Vite's import.meta.env. */
+export type AppBuildEnvironment = Record<string, string | boolean | undefined>;
+
+function buildRuntimeConfig(env?: AppBuildEnvironment): VertesiaRuntimeConfig | undefined {
+    if (!env) return undefined;
+    const value = (name: string) => (typeof env[name] === 'string' ? env[name].trim() : '');
+    const mode = value('VITE_AUTH_MODE');
+    if (mode && mode !== 'firebase' && mode !== 'central') {
+        throw new Error('VITE_AUTH_MODE must be firebase or central');
+    }
+    // Firebase build settings are only consumed after an explicit opt-in.
+    if (!mode) return undefined;
+    if (mode === 'central') return { authMode: 'central' };
+    const fields = {
+        apiKey: 'VITE_FIREBASE_API_KEY',
+        authDomain: 'VITE_FIREBASE_AUTH_DOMAIN',
+        projectId: 'VITE_FIREBASE_PROJECT_ID',
+        appId: 'VITE_FIREBASE_APP_ID',
+    };
+    const missing = Object.values(fields).filter((name) => !value(name));
+    if (missing.length) {
+        throw new Error(`Firebase authentication requires: ${missing.join(', ')}`);
+    }
+    return {
+        authMode: 'firebase',
+        firebase: {
+            apiKey: value(fields.apiKey),
+            authDomain: value(fields.authDomain),
+            projectId: value(fields.projectId),
+            appId: value(fields.appId),
+        },
+    };
+}
+
 export class VertesiaEnvironment implements Readonly<EnvProps> {
     constructor(private _props?: EnvProps | undefined) {}
 
-    init(props?: EnvProps) {
-        const runtimeConfig = injectedRuntimeConfig();
+    init(props?: EnvProps, buildEnv?: AppBuildEnvironment) {
+        // Host runtime configuration takes precedence over static deployment defaults.
+        const runtimeConfig = injectedRuntimeConfig() ?? buildRuntimeConfig(buildEnv);
         const runtimeFirebase = runtimeConfig?.authMode === 'firebase' ? runtimeConfig.firebase : undefined;
         this._props = props && runtimeFirebase && !props.firebase ? { ...props, firebase: runtimeFirebase } : props;
-        if (runtimeConfig && window.AUTH_MODE === undefined) window.AUTH_MODE = runtimeConfig.authMode;
+        if (this._props && this._props.defaultAuthSelection === undefined && buildEnv) {
+            const accountId =
+                typeof buildEnv.VITE_VERTESIA_ACCOUNT_ID === 'string'
+                    ? buildEnv.VITE_VERTESIA_ACCOUNT_ID.trim() || undefined
+                    : undefined;
+            const projectId =
+                typeof buildEnv.VITE_VERTESIA_PROJECT_ID === 'string'
+                    ? buildEnv.VITE_VERTESIA_PROJECT_ID.trim() || undefined
+                    : undefined;
+            if (accountId || projectId)
+                this._props = { ...this._props, defaultAuthSelection: { accountId, projectId } };
+        }
+        if (runtimeConfig && typeof window !== 'undefined' && window.AUTH_MODE === undefined) {
+            window.AUTH_MODE = runtimeConfig.authMode;
+        }
         return this;
     }
 
@@ -173,6 +232,10 @@ export class VertesiaEnvironment implements Readonly<EnvProps> {
         return this._props?.devAuthToken;
     }
 
+    get defaultAuthSelection() {
+        return this._props?.defaultAuthSelection;
+    }
+
     get authTokenProvider() {
         return this._props?.authTokenProvider;
     }

package/src/features/activity-doc/ActivityDoc.tsx

@@ -6,7 +6,7 @@ import type React from 'react';
 import { useMemo, useState } from 'react';
 
 function Badge({ children, secondary = false }: { children: React.ReactNode; secondary?: boolean }) {
-    const className = secondary ? 'bg-secondary text-primary' : 'text-foreground bg-muted';
+    const className = secondary ? 'bg-secondary text-info' : 'text-foreground bg-muted';
     return <span className={className}>{children}</span>;
 }
 

package/src/features/agent/PayloadBuilder.tsx

@@ -39,6 +39,10 @@ function getExecutableProvider(provider: ExecutionEnvironmentRef['provider']): M
 }
 
 export interface ScheduledWorkflowConfig {
+    run_as?: import('@vertesia/common').ScheduleRunAs;
+    /** Local datetime input; serialize as delegation_expires_at (ISO or null) for schedule requests. */
+    delegation_expiry_input?: string;
+    request_id?: string;
     name: string;
     description?: string;
     cron_expression: string;