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

return sidebar?.ok ? sidebar.value.spaces.filter((space) => !space.archived_at).map((space) => ({ id: space.id, name: space.name, kind: space.kind })) : [];

48

}

49

50

const NO_ANSWER = "The agents service didn't answer. Try again in a moment.";

51

52

/**

53

* Drafting from a description and trying the draft answer here; creating

54

* makes the agent, then opens a direct message with it: talking to it is

55

* how work starts. If chat does not answer, its page instead.

56

*/

57

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

58

assertSameOrigin(request);

59

const viewer = requireUser(context, request);

60

const slug = params.owner.toLowerCase();

61

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

62

const form = await request.formData();

63

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

64

if (intent === "draft") {

65

const scope = form.get("scope") === "personal" ? "personal" : form.get("scope") === "workspace" ? "workspace" : null;

66

const drafted = await workspaceAgents.draft(slug, viewer, { description: String(form.get("description") ?? ""), scope }).catch(() => null);

67

if (!drafted) return { intent, ok: false, error: NO_ANSWER } satisfies BuilderAnswer;

68

return (drafted.ok ? { intent, ok: true, proposal: drafted.value } : { intent, ok: false, error: drafted.error.message }) satisfies BuilderAnswer;

69

}

70

if (intent === "try") {

71

const definition = readDefinition(form.get("definition"));

72

let messages: DraftTurn[] = [];

73

try {

74

messages = JSON.parse(String(form.get("messages") ?? "[]")) as DraftTurn[];

} catch {

messages = [];

}

if (!definition) return { intent, ok: false, error: "The draft couldn't be read. Reload and try again." } satisfies BuilderAnswer;

79

const answered = await workspaceAgents.tryDraft(slug, viewer, { definition, messages }).catch(() => null);

80

if (!answered) return { intent, ok: false, error: NO_ANSWER } satisfies BuilderAnswer;

81

return (answered.ok ? { intent, ok: true, ...answered.value } : { intent, ok: false, error: answered.error.message }) satisfies BuilderAnswer;

82

}

83

let input;

84

if (intent === "create_draft") {

85

const definition = readDefinition(form.get("definition"));

86

if (!definition) return { errors: { form: "The draft couldn't be read. Reload and try again." } };

87

input = { ...definition, handle: cleanHandle(definition.handle || definition.display_name) };

88

} else {

89

const read = readAgentForm(form);

90

if (!read.ok) return { errors: read.errors };

91

input = read.input;

92

}

93

const made = await workspaceAgents.create(slug, viewer, input).catch(() => null);

94

if (!made) return { errors: { form: NO_ANSWER } };

95

if (!made.ok) {

96

const field = made.error.code === "conflict" ? "handle" : "form";

97

return { errors: { [field]: made.error.message } };

98

}

99

const dm = await chat.openDm(slug, viewer, [{ kind: "agent", id: made.value.id }]).catch(() => null);

100

throw redirect(dm?.ok ? channelPath(slug, dm.value) : `/${slug}/-/agents/${made.value.handle}`);

101

}

102

103

/** A template's suggested names (`name_ideas`), when the agents service sends them. */

104

function ideasOf(template: AgentTemplate | undefined): string[] {

105

if (!template) return [];

106

return [template.display_name, ...(template.name_ideas ?? []).filter((name) => name !== template.display_name)];

107

}

108

109

function draftFrom(template: AgentTemplate): AgentDraft {

110

// A name to enjoy first, its handle after it; the template's own name when it has none.

111

const name = ideasOf(template)[0] ?? template.display_name;

112

return {

113

...BLANK_DRAFT,

114

handle: cleanHandle(name),

115

display_name: name,

116

title: template.title,

117

department: template.department,

118

responsibilities: template.responsibilities,

119

subagents: template.subagents,

120

role: template.role,

121

instructions: template.instructions,

122

personality_preset: template.personality_preset,

123

routing: template.routing,

124

template: template.id,

};

}

/** The drafted agent as the full form takes it. */

129

function formDraft(d: BuilderDefinition): AgentDraft {

return {

...BLANK_DRAFT,

handle: d.handle,

display_name: d.display_name,

134

title: d.title ?? "",

135

department: d.department ?? "",

136

responsibilities: d.responsibilities ?? [],

137

instructions: d.instructions,

138

personality_preset: d.personality_preset ?? "crisp",

139

personality: d.personality ?? "",

140

routing: { floor: d.routing?.floor ?? null, ceiling: d.routing?.ceiling ?? null, providers: [], pinned: null },

141

budget: { monthly_micros: d.budget?.monthly_micros ?? null, daily_micros: d.budget?.daily_micros ?? null, task_micros: d.budget?.task_micros ?? null },

};

}

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

146

const [search, setSearch] = useSearchParams();

