mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Separate required skills into own section on agent skills page

Browse source 
Required/built-in Paperclip skills are now shown in a dedicated
"Required by Paperclip" section at the bottom of the agent skills tab,
with checkboxes that are checked and disabled. Optional skills remain
in the main section above.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta 2026-03-16 16:01:20 -05:00
parent 0b76b1aced
commit 10d06bc1ca
1 changed files with 105 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
ui/src/pages/AgentDetail.tsx
View file

@ -1275,13 +1275,16 @@ function AgentSkillsTab({
<PageSkeleton variant="list" /> <PageSkeleton variant="list" />
) : ( ) : (
<> <>
<section className="border-y border-border"> {(() => {
{(companySkills ?? []).length === 0 ? ( const allSkills = companySkills ?? [];
<div className="px-3 py-6 text-sm text-muted-foreground"> const optionalSkills = allSkills.filter(
Import skills into the company library first, then attach them here. (skill) => !adapterEntryByName.get(skill.slug)?.required,
</div> );
) : ( const requiredSkills = allSkills.filter(
(companySkills ?? []).map((skill) => { (skill) => adapterEntryByName.get(skill.slug)?.required,
);
const renderSkillRow = (skill: (typeof allSkills)[number]) => {
const checked = skillDraft.includes(skill.slug); const checked = skillDraft.includes(skill.slug);
const adapterEntry = adapterEntryByName.get(skill.slug); const adapterEntry = adapterEntryByName.get(skill.slug);
const required = Boolean(adapterEntry?.required); const required = Boolean(adapterEntry?.required);
@ -1345,9 +1348,39 @@ function AgentSkillsTab({
</div> </div>
</label> </label>
); );
}) };
)}
if (allSkills.length === 0) {
return (
<section className="border-y border-border">
<div className="px-3 py-6 text-sm text-muted-foreground">
Import skills into the company library first, then attach them here.
</div>
</section> </section>
);
}
return (
<>
{optionalSkills.length > 0 && (
<section className="border-y border-border">
{optionalSkills.map(renderSkillRow)}
</section>
)}
{requiredSkills.length > 0 && (
<section className="border-y border-border">
<div className="border-b border-border bg-muted/40 px-3 py-2">
<span className="text-xs font-medium text-muted-foreground">
Required by Paperclip
</span>
</div>
{requiredSkills.map(renderSkillRow)}
</section>
)}
</>
);
})()}
{desiredOnlyMissingSkills.length > 0 && ( {desiredOnlyMissingSkills.length > 0 && (
<div className="rounded-xl border border-amber-300/60 bg-amber-50/60 px-4 py-3 text-sm text-amber-800 dark:border-amber-500/30 dark:bg-amber-950/20 dark:text-amber-200"> <div className="rounded-xl border border-amber-300/60 bg-amber-50/60 px-4 py-3 text-sm text-amber-800 dark:border-amber-500/30 dark:bg-amber-950/20 dark:text-amber-200">