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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.6.0-dev.20261004.085740Z",
+  "version": "1.6.0-dev.20261009.095813Z",
   "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.20261009.095813Z",
+    "@vertesia/common": "1.6.0-dev.20261009.095813Z",
+    "@vertesia/fusion-ux": "1.6.0-dev.20261009.095813Z",
+    "@vertesia/json": "1.6.0-dev.20261009.095813Z",
+    "@vertesia/rich-text": "1.6.0-dev.20261009.095813Z",
     "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": "e45bc09ecf2de4c8fe8a8d39fb52c1521980e7b9",
   "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/button.tsx

@@ -188,6 +188,7 @@ interface CopyButtonProps {
     /** @deprecated use `aria-label` */
     alt?: string;
     'aria-label'?: string;
+    BtnIcon?: React.ReactNode;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon';
     toast?: {
         toast: (options: { status: 'success' | 'error'; title: string; duration: number }) => void;
@@ -197,7 +198,7 @@ interface CopyButtonProps {
 }
 
 const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
-    ({ size, content, toast, className, alt, 'aria-label': ariaLabel, ...props }, ref) => {
+    ({ size, content, toast, className, alt, BtnIcon, 'aria-label': ariaLabel, ...props }, ref) => {
         const [isCopied, setIsCopied] = useState(false);
         const { t } = useUITranslation();
 
@@ -246,7 +247,7 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
                 {...props}
                 title={label}
             >
-                {isCopied ? <Check className="text-success" /> : <CopyIcon className="size-4" />}
+                {isCopied ? <Check className="text-success" /> : (BtnIcon ?? <CopyIcon className="size-4" />)}
             </Button>
         );
     },

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

@@ -287,7 +287,7 @@ export function SelectBox<T = unknown>({
     const renderOptionsContent = () => (
         <>
             {filterBy && (
-                <div className="flex justify-start items-center mb-1">
+                <div className="flex justify-start items-center mb-1 shrink-0">
                     <div className="mx-2">
                         <SearchIcon className="size-4" />
                     </div>
@@ -300,9 +300,9 @@ export function SelectBox<T = unknown>({
                     />
                 </div>
             )}
-            <Command className="overflow-hidden">
+            <Command className={inline ? 'min-h-0 flex-1' : 'overflow-hidden'}>
                 <CommandList
-                    className={inline ? 'max-h-full overflow-y-auto' : 'max-h-[200px] overflow-y-auto'}
+                    className={inline ? 'min-h-0 flex-1 overflow-y-auto' : 'max-h-[200px] overflow-y-auto'}
                     onWheel={(e) => {
                         e.currentTarget.scrollTop += e.deltaY;
                     }}
@@ -342,7 +342,15 @@ export function SelectBox<T = unknown>({
 
     if (inline) {
         return (
-            <div className={clsx(className, border && 'border border-border rounded-md', 'bg-popover p-1', popupClass)}>
+            <div
+                className={clsx(
+                    'flex flex-col',
+                    className,
+                    border && 'border border-border rounded-md',
+                    'bg-popover p-1',
+                    popupClass,
+                )}
+            >
                 {isLoading ? (
                     <div className="flex justify-center items-center p-2 text-muted text-sm">
                         <LoaderCircle className="size-4 animate-spin" />

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/css/index.css

@@ -15,7 +15,7 @@
  *   @import "@vertesia/ui/css/theme.css";
  *
  * Typography (.vprose) is opt-in since it requires @tailwindcss/typography:
- *   @import "@vertesia/ui/css/typography.css" layer(base);
+ *   @import "@vertesia/ui/css/typography.css";
  */
 
 @import "./color.css" layer(base);

package/src/css/typography.css

@@ -1,89 +1,112 @@
-.vprose {
-    @apply prose text-foreground max-w-none;
-}
-
-.vprose p {
-    @apply bg-transparent my-2;
-}
-
-.vprose a {
-    @apply text-info hover:text-info/80;
-}
-
-.vprose pre,
-.vprose code {
-    @apply !bg-muted text-muted my-2;
-}
-
-.vprose h1,
-.vprose h2,
-.vprose h3,
-.vprose h4,
-.vprose h5,
-.vprose h6 {
-    @apply text-foreground;
-}
-
-.vprose strong {
-    @apply text-foreground font-bold;
-}
-
-.vprose em {
-    @apply italic;
-}
-
-.vprose ul {
-    @apply my-3 ps-6 list-disc space-y-1;
-}
-
-.vprose ol {
-    @apply my-3 ps-6 list-decimal space-y-1;
-}
-
-.vprose li {
-    @apply text-mixer-foreground/50 my-2 ps-1;
-}
-
-.vprose blockquote {
-    @apply border-s-4 border-muted/30 ps-4 italic text-muted my-3;
-}
-
-.vprose hr {
-    @apply border-muted/30 my-4;
-}
-
-.vprose h1 {
-    @apply font-bold text-2xl my-2;
-}
-
-.vprose h2 {
-    @apply font-bold text-xl my-2;
-}
-
-.vprose h3 {
-    @apply font-bold text-lg my-2;
-}
-
-.vprose table {
-    @apply min-w-full border-collapse border border-muted/30 my-4;
-}
-
-.vprose th {
-    @apply border border-muted/30 bg-mixer-muted/50 px-4 py-2 text-start text-muted font-bold;
-}
-
-.vprose td {
-    @apply border border-muted/30 px-4 py-2 text-muted;
-}
-
-.vprose code {
-    @apply font-mono text-sm;
-}
-
-.vprose :not(pre) > code {
-    @apply px-1.5 py-0.5 rounded text-muted bg-muted/20;
-}
-
-.vprose .code-language-indicator {
-    @apply text-xs px-3 py-1 rounded-t-md font-mono border-t border-s border-e -mb-2;
+/* Typography is opt-in. Own the layer here so normal imports cannot accidentally put
+   theme colours below the typography plugin's prose utilities. */
+@layer utilities {
+    .vprose {
+        @apply prose max-w-none;
+
+        /* Tailwind Typography's public palette interface. Use the active semantic tokens so
+           branding and dark mode share one source of truth; consumers do not need prose-invert.
+           https://github.com/tailwindlabs/tailwindcss-typography#adding-custom-color-themes */
+        --tw-prose-body: var(--foreground);
+        --tw-prose-headings: var(--foreground);
+        --tw-prose-lead: var(--muted);
+        --tw-prose-links: var(--info);
+        --tw-prose-bold: var(--foreground);
+        --tw-prose-counters: var(--muted);
+        --tw-prose-bullets: var(--muted);
+        --tw-prose-hr: var(--border);
+        --tw-prose-quotes: var(--muted);
+        --tw-prose-quote-borders: var(--border);
+        --tw-prose-captions: var(--muted);
+        --tw-prose-kbd: var(--foreground);
+        --tw-prose-kbd-shadows: var(--border);
+        --tw-prose-code: var(--muted);
+        --tw-prose-pre-code: var(--muted);
+        --tw-prose-pre-bg: var(--muted-background);
+        --tw-prose-th-borders: var(--border);
+        --tw-prose-td-borders: var(--border);
+    }
+
+    .vprose :where(p):not(:where(.not-prose, .not-prose *)) {
+        @apply bg-transparent my-2;
+    }
+
+    .vprose :where(a):not(:where(.not-prose, .not-prose *)) {
+        @variant hover {
+            color: color-mix(in oklab, var(--tw-prose-links) 80%, transparent);
+        }
+    }
+
+    .vprose :where(pre, code):not(:where(.not-prose, .not-prose *)) {
+        @apply my-2;
+        background-color: var(--tw-prose-pre-bg);
+    }
+
+    .vprose :where(strong):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold;
+    }
+
+    .vprose :where(em):not(:where(.not-prose, .not-prose *)) {
+        @apply italic;
+    }
+
+    .vprose :where(ul):not(:where(.not-prose, .not-prose *)) {
+        @apply my-3 ps-6 list-disc space-y-1;
+    }
+
+    .vprose :where(ol):not(:where(.not-prose, .not-prose *)) {
+        @apply my-3 ps-6 list-decimal space-y-1;
+    }
+
+    .vprose :where(li):not(:where(.not-prose, .not-prose *)) {
+        @apply my-2 ps-1;
+    }
+
+    .vprose :where(blockquote):not(:where(.not-prose, .not-prose *)) {
+        @apply border-s-4 ps-4 italic my-3;
+    }
+
+    .vprose :where(hr):not(:where(.not-prose, .not-prose *)) {
+        @apply my-4;
+    }
+
+    .vprose :where(h1):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold text-2xl my-2;
+    }
+
+    .vprose :where(h2):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold text-xl my-2;
+    }
+
+    .vprose :where(h3):not(:where(.not-prose, .not-prose *)) {
+        @apply font-bold text-lg my-2;
+    }
+
+    .vprose :where(table):not(:where(.not-prose, .not-prose *)) {
+        @apply min-w-full border-collapse border my-4;
+        border-color: var(--tw-prose-td-borders);
+    }
+
+    .vprose :where(th):not(:where(.not-prose, .not-prose *)) {
+        @apply border px-4 py-2 text-start font-bold;
+        border-color: var(--tw-prose-th-borders);
+        background-color: var(--muted-background);
+    }
+
+    .vprose :where(td):not(:where(.not-prose, .not-prose *)) {
+        @apply border px-4 py-2;
+        border-color: var(--tw-prose-td-borders);
+    }
+
+    .vprose :where(code):not(:where(.not-prose, .not-prose *)) {
+        @apply font-mono text-sm;
+    }
+
+    .vprose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *)) {
+        @apply px-1.5 py-0.5 rounded;
+    }
+
+    .vprose :where(.code-language-indicator):not(:where(.not-prose, .not-prose *)) {
+        @apply text-xs px-3 py-1 rounded-t-md font-mono border-t border-s border-e -mb-2;
+    }
 }

package/src/env/index.ts

@@ -1,8 +1,6 @@
 import { isTrustedAuthBrokerUrl } from '../session/auth/vertesiaHosts.js';
 
 export {
-    FIRST_PARTY_HOST_PATTERNS,
-    GATEWAY_HOST_PATTERNS,
     isLoopbackHostname,
     isTrustedAuthBrokerUrl,
     normalizeHostname,
@@ -41,7 +39,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>
     );
 }