diff --git a/client/codegen.ts b/client/codegen.ts
index 0d86bd44baa..5d5d4eae707 100644
--- a/client/codegen.ts
+++ b/client/codegen.ts
@@ -89,6 +89,7 @@ const config: CodegenConfig = {
         '../server/libs/automation/automation-configuration/automation-configuration-graphql/src/main/resources/graphql/*.graphqls',
         '../server/libs/automation/automation-search/automation-search-graphql/src/main/resources/graphql/*.graphqls',
         '../server/libs/automation/automation-task/automation-task-graphql/src/main/resources/graphql/*.graphqls',
+        '../server/ee/libs/automation/automation-ai/automation-ai-gateway/automation-ai-gateway-graphql/src/main/resources/graphql/*.graphqls',
         '../server/libs/platform/platform-security/platform-security-graphql/src/main/resources/graphql/*.graphqls',
         '../server/libs/platform/platform-component/platform-component-log/platform-component-log-graphql/src/main/resources/graphql/*.graphqls',
         '../server/libs/ai/mcp/mcp-server-configuration/mcp-server-configuration-graphql/src/main/resources/graphql/*.graphqls',
diff --git a/client/src/graphql/platform/ai-providers/aiDefaultModel.graphql b/client/src/graphql/platform/ai-providers/aiDefaultModel.graphql
new file mode 100644
index 00000000000..d30a0219ef6
--- /dev/null
+++ b/client/src/graphql/platform/ai-providers/aiDefaultModel.graphql
@@ -0,0 +1,6 @@
+query aiDefaultModel($environment: ID!) {
+    aiDefaultModel(environment: $environment) {
+        provider
+        model
+    }
+}
diff --git a/client/src/graphql/platform/ai-providers/aiProviderCatalog.graphql b/client/src/graphql/platform/ai-providers/aiProviderCatalog.graphql
new file mode 100644
index 00000000000..30e6a57291b
--- /dev/null
+++ b/client/src/graphql/platform/ai-providers/aiProviderCatalog.graphql
@@ -0,0 +1,13 @@
+query aiProviderCatalog($environment: ID!) {
+    aiProviderCatalog(environment: $environment) {
+        key
+        name
+        icon
+        enabled
+        supportsModelById
+        models {
+            name
+            label
+        }
+    }
+}
diff --git a/client/src/pages/platform/workflow-editor/components/properties/components/property-code-editor/property-code-editor-dialog/hooks/usePropertyCodeEditorDialog.ts b/client/src/pages/platform/workflow-editor/components/properties/components/property-code-editor/property-code-editor-dialog/hooks/usePropertyCodeEditorDialog.ts
index 47aaf35b37d..cd5d8849b07 100644
--- a/client/src/pages/platform/workflow-editor/components/properties/components/property-code-editor/property-code-editor-dialog/hooks/usePropertyCodeEditorDialog.ts
+++ b/client/src/pages/platform/workflow-editor/components/properties/components/property-code-editor/property-code-editor-dialog/hooks/usePropertyCodeEditorDialog.ts
@@ -1,10 +1,17 @@
 import {usePropertyCodeEditorDialogStore} from '@/pages/platform/workflow-editor/components/properties/components/property-code-editor/property-code-editor-dialog/stores/usePropertyCodeEditorDialogStore';
 import {getTask} from '@/pages/platform/workflow-editor/utils/getTask';
-import {useCopilotStore} from '@/shared/components/copilot/stores/useCopilotStore';
+import {parseJson} from '@/shared/components/ai-chat/messages/toToolResultDataPart';
+import useCopilotCodeToolResultStore from '@/shared/components/copilot/stores/useCopilotCodeToolResultStore';
+import useCopilotPostTurnRegistry from '@/shared/components/copilot/stores/useCopilotPostTurnRegistry';
+import {MODE, Source, useCopilotStore} from '@/shared/components/copilot/stores/useCopilotStore';
+import useCopilotToolResultHandlerRegistry from '@/shared/components/copilot/stores/useCopilotToolResultHandlerRegistry';
+import {extractScriptFromDefinition} from '@/shared/components/copilot/utils/extractScriptFromDefinition';
 import {Workflow} from '@/shared/middleware/platform/configuration';
 import {useCallback, useEffect, useState} from 'react';
 import {useShallow} from 'zustand/react/shallow';
 
+const APPLIED_TO_EDITOR_MESSAGE = '✓ Applied changes to the editor.';
+
 interface UsePropertyCodeEditorDialogProps {
     onClose?: () => void;
     value?: string;
@@ -81,6 +88,45 @@ export const usePropertyCodeEditorDialog = ({
         }
     }, [value, editorValue, setDirty, setSaving]);
 
+    useEffect(() => {
+        const unregisterToolResult = useCopilotToolResultHandlerRegistry
+            .getState()
+            .register('updateScriptComponentCode', (content) => {
+                const result = parseJson<{definition?: string}>(content, 'updateScriptComponentCode result');
+
+                if (result?.definition) {
+                    useCopilotCodeToolResultStore.getState().setLastUpdatedDefinition(result.definition);
+                }
+            });
+
+        const unregisterPostTurn = useCopilotPostTurnRegistry.getState().register(Source.CODE_EDITOR, () => {
+            const {appendToLastAssistantMessage, context} = useCopilotStore.getState();
+
+            const definition = useCopilotCodeToolResultStore.getState().lastUpdatedDefinition;
+
+            useCopilotCodeToolResultStore.getState().clear();
+
+            if (context?.mode !== MODE.BUILD || definition == null) {
+                return;
+            }
+
+            const code = extractScriptFromDefinition(definition, workflowNodeName);
+
+            if (code == null) {
+                return;
+            }
+
+            setEditorValue(code);
+
+            appendToLastAssistantMessage(APPLIED_TO_EDITOR_MESSAGE);
+        });
+
+        return () => {
+            unregisterToolResult();
+            unregisterPostTurn();
+        };
+    }, [setEditorValue, workflowNodeName]);
+
     const currentWorkflowTask = getTask({
         tasks: workflow.tasks || [],
         workflowNodeName,
diff --git a/client/src/shared/components/ai-chat/messages/AskUserQuestionMessage.tsx b/client/src/shared/components/ai-chat/messages/AskUserQuestionMessage.tsx
new file mode 100644
index 00000000000..bdeb7d4aa2d
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/AskUserQuestionMessage.tsx
@@ -0,0 +1,439 @@
+import Button from '@/components/Button/Button';
+import ComboBox from '@/components/ComboBox/ComboBox';
+import {MultiSelect} from '@/components/MultiSelect/MultiSelect';
+import {Input} from '@/components/ui/input';
+import {useAiChatAskedQuestionsStore} from '@/shared/components/ai-chat/stores/useAiChatAskedQuestionsStore';
+import {DataMessagePartProps, useThreadRuntime} from '@assistant-ui/react';
+import {ArrowLeftIcon, CheckIcon, XIcon} from 'lucide-react';
+import {useMemo, useState} from 'react';
+
+export interface AskUserQuestionOptionDataI {
+    description?: string;
+    label: string;
+}
+
+export interface AskUserQuestionDataI {
+    awaitingAnswer?: boolean;
+    kind: 'ask-user-question';
+    questions: Array<{
+        header?: string;
+        multiSelect: boolean;
+        options: AskUserQuestionOptionDataI[];
+        question: string;
+    }>;
+}
+
+const OTHER_OPTION_LABEL = '__other__';
+
+/** Above this many options, single/multi select render a searchable control instead of a stacked list. */
+export const COMBOBOX_OPTION_THRESHOLD = 8;
+
+/** Match LLM-supplied option labels that should trigger the free-form input instead of submitting the literal text. */
+const isOtherLabel = (label: string) => /^other\b/i.test(label.trim());
+
+/**
+ * Renders the LLM's askUserQuestion tool result: one question is a single card, multiple become a wizard
+ * that collects all answers and submits them as one combined user message (persisted to Spring AI chat
+ * memory, so picks survive a refresh). An "Other" option opens a free-form input, deduplicated against any
+ * "Other" the LLM already supplied. Answers are keyed in {@link useAiChatAskedQuestionsStore} by a
+ * fingerprint of the questions array so re-mounting replays the summary instead of re-prompting.
+ */
+const AskUserQuestionMessage = ({data}: DataMessagePartProps<AskUserQuestionDataI>) => {
+    const questions = useMemo(() => data.questions ?? [], [data.questions]);
+
+    const fingerprint = useMemo(() => fingerprintQuestions(questions), [questions]);
+
+    const isAnswered = useAiChatAskedQuestionsStore((state) => state.hasAnswered(fingerprint));
+    const persistedAnswer = useAiChatAskedQuestionsStore((state) => state.getAnswer(fingerprint));
+    const markAnswered = useAiChatAskedQuestionsStore((state) => state.markAnswered);
+
+    const [stepIndex, setStepIndex] = useState(0);
+    const [answers, setAnswers] = useState<Record<number, string>>({});
+
+    const threadRuntime = useThreadRuntime();
+
+    if (questions.length === 0) {
+        return null;
+    }
+
+    if (isAnswered) {
+        return <AnsweredSummary persistedAnswer={persistedAnswer} />;
+    }
+
+    const totalSteps = questions.length;
+    const currentQuestion = questions[stepIndex];
+    const isLastStep = stepIndex === totalSteps - 1;
+
+    const submitStep = (answer: string) => {
+        const nextAnswers = {...answers, [stepIndex]: answer};
+
+        setAnswers(nextAnswers);
+
+        if (!isLastStep) {
+            setStepIndex(stepIndex + 1);
+
+            return;
+        }
+
+        const summary = buildAnswerSummary(questions, nextAnswers);
+        const messageText = totalSteps === 1 ? `User picked: ${answer}` : `User picked:\n${summary}`;
+
+        markAnswered(fingerprint, summary);
+
+        threadRuntime.append({
+            content: [{text: messageText, type: 'text'}],
+            role: 'user',
+        });
+    };
+
+    const goBack = () => {
+        if (stepIndex > 0) {
+            setStepIndex(stepIndex - 1);
+        }
+    };
+
+    return (
+        <div className="mt-2 flex flex-col gap-3 rounded-md border border-border bg-muted/30 p-3">
+            <WizardHeader header={currentQuestion.header} stepIndex={stepIndex} totalSteps={totalSteps} />
+
+            <div className="text-sm">{currentQuestion.question}</div>
+
+            <StepBody
+                initialAnswer={answers[stepIndex]}
+                isLastStep={isLastStep}
+                onSubmit={submitStep}
+                question={currentQuestion}
+            />
+
+            {stepIndex > 0 && (
+                <div className="flex justify-end">
+                    <button
+                        className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                        onClick={goBack}
+                        type="button"
+                    >
+                        <ArrowLeftIcon className="size-3" />
+                        Previous
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+type WizardHeaderPropsType = {
+    header?: string;
+    stepIndex: number;
+    totalSteps: number;
+};
+
+const WizardHeader = ({header, stepIndex, totalSteps}: WizardHeaderPropsType) => {
+    if (totalSteps === 1) {
+        if (!header) {
+            return null;
+        }
+
+        return <div className="text-xs font-semibold text-muted-foreground uppercase">{header}</div>;
+    }
+
+    return (
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>
+                Question {stepIndex + 1} of {totalSteps}
+            </span>
+
+            {header && <span className="font-semibold uppercase">{header}</span>}
+        </div>
+    );
+};
+
+type StepBodyPropsType = {
+    initialAnswer?: string;
+    isLastStep: boolean;
+    onSubmit: (answer: string) => void;
+    question: AskUserQuestionDataI['questions'][number];
+};
+
+const StepBody = ({initialAnswer, isLastStep, onSubmit, question}: StepBodyPropsType) => {
+    if (question.multiSelect) {
+        return (
+            <MultiSelectStep
+                initialAnswer={initialAnswer}
+                isLastStep={isLastStep}
+                onSubmit={onSubmit}
+                question={question}
+            />
+        );
+    }
+
+    return <SingleSelectStep isLastStep={isLastStep} onSubmit={onSubmit} question={question} />;
+};
+
+type SingleSelectStepPropsType = {
+    isLastStep: boolean;
+    onSubmit: (answer: string) => void;
+    question: AskUserQuestionDataI['questions'][number];
+};
+
+const SingleSelectStep = ({isLastStep, onSubmit, question}: SingleSelectStepPropsType) => {
+    const [otherTyping, setOtherTyping] = useState(false);
+    const [otherValue, setOtherValue] = useState('');
+
+    // Suppress our injected "Other…" affordance if the LLM already supplied an Other-style option — keeps the
+    // UI from showing two duplicate "Other" entries side by side.
+    const llmSuppliedOther = question.options.some((option) => isOtherLabel(option.label));
+
+    const handleClick = (label: string) => {
+        if (label === OTHER_OPTION_LABEL || isOtherLabel(label)) {
+            setOtherTyping(true);
+
+            return;
+        }
+
+        onSubmit(label);
+    };
+
+    const handleOtherSubmit = () => {
+        const trimmed = otherValue.trim();
+
+        if (trimmed.length === 0) {
+            return;
+        }
+
+        onSubmit(trimmed);
+    };
+
+    if (otherTyping) {
+        return (
+            <div className="flex gap-2">
+                <Input
+                    autoFocus
+                    className="flex-1"
+                    onChange={(event) => setOtherValue(event.target.value)}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                            event.preventDefault();
+                            handleOtherSubmit();
+                        }
+
+                        if (event.key === 'Escape') {
+                            event.preventDefault();
+
+                            setOtherTyping(false);
+                            setOtherValue('');
+                        }
+                    }}
+                    placeholder="Type your answer…"
+                    value={otherValue}
+                />
+
+                <Button
+                    disabled={otherValue.trim().length === 0}
+                    label={isLastStep ? 'Submit all' : 'Next'}
+                    onClick={handleOtherSubmit}
+                />
+
+                <Button
+                    icon={<XIcon />}
+                    onClick={() => {
+                        setOtherTyping(false);
+                        setOtherValue('');
+                    }}
+                    size="icon"
+                    title="Cancel and go back to the option buttons"
+                    variant="outline"
+                />
+            </div>
+        );
+    }
+
+    if (question.options.length > COMBOBOX_OPTION_THRESHOLD) {
+        const comboBoxItems = question.options.map((option) => ({label: option.label, value: option.label}));
+
+        if (!llmSuppliedOther) {
+            comboBoxItems.push({label: 'Other…', value: OTHER_OPTION_LABEL});
+        }
+
+        return (
+            <ComboBox
+                emptyMessage="No match"
+                items={comboBoxItems}
+                onChange={(item) => {
+                    if (item) {
+                        handleClick(item.value as string);
+                    }
+                }}
+                value={undefined}
+            />
+        );
+    }
+
+    return (
+        <div className="flex flex-col items-start gap-2">
+            {question.options.map((option) => (
+                <Button
+                    key={option.label}
+                    label={option.label}
+                    onClick={() => handleClick(option.label)}
+                    title={option.description}
+                    variant="outline"
+                />
+            ))}
+
+            {!llmSuppliedOther && (
+                <Button
+                    label="Other…"
+                    onClick={() => setOtherTyping(true)}
+                    title="Type a free-form answer if none of the listed options fit"
+                    variant="outline"
+                />
+            )}
+        </div>
+    );
+};
+
+type MultiSelectStepPropsType = {
+    initialAnswer?: string;
+    isLastStep: boolean;
+    onSubmit: (answer: string) => void;
+    question: AskUserQuestionDataI['questions'][number];
+};
+
+const MultiSelectStep = ({initialAnswer, isLastStep, onSubmit, question}: MultiSelectStepPropsType) => {
+    // Restore checkbox state when the user navigates Previous → Next without changing their selection.
+    const initialSet = useMemo(
+        () => (initialAnswer ? new Set(initialAnswer.split(', ')) : new Set<string>()),
+        [initialAnswer]
+    );
+
+    const [selectedLabels, setSelectedLabels] = useState<Set<string>>(initialSet);
+
+    const toggle = (label: string) => {
+        setSelectedLabels((previous) => {
+            const next = new Set(previous);
+
+            if (next.has(label)) {
+                next.delete(label);
+            } else {
+                next.add(label);
+            }
+
+            return next;
+        });
+    };
+
+    const handleSubmit = () => {
+        if (selectedLabels.size === 0) {
+            return;
+        }
+
+        onSubmit(Array.from(selectedLabels).join(', '));
+    };
+
+    if (question.options.length > COMBOBOX_OPTION_THRESHOLD) {
+        const multiSelectOptions = question.options.map((option) => ({label: option.label, value: option.label}));
+
+        return (
+            <div className="flex flex-col gap-2">
+                <MultiSelect
+                    onValueChange={(values) => setSelectedLabels(new Set(values))}
+                    options={multiSelectOptions}
+                    value={Array.from(selectedLabels)}
+                />
+
+                <div className="flex justify-end">
+                    <Button
+                        disabled={selectedLabels.size === 0}
+                        label={isLastStep ? 'Submit all' : 'Next'}
+                        onClick={handleSubmit}
+                    />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-2">
+            {question.options.map((option) => (
+                <label className="flex cursor-pointer items-start gap-2 text-sm hover:bg-muted/50" key={option.label}>
+                    <input
+                        checked={selectedLabels.has(option.label)}
+                        className="mt-0.5"
+                        onChange={() => toggle(option.label)}
+                        type="checkbox"
+                    />
+
+                    <span className="flex flex-col">
+                        <span className="font-medium">{option.label}</span>
+
+                        {option.description && (
+                            <span className="text-xs text-muted-foreground">{option.description}</span>
+                        )}
+                    </span>
+                </label>
+            ))}
+
+            <div className="flex justify-end">
+                <Button
+                    disabled={selectedLabels.size === 0}
+                    label={isLastStep ? 'Submit all' : 'Next'}
+                    onClick={handleSubmit}
+                />
+            </div>
+        </div>
+    );
+};
+
+const AnsweredSummary = ({persistedAnswer}: {persistedAnswer?: string}) => {
+    if (!persistedAnswer) {
+        return (
+            <div className="mt-2 flex items-center gap-2 rounded-md border border-border bg-muted/30 p-3 text-sm">
+                <CheckIcon className="size-4 text-emerald-600" />
+
+                <span>
+                    Picked: <span className="font-medium">(answered)</span>
+                </span>
+            </div>
+        );
+    }
+
+    // Multi-line summary means the wizard had multiple questions and we stashed the labeled
+    // "- Q → A" list as the persisted answer. Render as a block so each Q/A pair is on its own line.
+    const isMultiLine = persistedAnswer.includes('\n');
+
+    if (!isMultiLine) {
+        return (
+            <div className="mt-2 flex items-center gap-2 rounded-md border border-border bg-muted/30 p-3 text-sm">
+                <CheckIcon className="size-4 text-emerald-600" />
+
+                <span>
+                    Picked: <span className="font-medium">{persistedAnswer}</span>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="mt-2 flex items-start gap-2 rounded-md border border-border bg-muted/30 p-3 text-sm">
+            <CheckIcon className="mt-0.5 size-4 shrink-0 text-emerald-600" />
+
+            <div className="flex flex-col gap-1">
+                <span className="font-medium">Picked:</span>
+
+                <pre className="font-sans text-xs whitespace-pre-wrap text-muted-foreground">{persistedAnswer}</pre>
+            </div>
+        </div>
+    );
+};
+
+function buildAnswerSummary(questions: AskUserQuestionDataI['questions'], answers: Record<number, string>): string {
+    return questions.map((question, index) => `- ${question.question} → ${answers[index] ?? ''}`).join('\n');
+}
+
+function fingerprintQuestions(questions: AskUserQuestionDataI['questions']): string {
+    return questions
+        .map((question) => `${question.question}::${question.options.map((option) => option.label).join(',')}`)
+        .join('||');
+}
+
+export default AskUserQuestionMessage;
diff --git a/client/src/shared/components/ai-chat/messages/CreateConnectionMessage.tsx b/client/src/shared/components/ai-chat/messages/CreateConnectionMessage.tsx
new file mode 100644
index 00000000000..5c94b46f7f1
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/CreateConnectionMessage.tsx
@@ -0,0 +1,110 @@
+import Button from '@/components/Button/Button';
+import ConnectionDialog from '@/shared/components/connection/ConnectionDialog';
+import {Connection} from '@/shared/middleware/automation/configuration';
+import {useCreateConnectionMutation} from '@/shared/mutations/automation/connections.mutations';
+import {useGetComponentDefinitionsQuery} from '@/shared/queries/automation/componentDefinitions.queries';
+import {ConnectionKeys, useGetConnectionTagsQuery} from '@/shared/queries/automation/connections.queries';
+import {useGetComponentDefinitionQuery} from '@/shared/queries/platform/componentDefinitions.queries';
+import {useEnvironmentStore} from '@/shared/stores/useEnvironmentStore';
+import {DataMessagePartProps} from '@assistant-ui/react';
+import {useQueryClient} from '@tanstack/react-query';
+import {CheckIcon} from 'lucide-react';
+import {useState} from 'react';
+
+export interface CreateConnectionDataI {
+    componentLabel: string;
+    componentName: string;
+    kind: 'create-connection';
+    suggestedName?: string;
+}
+
+/**
+ * Renders the LLM's createConnection tool result as a single "Connect &lt;Component&gt;" button that opens
+ * the ConnectionDialog. Companion to {@code SelectConnectionMessage} (the "pick an existing connection"
+ * intent): splitting the two intents across separate tools keeps each UI unambiguous — this one only
+ * creates, never offers a picker.
+ */
+const CreateConnectionMessage = ({data}: DataMessagePartProps<CreateConnectionDataI>) => {
+    const [createdConnection, setCreatedConnection] = useState<{id: number; name: string} | undefined>();
+    const [dialogOpen, setDialogOpen] = useState(false);
+
+    const currentEnvironmentId = useEnvironmentStore((state) => state.currentEnvironmentId);
+
+    const connectionTagsQueryResult = useGetConnectionTagsQuery();
+
+    const queryClient = useQueryClient();
+
+    const {
+        data: componentDefinitions,
+        error: componentDefinitionsError,
+        isError: componentDefinitionsIsError,
+        isLoading: componentDefinitionsLoading,
+        refetch: refetchComponentDefinitions,
+    } = useGetComponentDefinitionsQuery({
+        connectionDefinitions: true,
+    });
+
+    const {data: targetComponentDefinition} = useGetComponentDefinitionQuery(
+        {componentName: data.componentName, componentVersion: 1},
+        Boolean(data.componentName)
+    );
+
+    const handleConnectionCreate = async (newConnectionId: number) => {
+        await queryClient.invalidateQueries({queryKey: ConnectionKeys.connections});
+
+        const fallbackName = data.suggestedName || `${data.componentLabel} connection`;
+
+        setCreatedConnection({id: newConnectionId, name: fallbackName});
+    };
+
+    if (componentDefinitionsLoading) {
+        return null;
+    }
+
+    if (componentDefinitionsIsError || !componentDefinitions) {
+        return (
+            <div className="mt-2 flex items-center gap-2">
+                <span className="text-sm text-destructive">
+                    Could not load component definitions
+                    {componentDefinitionsError ? `: ${componentDefinitionsError.message}` : ''}.
+                </span>
+
+                <Button label="Retry" onClick={() => refetchComponentDefinitions()} variant="outline" />
+            </div>
+        );
+    }
+
+    if (createdConnection) {
+        return (
+            <div className="mt-2 flex items-center gap-2 text-sm">
+                <CheckIcon className="size-4 text-emerald-600" />
+
+                <span>
+                    Connection ready: <span className="font-medium">{createdConnection.name}</span>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="mt-2 flex w-full min-w-0 items-center gap-2">
+            <Button label={`Connect ${data.componentLabel}`} onClick={() => setDialogOpen(true)} variant="outline" />
+
+            {dialogOpen && (
+                <ConnectionDialog
+                    componentDefinition={targetComponentDefinition}
+                    componentDefinitions={componentDefinitions}
+                    connection={{environmentId: currentEnvironmentId} as Connection}
+                    connectionTagsQueryKey={ConnectionKeys.connectionTags}
+                    connectionsQueryKey={ConnectionKeys.connections}
+                    onClose={() => setDialogOpen(false)}
+                    onConnectionCreate={handleConnectionCreate}
+                    useCreateConnectionMutation={useCreateConnectionMutation}
+                    useGetConnectionTagsQuery={() => connectionTagsQueryResult}
+                />
+            )}
+        </div>
+    );
+};
+
+export default CreateConnectionMessage;
diff --git a/client/src/shared/components/ai-chat/messages/RunErrorMessage.tsx b/client/src/shared/components/ai-chat/messages/RunErrorMessage.tsx
new file mode 100644
index 00000000000..c02c701b66b
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/RunErrorMessage.tsx
@@ -0,0 +1,26 @@
+import {DataMessagePartProps} from '@assistant-ui/react';
+import {AlertCircleIcon} from 'lucide-react';
+
+export interface RunErrorDataI {
+    message: string;
+}
+
+/**
+ * Renders a RUN_ERROR inline in the assistant bubble with red foreground, a left border, and an alert icon,
+ * so the failure reads as a distinct system error rather than a normal assistant reply.
+ */
+const RunErrorMessage = ({data}: DataMessagePartProps<RunErrorDataI>) => {
+    return (
+        <div
+            className="my-2 flex items-start gap-2 rounded-md border-l-4 border-red-500 bg-red-50 px-3 py-2 text-sm text-red-700 dark:bg-red-950/40 dark:text-red-300"
+            data-testid="ai-hub-run-error"
+            role="alert"
+        >
+            <AlertCircleIcon className="mt-0.5 size-4 shrink-0" />
+
+            <div className="break-words whitespace-pre-wrap">{data.message}</div>
+        </div>
+    );
+};
+
+export default RunErrorMessage;
diff --git a/client/src/shared/components/ai-chat/messages/SelectConnectionMessage.tsx b/client/src/shared/components/ai-chat/messages/SelectConnectionMessage.tsx
new file mode 100644
index 00000000000..ccbb47f5cfc
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/SelectConnectionMessage.tsx
@@ -0,0 +1,129 @@
+import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/Select/Select';
+import {useWorkspaceStore} from '@/pages/automation/stores/useWorkspaceStore';
+import EnvironmentBadge from '@/shared/components/EnvironmentBadge';
+import {useGetWorkspaceConnectionsQuery} from '@/shared/queries/automation/connections.queries';
+import {useGetConnectionDefinitionQuery} from '@/shared/queries/platform/connectionDefinitions.queries';
+import {DataMessagePartProps, useThreadRuntime} from '@assistant-ui/react';
+import {CheckIcon} from 'lucide-react';
+import {useEffect, useMemo, useState} from 'react';
+
+export interface SelectConnectionDataI {
+    componentLabel: string;
+    componentName: string;
+    kind: 'select-connection';
+}
+
+/**
+ * Renders the LLM's selectConnection tool result as a dropdown of the workspace's existing connections for a
+ * component. Companion to {@code CreateConnectionMessage} (the "create new" intent). On pick, the choice is
+ * dispatched as a system message ("User picked: <name>") via the assistant-ui thread runtime so the agent's
+ * next turn reads it from chat memory. The dropdown dims once a later message lands on the thread.
+ */
+const SelectConnectionMessage = ({data}: DataMessagePartProps<SelectConnectionDataI>) => {
+    const [pickedConnection, setPickedConnection] = useState<{id: number; name: string} | undefined>();
+    const [supersededByLaterMessage, setSupersededByLaterMessage] = useState(false);
+
+    const currentWorkspaceId = useWorkspaceStore((state) => state.currentWorkspaceId);
+
+    const threadRuntime = useThreadRuntime();
+
+    const {data: connectionDefinition} = useGetConnectionDefinitionQuery(
+        {componentName: data.componentName, componentVersion: 1},
+        Boolean(data.componentName)
+    );
+
+    const {data: existingConnections} = useGetWorkspaceConnectionsQuery(
+        {
+            componentName: data.componentName,
+            connectionVersion: connectionDefinition?.version,
+            id: currentWorkspaceId!,
+        },
+        Boolean(connectionDefinition?.version) && currentWorkspaceId != null
+    );
+
+    const connections = useMemo(() => existingConnections ?? [], [existingConnections]);
+
+    useEffect(() => {
+        const initialMessageCount = threadRuntime.getState().messages.length;
+
+        return threadRuntime.subscribe(() => {
+            const currentCount = threadRuntime.getState().messages.length;
+
+            if (currentCount > initialMessageCount) {
+                setSupersededByLaterMessage(true);
+            }
+        });
+    }, [threadRuntime]);
+
+    const handleSelectChange = (value: string) => {
+        const connectionId = Number(value);
+        const connection = (existingConnections ?? []).find((candidate) => candidate.id === connectionId);
+
+        if (!connection || connection.id == null) {
+            return;
+        }
+
+        setPickedConnection({id: connection.id, name: connection.name});
+
+        threadRuntime.append({
+            content: [{text: `User picked: ${connection.name} (ID: ${connection.id})`, type: 'text'}],
+            role: 'system',
+        });
+    };
+
+    if (pickedConnection) {
+        return (
+            <div className="mt-2 flex items-center gap-2 text-sm">
+                <CheckIcon className="size-4 text-emerald-600" />
+
+                <span>
+                    Picked: <span className="font-medium">{pickedConnection.name}</span>
+                </span>
+            </div>
+        );
+    }
+
+    const isEmpty = (existingConnections?.length ?? 0) === 0;
+
+    if (isEmpty) {
+        return (
+            <div className="mt-2 rounded-md border border-border bg-muted/30 p-3 text-sm text-muted-foreground">
+                No existing {data.componentLabel} connection in this workspace. Ask the assistant to create one.
+            </div>
+        );
+    }
+
+    return (
+        <div className={`mt-2 flex w-full min-w-0 items-center gap-2 ${supersededByLaterMessage ? 'opacity-60' : ''}`}>
+            <Select disabled={supersededByLaterMessage} onValueChange={handleSelectChange}>
+                <div className="min-w-0 flex-1">
+                    <SelectTrigger>
+                        <SelectValue placeholder={`Choose ${data.componentLabel} connection...`} />
+                    </SelectTrigger>
+                </div>
+
+                <SelectContent>
+                    {connections.map((connection) => (
+                        <SelectItem key={connection.id} value={connection.id!.toString()}>
+                            <div className="flex items-center space-x-1">
+                                <span>{connection.name}</span>
+
+                                {connection.tags && connection.tags.length > 0 && (
+                                    <span className="text-xs text-gray-500">
+                                        {connection.tags.map((tag) => tag.name).join(', ')}
+                                    </span>
+                                )}
+
+                                {connection.environmentId != null && (
+                                    <EnvironmentBadge environmentId={+connection.environmentId} />
+                                )}
+                            </div>
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    );
+};
+
+export default SelectConnectionMessage;
diff --git a/client/src/shared/components/ai-chat/messages/SelectPropertyOptionMessage.tsx b/client/src/shared/components/ai-chat/messages/SelectPropertyOptionMessage.tsx
new file mode 100644
index 00000000000..bc27100e269
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/SelectPropertyOptionMessage.tsx
@@ -0,0 +1,101 @@
+import ComboBox from '@/components/ComboBox/ComboBox';
+import {DataMessagePartProps, useThreadRuntime} from '@assistant-ui/react';
+import {CheckIcon} from 'lucide-react';
+import {useEffect, useState} from 'react';
+
+export interface SelectPropertyOptionItemI {
+    label: string;
+    value: string;
+}
+
+export interface SelectPropertyOptionDataI {
+    componentName: string;
+    kind: 'select-property-option';
+    options: SelectPropertyOptionItemI[];
+    propertyName: string;
+    truncated?: boolean;
+}
+
+/**
+ * Renders the selectPropertyOption / selectTriggerPropertyOption tool result as a searchable picker of all
+ * options the tool fetched from the connection (taken straight from the tool result, not re-emitted by the
+ * LLM). On pick, the option's real value is submitted as a system message "User picked: <label> (value:
+ * <value>)" so the agent writes the value (e.g. a channel id) into the workflow.
+ */
+const SelectPropertyOptionMessage = ({data}: DataMessagePartProps<SelectPropertyOptionDataI>) => {
+    const [picked, setPicked] = useState<SelectPropertyOptionItemI | undefined>();
+    const [superseded, setSuperseded] = useState(false);
+
+    const threadRuntime = useThreadRuntime();
+
+    useEffect(() => {
+        const initialCount = threadRuntime.getState().messages.length;
+
+        return threadRuntime.subscribe(() => {
+            if (threadRuntime.getState().messages.length > initialCount) {
+                setSuperseded(true);
+            }
+        });
+    }, [threadRuntime]);
+
+    if (picked) {
+        return (
+            <div className="mt-2 flex items-center gap-2 text-sm">
+                <CheckIcon className="size-4 text-emerald-600" />
+
+                <span>
+                    Picked: <span className="font-medium">{picked.label}</span>
+                </span>
+            </div>
+        );
+    }
+
+    const options: SelectPropertyOptionItemI[] = data.options ?? [];
+
+    if (options.length === 0) {
+        return (
+            <div className="mt-2 rounded-md border border-border bg-muted/30 p-3 text-sm text-muted-foreground">
+                No options available for {data.propertyName}.
+            </div>
+        );
+    }
+
+    const items = options.map((option) => ({label: option.label, optionValue: option.value, value: option.label}));
+
+    return (
+        <div className={`mt-2 flex w-full min-w-0 flex-col gap-1 ${superseded ? 'opacity-60' : ''}`}>
+            <ComboBox
+                disabled={superseded}
+                emptyMessage="No match"
+                items={items}
+                onChange={(item) => {
+                    if (!item) {
+                        return;
+                    }
+
+                    const option = options.find((candidate) => candidate.value === item.optionValue);
+
+                    if (!option) {
+                        return;
+                    }
+
+                    setPicked(option);
+
+                    threadRuntime.append({
+                        content: [{text: `User picked: ${option.label} (value: ${option.value})`, type: 'text'}],
+                        role: 'system',
+                    });
+                }}
+                value={undefined}
+            />
+
+            {data.truncated && (
+                <span className="text-xs text-muted-foreground">
+                    Showing the first {options.length}. Narrow with a search term if you don&apos;t see yours.
+                </span>
+            )}
+        </div>
+    );
+};
+
+export default SelectPropertyOptionMessage;
diff --git a/client/src/shared/components/ai-chat/messages/aiChatDataComponents.tsx b/client/src/shared/components/ai-chat/messages/aiChatDataComponents.tsx
new file mode 100644
index 00000000000..d8aba9ba209
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/aiChatDataComponents.tsx
@@ -0,0 +1,24 @@
+import AskUserQuestionMessage, {
+    AskUserQuestionDataI,
+} from '@/shared/components/ai-chat/messages/AskUserQuestionMessage';
+import CreateConnectionMessage, {
+    CreateConnectionDataI,
+} from '@/shared/components/ai-chat/messages/CreateConnectionMessage';
+import RunErrorMessage, {RunErrorDataI} from '@/shared/components/ai-chat/messages/RunErrorMessage';
+import SelectConnectionMessage, {
+    SelectConnectionDataI,
+} from '@/shared/components/ai-chat/messages/SelectConnectionMessage';
+import SelectPropertyOptionMessage, {
+    SelectPropertyOptionDataI,
+} from '@/shared/components/ai-chat/messages/SelectPropertyOptionMessage';
+import {DataMessagePartProps} from '@assistant-ui/react';
+
+export const aiChatDataComponents = {
+    'ask-user-question': (props: DataMessagePartProps<AskUserQuestionDataI>) => <AskUserQuestionMessage {...props} />,
+    'create-connection': (props: DataMessagePartProps<CreateConnectionDataI>) => <CreateConnectionMessage {...props} />,
+    'run-error': (props: DataMessagePartProps<RunErrorDataI>) => <RunErrorMessage {...props} />,
+    'select-connection': (props: DataMessagePartProps<SelectConnectionDataI>) => <SelectConnectionMessage {...props} />,
+    'select-property-option': (props: DataMessagePartProps<SelectPropertyOptionDataI>) => (
+        <SelectPropertyOptionMessage {...props} />
+    ),
+};
diff --git a/client/src/shared/components/ai-chat/messages/humanizeAgentErrorMessage.ts b/client/src/shared/components/ai-chat/messages/humanizeAgentErrorMessage.ts
new file mode 100644
index 00000000000..4d70113eae0
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/humanizeAgentErrorMessage.ts
@@ -0,0 +1,42 @@
+/**
+ * Extracts a user-readable explanation from the raw RUN_ERROR message Spring AI surfaces (typically a Java
+ * exception toString wrapping a provider error envelope). Tries common provider envelopes (Anthropic, OpenAI)
+ * first, falls back to stripping a "ClassName: message" prefix, and returns the input unchanged when nothing
+ * matches — so the FQCN, HTTP code, and request_id never leak into the transcript. Shared by the AI Hub and
+ * Copilot runtime providers.
+ */
+export const humanizeAgentErrorMessage = (raw: string): string => {
+    const jsonStart = raw.indexOf('{');
+
+    if (jsonStart !== -1) {
+        const jsonEnd = raw.lastIndexOf('}');
+
+        if (jsonEnd > jsonStart) {
+            const candidate = raw.slice(jsonStart, jsonEnd + 1);
+
+            try {
+                const parsed = JSON.parse(candidate);
+                const nestedMessage =
+                    typeof parsed?.error?.message === 'string'
+                        ? parsed.error.message
+                        : typeof parsed?.message === 'string'
+                          ? parsed.message
+                          : null;
+
+                if (nestedMessage && nestedMessage.length > 0) {
+                    return nestedMessage;
+                }
+            } catch {
+                // Fall through to the regex-based strip.
+            }
+        }
+    }
+
+    const exceptionStripMatch = raw.match(/^[\w.$]+(?:Exception|Error):\s+(.+)$/s);
+
+    if (exceptionStripMatch && exceptionStripMatch[1].length > 0) {
+        return exceptionStripMatch[1];
+    }
+
+    return raw;
+};
diff --git a/client/src/shared/components/ai-chat/messages/tests/AskUserQuestionMessage.test.tsx b/client/src/shared/components/ai-chat/messages/tests/AskUserQuestionMessage.test.tsx
new file mode 100644
index 00000000000..e2f1a061b6e
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/tests/AskUserQuestionMessage.test.tsx
@@ -0,0 +1,335 @@
+import {aiChatAskedQuestionsStore} from '@/shared/components/ai-chat/stores/useAiChatAskedQuestionsStore';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+const threadMessages: Array<unknown> = [];
+const appendCalls: Array<unknown> = [];
+
+vi.mock('@assistant-ui/react', async () => {
+    const actual = await vi.importActual<typeof import('@assistant-ui/react')>('@assistant-ui/react');
+
+    return {
+        ...actual,
+        useThreadRuntime: vi.fn(() => ({
+            append: (message: unknown) => {
+                appendCalls.push(message);
+                threadMessages.push(message);
+            },
+            getState: () => ({messages: threadMessages}),
+            subscribe: () => () => {},
+        })),
+    };
+});
+
+const SINGLE_SELECT_DATA = {
+    awaitingAnswer: true,
+    kind: 'ask-user-question' as const,
+    questions: [
+        {
+            header: 'Pick',
+            multiSelect: false,
+            options: [
+                {description: 'Slack messaging', label: 'slack'},
+                {description: 'Discord messaging', label: 'discord'},
+            ],
+            question: 'Which messaging component?',
+        },
+    ],
+};
+
+const MULTI_SELECT_DATA = {
+    awaitingAnswer: true,
+    kind: 'ask-user-question' as const,
+    questions: [
+        {
+            header: 'Capabilities',
+            multiSelect: true,
+            options: [
+                {description: 'Read', label: 'read'},
+                {description: 'Write', label: 'write'},
+                {description: 'Delete', label: 'delete'},
+            ],
+            question: 'Which capabilities?',
+        },
+    ],
+};
+
+const WIZARD_DATA = {
+    awaitingAnswer: true,
+    kind: 'ask-user-question' as const,
+    questions: [
+        {
+            header: 'CHANNEL',
+            multiSelect: false,
+            options: [{label: '#general'}, {label: '#announcements'}],
+            question: 'Which Slack channel?',
+        },
+        {
+            header: 'MESSAGE',
+            multiSelect: false,
+            options: [{label: 'Good morning!'}, {label: 'Daily standup'}],
+            question: 'What message?',
+        },
+        {
+            header: 'TIMEZONE',
+            multiSelect: false,
+            options: [{label: 'UTC'}, {label: 'US/Eastern'}],
+            question: 'Which timezone?',
+        },
+    ],
+};
+
+const LLM_PROVIDED_OTHER_DATA = {
+    awaitingAnswer: true,
+    kind: 'ask-user-question' as const,
+    questions: [
+        {
+            multiSelect: false,
+            // LLM emits its own "Other" option — our injected "Other…" affordance must NOT also render.
+            options: [{label: '#general'}, {label: '#team'}, {label: 'Other'}],
+            question: 'Which channel?',
+        },
+    ],
+};
+
+const LARGE_SINGLE_SELECT_DATA = {
+    awaitingAnswer: true,
+    kind: 'ask-user-question' as const,
+    questions: [
+        {
+            header: 'Channel',
+            multiSelect: false,
+            options: [
+                {label: 'general'},
+                {label: 'random'},
+                {label: 'testing'},
+                {label: 'sales-team'},
+                {label: 'tech-team'},
+                {label: 'testing-again'},
+                {label: 'intercapital-test'},
+                {label: 'pevex-test'},
+                {label: 'pto-test'},
+            ],
+            question: 'Which Slack channel?',
+        },
+    ],
+};
+
+const LARGE_MULTI_SELECT_DATA = {
+    awaitingAnswer: true,
+    kind: 'ask-user-question' as const,
+    questions: [
+        {
+            header: 'Channels',
+            multiSelect: true,
+            options: [
+                {label: 'general'},
+                {label: 'random'},
+                {label: 'testing'},
+                {label: 'sales-team'},
+                {label: 'tech-team'},
+                {label: 'testing-again'},
+                {label: 'intercapital-test'},
+                {label: 'pevex-test'},
+                {label: 'pto-test'},
+            ],
+            question: 'Which channels?',
+        },
+    ],
+};
+
+type AnyDataType =
+    | typeof SINGLE_SELECT_DATA
+    | typeof MULTI_SELECT_DATA
+    | typeof WIZARD_DATA
+    | typeof LLM_PROVIDED_OTHER_DATA
+    | typeof LARGE_MULTI_SELECT_DATA
+    | typeof LARGE_SINGLE_SELECT_DATA;
+
+const renderMessage = async (data: AnyDataType) => {
+    const {default: AskUserQuestionMessage} = await import('../AskUserQuestionMessage');
+
+    return render(
+        <AskUserQuestionMessage data={data} name="ask-user-question" status={{type: 'complete'}} type="data" />
+    );
+};
+
+describe('AskUserQuestionMessage', () => {
+    beforeEach(() => {
+        threadMessages.length = 0;
+        appendCalls.length = 0;
+        aiChatAskedQuestionsStore.getState().reset();
+    });
+
+    it('renders a single-step card with option buttons + Other… affordance', async () => {
+        await renderMessage(SINGLE_SELECT_DATA);
+
+        expect(screen.getByText(/which messaging component/i)).toBeInTheDocument();
+        // Single-question case has no step counter.
+        expect(screen.queryByText(/question \d+ of/i)).not.toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'slack'})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'discord'})).toBeInTheDocument();
+        expect(screen.getByRole('button', {name: /other/i})).toBeInTheDocument();
+    });
+
+    it('appends "User picked: <label>" when single-question single-select option is clicked', async () => {
+        await renderMessage(SINGLE_SELECT_DATA);
+
+        await userEvent.click(screen.getByRole('button', {name: 'slack'}));
+
+        expect(appendCalls).toHaveLength(1);
+        expect(appendCalls[0]).toMatchObject({
+            content: [{text: 'User picked: slack', type: 'text'}],
+            role: 'user',
+        });
+    });
+
+    it('renders a step counter and walks through wizard steps without appending until the last one', async () => {
+        await renderMessage(WIZARD_DATA);
+
+        // Step 1.
+        expect(screen.getByText(/question 1 of 3/i)).toBeInTheDocument();
+        expect(screen.getByText(/which slack channel/i)).toBeInTheDocument();
+
+        await userEvent.click(screen.getByRole('button', {name: '#general'}));
+
+        // Advances to step 2 without appending.
+        expect(screen.getByText(/question 2 of 3/i)).toBeInTheDocument();
+        expect(screen.getByText(/what message/i)).toBeInTheDocument();
+        expect(appendCalls).toHaveLength(0);
+
+        await userEvent.click(screen.getByRole('button', {name: 'Good morning!'}));
+
+        // Step 3.
+        expect(screen.getByText(/question 3 of 3/i)).toBeInTheDocument();
+        expect(appendCalls).toHaveLength(0);
+
+        await userEvent.click(screen.getByRole('button', {name: 'UTC'}));
+
+        // Final answer triggers a single combined system message with all labeled Q → A pairs.
+        expect(appendCalls).toHaveLength(1);
+        expect(appendCalls[0]).toMatchObject({
+            content: [
+                {
+                    text:
+                        'User picked:\n' +
+                        '- Which Slack channel? → #general\n' +
+                        '- What message? → Good morning!\n' +
+                        '- Which timezone? → UTC',
+                    type: 'text',
+                },
+            ],
+            role: 'user',
+        });
+    });
+
+    it('shows a Previous link from step 2 onward and lets the user navigate back', async () => {
+        await renderMessage(WIZARD_DATA);
+
+        // Step 1: no Previous yet.
+        expect(screen.queryByRole('button', {name: /previous/i})).not.toBeInTheDocument();
+
+        await userEvent.click(screen.getByRole('button', {name: '#general'}));
+
+        // Step 2 — Previous appears.
+        expect(screen.getByRole('button', {name: /previous/i})).toBeInTheDocument();
+
+        await userEvent.click(screen.getByRole('button', {name: /previous/i}));
+
+        // Back on step 1.
+        expect(screen.getByText(/question 1 of 3/i)).toBeInTheDocument();
+        expect(screen.getByText(/which slack channel/i)).toBeInTheDocument();
+    });
+
+    it('skips the injected "Other…" affordance when an option labeled "Other" is already supplied', async () => {
+        // Regression guard against a screenshot bug where both an LLM-provided "Other" option AND our injected
+        // "Other…" appeared side by side. The LLM's option takes precedence; clicking it opens the same inline
+        // text input the injected affordance would have.
+        await renderMessage(LLM_PROVIDED_OTHER_DATA);
+
+        const allOtherButtons = screen
+            .getAllByRole('button')
+            .filter((button) => /other/i.test(button.textContent ?? ''));
+
+        expect(allOtherButtons).toHaveLength(1);
+        // And the one that's there is the LLM's literal "Other" (no ellipsis added by us).
+        expect(allOtherButtons[0]).toHaveTextContent(/^Other$/);
+    });
+
+    it('treats clicking an LLM-supplied "Other" option as a free-form trigger, not a literal submit', async () => {
+        await renderMessage(LLM_PROVIDED_OTHER_DATA);
+
+        await userEvent.click(screen.getByRole('button', {name: /^other$/i}));
+
+        // Opens the inline input instead of appending "User picked: Other".
+        expect(screen.getByPlaceholderText(/type your answer/i)).toBeInTheDocument();
+        expect(appendCalls).toHaveLength(0);
+    });
+
+    it('multi-select last step shows "Submit all" and joins selections with ", "', async () => {
+        await renderMessage(MULTI_SELECT_DATA);
+
+        expect(screen.getByRole('button', {name: /submit all/i})).toBeDisabled();
+
+        await userEvent.click(screen.getByRole('checkbox', {name: /read/i}));
+        await userEvent.click(screen.getByRole('checkbox', {name: /write/i}));
+        await userEvent.click(screen.getByRole('button', {name: /submit all/i}));
+
+        expect(appendCalls[0]).toMatchObject({
+            content: [{text: 'User picked: read, write', type: 'text'}],
+            role: 'user',
+        });
+    });
+
+    it('after answering the wizard, re-mounting shows the persisted "Picked" summary instead of prompting again', async () => {
+        await renderMessage(WIZARD_DATA);
+
+        await userEvent.click(screen.getByRole('button', {name: '#general'}));
+        await userEvent.click(screen.getByRole('button', {name: 'Good morning!'}));
+        await userEvent.click(screen.getByRole('button', {name: 'UTC'}));
+
+        // Re-mount: the wizard should NOT walk the user through the questions again.
+        const {default: AskUserQuestionMessage} = await import('../AskUserQuestionMessage');
+
+        render(
+            <AskUserQuestionMessage
+                data={WIZARD_DATA}
+                name="ask-user-question"
+                status={{type: 'complete'}}
+                type="data"
+            />
+        );
+
+        expect(screen.queryByText(/question 1 of 3/i)).not.toBeInTheDocument();
+        // The persisted summary echoes the answers back.
+        expect(screen.getAllByText(/picked/i).length).toBeGreaterThan(0);
+        expect(screen.getAllByText(/#general/i).length).toBeGreaterThan(0);
+    });
+
+    it('renders a searchable combobox (not stacked buttons) when single-select options exceed the threshold', async () => {
+        await renderMessage(LARGE_SINGLE_SELECT_DATA);
+
+        expect(screen.queryByRole('button', {name: 'pto-test'})).not.toBeInTheDocument();
+
+        await userEvent.click(screen.getByRole('combobox'));
+
+        await userEvent.click(screen.getByRole('option', {name: 'tech-team'}));
+
+        expect(appendCalls).toHaveLength(1);
+        expect(JSON.stringify(appendCalls[0])).toContain('User picked: tech-team');
+    });
+
+    it('renders a MultiSelect (not stacked checkboxes) when multi-select options exceed the threshold', async () => {
+        await renderMessage(LARGE_MULTI_SELECT_DATA);
+
+        expect(screen.queryByRole('checkbox', {name: 'pto-test'})).not.toBeInTheDocument();
+        expect(screen.getByText(/select/i)).toBeInTheDocument();
+    });
+
+    it('renders nothing when the questions array is empty', async () => {
+        const {container} = await renderMessage({...SINGLE_SELECT_DATA, questions: []});
+
+        expect(container.firstChild).toBeNull();
+    });
+});
diff --git a/client/src/shared/components/ai-chat/messages/tests/CreateConnectionMessage.test.tsx b/client/src/shared/components/ai-chat/messages/tests/CreateConnectionMessage.test.tsx
new file mode 100644
index 00000000000..7827140179e
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/tests/CreateConnectionMessage.test.tsx
@@ -0,0 +1,178 @@
+import {render, screen, waitFor} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+vi.mock('@/shared/queries/automation/componentDefinitions.queries', () => ({
+    useGetComponentDefinitionsQuery: vi.fn(),
+}));
+
+// `useGetComponentDefinitionQuery` (singular) opens the dialog pre-selected on the requested
+// component. Mocked as a no-op for tests that don't exercise pre-selection.
+vi.mock('@/shared/queries/platform/componentDefinitions.queries', () => ({
+    useGetComponentDefinitionQuery: vi.fn(() => ({data: undefined})),
+}));
+
+vi.mock('@/shared/mutations/automation/connections.mutations', () => ({
+    useCreateConnectionMutation: vi.fn(),
+}));
+
+vi.mock('@/shared/queries/automation/connections.queries', () => ({
+    ConnectionKeys: {
+        connectionTags: (id: number) => ['connectionTags', id],
+        connections: ['connections'],
+    },
+    useGetConnectionTagsQuery: vi.fn(),
+}));
+
+vi.mock('@/pages/automation/stores/useWorkspaceStore', () => ({
+    useWorkspaceStore: vi.fn(() => 1),
+}));
+
+vi.mock('@/shared/stores/useEnvironmentStore', () => ({
+    useEnvironmentStore: vi.fn(() => 0),
+}));
+
+// Mock useQueryClient so the component can call `invalidateQueries` without a real QueryClientProvider.
+vi.mock('@tanstack/react-query', async () => {
+    const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+
+    return {
+        ...actual,
+        useQueryClient: vi.fn(() => ({
+            invalidateQueries: vi.fn().mockResolvedValue(undefined),
+        })),
+    };
+});
+
+// Mock the dialog so we can trigger onConnectionCreate from a test-only button.
+vi.mock('@/shared/components/connection/ConnectionDialog', () => ({
+    default: ({onClose, onConnectionCreate}: {onClose?: () => void; onConnectionCreate?: (id: number) => void}) => (
+        <div data-testid="connection-dialog">
+            <button onClick={onClose} type="button">
+                Close
+            </button>
+
+            <button onClick={() => onConnectionCreate?.(42)} type="button">
+                Simulate Create
+            </button>
+        </div>
+    ),
+}));
+
+const {useGetComponentDefinitionsQuery} = await import('@/shared/queries/automation/componentDefinitions.queries');
+const mockUseGetComponentDefinitionsQuery = vi.mocked(useGetComponentDefinitionsQuery);
+
+const COMPONENT_DEFINITIONS_FIXTURE = [
+    {name: 'slack', title: 'Slack'},
+    {name: 'gmail', title: 'Gmail'},
+];
+
+const DEFAULT_DATA = {
+    componentLabel: 'Slack',
+    componentName: 'slack',
+    kind: 'create-connection' as const,
+};
+
+const renderMessage = async (data = DEFAULT_DATA) => {
+    const {default: CreateConnectionMessage} = await import('../CreateConnectionMessage');
+
+    return render(
+        <CreateConnectionMessage data={data} name="create-connection" status={{type: 'complete'}} type="data" />
+    );
+};
+
+describe('CreateConnectionMessage', () => {
+    beforeEach(() => {
+        mockUseGetComponentDefinitionsQuery.mockReturnValue({
+            data: COMPONENT_DEFINITIONS_FIXTURE,
+            isLoading: false,
+        } as never);
+    });
+
+    it('renders a Connect button with the component label', async () => {
+        // The component is intentionally narrowly scoped to "create new connection" — selecting from
+        // existing connections is handled by selectConnection (dropdown UX). One unambiguous button
+        // replaces the prior select + plus-button layout that conflated the two intents.
+        await renderMessage();
+
+        expect(screen.getByRole('button', {name: /connect slack/i})).toBeInTheDocument();
+    });
+
+    it('opens the ConnectionDialog when the Connect button is clicked', async () => {
+        await renderMessage();
+
+        await userEvent.click(screen.getByRole('button', {name: /connect slack/i}));
+
+        await waitFor(() => {
+            expect(screen.getByTestId('connection-dialog')).toBeInTheDocument();
+        });
+    });
+
+    it('closes the ConnectionDialog when onClose is called', async () => {
+        await renderMessage();
+
+        await userEvent.click(screen.getByRole('button', {name: /connect slack/i}));
+
+        await waitFor(() => screen.getByTestId('connection-dialog'));
+
+        await userEvent.click(screen.getByRole('button', {name: /^close$/i}));
+
+        await waitFor(() => {
+            expect(screen.queryByTestId('connection-dialog')).not.toBeInTheDocument();
+        });
+    });
+
+    it('renders null while component definitions are loading', async () => {
+        // Showing the button before component definitions are available would open a malformed dialog
+        // (no pre-selected component). Render nothing until the catalog lands.
+        mockUseGetComponentDefinitionsQuery.mockReturnValue({
+            data: undefined,
+            isLoading: true,
+        } as never);
+
+        const {container} = await renderMessage();
+
+        expect(container.firstChild).toBeNull();
+    });
+
+    it('renders an error + Retry button when the component-definitions endpoint fails', async () => {
+        // Without this surface, a flaky catalog endpoint silently disables the connect flow and the user
+        // has no idea the agent's tool call ever fired.
+        const refetch = vi.fn();
+
+        mockUseGetComponentDefinitionsQuery.mockReturnValue({
+            data: undefined,
+            error: new Error('500: catalog down'),
+            isError: true,
+            isLoading: false,
+            refetch,
+        } as never);
+
+        await renderMessage();
+
+        expect(screen.getByText(/could not load component definitions/i)).toBeInTheDocument();
+
+        await userEvent.click(screen.getByRole('button', {name: /retry/i}));
+
+        expect(refetch).toHaveBeenCalledOnce();
+    });
+
+    it('shows a "Connection ready" confirmation after the dialog reports a successful create', async () => {
+        // End-to-end happy path: button → dialog → simulate create → confirmation row replaces the button.
+        await renderMessage();
+
+        await userEvent.click(screen.getByRole('button', {name: /connect slack/i}));
+
+        await waitFor(() => screen.getByTestId('connection-dialog'));
+
+        await userEvent.click(screen.getByRole('button', {name: /simulate create/i}));
+
+        await waitFor(() => {
+            expect(screen.getByText(/connection ready/i)).toBeInTheDocument();
+            expect(screen.getByText(/slack connection/i)).toBeInTheDocument();
+        });
+
+        // The Connect button is replaced by the confirmation.
+        expect(screen.queryByRole('button', {name: /connect slack/i})).not.toBeInTheDocument();
+    });
+});
diff --git a/client/src/shared/components/ai-chat/messages/tests/SelectPropertyOptionMessage.test.tsx b/client/src/shared/components/ai-chat/messages/tests/SelectPropertyOptionMessage.test.tsx
new file mode 100644
index 00000000000..5d160093894
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/tests/SelectPropertyOptionMessage.test.tsx
@@ -0,0 +1,71 @@
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+const appendCalls: Array<unknown> = [];
+
+vi.mock('@assistant-ui/react', async () => {
+    const actual = await vi.importActual<typeof import('@assistant-ui/react')>('@assistant-ui/react');
+
+    return {
+        ...actual,
+        useThreadRuntime: vi.fn(() => ({
+            append: (message: unknown) => appendCalls.push(message),
+            getState: () => ({messages: []}),
+            subscribe: () => () => {},
+        })),
+    };
+});
+
+import SelectPropertyOptionMessage from '../SelectPropertyOptionMessage';
+
+const DATA = {
+    componentName: 'slack',
+    kind: 'select-property-option' as const,
+    options: [
+        {label: 'general', value: 'C06H2PR8LSV'},
+        {label: 'random', value: 'C06GSJ5RPBN'},
+    ],
+    propertyName: 'channel',
+    truncated: false,
+};
+
+describe('SelectPropertyOptionMessage', () => {
+    beforeEach(() => {
+        appendCalls.length = 0;
+    });
+
+    it('renders a picker of all options and submits the picked option value', async () => {
+        render(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            <SelectPropertyOptionMessage {...({data: DATA} as any)} />
+        );
+
+        await userEvent.click(screen.getByRole('combobox'));
+
+        await userEvent.click(screen.getByRole('option', {name: 'general'}));
+
+        expect(appendCalls).toHaveLength(1);
+        expect(JSON.stringify(appendCalls[0])).toContain('User picked: general (value: C06H2PR8LSV)');
+    });
+
+    it('filters by label when the user types in the search', async () => {
+        render(
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            <SelectPropertyOptionMessage {...({data: DATA} as any)} />
+        );
+
+        await userEvent.click(screen.getByRole('combobox'));
+
+        const searchBox = screen.getByPlaceholderText('Search...');
+
+        await userEvent.type(searchBox, 'gener');
+
+        expect(screen.getByRole('option', {name: 'general'})).toBeInTheDocument();
+        expect(screen.queryByRole('option', {name: 'random'})).not.toBeInTheDocument();
+
+        await userEvent.click(screen.getByRole('option', {name: 'general'}));
+
+        expect(JSON.stringify(appendCalls[0])).toContain('User picked: general (value: C06H2PR8LSV)');
+    });
+});
diff --git a/client/src/shared/components/ai-chat/messages/tests/toToolResultDataPart.test.ts b/client/src/shared/components/ai-chat/messages/tests/toToolResultDataPart.test.ts
new file mode 100644
index 00000000000..9b61d1c0954
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/tests/toToolResultDataPart.test.ts
@@ -0,0 +1,165 @@
+import {describe, expect, it} from 'vitest';
+
+import {toToolResultDataPart} from '../toToolResultDataPart';
+
+describe('toToolResultDataPart', () => {
+    it('maps select-property-option (selectPropertyOption + selectTriggerPropertyOption)', () => {
+        const payload = JSON.stringify({
+            componentName: 'slack',
+            kind: 'select-property-option',
+            options: [{label: 'general', value: 'C1'}],
+            propertyName: 'channel',
+            truncated: false,
+        });
+
+        const a = toToolResultDataPart('selectPropertyOption', payload);
+        const b = toToolResultDataPart('selectTriggerPropertyOption', payload);
+
+        expect(a?.ok).toBe(true);
+        expect(b?.ok).toBe(true);
+
+        if (a?.ok) {
+            expect(a.type).toBe('data-select-property-option');
+            expect(a.data).toEqual({
+                componentName: 'slack',
+                kind: 'select-property-option',
+                options: [{label: 'general', value: 'C1'}],
+                propertyName: 'channel',
+                truncated: false,
+            });
+        }
+    });
+
+    it('maps select-connection', () => {
+        const r = toToolResultDataPart(
+            'selectConnection',
+            JSON.stringify({componentLabel: 'Slack', componentName: 'slack', kind: 'select-connection'})
+        );
+
+        expect(r?.ok).toBe(true);
+
+        if (r?.ok) {
+            expect(r.type).toBe('data-select-connection');
+            expect(r.data).toEqual({
+                componentLabel: 'Slack',
+                componentName: 'slack',
+                kind: 'select-connection',
+            });
+        }
+    });
+
+    it('maps ask-user-question', () => {
+        const r = toToolResultDataPart(
+            'askUserQuestion',
+            JSON.stringify({
+                awaitingAnswer: true,
+                kind: 'ask-user-question',
+                questions: [{multiSelect: false, options: [], question: 'Q?'}],
+            })
+        );
+
+        expect(r?.ok).toBe(true);
+
+        if (r?.ok) {
+            expect(r.type).toBe('data-ask-user-question');
+            expect(r.data).toEqual({
+                awaitingAnswer: true,
+                kind: 'ask-user-question',
+                questions: [{multiSelect: false, options: [], question: 'Q?'}],
+            });
+        }
+    });
+
+    it('maps create-connection', () => {
+        const r = toToolResultDataPart(
+            'createConnection',
+            JSON.stringify({
+                componentLabel: 'Slack',
+                componentName: 'slack',
+                kind: 'create-connection',
+                suggestedName: 'My Slack',
+            })
+        );
+
+        expect(r?.ok).toBe(true);
+
+        if (r?.ok) {
+            expect(r.type).toBe('data-create-connection');
+            expect(r.data).toEqual({
+                componentLabel: 'Slack',
+                componentName: 'slack',
+                kind: 'create-connection',
+                suggestedName: 'My Slack',
+            });
+        }
+    });
+
+    it('returns an error result for a malformed payload (unparseable JSON)', () => {
+        const r = toToolResultDataPart('selectPropertyOption', 'not json{');
+
+        expect(r?.ok).toBe(false);
+
+        if (r && !r.ok) {
+            expect(r.toolName).toBe('selectPropertyOption');
+            expect(r.errorMessage).toMatch(/unparseable/i);
+        }
+    });
+
+    it('returns an error result when kind is wrong for selectConnection', () => {
+        const r = toToolResultDataPart('selectConnection', JSON.stringify({componentName: 'slack', kind: 'nope'}));
+
+        expect(r?.ok).toBe(false);
+
+        if (r && !r.ok) {
+            expect(r.toolName).toBe('selectConnection');
+            expect(r.errorMessage).toMatch(/malformed/i);
+        }
+    });
+
+    it('returns an error result when options is missing for selectPropertyOption', () => {
+        const r = toToolResultDataPart(
+            'selectPropertyOption',
+            JSON.stringify({componentName: 'slack', kind: 'select-property-option', propertyName: 'channel'})
+        );
+
+        expect(r?.ok).toBe(false);
+
+        if (r && !r.ok) {
+            expect(r.errorMessage).toMatch(/malformed/i);
+        }
+    });
+
+    it('returns an error result when questions is missing for askUserQuestion', () => {
+        const r = toToolResultDataPart('askUserQuestion', JSON.stringify({kind: 'ask-user-question'}));
+
+        expect(r?.ok).toBe(false);
+
+        if (r && !r.ok) {
+            expect(r.errorMessage).toMatch(/malformed/i);
+        }
+    });
+
+    it('returns an error result when kind is missing for createConnection', () => {
+        const r = toToolResultDataPart(
+            'createConnection',
+            JSON.stringify({componentLabel: 'Slack', componentName: 'slack'})
+        );
+
+        expect(r?.ok).toBe(false);
+
+        if (r && !r.ok) {
+            expect(r.toolName).toBe('createConnection');
+            expect(r.errorMessage).toMatch(/malformed/i);
+        }
+    });
+
+    it('returns undefined for an unhandled tool name', () => {
+        expect(toToolResultDataPart('someOtherTool', '{}')).toBeUndefined();
+    });
+
+    it('returns undefined for openFileTab (not an interactive tool)', () => {
+        expect(
+            toToolResultDataPart('openFileTab', JSON.stringify({fileId: '1', name: 'f', opened: true}))
+        ).toBeUndefined();
+    });
+});
diff --git a/client/src/shared/components/ai-chat/messages/toToolResultDataPart.ts b/client/src/shared/components/ai-chat/messages/toToolResultDataPart.ts
new file mode 100644
index 00000000000..6462ffb3b55
--- /dev/null
+++ b/client/src/shared/components/ai-chat/messages/toToolResultDataPart.ts
@@ -0,0 +1,153 @@
+/**
+ * Surface-agnostic mapper for interactive tool-result payloads, reusable across any chat surface (AI Hub,
+ * Copilot, etc.). Returns:
+ *   - `{ok: true, data, type}` — payload parsed and validated successfully.
+ *   - `{ok: false, errorMessage, toolName}` — payload unparseable or failed kind/shape validation.
+ *   - `undefined` — `toolCallName` is not one of the interactive tool names handled here.
+ */
+
+export type ToolResultDataPartType =
+    | {data: Record<string, unknown>; ok: true; type: string}
+    | {errorMessage: string; ok: false; toolName: string};
+
+export const parseJson = <T>(content: string, contextLabel: string): T | null => {
+    try {
+        return JSON.parse(content) as T;
+    } catch (parseError) {
+        console.warn('Failed to parse tool-result JSON', {
+            context: contextLabel,
+            len: content.length,
+            message: parseError instanceof Error ? parseError.message : String(parseError),
+            sample: content.slice(0, 80),
+        });
+
+        return null;
+    }
+};
+
+interface CreateConnectionResultI {
+    componentLabel: string;
+    componentName: string;
+    kind: 'create-connection';
+    suggestedName?: string;
+}
+
+interface SelectConnectionResultI {
+    componentLabel: string;
+    componentName: string;
+    kind: 'select-connection';
+}
+
+interface SelectPropertyOptionResultI {
+    componentName: string;
+    kind: 'select-property-option';
+    options: Array<{label: string; value: string}>;
+    propertyName: string;
+    truncated?: boolean;
+}
+
+interface AskUserQuestionResultI {
+    awaitingAnswer?: boolean;
+    kind: 'ask-user-question';
+    questions: Array<{
+        header?: string;
+        multiSelect: boolean;
+        options: Array<{description?: string; label: string}>;
+        question: string;
+    }>;
+}
+
+export function toToolResultDataPart(toolCallName: string, eventContent: string): ToolResultDataPartType | undefined {
+    if (toolCallName === 'createConnection') {
+        const parsed = parseJson<CreateConnectionResultI>(eventContent, 'createConnection result');
+
+        if (!parsed || parsed.kind !== 'create-connection' || !parsed.componentName) {
+            const errorMessage = !parsed
+                ? 'createConnection returned an unparseable payload'
+                : 'createConnection returned a malformed payload (missing kind or componentName)';
+
+            return {errorMessage, ok: false, toolName: 'createConnection'};
+        }
+
+        return {
+            data: {
+                componentLabel: parsed.componentLabel,
+                componentName: parsed.componentName,
+                kind: parsed.kind,
+                suggestedName: parsed.suggestedName,
+            },
+            ok: true,
+            type: 'data-create-connection',
+        };
+    }
+
+    if (toolCallName === 'selectConnection') {
+        const parsed = parseJson<SelectConnectionResultI>(eventContent, 'selectConnection result');
+
+        if (!parsed || parsed.kind !== 'select-connection' || !parsed.componentName) {
+            const errorMessage = !parsed
+                ? 'selectConnection returned an unparseable payload'
+                : 'selectConnection returned a malformed payload (missing kind or componentName)';
+
+            return {errorMessage, ok: false, toolName: 'selectConnection'};
+        }
+
+        return {
+            data: {
+                componentLabel: parsed.componentLabel,
+                componentName: parsed.componentName,
+                kind: parsed.kind,
+            },
+            ok: true,
+            type: 'data-select-connection',
+        };
+    }
+
+    if (toolCallName === 'selectPropertyOption' || toolCallName === 'selectTriggerPropertyOption') {
+        const parsed = parseJson<SelectPropertyOptionResultI>(eventContent, 'selectPropertyOption result');
+
+        if (!parsed || parsed.kind !== 'select-property-option' || !Array.isArray(parsed.options)) {
+            const errorMessage = !parsed
+                ? 'selectPropertyOption returned an unparseable payload'
+                : 'selectPropertyOption returned a malformed payload (missing kind or options)';
+
+            return {errorMessage, ok: false, toolName: toolCallName};
+        }
+
+        return {
+            data: {
+                componentName: parsed.componentName,
+                kind: parsed.kind,
+                options: parsed.options,
+                propertyName: parsed.propertyName,
+                truncated: parsed.truncated,
+            },
+            ok: true,
+            type: 'data-select-property-option',
+        };
+    }
+
+    if (toolCallName === 'askUserQuestion') {
+        const parsed = parseJson<AskUserQuestionResultI>(eventContent, 'askUserQuestion result');
+
+        if (!parsed || parsed.kind !== 'ask-user-question' || !Array.isArray(parsed.questions)) {
+            const errorMessage = !parsed
+                ? 'askUserQuestion returned an unparseable payload'
+                : 'askUserQuestion returned a malformed payload (missing kind or questions)';
+
+            return {errorMessage, ok: false, toolName: 'askUserQuestion'};
+        }
+
+        return {
+            data: {
+                awaitingAnswer: parsed.awaitingAnswer,
+                kind: parsed.kind,
+                questions: parsed.questions,
+            },
+            ok: true,
+            type: 'data-ask-user-question',
+        };
+    }
+
+    return undefined;
+}
diff --git a/client/src/shared/components/ai-chat/stores/tests/useAiChatRetryableErrorStore.test.ts b/client/src/shared/components/ai-chat/stores/tests/useAiChatRetryableErrorStore.test.ts
new file mode 100644
index 00000000000..99f483d7895
--- /dev/null
+++ b/client/src/shared/components/ai-chat/stores/tests/useAiChatRetryableErrorStore.test.ts
@@ -0,0 +1,40 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+
+import {aiChatRetryableErrorStore} from '../useAiChatRetryableErrorStore';
+
+describe('useAiChatRetryableErrorStore', () => {
+    beforeEach(() => {
+        aiChatRetryableErrorStore.setState({currentError: undefined});
+    });
+
+    it('starts with currentError undefined', () => {
+        expect(aiChatRetryableErrorStore.getState().currentError).toBeUndefined();
+    });
+
+    it('setError stores the retryable error', () => {
+        aiChatRetryableErrorStore.getState().setError({
+            errorMessage: 'File not found',
+            lastUserMessage: 'Create the report',
+            toolName: 'createFile',
+        });
+
+        const {currentError} = aiChatRetryableErrorStore.getState();
+
+        expect(currentError).not.toBeUndefined();
+        expect(currentError!.errorMessage).toBe('File not found');
+        expect(currentError!.lastUserMessage).toBe('Create the report');
+        expect(currentError!.toolName).toBe('createFile');
+    });
+
+    it('clearError removes the stored error', () => {
+        aiChatRetryableErrorStore.getState().setError({
+            errorMessage: 'Something went wrong',
+            lastUserMessage: 'Do the thing',
+            toolName: 'doThing',
+        });
+
+        aiChatRetryableErrorStore.getState().clearError();
+
+        expect(aiChatRetryableErrorStore.getState().currentError).toBeUndefined();
+    });
+});
diff --git a/client/src/shared/components/ai-chat/stores/tests/useAiChatToolCallStore.test.ts b/client/src/shared/components/ai-chat/stores/tests/useAiChatToolCallStore.test.ts
new file mode 100644
index 00000000000..49a2547bd66
--- /dev/null
+++ b/client/src/shared/components/ai-chat/stores/tests/useAiChatToolCallStore.test.ts
@@ -0,0 +1,162 @@
+import {aiChatToolCallStore} from '@/shared/components/ai-chat/stores/useAiChatToolCallStore';
+import {beforeEach, describe, expect, it} from 'vitest';
+
+describe('aiChatToolCallStore', () => {
+    beforeEach(() => {
+        aiChatToolCallStore.setState({order: [], toolCalls: {}});
+    });
+
+    it('startToolCall registers a running entry tagged with the assistant message index', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'research', 3);
+
+        const entry = aiChatToolCallStore.getState().toolCalls['call-1'];
+
+        expect(entry).toBeDefined();
+        expect(entry.toolName).toBe('research');
+        expect(entry.status).toBe('running');
+        expect(entry.messageIndex).toBe(3);
+        expect(aiChatToolCallStore.getState().order).toEqual(['call-1']);
+    });
+
+    it('startToolCall is idempotent for the same id', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'research', 1);
+        aiChatToolCallStore.getState().startToolCall('call-1', 'research', 1);
+
+        expect(aiChatToolCallStore.getState().order).toEqual(['call-1']);
+    });
+
+    it('updateToolCallArgs merges args without changing status', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'createMemory', 0);
+        aiChatToolCallStore.getState().updateToolCallArgs('call-1', {name: 'Daily standups'});
+
+        const entry = aiChatToolCallStore.getState().toolCalls['call-1'];
+
+        expect(entry.args).toEqual({name: 'Daily standups'});
+        expect(entry.status).toBe('running');
+    });
+
+    it('completeToolCall flips status to success and stores the result', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'createMemory', 0);
+        aiChatToolCallStore.getState().completeToolCall('call-1', {ok: true}, false);
+
+        const entry = aiChatToolCallStore.getState().toolCalls['call-1'];
+
+        expect(entry.status).toBe('success');
+        expect(entry.result).toEqual({ok: true});
+    });
+
+    it('completeToolCall with isError=true marks the entry as error', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'createMemory', 0);
+        aiChatToolCallStore.getState().completeToolCall('call-1', {error: 'boom'}, true);
+
+        const entry = aiChatToolCallStore.getState().toolCalls['call-1'];
+
+        expect(entry.status).toBe('error');
+        expect(entry.result).toEqual({error: 'boom'});
+    });
+
+    it('appendProgressiveOutput accumulates chunks into progressiveOutput', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'runChatWorkflow', 0);
+        aiChatToolCallStore.getState().appendProgressiveOutput('call-1', 'Step 1: ');
+        aiChatToolCallStore.getState().appendProgressiveOutput('call-1', 'done\n\nStep 2: queued');
+
+        expect(aiChatToolCallStore.getState().toolCalls['call-1'].progressiveOutput).toBe(
+            'Step 1: done\n\nStep 2: queued'
+        );
+    });
+
+    it('addProgress appends timestamped entries to the progress list', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'research', 0);
+        aiChatToolCallStore.getState().addProgress('call-1', 'Fetching results');
+        aiChatToolCallStore.getState().addProgress('call-1', 'Synthesizing answer');
+
+        const entry = aiChatToolCallStore.getState().toolCalls['call-1'];
+
+        expect(entry.progress).toHaveLength(2);
+        expect(entry.progress.map((entry) => entry.text)).toEqual(['Fetching results', 'Synthesizing answer']);
+    });
+
+    it('findRunningToolCallByName returns the most recent running call with that name', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'research', 0);
+        aiChatToolCallStore.getState().startToolCall('call-2', 'workflowBuilder', 0);
+        aiChatToolCallStore.getState().startToolCall('call-3', 'research', 0);
+
+        const found = aiChatToolCallStore.getState().findRunningToolCallByName('research');
+
+        expect(found?.toolCallId).toBe('call-3');
+    });
+
+    it('findRunningToolCallByName ignores completed calls', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'research', 0);
+        aiChatToolCallStore.getState().completeToolCall('call-1', {}, false);
+
+        expect(aiChatToolCallStore.getState().findRunningToolCallByName('research')).toBeUndefined();
+    });
+
+    it('reset clears toolCalls and order', () => {
+        aiChatToolCallStore.getState().startToolCall('call-1', 'research', 0);
+        aiChatToolCallStore.getState().reset();
+
+        expect(aiChatToolCallStore.getState().order).toEqual([]);
+        expect(Object.keys(aiChatToolCallStore.getState().toolCalls)).toHaveLength(0);
+    });
+
+    describe('cross-task cleanup', () => {
+        // The runtime provider calls resetForTask(currentId) on task switch so a stale
+        // running tool-call from the previous task does not appear in the new task's
+        // panel. These tests pin that contract — a regression that drops the resetForTask call
+        // (or makes it a no-op) would leave task A's tool-calls dangling in task B's
+        // store, which is the exact bug the commit message says was fixed.
+        it('resetForTask drops only entries belonging to the named task', () => {
+            aiChatToolCallStore.getState().startToolCall('call-A1', 'research', 0, 'conv-A');
+            aiChatToolCallStore.getState().startToolCall('call-A2', 'research', 0, 'conv-A');
+            aiChatToolCallStore.getState().startToolCall('call-B1', 'research', 0, 'conv-B');
+
+            aiChatToolCallStore.getState().resetForTask('conv-A');
+
+            const remaining = aiChatToolCallStore.getState().toolCalls;
+
+            expect(aiChatToolCallStore.getState().order).toEqual(['call-B1']);
+            expect(Object.keys(remaining)).toEqual(['call-B1']);
+            expect(remaining['call-B1'].taskId).toBe('conv-B');
+        });
+
+        it('resetForTask is a no-op when no entries match', () => {
+            aiChatToolCallStore.getState().startToolCall('call-A1', 'research', 0, 'conv-A');
+
+            aiChatToolCallStore.getState().resetForTask('conv-other');
+
+            expect(aiChatToolCallStore.getState().order).toEqual(['call-A1']);
+        });
+
+        it('resetForTask with undefined performs a hard reset', () => {
+            // Mirrors the runtime provider's behavior when no task id is bound (e.g. the very
+            // first turn before a task row exists). Hard reset prevents untracked entries from
+            // lingering across tasks forever.
+            aiChatToolCallStore.getState().startToolCall('call-A1', 'research', 0, 'conv-A');
+            aiChatToolCallStore.getState().startToolCall('call-untracked', 'research', 0);
+
+            aiChatToolCallStore.getState().resetForTask(undefined);
+
+            expect(aiChatToolCallStore.getState().order).toEqual([]);
+            expect(Object.keys(aiChatToolCallStore.getState().toolCalls)).toHaveLength(0);
+        });
+
+        it('resetForTask drops a still-running tool-call from the named task', () => {
+            // The exact regression the commit message calls out: when the runtime provider switches AWAY
+            // from a task mid-stream, it calls resetForTask(LEAVING_ID) to remove that
+            // task's stale running entries. Without this, those entries would linger in the store
+            // forever and bleed into any future task.
+            aiChatToolCallStore.getState().startToolCall('call-A1', 'runChatWorkflow', 0, 'conv-A');
+            aiChatToolCallStore.getState().appendProgressiveOutput('call-A1', 'Step 1: ');
+
+            // Simulate the runtime provider's "leaving conv-A" cleanup.
+            aiChatToolCallStore.getState().resetForTask('conv-A');
+
+            // call-A1 should NOT remain — it would be a stale running entry attributed to a task
+            // the user is no longer viewing.
+            expect(aiChatToolCallStore.getState().toolCalls['call-A1']).toBeUndefined();
+            expect(aiChatToolCallStore.getState().order).not.toContain('call-A1');
+        });
+    });
+});
diff --git a/client/src/shared/components/ai-chat/stores/useAiChatAskedQuestionsStore.ts b/client/src/shared/components/ai-chat/stores/useAiChatAskedQuestionsStore.ts
new file mode 100644
index 00000000000..4e9571e4012
--- /dev/null
+++ b/client/src/shared/components/ai-chat/stores/useAiChatAskedQuestionsStore.ts
@@ -0,0 +1,28 @@
+import {create} from 'zustand';
+
+/**
+ * Per-session store of which askUserQuestion prompts the user has already answered, keyed by a content
+ * fingerprint of the question + options (see fingerprintQuestions in AskUserQuestionMessage.tsx) since the
+ * server issues no correlation ids for the answer flow. In-memory only — a refreshed thread re-reads answered
+ * questions from the chat-memory transcript, so persistence would add stale-entry risk for no real gain.
+ */
+interface AiHubAskedQuestionsStateI {
+    answers: Record<string, string>;
+    getAnswer: (fingerprint: string) => string | undefined;
+    hasAnswered: (fingerprint: string) => boolean;
+    markAnswered: (fingerprint: string, answer: string) => void;
+    reset: () => void;
+}
+
+export const aiChatAskedQuestionsStore = create<AiHubAskedQuestionsStateI>((set, get) => ({
+    answers: {},
+    getAnswer: (fingerprint) => get().answers[fingerprint],
+    hasAnswered: (fingerprint) => get().answers[fingerprint] !== undefined,
+    markAnswered: (fingerprint, answer) =>
+        set((state) => ({
+            answers: {...state.answers, [fingerprint]: answer},
+        })),
+    reset: () => set({answers: {}}),
+}));
+
+export const useAiChatAskedQuestionsStore = aiChatAskedQuestionsStore;
diff --git a/client/src/shared/components/ai-chat/stores/useAiChatRetryableErrorStore.ts b/client/src/shared/components/ai-chat/stores/useAiChatRetryableErrorStore.ts
new file mode 100644
index 00000000000..b195de1d55d
--- /dev/null
+++ b/client/src/shared/components/ai-chat/stores/useAiChatRetryableErrorStore.ts
@@ -0,0 +1,24 @@
+import {create} from 'zustand';
+import {devtools} from 'zustand/middleware';
+
+export interface AiHubRetryableErrorI {
+    errorMessage: string;
+    lastUserMessage: string;
+    toolName: string;
+}
+
+interface StoreStateI {
+    currentError: AiHubRetryableErrorI | undefined;
+    clearError: () => void;
+    setError: (error: AiHubRetryableErrorI) => void;
+}
+
+export const aiChatRetryableErrorStore = create<StoreStateI>()(
+    devtools((set) => ({
+        clearError: () => set({currentError: undefined}),
+        currentError: undefined,
+        setError: (error) => set({currentError: error}),
+    }))
+);
+
+export const useAiChatRetryableErrorStore = aiChatRetryableErrorStore;
diff --git a/client/src/shared/components/ai-chat/stores/useAiChatToolCallStore.ts b/client/src/shared/components/ai-chat/stores/useAiChatToolCallStore.ts
new file mode 100644
index 00000000000..9e2618f495d
--- /dev/null
+++ b/client/src/shared/components/ai-chat/stores/useAiChatToolCallStore.ts
@@ -0,0 +1,299 @@
+/* eslint-disable sort-keys */
+import {create} from 'zustand';
+import {devtools} from 'zustand/middleware';
+
+/**
+ * Tool call lifecycle.
+ * - `running` — request in flight
+ * - `success` — completed normally
+ * - `error` — completed with a real failure (server error, network failure, parse error)
+ * - `aborted` — call terminated by the task-switch cleanup ritual; NOT a real error. Kept distinct from
+ *   `error` so renderers show a neutral "Switched away" affordance and a late aborted callback can't flip a
+ *   failed call back to success.
+ */
+export type ToolCallStatusType = 'running' | 'success' | 'error' | 'aborted';
+
+export type TerminalToolCallStatusType = 'success' | 'error' | 'aborted';
+
+export interface SubagentProgressEntryI {
+    text: string;
+    timestamp: number;
+}
+
+export interface ToolCallEntryI {
+    args?: Record<string, unknown>;
+    taskId?: string;
+    messageIndex: number;
+    progress: SubagentProgressEntryI[];
+    progressiveOutput: string;
+    result?: unknown;
+    status: ToolCallStatusType;
+    toolCallId: string;
+    toolName: string;
+}
+
+export type RunningToolCallEntryType = ToolCallEntryI & {status: 'running'};
+
+export type TerminalToolCallEntryType = ToolCallEntryI & {status: TerminalToolCallStatusType};
+
+export const isRunningToolCall = (entry: ToolCallEntryI): entry is RunningToolCallEntryType =>
+    entry.status === 'running';
+
+export const isTerminalToolCall = (entry: ToolCallEntryI): entry is TerminalToolCallEntryType =>
+    entry.status !== 'running';
+
+interface ToolCallStateI {
+    addProgress: (toolCallId: string, text: string) => void;
+    appendProgressiveOutput: (toolCallId: string, chunk: string) => void;
+    completeToolCall: (toolCallId: string, result: unknown, isError: boolean) => void;
+    failAllRunning: (errorResult: unknown, status?: 'aborted' | 'error') => void;
+    failRunningInTask: (taskId: string, errorResult: unknown, status?: 'aborted' | 'error') => void;
+    findRunningToolCallByName: (toolName: string, taskId?: string) => RunningToolCallEntryType | undefined;
+    order: string[];
+    reset: () => void;
+    resetForTask: (taskId: string | undefined) => void;
+    startToolCall: (toolCallId: string, toolName: string, messageIndex: number, taskId?: string) => void;
+    toolCalls: Record<string, ToolCallEntryI>;
+    updateToolCallArgs: (toolCallId: string, args: Record<string, unknown>) => void;
+}
+
+export const aiChatToolCallStore = create<ToolCallStateI>()(
+    devtools((set, get) => ({
+        order: [] as string[],
+        toolCalls: {} as Record<string, ToolCallEntryI>,
+
+        startToolCall: (toolCallId, toolName, messageIndex, taskId) =>
+            set((state) => {
+                if (state.toolCalls[toolCallId]) {
+                    return state;
+                }
+
+                const newEntry: RunningToolCallEntryType = {
+                    taskId,
+                    messageIndex,
+                    progress: [],
+                    progressiveOutput: '',
+                    status: 'running',
+                    toolCallId,
+                    toolName,
+                };
+
+                return {
+                    ...state,
+                    order: [...state.order, toolCallId],
+                    toolCalls: {
+                        ...state.toolCalls,
+                        [toolCallId]: newEntry,
+                    },
+                };
+            }),
+
+        updateToolCallArgs: (toolCallId, args) =>
+            set((state) => {
+                const existing = state.toolCalls[toolCallId];
+
+                if (!existing) {
+                    return state;
+                }
+
+                return {
+                    ...state,
+                    toolCalls: {
+                        ...state.toolCalls,
+                        [toolCallId]: {...existing, args},
+                    },
+                };
+            }),
+
+        completeToolCall: (toolCallId, result, isError) =>
+            set((state) => {
+                const existing = state.toolCalls[toolCallId];
+
+                if (!existing) {
+                    return state;
+                }
+
+                if (existing.status === 'aborted') {
+                    return state;
+                }
+
+                const completed: TerminalToolCallEntryType = {
+                    args: existing.args,
+                    taskId: existing.taskId,
+                    messageIndex: existing.messageIndex,
+                    progress: existing.progress,
+                    progressiveOutput: existing.progressiveOutput,
+                    result,
+                    status: isError ? 'error' : 'success',
+                    toolCallId: existing.toolCallId,
+                    toolName: existing.toolName,
+                };
+
+                return {
+                    ...state,
+                    toolCalls: {
+                        ...state.toolCalls,
+                        [toolCallId]: completed,
+                    },
+                };
+            }),
+
+        appendProgressiveOutput: (toolCallId, chunk) =>
+            set((state) => {
+                const existing = state.toolCalls[toolCallId];
+
+                if (!existing || existing.status !== 'running') {
+                    return state;
+                }
+
+                return {
+                    ...state,
+                    toolCalls: {
+                        ...state.toolCalls,
+                        [toolCallId]: {
+                            ...existing,
+                            progressiveOutput: existing.progressiveOutput + chunk,
+                        },
+                    },
+                };
+            }),
+
+        addProgress: (toolCallId, text) =>
+            set((state) => {
+                const existing = state.toolCalls[toolCallId];
+
+                if (!existing || existing.status !== 'running') {
+                    return state;
+                }
+
+                return {
+                    ...state,
+                    toolCalls: {
+                        ...state.toolCalls,
+                        [toolCallId]: {
+                            ...existing,
+                            progress: [...existing.progress, {text, timestamp: Date.now()}],
+                        },
+                    },
+                };
+            }),
+
+        failAllRunning: (errorResult, status = 'error') =>
+            set((state) => {
+                const updated: Record<string, ToolCallEntryI> = {...state.toolCalls};
+                let mutated = false;
+
+                for (const id of state.order) {
+                    const entry = updated[id];
+
+                    if (entry && entry.status === 'running') {
+                        const terminated: TerminalToolCallEntryType = {
+                            args: entry.args,
+                            taskId: entry.taskId,
+                            messageIndex: entry.messageIndex,
+                            progress: entry.progress,
+                            progressiveOutput: entry.progressiveOutput,
+                            result: errorResult,
+                            status,
+                            toolCallId: entry.toolCallId,
+                            toolName: entry.toolName,
+                        };
+
+                        updated[id] = terminated;
+                        mutated = true;
+                    }
+                }
+
+                if (!mutated) {
+                    return state;
+                }
+
+                return {...state, toolCalls: updated};
+            }),
+
+        failRunningInTask: (taskId, errorResult, status = 'aborted') =>
+            set((state) => {
+                const updated: Record<string, ToolCallEntryI> = {...state.toolCalls};
+                let mutated = false;
+
+                for (const id of state.order) {
+                    const entry = updated[id];
+
+                    if (entry && entry.status === 'running' && entry.taskId === taskId) {
+                        const terminated: TerminalToolCallEntryType = {
+                            args: entry.args,
+                            taskId: entry.taskId,
+                            messageIndex: entry.messageIndex,
+                            progress: entry.progress,
+                            progressiveOutput: entry.progressiveOutput,
+                            result: errorResult,
+                            status,
+                            toolCallId: entry.toolCallId,
+                            toolName: entry.toolName,
+                        };
+
+                        updated[id] = terminated;
+                        mutated = true;
+                    }
+                }
+
+                if (!mutated) {
+                    return state;
+                }
+
+                return {...state, toolCalls: updated};
+            }),
+
+        findRunningToolCallByName: (toolName, taskId) => {
+            const {order, toolCalls} = get();
+
+            // Walk in reverse insertion order so the most recently started call wins. When taskId is
+            // supplied, skip entries belonging to other tasks so a late event after a task switch
+            // does not land on a card from the previous task.
+            for (let i = order.length - 1; i >= 0; i--) {
+                const entry = toolCalls[order[i]];
+
+                if (!entry || !isRunningToolCall(entry) || entry.toolName !== toolName) {
+                    continue;
+                }
+
+                if (taskId !== undefined && entry.taskId !== taskId) {
+                    continue;
+                }
+
+                return entry;
+            }
+
+            return undefined;
+        },
+
+        reset: () => set({order: [], toolCalls: {}}),
+
+        resetForTask: (taskId) =>
+            set((state) => {
+                if (!taskId) {
+                    return {order: [], toolCalls: {}};
+                }
+
+                const survivingOrder: string[] = [];
+                const survivingToolCalls: Record<string, ToolCallEntryI> = {};
+
+                for (const id of state.order) {
+                    const entry = state.toolCalls[id];
+
+                    if (entry && entry.taskId !== taskId) {
+                        survivingOrder.push(id);
+                        survivingToolCalls[id] = entry;
+                    }
+                }
+
+                if (survivingOrder.length === state.order.length) {
+                    return state;
+                }
+
+                return {...state, order: survivingOrder, toolCalls: survivingToolCalls};
+            }),
+    }))
+);
+
+export const useAiChatToolCallStore = aiChatToolCallStore;
diff --git a/client/src/shared/components/ai/model-picker/ModelPicker.test.tsx b/client/src/shared/components/ai/model-picker/ModelPicker.test.tsx
new file mode 100644
index 00000000000..8b032450eb9
--- /dev/null
+++ b/client/src/shared/components/ai/model-picker/ModelPicker.test.tsx
@@ -0,0 +1,150 @@
+import {render, screen, userEvent, windowResizeObserver} from '@/shared/util/test-utils';
+import {beforeEach, describe, expect, it, vi} from 'vitest';
+
+import ModelPicker from './ModelPicker';
+
+const {navigateMock, useAiProviderCatalogQueryMock} = vi.hoisted(() => ({
+    navigateMock: vi.fn(),
+    useAiProviderCatalogQueryMock: vi.fn(),
+}));
+
+vi.mock('react-router-dom', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('react-router-dom')>()),
+    useNavigate: () => navigateMock,
+}));
+
+vi.mock('@/shared/middleware/graphql', () => ({
+    useAiProviderCatalogQuery: useAiProviderCatalogQueryMock,
+}));
+
+const catalog = [
+    {
+        enabled: true,
+        icon: '<svg>openai</svg>',
+        key: 'ai.provider.openAi',
+        models: [{label: 'GPT-4o', name: 'gpt-4o'}],
+        name: 'Open AI',
+        supportsModelById: false,
+    },
+    {
+        enabled: false,
+        icon: '<svg>anthropic</svg>',
+        key: 'ai.provider.anthropic',
+        models: [],
+        name: 'Anthropic',
+        supportsModelById: true,
+    },
+];
+
+describe('ModelPicker', () => {
+    beforeEach(() => {
+        windowResizeObserver();
+        navigateMock.mockReset();
+        useAiProviderCatalogQueryMock.mockReturnValue({data: {aiProviderCatalog: catalog}});
+        localStorage.clear();
+    });
+
+    it('lists active and inactive providers', async () => {
+        render(<ModelPicker environment={1} onChange={vi.fn()} selectedModel={null} selectedProvider={null} />);
+
+        await userEvent.click(screen.getByLabelText('Select LLM provider and model'));
+
+        expect(screen.getByText('Open AI')).toBeInTheDocument();
+        expect(screen.getByText('Anthropic')).toBeInTheDocument();
+    });
+
+    it('shows the configured default model in the trigger when nothing is selected', () => {
+        render(
+            <ModelPicker
+                defaultModel="gpt-4o"
+                defaultProvider="ai.provider.openAi"
+                environment={1}
+                onChange={vi.fn()}
+                selectedModel={null}
+                selectedProvider={null}
+            />
+        );
+
+        expect(screen.getByText('GPT-4o')).toBeInTheDocument();
+        expect(screen.queryByText('Select model')).not.toBeInTheDocument();
+    });
+
+    it('falls back to "Select model" when no default and no selection', () => {
+        render(<ModelPicker environment={1} onChange={vi.fn()} selectedModel={null} selectedProvider={null} />);
+
+        expect(screen.getByText('Select model')).toBeInTheDocument();
+    });
+
+    it('fires the catalog query on the Development environment (id 0)', () => {
+        // Environments are 0-based (DEVELOPMENT=0); the query must fire for id 0, not only for ids > 0.
+        render(<ModelPicker environment={0} onChange={vi.fn()} selectedModel={null} selectedProvider={null} />);
+
+        expect(useAiProviderCatalogQueryMock).toHaveBeenCalledWith(
+            {environment: '0'},
+            expect.objectContaining({enabled: true})
+        );
+    });
+
+    it('shows exact selected provider+model in the trigger, not a default label', () => {
+        render(
+            <ModelPicker
+                environment={1}
+                onChange={vi.fn()}
+                selectedModel="gpt-4o"
+                selectedProvider="ai.provider.openAi"
+            />
+        );
+
+        expect(screen.getByText('GPT-4o')).toBeInTheDocument();
+        expect(screen.queryByText('Workspace default')).not.toBeInTheDocument();
+    });
+
+    it('shows the workspace-default sentinel and clears selection to (null, null) on click', async () => {
+        const onChange = vi.fn();
+
+        render(
+            <ModelPicker
+                environment={1}
+                onChange={onChange}
+                selectedModel={null}
+                selectedProvider={null}
+                workspaceDefaultLabel="Workspace default"
+            />
+        );
+
+        expect(screen.getByLabelText('Select LLM provider and model')).toHaveTextContent('Workspace default');
+
+        await userEvent.click(screen.getByLabelText('Select LLM provider and model'));
+
+        await userEvent.click(screen.getByText('Use workspace default'));
+
+        expect(onChange).toHaveBeenCalledWith(null, null);
+    });
+
+    it('renders the Personal agents section when personalAgents and onSelectPersonalAgent are passed', async () => {
+        render(
+            <ModelPicker
+                environment={1}
+                onChange={vi.fn()}
+                onSelectPersonalAgent={vi.fn()}
+                personalAgents={[{id: 1, name: 'A', title: 'Agent A'}]}
+                selectedModel={null}
+                selectedProvider={null}
+            />
+        );
+
+        await userEvent.click(screen.getByLabelText('Select LLM provider and model'));
+
+        expect(screen.getByText('Personal agents')).toBeInTheDocument();
+    });
+
+    it('navigates to AI Providers settings for an inactive provider', async () => {
+        render(<ModelPicker environment={1} onChange={vi.fn()} selectedModel={null} selectedProvider={null} />);
+
+        await userEvent.click(screen.getByLabelText('Select LLM provider and model'));
+        await userEvent.click(screen.getByText('Anthropic'));
+        await userEvent.click(screen.getByText('Configure credentials'));
+
+        expect(navigateMock).toHaveBeenCalledWith('/automation/settings/ai-providers');
+    });
+});
diff --git a/client/src/shared/components/ai/model-picker/ModelPicker.tsx b/client/src/shared/components/ai/model-picker/ModelPicker.tsx
new file mode 100644
index 00000000000..3c7212df3e0
--- /dev/null
+++ b/client/src/shared/components/ai/model-picker/ModelPicker.tsx
@@ -0,0 +1,412 @@
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuPortal,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {useAiProviderCatalogQuery} from '@/shared/middleware/graphql';
+import {BotIcon, BrainCircuitIcon, ChevronDownIcon, PlusIcon, SettingsIcon, WorkflowIcon} from 'lucide-react';
+import {useMemo, useState} from 'react';
+import InlineSVG from 'react-inlinesvg';
+import {useNavigate} from 'react-router-dom';
+import {twMerge} from 'tailwind-merge';
+
+const AI_PROVIDERS_SETTINGS_PATH = '/automation/settings/ai-providers';
+
+export interface ModelPickerPersonalAgentI {
+    id: number;
+    name: string;
+    title: string | null;
+}
+
+export interface ModelPickerWorkflowChatI {
+    label: string;
+    projectDeploymentId: string;
+    workflowExecutionId: string;
+}
+
+export interface ModelPickerPropsI {
+    agentDefaultModel?: string | null;
+    agentDefaultProvider?: string | null;
+    defaultModel?: string | null;
+    defaultProvider?: string | null;
+    environment: number;
+    iconOnly?: boolean;
+    layout?: 'compact' | 'full';
+    onChange: (provider: string | null, model: string | null) => void;
+    onSelectPersonalAgent?: (agentId: number) => void;
+    onSelectWorkflowChat?: (workflowExecutionId: string, projectDeploymentId: string, label: string) => void;
+    personalAgents?: ModelPickerPersonalAgentI[];
+    workflowChats?: ModelPickerWorkflowChatI[];
+    selectedModel: string | null;
+    selectedProvider: string | null;
+    workspaceDefaultLabel?: string;
+}
+
+const isPresent = <T,>(value: T | null): value is T => value != null;
+
+const ModelPicker = ({
+    agentDefaultModel,
+    agentDefaultProvider,
+    defaultModel,
+    defaultProvider,
+    environment,
+    iconOnly = false,
+    layout = 'compact',
+    onChange,
+    onSelectPersonalAgent,
+    onSelectWorkflowChat,
+    personalAgents,
+    selectedModel,
+    selectedProvider,
+    workflowChats,
+    workspaceDefaultLabel,
+}: ModelPickerPropsI) => {
+    const [open, setOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [modelByIdProvider, setModelByIdProvider] = useState<string | null>(null);
+    const [modelByIdValue, setModelByIdValue] = useState('');
+
+    const navigate = useNavigate();
+
+    const queryEnabled = environment >= 0;
+
+    const {data: catalogData} = useAiProviderCatalogQuery(
+        {environment: environment >= 0 ? String(environment) : ''},
+        {enabled: queryEnabled}
+    );
+
+    const providers = useMemo(() => (catalogData?.aiProviderCatalog ?? []).filter(isPresent), [catalogData]);
+
+    const sortedProviders = useMemo(() => {
+        const query = searchQuery.trim().toLowerCase();
+        const filtered = query
+            ? providers.filter((provider) => provider.name.toLowerCase().includes(query))
+            : providers;
+
+        return [...filtered].sort((first, second) => first.name.localeCompare(second.name));
+    }, [providers, searchQuery]);
+
+    const showPersonalAgentsSection = onSelectPersonalAgent != null && (personalAgents?.length ?? 0) > 0;
+
+    const sortedPersonalAgents = useMemo(() => {
+        if (!showPersonalAgentsSection || personalAgents == null) {
+            return [];
+        }
+
+        const query = searchQuery.trim().toLowerCase();
+        const filtered = query
+            ? personalAgents.filter(
+                  (agent) =>
+                      (agent.title ?? '').toLowerCase().includes(query) || agent.name.toLowerCase().includes(query)
+              )
+            : personalAgents;
+
+        return [...filtered].sort((first, second) =>
+            (first.title ?? first.name).localeCompare(second.title ?? second.name)
+        );
+    }, [personalAgents, searchQuery, showPersonalAgentsSection]);
+
+    const showWorkflowChatsSection = onSelectWorkflowChat != null && (workflowChats?.length ?? 0) > 0;
+
+    const sortedWorkflowChats = useMemo(() => {
+        if (!showWorkflowChatsSection || workflowChats == null) {
+            return [];
+        }
+
+        const query = searchQuery.trim().toLowerCase();
+        const filtered = query
+            ? workflowChats.filter((chat) => chat.label.toLowerCase().includes(query))
+            : workflowChats;
+
+        return [...filtered].sort((first, second) => first.label.localeCompare(second.label));
+    }, [searchQuery, showWorkflowChatsSection, workflowChats]);
+
+    const triggerContent = useMemo(() => {
+        if (selectedProvider && selectedModel) {
+            const provider = providers.find((candidate) => candidate.key === selectedProvider);
+            const model = provider?.models.find((candidate) => candidate.name === selectedModel);
+
+            return {icon: provider?.icon ?? null, label: model?.label || selectedModel};
+        }
+
+        if (agentDefaultProvider && agentDefaultModel) {
+            const provider = providers.find((candidate) => candidate.key === agentDefaultProvider);
+            const model = provider?.models.find((candidate) => candidate.name === agentDefaultModel);
+
+            return {icon: provider?.icon ?? null, label: model?.label || agentDefaultModel};
+        }
+
+        if (defaultProvider && defaultModel) {
+            const provider = providers.find((candidate) => candidate.key === defaultProvider);
+            const model = provider?.models.find((candidate) => candidate.name === defaultModel);
+
+            return {icon: provider?.icon ?? null, label: model?.label || defaultModel};
+        }
+
+        return {icon: null, label: workspaceDefaultLabel ?? 'Select model'};
+    }, [
+        agentDefaultModel,
+        agentDefaultProvider,
+        defaultModel,
+        defaultProvider,
+        providers,
+        selectedModel,
+        selectedProvider,
+        workspaceDefaultLabel,
+    ]);
+
+    const closeMenu = () => {
+        setOpen(false);
+        setSearchQuery('');
+        setModelByIdProvider(null);
+        setModelByIdValue('');
+    };
+
+    const handleSelectModel = (providerKey: string, modelName: string) => {
+        onChange(providerKey, modelName);
+        closeMenu();
+    };
+
+    const handleSelectDefault = () => {
+        onChange(null, null);
+        closeMenu();
+    };
+
+    const handleConfigureCredentials = () => {
+        navigate(AI_PROVIDERS_SETTINGS_PATH);
+        closeMenu();
+    };
+
+    const handleSelectPersonalAgent = (agentId: number) => {
+        onSelectPersonalAgent?.(agentId);
+        closeMenu();
+    };
+
+    const handleSelectWorkflowChat = (chat: ModelPickerWorkflowChatI) => {
+        onSelectWorkflowChat?.(chat.workflowExecutionId, chat.projectDeploymentId, chat.label);
+        closeMenu();
+    };
+
+    const handleModelByIdSubmit = (providerKey: string) => {
+        const trimmed = modelByIdValue.trim();
+
+        if (trimmed.length > 0) {
+            handleSelectModel(providerKey, trimmed);
+        }
+    };
+
+    const triggerClassName = twMerge(
+        'inline-flex items-center gap-1.5 rounded-md text-sm font-medium text-foreground transition-colors hover:text-accent-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        layout === 'compact'
+            ? 'h-7 border border-transparent bg-transparent px-2 hover:border-input hover:bg-accent'
+            : 'h-9 w-full justify-between border border-input bg-background px-3 hover:bg-accent',
+        iconOnly && 'size-7 justify-center border-0 bg-transparent px-0'
+    );
+
+    return (
+        <DropdownMenu onOpenChange={(next) => (next ? setOpen(true) : closeMenu())} open={open}>
+            <DropdownMenuTrigger asChild>
+                <button
+                    aria-label="Select LLM provider and model"
+                    className={triggerClassName}
+                    title={iconOnly ? triggerContent.label : undefined}
+                    type="button"
+                >
+                    {triggerContent.icon ? (
+                        <InlineSVG className="size-4 shrink-0" src={triggerContent.icon} />
+                    ) : (
+                        <BrainCircuitIcon className="size-4 shrink-0 text-muted-foreground" />
+                    )}
+
+                    {!iconOnly && <span className="truncate">{triggerContent.label}</span>}
+
+                    {!iconOnly && layout === 'full' && (
+                        <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground" />
+                    )}
+                </button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent align="start" className="w-72">
+                <div className="px-2 py-1.5">
+                    <input
+                        aria-label="Search providers"
+                        className="w-full rounded-sm border border-input bg-background px-2 py-1 text-sm placeholder:text-muted-foreground focus:ring-1 focus:ring-ring focus:outline-none"
+                        onChange={(event) => setSearchQuery(event.target.value)}
+                        onKeyDown={(event) => event.stopPropagation()}
+                        placeholder="Search providers..."
+                        type="text"
+                        value={searchQuery}
+                    />
+                </div>
+
+                <DropdownMenuSeparator />
+
+                {workspaceDefaultLabel != null && (
+                    <>
+                        <DropdownMenuItem onSelect={() => handleSelectDefault()}>
+                            <BrainCircuitIcon className="text-muted-foreground" />
+
+                            <span>
+                                {agentDefaultProvider && agentDefaultModel
+                                    ? 'Use agent default'
+                                    : `Use ${workspaceDefaultLabel.toLowerCase()}`}
+                            </span>
+                        </DropdownMenuItem>
+
+                        <DropdownMenuSeparator />
+                    </>
+                )}
+
+                {showPersonalAgentsSection && (
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>
+                            <BotIcon className="text-muted-foreground" />
+
+                            <span>Personal agents</span>
+                        </DropdownMenuSubTrigger>
+
+                        <DropdownMenuPortal>
+                            <DropdownMenuSubContent className="max-h-80 overflow-y-auto">
+                                {sortedPersonalAgents.length === 0 ? (
+                                    <div className="px-2 py-1.5 text-sm text-muted-foreground">No matching agents.</div>
+                                ) : (
+                                    sortedPersonalAgents.map((agent) => (
+                                        <DropdownMenuItem
+                                            key={agent.id}
+                                            onSelect={() => handleSelectPersonalAgent(agent.id)}
+                                        >
+                                            <span className="truncate">{agent.title || agent.name}</span>
+                                        </DropdownMenuItem>
+                                    ))
+                                )}
+                            </DropdownMenuSubContent>
+                        </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                )}
+
+                {showWorkflowChatsSection && (
+                    <DropdownMenuSub>
+                        <DropdownMenuSubTrigger>
+                            <WorkflowIcon className="text-muted-foreground" />
+
+                            <span>Workflow chats</span>
+                        </DropdownMenuSubTrigger>
+
+                        <DropdownMenuPortal>
+                            <DropdownMenuSubContent className="max-h-80 overflow-y-auto">
+                                {sortedWorkflowChats.length === 0 ? (
+                                    <div className="px-2 py-1.5 text-sm text-muted-foreground">
+                                        No matching workflows.
+                                    </div>
+                                ) : (
+                                    sortedWorkflowChats.map((chat) => (
+                                        <DropdownMenuItem
+                                            key={chat.workflowExecutionId}
+                                            onSelect={() => handleSelectWorkflowChat(chat)}
+                                        >
+                                            <span className="truncate">{chat.label}</span>
+                                        </DropdownMenuItem>
+                                    ))
+                                )}
+                            </DropdownMenuSubContent>
+                        </DropdownMenuPortal>
+                    </DropdownMenuSub>
+                )}
+
+                {(showPersonalAgentsSection || showWorkflowChatsSection) && <DropdownMenuSeparator />}
+
+                {sortedProviders.length === 0 ? (
+                    <div className="px-2 py-1.5 text-sm text-muted-foreground">
+                        {searchQuery.trim() ? 'No matching providers.' : 'No providers available.'}
+                    </div>
+                ) : (
+                    sortedProviders.map((provider) => (
+                        <DropdownMenuSub key={provider.key}>
+                            <DropdownMenuSubTrigger>
+                                {provider.icon ? (
+                                    <InlineSVG className="size-4 shrink-0" src={provider.icon} />
+                                ) : (
+                                    <BrainCircuitIcon className="size-4 shrink-0 text-muted-foreground" />
+                                )}
+
+                                <span className="truncate">{provider.name}</span>
+                            </DropdownMenuSubTrigger>
+
+                            <DropdownMenuPortal>
+                                <DropdownMenuSubContent className="max-h-80 overflow-y-auto">
+                                    {!provider.enabled ? (
+                                        <DropdownMenuItem onSelect={handleConfigureCredentials}>
+                                            <SettingsIcon className="text-muted-foreground" />
+
+                                            <span>Configure credentials</span>
+                                        </DropdownMenuItem>
+                                    ) : (
+                                        <>
+                                            {provider.models.map((model) => (
+                                                <DropdownMenuItem
+                                                    key={model.name}
+                                                    onSelect={() => handleSelectModel(provider.key, model.name)}
+                                                >
+                                                    <span className="truncate">{model.label || model.name}</span>
+                                                </DropdownMenuItem>
+                                            ))}
+
+                                            {provider.supportsModelById && (
+                                                <>
+                                                    {provider.models.length > 0 && <DropdownMenuSeparator />}
+
+                                                    {modelByIdProvider === provider.key ? (
+                                                        <div className="px-2 py-1.5">
+                                                            <input
+                                                                aria-label="Model id"
+                                                                autoFocus
+                                                                className="w-full rounded-sm border border-input bg-background px-2 py-1 text-sm focus:ring-1 focus:ring-ring focus:outline-none"
+                                                                onChange={(event) =>
+                                                                    setModelByIdValue(event.target.value)
+                                                                }
+                                                                onKeyDown={(event) => {
+                                                                    event.stopPropagation();
+
+                                                                    if (event.key === 'Enter') {
+                                                                        handleModelByIdSubmit(provider.key);
+                                                                    }
+                                                                }}
+                                                                placeholder="model-id"
+                                                                type="text"
+                                                                value={modelByIdValue}
+                                                            />
+                                                        </div>
+                                                    ) : (
+                                                        <DropdownMenuItem
+                                                            onSelect={(event) => {
+                                                                event.preventDefault();
+                                                                setModelByIdProvider(provider.key);
+                                                                setModelByIdValue('');
+                                                            }}
+                                                        >
+                                                            <PlusIcon className="text-muted-foreground" />
+
+                                                            <span>Choose model by ID</span>
+                                                        </DropdownMenuItem>
+                                                    )}
+                                                </>
+                                            )}
+                                        </>
+                                    )}
+                                </DropdownMenuSubContent>
+                            </DropdownMenuPortal>
+                        </DropdownMenuSub>
+                    ))
+                )}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    );
+};
+
+export default ModelPicker;
diff --git a/client/src/shared/components/ai/model-picker/lastUsedModel.test.ts b/client/src/shared/components/ai/model-picker/lastUsedModel.test.ts
new file mode 100644
index 00000000000..89e80697a99
--- /dev/null
+++ b/client/src/shared/components/ai/model-picker/lastUsedModel.test.ts
@@ -0,0 +1,27 @@
+import {beforeEach, describe, expect, it} from 'vitest';
+
+import {readLastUsedModel, writeLastUsedModel} from './lastUsedModel';
+
+describe('lastUsedModel', () => {
+    beforeEach(() => {
+        localStorage.clear();
+    });
+
+    it('returns null when nothing stored', () => {
+        expect(readLastUsedModel(42)).toBeNull();
+    });
+
+    it('round-trips a written selection per workspace', () => {
+        writeLastUsedModel(42, 'ai.provider.openAi', 'gpt-4o');
+
+        expect(readLastUsedModel(42)).toEqual({model: 'gpt-4o', provider: 'ai.provider.openAi'});
+        expect(readLastUsedModel(43)).toBeNull();
+    });
+
+    it('clears when provider or model is null', () => {
+        writeLastUsedModel(42, 'ai.provider.openAi', 'gpt-4o');
+        writeLastUsedModel(42, null, null);
+
+        expect(readLastUsedModel(42)).toBeNull();
+    });
+});
diff --git a/client/src/shared/components/ai/model-picker/lastUsedModel.ts b/client/src/shared/components/ai/model-picker/lastUsedModel.ts
new file mode 100644
index 00000000000..eaa0e4b3dde
--- /dev/null
+++ b/client/src/shared/components/ai/model-picker/lastUsedModel.ts
@@ -0,0 +1,41 @@
+/**
+ * Per-workspace persistence of the user's last-used (provider, model) selection so a fresh conversation
+ * or task seeds the picker with what they last ran, instead of the workspace default. Keyed by workspace;
+ * the value is a stable provider key (e.g. "ai.provider.openAi") + model name.
+ */
+interface LastUsedModelI {
+    model: string;
+    provider: string;
+}
+
+const storageKey = (workspaceId: number) => `bytechef.modelPicker.lastUsed.${workspaceId}`;
+
+export const readLastUsedModel = (workspaceId: number): LastUsedModelI | null => {
+    const raw = localStorage.getItem(storageKey(workspaceId));
+
+    if (raw == null) {
+        return null;
+    }
+
+    try {
+        const parsed = JSON.parse(raw) as Partial<LastUsedModelI>;
+
+        if (parsed.provider == null || parsed.model == null) {
+            return null;
+        }
+
+        return {model: parsed.model, provider: parsed.provider};
+    } catch {
+        return null;
+    }
+};
+
+export const writeLastUsedModel = (workspaceId: number, provider: string | null, model: string | null): void => {
+    if (provider == null || model == null) {
+        localStorage.removeItem(storageKey(workspaceId));
+
+        return;
+    }
+
+    localStorage.setItem(storageKey(workspaceId), JSON.stringify({model, provider}));
+};
diff --git a/client/src/shared/components/copilot/CopilotPanel.tsx b/client/src/shared/components/copilot/CopilotPanel.tsx
index cc0d98c4035..55718680a0c 100644
--- a/client/src/shared/components/copilot/CopilotPanel.tsx
+++ b/client/src/shared/components/copilot/CopilotPanel.tsx
@@ -1,11 +1,18 @@
 import Button from '@/components/Button/Button';
 import {Thread} from '@/components/assistant-ui/thread';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
+import {useWorkspaceStore} from '@/pages/automation/stores/useWorkspaceStore';
 import ModeSwitch from '@/shared/components/ModeSwitch/ModeSwitch';
+import {aiChatDataComponents} from '@/shared/components/ai-chat/messages/aiChatDataComponents';
+import ModelPicker from '@/shared/components/ai/model-picker/ModelPicker';
+import {readLastUsedModel, writeLastUsedModel} from '@/shared/components/ai/model-picker/lastUsedModel';
 import CopilotPanelBoundary from '@/shared/components/copilot/CopilotPanelBoundary';
 import {CopilotRuntimeProvider} from '@/shared/components/copilot/runtime-providers/CopilotRuntimeProvider';
 import useCopilotPanelStore from '@/shared/components/copilot/stores/useCopilotPanelStore';
 import {MODE, Source, useCopilotStore} from '@/shared/components/copilot/stores/useCopilotStore';
+import {useAiDefaultModelQuery} from '@/shared/middleware/graphql';
+import {useEnvironmentStore} from '@/shared/stores/useEnvironmentStore';
+import {type SuggestionConfig} from '@assistant-ui/react';
 import {BotMessageSquareIcon, MessageSquareXIcon, XIcon} from 'lucide-react';
 import {useEffect, useRef, useState} from 'react';
 import {useLocation} from 'react-router-dom';
@@ -14,6 +21,29 @@ import {useShallow} from 'zustand/react/shallow';
 
 const ANIMATION_DURATION_MS = 300;
 
+const COPILOT_SUGGESTIONS: SuggestionConfig[] = [
+    {
+        label: 'does end-to-end.',
+        prompt: 'Describe what this workflow does end-to-end.',
+        title: 'Describe what this workflow',
+    },
+    {
+        label: 'of this action are required?',
+        prompt: 'Which properties of this action are required?',
+        title: 'Which properties',
+    },
+    {
+        label: 'that can send an email',
+        prompt: 'Search for an action that can send an email',
+        title: 'Search for an action',
+    },
+    {
+        label: 'conditional branching in workflows?',
+        prompt: 'How do I implement conditional branching in workflows?',
+        title: 'How do I implement',
+    },
+];
+
 interface CopilotPanelProps {
     className?: string;
     headerClassName?: string;
@@ -23,17 +53,32 @@ interface CopilotPanelProps {
 }
 
 const CopilotPanelContent = ({className, headerClassName, onClose, source}: Omit<CopilotPanelProps, 'open'>) => {
-    const {context, generateConversationId, resetMessages, setContext} = useCopilotStore(
+    const {
+        context,
+        generateConversationId,
+        resetMessages,
+        selectedLlmModel,
+        selectedLlmProvider,
+        setContext,
+        setSelectedLlm,
+    } = useCopilotStore(
         useShallow((state) => ({
             context: state.context,
             generateConversationId: state.generateConversationId,
             resetMessages: state.resetMessages,
+            selectedLlmModel: state.selectedLlmModel,
+            selectedLlmProvider: state.selectedLlmProvider,
             setContext: state.setContext,
+            setSelectedLlm: state.setSelectedLlm,
         }))
     );
+    const currentWorkspaceId = useWorkspaceStore((state) => state.currentWorkspaceId);
+    const currentEnvironmentId = useEnvironmentStore((state) => state.currentEnvironmentId);
     const setCopilotPanelOpen = useCopilotPanelStore((state) => state.setCopilotPanelOpen);
     const location = useLocation();
 
+    const {data: defaultModelData} = useAiDefaultModelQuery({environment: String(currentEnvironmentId)});
+
     const handleCleanMessages = () => {
         resetMessages();
         generateConversationId();
@@ -89,7 +134,7 @@ const CopilotPanelContent = ({className, headerClassName, onClose, source}: Omit
             </div>
 
             <div className="absolute inset-x-0 top-16 bottom-0 -mx-1">
-                <CopilotRuntimeProvider source={source}>
+                <CopilotRuntimeProvider source={source} suggestions={COPILOT_SUGGESTIONS}>
                     <Thread
                         composerActions={
                             !source ? (
@@ -101,6 +146,26 @@ const CopilotPanelContent = ({className, headerClassName, onClose, source}: Omit
                                 />
                             ) : null
                         }
+                        dataComponents={aiChatDataComponents}
+                        leadingComposerActions={
+                            currentWorkspaceId != null ? (
+                                <ModelPicker
+                                    defaultModel={defaultModelData?.aiDefaultModel?.model ?? null}
+                                    defaultProvider={defaultModelData?.aiDefaultModel?.provider ?? null}
+                                    environment={currentEnvironmentId}
+                                    onChange={(provider, model) => {
+                                        writeLastUsedModel(currentWorkspaceId, provider, model);
+                                        setSelectedLlm(provider, model);
+                                    }}
+                                    selectedModel={
+                                        selectedLlmModel ?? readLastUsedModel(currentWorkspaceId)?.model ?? null
+                                    }
+                                    selectedProvider={
+                                        selectedLlmProvider ?? readLastUsedModel(currentWorkspaceId)?.provider ?? null
+                                    }
+                                />
+                            ) : null
+                        }
                     />
                 </CopilotRuntimeProvider>
             </div>
diff --git a/client/src/shared/components/copilot/runtime-providers/CopilotRuntimeProvider.tsx b/client/src/shared/components/copilot/runtime-providers/CopilotRuntimeProvider.tsx
index 3f32e536cc5..082a7ad193e 100644
--- a/client/src/shared/components/copilot/runtime-providers/CopilotRuntimeProvider.tsx
+++ b/client/src/shared/components/copilot/runtime-providers/CopilotRuntimeProvider.tsx
@@ -1,6 +1,12 @@
+import {useWorkspaceStore} from '@/pages/automation/stores/useWorkspaceStore';
+import {humanizeAgentErrorMessage} from '@/shared/components/ai-chat/messages/humanizeAgentErrorMessage';
+import {parseJson, toToolResultDataPart} from '@/shared/components/ai-chat/messages/toToolResultDataPart';
+import {aiChatToolCallStore} from '@/shared/components/ai-chat/stores/useAiChatToolCallStore';
 import useCopilotPostTurnRegistry from '@/shared/components/copilot/stores/useCopilotPostTurnRegistry';
 import useCopilotStateContributorRegistry from '@/shared/components/copilot/stores/useCopilotStateContributorRegistry';
 import {Source, useCopilotStore} from '@/shared/components/copilot/stores/useCopilotStore';
+import useCopilotToolResultHandlerRegistry from '@/shared/components/copilot/stores/useCopilotToolResultHandlerRegistry';
+import {environmentStore} from '@/shared/stores/useEnvironmentStore';
 import {getCookie} from '@/shared/util/cookie-utils';
 import {getRandomId} from '@/shared/util/random-utils';
 import {AgentSubscriber, HttpAgent} from '@ag-ui/client';
@@ -32,17 +38,27 @@ export function CopilotRuntimeProvider({
 }>) {
     const [isRunning, setIsRunning] = useState(false);
 
-    const {addMessage, appendToLastAssistantMessage, context, conversationId, editUserMessage, messages} =
-        useCopilotStore(
-            useShallow((state) => ({
-                addMessage: state.addMessage,
-                appendToLastAssistantMessage: state.appendToLastAssistantMessage,
-                context: state.context,
-                conversationId: state.conversationId,
-                editUserMessage: state.editUserMessage,
-                messages: state.messages,
-            }))
-        );
+    const {
+        addMessage,
+        appendToLastAssistantMessage,
+        context,
+        conversationId,
+        editUserMessage,
+        messages,
+        selectedLlmModel,
+        selectedLlmProvider,
+    } = useCopilotStore(
+        useShallow((state) => ({
+            addMessage: state.addMessage,
+            appendToLastAssistantMessage: state.appendToLastAssistantMessage,
+            context: state.context,
+            conversationId: state.conversationId,
+            editUserMessage: state.editUserMessage,
+            messages: state.messages,
+            selectedLlmModel: state.selectedLlmModel,
+            selectedLlmProvider: state.selectedLlmProvider,
+        }))
+    );
 
     const sourceKey = sourceProp ?? context?.source ?? Source.WORKFLOW_EDITOR;
 
@@ -72,23 +88,78 @@ export function CopilotRuntimeProvider({
 
         delete contextWithoutError.workflowExecutionError;
 
+        const currentWorkspaceId = useWorkspaceStore.getState().currentWorkspaceId;
+
         const stateToSend = {
             ...contextWithoutError,
             ...useCopilotStateContributorRegistry.getState().contribute(),
+            environmentId: String(environmentStore.getState().currentEnvironmentId ?? 0),
+            ...(currentWorkspaceId != null ? {workspaceId: String(currentWorkspaceId)} : {}),
+            ...(selectedLlmProvider != null && selectedLlmModel != null
+                ? {userSelectedLlmModel: selectedLlmModel, userSelectedLlmProvider: selectedLlmProvider}
+                : {}),
         };
 
         agent.setState(stateToSend);
 
-        // Prepare an empty assistant message to stream into
-        addMessage({content: '', role: 'assistant'});
+        const toolCallNamesById = new Map<string, string>();
 
         const subscriber: AgentSubscriber = {
+            onRunErrorEvent: ({event}) => {
+                const rawMessage = typeof event?.message === 'string' ? event.message.trim() : '';
+                const message =
+                    rawMessage.length > 0
+                        ? humanizeAgentErrorMessage(rawMessage)
+                        : 'The agent run failed before completing this turn.';
+
+                addMessage({content: [{data: {message}, type: 'data-run-error'}], role: 'assistant'});
+            },
             onTextMessageContentEvent: ({event, textMessageBuffer}) => {
                 appendToLastAssistantMessage(textMessageBuffer + event.delta);
             },
             onTextMessageEndEvent: ({textMessageBuffer}) => {
                 appendToLastAssistantMessage(textMessageBuffer);
             },
+            onToolCallResultEvent: ({event}) => {
+                const toolCallName = toolCallNamesById.get(event.toolCallId);
+
+                toolCallNamesById.delete(event.toolCallId);
+
+                useCopilotToolResultHandlerRegistry.getState().runFor(toolCallName ?? '', event.content);
+
+                const dataPart = toToolResultDataPart(toolCallName ?? '', event.content);
+
+                if (!dataPart) {
+                    return;
+                }
+
+                if (!dataPart.ok) {
+                    const errorEnvelope = parseJson<{error?: unknown}>(
+                        event.content,
+                        'copilot tool-result error envelope'
+                    );
+                    const envelopeError =
+                        errorEnvelope != null && typeof errorEnvelope.error === 'string' ? errorEnvelope.error : null;
+
+                    aiChatToolCallStore
+                        .getState()
+                        .completeToolCall(event.toolCallId, {error: envelopeError ?? dataPart.errorMessage}, true);
+
+                    if (envelopeError == null) {
+                        toast.error(dataPart.errorMessage);
+                    }
+
+                    return;
+                }
+
+                addMessage({
+                    content: [{data: dataPart.data, type: dataPart.type as `data-${string}`}],
+                    role: 'assistant',
+                });
+            },
+            onToolCallStartEvent: ({event}) => {
+                toolCallNamesById.set(event.toolCallId, event.toolCallName);
+            },
         };
 
         try {
diff --git a/client/src/shared/components/copilot/stores/useCopilotCodeToolResultStore.ts b/client/src/shared/components/copilot/stores/useCopilotCodeToolResultStore.ts
new file mode 100644
index 00000000000..d37c2b7d1ea
--- /dev/null
+++ b/client/src/shared/components/copilot/stores/useCopilotCodeToolResultStore.ts
@@ -0,0 +1,15 @@
+import {create} from 'zustand';
+
+interface CopilotCodeToolResultStateI {
+    clear: () => void;
+    lastUpdatedDefinition: string | null;
+    setLastUpdatedDefinition: (definition: string | null) => void;
+}
+
+const useCopilotCodeToolResultStore = create<CopilotCodeToolResultStateI>((set) => ({
+    clear: () => set({lastUpdatedDefinition: null}),
+    lastUpdatedDefinition: null,
+    setLastUpdatedDefinition: (definition) => set({lastUpdatedDefinition: definition}),
+}));
+
+export default useCopilotCodeToolResultStore;
diff --git a/client/src/shared/components/copilot/stores/useCopilotStore.ts b/client/src/shared/components/copilot/stores/useCopilotStore.ts
index db101949050..cdacc55a542 100644
--- a/client/src/shared/components/copilot/stores/useCopilotStore.ts
+++ b/client/src/shared/components/copilot/stores/useCopilotStore.ts
@@ -54,8 +54,17 @@ interface CopilotStateI {
     appendToLastAssistantMessage: (text: string) => void;
     editUserMessage: (index: number, content: string) => void;
     resetMessages: () => void;
-
-    savedState: {conversationId: string | undefined; context: ContextType; messages: ThreadMessageLike[]} | null;
+    selectedLlmProvider: string | null;
+    selectedLlmModel: string | null;
+    setSelectedLlm: (provider: string | null, model: string | null) => void;
+
+    savedState: {
+        conversationId: string | undefined;
+        context: ContextType;
+        messages: ThreadMessageLike[];
+        selectedLlmProvider: string | null;
+        selectedLlmModel: string | null;
+    } | null;
     saveConversationState: () => void;
     restoreConversationState: () => void;
 }
@@ -64,7 +73,10 @@ export const useCopilotStore = create<CopilotStateI>()(
     devtools((set) => ({
         conversationId: generateRandomId(),
         generateConversationId: () => {
-            set({conversationId: generateRandomId()});
+            // New conversation = reset the picker too. The picker is "per conversation" by design, so a
+            // user who picked GPT-4o in one conversation lands on the workspace default in the next one
+            // rather than carrying the selection across unrelated threads.
+            set({conversationId: generateRandomId(), selectedLlmModel: null, selectedLlmProvider: null});
         },
 
         context: {
@@ -139,6 +151,13 @@ export const useCopilotStore = create<CopilotStateI>()(
             }),
         resetMessages: () => set({messages: []}),
 
+        // Per-conversation LLM picker selection. Stored as nullable strings; the runtime provider injects
+        // both into the AG-UI state on every chat request when set. Null means "no override — server uses
+        // the workspace @Primary ChatModel."
+        selectedLlmProvider: null,
+        selectedLlmModel: null,
+        setSelectedLlm: (provider, model) => set({selectedLlmModel: model, selectedLlmProvider: provider}),
+
         savedState: null,
         saveConversationState: () =>
             set((state) => ({
@@ -147,6 +166,8 @@ export const useCopilotStore = create<CopilotStateI>()(
                     conversationId: state.conversationId,
                     context: state.context,
                     messages: state.messages,
+                    selectedLlmModel: state.selectedLlmModel,
+                    selectedLlmProvider: state.selectedLlmProvider,
                 },
             })),
         restoreConversationState: () =>
@@ -161,6 +182,8 @@ export const useCopilotStore = create<CopilotStateI>()(
                     context: state.savedState.context,
                     messages: state.savedState.messages,
                     savedState: null,
+                    selectedLlmModel: state.savedState.selectedLlmModel,
+                    selectedLlmProvider: state.savedState.selectedLlmProvider,
                 };
             }),
     }))
diff --git a/client/src/shared/components/copilot/stores/useCopilotToolResultHandlerRegistry.ts b/client/src/shared/components/copilot/stores/useCopilotToolResultHandlerRegistry.ts
new file mode 100644
index 00000000000..5a31a245b23
--- /dev/null
+++ b/client/src/shared/components/copilot/stores/useCopilotToolResultHandlerRegistry.ts
@@ -0,0 +1,35 @@
+import {create} from 'zustand';
+
+type ToolResultHandlerType = (content: string) => void;
+
+interface ToolResultHandlerRegistryStateI {
+    handlers: Partial<Record<string, ToolResultHandlerType>>;
+    register: (toolName: string, handler: ToolResultHandlerType) => () => void;
+    runFor: (toolName: string, content: string) => void;
+}
+
+const useCopilotToolResultHandlerRegistry = create<ToolResultHandlerRegistryStateI>((set, get) => ({
+    handlers: {},
+    register: (toolName, handler) => {
+        set((state) => ({handlers: {...state.handlers, [toolName]: handler}}));
+
+        return () => {
+            set((state) => {
+                if (state.handlers[toolName] !== handler) {
+                    return state;
+                }
+
+                const nextHandlers = {...state.handlers};
+
+                delete nextHandlers[toolName];
+
+                return {handlers: nextHandlers};
+            });
+        };
+    },
+    runFor: (toolName, content) => {
+        get().handlers[toolName]?.(content);
+    },
+}));
+
+export default useCopilotToolResultHandlerRegistry;
diff --git a/client/src/shared/components/copilot/utils/extractScriptFromDefinition.test.ts b/client/src/shared/components/copilot/utils/extractScriptFromDefinition.test.ts
new file mode 100644
index 00000000000..f9e6edeb9dc
--- /dev/null
+++ b/client/src/shared/components/copilot/utils/extractScriptFromDefinition.test.ts
@@ -0,0 +1,47 @@
+import {describe, expect, it} from 'vitest';
+
+import {extractScriptFromDefinition} from './extractScriptFromDefinition';
+
+describe('extractScriptFromDefinition', () => {
+    it('returns the full script for a top-level task by node name', () => {
+        const definition = JSON.stringify({
+            tasks: [
+                {name: 'other_1', parameters: {script: 'return 1;'}},
+                {name: 'script_1', parameters: {script: 'var a = 1;\nreturn a;'}},
+            ],
+        });
+
+        expect(extractScriptFromDefinition(definition, 'script_1')).toBe('var a = 1;\nreturn a;');
+    });
+
+    it('finds a script nested inside a dispatcher task', () => {
+        const definition = JSON.stringify({
+            tasks: [
+                {
+                    name: 'condition_1',
+                    parameters: {
+                        caseTrue: [{name: 'script_1', parameters: {script: 'return true;'}}],
+                    },
+                },
+            ],
+        });
+
+        expect(extractScriptFromDefinition(definition, 'script_1')).toBe('return true;');
+    });
+
+    it('returns null when the node is not present', () => {
+        const definition = JSON.stringify({tasks: [{name: 'script_1', parameters: {script: 'x'}}]});
+
+        expect(extractScriptFromDefinition(definition, 'missing_1')).toBeNull();
+    });
+
+    it('returns null when the matched node has no script parameter', () => {
+        const definition = JSON.stringify({tasks: [{name: 'script_1', parameters: {language: 'javascript'}}]});
+
+        expect(extractScriptFromDefinition(definition, 'script_1')).toBeNull();
+    });
+
+    it('returns null when the definition is not valid JSON', () => {
+        expect(extractScriptFromDefinition('not json {', 'script_1')).toBeNull();
+    });
+});
diff --git a/client/src/shared/components/copilot/utils/extractScriptFromDefinition.ts b/client/src/shared/components/copilot/utils/extractScriptFromDefinition.ts
new file mode 100644
index 00000000000..607309b4b27
--- /dev/null
+++ b/client/src/shared/components/copilot/utils/extractScriptFromDefinition.ts
@@ -0,0 +1,47 @@
+export function extractScriptFromDefinition(definition: string, nodeName: string): string | null {
+    let parsed: unknown;
+
+    try {
+        parsed = JSON.parse(definition);
+    } catch {
+        return null;
+    }
+
+    const script = findScript(parsed, nodeName);
+
+    return typeof script === 'string' ? script : null;
+}
+
+function findScript(node: unknown, nodeName: string): unknown {
+    if (Array.isArray(node)) {
+        for (const item of node) {
+            const found = findScript(item, nodeName);
+
+            if (found !== undefined) {
+                return found;
+            }
+        }
+
+        return undefined;
+    }
+
+    if (node && typeof node === 'object') {
+        const record = node as Record<string, unknown>;
+
+        if (record.name === nodeName) {
+            const parameters = record.parameters as Record<string, unknown> | undefined;
+
+            return parameters?.script;
+        }
+
+        for (const value of Object.values(record)) {
+            const found = findScript(value, nodeName);
+
+            if (found !== undefined) {
+                return found;
+            }
+        }
+    }
+
+    return undefined;
+}
diff --git a/client/src/shared/middleware/graphql.ts b/client/src/shared/middleware/graphql.ts
index e54160a53c1..7d437163fff 100644
--- a/client/src/shared/middleware/graphql.ts
+++ b/client/src/shared/middleware/graphql.ts
@@ -1148,6 +1148,20 @@ export type UpdateMcpIntegrationInstanceConfigurationWorkflowMutationVariables =
 
 export type UpdateMcpIntegrationInstanceConfigurationWorkflowMutation = { updateMcpIntegrationInstanceConfigurationWorkflow: { id: string, mcpIntegrationInstanceConfigurationId: any, integrationInstanceConfigurationWorkflowId: any, parameters: any } | null };
 
+export type AiDefaultModelQueryVariables = Exact<{
+  environment: string | number;
+}>;
+
+
+export type AiDefaultModelQuery = { aiDefaultModel: { provider: string, model: string } | null };
+
+export type AiProviderCatalogQueryVariables = Exact<{
+  environment: string | number;
+}>;
+
+
+export type AiProviderCatalogQuery = { aiProviderCatalog: Array<{ key: string, name: string, icon: string | null, enabled: boolean, supportsModelById: boolean, models: Array<{ name: string, label: string }> }> };
+
 export type ApiConnectorQueryVariables = Exact<{
   id: string | number;
 }>;
@@ -5820,6 +5834,63 @@ export const useUpdateMcpIntegrationInstanceConfigurationWorkflowMutation = <
   }
     )};
 
+export const AiDefaultModelDocument = new TypedDocumentString(`
+    query aiDefaultModel($environment: ID!) {
+  aiDefaultModel(environment: $environment) {
+    provider
+    model
+  }
+}
+    `);
+
+export const useAiDefaultModelQuery = <
+      TData = AiDefaultModelQuery,
+      TError = unknown
+    >(
+      variables: AiDefaultModelQueryVariables,
+      options?: Omit<UseQueryOptions<AiDefaultModelQuery, TError, TData>, 'queryKey'> & { queryKey?: UseQueryOptions<AiDefaultModelQuery, TError, TData>['queryKey'] }
+    ) => {
+
+    return useQuery<AiDefaultModelQuery, TError, TData>(
+      {
+    queryKey: ['aiDefaultModel', variables],
+    queryFn: fetcher<AiDefaultModelQuery, AiDefaultModelQueryVariables>(AiDefaultModelDocument, variables),
+    ...options
+  }
+    )};
+
+export const AiProviderCatalogDocument = new TypedDocumentString(`
+    query aiProviderCatalog($environment: ID!) {
+  aiProviderCatalog(environment: $environment) {
+    key
+    name
+    icon
+    enabled
+    supportsModelById
+    models {
+      name
+      label
+    }
+  }
+}
+    `);
+
+export const useAiProviderCatalogQuery = <
+      TData = AiProviderCatalogQuery,
+      TError = unknown
+    >(
+      variables: AiProviderCatalogQueryVariables,
+      options?: Omit<UseQueryOptions<AiProviderCatalogQuery, TError, TData>, 'queryKey'> & { queryKey?: UseQueryOptions<AiProviderCatalogQuery, TError, TData>['queryKey'] }
+    ) => {
+
+    return useQuery<AiProviderCatalogQuery, TError, TData>(
+      {
+    queryKey: ['aiProviderCatalog', variables],
+    queryFn: fetcher<AiProviderCatalogQuery, AiProviderCatalogQueryVariables>(AiProviderCatalogDocument, variables),
+    ...options
+  }
+    )};
+
 export const ApiConnectorDocument = new TypedDocumentString(`
     query apiConnector($id: ID!) {
   apiConnector(id: $id) {