@vertesia/ui 1.6.0-dev.20261004.085740Z → 1.6.0-dev.20261008.064737Z

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.6.0-dev.20261004.085740Z",
+  "version": "1.6.0-dev.20261008.064737Z",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -47,11 +47,11 @@
     "@radix-ui/react-switch": "^1.3.7",
     "@radix-ui/react-tabs": "^1.1.21",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@vertesia/client": "1.6.0-dev.20261004.085740Z",
-    "@vertesia/common": "1.6.0-dev.20261004.085740Z",
-    "@vertesia/fusion-ux": "1.6.0-dev.20261004.085740Z",
-    "@vertesia/json": "1.6.0-dev.20261004.085740Z",
-    "@vertesia/rich-text": "1.6.0-dev.20261004.085740Z",
+    "@vertesia/client": "1.6.0-dev.20261008.064737Z",
+    "@vertesia/common": "1.6.0-dev.20261008.064737Z",
+    "@vertesia/fusion-ux": "1.6.0-dev.20261008.064737Z",
+    "@vertesia/json": "1.6.0-dev.20261008.064737Z",
+    "@vertesia/rich-text": "1.6.0-dev.20261008.064737Z",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "aria-hidden": "^1.2.6",
@@ -61,29 +61,29 @@
     "dayjs": "^1.11.23",
     "debounce": "^3.0.0",
     "dompurify": "^3.4.16",
-    "fast-xml-parser": "^5.11.1",
+    "fast-xml-parser": "^5.11.2",
     "firebase": "^12.19.0",
-    "framer-motion": "^13.4.0",
+    "framer-motion": "^13.4.4",
     "i18next": "^26.4.2",
     "jwt-decode": "^4.0.0",
-    "katex": "^0.18.7",
+    "katex": "^0.18.9",
     "lodash-es": "^4.18.1",
-    "lucide-react": "^1.47.0",
+    "lucide-react": "^1.48.0",
     "mermaid": "^12.0.0",
-    "monaco-editor": "^0.56.0",
-    "motion": "^13.4.0",
+    "monaco-editor": "^0.57.0",
+    "motion": "^13.4.4",
     "papaparse": "^5.7.0",
     "react": "19.3.0",
     "react-calendar": "^6.0.1",
     "react-date-picker": "^12.1.0",
     "react-dom": "19.3.0",
     "react-error-boundary": "^6.1.6",
-    "react-i18next": "^17.0.14",
+    "react-i18next": "^17.0.15",
     "react-markdown": "^10.1.0",
     "react-pdf": "^10.5.0",
     "react-remove-scroll": "^2.7.2",
     "react-remove-scroll-bar": "^2.3.8",
-    "react-resizable-panels": "^4.13.1",
+    "react-resizable-panels": "^4.14.1",
     "react-style-singleton": "^2.2.3",
     "react-vega": "^8.0.0",
     "rehype-katex": "^7.0.1",
@@ -97,7 +97,7 @@
     "ts-md5": "^2.0.1",
     "unist-util-visit": "^5.1.0",
     "vega": "^6.4.0",
-    "vega-embed": "^7.2.0",
+    "vega-embed": "^7.3.0",
     "vega-lite": "^6.4.3"
   },
   "devDependencies": {
@@ -105,19 +105,19 @@
     "@testing-library/user-event": "^14.6.7",
     "@types/hast": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.13.6",
+    "@types/node": "^24.19.0",
     "@types/papaparse": "^5.5.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vertesia/tsconfig": "0.1.0",
     "axe-core": "^4.13.0",
     "culori": "^4.0.2",
-    "i18next-cli": "^1.74.1",
+    "i18next-cli": "^1.74.2",
     "jsdom": "^30.1.1",
-    "rolldown": "1.2.9",
+    "rolldown": "1.2.11",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "vitest": "5.0.1",
+    "vitest": "5.0.2",
     "vitest-axe": "^0.1.0",
     "wcag-contrast": "^3.0.0"
   },
@@ -193,7 +193,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "b51b6dc9262f81f55e2424d1e57190060f6068d7",
+  "gitHead": "8ee3a33e9a7c3dbcd13937e971cbdcc5fad56717",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/boot/vite.ts

@@ -79,9 +79,18 @@ export function resolveBrandingAssets(branding: AppBranding, moduleUrl: URL, wat
 
 export function createAppBrandingPlugin(branding: AppBranding, moduleUrl: URL) {
     const watched = new Set<string>();
+    let workspace: { account?: string; project?: string } = {};
     const resolve = () => resolveBrandingAssets(branding, moduleUrl, (file) => watched.add(file));
     return {
         name: 'vertesia-app-branding',
+        configResolved(config: { env: Record<string, unknown> }) {
+            const account = config.env.VITE_VERTESIA_ACCOUNT_ID;
+            const project = config.env.VITE_VERTESIA_PROJECT_ID;
+            workspace = {
+                account: typeof account === 'string' ? account : undefined,
+                project: typeof project === 'string' ? project : undefined,
+            };
+        },
         resolveId(id: string) {
             if (id === VIRTUAL_ID) return RESOLVED_ID;
         },
@@ -115,6 +124,12 @@ export function createAppBrandingPlugin(branding: AppBranding, moduleUrl: URL) {
                     `<link rel="icon" href="${escapeBrandHtml(resolved.favicon)}"></head>`,
                 );
             }
+            // Data only: a hosting gateway can render its own trusted login without executing app code.
+            const brandData = JSON.stringify({ ...resolved, workspace }).replace(/</g, '\\u003c');
+            result = result.replace(
+                '</head>',
+                `<script type="application/json" id="vertesia-app-branding">${brandData}</script></head>`,
+            );
             return injectBootScreenHtml(result, brandedBootOptions(resolved));
         },
     };

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

