apps/web/app/routes/workspace/agents/skills.tsx · flagon-io/g1t

1

import { ArrowUpCircle, BookOpen, ChartColumn, Check, Code, FileText, FolderOpen, Globe, Library, type LucideIcon, Plus, Send, Store } from "lucide-react";

2

import { Link, data, useFetcher, useOutletContext } from "react-router";

import {

type AgentSkill,

type AgentSkillLine,

type AgentSkills,

FOUNDATIONAL_SKILLS,

FOUNDATIONAL_SKILLS_VERSION,

10

FOUNDATIONAL_SKILL_IDS,

type LibrarySkill,

type SkillAbility,

type SkillCategory,

type WorkspaceAgent,

} from "@g1t/contracts";

16

17

import type { Route } from "./+types/skills";

18

import { agentsAction, answer, readOrNull } from "../../../components/agents/actions.server";

19

import { type ActionResult, BUTTONS } from "../../../components/agents/dialogs";

20

import { AttachToAgentDialog, AttachmentChip, NeedsComputer, skillsPath } from "../../../components/agents/skills";

21

import { Badge } from "../../../components/ui/badge";

22

import { Hint } from "../../../components/ui/hint";

23

import { Switch } from "../../../components/ui/switch";

24

import { cn } from "../../../lib/cn";

25

import { skillLibrary, workspaceAgents } from "../../../lib/services.server";

26

import { requireUser, roleIn } from "../../../lib/session.server";

27

28

/** A library skill's id, as an agent's `skills_off` holds it. */

29

const LIBRARY_ID = /^skl_[0-9a-z]{26}$/;

30

31

/**

32

* The agent's skills: whether the viewer owns the workspace (owners turn

33

* skills on and off), the library's skills that reach it, and for owners

34

* the library's others, to attach.

35

*/

36

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ isOwner: boolean; skills: AgentSkills | null; attachable: Pick<LibrarySkill, "name" | "description" | "version">[] }> {

37

const viewer = requireUser(context, request);

38

const slug = params.owner.toLowerCase();

39

const role = roleIn(viewer, slug);

40

if (!role) throw data(null, { status: 404 });

41

const isOwner = role === "owner";

42

const [skills, library] = await Promise.all([

43

readOrNull(skillLibrary.agentSkills(slug, viewer, params.handle.toLowerCase())),

44

isOwner ? readOrNull(skillLibrary.library(slug, viewer)) : Promise.resolve(null),

45

]);

46

const has = new Set(skills?.skills.map((s) => s.id) ?? []);

47

const attachable = (library?.skills ?? []).filter((s) => s.status === "published" && !has.has(s.id)).map((s) => ({ name: s.name, description: s.description, version: s.version }));

48

return { isOwner, skills, attachable };

49

}

50

51

/** Turns a skill on or off (a new version of the agent), attaches one, or moves one to its newest version. */

52

export async function action({ params, context, request }: Route.ActionArgs): Promise<ActionResult> {

53

const { viewer, slug, isOwner, form } = await agentsAction(request, context, params.owner);

54

const intent = String(form.get("intent") ?? "");

55

const handle = params.handle.toLowerCase();

56

if (intent === "attach") return answer(intent, skillLibrary.attachSkill(slug, viewer, String(form.get("name") ?? ""), "agent", handle));

57

if (intent === "pin") return answer(intent, skillLibrary.pinSkill(slug, viewer, String(form.get("name") ?? ""), String(form.get("attachment") ?? ""), null));

58

if (intent !== "skill") return { ok: false, intent, error: "Unknown request." };

59

if (!isOwner) return { ok: false, intent, error: "Only the workspace's owners turn an agent's skills on or off." };

60

const skill = String(form.get("skill") ?? "");

61

if (!FOUNDATIONAL_SKILL_IDS.includes(skill) && !LIBRARY_ID.test(skill)) return { ok: false, intent, error: "There is no such skill." };

62

const current = await workspaceAgents.get(slug, handle, viewer).catch(() => null);

63

if (!current) return { ok: false, intent, error: "The agents service didn't answer. Try again in a moment." };

64

if (!current.ok) return { ok: false, intent, error: current.error.message };

65

const off = new Set(current.value.skills_off ?? []);

66

if (form.get("on") === "true") off.delete(skill);

67

else off.add(skill);

68

return answer(intent, workspaceAgents.update(slug, handle, viewer, { skills_off: [...off] }));

69

}

70

71

const ICONS: Record<SkillCategory, LucideIcon> = { documents: FileText, research: Globe, data: ChartColumn, code: Code, communication: Send, files: FolderOpen };

72

73

/**

74

* An agent's skills: g1t's foundational ones, what each does today and

75

* with which of the agent's tools, what's coming; then the library's that

76

* reach it, through it, its teams or every agent. Owners switch each on or

77

* off, attach more, and move one to its newest version.

78

*/

79

