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

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ slug: string; detail: SkillDetail | null; unavailable: boolean }> {

36

const viewer = requireUser(context, request);

37

const slug = params.owner.toLowerCase();

38

if (!roleIn(viewer, slug)) throw data(null, { status: 404 });

39

if (!params.name) return { slug, detail: null, unavailable: false };

40

const found = await skillLibrary.skill(slug, viewer, params.name).catch(() => null);

41

if (found && !found.ok && found.error.code === "not_found") throw data(null, { status: 404 });

42

if (found?.ok && !found.value.skill.can_edit) throw redirect(skillsPath(slug, params.name));

43

return { slug, detail: found?.ok ? found.value : null, unavailable: !found?.ok };

44

}

45

46

/** Saves the skill: a new one, a new version, or a draft published. */

47

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

48

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

49

const intent = "save";

50

const folder = form.get("folder") === "scripts" ? "scripts" : "resources";

51

const added = [];

52

for (const file of uploadedFiles(form, "files").slice(0, 50)) {

53

const one = await skillFileOf(`${folder}/${file.name.replace(/[\\/]/g, "_")}`, file);

54

if ("error" in one) return { ok: false, intent, error: one.error, field: "files" };

55

added.push(one);

56

}

57

const input: SkillInput = {

58

name: String(form.get("name") ?? "").trim(),

59

description: String(form.get("description") ?? ""),

60

instructions: String(form.get("instructions") ?? ""),

61

tools: form.getAll("tools").map(String),

62

requires_computer: form.get("requires_computer") === "on",

63

add_files: added,

64

remove_files: form.getAll("remove").map(String),

65

note: String(form.get("note") ?? "") || null,

66

update_attachments: form.get("update_attachments") !== "off",

67

};

68

const saved = await skillLibrary.saveSkill(slug, viewer, params.name ?? null, input).catch(() => null);

69

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

70

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

71

throw redirect(skillsPath(slug, saved.value.skill.name));

72

}

73

74

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

75

const { slug, detail, unavailable } = loaderData;

76

const result = useActionData<ActionResult>();

77

const navigation = useNavigation();

78

const busy = navigation.state !== "idle" && navigation.formMethod === "POST";

79

const id = useId();

80

const editing = !!params.name;

81

const draft = detail?.skill.status === "draft";

82

const [description, setDescription] = useState(detail?.skill.description ?? "");

83

const [instructions, setInstructions] = useState(detail?.instructions ?? "");

84

const [preview, setPreview] = useState(false);

85

const [removed, setRemoved] = useState<string[]>([]);

86

const [folder, setFolder] = useState("resources");

87

const [updateAll, setUpdateAll] = useState(true);

88

const back = editing ? skillsPath(slug, params.name) : skillsPath(slug);

89

90

if (editing && unavailable) {

return (

{params.name}

</Link>

<p className="font-medium">{params.name} can't be edited right now</p>

99

<p className="mt-1.5 text-sm text-muted">The agents service didn't answer. Reload in a moment.</p>

</div>

</div>

);

}

const title = !editing ? "Write a skill" : draft ? "Review the draft" : `Edit ${params.name}`;

105

const attached = detail?.skill.attachments.length ?? 0;

return (

{editing ? params.name : "Skills"}

111

</Link>

112

113

<h1 className="text-2xl font-semibold tracking-tight">{title}</h1>

114

115

{draft

116

? `${originText(detail!.skill.origin)}. Read it as you would a pull request: change what's wrong, take out anything private, then publish it. No agent uses it before then.`

117

: "Agents see the name and when to use it on every reply, and read the instructions when a request matches, so keep the first short and the second complete."}

</p>

</header>

<Field>

<FieldDescription>Lowercase letters, digits and hyphens. Agents ask for it by this name.</FieldDescription>

</Field>

<Field>

<span className={cn("text-xs tabular-nums", description.length > SKILL_DESCRIPTION_MAX ? "text-danger" : "text-faint")}>

131

{description.length} / {SKILL_DESCRIPTION_MAX}

</span>

</div>

<Textarea

id={`${id}-description`}

name="description"

rows={3}

required

value={description}

onChange={(e) => setDescription(e.target.value)}

141

placeholder="Use when someone asks for release notes or a changelog for a version."

142

/>

143

<FieldDescription>The SKILL.md description. Start with “Use when” and name the requests it is for.</FieldDescription>

</Field>

<Field>

<FieldLabel htmlFor={`${id}-instructions`}>Instructions</FieldLabel>

148

149

<button type="button" role="tab" aria-selected={!preview} onClick={() => setPreview(false)} className={cn("inline-flex items-center gap-1 rounded px-2 py-1 text-xs", !preview ? "bg-raised font-medium text-fg" : "text-muted hover:text-fg")}>

Write

</button>

<button type="button" role="tab" aria-selected={preview} onClick={() => setPreview(true)} className={cn("inline-flex items-center gap-1 rounded px-2 py-1 text-xs", preview ? "bg-raised font-medium text-fg" : "text-muted hover:text-fg")}>

Preview

</button>

</div>

</div>

<Textarea

id={`${id}-instructions`}

name="instructions"

rows={18}

required

value={instructions}

onChange={(e) => setInstructions(e.target.value)}

166

placeholder={"# Release notes\n\n1. Read the pull requests merged since the last tag (recent_activity).\n2. Group them by area: Added, Changed, Fixed.\n3. Write the notes as a doc, linking each pull request."}

167

className={cn("font-mono text-[0.8125rem]", preview && "hidden")}

/>

{preview && (

{instructions.trim() ? <Markdown source={instructions} /> : <p className="text-sm text-faint">Nothing to preview yet.</p>}

172

</div>

173

)}

174

<FieldDescription>Markdown, in the second person: the steps, what to read first, the checks before it's done. Agents get it word for word.</FieldDescription>

</Field>

<legend className="text-sm font-medium text-fg-soft">Tools it uses</legend>

179

<p className="mt-1 text-xs text-faint">Naming a tool never gives it to an agent. An agent without one is told that part doesn't work where it's asked.</p>

180

181

{AGENT_TOOL_GROUPS.map((group) => (

182

183

<p className="mb-2 text-xs font-medium text-muted">{group.group}</p>

184

185

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

))}

</div>

</div>

))}

