@springbrand/agent-config-editor 0.0.0-stage → 0.1.0-alpha.0

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# @springbrand/agent-config-editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The Agent Config editor shared by SP Web and Eval Web. It owns the existing SP
+Behavior, Model, Thinking, Connector Toolkit, Component Connector, Extension,
+Action, Skill and Reference editor, selectors and library dialogs. Agent Config
+schemas, model presets and resource contracts remain in their owning packages.
+
+`AgentEditorProvider` accepts an authenticated `AgentEditorClient`, host
+navigation and the Connector authorization return route. `createAgentEditorClient`
+binds the existing public SP HTTP operations to a host-supplied request function.
+The package has no application imports, credentials, database access, router or
+runtime authority. Hosts own creation and edit sessions, persistence, revision
+conflicts, frozen-copy rules and navigation. `AgentDraft` and input conversion
+reuse the public Agent Config schemas and retain settings not exposed by the UI.
+
+SP and Eval consume the same components. A read-only editor hides mutation
+actions and disables configuration changes while preserving inspection.
+Resource selections update the host's draft; only its normal Save/Create action
+persists the Agent configuration. Resource library mutations retain their existing
+explicit actions and confirmation dialogs.
+
+Consumers load the shared Dune styles and include this package's source in their
+Tailwind source scan. React, React DOM and React Query are host peers.
+
+Run `pnpm --filter @springbrand/agent-config-editor check` and
+`pnpm --filter @springbrand/agent-config-editor test` for focused verification.

package/dist/agent-config-editor/src/agent-action-selector.d.ts

@@ -0,0 +1,10 @@
+import type { ActionCatalogItem } from '../../agent-contracts/src/action.js';
+export declare function AgentActionSelector({ open, onOpenChange, userId, selectedIds, selectedItems, onChange, maxActionCount, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    userId: string;
+    selectedIds: readonly string[];
+    selectedItems: readonly (ActionCatalogItem | undefined)[];
+    onChange: (ids: string[]) => void;
+    maxActionCount: number;
+}): import("react").JSX.Element;

package/dist/agent-config-editor/src/agent-action-selector.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDeferredValue, useEffect, useReducer, useRef, useState } from 'react';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { Button, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger } from '@springbrand/site-block';
+import { ChevronDown } from 'lucide-react';
+import { actionCatalogQueryKey, actionGroupQueryKey } from './client/index.js';
+import { useAgentEditorHost } from './host.js';
+import { AgentSelectableRow, AgentSelectionDialog } from './agent-selection-dialog.js';
+import { useSelectionDialogOpen } from './use-selection-dialog-open.js';
+function editSelection(draft, edit) {
+    if (edit.type === 'reset')
+        return { ids: [...edit.ids], error: null };
+    const ids = edit.change(draft.ids);
+    return ids.length > edit.maxCount
+        ? { ...draft, error: `This Agent can select up to ${edit.maxCount} Actions with its other capabilities.` }
+        : { ids, error: null };
+}
+function nextPage(last) {
+    return last.page * last.pageSize < last.total ? last.page + 1 : undefined;
+}
+async function allGroupActions(listGroupActions, group, signal) {
+    const groupQuery = group.supplier ? { supplierId: group.supplier.id } : { unassigned: 'true' };
+    const items = [];
+    let page = 1;
+    while (true) {
+        const result = await listGroupActions({ ...groupQuery, page, pageSize: 100 }, signal);
+        items.push(...result.data);
+        if (page * result.pageSize >= result.total)
+            return items;
+        page += 1;
+    }
+}
+export function AgentActionSelector({ open, onOpenChange, userId, selectedIds, selectedItems, onChange, maxActionCount, }) {
+    const { client: { actions: { listActions } } } = useAgentEditorHost();
+    const [search, setSearch] = useState('');
+    const q = useDeferredValue(search);
+    const [draft, dispatch] = useReducer(editSelection, { ids: [], error: null });
+    const [pendingGroupSelections, setPendingGroupSelections] = useState(0);
+    const selectionSession = useRef(0);
+    useSelectionDialogOpen(open, () => dispatch({ type: 'reset', ids: selectedIds }));
+    useEffect(() => {
+        selectionSession.current += 1;
+        setPendingGroupSelections(0);
+    }, [open]);
+    const query = useInfiniteQuery({
+        queryKey: actionCatalogQueryKey(userId, q),
+        queryFn: ({ pageParam, signal }) => listActions({ q, page: pageParam, pageSize: 50 }, signal),
+        initialPageParam: 1, getNextPageParam: nextPage, enabled: open,
+    });
+    const groups = query.data?.pages.flatMap((page) => page.data) ?? [];
+    const setNext = (change) => dispatch({ type: 'update', change, maxCount: maxActionCount });
+    function beginGroupSelection() {
+        const session = selectionSession.current;
+        setPendingGroupSelections((count) => count + 1);
+        return {
+            apply(change) {
+                if (selectionSession.current === session)
+                    setNext(change);
+            },
+            finish() {
+                if (selectionSession.current === session)
+                    setPendingGroupSelections((count) => count - 1);
+            },
+        };
+    }
+    function handleOpenChange(nextOpen) {
+        if (!nextOpen) {
+            selectionSession.current += 1;
+            setPendingGroupSelections(0);
+        }
+        onOpenChange(nextOpen);
+    }
+    return _jsxs(AgentSelectionDialog, { open: open, onOpenChange: handleOpenChange, title: 'Choose Actions', description: 'Choose a whole Action group or expand it to choose individual Actions.', search: search, searchPlaceholder: 'Search actions...', onSearchChange: setSearch, selectedCount: draft.ids.length, saveDisabled: pendingGroupSelections > 0, onSave: () => { onChange(draft.ids); handleOpenChange(false); }, children: [draft.error ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: draft.error }) : null, query.isPending ? _jsx("p", { role: 'status', children: "Loading Action groups..." }) : null, query.isError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: "Could not load Actions." }) : null, groups.map((group) => _jsx(ActionGroupRow, { userId: userId, group: group, selectedIds: draft.ids, selectedItems: selectedItems, onChange: setNext, beginGroupSelection: beginGroupSelection }, group.supplier?.id ?? 'unassigned')), !query.isPending && groups.length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "No Action groups found." }) : null, query.hasNextPage ? _jsx(Button, { type: 'button', variant: 'outline', size: 'sm', disabled: query.isFetchingNextPage, onClick: () => void query.fetchNextPage(), children: "Load more Action groups" }) : null] });
+}
+function ActionGroupRow({ group, userId, selectedIds, selectedItems, onChange, beginGroupSelection }) {
+    const { client: { actions: { listGroupActions } } } = useAgentEditorHost();
+    const [open, setOpen] = useState(false);
+    const groupId = group.supplier?.id ?? 'unassigned';
+    const query = useQuery({
+        queryKey: actionGroupQueryKey(userId, groupId, ''),
+        queryFn: ({ signal }) => allGroupActions(listGroupActions, group, signal),
+        enabled: open,
+    });
+    const actions = query.data ?? [];
+    const selectable = actions.filter((action) => action.selectable && action.status === 'active');
+    const selectedInGroup = selectable.filter((action) => selectedIds.includes(action.id)).length;
+    const allSelected = selectable.length > 0 && selectedInGroup === selectable.length;
+    const knownSelectedCount = selectedItems.filter((item) => item && selectedIds.includes(item.id)
+        && (item.supplier?.id ?? 'unassigned') === groupId)
+        .length;
+    const displaySelectedCount = query.data ? selectedInGroup : knownSelectedCount;
+    async function toggleGroup() {
+        const selection = beginGroupSelection();
+        setOpen(true);
+        try {
+            const available = query.data ?? (await query.refetch()).data;
+            if (!available)
+                return;
+            const eligible = available.filter((action) => action.selectable && action.status === 'active');
+            const groupIds = new Set(eligible.map((action) => action.id));
+            selection.apply((ids) => {
+                const selectedAll = eligible.length > 0 && eligible.every((action) => ids.includes(action.id));
+                return selectedAll ? ids.filter((id) => !groupIds.has(id))
+                    : [...ids, ...eligible.map((action) => action.id).filter((id) => !ids.includes(id))];
+            });
+        }
+        finally {
+            selection.finish();
+        }
+    }
+    return _jsxs(Collapsible, { open: open, onOpenChange: setOpen, className: 'rounded-lg border border-border', children: [_jsxs("div", { className: 'flex min-h-14 items-center gap-3 px-3', children: [_jsx(Checkbox, { checked: allSelected, disabled: query.isFetching, onCheckedChange: () => { void toggleGroup(); }, "aria-label": `Select all ${group.supplier?.name ?? 'Other'} Actions` }), group.supplier?.iconUrl ? _jsx("img", { src: group.supplier.iconUrl, alt: '', className: 'size-6 object-contain' }) : null, _jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { type: 'button', variant: 'ghost', className: 'min-w-0 flex-1 justify-between text-left', children: [_jsxs("span", { className: 'truncate', children: [group.supplier?.name ?? 'Other Actions', " ", _jsxs("span", { className: 'text-xs text-muted-foreground', children: ["(", group.actionCount, ")"] }), displaySelectedCount > 0 ? _jsxs("span", { className: 'ml-2 text-xs text-muted-foreground', children: [displaySelectedCount, " selected"] }) : null] }), _jsx(ChevronDown, { "aria-hidden": 'true', className: 'size-4' })] }) })] }), _jsxs(CollapsibleContent, { className: 'space-y-2 border-t border-border p-3', children: [query.isPending ? _jsx("p", { role: 'status', className: 'text-sm', children: "Loading Actions..." }) : null, query.isError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: "Could not load this group." }) : null, actions.map((action) => _jsx(AgentSelectableRow, { checked: selectedIds.includes(action.id), onCheckedChange: (checked) => onChange((ids) => checked
+                            ? (ids.includes(action.id) ? [...ids] : [...ids, action.id])
+                            : ids.filter((id) => id !== action.id)), name: action.name, description: action.description, disabled: !action.selectable || action.status !== 'active', badge: !action.selectable ? 'Not available to this account' : action.status === 'deprecated' ? 'Deprecated' : undefined }, action.id))] })] });
+}

