9a9e591b72
Clarify automatic skill availability while making forced-reading selections easier to manage. - Replace the skill picker with a searchable multi-select checkbox list and explicit loading, error, empty, and unavailable states. - Label forced, disabled, and undiscovered skills consistently across agent detail and list views, including a clear None state. - Update localized guidance, documentation, regression coverage, and the published package changeset. Files changed: .changeset/fn-9115-skills-ui.md | 7 + docs/dashboard-guide.md | 4 + .../agent-detail-settings-theme-styling.test.ts | 3 +- .../dashboard/app/components/AgentDetailView.css | 7 +- .../dashboard/app/components/AgentDetailView.tsx | 35 ++- packages/dashboard/app/components/AgentsView.css | 4 + packages/dashboard/app/components/AgentsView.tsx | 13 +- .../dashboard/app/components/NewAgentDialog.tsx | 5 +- .../dashboard/app/components/SkillMultiselect.css | 258 +++------------------ .../dashboard/app/components/SkillMultiselect.tsx | 178 +++++--------- .../AgentDetailView.mobile-scroll.test.tsx | 4 +- .../AgentDetailView.skills-procedure.test.tsx | 59 +++-- .../app/components/__tests__/AgentsView.test.tsx | 19 +- .../components/__tests__/SkillMultiselect.test.tsx | 81 ++++--- .../__tests__/useDiscoveredSkillsCache.test.ts | 16 ++ .../app/hooks/useDiscoveredSkillsCache.ts | 13 +- .../app/utils/__tests__/agentSkills.test.ts | 28 +++ packages/dashboard/app/utils/agentSkills.ts | 69 +++++- packages/i18n/locales/en/app.json | 21 +- packages/i18n/locales/es/app.json | 21 +- packages/i18n/locales/fr/app.json | 21 +- packages/i18n/locales/ko/app.json | 21 +- packages/i18n/locales/pt-BR/app.json | 21 +- packages/i18n/locales/zh-CN/app.json | 21 +- packages/i18n/locales/zh-TW/app.json | 21 +- 25 files changed, 493 insertions(+), 457 deletions(-) Fusion-Task-Id: FN-9115 Fusion-Task-Lineage: 18229b87-d0dc-41e7-9333-2d12df852486 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
31 lines
4.0 KiB
CSS
31 lines
4.0 KiB
CSS
/* === Skill Multiselect === */
|
|
/*
|
|
FNXC:AgentSettingsTheming 2026-08-16-04:27:
|
|
Skills can be loading, error, empty, no-match, populated, all-selected, or disabled in Agent Settings. Keep the filter, checkbox list, chips, and removable actions token-based so all states remain legible in every theme.
|
|
*/
|
|
.skill-multiselect { display: flex; flex-direction: column; gap: var(--space-sm); color: var(--text); }
|
|
.skill-multiselect-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--text-muted); }
|
|
.skill-multiselect-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
|
|
.skill-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: calc(var(--space-xs) * .5) calc(var(--space-sm) - var(--space-xs) * .5); background: var(--surface-muted); color: var(--text); border: var(--btn-border-width) solid var(--border-subtle); border-radius: var(--radius-sm); font-size: var(--font-size-xs); line-height: var(--line-height-tight); }
|
|
.skill-chip-name { max-width: calc(var(--space-xl) * 6 + var(--space-md)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.skill-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: calc(var(--space-md) + var(--space-xs)); height: calc(var(--space-md) + var(--space-xs)); padding: 0; background: transparent; border: var(--btn-border-width) solid transparent; border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--font-size-sm); cursor: pointer; }
|
|
.skill-chip-remove:hover:not(:disabled) { color: var(--text); background: var(--surface-hover); border-color: var(--border); }
|
|
.skill-chip-remove:focus-visible, .skill-multiselect-filter:focus-visible { outline: none; border-color: var(--todo); box-shadow: var(--focus-ring-strong); }
|
|
.skill-chip-remove:disabled { opacity: var(--opacity-disabled, .6); cursor: not-allowed; }
|
|
.skill-multiselect-filter { width: 100%; }
|
|
.skill-multiselect-list { display: flex; flex-direction: column; max-height: calc(var(--space-xl) * 12); overflow: auto; border: var(--btn-border-width) solid var(--border); border-radius: var(--radius-md); }
|
|
.skill-multiselect-option { display: flex; align-items: center; gap: var(--space-sm); min-height: calc(var(--space-xl) + var(--space-lg)); padding: var(--space-sm); cursor: pointer; border-bottom: var(--btn-border-width) solid var(--border-subtle); }
|
|
.skill-multiselect-option:last-child { border-bottom: 0; }
|
|
.skill-multiselect-option:has(input:disabled) { cursor: not-allowed; opacity: var(--opacity-disabled, .6); }
|
|
.skill-multiselect-option__content { display: flex; flex: 1; flex-direction: column; min-width: 0; }
|
|
.skill-multiselect-option__path { overflow: hidden; color: var(--text-muted); font-size: var(--font-size-xs); text-overflow: ellipsis; white-space: nowrap; }
|
|
.skill-state-marker { color: var(--text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
|
|
.skill-state-marker[data-skill-state="disabled"] { color: var(--color-warning); }
|
|
.skill-state-marker[data-skill-state="unknown"] { color: var(--color-error); }
|
|
.skill-state-marker--forced { color: var(--todo); }
|
|
.skill-multiselect-loading, .skill-multiselect-empty, .skill-multiselect-no-matches, .skill-multiselect-all-selected, .skill-multiselect-error { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-muted); font-size: var(--font-size-sm); padding: var(--space-xs) 0; }
|
|
.skill-multiselect-error { color: var(--color-error); }
|
|
.badge-skill { background: var(--bg-tertiary); color: var(--text-muted); }
|
|
@media (max-width: 768px) { .skill-multiselect, .skill-multiselect-chips, .skill-multiselect-filter, .skill-multiselect-list { width: 100%; } .skill-multiselect-option { min-height: calc(var(--space-xl) + var(--space-xl)); } .skill-chip-remove { min-width: calc(var(--space-lg) + var(--space-xs)); min-height: calc(var(--space-lg) + var(--space-xs)); } }
|
|
@media (max-width: 480px) { .skill-multiselect { gap: var(--space-xs); } .skill-chip { width: 100%; justify-content: space-between; } .skill-multiselect-option { align-items: flex-start; flex-wrap: wrap; } }
|