@xenosystem/agent-interface-ui 0.1.25 → 0.1.27

package/dist/components/agent/AgentNotificationBanner.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { AcpNotification } from '@xenosystem/agent-interface-contract';
+interface AgentNotificationBannerProps {
+    notifications: AcpNotification[];
+    onDismiss: (notificationId: string) => void;
+    onAction?: (action: string, command?: string, url?: string) => void;
+}
+export declare const AgentNotificationBanner: React.FC<AgentNotificationBannerProps>;
+export {};
+//# sourceMappingURL=AgentNotificationBanner.d.ts.map

package/dist/components/agent/AgentNotificationBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentNotificationBanner.d.ts","sourceRoot":"","sources":["../../../src/components/agent/AgentNotificationBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AAE3E,UAAU,4BAA4B;IACpC,aAAa,EAAE,eAAe,EAAE,CAAA;IAChC,SAAS,EAAE,CAAC,cAAc,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACpE;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAyF1E,CAAA"}

package/dist/components/agent/AgentNotificationBanner.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AlertTriangle, AlertCircle, Info, X, ExternalLink, Terminal } from 'lucide-react';
+export const AgentNotificationBanner = ({ notifications, onDismiss, onAction, }) => {
+    if (!notifications || notifications.length === 0)
+        return null;
+    return (_jsx("div", { className: "mb-2.5 flex flex-col gap-2", children: notifications.map((notif) => {
+            const isError = notif.severity === 'error';
+            const isWarning = notif.severity === 'warning' || notif.category === 'rate_limit';
+            const borderClass = isError
+                ? 'border-red-500/30 bg-red-500/[0.08] text-red-200'
+                : isWarning
+                    ? 'border-amber-400/30 bg-amber-400/[0.08] text-amber-100'
+                    : 'border-blue-400/30 bg-blue-400/[0.08] text-blue-100';
+            const iconColor = isError
+                ? 'text-red-400'
+                : isWarning
+                    ? 'text-amber-400'
+                    : 'text-blue-400';
+            const actionBtnClass = isError
+                ? 'bg-red-500/20 hover:bg-red-500/30 text-red-100 border border-red-500/30'
+                : isWarning
+                    ? 'bg-amber-400/20 hover:bg-amber-400/30 text-amber-100 border border-amber-400/30'
+                    : 'bg-blue-400/20 hover:bg-blue-400/30 text-blue-100 border border-blue-400/30';
+            return (_jsxs("div", { className: `relative flex items-start gap-2.5 rounded-md border px-3 py-2.5 text-[12px] shadow-sm transition-all duration-200 ${borderClass}`, role: "alert", children: [_jsx("div", { className: `mt-0.5 shrink-0 ${iconColor}`, children: isError ? (_jsx(AlertCircle, { className: "h-4 w-4" })) : isWarning ? (_jsx(AlertTriangle, { className: "h-4 w-4" })) : (_jsx(Info, { className: "h-4 w-4" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [notif.title && (_jsx("div", { className: "font-medium tracking-tight mb-0.5 opacity-95", children: notif.title })), _jsx("div", { className: "leading-relaxed opacity-90 break-words", children: notif.message }), notif.actions && notif.actions.length > 0 && (_jsx("div", { className: "mt-2 flex flex-wrap items-center gap-1.5", children: notif.actions.map((act) => (_jsxs("button", { type: "button", onClick: () => onAction?.(act.action, act.command, act.url), className: `inline-flex items-center gap-1 rounded px-2 py-0.5 text-[11px] font-medium transition-colors cursor-pointer focus-visible:outline focus-visible:outline-1 focus-visible:outline-white/40 ${actionBtnClass}`, children: [act.action === 'command' && _jsx(Terminal, { className: "h-3 w-3 opacity-70" }), act.action === 'link' && _jsx(ExternalLink, { className: "h-3 w-3 opacity-70" }), _jsx("span", { children: act.label })] }, act.id))) }))] }), _jsx("button", { type: "button", onClick: () => onDismiss(notif.deduplicationKey || notif.id), className: "shrink-0 rounded p-0.5 opacity-60 hover:opacity-100 transition-opacity cursor-pointer focus-visible:outline focus-visible:outline-1 focus-visible:outline-white/40", "aria-label": "Dismiss notification", title: "Dismiss", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }, notif.id));
+        }) }));
+};
+//# sourceMappingURL=AgentNotificationBanner.js.map

package/dist/components/agent/AgentNotificationBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentNotificationBanner.js","sourceRoot":"","sources":["../../../src/components/agent/AgentNotificationBanner.tsx"],"names":[],"mappings":"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"}

package/dist/components/agent/AgentOnboarding.d.ts

@@ -1,16 +1,30 @@
+import { type OnboardingModel } from './onboardingModels.js';
+import type { HubAgentRuntimeSelection } from '../../types/agentRuntimeProvider.js';
 import type { Workspace } from './AgentInterface.js';
 export interface AgentSetupData {
+    submissionId: string;
     name: string;
     template: string;
     customInstructions: string;
     model: string;
+    runtimeSelection?: HubAgentRuntimeSelection;
     workspace: string;
     team: string;
     workspaceName?: string;
     teamName?: string;
 }
-export declare function AgentOnboarding({ onComplete, workspaces }: {
-    onComplete: (data: AgentSetupData) => void;
+export declare function StageModel({ model, setModel, modelSource, models, loading, error, onRefresh }: {
+    model: string;
+    setModel: (model: string) => void;
+    modelSource: OnboardingModel['source'];
+    models: OnboardingModel[];
+    loading: boolean;
+    error?: string;
+    onRefresh: () => void;
+}): import("react").JSX.Element;
+export declare function AgentOnboarding({ onComplete, onCreated, workspaces }: {
+    onComplete: (data: AgentSetupData) => Promise<string>;
+    onCreated: (agentId: string) => void;
     workspaces: Workspace[];
 }): import("react").JSX.Element;
 //# sourceMappingURL=AgentOnboarding.d.ts.map

package/dist/components/agent/AgentOnboarding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AgentOnboarding.d.ts","sourceRoot":"","sources":["../../../src/components/agent/AgentOnboarding.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAOpD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAm1BD,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,SAAS,EAAE,CAAA;CAAE,+BAiNlI"}
+{"version":3,"file":"AgentOnboarding.d.ts","sourceRoot":"","sources":["../../../src/components/agent/AgentOnboarding.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAoG,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC9J,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAA;AAEnF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAOpD,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,CAAC,EAAE,wBAAwB,CAAA;IAC3C,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAmLD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAC9F,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,WAAW,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IACxF,MAAM,EAAE,eAAe,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,IAAI,CAAA;CACnF,+BAoCA;AA2RD,wBAAgB,eAAe,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE;IAAE,UAAU,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAAC,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,SAAS,EAAE,CAAA;CAAE,+BAuP9L"}

package/dist/components/agent/AgentOnboarding.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getAgentPlatformBridge } from '../../platformBridge.js';
+import { getAuxiliaryInferenceBridge } from '../../platformBridge.js';
+import { WorkspaceCreationError } from '../../stores/workspaceCreationAttempt.js';
 /*
  * AgentOnboarding.tsx - 3-Stage Agent Creation Wizard
  *
@@ -8,7 +9,9 @@ import { getAgentPlatformBridge } from '../../platformBridge.js';
  * Stage 3: Placement & Review — workspace/team + summary + deploy
  */
 import { useState, useEffect, useRef } from 'react';
-import { Code2, Search, Lightbulb, BarChart3, Sparkles, Info, ArrowRight, ArrowLeft, Rocket, ChevronDown, Plus, Pencil, HardDrive } from 'lucide-react';
+import { onboardingModelKey, onboardingRuntimeSelection, useOnboardingModels, validateOnboardingPlacement } from './onboardingModels.js';
+import { AgentIdentityGenerator } from './AgentIdentityGenerator.js';
+import { Code2, Search, Lightbulb, BarChart3, Sparkles, Info, ArrowRight, ArrowLeft, Rocket, ChevronDown, Plus, Pencil } from 'lucide-react';
 // =============================================================================
 // DATA
 // =============================================================================
@@ -49,111 +52,10 @@ const templates = [
         preview: '',
     },
 ];
-const models = [
-    {
-        id: 'claude-opus-4-6', name: 'Claude Opus 4.6', provider: 'Anthropic', badge: 'Most Capable',
-        description: 'Highest-end reasoning and planning for difficult multi-step work', recommended: true,
-        context: '200K tokens', pricing: '$15 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 97, max: 100 },
-            { label: 'Coding', score: 95, max: 100 },
-            { label: 'Knowledge', score: 94, max: 100 },
-            { label: 'Speed', score: 62, max: 100 },
-        ],
-    },
-    {
-        id: 'claude-sonnet-4-6', name: 'Claude Sonnet 4.6', provider: 'Anthropic', badge: 'Balanced',
-        description: 'Fast, strong general-purpose model for most agent tasks',
-        context: '200K tokens', pricing: '$3 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 89, max: 100 },
-            { label: 'Coding', score: 90, max: 100 },
-            { label: 'Knowledge', score: 88, max: 100 },
-            { label: 'Speed', score: 90, max: 100 },
-        ],
-    },
-    {
-        id: 'composer-2.5', name: 'Composer 2.5', provider: 'XENO', badge: 'Product Builder',
-        description: 'XENO Composer model for planning, product work, and agent execution through the XENO API',
-        context: '128K tokens', pricing: 'Usage-based',
-        benchmarks: [
-            { label: 'Reasoning', score: 92, max: 100 },
-            { label: 'Coding', score: 89, max: 100 },
-            { label: 'Knowledge', score: 88, max: 100 },
-            { label: 'Speed', score: 82, max: 100 },
-        ],
-    },
-    {
-        id: 'gpt-5.3-codex', name: 'GPT-5.3 Codex', provider: 'OpenAI', badge: 'Code Expert',
-        description: 'Specialized coding model for implementation, editing, and debugging',
-        context: '128K tokens', pricing: '$12 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 91, max: 100 },
-            { label: 'Coding', score: 97, max: 100 },
-            { label: 'Knowledge', score: 88, max: 100 },
-            { label: 'Speed', score: 72, max: 100 },
-        ],
-    },
-    {
-        id: 'gpt-5.4', name: 'GPT-5.4', provider: 'OpenAI', badge: 'Frontier',
-        description: 'Frontier general model for reasoning-heavy agent work',
-        context: '128K tokens', pricing: '$15 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 95, max: 100 },
-            { label: 'Coding', score: 92, max: 100 },
-            { label: 'Knowledge', score: 92, max: 100 },
-            { label: 'Speed', score: 74, max: 100 },
-        ],
-    },
-    {
-        id: 'gpt-5.4-mini', name: 'GPT-5.4 Mini', provider: 'OpenAI', badge: 'Efficient',
-        description: 'Smaller GPT-5.4 variant for fast general agent work with lower cost',
-        context: '128K tokens', pricing: '$3 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 88, max: 100 },
-            { label: 'Coding', score: 86, max: 100 },
-            { label: 'Knowledge', score: 86, max: 100 },
-            { label: 'Speed', score: 92, max: 100 },
-        ],
-    },
-    {
-        id: 'claude-haiku-4-5-20251001', name: 'Claude Haiku 4.5', provider: 'Anthropic', badge: 'Fastest',
-        description: 'Fastest cloud option for lightweight agents and quick interactions',
-        context: '200K tokens', pricing: '$1 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 81, max: 100 },
-            { label: 'Coding', score: 78, max: 100 },
-            { label: 'Knowledge', score: 82, max: 100 },
-            { label: 'Speed', score: 98, max: 100 },
-        ],
-    },
-    {
-        id: 'kimi-k2.5', name: 'Kimi K2.5', provider: 'Moonshot', badge: 'Efficient',
-        description: 'Efficient cloud model with strong reasoning and lower cost',
-        context: '128K tokens', pricing: '$2 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 87, max: 100 },
-            { label: 'Coding', score: 85, max: 100 },
-            { label: 'Knowledge', score: 84, max: 100 },
-            { label: 'Speed', score: 82, max: 100 },
-        ],
-    },
-    {
-        id: 'gpt-5.1-codex-mini', name: 'GPT-5.1 Codex Mini', provider: 'OpenAI', badge: 'Fast Code',
-        description: 'Lower-cost coding model for quick edits and smaller tasks',
-        context: '128K tokens', pricing: '$3 / 1M tokens',
-        benchmarks: [
-            { label: 'Reasoning', score: 84, max: 100 },
-            { label: 'Coding', score: 90, max: 100 },
-            { label: 'Knowledge', score: 79, max: 100 },
-            { label: 'Speed', score: 90, max: 100 },
-        ],
-    },
-];
 // =============================================================================
 // STAGE 1 — PURPOSE & IDENTITY
 // =============================================================================