package/dist/agent-config-editor/src/agent-component-selector.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentCatalogKind } from '../../agent-contracts/src/component.js';
+export declare function AgentComponentSelector({ userId, kind, selectedIds, onChange, maxCount, readOnly }: {
+    userId: string;
+    kind: ComponentCatalogKind;
+    selectedIds: readonly string[];
+    onChange: (ids: string[]) => void;
+    maxCount: number;
+    readOnly?: boolean;
+}): import("react").JSX.Element;

package/dist/agent-config-editor/src/agent-component-selector.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDeferredValue, useState } from 'react';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { Button } from '@springbrand/site-block';
+import { ArrowDown, ArrowUp, X } from 'lucide-react';
+import { componentCatalogQueryKey } from './client/index.js';
+import { useAgentEditorHost } from './host.js';
+import { AgentResourceSection } from './agent-resource-section.js';
+import { AgentSelectableRow, AgentSelectionDialog } from './agent-selection-dialog.js';
+import { useSelectionDialogOpen } from './use-selection-dialog-open.js';
+export function AgentComponentSelector({ userId, kind, selectedIds, onChange, maxCount, readOnly = false }) {
+    const { client: { components: { listComponents } } } = useAgentEditorHost();
+    const title = kind === 'connector' ? 'Component Connectors' : 'Extensions';
+    const itemLabel = kind === 'connector' ? 'Connector' : 'Extension';
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [draftIds, setDraftIds] = useState([]);
+    const q = useDeferredValue(search);
+    useSelectionDialogOpen(open, () => setDraftIds([...selectedIds]));
+    const query = useInfiniteQuery({
+        queryKey: componentCatalogQueryKey(userId, kind, q),
+        queryFn: ({ pageParam, signal }) => listComponents({ kind, q, page: pageParam, pageSize: 50 }, signal),
+        initialPageParam: 1,
+        getNextPageParam: (last) => last.page * last.pageSize < last.total ? last.page + 1 : undefined,
+    });
+    const components = query.data?.pages.flatMap((page) => page.data) ?? [];
+    function move(index, offset) {
+        const ids = [...selectedIds];
+        const target = index + offset;
+        if (target < 0 || target >= ids.length)
+            return;
+        [ids[index], ids[target]] = [ids[target], ids[index]];
+        onChange(ids);
+    }
+    return _jsxs(_Fragment, { children: [_jsx(AgentResourceSection, { title: title, count: selectedIds.length, onAdd: readOnly ? undefined : () => setOpen(true), children: selectedIds.length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "None selected." }) :
+                    _jsx("ul", { "aria-label": `Selected ${title} in priority order`, className: 'space-y-2', children: selectedIds.map((id, index) => _jsxs("li", { className: 'flex items-center gap-2 rounded-lg border border-border px-3 py-2', children: [_jsx("span", { className: 'min-w-0 flex-1 truncate text-sm', children: components.find((component) => component.id === id)?.name ?? id }), _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnly || index === 0, "aria-label": `Move ${itemLabel} ${index + 1} up`, onClick: () => move(index, -1), children: _jsx(ArrowUp, { "aria-hidden": 'true' }) }), _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnly || index === selectedIds.length - 1, "aria-label": `Move ${itemLabel} ${index + 1} down`, onClick: () => move(index, 1), children: _jsx(ArrowDown, { "aria-hidden": 'true' }) }), _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnly, "aria-label": `Remove ${id} from Agent`, onClick: () => onChange(selectedIds.filter((item) => item !== id)), children: _jsx(X, { "aria-hidden": 'true' }) })] }, id)) }) }), _jsxs(AgentSelectionDialog, { open: open && !readOnly, onOpenChange: setOpen, title: `Choose ${title}`, description: `Choose platform ${title}. Selected capabilities are available to new messages in this order.`, search: search, searchPlaceholder: `Search ${title.toLowerCase()}...`, onSearchChange: setSearch, selectedCount: draftIds.length, onSave: () => { onChange(draftIds); setOpen(false); }, children: [query.isPending ? _jsxs("p", { role: 'status', children: ["Loading ", title, "..."] }) : null, query.isError ? _jsxs("p", { role: 'alert', className: 'text-sm text-destructive', children: ["Could not load ", title, "."] }) : null, components.map((component) => _jsx(AgentSelectableRow, { checked: draftIds.includes(component.id), name: component.name, description: component.description, onCheckedChange: (checked) => setDraftIds((ids) => checked
+                            ? ids.includes(component.id) ? ids : [...ids, component.id]
+                            : ids.filter((id) => id !== component.id)), disabled: (!component.selectable && !draftIds.includes(component.id))
+                            || (draftIds.length >= maxCount && !draftIds.includes(component.id)), badge: !component.selectable ? component.status === 'deprecated'
+                            ? 'No longer available for new selections' : 'Not available for selection' : undefined }, component.id)), !query.isPending && components.length === 0 ? _jsxs("p", { className: 'text-sm text-muted-foreground', children: ["No ", title, " found."] }) : null, query.hasNextPage ? _jsxs(Button, { type: 'button', variant: 'outline', size: 'sm', disabled: query.isFetchingNextPage, onClick: () => void query.fetchNextPage(), children: ["Load more ", title] }) : null] })] });
+}