@@ -27,6 +27,7 @@ export interface Tab {
 export type CanChangeTab = (nextTab: string, currentTab?: string) => boolean;
 
 const TabsContext = React.createContext<{
+    orientation?: 'horizontal' | 'vertical';
     size?: number;
     tabs?: Tab[];
     current?: string;
@@ -46,6 +47,7 @@ const TabsContext = React.createContext<{
 });
 
 interface TabsProps {
+    orientation?: 'horizontal' | 'vertical';
     current?: string | (() => string);
     tabs: Tab[];
     defaultValue?: string;
@@ -61,6 +63,7 @@ interface TabsProps {
 }
 
 const Tabs = ({
+    orientation = 'horizontal',
     tabs,
     defaultValue,
     current,
@@ -165,6 +168,7 @@ const Tabs = ({
     return (
         <TabsContext.Provider
             value={{
+                orientation,
                 tabs: visibleTabs,
                 size: fullWidth ? visibleTabs.length : 0,
                 current: value,
@@ -176,6 +180,7 @@ const Tabs = ({
             }}
         >
             <TabsPrimitive.Root
+                orientation={orientation}
                 defaultValue={value || visibleTabs[0]?.name}
                 value={value}
                 onValueChange={handleValueChange}
@@ -194,8 +199,9 @@ interface TabsBarProps {
 }
 
 const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
-    const { tabs, size, current, setTab, responsive, variant, updateHash, canChangeTab } =
+    const { tabs, size, current, setTab, responsive, variant, updateHash, canChangeTab, orientation } =
         React.useContext(TabsContext);
+    const barDirection = direction ?? orientation ?? 'horizontal';
 
     const fullWidth = size !== 0;
 
@@ -248,14 +254,14 @@ const TabsBar = ({ className, sticky, direction }: TabsBarProps) => {
                     sticky && 'sticky top-0 bg-background z-10',
                     // TabsList's `border-b -mb-px` is the rail under a ROW of tabs. In vertical
                     // mode it renders as a stray line beneath the column, so drop it here only.
-                    direction === 'vertical' ? 'flex-col items-start border-b-0 mb-0' : 'flex-row',
+                    barDirection === 'vertical' ? 'flex-col items-start border-b-0 mb-0' : 'flex-row',
                     responsive ? 'hidden lg:flex' : '',
                     className,
                 )}
             >
                 {tabs.map((tab) => (
                     <TabsTrigger
-                        className={cn(direction === 'vertical' ? 'w-full text-start' : '')}
+                        className={cn(barDirection === 'vertical' ? 'w-full text-start' : '')}
                         key={tab.name}
                         value={tab.name}
                         disabled={tab.disabled}

package/src/env/index.ts

@@ -41,7 +41,16 @@ export interface EnvProps {
     /** Explicitly allow legacy Firebase/central sign-in in an iframe when host authentication is unavailable. */
     allowLegacyIframeAuth?: boolean;
     /** Public OAuth client for independently hosted apps; ignored inside Studio or a gateway session. */
-    oauth?: { clientId: string; redirectUri: string; scopes?: string[]; offlineAccess?: boolean };
+    oauth?: {
+        clientId: string;
+        redirectUri: string;
+        scopes?: string[];
+        offlineAccess?: boolean;
+        /** Logical authorization server, optionally including a tenant path; defaults to endpoints.sts. */
+        issuer?: string;
+        /** RFC 8707 audience, independent of the logical issuer; defaults to the discovered issuer. */
+        resource?: string;
+    };
     firebase?: {
         apiKey: string;
         authDomain: string;

package/src/features/agent/chat/AgentRequestInputOverlay.tsx

@@ -1,12 +1,14 @@
 import type { McpConnectUxConfig } from '@vertesia/common';
-import { Button } from '@vertesia/ui/core';
+import { Button, VTooltip } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
-import { XIcon } from 'lucide-react';
+import { ChevronDown, ChevronUp, XIcon } from 'lucide-react';
+import { useId, useState } from 'react';
 import { RemoteMcpConnectionButton } from '../../oauth/RemoteMcpConnectionButton.js';
 import { ComposerOverlay, ComposerOverlayQuestion } from './ComposerOverlay';
 import {
     getRequestInputDisplayText,
+    getRequestInputResolutionKey,
     getRequestInputResponseMetadata,
     getToolApprovalResponseMetadata,
     type RequestInputMessageWithUx,
@@ -63,17 +65,30 @@ function McpRequestInputControls({ mcpConnect, onMcpConnected, onDecline, disabl
     );
 }
 
-export function AgentRequestInputOverlay({
+export function AgentRequestInputOverlay(props: AgentRequestInputOverlayProps) {
+    if (!props.message) return null;
+
+    return (
+        <PendingRequestInputOverlay
+            {...props}
+            message={props.message}
+            key={`${props.message.workflow_run_id}:${getRequestInputResolutionKey(props.message)}`}
+        />
+    );
+}
+
+function PendingRequestInputOverlay({
     message,
     onSendMessage,
     onMcpConnected,
     isLoading = false,
     disabled = false,
     className,
-}: AgentRequestInputOverlayProps) {
+}: AgentRequestInputOverlayProps & { message: RequestInputMessageWithUx }) {
     const { t } = useUITranslation();
-
-    if (!message) return null;
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const contentId = useId();
+    const toggleLabel = isCollapsed ? t('agent.showQuestions') : t('agent.hideQuestions');
 
     const uxConfig = message.details.ux;
     const options = uxConfig.options ?? [];
@@ -86,37 +101,61 @@ export function AgentRequestInputOverlay({
         sendRequestInputResponse(onSendMessage, message, value, metadata);
     };
 
-    if (mcpConnect) {
-        return (
-            <ComposerOverlay className={className} data-agent-request-input-overlay>
-                <div className="mx-auto flex w-full max-w-3xl flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between">
-                    <div className="min-w-0 text-sm leading-6 text-foreground/85">{displayText}</div>
-                    <McpRequestInputControls
-                        mcpConnect={mcpConnect}
-                        onMcpConnected={(cfg) => onMcpConnected?.(cfg, getRequestInputResponseMetadata(message))}
-                        onDecline={() => send(t('agent.mcpDeclinedMessage', { name: mcpConnect.name }))}
-                        disabled={isDisabled}
-                    />
-                </div>
-            </ComposerOverlay>
-        );
-    }
+    const collapseButton = (
+        <VTooltip description={toggleLabel} asChild>
+            <Button
+                variant="ghost"
+                size="icon"
+                className="size-6 shrink-0"
+                aria-label={toggleLabel}
+                aria-expanded={!isCollapsed}
+                aria-controls={contentId}
+                onClick={() => setIsCollapsed((collapsed) => !collapsed)}
+            >
+                {isCollapsed ? (
+                    <ChevronUp className="size-4" aria-hidden="true" />
+                ) : (
+                    <ChevronDown className="size-4" aria-hidden="true" />
+                )}
+            </Button>
+        </VTooltip>
+    );
 
     return (
         <ComposerOverlay className={className} data-agent-request-input-overlay>
-            <ComposerOverlayQuestion
-                question={displayText}
-                options={options}
-                variant={uxConfig.variant}
-                multiSelect={uxConfig.multiSelect}
-                allowFreeResponse={options.length === 0 || !!freeResponse}
-                placeholder={freeResponse?.placeholder}
-                submitLabel={freeResponse?.submit_label}
-                onSelect={(optionId) => send(optionId, getToolApprovalResponseMetadata(message, optionId))}
-                onMultiSelect={(optionIds) => send(optionIds.join(', '))}
-                onSubmit={(value) => send(value, freeResponse?.metadata)}
-                isLoading={isDisabled}
-            />
+            {mcpConnect ? (
+                <div className="mx-auto w-full max-w-3xl px-3 py-3">
+                    <div className="flex items-start gap-2">
+                        <div className="min-w-0 flex-1 text-sm leading-6 text-foreground/85">{displayText}</div>
+                        {collapseButton}
+                    </div>
+                    <div id={contentId} hidden={isCollapsed}>
+                        <McpRequestInputControls
+                            mcpConnect={mcpConnect}
+                            onMcpConnected={(cfg) => onMcpConnected?.(cfg, getRequestInputResponseMetadata(message))}
+                            onDecline={() => send(t('agent.mcpDeclinedMessage', { name: mcpConnect.name }))}
+                            disabled={isDisabled}
+                        />
+                    </div>
+                </div>
+            ) : (
+                <ComposerOverlayQuestion
+                    question={displayText}
+                    options={options}
+                    variant={uxConfig.variant}
+                    multiSelect={uxConfig.multiSelect}
+                    allowFreeResponse={options.length === 0 || !!freeResponse}
+                    placeholder={freeResponse?.placeholder}
+                    submitLabel={freeResponse?.submit_label}
+                    onSelect={(optionId) => send(optionId, getToolApprovalResponseMetadata(message, optionId))}
+                    onMultiSelect={(optionIds) => send(optionIds.join(', '))}
+                    onSubmit={(value) => send(value, freeResponse?.metadata)}
+                    isLoading={isDisabled}
+                    headerAction={collapseButton}
+                    responseControlsId={contentId}
+                    responseControlsHidden={isCollapsed}
+                />
+            )}
         </ComposerOverlay>
     );
 }