botmux 3.12.0 → 3.12.1

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

@@ -1,53 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 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';
+import { SkillPacksTab } from './skills/skill-packs-tab.js';
+import { detectSourceType, SkillLibraryTab } from './skills/skill-library-tab.js';
+import { BotAssignmentsTab } from './skills/bot-assignments-tab.js';
+import { DeliverySettingsTab } from './skills/delivery-settings-tab.js';
+import { buildSkillGraph, danglingSkillNames, discoveryGroupKey, mergeBotAssignmentSelectors, packIds, policyConfigured, priorityNames, selectInstallCandidates, sourceLabel, } from './skills/shared.js';
+import { useSkillsData } from './skills/use-skills-data.js';
 const INSTALLED_SKILLS_ROWS_PER_PAGE = 2;
-function nativeLibraryLabel(path, tr) {
-    const p = String(path ?? '').replace(/\\/g, '/');
-    if (p.includes('/.codex/skills/'))
-        return tr('skills.sourceCodex');
-    if (p.includes('/.claude/skills/'))
-        return tr('skills.sourceClaude');
-    if (p.includes('/.trae/skills/'))
-        return tr('skills.sourceTrae');
-    if (p.includes('/.cursor/skills/'))
-        return tr('skills.sourceCursor');
-    if (p.includes('/.gemini/skills/'))
-        return tr('skills.sourceGemini');
-    if (p.includes('/.config/opencode/skills/'))
-        return tr('skills.sourceOpenCode');
-    return null;
-}
-function sourceLabel(skill, tr) {
-    const source = skill.source ?? {};
-    if (source.type === 'github')
-        return `github:${source.owner}/${source.repo}/${source.path ?? ''}`;
-    if (source.type === 'git')
-        return `${source.url ?? 'git'}#${source.path ?? ''}`;
-    if (source.type === 'local-link')
-        return nativeLibraryLabel(source.path, tr) ?? tr('skills.sourceLocalLink');
-    if (source.type === 'local-copy')
-        return tr('skills.sourceBotmuxCopy');
-    return String(source.type ?? 'unknown');
-}
-function priorityNames(policy) {
-    return (policy?.include ?? [])
-        .filter(item => item.startsWith('skill:'))
-        .map(item => item.slice('skill:'.length));
-}
-function policyReferenceCount(policy) {
-    return priorityNames(policy).length;
-}
-function policyConfigured(policy) {
-    return priorityNames(policy).length > 0;
-}
-function discoveryGroupKey(group) {
-    return `${group.cliId}\n${group.rootDir}`;
-}
 function installedSkillsColumnCount(width) {
     if (width >= 1600)
         return 4;
@@ -74,17 +38,46 @@ async function jsonRequest(url, init) {
 function statusClass(status) {
     return `oncall-status${status ? ` ${status.ok ? 'hint-ok' : 'hint-warn-inline'}` : ''}`;
 }
-function SkillSegmented(props) {
+export 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);
+    const sourceHelpRef = useRef(null);
+    const sourceHelpId = useId();
+    const sourceInputId = `${sourceHelpId}-input`;
+    const sourceHelpTitleId = `${sourceHelpId}-title`;
+    const [sourceHelpOpen, setSourceHelpOpen] = useState(false);
     const candidates = props.installCandidates ?? [];
     const selectedInstallSkills = props.selectedInstallSkills ?? new Set();
     const allSelected = candidates.length > 0 && candidates.every(candidate => selectedInstallSkills.has(candidate.name));
     const busy = props.installBusy || props.installDiscovering;
+    const sourceType = detectSourceType(props.installSource);
+    const sourceTypeLabel = sourceType === 'github'
+        ? tr('skills.sourceDetectedGithub')
+        : sourceType === 'git'
+            ? tr('skills.sourceDetectedGit')
+            : sourceType === 'agentbuddy'
+                ? tr('skills.sourceDetectedAgentbuddy')
+                : sourceType === 'local'
+                    ? tr('skills.sourceDetectedLocal')
+                    : tr('skills.sourceDetectedUnknown');
+    const sourcePreflight = sourceType === 'agentbuddy'
+        ? tr('skills.sourcePreflightAgentbuddy')
+        : sourceType === 'github' || sourceType === 'git'
+            ? tr('skills.sourcePreflightGit')
+            : sourceType === 'local'
+                ? tr('skills.sourcePreflightLocal')
+                : tr('skills.sourcePreflightUnknown');
+    const diagnostic = sourceType === 'agentbuddy'
+        ? tr('skills.installDiagnosticAgentbuddy')
+        : sourceType === 'github' || sourceType === 'git'
+            ? tr('skills.installDiagnosticGit')
+            : sourceType === 'local'
+                ? tr('skills.installDiagnosticLocal')
+                : tr('skills.installDiagnosticUnknown');
     useEffect(() => {
         const dialog = selectionDialogRef.current;
         if (!dialog)
@@ -99,7 +92,28 @@ export function SkillsInstallPanel(props) {
             dialog.close();
         }
     }, [props.installSelectionOpen, candidates.length]);
-    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') })] })] }) })] }));
+    useEffect(() => {
+        if (!sourceHelpOpen || typeof document === 'undefined')
+            return undefined;
+        const closeOnOutsidePointer = (event) => {
+            if (!sourceHelpRef.current?.contains(event.target))
+                setSourceHelpOpen(false);
+        };
+        const closeOnEscape = (event) => {
+            if (event.key === 'Escape')
+                setSourceHelpOpen(false);
+        };
+        document.addEventListener('pointerdown', closeOnOutsidePointer);
+        document.addEventListener('keydown', closeOnEscape);
+        return () => {
+            document.removeEventListener('pointerdown', closeOnOutsidePointer);
+            document.removeEventListener('keydown', closeOnEscape);
+        };
+    }, [sourceHelpOpen]);
+    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') }) }) }), props.installTargetSkill ? (_jsxs("div", { className: "skills-inline-target", "data-install-target": props.installTargetSkill, children: [_jsx("span", { children: tr('skills.installTargetHint', { skill: props.installTargetSkill }) }), _jsx("button", { type: "button", "data-action": "clear-install-target", onClick: () => props.onClearInstallTarget?.(), children: tr('skills.clearInstallTarget') })] })) : null, _jsxs("div", { className: "skills-install-grid", children: [_jsxs("div", { className: "skills-source-label", children: [_jsxs("div", { className: "skills-source-heading", ref: sourceHelpRef, onKeyDown: event => {
+                                    if (event.key === 'Escape')
+                                        setSourceHelpOpen(false);
+                                }, children: [_jsx("label", { htmlFor: sourceInputId, children: tr('skills.source') }), _jsx("button", { type: "button", className: "skills-source-help-trigger", "data-action": "toggle-source-help", "aria-label": tr('skills.sourceHelpOpen'), "aria-expanded": sourceHelpOpen, "aria-controls": sourceHelpId, "aria-haspopup": "dialog", onClick: () => setSourceHelpOpen(open => !open), children: "?" }), sourceHelpOpen ? (_jsxs("aside", { className: "skills-source-help-popover", id: sourceHelpId, role: "dialog", "aria-labelledby": sourceHelpTitleId, "data-source-help-popover": true, children: [_jsxs("div", { className: "skills-source-help-head", children: [_jsxs("div", { children: [_jsx("strong", { id: sourceHelpTitleId, children: tr('skills.sourceHelpTitle') }), _jsx("span", { children: tr('skills.sourceHelpIntro') })] }), _jsx("button", { type: "button", className: "skills-source-help-close", "data-action": "close-source-help", "aria-label": tr('skills.sourceHelpClose'), onClick: () => setSourceHelpOpen(false), children: "\u00D7" })] }), _jsxs("div", { className: "skills-source-help-list", children: [_jsxs("section", { children: [_jsx("strong", { children: tr('skills.sourceHelpRemoteLabel') }), _jsx("span", { children: tr('skills.sourceHelpRemote') }), _jsx("code", { children: tr('skills.sourceHelpRemoteExample') })] }), _jsxs("section", { children: [_jsx("strong", { children: tr('skills.sourceHelpLocalLabel') }), _jsx("span", { children: tr('skills.sourceHelpLocal') }), _jsx("code", { children: tr('skills.sourceHelpLocalExample') })] }), _jsxs("section", { children: [_jsx("strong", { children: tr('skills.sourceHelpAgentbuddyLabel') }), _jsx("span", { children: tr('skills.sourceHelpAgentbuddy') }), _jsx("code", { children: tr('skills.sourceHelpAgentbuddyExample') })] })] })] })) : null] }), _jsx("div", { className: "skills-source-control", children: _jsx("input", { id: sourceInputId, type: "text", "data-install": "source", "aria-label": tr('skills.source'), placeholder: tr('skills.sourcePlaceholder'), value: props.installSource, onChange: e => props.onInstallSourceChange(e.currentTarget.value) }) }), props.installSource.trim() ? (_jsxs("div", { className: `skills-source-feedback is-${sourceType}`, "data-source-hint": sourceType, children: [_jsx("strong", { children: sourceTypeLabel }), _jsx("span", { children: sourcePreflight })] })) : null] }), _jsxs("details", { className: "skills-install-advanced", "data-install-advanced": true, children: [_jsx("summary", { children: tr('skills.advancedOptions') }), _jsxs("div", { className: "skills-install-advanced-body", children: [_jsxs("label", { className: "skills-install-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) }), _jsx("small", { children: tr('skills.pathHelpInline') })] }), _jsxs("label", { className: "skills-install-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("small", { children: tr('skills.refHelpInline') })] }), _jsxs("label", { className: "skills-scan-toggle", children: [_jsx("input", { type: "checkbox", "data-install": "full-depth", checked: props.installFullDepth, disabled: busy, onChange: event => props.onInstallFullDepthChange(event.currentTarget.checked) }), _jsxs("span", { children: [_jsx("strong", { children: tr('skills.deepScan') }), _jsx("small", { children: tr('skills.deepScanHelp') }), _jsx("small", { className: "muted", children: tr('skills.autoDeepScanHint') })] })] })] })] }), _jsxs("div", { className: "skills-install-actions", children: [_jsx("button", { type: "button", className: "skills-local-discovery-link", "data-action": "open-native-skill-discovery", title: tr('skills.localDiscoverHelp'), onClick: () => props.onOpenNativeDiscovery(), children: tr('skills.localDiscover') }), _jsx("button", { type: "button", className: "primary", "data-action": "install", disabled: busy || !props.installSource.trim(), onClick: () => props.onInstall(), children: props.installDiscovering ? tr('skills.scanning') : props.installBusy ? tr('skills.jobRunning') : tr('skills.installSubmit') })] })] }), 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, props.installStatus && !props.installStatus.ok ? (_jsxs("div", { className: "skills-install-diagnostic", "data-install-diagnostic": sourceType, role: "alert", children: [_jsx("strong", { children: tr('skills.installDiagnosticTitle') }), _jsx("span", { children: diagnostic })] })) : 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') })] })] }) })] }));
 }
 export function InstalledSkillsLibrary(props) {
     const tr = useT();
@@ -111,22 +125,32 @@ export function InstalledSkillsLibrary(props) {
     const [query, setQuery] = useState('');
     const [selectionMode, setSelectionMode] = useState(false);
     const [selected, setSelected] = useState(() => new Set());
+    const [filterNames, setFilterNames] = useState(null);
     const [page, setPage] = useState(0);
     const [viewportWidth, setViewportWidth] = useState(() => typeof window === 'undefined' ? 1200 : window.innerWidth);
     const normalizedQuery = query.trim().toLocaleLowerCase();
     queryRef.current = query;
     selectionModeRef.current = selectionMode;
     const filteredSkills = useMemo(() => {
+        const base = filterNames ? props.skills.filter(skill => filterNames.has(skill.name)) : props.skills;
         if (!normalizedQuery)
-            return props.skills;
-        return props.skills.filter(skill => [
+            return base;
+        return base.filter(skill => [
             skill.name,
             skill.displayName,
             skill.description,
             ...(skill.tags ?? []),
             sourceLabel(skill, tr),
         ].filter(Boolean).join('\n').toLocaleLowerCase().includes(normalizedQuery));
-    }, [normalizedQuery, props.skills, tr]);
+    }, [filterNames, normalizedQuery, props.skills, tr]);
+    // Filter names that aren't installed (typically dangling refs from the
+    // overview badge): rendered as actionable install rows, not silently hidden.
+    const missingFiltered = useMemo(() => {
+        if (!filterNames)
+            return [];
+        const installed = new Set(props.skills.map(skill => skill.name));
+        return [...filterNames].filter(name => !installed.has(name)).sort();
+    }, [filterNames, props.skills]);
     const pageSize = installedSkillsColumnCount(viewportWidth) * INSTALLED_SKILLS_ROWS_PER_PAGE;
     const pageCount = Math.max(1, Math.ceil(filteredSkills.length / pageSize));
     const visibleSkills = filteredSkills.slice(page * pageSize, page * pageSize + pageSize);
@@ -141,7 +165,18 @@ export function InstalledSkillsLibrary(props) {
         window.addEventListener('resize', onResize);
         return () => window.removeEventListener('resize', onResize);
     }, []);
-    useEffect(() => setPage(0), [normalizedQuery, pageSize]);
+    // Cross-tab arrival: seed the search box / name filter once per incoming
+    // intent. The parent consumes the intent right after, so neither re-applies.
+    useEffect(() => {
+        if (props.externalQuery != null && props.externalQuery !== '')
+            setQuery(props.externalQuery);
+    }, [props.externalQuery]);
+    useEffect(() => {
+        if (props.externalFilterNames && props.externalFilterNames.length > 0) {
+            setFilterNames(new Set(props.externalFilterNames));
+        }
+    }, [props.externalFilterNames]);
+    useEffect(() => setPage(0), [normalizedQuery, pageSize, filterNames]);
     useEffect(() => {
         setPage(current => Math.min(Math.max(0, current), pageCount - 1));
     }, [pageCount]);
@@ -236,10 +271,21 @@ export function InstalledSkillsLibrary(props) {
                                             cancelSelection(true);
                                         } }), query ? (_jsx("button", { type: "button", "data-action": "clear-installed-search", "aria-label": tr('skills.clearSearch'), onClick: () => setQuery(''), children: "\u00D7" })) : null] }), selectionMode ? (_jsxs("label", { className: "skills-select-all-results", children: [_jsx("input", { ref: selectAllRef, type: "checkbox", checked: allResultsSelected, disabled: filteredSkills.length === 0 || props.removingNames.size > 0, onChange: toggleAllResults }), _jsx("span", { children: normalizedQuery
                                             ? tr('skills.selectSearchResults', { count: filteredSkills.length })
-                                            : tr('skills.selectAllSkills', { count: filteredSkills.length }) })] })) : null, normalizedQuery ? _jsx("span", { className: "skills-filter-count", children: tr('skills.resultCount', { count: filteredSkills.length }) }) : null, pageCount > 1 ? (_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: page === 0, onClick: () => setPage(current => Math.max(0, current - 1)), children: "\u2039" }), _jsx("span", { children: tr('skills.pageStatus', { page: page + 1, pages: pageCount }) }), _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: page >= pageCount - 1, onClick: () => setPage(current => Math.min(pageCount - 1, current + 1)), children: "\u203A" })] })) : null] }), _jsx("div", { className: "skills-installed-live", role: "status", "aria-live": "polite", children: props.status ? _jsx("span", { className: statusClass(props.status), children: props.status.text }) : null }), props.skills.length === 0 ? (_jsxs("div", { className: "skills-library-empty", children: [_jsx("strong", { children: tr('skills.emptyTitle') }), _jsx("p", { children: tr('skills.emptyHelp') })] })) : filteredSkills.length === 0 ? (_jsxs("div", { className: "skills-library-empty", "data-empty": "search", children: [_jsx("strong", { children: tr('skills.noResultsTitle', { query: query.trim() }) }), _jsx("p", { children: tr('skills.noResultsHelp') }), _jsx("button", { type: "button", "data-action": "clear-installed-search-empty", onClick: () => setQuery(''), children: tr('skills.clearSearch') })] })) : (_jsx("div", { className: "skills-list", children: visibleSkills.map(skill => {
+                                            : tr('skills.selectAllSkills', { count: filteredSkills.length }) })] })) : null, filterNames ? (_jsxs("button", { type: "button", className: "skills-library-filter-chip", "data-action": "clear-library-filter", title: [...filterNames].join(', '), "aria-label": tr('skills.clearFilter'), onClick: () => setFilterNames(null), children: [tr('skills.libraryFilterActive', { count: filterNames.size }), " \u00D7"] })) : null, normalizedQuery ? _jsx("span", { className: "skills-filter-count", children: tr('skills.resultCount', { count: filteredSkills.length }) }) : null, pageCount > 1 ? (_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: page === 0, onClick: () => setPage(current => Math.max(0, current - 1)), children: "\u2039" }), _jsx("span", { children: tr('skills.pageStatus', { page: page + 1, pages: pageCount }) }), _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: page >= pageCount - 1, onClick: () => setPage(current => Math.min(pageCount - 1, current + 1)), children: "\u203A" })] })) : null] }), _jsx("div", { className: "skills-installed-live", role: "status", "aria-live": "polite", children: props.status ? _jsx("span", { className: statusClass(props.status), children: props.status.text }) : null }), missingFiltered.length > 0 && (_jsxs("div", { className: "skills-missing-list", "data-missing-skills": true, children: [_jsx("strong", { children: tr('skills.missingFilteredTitle') }), missingFiltered.map(name => (_jsxs("div", { className: "skills-missing-row", "data-missing-skill": name, children: [_jsx("span", { className: "skills-missing-row-name", children: name }), _jsx("small", { className: "muted", children: tr('skills.dangling') }), _jsx("button", { type: "button", "data-action": "install-dangling-skill", disabled: !props.onInstallMissing, onClick: () => props.onInstallMissing?.(name), children: tr('skills.installNow') })] }, name)))] })), props.skills.length === 0 ? (_jsxs("div", { className: "skills-library-empty", children: [_jsx("strong", { children: tr('skills.emptyTitle') }), _jsx("p", { children: tr('skills.emptyHelp') })] })) : filteredSkills.length === 0 && missingFiltered.length > 0 ? null : filteredSkills.length === 0 ? (_jsxs("div", { className: "skills-library-empty", "data-empty": "search", children: [_jsx("strong", { children: tr('skills.noResultsTitle', { query: query.trim() }) }), _jsx("p", { children: tr('skills.noResultsHelp') }), _jsx("button", { type: "button", "data-action": "clear-installed-search-empty", onClick: () => setQuery(''), children: tr('skills.clearSearch') })] })) : (_jsx("div", { className: "skills-list", children: visibleSkills.map(skill => {
                             const isSelected = selected.has(skill.name);
                             const isRemoving = props.removingNames.has(skill.name);
-                            return (_jsxs("article", { className: `skills-row skills-installed-card${selectionMode ? ' is-selectable' : ''}${isSelected ? ' is-selected' : ''}${isRemoving ? ' is-removing' : ''}`, "data-skill": skill.name, "data-selection-mode": selectionMode ? 'true' : undefined, "aria-busy": isRemoving || undefined, onClick: selectionMode ? () => toggleSelected(skill.name) : undefined, children: [_jsxs("div", { className: "skills-row-body", children: [_jsxs("div", { className: "skills-row-title", children: [selectionMode ? (_jsx("input", { type: "checkbox", "aria-label": tr('skills.selectNamed', { skill: skill.displayName ?? skill.name }), checked: isSelected, disabled: isRemoving, onClick: event => event.stopPropagation(), onChange: () => toggleSelected(skill.name) })) : null, _jsxs("span", { children: [_jsx("strong", { children: skill.displayName ?? skill.name }), skill.displayName && skill.displayName !== skill.name ? _jsx("small", { className: "skills-canonical-name", children: skill.name }) : null] })] }), skill.description ? _jsx("p", { children: skill.description }) : null, _jsx("small", { className: "skills-source-badge", children: sourceLabel(skill, tr) }), isRemoving ? _jsx("span", { className: "skills-removing-label", children: tr('skills.removing') }) : null] }), selectionMode ? null : (_jsxs("div", { className: "skills-card-actions", children: [_jsx("button", { type: "button", "data-action": "update-skill", disabled: props.busySkill === `${skill.name}:update` || isRemoving, onClick: () => props.onUpdate(skill.name), children: tr('skills.update') }), _jsx("button", { type: "button", "data-action": "remove-skill", disabled: isRemoving, onClick: () => props.onRequestRemove([skill.name]), children: tr('skills.remove') })] }))] }, skill.name));
+                            return (_jsxs("article", { className: `skills-row skills-installed-card${selectionMode ? ' is-selectable' : ''}${isSelected ? ' is-selected' : ''}${isRemoving ? ' is-removing' : ''}`, "data-skill": skill.name, "data-selection-mode": selectionMode ? 'true' : undefined, "aria-busy": isRemoving || undefined, onClick: selectionMode ? () => toggleSelected(skill.name) : undefined, children: [_jsxs("div", { className: "skills-row-body", children: [_jsxs("div", { className: "skills-row-title", children: [selectionMode ? (_jsx("input", { type: "checkbox", "aria-label": tr('skills.selectNamed', { skill: skill.displayName ?? skill.name }), checked: isSelected, disabled: isRemoving, onClick: event => event.stopPropagation(), onChange: () => toggleSelected(skill.name) })) : null, _jsxs("span", { children: [_jsx("strong", { children: skill.displayName ?? skill.name }), skill.displayName && skill.displayName !== skill.name ? _jsx("small", { className: "skills-canonical-name", children: skill.name }) : null] })] }), skill.description ? _jsx("p", { children: skill.description }) : null, _jsx("small", { className: "skills-source-badge", children: sourceLabel(skill, tr) }), props.graph ? (() => {
+                                                const node = props.graph.skills.get(skill.name);
+                                                const packsUnknown = props.packsKnown === false;
+                                                const packCount = node?.packIds.length ?? 0;
+                                                const botCount = node ? new Set([...node.directBotIds, ...node.viaPackBotIds]).size : 0;
+                                                const packTitle = packsUnknown
+                                                    ? tr('skills.healthUnknown')
+                                                    : (node?.packIds ?? [])
+                                                        .map(id => props.packNames?.find(pack => pack.id === id)?.name ?? id)
+                                                        .join(', ');
+                                                return (_jsxs("span", { className: "skills-usage-chips", children: [_jsx("button", { type: "button", className: "skills-usage-chip", "data-action": "show-skill-packs", disabled: packsUnknown || packCount === 0 || !props.onShowSkillPacks, title: packTitle || undefined, onClick: event => { event.stopPropagation(); props.onShowSkillPacks?.(skill.name); }, children: packsUnknown ? tr('skills.usedInPacksUnknown') : tr('skills.usedInPacks', { count: packCount }) }), _jsx("button", { type: "button", className: "skills-usage-chip", "data-action": "show-skill-bots", disabled: botCount === 0 || !props.onShowSkillBots, onClick: event => { event.stopPropagation(); props.onShowSkillBots?.(skill.name); }, children: tr('skills.usedByBots', { count: botCount }) })] }));
+                                            })() : null, isRemoving ? _jsx("span", { className: "skills-removing-label", children: tr('skills.removing') }) : null] }), selectionMode ? null : (_jsxs("div", { className: "skills-card-actions", children: [_jsx("button", { type: "button", "data-action": "update-skill", disabled: props.busySkill === `${skill.name}:update` || isRemoving, onClick: () => props.onUpdate(skill.name), children: tr('skills.update') }), _jsx("button", { type: "button", "data-action": "remove-skill", disabled: isRemoving, onClick: () => props.onRequestRemove([skill.name]), children: tr('skills.remove') })] }))] }, skill.name));
                         }) }))] }), selectionMode ? (_jsxs("div", { className: "skills-bulk-action-bar", role: "toolbar", "aria-label": tr('skills.bulkActions'), children: [_jsxs("span", { children: [_jsx("strong", { children: tr('skills.selectedCount', { count: selected.size }) }), hiddenSelectedCount > 0 ? _jsx("small", { children: tr('skills.selectedHidden', { count: hiddenSelectedCount }) }) : null] }), _jsx("button", { type: "button", className: "danger", "data-action": "remove-selected-skills", disabled: selected.size === 0 || props.removingNames.size > 0, onClick: () => props.onRequestRemove([...selected]), children: tr('skills.removeSelected', { count: selected.size }) })] })) : null] }));
 }
 export function RemoveSkillsDialog(props) {
@@ -249,6 +295,7 @@ export function RemoveSkillsDialog(props) {
     const force = props.references.length > 0;
     const visibleNames = names.slice(0, 3);
     const referencedBotCount = new Set(props.references.flatMap(reference => reference.bots)).size;
+    const referencedPackCount = new Set(props.references.flatMap(reference => reference.packs)).size;
     useEffect(() => {
         const dialog = dialogRef.current;
         if (!dialog)
@@ -278,11 +325,15 @@ export function RemoveSkillsDialog(props) {
                                     ? tr('skills.removeOneTitle', { skill: names[0] })
                                     : tr('skills.removeManyTitle', { count: names.length }) }), _jsx("p", { children: force
                                 ? names.length === 1
-                                    ? tr('skills.removeInUseOneHelp', { count: referencedBotCount })
-                                    : tr('skills.removeInUseManyHelp', { count: referencedBotCount })
+                                    ? referencedPackCount > 0
+                                        ? tr('skills.removeInUseOneHelpWithPacks', { botCount: referencedBotCount, packCount: referencedPackCount })
+                                        : tr('skills.removeInUseOneHelp', { count: referencedBotCount })
+                                    : referencedPackCount > 0
+                                        ? tr('skills.removeInUseManyHelpWithPacks', { botCount: referencedBotCount, packCount: referencedPackCount })
+                                        : tr('skills.removeInUseManyHelp', { count: referencedBotCount })
                                 : names.length === 1
                                     ? tr('skills.removeOnePermanentHelp')
-                                    : tr('skills.removePermanentHelp') })] }), _jsxs("div", { className: "skills-remove-dialog-body", children: [names.length > 1 ? (_jsxs(_Fragment, { children: [_jsx("ul", { children: visibleNames.map(name => _jsx("li", { children: name }, name)) }), names.length > visibleNames.length ? _jsx("p", { children: tr('skills.removeMore', { count: names.length - visibleNames.length }) }) : null] })) : null, props.references.length > 0 ? (_jsxs("div", { className: "skills-remove-reference-warning", role: "alert", children: [_jsx("strong", { children: tr('skills.removeReferencesDetail') }), _jsx("ul", { children: props.references.map(reference => (_jsxs("li", { children: [_jsx("strong", { children: reference.name }), _jsx("span", { children: reference.bots.join(', ') })] }, reference.name))) })] })) : null, props.error ? _jsx("p", { className: "hint-warn", role: "alert", children: props.error }) : null] }), _jsxs("footer", { className: "actions", children: [_jsx("button", { type: "button", autoFocus: true, disabled: props.busy, onClick: props.onCancel, children: tr('skills.cancel') }), _jsx("button", { type: "button", className: "danger", disabled: props.busy, onClick: () => props.onConfirm(force), children: props.busy
+                                    : tr('skills.removePermanentHelp') })] }), _jsxs("div", { className: "skills-remove-dialog-body", children: [names.length > 1 ? (_jsxs(_Fragment, { children: [_jsx("ul", { children: visibleNames.map(name => _jsx("li", { children: name }, name)) }), names.length > visibleNames.length ? _jsx("p", { children: tr('skills.removeMore', { count: names.length - visibleNames.length }) }) : null] })) : null, props.references.length > 0 ? (_jsxs("div", { className: "skills-remove-reference-warning", role: "alert", children: [_jsx("strong", { children: tr('skills.removeReferencesDetail') }), _jsx("ul", { children: props.references.map(reference => (_jsxs("li", { children: [_jsx("strong", { children: reference.name }), _jsxs("span", { children: [reference.bots.join(', '), reference.bots.length > 0 && reference.packs.length > 0 ? ' · ' : '', reference.packs.length > 0 ? `${tr('skills.packChips')}: ${reference.packs.join(', ')}` : ''] })] }, reference.name))) })] })) : null, props.error ? _jsx("p", { className: "hint-warn", role: "alert", children: props.error }) : null] }), _jsxs("footer", { className: "actions", children: [_jsx("button", { type: "button", autoFocus: true, disabled: props.busy, onClick: props.onCancel, children: tr('skills.cancel') }), _jsx("button", { type: "button", className: "danger", disabled: props.busy, onClick: () => props.onConfirm(force), children: props.busy
                                 ? tr('skills.removing')
                                 : force
                                     ? tr('skills.removeAnyway')
@@ -290,18 +341,29 @@ export function RemoveSkillsDialog(props) {
                                         ? tr('skills.removeOneConfirm')
                                         : tr('skills.removeSelected', { count: names.length }) })] })] }) }));
 }