package/dist/agent-config-editor/src/agent-connector-selector.d.ts

@@ -0,0 +1,12 @@
+import type { useConnectorAuthorization } from './use-connector-authorization.js';
+export declare function AgentConnectorIcon({ icon }: {
+    icon: string | null | undefined;
+}): import("react").JSX.Element;
+export declare function AgentConnectorSelector({ open, onOpenChange, authorization, selectedIds, onChange, maxCount, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    authorization: Pick<ReturnType<typeof useConnectorAuthorization>, 'connections' | 'groups' | 'authorize' | 'connect'>;
+    selectedIds: readonly string[];
+    onChange: (ids: string[]) => void;
+    maxCount: number;
+}): import("react").JSX.Element;

package/dist/agent-config-editor/src/agent-connector-selector.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAgentEditorHost } from './host.js';
+import { useState } from 'react';
+import { Button } from '@springbrand/site-block';
+import { Plug } from 'lucide-react';
+import { AgentSelectableRow, AgentSelectionDialog } from './agent-selection-dialog.js';
+import { useSelectionDialogOpen } from './use-selection-dialog-open.js';
+export function AgentConnectorIcon({ icon }) {
+    return icon ? _jsx("img", { src: icon, alt: '', className: 'size-5 shrink-0 object-contain' })
+        : _jsx(Plug, { "aria-hidden": 'true', className: 'size-5 shrink-0 text-muted-foreground' });
+}
+export function AgentConnectorSelector({ open, onOpenChange, authorization, selectedIds, onChange, maxCount, }) {
+    const { connectorReturnTo } = useAgentEditorHost();
+    const [search, setSearch] = useState('');
+    const [draftIds, setDraftIds] = useState([]);
+    useSelectionDialogOpen(open, () => setDraftIds([...selectedIds]));
+    const { connections, groups, authorize, connect } = authorization;
+    const visible = groups.filter((group) => `${group.name} ${group.description}`.toLowerCase().includes(search.trim().toLowerCase()));
+    return _jsxs(AgentSelectionDialog, { open: open, onOpenChange: onOpenChange, title: 'Choose Connectors', description: 'Choose preferred apps for this Agent. Other available apps remain usable. Connect your account when required.', search: search, searchPlaceholder: 'Search connectors...', onSearchChange: setSearch, selectedCount: draftIds.length, onSave: () => { onChange(draftIds); onOpenChange(false); }, children: [connections.isPending ? _jsx("p", { role: 'status', children: "Loading connectors..." }) : null, connections.isError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: "Could not load connectors." }) : null, authorize.isError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: "Could not start connection." }) : null, visible.map((group) => {
+                const connected = group.status === 'connected' || group.connections.some((account) => account.status === 'active');
+                const ready = group.credentialSource !== 'user_connection';
+                const reconnectConnectionId = group.connections.find((account) => account.status === 'reconnect_required')?.id;
+                return _jsx(AgentSelectableRow, { checked: draftIds.includes(group.toolkitId), onCheckedChange: (checked) => setDraftIds((ids) => checked
+                        ? (ids.includes(group.toolkitId) ? ids : [...ids, group.toolkitId])
+                        : ids.filter((id) => id !== group.toolkitId)), name: group.name, description: group.description, leading: _jsx(AgentConnectorIcon, { icon: group.icon }), badge: connected ? 'Connected' : ready ? 'Ready' : undefined, disabled: draftIds.length >= maxCount && !draftIds.includes(group.toolkitId), trailing: !connected && !ready ? _jsx(Button, { type: 'button', variant: 'outline', size: 'sm', disabled: authorize.isPending, onClick: () => void connect({ toolkitId: group.toolkitId, ...(reconnectConnectionId ? { reconnectConnectionId } : {}) }, connectorReturnTo), children: reconnectConnectionId ? 'Reconnect' : 'Connect' }) : null }, group.toolkitId);
+            }), !connections.isPending && visible.length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "No connectors found." }) : null, connections.hasNextPage ? _jsx(Button, { type: 'button', variant: 'outline', size: 'sm', disabled: connections.isFetchingNextPage, onClick: () => void connections.fetchNextPage(), children: "Load more connectors" }) : null] });
+}

package/dist/agent-config-editor/src/agent-deletion-feedback.d.ts

@@ -0,0 +1,7 @@
+import { type AgentConfigDeletionCheck } from '../../agent-contracts/src/agent.js';
+export type AgentDeletionFeedback = {
+    message: string;
+    manageScheduledTasks: boolean;
+};
+export declare function deletionBlockerFeedback(check: AgentConfigDeletionCheck | null): AgentDeletionFeedback | null;
+export declare function deletionErrorFeedback(error: unknown): AgentDeletionFeedback;

