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 }> {

35

const viewer = requireUser(context, request);

36

const slug = params.owner.toLowerCase();

37

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

38

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

39

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

40

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

41

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

42

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

43

}

44

45

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

46

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

47

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

48

const intent = "save";

49

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

50

const added = [];

51

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

52

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

53

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

54

added.push(one);

55

}

56

const input: SkillInput = {

57

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

58

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

59

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

60

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

61

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

62

add_files: added,

63

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

64

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

65

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

66

};

67

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

68

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

69

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

70

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

71

}

72

73

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

74

const { slug, detail, unavailable } = loaderData;

75

const result = useActionData<ActionResult>();

76

const navigation = useNavigation();

77

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

78

const id = useId();

79

const editing = !!params.name;

80

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

81

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

82

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

83

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

84

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

85

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

86

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

87

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

88

89

if (editing && unavailable) {

return (

{params.name}

</Link>

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

98

<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}`;

104

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

return (

{editing ? params.name : "Skills"}

110

</Link>

111

112

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

113

114

{draft

115

? `${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.`

116

: "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")}>

130

{description.length} / {SKILL_DESCRIPTION_MAX}

</span>

</div>

<Textarea

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

name="description"

rows={3}

required

value={description}

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

140

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

141

/>

142

<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>

147

148

<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)}

165

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."}

166

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>}

171

</div>

172

)}

173

<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>

178

<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>

179

180

{AGENT_TOOL_GROUPS.map((group) => (

181

182

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

183

184

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

))}

</div>

</div>

))}

</div>

</fieldset>

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

195

196

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

197

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

198

</p>

199

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

200

201

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

202

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

203

return (

204

205

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

206

207

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

208

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

209

<button

210

type="button"

211

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

212

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

213

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

214

>

215

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

</button>

</li>

);

})}

</ul>

)}

<SelectField

aria-label="Folder"

options={[

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

228

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

229

]}

230

value={folder}

231

onValueChange={setFolder}

232

className="w-36 font-mono"

233

/>

234

235

<span className="sr-only">Add files</span>

</label>

</div>

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

</fieldset>

<CheckboxOption

name="requires_computer"

244

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

245

label="Needs a computer of its own"

246

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."

247

/>

248

249

{editing && !draft && (

250

251

<Field>

252

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

</Field>

{attached > 0 && (

<>

<CheckboxOption

checked={updateAll}

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

261

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

262

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>

287

288

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

289

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

290

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

291

<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>

296

<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>

297

{detail && !draft && (

298

299

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

</p>

)}

</div>

</aside>

</Form>

</div>

);

}