export default function SkillsTab({ loaderData, params }: Route.ComponentProps) {

80

const agent = useOutletContext<WorkspaceAgent>();

81

const { isOwner, skills, attachable } = loaderData;

82

const fetcher = useFetcher<ActionResult>({ key: `skills-${agent.id}` });

83

// While a switch's change is on its way, it shows as changed.

84

const pending = fetcher.formData && fetcher.formData.get("intent") === "skill" ? { skill: String(fetcher.formData.get("skill")), on: fetcher.formData.get("on") === "true" } : null;

85

const isOn = (id: string) => (pending?.skill === id ? pending.on : !(agent.skills_off ?? []).includes(id));

86

const onCount = FOUNDATIONAL_SKILLS.filter((skill) => isOn(skill.id)).length;

87

const error = fetcher.state === "idle" && fetcher.data && !fetcher.data.ok ? fetcher.data.error : null;

88

const library = skills?.skills.filter((s) => !s.foundational) ?? [];

89

const slug = params.owner;

return (

Skills tell {agent.display_name} how to do a kind of work with the tools it already has, so asking it for a PDF gets you a PDF. It sees each skill's name and when to

94

use it, and reads the rest when a request matches. Skills never add a tool or a permission, and say plainly what isn't possible yet.

</p>

{error && (

{error}

</p>

)}

Foundational, from g1t <span className="text-faint">{onCount === FOUNDATIONAL_SKILLS.length ? FOUNDATIONAL_SKILLS.length : `${onCount} of ${FOUNDATIONAL_SKILLS.length} on`}</span>

106

</h2>

107

<p className="text-xs text-faint">Version {FOUNDATIONAL_SKILLS_VERSION}, updated with every release</p>

108

</div>

109

{isOwner && <p className="mt-1 text-xs text-faint">Turning a skill off takes it out of {agent.display_name}'s instructions. Its tools stay as they are.</p>}

110

111

{FOUNDATIONAL_SKILLS.map((skill) => (

))}

</div>

</section>

From your library <span className="text-faint">{library.length}</span>

122

</h2>

123

<p className="mt-1 text-xs text-faint">Attached to {agent.display_name}, to a team it is on, or to every agent. Each uses the version pinned where it is attached.</p>

</div>

Open the library

</Link>

{isOwner && (

<AttachToAgentDialog

agentName={agent.display_name}

skills={attachable}

trigger={

Attach a skill

</button>

}

/>

)}

</div>

</div>

{skills == null ? (

<p className="mt-3 rounded-xl border border-dashed border-line px-4 py-6 text-center text-sm text-muted">The library didn't answer. Reload in a moment.</p>

146

) : library.length === 0 ? (

147

148

None yet. Skills your workspace writes, imports or saves from sessions reach {agent.display_name} once they are attached.

</p>

) : (

{library.map((line) => (

))}

</ul>

)}

{skills && skills.over_limit > 0 && (

158

159

{agent.display_name} has {skills.over_limit} more than the 100 library skills an agent can have; it doesn't get the last {skills.over_limit}. Turn some off or

detach them.

</p>

)}

</section>

</section>

</div>

);

}

function ComingRow({ icon: Icon, title, body }: { icon: LucideIcon; title: string; body: string }) {

return (

<h3 className="text-sm font-medium">{title}</h3>

</div>

</div>

</div>

);

}

function ComingBadge() {

189

return <Badge tone="neutral">Coming</Badge>;

190

}

191

192

function LibraryLine({

slug,

line,

on,

agentName,

isOwner,

fetcher,

}: {

slug: string;

line: AgentSkillLine;

on: boolean;

agentName: string;

isOwner: boolean;

fetcher: ReturnType<typeof useFetcher<ActionResult>>;

206

}) {

207

const toggle = (next: boolean) => fetcher.submit({ intent: "skill", skill: line.id, on: String(next) }, { method: "post" });

return (

{line.name}

</Link>

<span className="text-xs text-faint">v{line.version}</span>

216

{line.requires_computer && <NeedsComputer />}

217

</div>

218

<p className="mt-0.5 text-sm text-muted">{line.description}</p>

219

220

{line.via && <AttachmentChip attachment={{ scope: line.via, label: line.via_label ?? "", version: Number(line.version) }} />}

221

{line.update != null &&

222

(line.can_change ? (

223

<fetcher.Form method="post">

Update to v{line.update}

</button>

</Hint>

</fetcher.Form>

) : (

<span className="text-xs text-warn">Version {line.update} is out</span>

))}

</div>

</div>

{isOwner ? (

</span>

</Hint>

) : (

{on ? "On" : "Off"}

</Badge>

)}

</li>

);

}

function SkillCard({

skill,

on,

agentName,

isOwner,

fetcher,

}: {

skill: AgentSkill;

on: boolean;

agentName: string;

isOwner: boolean;

fetcher: ReturnType<typeof useFetcher<ActionResult>>;

266

}) {

267

const Icon = ICONS[skill.category];

268

const ready = skill.abilities.filter((ability) => ability.status === "ready");

269

const coming = skill.abilities.filter((ability) => ability.status === "coming");

270

const toggle = (next: boolean) => fetcher.submit({ intent: "skill", skill: skill.id, on: String(next) }, { method: "post" });

271

const label = `${skill.name} for ${agentName}`;

return (

</span>

{skill.name}

</h3>

<p className="mt-0.5 text-sm text-muted">{skill.description}</p>

</div>

{isOwner ? (

</span>

</Hint>

) : (

{on ? "On" : "Off"}

</Badge>

)}

</header>

{ready.map((ability) => (

298

299

))}

300

{coming.map((ability) => (

))}

</ul>

<span className="group-open:hidden">Read the playbook</span>

308

<span className="hidden group-open:inline">Hide the playbook</span>

</summary>

What {agentName} reads when it uses {skill.name}. {skill.when}

313

</p>

314

<p className="mt-2 rounded-lg bg-raised/60 px-3 py-2.5 text-[0.8125rem] leading-relaxed whitespace-pre-wrap text-fg-soft">{skill.instructions}</p>

</div>

</details>

</article>

);

}

function Ability({ ability }: { ability: SkillAbility }) {

322

const ready = ability.status === "ready";

return (

{ready ? (

) : (

</span>

)}

<span className={cn("text-sm", ready ? "text-fg" : "text-muted")}>{ability.label}</span>

335

{!ready && <ComingBadge />}

336

</div>

337

<p className="mt-0.5 text-xs text-faint">{ability.note}</p>

338

{ready && ability.tools.length > 0 && (

339

340

{ability.tools.map((tool) => (

{tool}

</li>

))}

</ul>

)}

</div>

</li>

);

}