package/dist/agent-config-editor/src/agent-deletion-feedback.js

@@ -0,0 +1,55 @@
+import { agentConfigDeletionBlockerKinds, agentConfigDeletionCheckSchema, } from '../../agent-contracts/src/agent.js';
+import { ApiError } from '@springbrand/http';
+import { errorDefinitions } from '@springbrand/contracts/errors';
+const blockerCode = {
+    active_chat: 'AGENT_CONFIG_ACTIVE_CHAT',
+    unfinished_run: 'AGENT_CONFIG_ACTIVE_SCHEDULE_RUN',
+    enabled_schedule: 'AGENT_CONFIG_ENABLED_SCHEDULE',
+};
+function feedbackForCode(code) {
+    return {
+        message: errorDefinitions[code].message,
+        manageScheduledTasks: code !== 'AGENT_CONFIG_ACTIVE_CHAT',
+    };
+}
+export function deletionBlockerFeedback(check) {
+    if (!check || check.allowed)
+        return null;
+    const blockers = agentConfigDeletionBlockerKinds(check);
+    if (blockers.length === 0)
+        return null;
+    return {
+        message: blockers.map((kind) => errorDefinitions[blockerCode[kind]].message).join('. '),
+        manageScheduledTasks: blockers.some((kind) => kind !== 'active_chat'),
+    };
+}
+export function deletionErrorFeedback(error) {
+    if (error instanceof ApiError) {
+        if (error.status === 401)
+            return {
+                message: 'Sign in to delete this Agent.',
+                manageScheduledTasks: false,
+            };
+        if (error.status === 403 || error.status === 404)
+            return {
+                message: 'This Agent is unavailable or you do not have permission to delete it.',
+                manageScheduledTasks: false,
+            };
+        if (error.code === 'AGENT_CONFIG_ACTIVE_CHAT' ||
+            error.code === 'AGENT_CONFIG_ACTIVE_SCHEDULE_RUN' ||
+            error.code === 'AGENT_CONFIG_ENABLED_SCHEDULE') {
+            const details = agentConfigDeletionCheckSchema.safeParse(error.details);
+            if (details.success && !details.data.allowed &&
+                agentConfigDeletionBlockerKinds(details.data).some((kind) => blockerCode[kind] === error.code)) {
+                return deletionBlockerFeedback(details.data) ?? feedbackForCode(error.code);
+            }
+            return feedbackForCode(error.code);
+        }
+        if (error.status === 409)
+            return {
+                message: 'This Agent changed or is already being deleted. Try again.',
+                manageScheduledTasks: false,
+            };
+    }
+    return { message: 'Could not check or delete this Agent. Please try again.', manageScheduledTasks: false };
+}

package/dist/agent-config-editor/src/agent-draft.d.ts

@@ -0,0 +1,10 @@
+import { type AgentConfigInput, type CreateUserAgentConfigInput, type UpdateUserAgentConfigInput, type UserAgentConfig } from '../../agent-contracts/src/agent.js';
+export type AgentDraft = {
+    name: string;
+    description: string;
+    setting: AgentConfigInput;
+};
+export declare function agentDraftEqual(left: AgentDraft, right: AgentDraft): boolean;
+export declare function draftFromAgent(agent: UserAgentConfig): AgentDraft;
+export declare function createInputFromDraft(draft: AgentDraft, slug: string): CreateUserAgentConfigInput;
+export declare function updateInputFromDraft(draft: AgentDraft, revision: number): UpdateUserAgentConfigInput;

package/dist/agent-config-editor/src/agent-draft.js

@@ -0,0 +1,28 @@
+import { createUserAgentConfigInputSchema, updateUserAgentConfigInputSchema, } from '../../agent-contracts/src/agent.js';
+import { equalJson } from '../../utils/src/index.js';
+export function agentDraftEqual(left, right) {
+    return equalJson(left, right);
+}
+export function draftFromAgent(agent) {
+    return {
+        name: agent.name,
+        description: agent.description ?? '',
+        setting: agent.setting,
+    };
+}
+export function createInputFromDraft(draft, slug) {
+    return createUserAgentConfigInputSchema.parse({
+        slug,
+        name: draft.name.trim(),
+        description: draft.description.trim() || null,
+        setting: draft.setting,
+    });
+}
+export function updateInputFromDraft(draft, revision) {
+    return updateUserAgentConfigInputSchema.parse({
+        revision,
+        name: draft.name.trim(),
+        description: draft.description.trim() || null,
+        setting: draft.setting,
+    });
+}

package/dist/agent-config-editor/src/agent-editor.d.ts

@@ -0,0 +1,30 @@
+import { type ModelPresetAccess } from '../../agent-contracts/src/model.js';
+import { type UserAgentConfig } from '../../agent-contracts/src/agent.js';
+import type { AgentDeletionFeedback } from './agent-deletion-feedback.js';
+import type { AgentDraft } from './agent-draft.js';
+type AgentEditorCommonProps = {
+    userId: string;
+    draft: AgentDraft;
+    models: readonly ModelPresetAccess[];
+    modelsLoading: boolean;
+    modelsError: boolean;
+    saving: boolean;
+    error: string | null;
+    readOnly?: boolean;
+    onDraftChange: (update: (current: AgentDraft) => AgentDraft) => void;
+    onSave: () => void;
+    onBack: () => void;
+};
+export type AgentEditorProps = AgentEditorCommonProps & ({
+    mode: 'create';
+} | {
+    mode: 'edit';
+    agent: UserAgentConfig;
+    dirty: boolean;
+    checkingDelete: boolean;
+    deleteBlocker: AgentDeletionFeedback | null;
+    deleteCheckError: string | null;
+    onDelete: () => void;
+});
+export declare function AgentEditor(props: AgentEditorProps): import("react").JSX.Element;
+export {};