</div>

</fieldset>

<legend className="text-sm font-medium text-fg-soft">Files</legend>

196

197

Templates and references go in resources/, and agents read them when the instructions point to them. Scripts go in scripts/: they run only on an agent's own

198

computer, which is coming, so for now they're kept with the skill and never run. At most 1 MB for everything.

199

</p>

200

{detail && detail.files.length > 0 && (

201

202

{detail.files.map((file) => {

203

const gone = removed.includes(file.path);

204

return (

205

206

{file.script ? <FileCode size={14} className="shrink-0 text-faint" aria-hidden /> : <FileText size={14} className="shrink-0 text-faint" aria-hidden />}

207

208

<span className="shrink-0 text-xs text-faint">{skillSize(file.bytes)}</span>

209

{gone && <input type="hidden" name="remove" value={file.path} />}

210

<button

211

type="button"

212

onClick={() => setRemoved((now) => (gone ? now.filter((p) => p !== file.path) : [...now, file.path]))}

213

aria-label={gone ? `Keep ${file.path}` : `Remove ${file.path}`}

214

className="flex size-7 shrink-0 items-center justify-center rounded-md text-faint hover:bg-raised hover:text-fg"

215

>

216

{gone ? <Undo2 size={14} /> : <X size={14} />}

</button>

</li>

);

})}

</ul>

)}

<SelectField

aria-label="Folder"

options={[

{ value: "resources", label: "resources/" },

229

{ value: "scripts", label: "scripts/" },

230

]}

231

value={folder}

232

onValueChange={setFolder}

233

className="w-36 font-mono"

/>

</div>

<FieldError>{result && !result.ok && result.field === "files" ? result.error : null}</FieldError>

</fieldset>

<CheckboxOption

name="requires_computer"

242

defaultChecked={detail?.requires_computer && !detail.files.some((f) => f.script)}

243

label="Needs a computer of its own"

244

description="For a skill that only works with a shell, a browser or code it runs. Agents don't have their own computer yet, so it is marked Coming and agents follow only the parts they can. A skill with scripts is marked anyway."

245

/>

246

247

{editing && !draft && (

248

249

<Field>

250

<FieldLabel htmlFor={`${id}-note`}>What changed</FieldLabel>

</Field>

{attached > 0 && (

<>

<CheckboxOption

checked={updateAll}

onCheckedChange={(checked) => setUpdateAll(checked === true)}

259

label="Use the new version wherever I can change it"

260

description={`It is attached in ${attached} ${attached === 1 ? "place" : "places"}. Left unticked, they keep their version and show an update available.`}

/>

</>

)}

</div>

)}

{result && !result.ok && result.field !== "files" && (

{result.error}

</p>

)}

Cancel

</Link>

{busy ? "Saving…" : draft ? "Publish" : editing ? "Save a new version" : "Add to the library"}

</button>

</div>

</div>

<p className="font-medium text-fg">A good skill</p>

285

286

<li>Covers one kind of work, the way your team does it.</li>

287

<li>Says when to use it in one sentence, so agents pick it at the right time.</li>

288

<li>Lists the steps, where to look first, and the checks before it's done.</li>

289

<li>Points to its files by path, such as resources/template.md.</li>

</ul>

</div>

<p className="text-sm font-medium text-fg">Saved as SKILL.md</p>

294

<p className="mt-1.5">The open format other tools read, so a skill moves between them and can live in a repository. Every save is a new version; attachments pin the one they use.</p>

295

{detail && !draft && (

296

297

<Badge tone="neutral">Now version {detail.skill.version}</Badge>

</p>

)}

</div>

</aside>

</Form>

</div>

);

}