@mcoda/agent-setup 0.1.66 → 0.1.70

package/README.md

@@ -11,4 +11,13 @@ The package provides:
 - an optional React setup page
 
 The default server runtime uses mcoda package APIs directly and does not require
-a preinstalled or configured `mcoda` CLI/client tool.
+a preinstalled or configured `mcoda` CLI/client tool. When an admin submits a
+real mswarm API key through `configureMswarmApiKey()`, subsequent cloud and
+self-hosted catalog reads use the real mswarm API via `MswarmApi`.
+
+React consumers can use the packaged default stylesheet:
+
+```ts
+import { McodaAgentSetupPage } from "@mcoda/agent-setup/react";
+import "@mcoda/agent-setup/react/styles.css";
+```

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"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"}

package/dist/react/index.js

@@ -22,9 +22,11 @@ export function McodaAgentSetupPage(props) {
     const [apiKey, setApiKey] = React.useState("");
     const [busy, setBusy] = React.useState(false);
     const [error, setError] = React.useState(null);
+    const [statusMessage, setStatusMessage] = React.useState(null);
     const refresh = React.useCallback(async () => {
         setBusy(true);
         setError(null);
+        setStatusMessage(null);
         try {
             const next = await props.client.fetchSnapshot();
             setSnapshot(next);
@@ -45,11 +47,13 @@ export function McodaAgentSetupPage(props) {
             return;
         setBusy(true);
         setError(null);
+        setStatusMessage(null);
         try {
             const next = await props.client.configureMswarmApiKey({ apiKey });
             setApiKey("");
             setSnapshot(next);
             setAssignments(next.assignments);
+            setStatusMessage("mswarm API key saved and agent catalogs synced.");
         }
         catch (caught) {
             setError(caught instanceof Error ? caught.message : String(caught));
@@ -61,10 +65,12 @@ export function McodaAgentSetupPage(props) {
     const syncAgents = async () => {
         setBusy(true);
         setError(null);
+        setStatusMessage(null);
         try {
             const next = await props.client.syncAgents();
             setSnapshot(next);
             setAssignments(next.assignments);
+            setStatusMessage("Cloud and self-hosted agent catalogs synced.");
         }
         catch (caught) {
             setError(caught instanceof Error ? caught.message : String(caught));
@@ -76,10 +82,12 @@ export function McodaAgentSetupPage(props) {
     const saveAssignments = async () => {
         setBusy(true);
         setError(null);
+        setStatusMessage(null);
         try {
             const next = await props.client.updateAssignments({ assignments });
             setSnapshot(next);
             setAssignments(next.assignments);
+            setStatusMessage("Stage assignments saved.");
         }
         catch (caught) {
             setError(caught instanceof Error ? caught.message : String(caught));
@@ -88,11 +96,18 @@ export function McodaAgentSetupPage(props) {
             setBusy(false);
         }
     };
-    return React.createElement("section", { className: joinClasses("mcoda-agent-setup", props.className) }, React.createElement("header", { className: "mcoda-agent-setup__header" }, React.createElement("h1", null, props.title ?? "mcoda Agent Setup"), React.createElement("button", { type: "button", disabled: busy, onClick: refresh }, "Refresh")), error
-        ? React.createElement("p", { className: "mcoda-agent-setup__error" }, error)
-        : null, snapshot
+    return React.createElement("section", { className: joinClasses("mcoda-agent-setup", props.className) }, React.createElement("header", { className: "mcoda-agent-setup__header" }, React.createElement("div", { className: "mcoda-agent-setup__title-block" }, React.createElement("p", { className: "mcoda-agent-setup__eyebrow" }, "Runtime routing"), React.createElement("h1", null, props.title ?? "mcoda Agent Setup"), React.createElement("p", null, "Configure mswarm access and assign cloud or self-hosted mcoda agents to each runtime stage.")), React.createElement("button", {
+        type: "button",
+        className: "mcoda-agent-setup__button mcoda-agent-setup__button--secondary",
+        disabled: busy,
+        onClick: refresh,
+    }, busy ? "Refreshing" : "Refresh")), error
+        ? React.createElement("p", { className: "mcoda-agent-setup__alert mcoda-agent-setup__alert--error" }, error)
+        : null, statusMessage
+        ? React.createElement("p", { className: "mcoda-agent-setup__alert mcoda-agent-setup__alert--success" }, statusMessage)
+        : null, React.createElement("div", { className: "mcoda-agent-setup__overview" }, snapshot
         ? React.createElement(components.AgentCatalogSummary, { snapshot })
-        : React.createElement("p", null, busy ? "Loading" : "No snapshot loaded"), React.createElement(components.MswarmAccessCard, {
+        : React.createElement("div", { className: "mcoda-agent-setup__empty-state" }, busy ? "Loading settings." : "No settings loaded."), React.createElement(components.MswarmAccessCard, {
         apiKey,
         busy,
         labels,
@@ -100,7 +115,7 @@ export function McodaAgentSetupPage(props) {
         onApiKeyChange: setApiKey,
         onSaveKey: saveKey,
         onSyncAgents: syncAgents,
-    }), snapshot
+    })), snapshot
         ? React.createElement(components.StageAgentAssignments, {
             stages,
             snapshot,
@@ -115,27 +130,61 @@ export function McodaAgentSetupPage(props) {
 export function AgentCatalogSummary(props) {
     const { snapshot } = props;
     const warningEntries = Object.entries(snapshot.catalog.errors);
-    return React.createElement("div", { className: "mcoda-agent-setup__summary" }, React.createElement("div", null, `Provider: ${snapshot.provider}`), React.createElement("div", null, `mswarm Key: ${snapshot.mswarmApiKeyConfigured
-        ? `configured${snapshot.mswarmApiKeyLast4 ? ` (${snapshot.mswarmApiKeyLast4})` : ""}`
-        : "missing"}`), React.createElement("div", null, `Synced Agents: ${snapshot.catalog.localAgents.length}`), React.createElement("div", null, `Cloud Agents: ${snapshot.catalog.cloudAgents.length}`), React.createElement("div", null, `Self-hosted Servers: ${snapshot.catalog.selfHostedServers.length}`), warningEntries.length
-        ? React.createElement("ul", { className: "mcoda-agent-setup__warnings" }, warningEntries.map(([key, value]) => React.createElement("li", { key }, `${key}: ${value}`)))
+    return React.createElement("section", { className: "mcoda-agent-setup__summary" }, React.createElement("div", { className: "mcoda-agent-setup__card-heading" }, React.createElement("div", null, React.createElement("h2", null, "Catalog Snapshot"), React.createElement("p", null, `Fetched ${formatTimestamp(snapshot.fetchedAt)}`)), React.createElement("span", {
+        className: snapshot.mswarmApiKeyConfigured
+            ? "mcoda-agent-setup__badge mcoda-agent-setup__badge--success"
+            : "mcoda-agent-setup__badge mcoda-agent-setup__badge--warning",
+    }, snapshot.mswarmApiKeyConfigured ? "Configured" : "Missing key")), React.createElement("div", { className: "mcoda-agent-setup__metric-grid" }, React.createElement(MetricCard, {
+        label: "Provider",
+        value: snapshot.provider,
+        detail: "active runtime",
+    }), React.createElement(MetricCard, {
+        label: "mswarm key",
+        value: snapshot.mswarmApiKeyLast4
+            ? `****${snapshot.mswarmApiKeyLast4}`
+            : snapshot.mswarmApiKeyConfigured
+                ? "Configured"
+                : "Missing",
+        detail: `set ${formatTimestamp(snapshot.mswarmConfiguredAt)}`,
+    }), React.createElement(MetricCard, {
+        label: "Synced agents",
+        value: String(snapshot.catalog.localAgents.length),
+        detail: "mcoda registry entries",
+    }), React.createElement(MetricCard, {
+        label: "Cloud agents",
+        value: String(snapshot.catalog.cloudAgents.length),
+        detail: "mswarm cloud catalog",
+    }), React.createElement(MetricCard, {
+        label: "Self-hosted",
+        value: String(snapshot.catalog.selfHostedAgents.length),
+        detail: `${snapshot.catalog.selfHostedServers.length} servers`,
+    })), warningEntries.length
+        ? React.createElement("ul", { className: "mcoda-agent-setup__warnings", "aria-label": "Catalog warnings" }, warningEntries.map(([key, value]) => React.createElement("li", { key }, `${key}: ${value}`)))
         : null);
 }
 export function MswarmAccessCard(props) {
     const labels = { ...DEFAULT_LABELS, ...(props.labels ?? {}) };
-    return React.createElement("section", { className: "mcoda-agent-setup__access" }, React.createElement("h2", null, "mswarm Access"), React.createElement("input", {
+    return React.createElement("section", { className: "mcoda-agent-setup__access" }, React.createElement("div", { className: "mcoda-agent-setup__card-heading" }, React.createElement("div", null, React.createElement("h2", null, "mswarm Access"), React.createElement("p", null, props.snapshot?.mswarmApiKeyConfigured
+        ? "Replace the stored key or resync the catalog."
+        : "Add a key to load real cloud and self-hosted agents."))), React.createElement("label", { className: "mcoda-agent-setup__field" }, React.createElement("span", null, "API key"), React.createElement("input", {
         type: "password",
         value: props.apiKey,
         autoComplete: "off",
         onChange: (event) => props.onApiKeyChange(event.target.value),
         placeholder: props.snapshot?.mswarmApiKeyConfigured
             ? "Replace mswarm API key"
-            : "mswarm API key",
-    }), React.createElement("button", {
+            : "sk_prod_mswarm_...",
+    })), React.createElement("div", { className: "mcoda-agent-setup__action-row" }, React.createElement("button", {
         type: "button",
+        className: "mcoda-agent-setup__button mcoda-agent-setup__button--primary",
         disabled: props.busy || !props.apiKey.trim(),
         onClick: props.onSaveKey,
-    }, labels.saveKey), React.createElement("button", { type: "button", disabled: props.busy, onClick: props.onSyncAgents }, labels.syncAgents));
+    }, labels.saveKey), React.createElement("button", {
+        type: "button",
+        className: "mcoda-agent-setup__button mcoda-agent-setup__button--secondary",
+        disabled: props.busy,
+        onClick: props.onSyncAgents,
+    }, labels.syncAgents)));
 }
 export function StageAgentAssignments(props) {
     const labels = { ...DEFAULT_LABELS, ...(props.labels ?? {}) };
@@ -161,46 +210,76 @@ export function StageAgentAssignments(props) {
                 nextSources[stage.stageKey] = "cloud";
             }
         }
-        setSources((current) => ({ ...nextSources, ...current }));
-        setServers((current) => ({ ...nextServers, ...current }));
+        setSources((current) => ({ ...current, ...nextSources }));
+        setServers((current) => ({ ...current, ...nextServers }));
     }, [props.assignments, props.snapshot.catalog.cloudAgents, props.snapshot.catalog.selfHostedServers, props.stages]);
-    return React.createElement("section", { className: "mcoda-agent-setup__assignments" }, React.createElement("h2", null, "Stage Assignments"), React.createElement("div", { className: "mcoda-agent-setup__stage-list" }, props.stages.map((stage) => {
+    return React.createElement("section", { className: "mcoda-agent-setup__assignments" }, React.createElement("div", { className: "mcoda-agent-setup__card-heading" }, React.createElement("div", null, React.createElement("h2", null, "Stage Assignments"), React.createElement("p", null, "Select the agent that should run each app workflow stage.")), React.createElement("button", {
+        type: "button",
+        className: "mcoda-agent-setup__button mcoda-agent-setup__button--success",
+        disabled: props.busy,
+        onClick: props.onSaveAssignments,
+    }, labels.saveAssignments)), React.createElement("div", { className: "mcoda-agent-setup__stage-table-wrap" }, React.createElement("table", { className: "mcoda-agent-setup__stage-table" }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Stage"), React.createElement("th", null, "Source"), React.createElement("th", null, "Self-hosted server"), React.createElement("th", null, "Agent"), React.createElement("th", null, "Status"))), React.createElement("tbody", null, props.stages.map((stage) => {
+        const selectedSlug = props.assignments[stage.stageKey] ?? "";
         const source = sources[stage.stageKey] ??
             (stage.preferredSource === "self_hosted" ? "self_hosted" : "cloud");
         const serverId = servers[stage.stageKey];
-        const server = props.snapshot.catalog.selfHostedServers.find((candidate) => candidate.id === serverId);
+        const server = props.snapshot.catalog.selfHostedServers.find((candidate) => candidate.id === serverId) ?? props.snapshot.catalog.selfHostedServers[0];
         const agents = source === "cloud"
             ? props.snapshot.catalog.cloudAgents
             : server?.agents ?? [];
-        return React.createElement("div", { className: "mcoda-agent-setup__stage-row", key: stage.stageKey }, React.createElement("div", null, React.createElement("strong", null, stage.displayName), stage.description
+        const allSelectableAgents = [
+            ...props.snapshot.catalog.cloudAgents,
+            ...props.snapshot.catalog.selfHostedServers.flatMap((candidate) => candidate.agents),
+        ];
+        const selectedAgent = allSelectableAgents.find((agent) => agent.slug === selectedSlug);
+        const agentSelectValue = agents.some((agent) => agent.slug === selectedSlug)
+            ? selectedSlug
+            : "";
+        const onSourceChange = (value) => {
+            setSources((current) => ({ ...current, [stage.stageKey]: value }));
+            const nextSlug = value === "cloud"
+                ? props.snapshot.catalog.cloudAgents[0]?.slug
+                : firstSelfHostedAgentSlug(props.snapshot.catalog.selfHostedServers);
+            props.onAssignmentChange(stage.stageKey, nextSlug ?? null);
+        };
+        const onServerChange = (value) => {
+            setServers((current) => ({ ...current, [stage.stageKey]: value }));
+            const nextServer = props.snapshot.catalog.selfHostedServers.find((candidate) => candidate.id === value);
+            props.onAssignmentChange(stage.stageKey, nextServer?.agents[0]?.slug ?? null);
+        };
+        return React.createElement("tr", { key: stage.stageKey }, React.createElement("td", { className: "mcoda-agent-setup__stage-cell" }, React.createElement("strong", null, stage.displayName), stage.description
             ? React.createElement("p", null, stage.description)
-            : null), React.createElement(sourceSelect, {
+            : null, React.createElement("code", null, stage.stageKey)), React.createElement("td", null, React.createElement(sourceSelect, {
             value: source,
             labels,
-            onChange: (value) => setSources((current) => ({ ...current, [stage.stageKey]: value })),
-        }), source === "self_hosted"
+            onChange: onSourceChange,
+        })), React.createElement("td", null, source === "self_hosted"
             ? React.createElement(serverSelect, {
                 servers: props.snapshot.catalog.selfHostedServers,
-                value: serverId ?? "",
-                onChange: (value) => setServers((current) => ({ ...current, [stage.stageKey]: value })),
+                value: server?.id ?? "",
+                onChange: onServerChange,
             })
-            : null, React.createElement(agentSelect, {
+            : React.createElement("span", { className: "mcoda-agent-setup__muted-pill" }, "Cloud catalog")), React.createElement("td", null, React.createElement(agentSelect, {
             agents,
-            value: props.assignments[stage.stageKey] ?? "",
+            value: agentSelectValue,
             onChange: (slug) => props.onAssignmentChange(stage.stageKey, slug || null),
-        }));
-    })), React.createElement("button", {
-        type: "button",
-        disabled: props.busy,
-        onClick: props.onSaveAssignments,
-    }, labels.saveAssignments));
+        })), React.createElement("td", null, React.createElement(AgentStatusBadge, {
+            agent: selectedAgent,
+            slug: selectedSlug,
+        })));
+    })))));
 }
 export function AgentSourceSelect(props) {
     const labels = { ...DEFAULT_LABELS, ...(props.labels ?? {}) };
-    return React.createElement("select", {
-        value: props.value,
-        onChange: (event) => props.onChange(event.target.value === "self_hosted" ? "self_hosted" : "cloud"),
-    }, React.createElement("option", { value: "cloud" }, labels.cloud), React.createElement("option", { value: "self_hosted" }, labels.selfHosted));
+    return React.createElement("div", { className: "mcoda-agent-setup__source", role: "group", "aria-label": "Agent source" }, React.createElement("button", {
+        type: "button",
+        "aria-pressed": props.value === "cloud",
+        onClick: () => props.onChange("cloud"),
+    }, labels.cloud), React.createElement("button", {
+        type: "button",
+        "aria-pressed": props.value === "self_hosted",
+        onClick: () => props.onChange("self_hosted"),
+    }, labels.selfHosted));
 }
 export function SelfHostedServerSelect(props) {
     const [query, setQuery] = React.useState("");
@@ -219,16 +298,27 @@ export function SelfHostedServerSelect(props) {
         })
         : null, React.createElement("select", {
         value: props.value,
+        disabled: filteredServers.length === 0,
         onChange: (event) => props.onChange(event.target.value),
-    }, React.createElement("option", { value: "" }, "Select server"), filteredServers.map((server) => React.createElement("option", { key: server.id, value: server.id }, `${server.label} (${server.agentCount})`))));
+    }, React.createElement("option", { value: "" }, filteredServers.length ? "Select server" : "No servers synced"), filteredServers.map((server) => React.createElement("option", { key: server.id, value: server.id }, `${server.label} (${server.agentCount})`))));
 }
 export function AgentSearchSelect(props) {
     const [query, setQuery] = React.useState("");
     const [scrollTop, setScrollTop] = React.useState(0);
     const [activeIndex, setActiveIndex] = React.useState(0);
+    const [open, setOpen] = React.useState(false);
+    const triggerRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const searchRef = React.useRef(null);
+    const [panelFrame, setPanelFrame] = React.useState({
+        left: 0,
+        maxHeight: 420,
+        top: 0,
+        width: 360,
+    });
     const filtered = React.useMemo(() => filterAgentOptions(props.agents, query), [props.agents, query]);
-    const rowHeight = props.rowHeight ?? 40;
-    const viewportHeight = props.viewportHeight ?? 240;
+    const rowHeight = props.rowHeight ?? 64;
+    const viewportHeight = Math.min(props.viewportHeight ?? 320, panelFrame.maxHeight - 74);
     const windowed = getVirtualAgentWindow(filtered, {
         scrollTop,
         rowHeight,
@@ -237,10 +327,62 @@ export function AgentSearchSelect(props) {
     const selected = props.agents.find((agent) => agent.slug === props.value);
     React.useEffect(() => {
         setActiveIndex(0);
+        setScrollTop(0);
     }, [query, props.agents]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const updatePanelFrame = () => {
+            const trigger = triggerRef.current;
+            if (!trigger)
+                return;
+            const rect = trigger.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const width = Math.min(Math.max(rect.width, 380), Math.max(280, viewportWidth - 16));
+            const left = Math.min(Math.max(8, rect.left), Math.max(8, viewportWidth - width - 8));
+            const spaceBelow = viewportHeight - rect.bottom - 12;
+            const spaceAbove = rect.top - 12;
+            const openBelow = spaceBelow >= 280 || spaceBelow >= spaceAbove;
+            const maxHeight = Math.min(420, Math.max(openBelow ? spaceBelow : spaceAbove, 180));
+            const top = openBelow
+                ? Math.min(rect.bottom + 6, viewportHeight - maxHeight - 8)
+                : Math.max(8, rect.top - maxHeight - 6);
+            setPanelFrame({ left, maxHeight, top, width });
+        };
+        updatePanelFrame();
+        searchRef.current?.focus();
+        window.addEventListener("resize", updatePanelFrame);
+        window.addEventListener("scroll", updatePanelFrame, true);
+        return () => {
+            window.removeEventListener("resize", updatePanelFrame);
+            window.removeEventListener("scroll", updatePanelFrame, true);
+        };
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onPointerDown = (event) => {
+            const target = event.target;
+            if (triggerRef.current?.contains(target) ||
+                panelRef.current?.contains(target)) {
+                return;
+            }
+            setOpen(false);
+        };
+        document.addEventListener("mousedown", onPointerDown);
+        return () => document.removeEventListener("mousedown", onPointerDown);
+    }, [open]);
+    const selectAgent = (agent) => {
+        props.onChange(agent.slug);
+        setOpen(false);
+        setQuery("");
+    };
     const onKeyDown = (event) => {
         if (event.key === "Escape") {
+            setOpen(false);
             setQuery("");
+            triggerRef.current?.focus();
             return;
         }
         if (event.key === "ArrowDown") {
@@ -255,38 +397,124 @@ export function AgentSearchSelect(props) {
         }
         if (event.key === "Enter" && filtered[activeIndex]) {
             event.preventDefault();
-            props.onChange(filtered[activeIndex].slug);
+            selectAgent(filtered[activeIndex]);
         }
     };
-    return React.createElement("div", { className: "mcoda-agent-setup__agent-search", onKeyDown }, React.createElement("input", {
-        value: query,
-        onChange: (event) => setQuery(event.target.value),
-        "aria-label": "Search agents",
-        placeholder: "Search agent, model, provider, or slug",
-    }), selected
-        ? React.createElement("div", { className: "mcoda-agent-setup__selected-agent" }, selected.displayName ?? selected.slug)
-        : null, React.createElement("div", null, `Showing all ${filtered.length} agents`), React.createElement("div", {
-        className: "mcoda-agent-setup__agent-list",
-        role: "listbox",
-        style: { maxHeight: viewportHeight, overflowY: "auto" },
-        onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
-    }, React.createElement("div", { style: { height: windowed.beforeHeight } }), windowed.items.map((agent) => {
-        const absoluteIndex = filtered.findIndex((candidate) => candidate.slug === agent.slug);
-        const active = absoluteIndex === activeIndex;
-        return (React.createElement("button", {
-            key: agent.slug,
-            type: "button",
-            className: agent.slug === props.value || active
-                ? "mcoda-agent-setup__agent-row mcoda-agent-setup__agent-row--selected"
-                : "mcoda-agent-setup__agent-row",
-            role: "option",
-            "aria-selected": agent.slug === props.value,
-            style: { minHeight: rowHeight },
-            onClick: () => props.onChange(agent.slug),
-        }, React.createElement("span", null, agent.displayName ?? agent.slug), React.createElement("small", null, [agent.model ?? agent.defaultModel, agent.provider, agent.healthStatus]
-            .filter(Boolean)
-            .join(" / ")), React.createElement("code", null, agent.slug)));
-    }), React.createElement("div", { style: { height: windowed.afterHeight } })));
+    return React.createElement("div", { className: "mcoda-agent-setup__agent-combobox" }, React.createElement("button", {
+        ref: triggerRef,
+        type: "button",
+        className: "mcoda-agent-setup__agent-trigger",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        disabled: props.agents.length === 0,
+        onClick: () => setOpen((current) => !current),
+    }, React.createElement("span", { className: "mcoda-agent-setup__agent-trigger-main" }, selected
+        ? React.createElement(React.Fragment, null, React.createElement("strong", null, agentTitle(selected)), React.createElement("small", null, agentMetadata(selected)))
+        : React.createElement("strong", null, props.agents.length ? "Select agent" : "No agents synced")), React.createElement("span", { className: "mcoda-agent-setup__chevron" }, "⌄")), open
+        ? React.createElement("div", {
+            className: "mcoda-agent-setup__agent-panel",
+            ref: panelRef,
+            style: {
+                left: panelFrame.left,
+                maxHeight: panelFrame.maxHeight,
+                top: panelFrame.top,
+                width: panelFrame.width,
+            },
+        }, React.createElement("div", { className: "mcoda-agent-setup__agent-panel-search" }, React.createElement("input", {
+            ref: searchRef,
+            value: query,
+            onChange: (event) => setQuery(event.target.value),
+            onKeyDown,
+            "aria-label": "Search agents",
+            placeholder: "Search agent, model, provider, or slug",
+        })), React.createElement("div", { className: "mcoda-agent-setup__agent-count" }, filtered.length
+            ? `Showing all ${filtered.length} agents`
+            : "No agents match this search"), React.createElement("div", {
+            className: "mcoda-agent-setup__agent-list",
+            role: "listbox",
+            style: { maxHeight: viewportHeight, overflowY: "auto" },
+            onKeyDown,
+            onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        }, React.createElement("div", { style: { height: windowed.beforeHeight } }), windowed.items.map((agent, index) => {
+            const absoluteIndex = windowed.startIndex + index;
+            const active = absoluteIndex === activeIndex;
+            return React.createElement("button", {
+                key: agent.slug,
+                type: "button",
+                className: agent.slug === props.value || active
+                    ? "mcoda-agent-setup__agent-row mcoda-agent-setup__agent-row--selected"
+                    : "mcoda-agent-setup__agent-row",
+                role: "option",
+                "aria-selected": agent.slug === props.value,
+                style: { minHeight: rowHeight },
+                onMouseEnter: () => setActiveIndex(absoluteIndex),
+                onClick: () => selectAgent(agent),
+            }, React.createElement("span", { className: "mcoda-agent-setup__agent-row-main" }, React.createElement("strong", null, agentTitle(agent)), React.createElement("small", null, agentMetadata(agent)), React.createElement("code", null, agent.slug)), agent.slug === props.value
+                ? React.createElement("span", { className: "mcoda-agent-setup__selected-mark" }, "Selected")
+                : null);
+        }), React.createElement("div", { style: { height: windowed.afterHeight } })))
+        : null);
+}
+function MetricCard(props) {
+    return React.createElement("div", { className: "mcoda-agent-setup__metric" }, React.createElement("span", null, props.label), React.createElement("strong", null, props.value), React.createElement("small", null, props.detail));
+}
+function AgentStatusBadge(props) {
+    const kind = props.agent?.managedKind;
+    const sourceLabel = kind === "cloud"
+        ? "Cloud"
+        : kind === "self_hosted"
+            ? "Self-hosted"
+            : props.agent
+                ? "Local"
+                : props.slug
+                    ? "Missing"
+                    : "Unset";
+    const className = kind === "cloud"
+        ? "mcoda-agent-setup__badge mcoda-agent-setup__badge--info"
+        : kind === "self_hosted"
+            ? "mcoda-agent-setup__badge mcoda-agent-setup__badge--success"
+            : props.agent
+                ? "mcoda-agent-setup__badge"
+                : "mcoda-agent-setup__badge mcoda-agent-setup__badge--warning";
+    return React.createElement("span", { className }, sourceLabel);
+}
+function firstSelfHostedAgentSlug(servers) {
+    return servers.find((server) => server.agents.length > 0)?.agents[0]?.slug ?? null;
+}
+function agentTitle(agent) {
+    return agent.displayName ?? prettySlug(agent.slug);
+}
+function agentMetadata(agent) {
+    return ([
+        agent.defaultModel ?? agent.model,
+        agent.provider,
+        agent.healthStatus && agent.healthStatus !== "-" ? agent.healthStatus : null,
+    ]
+        .filter(Boolean)
+        .join(" / ") || agent.slug);
+}
+function prettySlug(slug) {
+    return slug
+        .replace(/^mswarm-cloud-/, "")
+        .replace(/^mswarm-self-hosted-/, "")
+        .replace(/^mcoda-/, "")
+        .replace(/[-_]+/g, " ");
+}
+function formatTimestamp(value) {
+    if (!value)
+        return "never";
+    const parsed = Date.parse(value);
+    if (Number.isNaN(parsed))
+        return value;
+    const deltaMinutes = Math.max(0, Math.round((Date.now() - parsed) / 60000));
+    if (deltaMinutes < 1)
+        return "just now";
+    if (deltaMinutes < 60)
+        return `${deltaMinutes}m ago`;
+    const deltaHours = Math.round(deltaMinutes / 60);
+    if (deltaHours < 24)
+        return `${deltaHours}h ago`;
+    return `${Math.round(deltaHours / 24)}d ago`;
 }
 function joinClasses(...values) {
     return values.filter(Boolean).join(" ");

package/dist/server/service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../src/server/service.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,4BAA4B,EAC5B,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAErB,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,4BAA4B,GACpC,sBAAsB,CAqJxB"}
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../../src/server/service.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,4BAA4B,EAC5B,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAIrB,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,4BAA4B,GACpC,sBAAsB,CAoLxB"}

package/dist/server/service.js

@@ -1,6 +1,7 @@
 import { defaultMcodaStageDefinitions } from "../defaultStages.js";
 import { buildCloudAgentOptions, buildSelfHostedServerOptions, } from "../headless/catalog.js";
 import { createProgrammaticMcodaRuntimeAdapter } from "./programmaticRuntime.js";
+const REMOTE_ATTEMPTS = 3;
 export function createMcodaAgentSetupService(options) {
     const runtime = options.mcoda ?? createProgrammaticMcodaRuntimeAdapter();
     const stages = options.defaultStages ?? defaultMcodaStageDefinitions;
@@ -8,29 +9,43 @@ export function createMcodaAgentSetupService(options) {
     const authorize = async (request) => {
         await options.authorize?.(request);
     };
-    const capture = async (errors, key, fn, fallback) => {
-        try {
-            return await fn();
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            errors[key] = message;
-            options.logger?.warn?.(`mcoda agent setup ${key} failed`, {
-                error: message,
-            });
-            return fallback;
+    const capture = async (errors, key, fn, fallback, attempts = 1) => {
+        let lastError;
+        for (let attempt = 1; attempt <= Math.max(1, attempts); attempt += 1) {
+            try {
+                return await fn();
+            }
+            catch (error) {
+                lastError = error;
+                if (attempt < attempts) {
+                    await sleep(150 * attempt);
+                }
+            }
         }
+        const message = lastError instanceof Error ? lastError.message : String(lastError);
+        errors[key] = message;
+        options.logger?.warn?.(`mcoda agent setup ${key} failed`, {
+            error: message,
+        });
+        return fallback;
+    };
+    const captureRemote = async (errors, key, fn, fallback) => {
+        return capture(errors, key, fn, fallback, REMOTE_ATTEMPTS);
     };
     const buildSnapshot = async (extraErrors = {}) => {
         const settings = await options.settingsStore.load();
         const errors = { ...extraErrors };
         const [localAgents, cloudCatalogAgents, selfHostedCatalogAgents] = await Promise.all([
             capture(errors, "local_agents", () => runtime.listLocalAgents({ refreshHealth: true }), []),
-            capture(errors, "cloud_agents", () => runtime.listCloudAgents(), []),
-            capture(errors, "self_hosted_agents", () => runtime.listSelfHostedAgents({ includeUnreachable: true }), []),
+            captureRemote(errors, "cloud_agents", () => runtime.listCloudAgents(), []),
+            captureRemote(errors, "self_hosted_agents", () => runtime.listSelfHostedAgents({ includeUnreachable: true }), []),
         ]);
-        const cloudAgents = buildCloudAgentOptions(localAgents, cloudCatalogAgents);
-        const selfHostedServers = buildSelfHostedServerOptions(localAgents, selfHostedCatalogAgents);
+        const cloudAgents = errors.cloud_agents === undefined
+            ? buildCloudAgentOptions(localAgents, cloudCatalogAgents)
+            : [];
+        const selfHostedServers = errors.self_hosted_agents === undefined
+            ? buildSelfHostedServerOptions(localAgents, selfHostedCatalogAgents)
+            : [];
         const catalog = {
             localAgents,
             cloudAgents,
@@ -112,14 +127,17 @@ export function createMcodaAgentSetupService(options) {
     };
     async function syncCatalogs() {
         const errors = {};
-        await capture(errors, "cloud_agent_sync", () => runtime.syncCloudAgents({ pruneMissing: true }), []);
-        await capture(errors, "self_hosted_agent_sync", () => runtime.syncSelfHostedAgents({
+        await captureRemote(errors, "cloud_agent_sync", () => runtime.syncCloudAgents({ pruneMissing: true }), []);
+        await captureRemote(errors, "self_hosted_agent_sync", () => runtime.syncSelfHostedAgents({
             pruneMissing: true,
             includeUnreachable: true,
         }), []);
         return errors;
     }
 }
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
 function initialAssignments(stages) {
     return Object.fromEntries(stages.map((stage) => [stage.stageKey, stage.defaultAgentSlug ?? null]));
 }

package/examples/express-server/README.md

@@ -32,3 +32,7 @@ app.all("/api/mcoda/*", async (req, res) => {
 
 app.listen(3000);
 ```
+
+This uses the real programmatic mcoda/mswarm runtime by default. After the
+frontend posts a real mswarm API key to `/api/mcoda/mswarm-api-key`, cloud and
+self-hosted agents are fetched and synced from the real mswarm server.

package/examples/nextjs-mcoda-agent-setup/README.md

@@ -12,6 +12,7 @@ import {
   createMcodaAgentSetupClient,
   defaultMcodaStageDefinitions
 } from "@mcoda/agent-setup/react";
+import "@mcoda/agent-setup/react/styles.css";
 
 const client = createMcodaAgentSetupClient({
   baseUrl: "/api/mcoda",

package/examples/vite-react-mcoda-agent-setup/README.md

@@ -6,6 +6,7 @@ import {
   createMcodaAgentSetupClient,
   defaultMcodaStageDefinitions
 } from "@mcoda/agent-setup/react";
+import "@mcoda/agent-setup/react/styles.css";
 
 const client = createMcodaAgentSetupClient({
   baseUrl: "/api/mcoda"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcoda/agent-setup",
-  "version": "0.1.66",
+  "version": "0.1.70",
   "description": "Turnkey mcoda/mswarm agent setup SDK for applications.",
   "type": "module",
   "main": "dist/index.js",
@@ -21,11 +21,15 @@
     "./react": {
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js"
+    },
+    "./react/styles.css": {
+      "default": "./styles/react.css"
     }
   },
   "files": [
     "dist",
     "examples",
+    "styles",
     "!dist/**/__tests__/**",
     "!dist/**/*.test.*",
     "README.md",
@@ -58,7 +62,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@mcoda/core": "0.1.66"
+    "@mcoda/core": "0.1.70"
   },
   "peerDependencies": {
     "react": ">=18.2.0 || >=19.0.0",

package/styles/react.css

@@ -0,0 +1,570 @@
+.mcoda-agent-setup {
+  --mcoda-surface: #ffffff;
+  --mcoda-page: #f8fafc;
+  --mcoda-border: #e2e8f0;
+  --mcoda-border-strong: #cbd5e1;
+  --mcoda-text: #0f172a;
+  --mcoda-muted: #64748b;
+  --mcoda-faint: #94a3b8;
+  --mcoda-blue: #2563eb;
+  --mcoda-blue-soft: #eff6ff;
+  --mcoda-emerald: #059669;
+  --mcoda-emerald-soft: #ecfdf5;
+  --mcoda-amber: #d97706;
+  --mcoda-amber-soft: #fffbeb;
+  --mcoda-rose: #e11d48;
+  --mcoda-rose-soft: #fff1f2;
+  color: var(--mcoda-text);
+  display: grid;
+  gap: 16px;
+  width: 100%;
+}
+
+.mcoda-agent-setup *,
+.mcoda-agent-setup *::before,
+.mcoda-agent-setup *::after {
+  box-sizing: border-box;
+}
+
+.mcoda-agent-setup button,
+.mcoda-agent-setup input,
+.mcoda-agent-setup select {
+  font: inherit;
+}
+
+.mcoda-agent-setup__header,
+.mcoda-agent-setup__summary,
+.mcoda-agent-setup__access,
+.mcoda-agent-setup__assignments,
+.mcoda-agent-setup__empty-state,
+.mcoda-agent-setup__alert {
+  background: var(--mcoda-surface);
+  border: 1px solid var(--mcoda-border);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+}
+
+.mcoda-agent-setup__header {
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 18px 20px;
+}
+
+.mcoda-agent-setup__title-block {
+  min-width: 0;
+}
+
+.mcoda-agent-setup__eyebrow {
+  color: var(--mcoda-blue);
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0;
+  margin: 0 0 4px;
+  text-transform: uppercase;
+}
+
+.mcoda-agent-setup__header h1,
+.mcoda-agent-setup__card-heading h2,
+.mcoda-agent-setup__assignments h2 {
+  color: var(--mcoda-text);
+  font-size: 18px;
+  font-weight: 750;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.mcoda-agent-setup__header p,
+.mcoda-agent-setup__card-heading p {
+  color: var(--mcoda-muted);
+  font-size: 13px;
+  line-height: 1.45;
+  margin: 4px 0 0;
+}
+
+.mcoda-agent-setup__button {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 700;
+  gap: 8px;
+  justify-content: center;
+  min-height: 38px;
+  padding: 0 14px;
+  transition:
+    background-color 140ms ease,
+    border-color 140ms ease,
+    color 140ms ease;
+  white-space: nowrap;
+}
+
+.mcoda-agent-setup__button:disabled {
+  background: #f1f5f9;
+  color: var(--mcoda-faint);
+  cursor: not-allowed;
+}
+
+.mcoda-agent-setup__button--primary {
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.mcoda-agent-setup__button--primary:hover:not(:disabled) {
+  background: #1e293b;
+}
+
+.mcoda-agent-setup__button--secondary {
+  background: var(--mcoda-blue-soft);
+  border-color: #bfdbfe;
+  color: #1d4ed8;
+}
+
+.mcoda-agent-setup__button--secondary:hover:not(:disabled) {
+  background: #dbeafe;
+}
+
+.mcoda-agent-setup__button--success {
+  background: var(--mcoda-emerald);
+  color: #ffffff;
+}
+
+.mcoda-agent-setup__button--success:hover:not(:disabled) {
+  background: #047857;
+}
+
+.mcoda-agent-setup__alert {
+  font-size: 13px;
+  margin: 0;
+  padding: 12px 14px;
+}
+
+.mcoda-agent-setup__alert--error {
+  background: var(--mcoda-rose-soft);
+  border-color: #fecdd3;
+  color: #be123c;
+}
+
+.mcoda-agent-setup__alert--success {
+  background: var(--mcoda-emerald-soft);
+  border-color: #a7f3d0;
+  color: #047857;
+}
+
+.mcoda-agent-setup__overview {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.75fr);
+}
+
+.mcoda-agent-setup__summary,
+.mcoda-agent-setup__access,
+.mcoda-agent-setup__assignments,
+.mcoda-agent-setup__empty-state {
+  padding: 18px;
+}
+
+.mcoda-agent-setup__card-heading {
+  align-items: flex-start;
+  display: flex;
+  gap: 14px;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.mcoda-agent-setup__metric-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(5, minmax(120px, 1fr));
+}
+
+.mcoda-agent-setup__metric {
+  background: #f8fafc;
+  border: 1px solid #edf2f7;
+  border-radius: 8px;
+  min-width: 0;
+  padding: 12px;
+}
+
+.mcoda-agent-setup__metric span,
+.mcoda-agent-setup__field span,
+.mcoda-agent-setup__stage-table th {
+  color: var(--mcoda-faint);
+  display: block;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.mcoda-agent-setup__metric strong {
+  color: var(--mcoda-text);
+  display: block;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.1;
+  margin-top: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mcoda-agent-setup__metric small {
+  color: var(--mcoda-muted);
+  display: block;
+  font-size: 12px;
+  margin-top: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mcoda-agent-setup__badge {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  color: #475569;
+  display: inline-flex;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0;
+  line-height: 1;
+  padding: 6px 8px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.mcoda-agent-setup__badge--success {
+  background: var(--mcoda-emerald-soft);
+  border-color: #a7f3d0;
+  color: #047857;
+}
+
+.mcoda-agent-setup__badge--warning {
+  background: var(--mcoda-amber-soft);
+  border-color: #fde68a;
+  color: #b45309;
+}
+
+.mcoda-agent-setup__badge--info {
+  background: var(--mcoda-blue-soft);
+  border-color: #bfdbfe;
+  color: #1d4ed8;
+}
+
+.mcoda-agent-setup__warnings {
+  background: var(--mcoda-amber-soft);
+  border: 1px solid #fde68a;
+  border-radius: 8px;
+  color: #92400e;
+  font-size: 12px;
+  margin: 14px 0 0;
+  padding: 10px 12px 10px 28px;
+}
+
+.mcoda-agent-setup__access {
+  align-content: start;
+  display: grid;
+  gap: 14px;
+}
+
+.mcoda-agent-setup__field {
+  display: grid;
+  gap: 8px;
+}
+
+.mcoda-agent-setup__field input,
+.mcoda-agent-setup__server-select input,
+.mcoda-agent-setup__server-select select,
+.mcoda-agent-setup__agent-panel-search input {
+  background: #ffffff;
+  border: 1px solid var(--mcoda-border);
+  border-radius: 8px;
+  color: var(--mcoda-text);
+  min-height: 40px;
+  outline: none;
+  padding: 0 12px;
+  width: 100%;
+}
+
+.mcoda-agent-setup__field input:focus,
+.mcoda-agent-setup__server-select input:focus,
+.mcoda-agent-setup__server-select select:focus,
+.mcoda-agent-setup__agent-panel-search input:focus,
+.mcoda-agent-setup__agent-trigger:focus-visible,
+.mcoda-agent-setup__button:focus-visible,
+.mcoda-agent-setup__source button:focus-visible {
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
+  outline: none;
+}
+
+.mcoda-agent-setup__action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.mcoda-agent-setup__stage-table-wrap {
+  border: 1px solid var(--mcoda-border);
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+.mcoda-agent-setup__stage-table {
+  border-collapse: collapse;
+  min-width: 980px;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.mcoda-agent-setup__stage-table th {
+  background: #f8fafc;
+  border-bottom: 1px solid var(--mcoda-border);
+  padding: 12px;
+  text-align: left;
+}
+
+.mcoda-agent-setup__stage-table td {
+  border-bottom: 1px solid #f1f5f9;
+  padding: 12px;
+  vertical-align: top;
+}
+
+.mcoda-agent-setup__stage-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.mcoda-agent-setup__stage-table th:nth-child(1),
+.mcoda-agent-setup__stage-table td:nth-child(1) {
+  width: 22%;
+}
+
+.mcoda-agent-setup__stage-table th:nth-child(2),
+.mcoda-agent-setup__stage-table td:nth-child(2) {
+  width: 15%;
+}
+
+.mcoda-agent-setup__stage-table th:nth-child(3),
+.mcoda-agent-setup__stage-table td:nth-child(3) {
+  width: 18%;
+}
+
+.mcoda-agent-setup__stage-table th:nth-child(4),
+.mcoda-agent-setup__stage-table td:nth-child(4) {
+  width: 34%;
+}
+
+.mcoda-agent-setup__stage-cell strong {
+  color: var(--mcoda-text);
+  display: block;
+  font-size: 14px;
+}
+
+.mcoda-agent-setup__stage-cell p {
+  color: var(--mcoda-muted);
+  font-size: 12px;
+  line-height: 1.4;
+  margin: 4px 0 8px;
+}
+
+.mcoda-agent-setup__stage-cell code,
+.mcoda-agent-setup__agent-row code {
+  color: var(--mcoda-faint);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11px;
+}
+
+.mcoda-agent-setup__source {
+  background: #f1f5f9;
+  border: 1px solid var(--mcoda-border);
+  border-radius: 8px;
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+}
+
+.mcoda-agent-setup__source button {
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: var(--mcoda-muted);
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 800;
+  min-height: 30px;
+  padding: 0 10px;
+}
+
+.mcoda-agent-setup__source button[aria-pressed="true"] {
+  background: #ffffff;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
+  color: var(--mcoda-blue);
+}
+
+.mcoda-agent-setup__server-select {
+  display: grid;
+  gap: 8px;
+}
+
+.mcoda-agent-setup__muted-pill {
+  background: #f8fafc;
+  border: 1px solid var(--mcoda-border);
+  border-radius: 8px;
+  color: var(--mcoda-muted);
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 650;
+  min-height: 40px;
+  padding: 10px 12px;
+  width: 100%;
+}
+
+.mcoda-agent-setup__agent-combobox {
+  min-width: 0;
+  position: relative;
+}
+
+.mcoda-agent-setup__agent-trigger {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid var(--mcoda-border);
+  border-radius: 8px;
+  color: var(--mcoda-text);
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  min-height: 44px;
+  padding: 8px 10px;
+  text-align: left;
+  width: 100%;
+}
+
+.mcoda-agent-setup__agent-trigger:disabled {
+  background: #f8fafc;
+  color: var(--mcoda-faint);
+  cursor: not-allowed;
+}
+
+.mcoda-agent-setup__agent-trigger-main {
+  min-width: 0;
+}
+
+.mcoda-agent-setup__agent-trigger-main strong,
+.mcoda-agent-setup__agent-row-main strong {
+  display: block;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mcoda-agent-setup__agent-trigger-main small,
+.mcoda-agent-setup__agent-row-main small {
+  color: var(--mcoda-muted);
+  display: block;
+  font-size: 11px;
+  margin-top: 3px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mcoda-agent-setup__chevron {
+  color: var(--mcoda-faint);
+  font-size: 16px;
+  line-height: 1;
+}
+
+.mcoda-agent-setup__agent-panel {
+  background: #ffffff;
+  border: 1px solid var(--mcoda-border);
+  border-radius: 8px;
+  box-shadow: 0 24px 44px rgba(15, 23, 42, 0.18);
+  overflow: hidden;
+  position: fixed;
+  z-index: 90;
+}
+
+.mcoda-agent-setup__agent-panel-search {
+  border-bottom: 1px solid #f1f5f9;
+  padding: 8px;
+}
+
+.mcoda-agent-setup__agent-count {
+  color: var(--mcoda-muted);
+  font-size: 12px;
+  font-weight: 650;
+  padding: 8px 12px;
+}
+
+.mcoda-agent-setup__agent-list {
+  overflow-y: auto;
+}
+
+.mcoda-agent-setup__agent-row {
+  align-items: flex-start;
+  background: #ffffff;
+  border: 0;
+  border-top: 1px solid #f1f5f9;
+  color: var(--mcoda-text);
+  cursor: pointer;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 9px 12px;
+  text-align: left;
+  width: 100%;
+}
+
+.mcoda-agent-setup__agent-row:hover,
+.mcoda-agent-setup__agent-row--selected {
+  background: var(--mcoda-blue-soft);
+}
+
+.mcoda-agent-setup__agent-row-main {
+  min-width: 0;
+}
+
+.mcoda-agent-setup__selected-mark {
+  color: var(--mcoda-blue);
+  flex: none;
+  font-size: 10px;
+  font-weight: 800;
+  margin-top: 3px;
+  text-transform: uppercase;
+}
+
+.mcoda-agent-setup__empty-state {
+  color: var(--mcoda-muted);
+  font-size: 14px;
+  padding: 28px;
+  text-align: center;
+}
+
+@media (max-width: 1100px) {
+  .mcoda-agent-setup__overview,
+  .mcoda-agent-setup__metric-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .mcoda-agent-setup__metric-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .mcoda-agent-setup__header,
+  .mcoda-agent-setup__card-heading {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .mcoda-agent-setup__metric-grid {
+    grid-template-columns: 1fr;
+  }
+}