package/dist/agent-config-editor/src/agent-editor.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useQueries, useQuery } from '@tanstack/react-query';
+import { Alert, AlertDescription, Badge, Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Field, FieldLabel, Input, NativeSelect, NativeSelectOption, Textarea, } from '@springbrand/site-block';
+import { THINKING_LEVELS, modelSelectionFromPresetId } from '../../agent-contracts/src/model.js';
+import { AGENT_CONFIG_SELECTION_LIMIT } from '../../agent-contracts/src/agent.js';
+import { ATTACHMENT_MAX_COUNT } from '../../utils/src/index.js';
+import { selectedConnectorToolkitIds } from '../../agent-contracts/src/mcp.js';
+import { ChevronDown, ChevronLeft, CircleCheck, Trash2, X } from 'lucide-react';
+import { useAgentEditorHost } from './host.js';
+import { skillQueryKeys } from './client/index.js';
+import { useConnectorAuthorization } from './use-connector-authorization.js';
+import { AgentResourceSection } from './agent-resource-section.js';
+import { AgentSkillSelector, AgentReferenceSelector } from './agent-library-selectors.js';
+import { AgentActionSelector } from './agent-action-selector.js';
+import { AgentComponentSelector } from './agent-component-selector.js';
+import { AgentConnectorIcon, AgentConnectorSelector } from './agent-connector-selector.js';
+import { ReferenceManagementDialog } from './reference-management-dialog.js';
+import { ReferenceFileIcon, ReferencePreviewDialog } from './agent-reference-files.js';
+import { SkillsManagementPage } from './skills-management-page.js';
+export function AgentEditor(props) {
+    const host = useAgentEditorHost();
+    const { skills: { listSelectedSkills }, actions: { getAction }, references: { getReference } } = host.client;
+    const { userId, draft, models, modelsLoading, modelsError, saving, error, onDraftChange, onSave, onBack } = props;
+    const { mode } = props;
+    const readOnly = props.readOnly ?? false;
+    const readOnlySelections = readOnly || (mode === 'edit' && props.agent.is_default);
+    const deleteBlocker = mode === 'edit' ? props.deleteBlocker : null;
+    const deleteCheckError = mode === 'edit' ? props.deleteCheckError : null;
+    const [promptOpen, setPromptOpen] = useState(false);
+    const [promptText, setPromptText] = useState('');
+    const [skillAddOpen, setSkillAddOpen] = useState(false);
+    const [skillManageOpen, setSkillManageOpen] = useState(false);
+    const [referenceAddOpen, setReferenceAddOpen] = useState(false);
+    const [referenceManageOpen, setReferenceManageOpen] = useState(false);
+    const [connectorAddOpen, setConnectorAddOpen] = useState(false);
+    const [actionAddOpen, setActionAddOpen] = useState(false);
+    const [preview, setPreview] = useState(null);
+    const updateSetting = (update) => onDraftChange((current) => ({ ...current, setting: update(current.setting) }));
+    const selectedModel = draft.setting.presetId
+        ?? models.find(({ providerModel }) => providerModel === draft.setting.model)?.id
+        ?? '';
+    const connectorIds = selectedConnectorToolkitIds(draft.setting.mcpServers);
+    const componentSelectionCount = draft.setting.connectorIds.length + draft.setting.extensionIds.length;
+    const maxConnectorCount = AGENT_CONFIG_SELECTION_LIMIT - draft.setting.skillIds.length
+        - draft.setting.actionIds.length - (draft.setting.mcpServers.length - connectorIds.length) - componentSelectionCount;
+    const maxSkillCount = AGENT_CONFIG_SELECTION_LIMIT - draft.setting.mcpServers.length
+        - draft.setting.actionIds.length - componentSelectionCount;
+    const skills = useQuery({
+        queryKey: skillQueryKeys.selected(userId, draft.setting.skillIds),
+        queryFn: ({ signal }) => listSelectedSkills(draft.setting.skillIds, signal),
+        enabled: draft.setting.skillIds.length > 0,
+    });
+    const actions = useQueries({ queries: draft.setting.actionIds.map((id) => ({
+            queryKey: ['actions', 'detail', id], queryFn: ({ signal }) => getAction(id, signal),
+        })) });
+    const references = useQueries({ queries: (draft.setting.referenceFileIds ?? []).map((id) => ({
+            queryKey: ['user-references', 'detail', id], queryFn: ({ signal }) => getReference(id, signal),
+        })) });
+    const connectorAuthorization = useConnectorAuthorization(userId, host.client.connectors, host.onConnectorEvent);
+    const { connections } = connectorAuthorization;
+    useEffect(() => {
+        if (connections.hasNextPage && !connections.isFetching && !connections.isFetchNextPageError) {
+            void connections.fetchNextPage();
+        }
+    }, [connections.hasNextPage, connections.isFetching, connections.isFetchNextPageError, connections.fetchNextPage]);
+    function setConnectorIds(ids) {
+        updateSetting((setting) => ({
+            ...setting,
+            mcpServers: [
+                ...setting.mcpServers.filter((selection) => !('kind' in selection)),
+                ...ids.map((serverId) => ({ serverId, kind: 'connector_toolkit' })),
+            ],
+        }));
+    }
+    return _jsxs("main", { className: 'flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto bg-background', children: [_jsxs("form", { className: 'flex min-h-full flex-col', onSubmit: (event) => { event.preventDefault(); if (!readOnly && !saving)
+                    onSave(); }, children: [_jsxs("fieldset", { disabled: saving, className: 'mx-auto w-full min-w-0 max-w-3xl flex-1 space-y-4 border-0 px-4 pt-5 pb-12 md:px-8 md:pt-8', children: [_jsxs("header", { className: 'mb-5 space-y-2', children: [_jsxs(Button, { type: 'button', variant: 'ghost', size: 'sm', className: '-ml-2 md:hidden', onClick: onBack, children: [_jsx(ChevronLeft, { "aria-hidden": 'true' }), " Agents"] }), _jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [_jsx("h1", { className: 'text-2xl font-semibold tracking-tight', children: mode === 'create' ? 'New Agent' : 'Settings' }), mode === 'edit' && props.agent.is_default ? _jsx(Badge, { variant: 'secondary', children: "Default" }) : null] }), _jsx("p", { className: 'text-sm text-muted-foreground', children: mode === 'create'
+                                            ? 'Choose how this Agent should work.'
+                                            : 'Changes to references affect new Chats. Existing Chats keep their files.' })] }), _jsxs(AgentResourceSection, { title: 'Behavior', children: [_jsxs("div", { className: 'grid gap-4 sm:grid-cols-2', children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: 'agent-name', children: "Name" }), _jsx(Input, { id: 'agent-name', disabled: readOnlySelections, required: true, maxLength: 200, value: draft.name, onChange: (event) => onDraftChange((current) => ({ ...current, name: event.target.value })) })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: 'agent-description', children: "Description" }), _jsx(Input, { id: 'agent-description', disabled: readOnlySelections, maxLength: 2000, value: draft.description, onChange: (event) => onDraftChange((current) => ({ ...current, description: event.target.value })) })] })] }), _jsxs("div", { className: 'space-y-2', children: [_jsx("span", { className: 'text-sm font-medium', children: "System prompt" }), _jsxs("button", { type: 'button', className: 'block min-h-24 w-full rounded-lg border border-border bg-muted/20 p-3 text-left text-sm hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring', onClick: () => { setPromptText(draft.setting.systemPrompt ?? ''); setPromptOpen(true); }, children: [_jsx("span", { className: 'line-clamp-3 whitespace-pre-wrap break-words text-muted-foreground', children: draft.setting.systemPrompt || 'Add instructions for the Agent...' }), _jsx("span", { className: 'mt-2 block text-xs text-muted-foreground', children: "Click to view and edit the full prompt" })] })] })] }), _jsxs(AgentResourceSection, { title: 'Model', children: [_jsxs("div", { className: 'grid gap-4 sm:grid-cols-2', children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: 'agent-model', children: "Model" }), _jsxs(NativeSelect, { id: 'agent-model', value: selectedModel, disabled: readOnly || modelsLoading || modelsError, onChange: (event) => {
+                                                            const presetId = event.target.value;
+                                                            updateSetting((setting) => {
+                                                                if (!presetId)
+                                                                    return { ...setting, presetId: null, model: null };
+                                                                const selection = modelSelectionFromPresetId(presetId);
+                                                                return { ...setting, presetId: selection.presetId, model: selection.model, thinking: selection.thinking };
+                                                            });
+                                                        }, children: [_jsx(NativeSelectOption, { value: '', children: "Platform default" }), models.map((model) => _jsxs(NativeSelectOption, { value: model.id, disabled: !model.available, children: [model.name, model.available ? '' : ` (requires ${model.requiredPlan})`] }, model.id))] })] }), _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: 'agent-thinking', children: "Thinking" }), _jsx(NativeSelect, { id: 'agent-thinking', value: draft.setting.thinking, disabled: readOnly, onChange: (event) => updateSetting((setting) => ({ ...setting,
+                                                            thinking: event.target.value,
+                                                        })), children: THINKING_LEVELS.map((level) => _jsx(NativeSelectOption, { value: level, children: level }, level)) })] })] }), modelsError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: "Could not load models." }) : null] }), _jsx(AgentResourceSection, { title: 'Connectors', count: connectorIds.length, onAdd: readOnlySelections ? undefined : () => setConnectorAddOpen(true), children: connectorIds.length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "None selected." }) :
+                                    _jsx("ul", { className: 'space-y-2', children: connectorIds.map((id) => {
+                                            const connector = connectorAuthorization.groups.find((item) => item.toolkitId === id);
+                                            const connected = connector?.status === 'connected' || connector?.connections.some((account) => account.status === 'active');
+                                            return _jsxs("li", { className: 'flex items-center gap-3 rounded-lg border border-border px-3 py-2', children: [_jsx(AgentConnectorIcon, { icon: connector?.icon }), _jsx("span", { className: 'min-w-0 flex-1 truncate text-sm', children: connector?.name ?? id }), connected ? _jsx(CircleCheck, { "aria-label": 'Connected', className: 'size-4 text-green-600' }) : null, _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnlySelections, "aria-label": `Remove ${connector?.name ?? id} from Agent`, onClick: () => setConnectorIds(connectorIds.filter((item) => item !== id)), children: _jsx(X, { "aria-hidden": 'true' }) })] }, id);
+                                        }) }) }), _jsx(AgentComponentSelector, { readOnly: readOnlySelections, userId: userId, kind: 'connector', selectedIds: draft.setting.connectorIds, onChange: (connectorIds) => updateSetting((setting) => ({ ...setting, connectorIds })), maxCount: AGENT_CONFIG_SELECTION_LIMIT - draft.setting.skillIds.length - draft.setting.actionIds.length
+                                    - draft.setting.mcpServers.length - draft.setting.extensionIds.length }), _jsx(AgentComponentSelector, { readOnly: readOnlySelections, userId: userId, kind: 'extension', selectedIds: draft.setting.extensionIds, onChange: (extensionIds) => updateSetting((setting) => ({ ...setting, extensionIds })), maxCount: AGENT_CONFIG_SELECTION_LIMIT - draft.setting.skillIds.length - draft.setting.actionIds.length
+                                    - draft.setting.mcpServers.length - draft.setting.connectorIds.length }), _jsx(AgentResourceSection, { title: 'Actions', count: draft.setting.actionIds.length, onAdd: readOnlySelections ? undefined : () => setActionAddOpen(true), children: _jsx(SelectedActions, { readOnly: readOnlySelections, ids: draft.setting.actionIds, items: actions.map((query) => query.data), onChange: (actionIds) => updateSetting((setting) => ({ ...setting, actionIds })) }) }), _jsx(AgentResourceSection, { title: 'Skills', count: draft.setting.skillIds.length, onAdd: readOnlySelections ? undefined : () => setSkillAddOpen(true), onManage: readOnly ? undefined : () => setSkillManageOpen(true), children: draft.setting.skillIds.length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "None selected." }) :
+                                    _jsx("ul", { className: 'space-y-2', children: draft.setting.skillIds.map((id) => {
+                                            const skill = skills.data?.data.find((item) => item.id === id);
+                                            return _jsxs("li", { className: 'flex items-center gap-2 rounded-lg border border-border px-3 py-2', children: [_jsx("span", { className: 'min-w-0 flex-1 truncate text-sm', children: skill?.name ?? id }), skill?.deleted ? _jsx(Badge, { variant: 'secondary', children: "Deleted" }) : null, skill ? _jsx(Badge, { variant: 'outline', children: skill.origin === 'upload' ? 'My Skill' : 'Platform' }) : null, _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnlySelections, "aria-label": `Remove ${skill?.name ?? id} from Agent`, onClick: () => updateSetting((setting) => ({ ...setting, skillIds: setting.skillIds.filter((item) => item !== id) })), children: _jsx(X, { "aria-hidden": 'true' }) })] }, id);
+                                        }) }) }), _jsx(AgentResourceSection, { title: 'References', count: draft.setting.referenceFileIds?.length ?? 0, onAdd: readOnly ? undefined : () => setReferenceAddOpen(true), onManage: readOnly ? undefined : () => setReferenceManageOpen(true), children: (draft.setting.referenceFileIds ?? []).length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "No references selected." }) :
+                                    _jsx("ul", { className: 'space-y-2', children: (draft.setting.referenceFileIds ?? []).map((id, index) => {
+                                            const reference = references[index]?.data;
+                                            return _jsxs("li", { className: 'flex items-center gap-2 rounded-lg border border-border px-3 py-2', children: [_jsx(ReferenceFileIcon, { file: reference ?? null }), _jsx("button", { type: 'button', className: 'min-w-0 flex-1 truncate text-left text-sm hover:underline focus-visible:ring-2 focus-visible:ring-ring', disabled: !reference, onClick: () => { if (reference)
+                                                            setPreview(reference); }, children: reference?.name ?? id }), _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnly, "aria-label": `Remove ${reference?.name ?? id} from Agent`, onClick: () => updateSetting((setting) => ({ ...setting,
+                                                            referenceFileIds: (setting.referenceFileIds ?? []).filter((item) => item !== id),
+                                                        })), children: _jsx(X, { "aria-hidden": 'true' }) })] }, id);
+                                        }) }) }), deleteBlocker ? _jsx(Alert, { variant: 'destructive', role: 'alert', children: _jsxs(AlertDescription, { children: [deleteBlocker.message, deleteBlocker.manageScheduledTasks ? _jsxs(_Fragment, { children: [" ", host.scheduledTasksLink] }) : null] }) }) : null, deleteCheckError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: deleteCheckError }) : null] }), !readOnly ? _jsx("div", { className: 'sticky bottom-0 z-10 border-t border-border bg-background px-4 py-3 pb-[calc(env(safe-area-inset-bottom)+0.75rem)] md:px-8', children: _jsxs("div", { className: 'mx-auto flex w-full max-w-3xl flex-wrap items-center gap-3', children: [_jsx(Button, { type: 'submit', disabled: saving || (mode === 'edit' ? !props.dirty : !draft.name.trim()), loading: saving, children: mode === 'create' ? saving ? 'Creating…' : 'Create Agent' : 'Save changes' }), mode === 'create' ? _jsx(Button, { type: 'button', variant: 'outline', disabled: saving, onClick: onBack, children: "Cancel" })
+                                    : !props.agent.is_default ? _jsxs(Button, { type: 'button', variant: 'outline', disabled: props.checkingDelete || saving, loading: props.checkingDelete, onClick: props.onDelete, children: [_jsx(Trash2, { "aria-hidden": 'true' }), " Delete Agent"] }) : null, mode === 'edit' && props.dirty ? _jsx("span", { className: 'text-xs text-muted-foreground', children: "Unsaved changes" }) : null, error ? _jsx(Alert, { variant: 'destructive', role: 'alert', className: 'w-full', children: _jsx(AlertDescription, { children: error }) }) : null] }) }) : null] }), _jsx(Dialog, { open: promptOpen, onOpenChange: setPromptOpen, children: _jsxs(DialogContent, { className: 'flex max-h-[calc(100dvh-2rem)] min-h-0 flex-col sm:max-w-3xl', children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "System prompt" }), _jsx(DialogDescription, { children: "These instructions guide this Agent's behavior." })] }), _jsx(Textarea, { "aria-label": 'Full system prompt', rows: 18, maxLength: 50_000, value: promptText, readOnly: readOnly, className: 'min-h-0 flex-1 resize-none overflow-y-auto', onChange: (event) => setPromptText(event.target.value) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: 'button', variant: 'outline', onClick: () => setPromptOpen(false), children: "Cancel" }), !readOnly ? _jsx(Button, { type: 'button', onClick: () => { updateSetting((setting) => ({ ...setting, systemPrompt: promptText || null })); setPromptOpen(false); }, children: "Done" }) : null] })] }) }), _jsx(AgentConnectorSelector, { open: connectorAddOpen, onOpenChange: setConnectorAddOpen, authorization: connectorAuthorization, selectedIds: connectorIds, onChange: setConnectorIds, maxCount: maxConnectorCount }), _jsx(AgentActionSelector, { open: actionAddOpen, onOpenChange: setActionAddOpen, userId: userId, selectedIds: draft.setting.actionIds, selectedItems: actions.map((query) => query.data), onChange: (actionIds) => updateSetting((setting) => ({ ...setting, actionIds })), maxActionCount: AGENT_CONFIG_SELECTION_LIMIT - draft.setting.skillIds.length - draft.setting.mcpServers.length - componentSelectionCount }), _jsx(AgentSkillSelector, { open: skillAddOpen, onOpenChange: setSkillAddOpen, userId: userId, selectedIds: draft.setting.skillIds, onChange: (skillIds) => updateSetting((setting) => ({ ...setting, skillIds })), maxCount: maxSkillCount }), _jsx(AgentReferenceSelector, { open: referenceAddOpen, onOpenChange: setReferenceAddOpen, userId: userId, selectedIds: draft.setting.referenceFileIds ?? [], onChange: (referenceFileIds) => updateSetting((setting) => ({ ...setting, referenceFileIds })), maxCount: ATTACHMENT_MAX_COUNT }), _jsx(Dialog, { open: skillManageOpen, onOpenChange: setSkillManageOpen, children: _jsxs(DialogContent, { className: 'flex max-h-[calc(100dvh-2rem-env(safe-area-inset-top)-env(safe-area-inset-bottom))] min-h-0 flex-col overflow-hidden sm:max-w-3xl', children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Manage Skills" }), _jsx(DialogDescription, { children: "Upload, preview, or delete your Skills." })] }), skillManageOpen ? _jsx(SkillsManagementPage, { userId: userId, embedded: true }) : null] }) }), _jsx(ReferenceManagementDialog, { open: referenceManageOpen, onOpenChange: setReferenceManageOpen, userId: userId, selectedIds: draft.setting.referenceFileIds ?? [] }), _jsx(ReferencePreviewDialog, { file: preview, onOpenChange: (open) => { if (!open)
+                    setPreview(null); } })] });
+}
+function SelectedActions({ ids, items, onChange, readOnly }) {
+    if (ids.length === 0)
+        return _jsx("p", { className: 'text-sm text-muted-foreground', children: "None selected." });
+    const groups = new Map();
+    ids.forEach((id, index) => {
+        const item = items[index];
+        const key = item?.supplier?.id ?? 'other';
+        const group = groups.get(key) ?? {
+            name: item?.supplier?.name ?? 'Other Actions', iconUrl: item?.supplier?.iconUrl ?? null, actions: [],
+        };
+        group.actions.push({ id, name: item?.name ?? id });
+        groups.set(key, group);
+    });
+    return _jsx("div", { className: 'space-y-2', children: [...groups.entries()].map(([key, group]) => _jsxs(Collapsible, { defaultOpen: true, className: 'rounded-lg border border-border', children: [_jsxs("div", { className: 'flex items-center gap-2 px-2', children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { type: 'button', variant: 'ghost', className: 'min-w-0 flex-1 justify-start gap-2', children: [group.iconUrl ? _jsx("img", { src: group.iconUrl, alt: '', className: 'size-6 shrink-0 object-contain' }) : null, group.name, " ", _jsx("span", { className: 'text-xs text-muted-foreground', children: group.actions.length }), _jsx(ChevronDown, { "aria-hidden": 'true', className: 'size-4' })] }) }), _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnly, "aria-label": `Remove all ${group.name} from Agent`, onClick: () => { const groupIds = new Set(group.actions.map((action) => action.id)); onChange(ids.filter((id) => !groupIds.has(id))); }, children: _jsx(X, { "aria-hidden": 'true' }) })] }), _jsx(CollapsibleContent, { className: 'space-y-1 border-t border-border p-2', children: group.actions.map((action) => _jsxs("div", { className: 'flex items-center gap-2 rounded-md px-2 py-1', children: [_jsx("span", { className: 'min-w-0 flex-1 truncate text-sm', children: action.name }), _jsx(Button, { type: 'button', variant: 'ghost', size: 'icon-sm', disabled: readOnly, "aria-label": `Remove ${action.name} from Agent`, onClick: () => onChange(ids.filter((id) => id !== action.id)), children: _jsx(X, { "aria-hidden": 'true' }) })] }, action.id)) })] }, key)) });
+}

