@mcoda/agent-setup 0.1.66 → 0.1.71

package/dist/react/index.js

@@ -7,6 +7,7 @@ const DEFAULT_LABELS = {
     saveAssignments: "Save Assignments",
     cloud: "Cloud",
     selfHosted: "Self-hosted",
+    workers: "Workers",
 };
 export function McodaAgentSetupPage(props) {
     const labels = { ...DEFAULT_LABELS, ...(props.labels ?? {}) };
@@ -22,9 +23,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 +48,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 +66,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, self-hosted, and Worker agent catalogs synced.");
         }
         catch (caught) {
             setError(caught instanceof Error ? caught.message : String(caught));
@@ -76,10 +83,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 +97,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, self-hosted, or Worker mcoda targets 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 +116,7 @@ export function McodaAgentSetupPage(props) {
         onApiKeyChange: setApiKey,
         onSaveKey: saveKey,
         onSyncAgents: syncAgents,
-    }), snapshot
+    })), snapshot
         ? React.createElement(components.StageAgentAssignments, {
             stages,
             snapshot,
@@ -115,27 +131,65 @@ 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`,
+    }), React.createElement(MetricCard, {
+        label: "Workers",
+        value: String(snapshot.catalog.workerAgents.length),
+        detail: "mswarm Worker catalog",
+    })), 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, self-hosted, and Worker 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 ?? {}) };
@@ -151,6 +205,10 @@ export function StageAgentAssignments(props) {
             const assignment = props.assignments[stage.stageKey];
             if (!assignment)
                 continue;
+            if (props.snapshot.catalog.workerAgents.some((agent) => agent.slug === assignment)) {
+                nextSources[stage.stageKey] = "worker";
+                continue;
+            }
             const selfHostedServer = props.snapshot.catalog.selfHostedServers.find((server) => server.agents.some((agent) => agent.slug === assignment));
             if (selfHostedServer) {
                 nextSources[stage.stageKey] = "self_hosted";
@@ -161,46 +219,91 @@ export function StageAgentAssignments(props) {
                 nextSources[stage.stageKey] = "cloud";
             }
         }
-        setSources((current) => ({ ...nextSources, ...current }));
-        setServers((current) => ({ ...nextServers, ...current }));
-    }, [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) => {
+        setSources((current) => ({ ...current, ...nextSources }));
+        setServers((current) => ({ ...current, ...nextServers }));
+    }, [
+        props.assignments,
+        props.snapshot.catalog.cloudAgents,
+        props.snapshot.catalog.selfHostedServers,
+        props.snapshot.catalog.workerAgents,
+        props.stages,
+    ]);
+    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");
+            defaultAssignmentSource(stage.preferredSource);
         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
+            : source === "worker"
+                ? props.snapshot.catalog.workerAgents
+                : server?.agents ?? [];
+        const allSelectableAgents = [
+            ...props.snapshot.catalog.cloudAgents,
+            ...props.snapshot.catalog.selfHostedServers.flatMap((candidate) => candidate.agents),
+            ...props.snapshot.catalog.workerAgents,
+        ];
+        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
+                : value === "worker"
+                    ? props.snapshot.catalog.workerAgents[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" }, source === "worker" ? "Worker catalog" : "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), React.createElement("button", {
+        type: "button",
+        "aria-pressed": props.value === "worker",
+        onClick: () => props.onChange("worker"),
+    }, labels.workers));
 }
 export function SelfHostedServerSelect(props) {
     const [query, setQuery] = React.useState("");
@@ -219,16 +322,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 +351,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 +421,136 @@ 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"
+            : kind === "worker"
+                ? "Worker"
+                : 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"
+            : kind === "worker"
+                ? "mcoda-agent-setup__badge mcoda-agent-setup__badge--worker"
+                : props.agent
+                    ? "mcoda-agent-setup__badge"
+                    : "mcoda-agent-setup__badge mcoda-agent-setup__badge--warning";
+    return React.createElement("span", { className }, sourceLabel);
+}
+function defaultAssignmentSource(preferredSource) {
+    if (preferredSource === "self_hosted")
+        return "self_hosted";
+    if (preferredSource === "worker")
+        return "worker";
+    return "cloud";
+}
+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(/^mswarm-worker-/, "")
+        .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/cliRuntime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cliRuntime.d.ts","sourceRoot":"","sources":["../../src/server/cliRuntime.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIV,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CACX,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAC1C,OAAO,CAAC,OAAO,CAAC,CAAC;CACvB;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,GAAE,2BAAgC,GACtC,mBAAmB,CA4GrB"}
+{"version":3,"file":"cliRuntime.d.ts","sourceRoot":"","sources":["../../src/server/cliRuntime.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAIV,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CACX,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAC1C,OAAO,CAAC,OAAO,CAAC,CAAC;CACvB;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,GAAE,2BAAgC,GACtC,mBAAmB,CAwIrB"}

package/dist/server/cliRuntime.js

@@ -1,6 +1,6 @@
 import { spawn } from "node:child_process";
 import { normalizeAgentCatalogEntries } from "../headless/normalization.js";
-import { isCloudAgent, isSelfHostedAgent } from "../headless/catalog.js";
+import { isCloudAgent, isSelfHostedAgent, isWorkerAgent } from "../headless/catalog.js";
 export function createCliMcodaRuntimeAdapter(input = {}) {
     const command = input.command ?? "mcoda";
     const run = input.runCommand ??
@@ -82,6 +82,31 @@ export function createCliMcodaRuntimeAdapter(input = {}) {
             });
             return (await listLocal(options)).filter(isSelfHostedAgent);
         },
+        async listWorkerAgents(options) {
+            return runAgents([
+                "workers",
+                "list",
+                "--json",
+                ...(options?.includeUnreachable ? ["--include-disabled"] : []),
+            ], {
+                source: "worker_catalog",
+                synced: false,
+                managedKind: "worker",
+            });
+        },
+        async syncWorkerAgents(options) {
+            await run(command, [
+                "workers",
+                "sync",
+                "--prune",
+                "--json",
+                ...(options?.includeUnreachable ? ["--include-disabled"] : []),
+            ], {
+                cwd: input.cwd,
+                timeoutMs: input.timeoutMs,
+            });
+            return (await listLocal(options)).filter(isWorkerAgent);
+        },
         listLocalAgents: listLocal,
     };
 }

package/dist/server/inMemoryRuntime.d.ts

@@ -2,6 +2,7 @@ import type { McodaAgentCatalogEntry, McodaRuntimeAdapter } from "../types.js";
 export interface InMemoryMcodaRuntimeAdapterInput {
     cloudAgents?: McodaAgentCatalogEntry[];
     selfHostedAgents?: McodaAgentCatalogEntry[];
+    workerAgents?: McodaAgentCatalogEntry[];
     localAgents?: McodaAgentCatalogEntry[];
 }
 export declare function createInMemoryMcodaRuntimeAdapter(input?: InMemoryMcodaRuntimeAdapterInput): McodaRuntimeAdapter;

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

@@ -1 +1 @@
-{"version":3,"file":"inMemoryRuntime.d.ts","sourceRoot":"","sources":["../../src/server/inMemoryRuntime.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,sBAAsB,EAItB,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,gCAAgC;IAC/C,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;CACxC;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,GAAE,gCAAqC,GAC3C,mBAAmB,CAqGrB"}
+{"version":3,"file":"inMemoryRuntime.d.ts","sourceRoot":"","sources":["../../src/server/inMemoryRuntime.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,sBAAsB,EAItB,mBAAmB,EACpB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,gCAAgC;IAC/C,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,sBAAsB,EAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACxC,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;CACxC;AAED,wBAAgB,iCAAiC,CAC/C,KAAK,GAAE,gCAAqC,GAC3C,mBAAmB,CA+GrB"}

package/dist/server/inMemoryRuntime.js

@@ -1,7 +1,8 @@
-import { syncedCloudSlug, syncedSelfHostedSlug, } from "../headless/catalog.js";
+import { syncedCloudSlug, syncedSelfHostedSlug, syncedWorkerSlug, } from "../headless/catalog.js";
 export function createInMemoryMcodaRuntimeAdapter(input = {}) {
     let cloudAgents = input.cloudAgents?.map((agent) => ({ ...agent })) ?? [];
     let selfHostedAgents = input.selfHostedAgents?.map((agent) => ({ ...agent })) ?? [];
+    let workerAgents = input.workerAgents?.map((agent) => ({ ...agent })) ?? [];
     let localAgents = input.localAgents?.map((agent) => ({ ...agent })) ?? [];
     let configuredApiKey = false;
     const syncRemote = (remoteAgents, slugFor, managedKind) => {
@@ -65,6 +66,15 @@ export function createInMemoryMcodaRuntimeAdapter(input = {}) {
             }
             return syncRemote(filterProvider(selfHostedAgents, options), syncedSelfHostedSlug, "self_hosted");
         },
+        async listWorkerAgents(options) {
+            return filterProvider(workerAgents, options).map((agent) => ({ ...agent }));
+        },
+        async syncWorkerAgents(options) {
+            if (!configuredApiKey) {
+                throw new Error("mswarm api key is required");
+            }
+            return syncRemote(filterProvider(workerAgents, options), syncedWorkerSlug, "worker");
+        },
         async listLocalAgents(options) {
             return filterProvider(localAgents, options).map((agent) => ({ ...agent }));
         },