botmux 2.107.0 → 2.108.0

package/dist/dashboard/web/skills-page.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { botAvatarHtml, loadingHtml } from './ui.js';
+import { createPortal } from 'react-dom';
+import { FieldTitle, Html, LoadingState, RefreshIconButton, SectionHeader } from './dashboard-components.js';
+import { botAvatarHtml } from './ui.js';
 import { useT } from './react-hooks.js';
 import { mountReactPage } from './react-mount.js';
 const INSTALLED_SKILLS_ROWS_PER_PAGE = 2;
-function Html(props) {
-    const Tag = props.as ?? 'span';
-    return _jsx(Tag, { style: { display: 'contents' }, dangerouslySetInnerHTML: { __html: props.html } });
-}
 function nativeLibraryLabel(path, tr) {
     const p = String(path ?? '').replace(/\\/g, '/');
     if (p.includes('/.codex/skills/'))
@@ -76,6 +74,10 @@ async function jsonRequest(url, init) {
 function statusClass(status) {
     return `oncall-status${status ? ` ${status.ok ? 'hint-ok' : 'hint-warn-inline'}` : ''}`;
 }
+function SkillSegmented(props) {
+    const current = props.options.find(option => option.value === props.value);
+    return (_jsxs("div", { className: "skills-segmented-control", children: [_jsx("div", { className: "segmented skills-segmented", role: "group", children: props.options.map(option => (_jsx("button", { type: "button", className: props.value === option.value ? 'active' : '', "aria-pressed": props.value === option.value ? 'true' : 'false', title: typeof option.help === 'string' ? option.help : undefined, disabled: props.disabled, onClick: () => props.onChange(option.value), children: option.label }, option.value))) }), current?.help ? _jsx("span", { className: "skills-setting-hint", children: current.help }) : null] }));
+}
 export function SkillsInstallPanel(props) {
     const tr = useT();
     const selectionDialogRef = useRef(null);
@@ -97,14 +99,13 @@ export function SkillsInstallPanel(props) {
             dialog.close();
         }
     }, [props.installSelectionOpen, candidates.length]);
-    return (_jsxs("article", { className: "bd-card skills-install-panel", children: [_jsxs("div", { className: "skills-install-title", children: [_jsx("h3", { className: "bd-section-title", children: tr('skills.install') }), _jsxs("span", { className: "skills-help-tip", children: [_jsx("button", { type: "button", className: "help-icon-button skills-help-button", "aria-label": tr('skills.installInfoLabel'), children: "?" }), _jsx("span", { className: "skills-help-popover", role: "tooltip", children: tr('skills.installInfo') })] })] }), _jsxs("div", { className: "skills-install-grid", children: [_jsxs("label", { className: "skills-source-label", children: [_jsx("span", { children: tr('skills.source') }), _jsx("div", { className: "skills-source-control", children: _jsx("input", { type: "text", "data-install": "source", "aria-label": tr('skills.source'), placeholder: tr('skills.sourcePlaceholder'), value: props.installSource, onChange: e => props.onInstallSourceChange(e.currentTarget.value) }) })] }), _jsxs("div", { className: "bd-section-note skills-install-note", children: [_jsxs("span", { children: [_jsx("strong", { children: tr('skills.sourceHelpRemoteLabel') }), tr('skills.sourceHelpRemote')] }), _jsxs("span", { children: [_jsx("strong", { children: tr('skills.sourceHelpLocalLabel') }), tr('skills.sourceHelpLocal')] })] }), _jsxs("div", { className: "skills-install-action-row", children: [_jsxs("details", { className: "skills-advanced-options", "data-skills-advanced": true, open: false, children: [_jsxs("summary", { children: [_jsx("span", { className: "skills-advanced-marker", "aria-hidden": "true" }), _jsx("span", { children: tr('skills.advanced') })] }), _jsxs("div", { className: "skills-advanced-fields", children: [_jsxs("label", { className: "skills-install-field-wide", children: [_jsx("span", { children: tr('skills.path') }), _jsx("input", { type: "text", "data-install": "path", placeholder: tr('skills.pathPlaceholder'), value: props.installPath, onChange: e => props.onInstallPathChange(e.currentTarget.value) })] }), _jsxs("label", { className: "skills-install-field-wide", children: [_jsx("span", { children: tr('skills.ref') }), _jsx("input", { type: "text", "data-install": "ref", placeholder: tr('skills.refPlaceholder'), value: props.installRef, onChange: e => props.onInstallRefChange(e.currentTarget.value) })] })] })] }), _jsx("div", { className: "skills-install-actions", children: _jsx("button", { type: "button", className: "primary", "data-action": "install", disabled: busy, onClick: () => props.onInstall(), children: props.installDiscovering ? tr('skills.scanning') : props.installBusy ? tr('skills.jobRunning') : tr('skills.installSubmit') }) })] }), _jsxs("div", { className: "skills-local-discovery-panel", children: [_jsxs("div", { children: [_jsx("strong", { children: tr('skills.localDiscoverTitle') }), _jsx("span", { children: tr('skills.localDiscoverHelp') })] }), _jsx("button", { type: "button", "data-action": "open-native-skill-discovery", onClick: () => props.onOpenNativeDiscovery(), children: tr('skills.localDiscover') })] })] }), _jsx("div", { className: "actions", children: _jsx("span", { className: statusClass(props.installStatus), "data-skills-status": true, children: props.installStatus?.text ?? '' }) }), _jsx("dialog", { className: "skills-discovery-dialog skills-install-selection-dialog", "data-install-selection-dialog": true, ref: selectionDialogRef, onClose: () => props.onCloseInstallSelection?.(), children: _jsxs("article", { children: [_jsxs("header", { children: [_jsx("h3", { children: tr('skills.installSelectionTitle') }), _jsx("p", { children: tr('skills.installSelectionHelp', { count: candidates.length }) })] }), _jsx("div", { className: "skills-discovery-body skills-install-selection-body", children: _jsxs("div", { className: "skills-candidate-list", "data-install-candidates": true, children: [_jsxs("div", { className: "skills-candidate-list-head", children: [_jsx("span", { children: tr('skills.scanFound', { count: candidates.length }) }), props.onSelectAllInstallSkills ? (_jsx("button", { type: "button", "data-action": "toggle-all-source-skills", disabled: props.installBusy, onClick: () => props.onSelectAllInstallSkills?.(!allSelected), children: allSelected ? tr('skills.discoverClearSelection') : tr('skills.discoverSelectAll') })) : null] }), candidates.map(candidate => (_jsxs("label", { className: "skills-candidate-row", children: [_jsx("input", { type: "checkbox", checked: selectedInstallSkills.has(candidate.name), disabled: props.installBusy, onChange: () => props.onToggleInstallSkill?.(candidate.name) }), _jsxs("span", { children: [_jsx("strong", { children: candidate.name }), _jsxs("small", { children: [candidate.path, candidate.description ? ` · ${candidate.description}` : ''] })] })] }, `${candidate.name}:${candidate.path}`)))] }) }), _jsxs("footer", { className: "actions", children: [_jsx("button", { type: "button", "data-action": "close-install-selection", disabled: props.installBusy, onClick: () => props.onCloseInstallSelection?.(), children: tr('skills.installSelectionCancel') }), _jsx("button", { type: "button", className: "primary", "data-action": "confirm-install-selection", disabled: props.installBusy || selectedInstallSkills.size === 0, onClick: () => props.onConfirmInstallSelection?.(), children: props.installBusy ? tr('skills.jobRunning') : tr('skills.installSelected') })] })] }) })] }));
+    return (_jsxs("article", { className: "bd-card skills-install-panel", children: [props.showTitle === false ? null : _jsx("div", { className: "skills-install-title", children: _jsx("h3", { className: "bd-section-title", children: _jsx(FieldTitle, { help: tr('skills.installInfo'), helpLabel: tr('skills.installInfoLabel'), children: tr('skills.install') }) }) }), _jsxs("div", { className: "skills-install-grid", children: [_jsxs("label", { className: "skills-source-label", children: [_jsx(FieldTitle, { help: (_jsxs("span", { className: "skills-source-help", children: [_jsxs("span", { children: [_jsx("strong", { children: tr('skills.sourceHelpRemoteLabel') }), tr('skills.sourceHelpRemote')] }), _jsxs("span", { children: [_jsx("strong", { children: tr('skills.sourceHelpLocalLabel') }), tr('skills.sourceHelpLocal')] }), _jsxs("span", { children: [_jsx("strong", { children: tr('skills.sourceHelpAgentbuddyLabel') }), tr('skills.sourceHelpAgentbuddy')] })] })), helpLabel: tr('skills.source'), children: tr('skills.source') }), _jsx("div", { className: "skills-source-control", children: _jsx("input", { type: "text", "data-install": "source", "aria-label": tr('skills.source'), placeholder: tr('skills.sourcePlaceholder'), value: props.installSource, onChange: e => props.onInstallSourceChange(e.currentTarget.value) }) })] }), _jsxs("label", { className: "skills-install-field-wide skills-install-path-field", children: [_jsx("span", { children: tr('skills.path') }), _jsx("input", { type: "text", "data-install": "path", placeholder: tr('skills.pathPlaceholder'), value: props.installPath, onChange: e => props.onInstallPathChange(e.currentTarget.value) })] }), _jsxs("label", { className: "skills-install-field-wide skills-install-ref-field", children: [_jsx("span", { children: tr('skills.ref') }), _jsx("input", { type: "text", "data-install": "ref", placeholder: tr('skills.refPlaceholder'), value: props.installRef, onChange: e => props.onInstallRefChange(e.currentTarget.value) })] }), _jsx("div", { className: "skills-install-actions", children: _jsx("button", { type: "button", "data-action": "install", disabled: busy, onClick: () => props.onInstall(), children: props.installDiscovering ? tr('skills.scanning') : props.installBusy ? tr('skills.jobRunning') : tr('skills.installSubmit') }) }), _jsx("div", { className: "skills-install-bottom-row", children: _jsxs("div", { className: "skills-local-discovery-panel", children: [_jsxs("div", { children: [_jsx("strong", { children: tr('skills.localDiscoverTitle') }), _jsx("span", { children: tr('skills.localDiscoverHelp') })] }), _jsx("button", { type: "button", "data-action": "open-native-skill-discovery", onClick: () => props.onOpenNativeDiscovery(), children: tr('skills.localDiscover') })] }) })] }), props.installStatus ? (_jsx("div", { className: "actions skills-install-status-row", children: _jsx("span", { className: statusClass(props.installStatus), "data-skills-status": true, children: props.installStatus.text }) })) : null, _jsx("dialog", { className: "skills-discovery-dialog skills-install-selection-dialog", "data-install-selection-dialog": true, ref: selectionDialogRef, onClose: () => props.onCloseInstallSelection?.(), children: _jsxs("article", { children: [_jsxs("header", { children: [_jsx("h3", { children: tr('skills.installSelectionTitle') }), _jsx("p", { children: tr('skills.installSelectionHelp', { count: candidates.length }) })] }), _jsx("div", { className: "skills-discovery-body skills-install-selection-body", children: _jsxs("div", { className: "skills-candidate-list", "data-install-candidates": true, children: [_jsxs("div", { className: "skills-candidate-list-head", children: [_jsx("span", { children: tr('skills.scanFound', { count: candidates.length }) }), props.onSelectAllInstallSkills ? (_jsx("button", { type: "button", "data-action": "toggle-all-source-skills", disabled: props.installBusy, onClick: () => props.onSelectAllInstallSkills?.(!allSelected), children: allSelected ? tr('skills.discoverClearSelection') : tr('skills.discoverSelectAll') })) : null] }), candidates.map(candidate => (_jsxs("label", { className: "skills-candidate-row", children: [_jsx("input", { type: "checkbox", checked: selectedInstallSkills.has(candidate.name), disabled: props.installBusy, onChange: () => props.onToggleInstallSkill?.(candidate.name) }), _jsxs("span", { children: [_jsx("strong", { children: candidate.name }), _jsxs("small", { children: [candidate.path, candidate.description ? ` · ${candidate.description}` : ''] })] })] }, `${candidate.name}:${candidate.path}`)))] }) }), _jsxs("footer", { className: "actions", children: [_jsx("button", { type: "button", "data-action": "close-install-selection", disabled: props.installBusy, onClick: () => props.onCloseInstallSelection?.(), children: tr('skills.installSelectionCancel') }), _jsx("button", { type: "button", className: "primary", "data-action": "confirm-install-selection", disabled: props.installBusy || selectedInstallSkills.size === 0, onClick: () => props.onConfirmInstallSelection?.(), children: props.installBusy ? tr('skills.jobRunning') : tr('skills.installSelected') })] })] }) })] }));
 }
 function SkillsPage() {
     const tr = useT();
     const mountedRef = useRef(true);
     const timersRef = useRef(new Set());
     const discoveryDialogRef = useRef(null);
-    const botGridRef = useRef(null);
     const [skills, setSkills] = useState([]);
     const [nativeSkillGroups, setNativeSkillGroups] = useState([]);
     const [bots, setBots] = useState([]);
@@ -304,17 +305,39 @@ function SkillsPage() {
                 body: JSON.stringify(sourceRequestBody()),
             });
             if (!mountedRef.current)