package/dist/agent-config-editor/src/agent-library-selectors.d.ts

@@ -0,0 +1,16 @@
+export declare function AgentSkillSelector({ open, onOpenChange, userId, selectedIds, onChange, maxCount, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    userId: string;
+    selectedIds: readonly string[];
+    onChange: (ids: string[]) => void;
+    maxCount: number;
+}): import("react").JSX.Element;
+export declare function AgentReferenceSelector({ open, onOpenChange, userId, selectedIds, onChange, maxCount, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    userId: string;
+    selectedIds: readonly string[];
+    onChange: (ids: string[]) => void;
+    maxCount: number;
+}): import("react").JSX.Element;

package/dist/agent-config-editor/src/agent-library-selectors.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDeferredValue, useState } from 'react';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { Button } from '@springbrand/site-block';
+import { skillQueryKeys, userReferenceQueryKeys } from './client/index.js';
+import { useAgentEditorHost } from './host.js';
+import { AgentSelectableRow, AgentSelectionDialog } from './agent-selection-dialog.js';
+import { ReferenceFileIcon, ReferencePreviewDialog } from './agent-reference-files.js';
+import { useSelectionDialogOpen } from './use-selection-dialog-open.js';
+function nextPage(last) {
+    return last.page * last.pageSize < last.total ? last.page + 1 : undefined;
+}
+function toggle(ids, id, checked) {
+    return checked ? (ids.includes(id) ? [...ids] : [...ids, id]) : ids.filter((item) => item !== id);
+}
+export function AgentSkillSelector({ open, onOpenChange, userId, selectedIds, onChange, maxCount, }) {
+    const { client: { skills: { listSkills } } } = useAgentEditorHost();
+    const [search, setSearch] = useState('');
+    const q = useDeferredValue(search);
+    const [draftIds, setDraftIds] = useState([]);
+    useSelectionDialogOpen(open, () => setDraftIds([...selectedIds]));
+    const query = useInfiniteQuery({
+        queryKey: skillQueryKeys.collection(userId, 'selectable', q),
+        queryFn: ({ pageParam, signal }) => listSkills({ view: 'selectable', q, page: pageParam, pageSize: 50 }, signal),
+        initialPageParam: 1, getNextPageParam: nextPage, enabled: open,
+    });
+    const skills = query.data?.pages.flatMap((page) => page.data) ?? [];
+    return _jsxs(AgentSelectionDialog, { open: open, onOpenChange: onOpenChange, title: 'Choose Skills', description: 'Choose platform Skills or Skills you uploaded. Manage your uploaded Skills separately.', search: search, searchPlaceholder: 'Search skills...', onSearchChange: setSearch, selectedCount: draftIds.length, onSave: () => { onChange(draftIds); onOpenChange(false); }, children: [query.isPending ? _jsx("p", { role: 'status', children: "Loading Skills..." }) : null, query.isError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: "Could not load Skills." }) : null, skills.map((skill) => _jsx(AgentSelectableRow, { checked: draftIds.includes(skill.id), onCheckedChange: (checked) => setDraftIds((ids) => toggle(ids, skill.id, checked)), name: skill.name, description: skill.description, badge: skill.origin === 'upload' ? 'My Skill' : 'Platform', disabled: !skill.available || (draftIds.length >= maxCount && !draftIds.includes(skill.id)) }, skill.id)), !query.isPending && skills.length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "No Skills found." }) : null, query.hasNextPage ? _jsx(Button, { type: 'button', variant: 'outline', size: 'sm', disabled: query.isFetchingNextPage, onClick: () => void query.fetchNextPage(), children: "Load more Skills" }) : null] });
+}
+export function AgentReferenceSelector({ open, onOpenChange, userId, selectedIds, onChange, maxCount, }) {
+    const { client: { references: { listReferences } } } = useAgentEditorHost();
+    const [search, setSearch] = useState('');
+    const q = useDeferredValue(search);
+    const [draftIds, setDraftIds] = useState([]);
+    const [preview, setPreview] = useState(null);
+    useSelectionDialogOpen(open, () => setDraftIds([...selectedIds]));
+    const query = useInfiniteQuery({
+        queryKey: userReferenceQueryKeys.collection(userId, q),
+        queryFn: ({ pageParam, signal }) => listReferences({ q, page: pageParam, pageSize: 50 }, signal),
+        initialPageParam: 1, getNextPageParam: nextPage, enabled: open,
+    });
+    const references = query.data?.pages.flatMap((page) => page.data) ?? [];
+    return _jsxs(_Fragment, { children: [_jsxs(AgentSelectionDialog, { open: open, onOpenChange: onOpenChange, title: 'Choose References', description: 'Choose files already in your reference library. Files are copied into new Chats when they start.', search: search, searchPlaceholder: 'Search references...', onSearchChange: setSearch, selectedCount: draftIds.length, onSave: () => { onChange(draftIds); onOpenChange(false); }, children: [query.isPending ? _jsx("p", { role: 'status', children: "Loading references..." }) : null, query.isError ? _jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: "Could not load references." }) : null, references.map((reference) => _jsx(AgentSelectableRow, { checked: draftIds.includes(reference.id), onCheckedChange: (checked) => setDraftIds((ids) => toggle(ids, reference.id, checked)), name: reference.name, description: reference.mediaType, badge: reference.status === 'disabled' ? 'Disabled' : undefined, leading: _jsx(ReferenceFileIcon, { file: reference }), disabled: reference.status !== 'active' || (draftIds.length >= maxCount && !draftIds.includes(reference.id)), trailing: _jsx(Button, { type: 'button', variant: 'ghost', size: 'sm', onClick: () => setPreview(reference), children: "Preview" }) }, reference.id)), !query.isPending && references.length === 0 ? _jsx("p", { className: 'text-sm text-muted-foreground', children: "No references found." }) : null, query.hasNextPage ? _jsx(Button, { type: 'button', variant: 'outline', size: 'sm', disabled: query.isFetchingNextPage, onClick: () => void query.fetchNextPage(), children: "Load more references" }) : null] }), _jsx(ReferencePreviewDialog, { file: preview, onOpenChange: (next) => { if (!next)
+                    setPreview(null); } })] });
+}