147

const chosen = search.get("template");

148

const { owner, mayCreate } = loaderData;

149

const templates = loaderData.templates ?? [];

150

const template = templates.find((t) => t.id === chosen);

151

const errors = actionData && "errors" in actionData ? actionData.errors : undefined;

152

const drafter = useFetcher<BuilderAnswer>({ key: "agent-draft" });

153

const [proposal, setProposal] = useState<AgentProposal | null>(null);

154

const [definition, setDefinition] = useState<BuilderDefinition | null>(null);

155

const [full, setFull] = useState(false);

156

const handled = useRef<unknown>(null);

157

useEffect(() => {

158

if (drafter.state !== "idle" || !drafter.data || handled.current === drafter.data) return;

159

handled.current = drafter.data;

160

if (drafter.data.ok && drafter.data.intent === "draft") {

161

setProposal(drafter.data.proposal);

162

setDefinition({ ...drafter.data.proposal.definition, avatar_seed: drafter.data.proposal.definition.handle });

163

setFull(false);

164

}

165

}, [drafter.state, drafter.data]);

166

167

// A role, or every field from nothing: the form, as before.

168

const formFrom = template ? draftFrom(template) : chosen === "blank" ? BLANK_DRAFT : full && definition ? formDraft(definition) : null;

169

const personal = full && definition ? definition.scope === "personal" : !owner;

const back = (

Agents

</Link>

);

if (formFrom) {

return (

{back}

<h1 className="text-2xl font-semibold tracking-tight">New agent</h1>

183

184

{personal ? "Your personal agent: only you can talk to it, and it spends from your budget. " : ""}Every field, as you'll find it on its profile later.{" "}

<button

type="button"

onClick={() => {

setFull(false);

setSearch({}, { preventScrollReset: true, replace: true });

190

}}

191

className="text-fg underline-offset-2 hover:underline"

192

>

193

{definition ? "Back to the draft" : "Describe it instead"}

</button>

.

</p>

</header>

{!full && <TemplateGallery templates={templates} chosen={chosen} onChoose={(id) => setSearch(id ? { template: id } : {}, { preventScrollReset: true, replace: true })} />}

199

200

{errors?.form && <p className="mb-6 rounded-lg border border-danger/40 bg-danger/10 px-4 py-3 text-sm text-danger">{errors.form}</p>}

<AgentForm

draft={formFrom}

errors={errors}

submit="Create agent"

205

intent="create"

206

formKey={full ? `draft:${definition?.handle}` : (chosen ?? "blank")}

207

nameIdeas={full && proposal ? [proposal.definition.display_name, ...proposal.name_ideas] : ideasOf(template)}

208

teams={personal ? [] : loaderData.teams}

209

personal={personal}

210

spaces={loaderData.spaces}

211

seed={full ? definition?.avatar_seed : undefined}

212

hidden={{

213

scope: full && definition ? definition.scope : owner ? "workspace" : "personal",

214

...(full && definition ? { skills_off: (definition.skills_off ?? []).join(","), avatar_seed: definition.avatar_seed ?? "" } : {}),

}}

/>

</div>

</div>

);

}

if (proposal && definition) {

return (

{back}

<h1 className="text-2xl font-semibold tracking-tight">Meet {definition.display_name || "your agent"}</h1>

229

230

Drafted from what you described. Change anything, try it in the test chat, and create it when it's right.{" "}

231

{definition.scope === "personal" && (

232

233

234

Only you will be able to talk to it.

</span>

)}

</p>

</div>

<button

type="button"

onClick={() => {

setProposal(null);

setDefinition(null);

}}

className="text-sm text-muted hover:text-fg"

>

Describe it again

</button>

</header>

{errors?.form && <p className="mb-6 rounded-lg border border-danger/40 bg-danger/10 px-4 py-3 text-sm text-danger">{errors.form}</p>}

251

{errors?.handle && <p className="mb-6 rounded-lg border border-danger/40 bg-danger/10 px-4 py-3 text-sm text-danger">{errors.handle}</p>}

<CreateDraft definition={definition} onEditAll={() => setFull(true)} />

</div>

</div>

</div>

</div>

);

}

return (

{back}

<h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">What should this agent do?</h1>

270

<p className="mt-2 text-sm text-muted">Describe the job in a sentence or a paragraph. g1t drafts the whole agent for you to change, try and create.</p>

271

{!mayCreate && (

272

273

This workspace's owners have turned off personal agents, so only owners create agents here. Ask an owner in chat if you'd like one.

274

</p>

275

)}

276

{loaderData.templates == null && <p className="mt-5 rounded-lg border border-line bg-surface px-4 py-3 text-sm text-muted">Roles to start from aren't available right now; the agents service didn't answer.</p>}

</div>

</div>

</div>

);

}