-function SkillsPage() {
+/** Exported for tests (cross-tab navigation integration). Mounted in the app
+ * via renderSkillsPage below. */
+export function SkillsPage() {
     const tr = useT();
     const mountedRef = useRef(true);
     const timersRef = useRef(new Set());
     const discoveryDialogRef = useRef(null);
-    const [skills, setSkills] = useState([]);
-    const [nativeSkillGroups, setNativeSkillGroups] = useState([]);
-    const [bots, setBots] = useState([]);
-    const [trustProjectSkills, setTrustProjectSkills] = useState('off');
-    const [delivery, setDelivery] = useState('auto');
-    const [loadError, setLoadError] = useState(null);
-    const [loading, setLoading] = useState(true);
+    const { skills, nativeSkillGroups, bots, packs, trustProjectSkills, delivery, loading, loadError, packsError, packsKnown, refresh, setSkills, setBots, setTrustProjectSkills, setDelivery, } = useSkillsData({ apiUnavailableText: tr('skills.apiUnavailable') });
+    const [activeTab, setActiveTab] = useState('library');
+    // Cross-tab navigation: a chip click in one table jumps to another tab with
+    // context (search prefill / focused entity). The target tab consumes the
+    // intent once so it doesn't re-apply on later visits.
+    const [navIntent, setNavIntent] = useState(null);
+    // Sticky install target: when a missing skill sends the user to the install
+    // wizard, the discovery result preselects just that skill. Prefill only —
+    // installing still requires the user to point at a source and confirm.
+    const [installTargetSkill, setInstallTargetSkill] = useState(null);
+    const navigateTo = useCallback((intent) => {
+        setNavIntent(intent);
+        setInstallTargetSkill(intent.installTargetSkill ?? null);
+        setActiveTab(intent.tab);
+    }, []);
+    const consumeNavIntent = useCallback(() => setNavIntent(null), []);
     const [installSource, setInstallSource] = useState('');
     const [installPath, setInstallPath] = useState('');
     const [installRef, setInstallRef] = useState('');
@@ -310,6 +372,10 @@ function SkillsPage() {
     const [installDiscovering, setInstallDiscovering] = useState(false);
     const [installSelectionOpen, setInstallSelectionOpen] = useState(false);
     const [installCandidates, setInstallCandidates] = useState([]);
+    /** operator explicitly asked to skip the shallow pass */
+    const [installForceFullDepth, setInstallForceFullDepth] = useState(false);
+    /** discovery had to fall back to a full-depth scan to find anything */
+    const [installDeepScanned, setInstallDeepScanned] = useState(false);
     const [selectedInstallSkills, setSelectedInstallSkills] = useState(() => new Set());
     const [discoveryOpen, setDiscoveryOpen] = useState(false);
     const [discoveryBusy, setDiscoveryBusy] = useState(false);
@@ -317,7 +383,7 @@ function SkillsPage() {
     const [selectedDiscovered, setSelectedDiscovered] = useState(() => new Set());
     const [globalBusy, setGlobalBusy] = useState(null);
     const [skillBusy, setSkillBusy] = useState(null);
-    const [botBusy, setBotBusy] = useState(null);
+    const [busyBotIds, setBusyBotIds] = useState(() => new Set());
     const [botStatuses, setBotStatuses] = useState({});
     const [installedStatus, setInstalledStatus] = useState(null);
     const [pendingRemoval, setPendingRemoval] = useState(null);
@@ -325,6 +391,11 @@ function SkillsPage() {
     const [removalReferences, setRemovalReferences] = useState([]);
     const [removalError, setRemovalError] = useState(null);
     const [removingNames, setRemovingNames] = useState(() => new Set());
+    const botsRef = useRef(bots);
+    const botAssignmentQueuesRef = useRef(new Map());
+    useEffect(() => {
+        botsRef.current = bots;
+    }, [bots]);
     const installedNames = useMemo(() => new Set(skills.map(skill => skill.name)), [skills]);
     const activeDiscoveryGroup = useMemo(() => {
         if (nativeSkillGroups.length === 0)
@@ -354,70 +425,29 @@ function SkillsPage() {
         }, ms);
         timersRef.current.add(id);
     }), []);
-    const fetchData = useCallback(async () => {
-        const [skillsRes, botsRes] = await Promise.all([
-            fetch('/api/skills'),
-            fetch('/api/bots'),
-        ]);
-        const skillsBody = await skillsRes.json().catch(() => ({}));
-        const botsBody = await botsRes.json().catch(() => ({}));
-        if (!skillsRes.ok) {
-            const error = skillsBody?.error ?? `skills HTTP ${skillsRes.status}`;
-            throw new Error(error === 'not_found_yet' || error === 'not_found' ? tr('skills.apiUnavailable') : error);
-        }
-        if (!botsRes.ok)
-            throw new Error(botsBody?.error ?? `bots HTTP ${botsRes.status}`);
-        return {
-            skills: Array.isArray(skillsBody.skills) ? skillsBody.skills : [],
-            nativeSkillGroups: Array.isArray(skillsBody.nativeSkillGroups) ? skillsBody.nativeSkillGroups : [],
-            bots: Array.isArray(botsBody.bots) ? botsBody.bots : [],
-            trustProjectSkills: skillsBody.trustProjectSkills === 'all' ? 'all' : 'off',
-            delivery: (skillsBody.delivery === 'prompt' || skillsBody.delivery === 'native' ? skillsBody.delivery : 'auto'),
-        };
-    }, [tr]);
-    const refresh = useCallback(async () => {
-        setLoading(true);
-        try {
-            const next = await fetchData();
-            if (!mountedRef.current)
-                return;
-            setSkills(next.skills);
-            setNativeSkillGroups(next.nativeSkillGroups);
-            setBots(next.bots);
-            setTrustProjectSkills(next.trustProjectSkills);
-            setDelivery(next.delivery);
-            setLoadError(null);
-            setSelectedDiscovered(selected => {
-                const valid = new Set();
-                const installed = new Set(next.skills.map(skill => skill.name));
-                for (const group of next.nativeSkillGroups) {
-                    for (const skill of group.skills) {
-                        const path = skill.rootDir ?? skill.source?.root ?? '';
-                        if (path && !installed.has(skill.name) && selected.has(path))
-                            valid.add(path);
-                    }
-                }
-                return valid;
-            });
-        }
-        catch (err) {
-            if (!mountedRef.current)
-                return;
-            setLoadError(err?.message ?? String(err));
-        }
-        finally {
-            if (mountedRef.current)
-                setLoading(false);
-        }
-    }, [fetchData]);
     useEffect(() => {
         mountedRef.current = true;
-        void refresh();
         return () => {
             mountedRef.current = false;
             clearTimers();
         };
-    }, [clearTimers, refresh]);
+    }, [clearTimers]);
+    // Drop native-discovery selections that became invalid after a refresh
+    // (skill got installed, or its group disappeared).
+    useEffect(() => {
+        setSelectedDiscovered(selected => {
+            const valid = new Set();
+            const installed = new Set(skills.map(skill => skill.name));
+            for (const group of nativeSkillGroups) {
+                for (const skill of group.skills) {
+                    const path = skill.rootDir ?? skill.source?.root ?? '';
+                    if (path && !installed.has(skill.name) && selected.has(path))
+                        valid.add(path);
+                }
+            }
+            return valid.size === selected.size ? selected : valid;
+        });
+    }, [skills, nativeSkillGroups]);
     useEffect(() => {
         if (!installedStatus || removingNames.size > 0)
             return undefined;
@@ -446,22 +476,22 @@ function SkillsPage() {
         setStatus({ text: tr('skills.jobRunning'), ok: true });
         for (;;) {
             if (!mountedRef.current)
-                return;
+                return null;
             if (current.status === 'succeeded') {
                 setStatus({ text: tr('skills.saved'), ok: true });
                 if (refreshOnSuccess)
                     await refresh();
-                return;
+                return current;
             }
             if (current.status === 'failed') {
                 throw new Error(current.error ?? 'job_failed');
             }
             await delay(800);
             if (!mountedRef.current)
-                return;
+                return null;
             const body = await jsonRequest(`/api/skills/jobs/${encodeURIComponent(current.id)}`, { method: 'GET' });
             if (!mountedRef.current)
-                return;
+                return null;
             current = body.job;
         }
     }
@@ -474,19 +504,30 @@ function SkillsPage() {
         setInstallCandidates([]);
         setSelectedInstallSkills(new Set());
         setInstallSelectionOpen(false);
+        setInstallDeepScanned(false);
     }
     function sourceRequestBody() {
+        // The source string is sent verbatim: parseSkillInstallSource() on the
+        // daemon is the single authority for classification (GitHub shorthand,
+        // git remotes, agentbuddy identifiers/commands, local paths). Rewriting it
+        // here previously corrupted sources — `git+` was prepended to every
+        // non-github http(s) URL, and client-side guessing diverged from the CLI.
+        const source = installSource.trim();
         return {
-            source: installSource.trim(),
+            source,
             path: installPath.trim() || undefined,
             ref: installRef.trim() || undefined,
+            ...(installForceFullDepth ? { fullDepth: true } : {}),
         };
     }
-    function installRequestBody(skillNames) {
+    function installRequestBody(skillNames, fullDepth = installForceFullDepth || installDeepScanned) {
         const selected = skillNames ?? [...selectedInstallSkills];
         return {
             ...sourceRequestBody(),
             skillNames: selected.length > 0 ? selected : undefined,
+            // If the candidates only surfaced under the recursive scan, the install
+            // must use the same depth or it won't find them again.
+            ...(fullDepth ? { fullDepth: true } : {}),
         };
     }
     async function discoverInstallCandidates() {
@@ -498,12 +539,17 @@ function SkillsPage() {
                 body: JSON.stringify(sourceRequestBody()),
             });
             if (!mountedRef.current)
-                return { skills: [], directInstall: false };
+                return { skills: [], directInstall: false, fullDepth: installForceFullDepth };
             const directInstall = body.discovery?.directInstall === true;
             const skills = Array.isArray(body.discovery?.skills) ? body.discovery.skills : [];
+            const deepScanned = body.discovery?.deepScanned === true;
+            setInstallDeepScanned(deepScanned);
             setInstallCandidates(skills);
-            setSelectedInstallSkills(new Set(skills.map(skill => skill.name)));
-            return { skills, directInstall };
+            // Target semantics: with an install target, only the matching candidate
+            // is preselected; if the target isn't in this source, select nothing so
+            // a wrong repo can't be accidentally bulk-confirmed.
+            setSelectedInstallSkills(selectInstallCandidates(skills, installTargetSkill).selected);
+            return { skills, directInstall, fullDepth: installForceFullDepth || deepScanned };
         }
         finally {
             if (mountedRef.current)
@@ -536,22 +582,29 @@ function SkillsPage() {
             return tr('skills.agentbuddyInvalid');
         return msg;
     }
-    async function submitSkillInstall(skillNames) {
+    async function submitSkillInstall(skillNames, fullDepth = installForceFullDepth || installDeepScanned) {
         setInstallBusy(true);
         try {
             const body = await jsonRequest('/api/skills/install', {
                 method: 'POST',
-                body: JSON.stringify(installRequestBody(skillNames)),
+                body: JSON.stringify(installRequestBody(skillNames, fullDepth)),
             });
             if (!mountedRef.current)
-                return;
-            await waitForSkillJob(body.job, setInstallStatus);
-            if (mountedRef.current)
-                clearInstallDiscovery();
+                return null;
+            const completed = await waitForSkillJob(body.job, setInstallStatus);
+            if (!mountedRef.current || !completed)
+                return null;
+            const installed = (completed.skills ?? (completed.skill ? [completed.skill] : []))
+                .map(skill => skill.name)
+                .filter(Boolean);
+            clearInstallDiscovery();
+            setInstallTargetSkill(null);
+            return [...new Set(installed.length > 0 ? installed : (skillNames ?? []))];
         }
         catch (err) {
             if (mountedRef.current)
                 setInstallStatus({ text: `${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`, ok: false });
+            return null;
         }
         finally {
             if (mountedRef.current)
@@ -574,44 +627,65 @@ function SkillsPage() {
     async function installSkill() {
         if (!installSource.trim()) {
             setInstallStatus({ text: tr('skills.sourceRequired'), ok: false });
-            return;
+            return null;
         }
         try {
             setInstallSelectionOpen(false);
-            const { skills, directInstall } = await discoverInstallCandidates();
+            const { skills, directInstall, fullDepth } = await discoverInstallCandidates();
             if (!mountedRef.current)
-                return;
+                return null;
             // 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;
+                return await submitSkillInstall(undefined, fullDepth);
             }
             if (skills.length === 0) {
                 setInstallStatus({ text: tr('skills.scanEmpty'), ok: false });
-                return;
+                return null;
             }
-            if (skills.length === 1) {
-                await submitSkillInstall([skills[0].name]);
-                return;
+            const { targetMissing } = selectInstallCandidates(skills, installTargetSkill);
+            // Single-candidate fast path only when it doesn't contradict the target:
+            // if the user came to install a specific skill and this source doesn't
+            // have it, fall through to the (empty) selection + warning instead.
+            if (skills.length === 1 && !targetMissing) {
+                return await submitSkillInstall([skills[0].name], fullDepth);
             }
-            setInstallStatus({ text: tr('skills.scanFound', { count: skills.length }), ok: true });
+            setInstallStatus(targetMissing
+                ? { text: tr('skills.installTargetNotFound', { skill: installTargetSkill }), ok: false }
+                : { text: tr('skills.scanFound', { count: skills.length }), ok: true });
             setInstallSelectionOpen(true);
+            return null;
         }
         catch (err) {
             if (mountedRef.current)
                 setInstallStatus({ text: `${tr('skills.failed')}: ${mapInstallError(err?.message ?? String(err))}`, ok: false });
+            return null;
         }
     }
     async function confirmInstallSelection() {
         const selected = [...selectedInstallSkills];
         if (selected.length === 0) {
             setInstallStatus({ text: tr('skills.discoverNothingSelected'), ok: false });
-            return;
+            return null;
         }
-        await submitSkillInstall(selected);
+        return await submitSkillInstall(selected);
+    }
+    async function createPackFromInstalledSkills(input) {
+        await jsonRequest('/api/skill-packs', {
+            method: 'POST',
+            body: JSON.stringify({
+                id: input.id,
+                name: input.name,
+                include: input.skillNames.map(skillName => `skill:${skillName}`),
+            }),
+        });
+        if (!mountedRef.current)
+            return;
+        await refresh();
+        if (mountedRef.current)
+            setActiveTab('packs');
     }
     async function registerDiscoveredSkills() {
         const selected = [...selectedDiscovered].filter(Boolean);
@@ -757,7 +831,10 @@ function SkillsPage() {
                         const bots = Array.isArray(item?.affectedBots)
                             ? item.affectedBots.map((bot) => bot?.botName || bot?.larkAppId || '').filter(Boolean)
                             : referencingBotLabels(name);
-                        return name ? { name, bots } : null;
+                        const packs = Array.isArray(item?.affectedPacks)
+                            ? item.affectedPacks.filter((pack) => typeof pack === 'string')
+                            : [];
+                        return name ? { name, bots, packs } : null;
                     }).filter((item) => item !== null)
                     : [];
                 setRemovalReferences(references);
@@ -775,21 +852,44 @@ function SkillsPage() {
                 setRemovingNames(new Set());
         }
     }
-    async function setBotSkills(appId, names) {
-        const busyKey = `${appId}:set`;
-        setBotBusy(busyKey);
+    function enqueueBotAssignment(appId, operation) {
+        const previous = botAssignmentQueuesRef.current.get(appId) ?? Promise.resolve();
+        setBusyBotIds(current => new Set(current).add(appId));
+        const task = previous.catch(() => undefined).then(operation);
+        botAssignmentQueuesRef.current.set(appId, task);
+        return task.finally(() => {
+            if (botAssignmentQueuesRef.current.get(appId) !== task)
+                return;
+            botAssignmentQueuesRef.current.delete(appId);
+            if (!mountedRef.current)
+                return;
+            setBusyBotIds(current => {
+                const next = new Set(current);
+                next.delete(appId);
+                return next;
+            });
+        });
+    }
+    async function persistBotAssignment(appId, skillNames, packIdsList) {
         setBotStatuses(statuses => ({ ...statuses, [appId]: null }));
         try {
+            // Single merge-write: direct skills + packs are saved together to avoid two
+            // full-policy PUTs racing and silently overwriting each other. Unknown
+            // selectors (e.g. set via CLI) are retained for forward/downgrade compat.
+            const currentBot = botsRef.current.find(bot => bot.larkAppId === appId);
+            const mergedInclude = mergeBotAssignmentSelectors(currentBot?.skills, skillNames, packIdsList);
             const body = await jsonRequest(`/api/bots/${encodeURIComponent(appId)}/skills`, {
                 method: 'PUT',
                 body: JSON.stringify({
                     action: 'set',
-                    policy: names.length > 0 ? { include: names.map(name => `skill:${name}`) } : null,
+                    policy: mergedInclude.length > 0 ? { include: mergedInclude } : null,
                 }),
             });
             if (!mountedRef.current)
                 return;
-            setBots(rows => rows.map(bot => bot.larkAppId === appId ? { ...bot, skills: body.skills ?? null } : bot));
+            const updateBot = (rows) => rows.map(bot => (bot.larkAppId === appId ? { ...bot, skills: body.skills ?? null } : bot));
+            botsRef.current = updateBot(botsRef.current);
+            setBots(updateBot);
             setBotStatuses(statuses => ({
                 ...statuses,
                 [appId]: { text: tr('skills.policySaved'), ok: true },
@@ -804,31 +904,76 @@ function SkillsPage() {
             }
             throw err;
         }
-        finally {
-            if (mountedRef.current)
-                setBotBusy(null);
+    }
+    function setBotAssignment(appId, skillNames, packIdsList) {
+        return enqueueBotAssignment(appId, () => persistBotAssignment(appId, skillNames, packIdsList));
+    }
+    function mutateBotAssignment(appId, selector, present) {
+        return enqueueBotAssignment(appId, async () => {
+            const currentBot = botsRef.current.find(bot => bot.larkAppId === appId);
+            const skillNames = priorityNames(currentBot?.skills);
+            const packIdsList = packIds(currentBot?.skills);
+            const [kind, value] = selector.split(':', 2);
+            const update = (values) => present
+                ? [...new Set([...values, value])]
+                : values.filter(item => item !== value);
+            await persistBotAssignment(appId, kind === 'skill' ? update(skillNames) : skillNames, kind === 'pack' ? update(packIdsList) : packIdsList);
+        });
+    }
+    async function setBotInjection(appId, value) {
+        setBotStatuses(statuses => ({ ...statuses, [appId]: null }));
+        try {
+            await jsonRequest(`/api/bots/${encodeURIComponent(appId)}/skill-injection`, {
+                method: 'PUT',
+                body: JSON.stringify({ skillInjection: value }),
+            });
+            if (!mountedRef.current)
+                return;
+            setBots(rows => rows.map(bot => bot.larkAppId === appId ? { ...bot, skillInjection: value } : bot));
+            setBotStatuses(statuses => ({ ...statuses, [appId]: { text: tr('skills.saved'), ok: true } }));
+        }
+        catch (err) {
+            if (mountedRef.current) {
+                setBotStatuses(statuses => ({ ...statuses, [appId]: { text: `${tr('skills.failed')}: ${err?.message ?? err}`, ok: false } }));
+            }
         }
     }
     const configuredBotCount = bots.filter(bot => policyConfigured(bot.skills)).length;
-    const attachedSkillRefCount = bots.reduce((sum, bot) => sum + policyReferenceCount(bot.skills), 0);
-    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))) }) })] })] }), _jsx(InstalledSkillsLibrary, { skills: skills, busySkill: skillBusy, removingNames: removingNames, status: installedStatus, onUpdate: name => void updateSkill(name), onRequestRemove: requestSkillRemoval }), _jsx(RemoveSkillsDialog, { names: removalDialogOpen ? pendingRemoval : null, references: removalReferences, busy: removingNames.size > 0, error: removalError, onCancel: cancelSkillRemoval, onConfirm: force => void confirmSkillRemoval(force) }), _jsx("dialog", { className: "skills-discovery-dialog", id: "skills-discovery-dialog", ref: discoveryDialogRef, onClose: () => setDiscoveryOpen(false), onClick: event => {
+    // Count every policy selector (skill: AND pack:), not just direct skills —
+    // otherwise pack-only bots show 0 despite being configured.
+    const attachedSkillRefCount = bots.reduce((sum, bot) => sum + (bot.skills?.include?.length ?? 0), 0);
+    // Single relationship model for the whole page: skill ↔ pack ↔ bot edges,
+    // including skills that are referenced but not installed.
+    const skillGraph = useMemo(() => buildSkillGraph(skills, packs, bots, { packsKnown }), [skills, packs, bots, packsKnown]);
+    const danglingSkills = useMemo(() => danglingSkillNames(skillGraph), [skillGraph]);
+    const unassignedPackIds = useMemo(() => [...skillGraph.packs.values()].filter(pack => pack.botIds.length === 0).map(pack => pack.id), [skillGraph]);
+    const botsWithIssues = useMemo(() => [...skillGraph.bots.values()]
+        .filter(bot => bot.health === 'missing' || bot.health === 'pack_missing')
+        .map(bot => bot.larkAppId), [skillGraph]);
+    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.metricPacks') }), _jsx("strong", { children: packsKnown ? packs.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("div", { className: "skills-issue-strip", role: "group", "aria-label": tr('skills.issuesLabel'), children: [danglingSkills.length > 0 && (_jsx("button", { type: "button", className: "skills-issue-badge skills-issue-warn", "data-action": "issue-dangling-skills", title: danglingSkills.join(', '), onClick: () => navigateTo(danglingSkills.length === 1
+                            ? {
+                                tab: 'library',
+                                librarySearch: danglingSkills[0],
+                                openInstallWizard: true,
+                                installTargetSkill: danglingSkills[0],
+                            }
+                            : { tab: 'library', libraryFilterSkills: danglingSkills }), children: tr('skills.issueDangling', { count: danglingSkills.length }) })), unassignedPackIds.length > 0 && (_jsx("button", { type: "button", className: "skills-issue-badge skills-issue-info", "data-action": "issue-unassigned-packs", onClick: () => navigateTo({ tab: 'packs', focusPackIds: unassignedPackIds }), children: tr('skills.issueUnassignedPacks', { count: unassignedPackIds.length }) })), botsWithIssues.length > 0 && (_jsx("button", { type: "button", className: "skills-issue-badge skills-issue-warn", "data-action": "issue-bots-missing", onClick: () => navigateTo({ tab: 'bots', focusBotIds: botsWithIssues }), children: tr('skills.issueBotsMissing', { count: botsWithIssues.length }) })), !loading && packsKnown && danglingSkills.length === 0 && unassignedPackIds.length === 0 && botsWithIssues.length === 0 && (_jsx("span", { className: "skills-issue-badge skills-issue-ok", "data-skills-healthy": true, children: tr('skills.issueNone') }))] }), _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: [packsError && (_jsx("p", { className: "hint-warn", "data-packs-error": true, role: "alert", children: tr(packsKnown ? 'skills.packsLoadError' : 'skills.packsLoadErrorFirst', { error: packsError }) })), _jsxs("div", { className: "skills-tabs", role: "tablist", children: [_jsx("button", { role: "tab", "aria-selected": activeTab === 'library', className: activeTab === 'library' ? 'active' : '', onClick: () => setActiveTab('library'), children: tr('skills.tabLibrary') }), _jsx("button", { role: "tab", "aria-selected": activeTab === 'packs', className: activeTab === 'packs' ? 'active' : '', onClick: () => setActiveTab('packs'), children: tr('skills.tabPacks') }), _jsx("button", { role: "tab", "aria-selected": activeTab === 'bots', className: activeTab === 'bots' ? 'active' : '', onClick: () => setActiveTab('bots'), children: tr('skills.tabBots') }), _jsx("button", { role: "tab", "aria-selected": activeTab === 'delivery', className: activeTab === 'delivery' ? 'active' : '', onClick: () => setActiveTab('delivery'), children: tr('skills.tabDelivery') })] }), activeTab === 'packs' && (_jsx(SkillPacksTab, { skills: skills, packs: packs, packsKnown: packsKnown, onRefresh: () => void refresh(), focusPackId: navIntent?.tab === 'packs' ? navIntent.focusPackId ?? null : null, focusPackIds: navIntent?.tab === 'packs' ? navIntent.focusPackIds ?? null : null, onFocusConsumed: consumeNavIntent, onOpenBot: botId => navigateTo({ tab: 'bots', focusBotIds: [botId] }), onInstallMissingSkill: name => navigateTo({
+                        tab: 'library',
+                        librarySearch: name,
+                        openInstallWizard: true,
+                        installTargetSkill: name,
+                    }) })), activeTab === 'library' && (_jsx(SkillLibraryTab, { skills: skills, nativeSkillGroups: nativeSkillGroups, installSource: installSource, installPath: installPath, installRef: installRef, installFullDepth: installForceFullDepth, 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(); }, onInstallFullDepthChange: (value) => { setInstallForceFullDepth(value); clearInstallDiscovery(); }, onToggleInstallSkill: toggleInstallCandidate, onSelectAllInstallSkills: selectAllInstallCandidates, onConfirmInstallSelection: confirmInstallSelection, onCloseInstallSelection: () => setInstallSelectionOpen(false), onInstall: installSkill, onOpenNativeDiscovery: () => setDiscoveryOpen(true), onCreatePack: createPackFromInstalledSkills, InstallPanel: SkillsInstallPanel, InstalledLibrary: InstalledSkillsLibrary, RemoveDialog: RemoveSkillsDialog, removingNames: removingNames, removalDialogOpen: removalDialogOpen, pendingRemoval: pendingRemoval, removalReferences: removalReferences, removalError: removalError, skillBusy: skillBusy, installedStatus: installedStatus, onUpdateSkill: name => void updateSkill(name), onRequestRemove: requestSkillRemoval, onCancelRemoval: cancelSkillRemoval, onConfirmRemoval: force => void confirmSkillRemoval(force), navIntent: navIntent?.tab === 'library' ? navIntent : null, onNavIntentConsumed: consumeNavIntent, installTargetSkill: installTargetSkill, onClearInstallTarget: () => setInstallTargetSkill(null), packsKnown: packsKnown, onInstallMissing: name => navigateTo({
+                        tab: 'library',
+                        openInstallWizard: true,
+                        installTargetSkill: name,
+                    }), graph: skillGraph, packNames: packs.map(pack => ({ id: pack.id, name: pack.name })), onShowSkillPacks: name => {
+                        const packIdsOfSkill = skillGraph.skills.get(name)?.packIds ?? [];
+                        // One pack → open its editor; several → highlight them all.
+                        navigateTo(packIdsOfSkill.length === 1
+                            ? { tab: 'packs', focusPackId: packIdsOfSkill[0] }
+                            : { tab: 'packs', focusPackIds: packIdsOfSkill });
+                    }, onShowSkillBots: name => navigateTo({ tab: 'bots', focusSkill: name }) })), activeTab === 'bots' && (_jsx(BotAssignmentsTab, { bots: bots, skills: skills, statuses: botStatuses, onSave: setBotAssignment, onMutate: mutateBotAssignment, busyBotIds: busyBotIds, packs: packs, packsKnown: packsKnown, focusBotIds: navIntent?.tab === 'bots' ? navIntent.focusBotIds ?? null : null, focusSkill: navIntent?.tab === 'bots' ? navIntent.focusSkill ?? null : null, onFocusConsumed: consumeNavIntent, onOpenPack: packId => navigateTo({ tab: 'packs', focusPackId: packId }), onOpenSkill: name => navigateTo({ tab: 'library', librarySearch: name }) })), activeTab === 'delivery' && (_jsx(DeliverySettingsTab, { trustProjectSkills: trustProjectSkills, delivery: delivery, globalBusy: globalBusy, onUpdateProject: value => void updateGlobalProject(value), onUpdateDelivery: value => void updateGlobalDelivery(value), bots: bots, onUpdateBotInjection: setBotInjection, botStatuses: botStatuses, SkillSegmented: SkillSegmented })), _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 => {