-                return [];
+                return { skills: [], directInstall: false };
+            const directInstall = body.discovery?.directInstall === true;
             const skills = Array.isArray(body.discovery?.skills) ? body.discovery.skills : [];
             setInstallCandidates(skills);
             setSelectedInstallSkills(new Set(skills.map(skill => skill.name)));
-            return skills;
+            return { skills, directInstall };
         }
         finally {
             if (mountedRef.current)
                 setInstallDiscovering(false);
         }
     }
+    // Translate the backend's terse install error codes into actionable messages.
+    // agentbuddy runs on the deploy host, so its failures (missing CLI, not logged
+    // in) need host-side guidance the operator can act on. Non-agentbuddy codes
+    // fall through unchanged.
+    function mapInstallError(raw) {
+        const msg = raw || '';
+        if (msg.startsWith('agentbuddy_not_found'))
+            return tr('skills.agentbuddyNotFound');
+        if (msg.startsWith('agentbuddy_command_failed')) {
+            return /login|credential|unauthor|not logged|401|403/i.test(msg)
+                ? tr('skills.agentbuddyNeedsLogin')
+                : tr('skills.agentbuddyCommandFailed');
+        }
+        if (msg.startsWith('agentbuddy_clear_telemetry_failed') || msg.startsWith('agentbuddy_telemetry_not_stripped'))
+            return tr('skills.agentbuddyTelemetryFailed');
+        if (msg.startsWith('agentbuddy_no_skill_produced'))
+            return tr('skills.agentbuddyNoSkill');
+        if (msg.startsWith('invalid_agentbuddy'))
+            return tr('skills.agentbuddyInvalid');
+        return msg;
+    }
     async function submitSkillInstall(skillNames) {
         setInstallBusy(true);
         try {
@@ -330,7 +353,7 @@ function SkillsPage() {
         }
         catch (err) {
             if (mountedRef.current)
-                setInstallStatus({ text: `${tr('skills.failed')}: ${err?.message ?? err}`, ok: false });
+                setInstallStatus({ text: `${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`, ok: false });
         }
         finally {
             if (mountedRef.current)
@@ -357,9 +380,17 @@ function SkillsPage() {
         }
         try {
             setInstallSelectionOpen(false);
-            const skills = await discoverInstallCandidates();
+            const { skills, directInstall } = await discoverInstallCandidates();
             if (!mountedRef.current)
                 return;
+            // agentbuddy sources — a pasted `agentbuddy:<id>` OR a marketplace URL the
+            // backend recognized — resolve their own skill set, so install directly
+            // (no candidate selection). The server decides this so the client needn't
+            // know the identifier prefix or the configured marketplace hosts.
+            if (directInstall) {
+                await submitSkillInstall();
+                return;
+            }
             if (skills.length === 0) {
                 setInstallStatus({ text: tr('skills.scanEmpty'), ok: false });
                 return;
@@ -373,7 +404,7 @@ function SkillsPage() {
         }
         catch (err) {
             if (mountedRef.current)
-                setInstallStatus({ text: `${tr('skills.failed')}: ${err?.message ?? err}`, ok: false });
+                setInstallStatus({ text: `${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`, ok: false });
         }
     }
     async function confirmInstallSelection() {
@@ -406,7 +437,7 @@ function SkillsPage() {
         }
         catch (err) {
             if (mountedRef.current)
-                setInstallStatus({ text: `${tr('skills.failed')}: ${err?.message ?? err}`, ok: false });
+                setInstallStatus({ text: `${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`, ok: false });
         }
         finally {
             if (mountedRef.current)
@@ -428,7 +459,7 @@ function SkillsPage() {
         }
         catch (err) {
             if (mountedRef.current)
-                window.alert(`${tr('skills.failed')}: ${err?.message ?? err}`);
+                window.alert(`${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`);
         }
         finally {
             if (mountedRef.current)
@@ -450,22 +481,13 @@ function SkillsPage() {
         }
         catch (err) {
             if (mountedRef.current)
-                window.alert(`${tr('skills.failed')}: ${err?.message ?? err}`);
+                window.alert(`${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`);
         }
         finally {
             if (mountedRef.current)
                 setGlobalBusy(null);
         }
     }
-    function scrollBots(dir) {
-        const grid = botGridRef.current;
-        const card = grid?.querySelector('.skills-bot-card');
-        if (!grid || !card)
-            return;
-        const style = window.getComputedStyle(grid);
-        const gap = Number.parseFloat(style.columnGap || style.gap || '0') || 0;
-        grid.scrollBy({ left: dir * (card.getBoundingClientRect().width + gap), behavior: 'smooth' });
-    }
     async function updateSkill(name) {
         setSkillBusy(`${name}:update`);
         try {
@@ -476,7 +498,7 @@ function SkillsPage() {
         }
         catch (err) {
             if (mountedRef.current)
-                window.alert(`${tr('skills.failed')}: ${err?.message ?? err}`);
+                window.alert(`${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`);
         }
         finally {
             if (mountedRef.current)
@@ -519,33 +541,41 @@ function SkillsPage() {
                     return;
                 }
             }
-            window.alert(`${tr('skills.failed')}: ${err?.message ?? err}`);
+            window.alert(`${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`);
         }
         finally {
             if (mountedRef.current)
                 setSkillBusy(null);
         }
     }
-    async function updateBotSkill(appId, action, name) {
-        const busyKey = `${appId}:${action}:${name}`;
+    async function setBotSkills(appId, names) {
+        const busyKey = `${appId}:set`;
         setBotBusy(busyKey);
         setBotStatuses(statuses => ({ ...statuses, [appId]: null }));
         try {
             const body = await jsonRequest(`/api/bots/${encodeURIComponent(appId)}/skills`, {
                 method: 'PUT',
-                body: JSON.stringify({ action, name }),
+                body: JSON.stringify({
+                    action: 'set',
+                    policy: names.length > 0 ? { include: names.map(name => `skill:${name}`) } : null,
+                }),
             });
             if (!mountedRef.current)
                 return;
             setBots(rows => rows.map(bot => bot.larkAppId === appId ? { ...bot, skills: body.skills ?? null } : bot));
+            setBotStatuses(statuses => ({
+                ...statuses,
+                [appId]: { text: tr('skills.policySaved'), ok: true },
+            }));
         }
         catch (err) {
             if (mountedRef.current) {
                 setBotStatuses(statuses => ({
                     ...statuses,
-                    [appId]: { text: `${tr('skills.failed')}: ${err?.message ?? err}`, ok: false },
+                    [appId]: { text: `${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`, ok: false },
                 }));
             }
+            throw err;
         }
         finally {
             if (mountedRef.current)
@@ -554,80 +584,192 @@ function SkillsPage() {
     }
     const configuredBotCount = bots.filter(bot => policyConfigured(bot.skills)).length;
     const attachedSkillRefCount = bots.reduce((sum, bot) => sum + policyReferenceCount(bot.skills), 0);
-    const body = loading
-        ? _jsx(Html, { html: loadingHtml(), as: "div" })
-        : loadError
-            ? _jsx("p", { className: "hint-warn", children: loadError })
-            : (_jsxs("div", { className: "skills-page-grid", children: [_jsxs("aside", { className: "skills-side-rail", children: [_jsxs("article", { className: "bd-card skills-defaults-panel", children: [_jsx("h3", { className: "bd-section-title", children: tr('skills.globalDefaults') }), _jsxs("div", { className: "skills-control-block", children: [_jsx("span", { className: "skills-control-label", children: tr('skills.globalProject') }), _jsx("div", { className: "skills-choice-group skills-choice-group-compact skills-project-group", children: [
-                                                    ['off', tr('skills.globalProjectOff'), tr('skills.globalProjectOffHelp')],
-                                                    ['all', tr('skills.globalProjectAll'), tr('skills.globalProjectAllHelp')],
-                                                ].map(([value, label, help]) => (_jsxs("button", { type: "button", className: `skills-choice${trustProjectSkills === value ? ' selected' : ''}`, "data-global-project-value": value, "aria-pressed": trustProjectSkills === value ? 'true' : 'false', disabled: globalBusy === 'project', onClick: () => void updateGlobalProject(value), children: [_jsx("strong", { children: label }), _jsx("small", { children: help })] }, value))) })] }), _jsxs("div", { className: "skills-control-block", children: [_jsx("span", { className: "skills-control-label", children: tr('skills.globalDelivery') }), _jsx("div", { className: "skills-choice-group skills-delivery-group", children: [
-                                                    ['auto', tr('skills.deliveryAuto'), tr('skills.deliveryAutoHelp')],
-                                                    ['prompt', tr('skills.deliveryPrompt'), tr('skills.deliveryPromptHelp')],
-                                                    ['native', tr('skills.deliveryNative'), tr('skills.deliveryNativeHelp')],
-                                                ].map(([value, label, help]) => (_jsxs("button", { type: "button", className: `skills-choice${delivery === value ? ' selected' : ''}`, "data-global-delivery-value": value, "aria-pressed": delivery === value ? 'true' : 'false', disabled: globalBusy === 'delivery', onClick: () => void updateGlobalDelivery(value), children: [_jsx("strong", { children: label }), _jsx("small", { children: help })] }, value))) })] })] }), _jsx(SkillsInstallPanel, { installSource: installSource, installPath: installPath, installRef: installRef, installStatus: installStatus, installBusy: installBusy, installDiscovering: installDiscovering, installSelectionOpen: installSelectionOpen, installCandidates: installCandidates, selectedInstallSkills: selectedInstallSkills, onInstallSourceChange: (value) => {
-                                    setInstallSource(value);
-                                    clearInstallDiscovery();
-                                }, onInstallPathChange: (value) => {
-                                    setInstallPath(value);
-                                    clearInstallDiscovery();
-                                }, onInstallRefChange: (value) => {
-                                    setInstallRef(value);
-                                    clearInstallDiscovery();
-                                }, onToggleInstallSkill: toggleInstallCandidate, onSelectAllInstallSkills: selectAllInstallCandidates, onConfirmInstallSelection: () => void confirmInstallSelection(), onCloseInstallSelection: () => setInstallSelectionOpen(false), onInstall: () => void installSkill(), onOpenNativeDiscovery: () => setDiscoveryOpen(true) })] }), _jsxs("section", { className: "skills-main-panel", children: [_jsxs("section", { className: "skills-overview", children: [_jsxs("div", { className: "skills-overview-copy", children: [_jsx("h2", { children: tr('skills.overviewTitle') }), _jsx("p", { children: tr('skills.overviewBody') })] }), _jsxs("div", { className: "skills-metric-strip", children: [_jsxs("span", { children: [_jsx("small", { children: tr('skills.metricInstalled') }), _jsx("strong", { children: skills.length })] }), _jsxs("span", { children: [_jsx("small", { children: tr('skills.metricBots') }), _jsxs("strong", { children: [configuredBotCount, "/", bots.length] })] }), _jsxs("span", { children: [_jsx("small", { children: tr('skills.metricAttached') }), _jsx("strong", { children: attachedSkillRefCount })] })] })] }), _jsxs("section", { className: "skills-bots-panel", children: [_jsxs("div", { className: "skills-section-head skills-section-head-row", children: [_jsxs("div", { children: [_jsx("h2", { children: tr('skills.bots') }), _jsx("p", { children: tr('skills.botsHelp') })] }), bots.length > 3 ? (_jsxs("div", { className: "skills-bot-rail-actions", children: [_jsx("button", { type: "button", className: "skills-rail-button", "data-action": "scroll-bots", "data-dir": "-1", "aria-label": tr('skills.scrollBotsPrev'), title: tr('skills.scrollBotsPrev'), onClick: () => scrollBots(-1), children: "\u2039" }), _jsx("span", { className: "skills-count-pill", children: tr('skills.botCount', { count: bots.length }) }), _jsx("button", { type: "button", className: "skills-rail-button", "data-action": "scroll-bots", "data-dir": "1", "aria-label": tr('skills.scrollBotsNext'), title: tr('skills.scrollBotsNext'), onClick: () => scrollBots(1), children: "\u203A" })] })) : _jsx("span", { className: "skills-count-pill", children: tr('skills.botCount', { count: bots.length }) })] }), _jsx("div", { className: "skills-bot-grid", ref: botGridRef, children: bots.map(bot => (_jsx(BotPolicyCard, { bot: bot, installedNames: installedNames, skills: skills, status: botStatuses[bot.larkAppId] ?? null, busyKey: botBusy, onUpdate: updateBotSkill }, bot.larkAppId))) })] }), _jsxs("section", { className: "bd-card skills-installed-panel", children: [_jsxs("div", { className: "skills-section-head skills-section-head-row", children: [_jsxs("div", { children: [_jsx("h2", { children: tr('skills.installed') }), _jsx("p", { children: tr('skills.installedHelp') })] }), installedPageCount <= 1 ? (_jsx("span", { className: "skills-count-pill", children: tr('skills.skillCount', { count: skills.length }) })) : (_jsxs("div", { className: "skills-installed-toolbar", children: [_jsx("span", { className: "skills-count-pill", children: tr('skills.skillCount', { count: skills.length }) }), _jsxs("div", { className: "skills-pager", children: [_jsx("button", { type: "button", className: "skills-pager-button", "data-action": "page-installed-skills", "data-dir": "-1", "aria-label": tr('skills.prevPage'), title: tr('skills.prevPage'), disabled: installedSkillsPage === 0, onClick: () => setInstalledSkillsPage(page => Math.max(0, page - 1)), children: "\u2039" }), _jsx("span", { children: tr('skills.pageStatus', { page: installedSkillsPage + 1, pages: installedPageCount }) }), _jsx("button", { type: "button", className: "skills-pager-button", "data-action": "page-installed-skills", "data-dir": "1", "aria-label": tr('skills.nextPage'), title: tr('skills.nextPage'), disabled: installedSkillsPage >= installedPageCount - 1, onClick: () => setInstalledSkillsPage(page => Math.min(installedPageCount - 1, page + 1)), children: "\u203A" })] })] }))] }), skills.length === 0 ? _jsx("p", { className: "empty", children: tr('skills.empty') }) : (_jsx("div", { className: "skills-list", children: visibleSkills.map(skill => (_jsxs("article", { className: "skills-row skills-installed-card", "data-skill": skill.name, children: [_jsxs("div", { className: "skills-row-body", children: [_jsx("strong", { children: skill.name }), skill.description ? _jsx("p", { children: skill.description }) : null, _jsx("small", { className: "skills-source-badge", children: sourceLabel(skill, tr) })] }), _jsxs("div", { className: "skills-card-actions", children: [_jsx("button", { type: "button", "data-action": "update-skill", disabled: skillBusy === `${skill.name}:update`, onClick: () => void updateSkill(skill.name), children: tr('skills.update') }), _jsx("button", { type: "button", "data-action": "remove-skill", disabled: skillBusy === `${skill.name}:remove`, onClick: () => void removeSkill(skill.name), children: tr('skills.remove') })] })] }, skill.name))) }))] })] }), _jsx("dialog", { className: "skills-discovery-dialog", id: "skills-discovery-dialog", ref: discoveryDialogRef, onClose: () => setDiscoveryOpen(false), children: _jsxs("article", { children: [_jsxs("header", { children: [_jsx("h3", { children: tr('skills.discoverTitle') }), _jsx("p", { children: tr('skills.discoverHelp') })] }), _jsx("div", { className: "skills-discovery-body", children: !activeDiscoveryGroup ? _jsx("p", { className: "empty", children: tr('skills.discoverEmpty') }) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "skills-discovery-tabs", role: "tablist", "aria-label": tr('skills.discoverTitle'), children: nativeSkillGroups.map(group => {
+    const headingActions = (_jsxs("div", { className: "page-heading-actions skills-heading-actions", children: [_jsxs("div", { className: "skills-metric-strip", children: [_jsxs("span", { children: [_jsx("small", { children: tr('skills.metricInstalled') }), _jsx("strong", { children: skills.length })] }), _jsxs("span", { children: [_jsx("small", { children: tr('skills.metricBots') }), _jsxs("strong", { children: [configuredBotCount, "/", bots.length] })] }), _jsxs("span", { children: [_jsx("small", { children: tr('skills.metricAttached') }), _jsx("strong", { children: attachedSkillRefCount })] })] }), _jsx(RefreshIconButton, { id: "skills-refresh", label: tr('skills.refresh'), busy: loading, disabled: loading, onClick: () => void refresh() })] }));
+    const body = (_jsx("div", { className: "skills-page-stack", children: loading ? _jsx(LoadingState, { label: tr('common.loading') }) : loadError ? _jsx("p", { className: "hint-warn", children: loadError }) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "skills-config-row", children: [_jsxs("section", { className: "skills-config-block", children: [_jsx(SectionHeader, { title: tr('skills.globalDefaults') }), _jsxs("article", { className: "bd-card skills-defaults-panel skills-config-card", children: [_jsxs("div", { className: "skills-control-block", children: [_jsx("span", { className: "skills-control-label", children: tr('skills.globalProject') }), _jsx(SkillSegmented, { value: trustProjectSkills, disabled: globalBusy === 'project', options: [
+                                                        { value: 'off', label: tr('skills.globalProjectOff'), help: tr('skills.globalProjectOffHelp') },
+                                                        { value: 'all', label: tr('skills.globalProjectAll'), help: tr('skills.globalProjectAllHelp') },
+                                                    ], onChange: value => void updateGlobalProject(value) })] }), _jsxs("div", { className: "skills-control-block", children: [_jsx("span", { className: "skills-control-label", children: tr('skills.globalDelivery') }), _jsx(SkillSegmented, { value: delivery, disabled: globalBusy === 'delivery', options: [
+                                                        { value: 'auto', label: tr('skills.deliveryAuto'), help: tr('skills.deliveryAutoHelp') },
+                                                        { value: 'prompt', label: tr('skills.deliveryPrompt'), help: tr('skills.deliveryPromptHelp') },
+                                                        { value: 'native', label: tr('skills.deliveryNative'), help: tr('skills.deliveryNativeHelp') },
+                                                    ], onChange: value => void updateGlobalDelivery(value) })] })] })] }), _jsxs("section", { className: "skills-config-block", children: [_jsx(SectionHeader, { title: _jsx(FieldTitle, { help: tr('skills.installInfo'), helpLabel: tr('skills.installInfoLabel'), children: tr('skills.install') }) }), _jsx(SkillsInstallPanel, { showTitle: false, installSource: installSource, installPath: installPath, installRef: installRef, installStatus: installStatus, installBusy: installBusy, installDiscovering: installDiscovering, installSelectionOpen: installSelectionOpen, installCandidates: installCandidates, selectedInstallSkills: selectedInstallSkills, onInstallSourceChange: (value) => {
+                                        setInstallSource(value);
+                                        clearInstallDiscovery();
+                                    }, onInstallPathChange: (value) => {
+                                        setInstallPath(value);
+                                        clearInstallDiscovery();
+                                    }, onInstallRefChange: (value) => {
+                                        setInstallRef(value);
+                                        clearInstallDiscovery();
+                                    }, onToggleInstallSkill: toggleInstallCandidate, onSelectAllInstallSkills: selectAllInstallCandidates, onConfirmInstallSelection: () => void confirmInstallSelection(), onCloseInstallSelection: () => setInstallSelectionOpen(false), onInstall: () => void installSkill(), onOpenNativeDiscovery: () => setDiscoveryOpen(true) })] }), _jsxs("section", { className: "skills-config-block", children: [_jsx(SectionHeader, { title: tr('skills.bots'), count: tr('skills.botCount', { count: bots.length }), hint: tr('skills.botsHelp') }), _jsx("section", { className: "bd-card skills-bots-panel skills-config-card", children: _jsx("div", { className: "skills-bot-grid", children: bots.map(bot => (_jsx(BotPolicyCard, { bot: bot, installedNames: installedNames, skills: skills, status: botStatuses[bot.larkAppId] ?? null, busyKey: botBusy, onSave: setBotSkills }, bot.larkAppId))) }) })] })] }), _jsxs("section", { className: "skills-installed-block", children: [_jsx(SectionHeader, { title: tr('skills.installed'), count: tr('skills.skillCount', { count: skills.length }), hint: tr('skills.installedHelp'), children: installedPageCount > 1 ? (_jsx("div", { className: "skills-installed-toolbar", children: _jsxs("div", { className: "skills-pager", children: [_jsx("button", { type: "button", className: "skills-pager-button", "data-action": "page-installed-skills", "data-dir": "-1", "aria-label": tr('skills.prevPage'), title: tr('skills.prevPage'), disabled: installedSkillsPage === 0, onClick: () => setInstalledSkillsPage(page => Math.max(0, page - 1)), children: "\u2039" }), _jsx("span", { children: tr('skills.pageStatus', { page: installedSkillsPage + 1, pages: installedPageCount }) }), _jsx("button", { type: "button", className: "skills-pager-button", "data-action": "page-installed-skills", "data-dir": "1", "aria-label": tr('skills.nextPage'), title: tr('skills.nextPage'), disabled: installedSkillsPage >= installedPageCount - 1, onClick: () => setInstalledSkillsPage(page => Math.min(installedPageCount - 1, page + 1)), children: "\u203A" })] }) })) : null }), _jsx("section", { className: "bd-card skills-installed-panel", children: skills.length === 0 ? _jsx("p", { className: "empty", children: tr('skills.empty') }) : (_jsx("div", { className: "skills-list", children: visibleSkills.map(skill => (_jsxs("article", { className: "skills-row skills-installed-card", "data-skill": skill.name, children: [_jsxs("div", { className: "skills-row-body", children: [_jsx("strong", { children: skill.name }), skill.description ? _jsx("p", { children: skill.description }) : null, _jsx("small", { className: "skills-source-badge", children: sourceLabel(skill, tr) })] }), _jsxs("div", { className: "skills-card-actions", children: [_jsx("button", { type: "button", "data-action": "update-skill", disabled: skillBusy === `${skill.name}:update`, onClick: () => void updateSkill(skill.name), children: tr('skills.update') }), _jsx("button", { type: "button", "data-action": "remove-skill", disabled: skillBusy === `${skill.name}:remove`, onClick: () => void removeSkill(skill.name), children: tr('skills.remove') })] })] }, skill.name))) })) })] }), _jsx("dialog", { className: "skills-discovery-dialog", id: "skills-discovery-dialog", ref: discoveryDialogRef, onClose: () => setDiscoveryOpen(false), onClick: event => {
+                        if (event.target === event.currentTarget)
+                            setDiscoveryOpen(false);
+                    }, children: _jsxs("article", { children: [_jsxs("header", { children: [_jsx("h3", { children: tr('skills.discoverTitle') }), _jsx("p", { children: tr('skills.discoverHelp') }), _jsx("button", { type: "button", className: "skills-discovery-close", "data-action": "close-discovery", "aria-label": tr('skills.discoverClose'), title: tr('skills.discoverClose'), onClick: () => setDiscoveryOpen(false) })] }), _jsx("div", { className: "skills-discovery-body", children: !activeDiscoveryGroup ? _jsx("p", { className: "empty", children: tr('skills.discoverEmpty') }) : (_jsx(_Fragment, { children: _jsxs("div", { className: "skills-discovery-layout", children: [_jsx("div", { className: "skills-discovery-tabs", role: "tablist", "aria-label": tr('skills.discoverTitle'), children: nativeSkillGroups.map(group => {
                                                     const key = discoveryGroupKey(group);
                                                     const selected = key === activeKey;
                                                     return (_jsxs("button", { type: "button", role: "tab", "data-discovery-tab": key, className: selected ? 'selected' : '', "aria-selected": selected ? 'true' : 'false', onClick: () => setActiveDiscoveryKey(key), children: [_jsx("strong", { children: group.label ?? group.cliId }), _jsx("small", { children: tr('skills.skillCount', { count: group.skills.length }) })] }, key));
-                                                }) }), _jsx("div", { className: "skills-discovery-path", children: _jsx("code", { children: activeDiscoveryGroup.rootDir }) }), nativeSkillGroups.map(group => {
-                                                const key = discoveryGroupKey(group);
-                                                const selected = key === activeKey;
-                                                return (_jsx("section", { className: "skills-discovery-group", "data-discovery-panel": key, hidden: !selected, children: group.skills.length === 0 ? _jsx("p", { className: "empty", children: tr('skills.discoverGroupEmpty') }) : (_jsx("div", { className: "skills-discovery-list", children: group.skills.map(skill => {
-                                                            const already = installedNames.has(skill.name);
-                                                            const path = skill.rootDir ?? skill.source?.root ?? '';
-                                                            return (_jsxs("label", { className: `skills-discovery-row${already ? ' installed' : ''}`, children: [_jsx("input", { type: "checkbox", "data-discovered-skill": true, value: path, disabled: already, checked: !already && selectedDiscovered.has(path), onChange: e => {
-                                                                            const checked = e.currentTarget.checked;
-                                                                            setSelectedDiscovered(prev => {
-                                                                                const next = new Set(prev);
-                                                                                if (checked)
-                                                                                    next.add(path);
-                                                                                else
-                                                                                    next.delete(path);
-                                                                                return next;
-                                                                            });
-                                                                        } }), _jsxs("span", { children: [_jsx("strong", { children: skill.name }), skill.description ? _jsx("small", { children: skill.description }) : null] }), already ? _jsx("em", { children: tr('skills.discoverRegistered') }) : null] }, `${skill.name}:${path}`));
-                                                        }) })) }, key));
-                                            })] })) }), _jsxs("footer", { className: "actions", children: [_jsx("button", { type: "button", "data-action": "toggle-discovered-skills", disabled: activeGroupSelectable.length === 0, onClick: () => {
-                                                setSelectedDiscovered(prev => {
-                                                    const next = new Set(prev);
-                                                    if (activeAllSelected)
-                                                        activeGroupSelectable.forEach(path => next.delete(path));
-                                                    else
-                                                        activeGroupSelectable.forEach(path => next.add(path));
-                                                    return next;
-                                                });
-                                            }, children: activeAllSelected ? tr('skills.discoverClearSelection') : tr('skills.discoverSelectAll') }), _jsx("button", { type: "button", className: "primary", "data-action": "register-discovered-skills", disabled: discoveryBusy, onClick: () => void registerDiscoveredSkills(), children: tr('skills.discoverRegister') }), _jsx("button", { type: "button", "data-action": "close-discovery", onClick: () => setDiscoveryOpen(false), children: tr('skills.discoverClose') })] })] }) })] }));
-    return (_jsxs("section", { className: "page", children: [_jsxs("div", { className: "page-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.skills') }), _jsx("h1", { children: tr('skills.title') }), _jsx("p", { children: tr('skills.subtitle') })] }), _jsx("button", { type: "button", id: "skills-refresh", disabled: loading, onClick: () => void refresh(), children: tr('skills.refresh') })] }), _jsx("div", { id: "skills-body", children: body })] }));
+                                                }) }), _jsxs("div", { className: "skills-discovery-main", children: [_jsx("div", { className: "skills-discovery-path", children: _jsx("code", { children: activeDiscoveryGroup.rootDir }) }), nativeSkillGroups.map(group => {
+                                                        const key = discoveryGroupKey(group);
+                                                        const selected = key === activeKey;
+                                                        return (_jsx("section", { className: "skills-discovery-group", "data-discovery-panel": key, hidden: !selected, children: group.skills.length === 0 ? _jsx("p", { className: "empty", children: tr('skills.discoverGroupEmpty') }) : (_jsx("div", { className: "skills-discovery-list", children: group.skills.map(skill => {
+                                                                    const already = installedNames.has(skill.name);
+                                                                    const path = skill.rootDir ?? skill.source?.root ?? '';
+                                                                    return (_jsxs("label", { className: `skills-discovery-row${already ? ' installed' : ''}`, children: [_jsx("input", { type: "checkbox", "data-discovered-skill": true, value: path, disabled: already, checked: !already && selectedDiscovered.has(path), onChange: e => {
+                                                                                    const checked = e.currentTarget.checked;
+                                                                                    setSelectedDiscovered(prev => {
+                                                                                        const next = new Set(prev);
+                                                                                        if (checked)
+                                                                                            next.add(path);
+                                                                                        else
+                                                                                            next.delete(path);
+                                                                                        return next;
+                                                                                    });
+                                                                                } }), _jsxs("span", { children: [_jsx("strong", { children: skill.name }), skill.description ? _jsx("small", { children: skill.description }) : null] }), already ? _jsx("em", { children: tr('skills.discoverRegistered') }) : null] }, `${skill.name}:${path}`));
+                                                                }) })) }, key));
+                                                    })] })] }) })) }), _jsxs("footer", { className: "actions", children: [_jsx("button", { type: "button", "data-action": "toggle-discovered-skills", disabled: activeGroupSelectable.length === 0, onClick: () => {
+                                            setSelectedDiscovered(prev => {
+                                                const next = new Set(prev);
+                                                if (activeAllSelected)
+                                                    activeGroupSelectable.forEach(path => next.delete(path));
+                                                else
+                                                    activeGroupSelectable.forEach(path => next.add(path));
+                                                return next;
+                                            });
+                                        }, children: activeAllSelected ? tr('skills.discoverClearSelection') : tr('skills.discoverSelectAll') }), _jsx("button", { type: "button", className: "primary", "data-action": "register-discovered-skills", disabled: discoveryBusy, onClick: () => void registerDiscoveredSkills(), children: tr('skills.discoverRegister') })] })] }) })] })) }));
+    return (_jsxs("section", { className: "page skills-page", children: [_jsxs("div", { className: "page-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.skills') }), _jsx("h1", { children: tr('skills.title') })] }), headingActions] }), _jsx("div", { id: "skills-body", children: body })] }));
+}
+function sameSkillSelection(left, right) {
+    return left.size === right.length && right.every(name => left.has(name));
+}
+export function SkillMultiPicker(props) {
+    const tr = useT();
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const popoverRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [draft, setDraft] = useState(() => new Set(props.names));
+    const [position, setPosition] = useState(null);
+    const currentNamesKey = props.names.join('\n');
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    const options = useMemo(() => {
+        const byName = new Map(props.skills.map(skill => [skill.name, skill]));
+        for (const name of props.names) {
+            if (!byName.has(name))
+                byName.set(name, { name });
+        }
+        return [...byName.values()].sort((left, right) => left.name.localeCompare(right.name));
+    }, [props.names, props.skills]);
+    const filteredOptions = useMemo(() => {
+        if (!normalizedQuery)
+            return options;
+        return options.filter(skill => `${skill.name} ${skill.description || ''}`.toLocaleLowerCase().includes(normalizedQuery));
+    }, [normalizedQuery, options]);
+    const dirty = !sameSkillSelection(draft, props.names);
+    const updatePosition = useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger || typeof window === 'undefined')
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const edge = 12;
+        const gap = 7;
+        const width = Math.min(370, Math.max(260, window.innerWidth - edge * 2));
+        const left = Math.min(Math.max(edge, rect.left), Math.max(edge, window.innerWidth - width - edge));
+        const spaceAbove = Math.max(0, rect.top - gap - edge);
+        const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - gap - edge);
+        const placeAbove = spaceAbove > spaceBelow;
+        const available = placeAbove ? spaceAbove : spaceBelow;
+        const desired = 118 + Math.min(options.length, 5) * 42;
+        const height = Math.max(180, Math.min(desired, available));
+        setPosition({
+            left,
+            top: placeAbove ? Math.max(edge, rect.top - gap - height) : rect.bottom + gap,
+            width,
+            height,
+        });
+    }, [options.length]);
+    useEffect(() => {
+        if (!open)
+            setDraft(new Set(props.names));
+    }, [currentNamesKey, open]);
+    useEffect(() => {
+        if (!open || typeof document === 'undefined')
+            return undefined;
+        const closeOnOutsideClick = (event) => {
+            if (rootRef.current?.contains(event.target) || popoverRef.current?.contains(event.target))
+                return;
+            setOpen(false);
+            setQuery('');
+            setDraft(new Set(props.names));
+        };
+        document.addEventListener('pointerdown', closeOnOutsideClick);
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        updatePosition();
+        return () => {
+            document.removeEventListener('pointerdown', closeOnOutsideClick);
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [currentNamesKey, open, updatePosition]);
+    function openPicker() {
+        setDraft(new Set(props.names));
+        setQuery('');
+        updatePosition();
+        setOpen(true);
+    }
+    function cancel() {
+        setDraft(new Set(props.names));
+        setQuery('');
+        setOpen(false);
+    }
+    function toggle(name) {
+        setDraft(current => {
+            const next = new Set(current);
+            if (next.has(name))
+                next.delete(name);
+            else
+                next.add(name);
+            return next;
+        });
+    }
+    async function save() {
+        const names = [...draft].sort((left, right) => left.localeCompare(right));
+        try {
+            await props.onSave(names);
+            setQuery('');
+            setOpen(false);
+        }
+        catch {
+            // The card-level status message explains the failure; keep the draft open for retry.
+        }
+    }
+    const triggerLabel = props.names.length === 0
+        ? tr('skills.pickerPlaceholder')
+        : props.names.length === 1
+            ? props.names[0]
+            : tr('skills.pickerSelectedCount', { count: props.names.length });
+    const popover = open ? (_jsxs("div", { ref: popoverRef, className: "skills-multi-picker-popover", style: position ? { left: position.left, top: position.top, width: position.width, height: position.height } : undefined, children: [_jsxs("div", { className: "skills-multi-picker-head", children: [_jsxs("label", { className: "skills-multi-picker-search", children: [_jsx("span", { className: "skills-multi-picker-search-icon", "aria-hidden": "true" }), _jsx("input", { type: "search", "data-action": "search-skills", autoFocus: true, autoComplete: "off", value: query, placeholder: tr('skills.pickerSearchPlaceholder'), onChange: event => setQuery(event.currentTarget.value), onKeyDown: event => {
+                                    if (event.key === 'Escape') {
+                                        event.preventDefault();
+                                        cancel();
+                                    }
+                                } })] }), _jsxs("div", { className: "skills-multi-picker-meta", children: [_jsx("span", { children: tr('skills.pickerSelectionMeta', { selected: draft.size, total: options.length }) }), draft.size > 0 ? (_jsx("button", { type: "button", className: "skills-multi-picker-clear", "data-action": "clear-skill-selection", onClick: () => setDraft(new Set()), children: tr('skills.pickerClear') })) : null] })] }), _jsxs("div", { className: "skills-multi-picker-options", role: "listbox", "aria-label": tr('skills.priority'), "aria-multiselectable": "true", children: [filteredOptions.map(skill => {
+                        const selected = draft.has(skill.name);
+                        const dangling = !props.installedNames.has(skill.name);
+                        return (_jsxs("button", { type: "button", className: `skills-multi-picker-option${selected ? ' selected' : ''}${dangling ? ' dangling' : ''}`, role: "option", "aria-selected": selected, "data-skill-name": skill.name, onClick: () => toggle(skill.name), children: [_jsx("span", { className: "skills-multi-picker-check", "aria-hidden": "true" }), _jsxs("span", { className: "skills-multi-picker-option-copy", children: [_jsxs("span", { children: [_jsx("b", { children: skill.name }), dangling ? _jsx("em", { children: tr('skills.dangling') }) : null] }), skill.description ? _jsx("small", { children: skill.description }) : null] })] }, skill.name));
+                    }), filteredOptions.length === 0 ? _jsx("p", { className: "skills-multi-picker-empty", children: tr('skills.pickerNoResults') }) : null] }), _jsxs("footer", { className: "skills-multi-picker-actions", children: [_jsx("button", { type: "button", className: "ghost", "data-action": "cancel-skill-selection", disabled: props.busy, onClick: cancel, children: tr('skills.cancel') }), _jsx("button", { type: "button", className: "primary", "data-action": "save-skill-selection", disabled: !dirty || props.busy, onClick: () => void save(), children: props.busy ? tr('skills.saving') : tr('skills.saveSelection') })] })] })) : null;
+    return (_jsxs("div", { ref: rootRef, className: `skills-multi-picker${open ? ' open' : ''}`, "data-skill-picker": props.botId, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "skills-multi-picker-trigger", "data-action": "open-skill-picker", "aria-haspopup": "listbox", "aria-expanded": open, disabled: props.busy, onClick: () => open ? cancel() : openPicker(), children: [_jsxs("span", { className: "skills-multi-picker-trigger-copy", children: [_jsx("b", { children: triggerLabel }), _jsx("small", { children: tr('skills.pickerTriggerHint') })] }), _jsx("span", { className: "skills-multi-picker-chevron", "aria-hidden": "true" })] }), popover && typeof document !== 'undefined' ? createPortal(popover, document.body) : popover] }));
 }
 export function BotPolicyCard(props) {
     const tr = useT();
-    const { bot, installedNames, skills, status, busyKey, onUpdate } = props;
+    const { bot, installedNames, skills, status, busyKey, onSave } = props;
     const label = bot.botName ?? bot.larkAppId;
     const names = priorityNames(bot.skills);
-    const attached = new Set(names);
-    const attachOptions = skills.filter(skill => !attached.has(skill.name));
-    const [selected, setSelected] = useState(attachOptions[0]?.name ?? '');
-    useEffect(() => {
-        if (!selected || !attachOptions.some(skill => skill.name === selected)) {
-            setSelected(attachOptions[0]?.name ?? '');
-        }
-    }, [attachOptions, selected]);
     if (bot.error) {
         return (_jsxs("article", { className: "bd-card skills-bot-card", "data-appid": bot.larkAppId, children: [_jsxs("header", { children: [_jsx(Html, { html: botAvatarHtml({ name: label, larkAppId: bot.larkAppId, size: 'sm' }) }), _jsx("strong", { children: label })] }), _jsx("p", { className: "hint-warn-inline", children: bot.error })] }));
     }
-    return (_jsxs("article", { className: "bd-card skills-bot-card", "data-appid": bot.larkAppId, children: [_jsxs("header", { className: "skills-bot-head", children: [_jsx(Html, { html: botAvatarHtml({ name: label, larkAppId: bot.larkAppId, size: 'sm', dot: 'ok' }) }), _jsxs("div", { children: [_jsx("strong", { children: label }), _jsx("code", { children: bot.larkAppId })] }), _jsx("span", { className: "skills-count-pill", children: tr('skills.skillCount', { count: names.length }) })] }), _jsxs("section", { className: "bd-section", children: [_jsx("h3", { className: "bd-section-title", children: tr('skills.priority') }), names.length === 0 ? _jsx("p", { className: "bd-section-note", children: tr('skills.noPriority') }) : (_jsx("div", { className: "skills-chip-list", children: names.map(name => {
-                            const dangling = !installedNames.has(name);
-                            return (_jsxs("span", { className: `skills-priority-row${dangling ? ' skills-priority-dangling' : ''}`, title: dangling ? tr('skills.dangling') : '', children: [_jsxs("span", { className: "skills-priority-name", children: [name, dangling ? _jsx("small", { children: tr('skills.dangling') }) : null] }), _jsx("button", { type: "button", className: "skills-priority-remove", "data-action": "detach-skill", "data-name": name, "aria-label": tr('skills.detachNamed', { skill: name }), disabled: busyKey === `${bot.larkAppId}:detach:${name}`, onClick: () => void onUpdate(bot.larkAppId, 'detach', name), children: "\u00D7" })] }, name));
-                        }) })), _jsx("div", { className: "actions skills-attach-row", children: attachOptions.length === 0 ? _jsx("button", { type: "button", disabled: true, children: tr('skills.attach') }) : (_jsxs(_Fragment, { children: [_jsx("select", { "data-attach-picker": true, value: selected, onChange: e => setSelected(e.currentTarget.value), children: attachOptions.map(skill => _jsx("option", { value: skill.name, children: skill.name }, skill.name)) }), _jsx("button", { type: "button", "data-action": "attach-skill", disabled: !selected || busyKey === `${bot.larkAppId}:attach:${selected}`, onClick: () => selected && void onUpdate(bot.larkAppId, 'attach', selected), children: tr('skills.attach') })] })) })] }), _jsx("span", { className: statusClass(status), "data-bot-status": true, children: status?.text ?? '' })] }));
+    return (_jsxs("article", { className: "bd-card skills-bot-card", "data-appid": bot.larkAppId, children: [_jsxs("header", { className: "skills-bot-head", children: [_jsx(Html, { html: botAvatarHtml({ name: label, larkAppId: bot.larkAppId, size: 'sm', dot: 'ok' }) }), _jsxs("div", { className: "skills-bot-title-line", children: [_jsx("strong", { children: label }), _jsx("span", { className: "skills-count-pill", children: tr('skills.skillCount', { count: names.length }) })] })] }), _jsxs("section", { className: "skills-policy-panel", children: [_jsx("div", { className: "skills-priority-head", children: _jsx("h3", { className: "skills-priority-title", children: tr('skills.priority') }) }), _jsx(SkillMultiPicker, { botId: bot.larkAppId, names: names, installedNames: installedNames, skills: skills, busy: busyKey === `${bot.larkAppId}:set`, onSave: next => onSave(bot.larkAppId, next) })] }), _jsx("span", { className: statusClass(status), "data-bot-status": true, children: status?.text ?? '' })] }));
 }
 export function renderSkillsPage(root) {
     return mountReactPage(root, _jsx(SkillsPage, {}));