-function StageIdentity({ template, setTemplate, customInstructions, setCustomInstructions, }) {
+function StageIdentity({ template, setTemplate, customInstructions, setCustomInstructions, models, }) {
     const isCustom = template === 'custom';
     const selectedTemplate = templates.find(t => t.id === template);
     const [showHint, setShowHint] = useState(false);
@@ -184,73 +86,19 @@ function StageIdentity({ template, setTemplate, customInstructions, setCustomIns
                   `, style: { animationDelay: `${i * 50}ms` }, children: [_jsx("div", { className: `w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${isSelected ? 'bg-white/[0.1] text-white' : 'bg-white/[0.04] text-white/40'}`, children: _jsx(Icon, { className: "w-3.5 h-3.5", strokeWidth: 1.5 }) }), _jsxs("div", { children: [_jsx("div", { className: `text-[11px] font-medium ${isSelected ? 'text-white' : 'text-white/60'}`, children: t.name }), _jsx("div", { className: "text-[8px] text-white/25", children: t.description })] })] }, t.id));
                         }) }), _jsx("div", { className: "stage-enter-item flex flex-col", style: { animationDelay: '200ms' }, children: _jsxs("div", { className: "flex-1 flex flex-col min-h-[280px] bg-black/30 border border-white/[0.08] rounded-lg overflow-hidden focus-within:border-white/[0.15] transition-colors", children: [_jsx("textarea", { value: isCustom ? customInstructions : (selectedTemplate?.preview || ''), onChange: (e) => isCustom && setCustomInstructions(e.target.value), readOnly: !isCustom && !!selectedTemplate, placeholder: isCustom
                                         ? "I want an agent that...\n\n• Reviews pull requests and suggests improvements\n• Follows our team's coding standards\n• Explains changes clearly for junior developers\n• Flags security concerns automatically"
-                                        : 'Select a template to see instructions...', className: `flex-1 w-full px-4 py-3 bg-transparent text-[13px] leading-relaxed placeholder-white/15 focus:outline-none resize-none font-mono hide-scrollbar ${isCustom ? 'text-white' : 'text-white/50'}` }), isCustom && (_jsx("div", { className: "flex justify-end px-3 py-2", children: _jsxs("button", { className: "flex items-center gap-1.5 text-white/35 hover:text-white/60 text-[11px] transition-colors", children: [_jsx(Sparkles, { className: "w-3 h-3" }), "Generate Identity"] }) }))] }) })] })] }));
-}
-function formatSize(bytes) {
-    const gb = bytes / (1024 * 1024 * 1024);
-    return gb >= 1 ? `${gb.toFixed(1)} GB` : `${(bytes / (1024 * 1024)).toFixed(0)} MB`;
+                                        : 'Select a template to see instructions...', className: `flex-1 w-full px-4 py-3 bg-transparent text-[13px] leading-relaxed placeholder-white/15 focus:outline-none resize-none font-mono hide-scrollbar ${isCustom ? 'text-white' : 'text-white/50'}` }), isCustom && (_jsx(AgentIdentityGenerator, { models: models, instructions: customInstructions, onApply: setCustomInstructions }))] }) })] })] }));
 }
-function StageModel({ model, setModel, modelSource, }) {
-    const [infoModel, setInfoModel] = useState(null);
-    const benchmarkOpened = useRef(false);
-    const inspected = models.find(m => m.id === infoModel);
-    const [localModels, setLocalModels] = useState([]);
-    const [localLoading, setLocalLoading] = useState(true);
-    useEffect(() => {
-        if (getAgentPlatformBridge()?.llm) {
-            getAgentPlatformBridge().llm.localModels().then(res => {
-                if (res.success)
-                    setLocalModels(res.models);
-                setLocalLoading(false);
-            }).catch(() => setLocalLoading(false));
-        }
-        else {
-            setLocalLoading(false);
-        }
-    }, []);
-    const handleSelectModel = (id) => {
-        setModel(id);
-        if (benchmarkOpened.current && !id.startsWith('local:')) {
-            setInfoModel(id);
-        }
-        else if (id.startsWith('local:')) {
-            setInfoModel(null);
-            benchmarkOpened.current = false;
-        }
-    };
-    const handleToggleBenchmark = (id) => {
-        if (infoModel === id) {
-            setInfoModel(null);
-            benchmarkOpened.current = false;
-        }
-        else {
-            setInfoModel(id);
-            benchmarkOpened.current = true;
-        }
-    };
-    const selectedLocal = model.startsWith('local:') ? localModels.find(m => m.id === model) : null;
-    return (_jsxs("div", { className: `grid gap-6 transition-all duration-300 ${(modelSource === 'cloud' && inspected) || (modelSource === 'local' && selectedLocal) ? 'grid-cols-[1.4fr,0.6fr]' : 'grid-cols-1'}`, children: [_jsxs("div", { className: "space-y-1.5", children: [modelSource === 'cloud' && models.map((m, i) => {
-                        const isSelected = model === m.id;
-                        return (_jsx("button", { onClick: () => handleSelectModel(m.id), className: `
-                stage-enter-item w-full px-4 py-3 rounded-lg border text-left transition-all duration-200
-                ${isSelected
-                                ? 'border-white/20 bg-white/[0.06]'
-                                : 'border-white/[0.06] bg-white/[0.02] hover:border-white/[0.1] hover:bg-white/[0.04]'}
-              `, style: { animationDelay: `${i * 40}ms` }, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `w-1.5 h-5 rounded-sm flex-shrink-0 transition-colors ${isSelected ? 'bg-white' : 'bg-white/[0.08]'}` }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `text-[12px] font-medium ${isSelected ? 'text-white' : 'text-white/60'}`, children: m.name }), _jsx("span", { className: "text-[9px] text-white/20", children: m.provider }), m.recommended && (_jsx("span", { className: "text-[8px] px-1.5 py-0.5 rounded bg-white/[0.08] text-white/50 uppercase tracking-wider font-medium", children: "Recommended" }))] }), _jsx("p", { className: `text-[10px] mt-0.5 ${isSelected ? 'text-white/35' : 'text-white/20'}`, children: m.description })] })] }), _jsxs("div", { className: "flex items-center gap-2 flex-shrink-0", children: [_jsx("span", { className: `text-[9px] px-2 py-0.5 rounded-md ${isSelected ? 'bg-white/[0.1] text-white/60' : 'bg-white/[0.04] text-white/25'}`, children: m.badge }), _jsx("div", { role: "button", onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleToggleBenchmark(m.id);
-                                                }, className: `w-5 h-5 rounded-[3px] border flex items-center justify-center transition-colors ${infoModel === m.id
-                                                    ? 'border-white/20 bg-white/[0.08] text-white/50'
-                                                    : 'border-white/[0.06] text-white/20 hover:text-white/40 hover:border-white/[0.12]'}`, children: _jsx(BarChart3, { className: "w-2.5 h-2.5" }) })] })] }) }, m.id));
-                    }), modelSource === 'local' && (_jsxs(_Fragment, { children: [localLoading && (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx("span", { className: "text-[12px] text-white/25", children: "Scanning xeno-rt model directories..." }) })), !localLoading && localModels.length === 0 && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 gap-3", children: [_jsx(HardDrive, { className: "w-8 h-8 text-white/10" }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-[12px] text-white/30", children: "No local models found" }), _jsx("p", { className: "text-[10px] text-white/15 mt-1", children: "Add GGUF models to the xeno-rt cache or .xeno/models to use local inference" })] })] })), !localLoading && localModels.map((m, i) => {
-                                const isSelected = model === m.id;
-                                return (_jsx("button", { onClick: () => handleSelectModel(m.id), className: `
-                    stage-enter-item w-full px-4 py-3 rounded-lg border text-left transition-all duration-200
-                    ${isSelected
-                                        ? 'border-white/20 bg-white/[0.06]'
-                                        : 'border-white/[0.06] bg-white/[0.02] hover:border-white/[0.1] hover:bg-white/[0.04]'}
-                  `, style: { animationDelay: `${i * 40}ms` }, children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `w-1.5 h-5 rounded-sm flex-shrink-0 transition-colors ${isSelected ? 'bg-white' : 'bg-white/[0.08]'}` }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `text-[12px] font-medium ${isSelected ? 'text-white' : 'text-white/60'}`, children: m.name }), _jsx("span", { className: "text-[9px] text-white/20", children: m.tag }), m.parameterSize && (_jsx("span", { className: "text-[8px] px-1.5 py-0.5 rounded bg-white/[0.08] text-white/50 font-medium", children: m.parameterSize }))] }), _jsxs("p", { className: `text-[10px] mt-0.5 ${isSelected ? 'text-white/35' : 'text-white/20'}`, children: [m.family ? `${m.family} · ` : '', formatSize(m.size), " \u00C2\u00B7 Runs locally"] })] })] }), _jsx("span", { className: `text-[9px] px-2 py-0.5 rounded-md flex-shrink-0 ${isSelected ? 'bg-white/[0.1] text-white/60' : 'bg-white/[0.04] text-white/25'}`, children: "Local" })] }) }, m.id));
-                            })] }))] }), modelSource === 'cloud' && inspected && (_jsxs("div", { className: "rounded-lg border border-white/[0.06] bg-white/[0.02] p-4 flex flex-col gap-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-[12px] font-medium text-white", children: inspected.name }), _jsx("span", { className: "text-[9px] text-white/25", children: inspected.provider })] }), _jsx("p", { className: "text-[10px] text-white/30 mt-1", children: inspected.description })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("span", { className: "text-[9px] text-white/25 uppercase tracking-wider font-medium", children: "Benchmarks" }), inspected.benchmarks.map((b) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-1", children: [_jsx("span", { className: "text-[10px] text-white/40", children: b.label }), _jsx("span", { className: "text-[10px] text-white/50 font-medium", children: b.score })] }), _jsx("div", { className: "h-1 rounded-full bg-white/[0.06] overflow-hidden", children: _jsx("div", { className: "h-full rounded-full bg-white/20 transition-all duration-500", style: { width: `${(b.score / b.max) * 100}%` } }) })] }, b.label)))] }), _jsxs("div", { className: "flex flex-col gap-2 pt-2 border-t border-white/[0.06]", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] text-white/30", children: "Context" }), _jsx("span", { className: "text-[10px] text-white/50", children: inspected.context })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] text-white/30", children: "Pricing" }), _jsx("span", { className: "text-[10px] text-white/50", children: inspected.pricing })] })] })] })), modelSource === 'local' && selectedLocal && (_jsxs("div", { className: "rounded-lg border border-white/[0.06] bg-white/[0.02] p-4 flex flex-col gap-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-[12px] font-medium text-white", children: selectedLocal.name }), _jsx("span", { className: "text-[9px] text-white/25", children: selectedLocal.tag })] }), _jsx("p", { className: "text-[10px] text-white/30 mt-1", children: "Local model via xeno-rt" })] }), _jsxs("div", { className: "flex flex-col gap-2 pt-2 border-t border-white/[0.06]", children: [selectedLocal.family && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] text-white/30", children: "Family" }), _jsx("span", { className: "text-[10px] text-white/50", children: selectedLocal.family })] })), selectedLocal.parameterSize && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] text-white/30", children: "Parameters" }), _jsx("span", { className: "text-[10px] text-white/50", children: selectedLocal.parameterSize })] })), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] text-white/30", children: "Size" }), _jsx("span", { className: "text-[10px] text-white/50", children: formatSize(selectedLocal.size) })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-[10px] text-white/30", children: "Pricing" }), _jsx("span", { className: "text-[10px] text-green-400/60", children: "Free (local)" })] })] })] }))] }));
+// =============================================================================
+// STAGE 2 — MODEL SELECTION
+// =============================================================================
+export function StageModel({ model, setModel, modelSource, models, loading, error, onRefresh }) {
+    const [acpProvider, setAcpProvider] = useState(() => models.find(entry => onboardingModelKey(entry) === model)?.acpAgentConfigId ?? '');
+    const sourceModels = models.filter(entry => entry.source === modelSource);
+    const providers = [...new Map(sourceModels.filter(entry => entry.acpAgentConfigId).map(entry => [entry.acpAgentConfigId, entry.provider])).entries()];
+    const visible = sourceModels.filter(entry => modelSource !== 'acp' || entry.acpAgentConfigId === acpProvider);
+    return (_jsxs("div", { className: "space-y-3", "aria-busy": loading, children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-[11px] text-white/45", children: "Available models reported by the connected host." }), _jsx("button", { type: "button", onClick: onRefresh, disabled: loading, className: "text-[11px] text-white/65 disabled:opacity-40", children: "Refresh models" })] }), loading && _jsx("p", { role: "status", children: "Loading available models..." }), error && _jsx("p", { role: "alert", className: "text-[11px] text-amber-300", children: error }), modelSource === 'acp' && _jsxs("label", { className: "block text-[11px] text-white/65", children: ["ACP provider", _jsxs("select", { "aria-label": "ACP provider", value: acpProvider, disabled: loading, onChange: event => { setAcpProvider(event.target.value); setModel(''); }, className: "mt-1 w-full rounded border border-white/10 bg-[#111114] p-2", children: [_jsx("option", { value: "", children: "Select a provider..." }), providers.map(([id, label]) => _jsx("option", { value: id, children: label }, id))] })] }), !loading && modelSource === 'acp' && providers.length > 0 && !acpProvider
+                ? _jsx("p", { className: "text-[12px] text-white/45", children: "Select an ACP provider to see its available models." })
+                : !loading && !visible.length && _jsxs("p", { className: "text-[12px] text-white/45", children: ["No available ", modelSource, " models. Check the provider connection and refresh."] }), model && !visible.some(entry => onboardingModelKey(entry) === model) && _jsx("p", { role: "alert", children: "The selected model is no longer available. Select another model." }), _jsx("div", { className: "max-h-[50vh] overflow-auto space-y-2", "aria-label": "Available models", children: visible.map(entry => (_jsxs("button", { type: "button", "aria-pressed": model === onboardingModelKey(entry), onClick: () => setModel(onboardingModelKey(entry)), className: `w-full rounded-md border p-3 text-left focus-visible:outline focus-visible:outline-2 ${model === onboardingModelKey(entry) ? 'border-white/25 bg-white/10' : 'border-white/10 bg-white/[0.02]'}`, children: [_jsx("span", { className: "block text-[12px] text-white", children: entry.name }), _jsxs("span", { className: "block text-[10px] text-white/50", children: [entry.id, " \u00B7 ", entry.provider] }), _jsx("span", { className: "block text-[10px] text-white/40", children: entry.contextWindowTokens ? `Context: ${entry.contextWindowTokens.toLocaleString()} tokens` : 'Context not reported' })] }, onboardingModelKey(entry)))) }), _jsx("p", { className: "text-[10px] text-white/35", children: "Pricing and benchmark measurements are not supplied by this catalog." })] }));
 }
 function Dropdown({ label, value, options, onChange, customName, onCustomNameChange, }) {
     const [open, setOpen] = useState(false);
@@ -282,9 +130,9 @@ function Dropdown({ label, value, options, onChange, customName, onCustomNameCha
 // =============================================================================
 // STAGE 3 — PLACEMENT & REVIEW
 // =============================================================================
-function StagePlacement({ workspace, setWorkspace, team, setTeam, agentName, template, model, workspaces, workspaceName, setWorkspaceName, teamName, setTeamName, }) {
+function StagePlacement({ workspace, setWorkspace, team, setTeam, agentName, template, model, models, workspaces, workspaceName, setWorkspaceName, teamName, setTeamName, }) {
     const templateData = templates.find(t => t.id === template);
-    const modelData = models.find(m => m.id === model);
+    const modelData = models.find(m => onboardingModelKey(m) === model);
     const modelDisplay = modelData
         ? { name: modelData.name, sub: modelData.provider }
         : model.startsWith('local:')
@@ -343,14 +191,20 @@ function ProgressSteps({ current }) {
 // =============================================================================
 // MAIN ONBOARDING COMPONENT
 // =============================================================================
-export function AgentOnboarding({ onComplete, workspaces }) {
+export function AgentOnboarding({ onComplete, onCreated, workspaces }) {
     const [stage, setStage] = useState(1);
+    const mounted = useRef(false);
+    const deploying = useRef(false);
+    const submitted = useRef(null);
+    const [awaitingSave, setAwaitingSave] = useState(false);
+    useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);
     // Stage 1
     const [template, setTemplate] = useState(null);
     const [name, setName] = useState('');
     const [customInstructions, setCustomInstructions] = useState('');
     // Stage 2
-    const [model, setModel] = useState('claude-opus-4-6');
+    const [model, setModel] = useState('');
+    const { models, loading: modelsLoading, errors: modelErrors, refresh: refreshModels } = useOnboardingModels();
     const [modelSource, setModelSource] = useState('cloud');
     // Stage 3
     const [workspace, setWorkspace] = useState('');
@@ -361,16 +215,19 @@ export function AgentOnboarding({ onComplete, workspaces }) {
     const [deployStatus, setDeployStatus] = useState('');
     const [deployError, setDeployError] = useState(null);
     const canAdvance = () => {
+        if (submitted.current)
+            return stage === 3;
         if (stage === 1)
             return template !== null && name.trim().length > 0;
         if (stage === 2)
-            return model.length > 0;
+            return !modelsLoading && models.some(entry => onboardingModelKey(entry) === model && entry.source === modelSource);
         if (stage === 3)
-            return true;
+            return !modelsLoading && models.some(entry => onboardingModelKey(entry) === model && entry.source === modelSource)
+                && validateOnboardingPlacement(workspaces, workspace, team, workspaceName, teamName);
         return false;
     };
     const handleNext = async () => {
-        if (isDeploying)
+        if (deploying.current || !canAdvance())
             return;
         if (stage < 3) {
             setDeployError(null);
@@ -378,46 +235,81 @@ export function AgentOnboarding({ onComplete, workspaces }) {
         }
         else {
             setDeployError(null);
-            if (model.startsWith('local:')) {
-                setIsDeploying(true);
-                setDeployStatus('Preparing local model...');
-                try {
-                    if (!getAgentPlatformBridge()?.llm?.localWarmup) {
-                        setDeployError('Local model warmup bridge is unavailable. Restart the app and try again.');
-                        return;
+            deploying.current = true;
+            setIsDeploying(true);
+            try {
+                if (submitted.current) {
+                    setDeployStatus('Retrying workspace save...');
+                    const agentId = await onComplete(submitted.current);
+                    if (mounted.current)
+                        onCreated(agentId);
+                    return;
+                }
+                const currentModels = await refreshModels(true);
+                if (!mounted.current)
+                    return;
+                const selectedModel = currentModels.find(entry => onboardingModelKey(entry) === model && entry.source === modelSource);
+                if (!selectedModel) {
+                    setDeployError('The selected model is no longer available. Return to Model and choose an available model.');
+                    return;
+                }
+                if (modelSource === 'local') {
+                    setDeployStatus('Preparing local model...');
+                    try {
+                        if (!getAuxiliaryInferenceBridge()?.localWarmup) {
+                            setDeployError('Local model warmup bridge is unavailable. Restart the app and try again.');
+                            return;
+                        }
+                        const warmup = await getAuxiliaryInferenceBridge().localWarmup({ model: selectedModel.id, timeoutMs: 120000 });
+                        if (!mounted.current)
+                            return;
+                        if (!warmup.success) {
+                            setDeployError(warmup.error || 'Failed to warm up local model.');
+                            return;
+                        }
+                        setDeployStatus('Local model ready. Finalizing deployment...');
                     }
-                    const warmup = await getAgentPlatformBridge().llm.localWarmup({ model, timeoutMs: 120000 });
-                    if (!warmup.success) {
-                        setDeployError(warmup.error || 'Failed to warm up local model.');
+                    catch (err) {
+                        setDeployError(err instanceof Error ? err.message : 'Failed to warm up local model.');
                         return;
                     }
-                    setDeployStatus('Local model ready. Finalizing deployment...');
                 }
-                catch (err) {
-                    setDeployError(err instanceof Error ? err.message : 'Failed to warm up local model.');
-                    return;
+                const submission = { submissionId: crypto.randomUUID(), name, template: template || 'custom', customInstructions: customInstructions || templates.find(t => t.id === template)?.preview || '', model: selectedModel.id, runtimeSelection: onboardingRuntimeSelection(selectedModel), workspace, team, workspaceName: workspaceName || undefined, teamName: teamName || undefined };
+                submitted.current = submission;
+                setAwaitingSave(true);
+                setDeployStatus('Saving agent and placement...');
+                const agentId = await onComplete(submission);
+                if (mounted.current)
+                    onCreated(agentId);
+            }
+            catch (error) {
+                if (error instanceof WorkspaceCreationError && !error.pendingCreation) {
+                    submitted.current = null;
+                    if (mounted.current)
+                        setAwaitingSave(false);
                 }
-                finally {
+                if (mounted.current)
+                    setDeployError(error instanceof Error ? error.message : 'Agent deployment failed.');
+            }
+            finally {
+                deploying.current = false;
+                if (mounted.current)
                     setIsDeploying(false);
-                }
             }
-            onComplete({ name, template: template || 'custom', customInstructions: customInstructions || templates.find(t => t.id === template)?.preview || '', model, workspace, team, workspaceName: workspaceName || undefined, teamName: teamName || undefined });
         }
     };
     const handleBack = () => {
-        if (isDeploying)
+        if (isDeploying || awaitingSave)
             return;
         if (stage > 1)
             setStage(stage - 1);
     };
-    return (_jsxs("div", { className: "flex-1 flex flex-col bg-[#0a0a0c]", children: [_jsx("div", { className: "flex-1 flex items-start justify-center overflow-auto pt-[12vh] pb-16", children: _jsxs("div", { className: `w-full transition-all duration-500 ease-out ${stage === 2 ? 'px-3 max-w-[860px]' : stage === 3 ? 'px-6 max-w-[560px]' : 'px-6 max-w-[720px]'}`, children: [_jsxs("div", { className: "mb-8 text-center", children: [_jsxs("h1", { className: "stage-enter-header text-[20px] font-semibold text-white tracking-tight", children: [stage === 1 && 'Purpose & Identity', stage === 2 && 'Select Model', stage === 3 && 'Placement & Review'] }), _jsxs("p", { className: "stage-enter-header text-[12px] text-white/35 mt-1", style: { animationDelay: '60ms' }, children: [stage === 1 && 'Choose a template or describe your own agent', stage === 2 && 'Pick the AI model that powers your agent', stage === 3 && 'Place your agent and confirm setup'] }), stage === 2 && (_jsxs("div", { className: "stage-enter-item flex items-center justify-center gap-1 mt-4", style: { animationDelay: '90ms' }, children: [_jsx("button", { onClick: () => { setModelSource('cloud'); if (model.startsWith('local:'))
-                                                setModel('claude-opus-4-6'); }, className: `px-4 py-1.5 rounded-l-md text-[11px] font-medium transition-all ${modelSource === 'cloud'
+    return (_jsxs("div", { className: "flex-1 flex flex-col bg-[#0a0a0c]", children: [_jsx("div", { className: "flex-1 flex items-start justify-center overflow-auto pt-[12vh] pb-16", children: _jsxs("div", { className: `w-full transition-all duration-500 ease-out ${stage === 2 ? 'px-3 max-w-[860px]' : stage === 3 ? 'px-6 max-w-[560px]' : 'px-6 max-w-[720px]'}`, children: [_jsxs("div", { className: "mb-8 text-center", children: [_jsxs("h1", { className: "stage-enter-header text-[20px] font-semibold text-white tracking-tight", children: [stage === 1 && 'Purpose & Identity', stage === 2 && 'Select Model', stage === 3 && 'Placement & Review'] }), _jsxs("p", { className: "stage-enter-header text-[12px] text-white/35 mt-1", style: { animationDelay: '60ms' }, children: [stage === 1 && 'Choose a template or describe your own agent', stage === 2 && 'Pick the AI model that powers your agent', stage === 3 && 'Place your agent and confirm setup'] }), stage === 2 && (_jsxs("div", { className: "stage-enter-item flex items-center justify-center gap-1 mt-4", style: { animationDelay: '90ms' }, children: [_jsx("button", { onClick: () => { setModelSource('cloud'); setModel(''); }, className: `px-4 py-1.5 rounded-l-md text-[11px] font-medium transition-all ${modelSource === 'cloud'
                                                 ? 'bg-white/[0.12] text-white'
-                                                : 'bg-white/[0.03] text-white/30 hover:text-white/50'}`, children: "Cloud" }), _jsx("button", { onClick: () => { setModelSource('local'); if (!model.startsWith('local:'))
-                                                setModel(''); }, className: `px-4 py-1.5 rounded-r-md text-[11px] font-medium transition-all ${modelSource === 'local'
+                                                : 'bg-white/[0.03] text-white/30 hover:text-white/50'}`, children: "Cloud" }), _jsx("button", { onClick: () => { setModelSource('local'); setModel(''); }, className: `px-4 py-1.5 rounded-r-md text-[11px] font-medium transition-all ${modelSource === 'local'
                                                 ? 'bg-white/[0.12] text-white'
-                                                : 'bg-white/[0.03] text-white/30 hover:text-white/50'}`, children: "Local" })] })), stage === 1 && (_jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Agent name...", className: "stage-enter-item mt-5 w-full max-w-[320px] mx-auto px-3 py-2.5 bg-black/30 border border-white/[0.08] rounded-md text-white text-[13px] text-center placeholder-white/20 focus:outline-none focus:border-white/[0.15] transition-colors", style: { animationDelay: '120ms' } }))] }, `header-${stage}`), _jsxs("div", { className: "stage-enter-item", style: { animationDelay: '150ms' }, children: [stage === 1 && (_jsx(StageIdentity, { template: template, setTemplate: setTemplate, customInstructions: customInstructions, setCustomInstructions: setCustomInstructions })), stage === 2 && (_jsx(StageModel, { model: model, setModel: setModel, modelSource: modelSource })), stage === 3 && (_jsx(StagePlacement, { workspace: workspace, setWorkspace: setWorkspace, team: team, setTeam: setTeam, agentName: name, template: template, model: model, workspaces: workspaces, workspaceName: workspaceName, setWorkspaceName: setWorkspaceName, teamName: teamName, setTeamName: setTeamName }))] }, `content-${stage}`)] }) }), _jsxs("footer", { className: "h-[48px] border-t border-white/[0.06] bg-[#09090b] flex items-center px-5", children: [_jsx("div", { className: "flex-1 flex justify-start", children: stage > 1 ? (_jsxs("button", { onClick: handleBack, className: "flex items-center gap-1.5 px-3 py-1.5 text-white/40 hover:text-white/70 text-[12px] transition-colors", children: [_jsx(ArrowLeft, { className: "w-3.5 h-3.5" }), "Back"] })) : (_jsx("div", {})) }), _jsx("div", { className: "flex-1 flex justify-center", children: _jsx(ProgressSteps, { current: stage }) }), _jsxs("div", { className: "flex-1 flex justify-end", children: [stage === 3 && (isDeploying || deployError) && (_jsx("div", { className: "mr-3 flex items-center", children: isDeploying ? (_jsx("span", { className: "text-[11px] text-white/40", children: deployStatus || 'Preparing local model...' })) : deployError ? (_jsx("span", { className: "text-[11px] text-red-400/80", children: deployError })) : null })), _jsx("button", { onClick: () => { void handleNext(); }, disabled: !canAdvance() || isDeploying, className: `flex items-center gap-2 px-5 py-2 rounded-md text-[12px] font-semibold transition-all ${stage === 3
+                                                : 'bg-white/[0.03] text-white/30 hover:text-white/50'}`, children: "Local" }), _jsx("button", { onClick: () => { setModelSource('acp'); setModel(''); }, className: `px-4 py-1.5 rounded-md text-[11px] font-medium ${modelSource === 'acp' ? 'bg-white/[0.12] text-white' : 'bg-white/[0.03] text-white/30'}`, children: "ACP" })] })), stage === 1 && (_jsx("input", { type: "text", value: name, onChange: (e) => setName(e.target.value), placeholder: "Agent name...", className: "stage-enter-item mt-5 w-full max-w-[320px] mx-auto px-3 py-2.5 bg-black/30 border border-white/[0.08] rounded-md text-white text-[13px] text-center placeholder-white/20 focus:outline-none focus:border-white/[0.15] transition-colors", style: { animationDelay: '120ms' } }))] }, `header-${stage}`), _jsxs("fieldset", { disabled: isDeploying || awaitingSave, className: "min-w-0 stage-enter-item", style: { animationDelay: '150ms' }, children: [stage === 1 && (_jsx(StageIdentity, { template: template, setTemplate: setTemplate, customInstructions: customInstructions, setCustomInstructions: setCustomInstructions, models: models })), stage === 2 && (_jsx(StageModel, { model: model, setModel: setModel, modelSource: modelSource, models: models, loading: modelsLoading, error: modelErrors[modelSource], onRefresh: () => { void refreshModels(true); } })), stage === 3 && (_jsx(StagePlacement, { workspace: workspace, setWorkspace: setWorkspace, team: team, setTeam: setTeam, agentName: name, template: template, model: model, models: models, workspaces: workspaces, workspaceName: workspaceName, setWorkspaceName: setWorkspaceName, teamName: teamName, setTeamName: setTeamName }))] }, `content-${stage}`)] }) }), _jsxs("footer", { className: "h-[48px] border-t border-white/[0.06] bg-[#09090b] flex items-center px-5", children: [_jsx("div", { className: "flex-1 flex justify-start", children: stage > 1 ? (_jsxs("button", { onClick: handleBack, disabled: isDeploying || awaitingSave, className: "flex items-center gap-1.5 px-3 py-1.5 text-white/40 hover:text-white/70 text-[12px] transition-colors", children: [_jsx(ArrowLeft, { className: "w-3.5 h-3.5" }), "Back"] })) : (_jsx("div", {})) }), _jsx("div", { className: "flex-1 flex justify-center", children: _jsx(ProgressSteps, { current: stage }) }), _jsxs("div", { className: "flex-1 flex justify-end", children: [stage === 3 && (isDeploying || deployError) && (_jsx("div", { className: "mr-3 flex items-center", children: isDeploying ? (_jsx("span", { className: "text-[11px] text-white/40", children: deployStatus || 'Verifying available model...' })) : deployError ? (_jsxs("span", { role: "alert", className: "text-[11px] text-red-400/80", children: [deployError, awaitingSave ? ' Retry saves this same agent.' : ''] })) : null })), _jsx("button", { onClick: () => { void handleNext(); }, disabled: !canAdvance() || isDeploying, className: `flex items-center gap-2 px-5 py-2 rounded-md text-[12px] font-semibold transition-all ${stage === 3
                                     ? 'bg-white text-black hover:bg-white/90 disabled:bg-white/[0.08] disabled:text-white/25'
-                                    : 'bg-white/[0.1] text-white hover:bg-white/[0.15] disabled:bg-white/[0.04] disabled:text-white/20'}`, children: stage === 3 ? (_jsxs(_Fragment, { children: [isDeploying ? 'Preparing Local Model...' : 'Deploy Agent', _jsx(Rocket, { className: "w-3.5 h-3.5" })] })) : (_jsxs(_Fragment, { children: ["Next", _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] })) })] })] })] }));
+                                    : 'bg-white/[0.1] text-white hover:bg-white/[0.15] disabled:bg-white/[0.04] disabled:text-white/20'}`, children: stage === 3 ? (_jsxs(_Fragment, { children: [isDeploying ? 'Preparing agent...' : awaitingSave ? 'Retry saving agent' : 'Deploy Agent', _jsx(Rocket, { className: "w-3.5 h-3.5" })] })) : (_jsxs(_Fragment, { children: ["Next", _jsx(ArrowRight, { className: "w-3.5 h-3.5" })] })) })] })] })] }));
 }
 //# sourceMappingURL=AgentOnboarding.js.map