apps/web/app/components/agents/builder.tsx · flagon-io/g1t

"w-full rounded-md border border-line bg-bg px-3 py-2 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim";

25

const PRIMARY = "inline-flex h-9 items-center justify-center gap-2 rounded-md bg-accent px-4 text-sm font-medium text-bg transition-colors hover:bg-accent-hover disabled:opacity-60";

26

const QUIET =

27

"inline-flex h-9 items-center justify-center gap-2 rounded-md border border-line px-3.5 text-sm font-medium text-fg/85 transition-colors hover:border-line-strong hover:bg-raised hover:text-fg disabled:opacity-60";

28

29

/** What the builder's actions answer. */

30

export type BuilderAnswer =

31

| { intent: "draft"; ok: true; proposal: AgentProposal }

32

| { intent: "try"; ok: true; text: string; charged_micros: number }

33

| { intent: "redraft"; ok: true; redraft: AgentRedraft }

34

| { intent: string; ok: false; error: string };

35

36

/** Things people ask agents to do, to start the box when it is empty. */

37

const EXAMPLES = [

38

"Every Monday, read last week's merged pull requests and write release notes in our Releases space.",

39

"Triage new bug reports: reproduce them from the steps, label them, and ask for what's missing.",

40

"Keep me on top of my week: summarise what I'm mentioned in and what's waiting on me.",

41

"Review database migrations for locking, data loss and missing indexes before they merge.",

42

];

43

44

// ── Describe it ───────────────────────────────────────────────────────────

45

46

/**

47

* The first thing New agent shows: one box, "What should this agent do?",

48

* the roles to start from under it, and the full form for those who want it.

49

*/

50

export function DescribeBox({

slug,

owner,

mayCreate,

templates,

fetcher,

initial,

}: {

slug: string;

owner: boolean;

/** Whether the viewer may create an agent here at all. */

61

mayCreate: boolean;

62

templates: AgentTemplate[];

63

fetcher: ReturnType<typeof useFetcher<BuilderAnswer>>;

64

initial?: string;

65

}) {

66

const [text, setText] = useState(initial ?? "");

67

const [scope, setScope] = useState<"workspace" | "personal">(owner ? "workspace" : "personal");

68

const busy = fetcher.state !== "idle";

69

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

70

return (

71

<div>

72

<fetcher.Form method="post" className="relative">

What should this agent do?

</label>

<div

className={cn(

"rounded-2xl border border-line bg-surface p-1.5 shadow-sm transition-colors focus-within:border-accent/60 focus-within:ring-4 focus-within:ring-accent/10",

81

!mayCreate && "opacity-60",

)}

>

<textarea

id="description"

name="description"

value={text}

onChange={(event) => setText(event.target.value)}

89

onKeyDown={(event) => {

90

if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && text.trim().length >= 3) event.currentTarget.form?.requestSubmit();

91

}}

92

disabled={!mayCreate || busy}

93

rows={4}

94

maxLength={2000}

95

placeholder="Describe the job: what it does, for whom, and what good looks like."

96

className="block w-full resize-none bg-transparent px-3 pt-2.5 pb-1 text-base leading-relaxed outline-none placeholder:text-faint sm:text-[0.9375rem]"

/>

{owner ? (

{(

[

["workspace", "The workspace", <Users key="w" size={13} />],

104

["personal", "Just me", <Lock key="p" size={13} />],

105

] as const

106

).map(([value, label, icon]) => (

<button

key={value}

type="button"

role="radio"

aria-checked={scope === value}

112

onClick={() => setScope(value)}

113

className={cn(

114

"inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs font-medium transition-colors",

115

scope === value ? "bg-raised text-fg shadow-sm ring-1 ring-line-strong" : "text-muted hover:text-fg",

)}

>

{icon}

{label}

</button>

))}

</div>

) : (

Your personal agent

</span>

)}

<span className="hidden text-xs text-faint sm:inline">{busy ? "Drafting…" : "Ctrl+Enter"}</span>

131

132

133

{busy ? "Drafting…" : "Draft it"}

</button>

</div>

</div>

</fetcher.Form>

{error && <p className="mt-3 rounded-lg border border-danger/40 bg-danger/10 px-4 py-2.5 text-sm text-danger">{error}</p>}

139

140

{scope === "personal"

141

? "Only you can talk to it, in your direct message with it. It spends from your own budget: $20 a month and $2 a session to start."

142

: "Everyone in the workspace can talk to it. It starts with the workspace's budget for a new agent."}{" "}

143

Drafting is a quick model call charged to you; nothing is saved until you create it.

144

</p>

145

{!text && mayCreate && (

146

147

<p className="text-xs font-medium text-faint">For example</p>

148

149

{EXAMPLES.map((example) => (

<button

type="button"

onClick={() => setText(example)}

154

className="w-full rounded-lg border border-line bg-bg px-3 py-2 text-left text-[0.8125rem] leading-snug text-muted transition-colors hover:border-line-strong hover:text-fg"

>

{example}

</button>

</li>

))}

</ul>

</div>

)}

{templates.length > 0 && (

164

165

<p className="text-xs font-medium text-faint">or start from a role</p>

166

167

{templates.map((template) => (

168

169

<Link

170

to={`?template=${encodeURIComponent(template.id)}`}

171

preventScrollReset

172

className="inline-flex h-8 items-center gap-2 rounded-full border border-line bg-surface pr-3 pl-1 text-[0.8125rem] text-fg/85 transition-colors hover:border-line-strong hover:text-fg"

>

{template.title}

</Link>

</li>

))}

<li>

<Link

to="?template=blank"

preventScrollReset

className="inline-flex h-8 items-center gap-1.5 rounded-full border border-dashed border-line-strong px-3 text-[0.8125rem] text-muted transition-colors hover:text-fg"

>

Edit all fields

</Link>

</li>

</ul>

Read each role in full

</Link>

</p>

</div>

)}

</div>

);

}

// ── The drafted agent ─────────────────────────────────────────────────────

201

202

function Label({ htmlFor, children, hint }: { htmlFor?: string; children: ReactNode; hint?: ReactNode }) {

return (

{children}

</label>

{hint && <span className="text-xs text-faint">{hint}</span>}

</div>

);

}

function Section({ title, about, children }: { title: string; about?: ReactNode; children: ReactNode }) {

214

return (

215

216

<h3 className="text-xs font-semibold tracking-wide text-faint uppercase">{title}</h3>

217

{about && <p className="mt-1 text-xs text-muted">{about}</p>}

218

<div className="mt-3 space-y-3">{children}</div>

</section>

);

}

/**

* The drafted agent as a card to edit: who it is, its job, what it is

225

* responsible for, its voice, the skills it keeps on, what it needs

226

* connected, routines that would suit it, its model limits and budget.

227

* Only the name and the job are required.

228

*/

229

export function ProposalCard({

slug,

owner,

proposal,

value,

onChange,

}: {

slug: string;

owner: boolean;

proposal: AgentProposal;

239

value: BuilderDefinition;

240

onChange: (next: BuilderDefinition) => void;

241

}) {

242

const ideas = [proposal.definition.display_name, ...proposal.name_ideas];

243

const [idea, setIdea] = useState(0);

244

const [handleEdited, setHandleEdited] = useState(false);

245

const set = (patch: Partial<BuilderDefinition>) => onChange({ ...value, ...patch });

246

const rename = (name: string) => set({ display_name: name, ...(handleEdited ? {} : { handle: cleanHandle(name) }) });

247

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

248

const suggested = new Set(proposal.skills);

249

const hints = proposal.integrations.map((s) => integrationHint(slug, s, owner)).filter((h) => h !== null);

250

const seed = value.avatar_seed || value.handle || "agent";

return (

<button

type="button"

aria-label="Another face"

260

onClick={() => set({ avatar_seed: `${value.handle || "agent"}-${Math.random().toString(36).slice(2, 7)}` })}

261

className="absolute -right-1.5 -bottom-1.5 flex size-6 items-center justify-center rounded-full border border-line bg-bg text-muted shadow-sm transition-colors hover:text-fg"

>

</button>

</Hint>

</div>

<div>

<input id="b-name" value={value.display_name} onChange={(e) => rename(e.target.value)} className={FIELD} autoComplete="off" data-1p-ignore required />

272

{ideas.length > 1 && (

<button

type="button"

aria-label="Another name"

277

onClick={() => {

278

const next = (idea + 1) % ideas.length;

279

setIdea(next);

280

rename(ideas[next]!);

281

}}

282

className="flex size-9.5 shrink-0 items-center justify-center rounded-md border border-line text-muted transition-colors hover:border-line-strong hover:bg-raised hover:text-fg"

>

</button>

</Hint>

)}

</div>

</div>

<div>

<Label htmlFor="b-handle">Handle</Label>

<input

id="b-handle"

value={value.handle}

onChange={(e) => {

setHandleEdited(true);

299

set({ handle: e.target.value });

300

}}

301

className="min-w-0 grow bg-transparent py-2 pr-3 pl-0.5 font-mono text-sm outline-none"

autoComplete="off"

data-1p-ignore

/>

</div>

</div>

<div>

<Label htmlFor="b-title">Title</Label>

309

<input id="b-title" value={value.title ?? ""} onChange={(e) => set({ title: e.target.value })} placeholder="Release Manager" className={FIELD} autoComplete="off" />

</div>

<div>

Department

</Label>

<input id="b-department" value={value.department ?? ""} onChange={(e) => set({ department: e.target.value })} placeholder="Engineering" className={FIELD} autoComplete="off" />

</div>

</div>

</div>

<textarea

aria-label="Job"

value={value.instructions}

324

onChange={(e) => set({ instructions: e.target.value })}

325

rows={8}

326

required

327

className={`${FIELD} resize-y font-mono text-[0.8125rem] leading-relaxed`}

/>

<div>

Responsibilities

</Label>

<textarea

id="b-duties"

value={(value.responsibilities ?? []).join("\n")}

336

onChange={(e) => set({ responsibilities: e.target.value.split("\n").slice(0, 8) })}

337

onBlur={() => set({ responsibilities: (value.responsibilities ?? []).map((d) => d.trim()).filter(Boolean) })}

338

rows={Math.max(3, (value.responsibilities ?? []).length)}

339

className={`${FIELD} resize-y`}

/>

</div>

</Section>

{PRESETS.map((option) => (

<button

key={option.value}

type="button"

role="radio"

aria-checked={value.personality_preset === option.value}

352

onClick={() => set({ personality_preset: option.value })}

353

className={cn(

354

"h-8 rounded-md text-[0.8125rem] font-medium transition-colors",

355

value.personality_preset === option.value ? "bg-raised text-fg shadow-sm ring-1 ring-line-strong" : "text-muted hover:text-fg",

)}

>

{option.label}

</button>

))}

</div>

<input aria-label="In its own words" value={value.personality ?? ""} onChange={(e) => set({ personality: e.target.value })} placeholder="In its own words (optional)" className={FIELD} />

</Section>

{FOUNDATIONAL_SKILLS.map((skill) => {

368

const on = !off.has(skill.id);

return (

<label

key={skill.id}

className="flex min-h-10 cursor-pointer items-center gap-2.5 rounded-lg border border-line bg-bg px-3 py-2 text-sm has-checked:border-accent/50 has-checked:bg-accent/5"

>

<input

type="checkbox"

checked={on}

onChange={() => {

const next = new Set(off);

379

if (on) next.add(skill.id);

380

else next.delete(skill.id);

381

set({ skills_off: FOUNDATIONAL_SKILLS.map((s) => s.id).filter((id) => next.has(id)) });

382

}}

383

className="size-4 accent-(--color-accent)"

384

/>

385

<span className="min-w-0 grow truncate">{skill.name}</span>

386

{suggested.has(skill.id) && suggested.size < FOUNDATIONAL_SKILLS.length && (

Suggested

</Badge>

)}

</label>

);

})}

</div>

</Section>

{hints.length > 0 && (

398

399

400

{hints.map((hint) => (

{hint.why && <span className="block text-xs text-muted">{hint.why}</span>}

406

</span>

407

{hint.action === "soon" ? (

) : (

{hint.action === "connect" ? "Connect" : "Ask an owner"}

</Link>

)}

</li>

))}

</ul>

</Section>

)}

{proposal.routines.length > 0 && (

421

<Section

422

title="Routines that would suit it"

423

about={value.scope === "personal" ? "Personal agents can't run routines yet. An owner can promote it to a workspace agent, which can." : "Set them up on its Routines tab once it exists."}

424

>

425

426

{proposal.routines.map((routine) => (

427

428

429

{routine.name} <span className="font-normal text-muted">· {routine.when}</span>

430

</p>

431

{routine.instructions && <p className="mt-0.5 text-xs text-muted">{routine.instructions}</p>}

</li>

))}

</ul>

</Section>

)}

{(["floor", "ceiling"] as const).map((key) => (

441

442

<Label htmlFor={`b-${key}`}>{key === "floor" ? "Floor" : "Ceiling"}</Label>

443

<Select

444

value={value.routing?.[key] ?? "none"}

445

onValueChange={(tier) =>

446

set({ routing: { floor: null, ceiling: null, providers: [], pinned: null, ...value.routing, [key]: tier === "none" ? null : (tier as "small") } })

}

>

</SelectTrigger>

<SelectItem value="none">{key === "floor" ? "No floor" : "No ceiling"}</SelectItem>

454

{(["small", "large", "frontier"] as const).map((tier) => (

455

456

{TIER_LABELS[tier].split(":")[0]}

</SelectItem>

))}

</SelectContent>

</Select>

</div>

))}

{(

[

["monthly_micros", "Monthly"],

466

["task_micros", "Per session"],

467

] as const

468

).map(([key, label]) => (

{label}

</Label>

<input

id={`b-${key}`}

inputMode="decimal"

defaultValue={dollarsField(value.budget?.[key])}

479

onBlur={(e) => {

480

const micros = microsFromDollars(e.target.value);

481

set({ budget: { ...value.budget, [key]: micros == null || Number.isNaN(micros) ? null : micros } });

482

}}

483

placeholder="No cap"

484

className="min-w-0 grow bg-transparent px-2 py-2 text-sm tabular-nums outline-none placeholder:text-faint"

autoComplete="off"

data-1p-ignore

/>

</div>

</div>

))}

</div>

</Section>

</div>

);

}

// ── Try it ────────────────────────────────────────────────────────────────

498

499

/**

500

* A test chat with the drafted agent, as it is in the card right now:

501

* charged to the person trying it, and nothing kept once they leave.

502

*/

503

export function TryChat({ definition, onReset }: { definition: BuilderDefinition; onReset?: () => void }) {

504

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

505

const [turns, setTurns] = useState<DraftTurn[]>([]);

506

const [text, setText] = useState("");

507

const [spent, setSpent] = useState(0);

508

const handled = useRef<unknown>(null);

509

const log = useRef<HTMLDivElement>(null);

510

const busy = fetcher.state !== "idle";

511

useEffect(() => {

512

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

513

handled.current = fetcher.data;

514

if (fetcher.data.ok && fetcher.data.intent === "try") {

515

const answer = fetcher.data;

516

setTurns((now) => [...now, { role: "assistant", content: answer.text }]);

517

setSpent((n) => n + answer.charged_micros);

518

}

519

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

520

// The newest message in view, scrolling only the conversation, never the page.

521

useEffect(() => {

522

if (log.current) log.current.scrollTop = log.current.scrollHeight;

523

}, [turns.length, busy]);

524

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

525

const send = () => {

526

const body = text.trim();

527

if (!body || busy) return;

528

const next: DraftTurn[] = [...turns, { role: "user", content: body }];

529

setTurns(next);

530

setText("");

531

fetcher.submit({ intent: "try", definition: JSON.stringify(definition), messages: JSON.stringify(next.slice(-24)) }, { method: "post" });

532

};

533

const name = definition.display_name || "your agent";

return (

<p className="truncate text-xs text-muted">Talk to {name} as it is drafted. Charged to you; nothing is saved.</p>

541

</div>

542

{turns.length > 0 && (

<button

type="button"

aria-label="Start over"

onClick={() => {

setTurns([]);

onReset?.();

}}

className="flex size-8 items-center justify-center rounded-md text-faint transition-colors hover:bg-raised hover:text-fg"

>

</button>

</Hint>

)}

</div>

{turns.length === 0 && (

560

561

562

<p className="mt-3 text-sm font-medium">Ask {name} something it would get asked</p>

563

<p className="mt-1 max-w-xs text-xs text-muted">It answers from its job and voice. It has no tools or memory until you create it.</p>

564

</div>

565

)}

566

{turns.map((turn, at) =>

567

turn.role === "user" ? (

568

569

<p className="max-w-[85%] rounded-2xl rounded-br-md bg-accent/15 px-3.5 py-2 text-sm whitespace-pre-wrap text-fg">{turn.content}</p>

</div>

) : (

</div>

</div>

),

)}

{busy && (

{name} is typing…

</div>

)}

{error && <p className="rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-xs text-danger">{error}</p>}

587

</div>

588

<form

589

className="flex items-end gap-2 border-t border-line p-2.5"

590

onSubmit={(event) => {

591

event.preventDefault();

send();

}}

>

Message {name}

</label>

<textarea

id="try-message"

value={text}

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

602

onKeyDown={(e) => {

603

if (e.key === "Enter" && !e.shiftKey) {

e.preventDefault();

send();

}

}}

rows={1}

maxLength={4000}

placeholder={`Message ${name}`}

611

className="max-h-32 min-h-9 min-w-0 grow resize-none rounded-md border border-line bg-bg px-3 py-2 text-sm outline-none placeholder:text-faint focus:border-accent-dim"

/>

</button>

</form>

{spent > 0 && <p className="border-t border-line px-4 py-1.5 text-[0.6875rem] text-faint tabular-nums">Trying it has cost you {money(spent)} so far.</p>}

</div>

);

}

// ── Create ────────────────────────────────────────────────────────────────

623

624

/** Saves the drafted agent: its hello is waiting in a direct message. */

625

export function CreateDraft({ definition, onEditAll }: { definition: BuilderDefinition; onEditAll: () => void }) {

626

const navigation = useNavigation();

627

const busy = navigation.state !== "idle" && navigation.formData?.get("intent") === "create_draft";

628

const ready = definition.display_name.trim() && definition.instructions.trim() && definition.handle.trim();

return (

Edit all fields

</button>

{busy ? "Creating…" : `Create ${definition.display_name.trim() || "agent"}`}

</button>

</Form>

);

}

// ── Change it in words ────────────────────────────────────────────────────

645

646

/**

647

* "Tell <name> what to change": the change is drafted, shown field by

648

* field with the job as a diff, and saved as a new version only when the

649

* person says so.

650

*/

651

export function RedraftBox({ agent }: { agent: WorkspaceAgent }) {

652

const fetcher = useFetcher<BuilderAnswer>({ key: `redraft:${agent.id}` });

653

const save = useFetcher<{ ok?: boolean; saved?: boolean; errors?: Record<string, string> }>({ key: `redraft-save:${agent.id}` });

654

const [text, setText] = useState("");

655

const [shown, setShown] = useState<AgentRedraft | null>(null);

656

const handled = useRef<unknown>(null);

657

useEffect(() => {

658

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

659

handled.current = fetcher.data;

660

if (fetcher.data.ok && fetcher.data.intent === "redraft") setShown(fetcher.data.redraft);

661

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

662

useEffect(() => {

663

if (save.state === "idle" && save.data?.saved) {

setShown(null);

setText("");

}

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

668

const busy = fetcher.state !== "idle";

669

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

670

const saveError = save.state === "idle" && save.data && !save.data.saved ? (save.data.errors?.form ?? save.data.errors?.handle ?? null) : null;

671

const skillName = (id: string) => FOUNDATIONAL_SKILLS.find((s) => s.id === id)?.name ?? id;

672

const rows = shown ? changeRows(agent, shown.changes, skillName) : [];

673

return (

674

675

<fetcher.Form method="post" className="p-4 sm:p-5">

Tell {agent.display_name} what to change

680

</h2>

681

<p className="mt-1 text-xs text-muted">Say it in your own words. You'll see the change before it's saved as version {agent.version + 1}. Drafting it is charged to you.</p>

What should change

</label>

<textarea

id="redraft-request"

name="request"

value={text}

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

691

onKeyDown={(e) => {

692

if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && text.trim().length >= 3) e.currentTarget.form?.requestSubmit();

}}

rows={2}

maxLength={1000}

placeholder={`Answer in Spanish, and keep replies under five sentences`}

697

className={`${FIELD} grow resize-y`}

/>

{busy ? "Drafting…" : "Draft the change"}

702

</button>

703

</div>

704

{error && <p className="mt-3 rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger">{error}</p>}

</fetcher.Form>

{shown && (

<span className="font-medium">{shown.summary}</span>{" "}

710

711

{rows.length} {rows.length === 1 ? "change" : "changes"} to version {shown.from_version}.

</span>

</p>

{saveError && <p className="mt-3 rounded-lg border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger">{saveError}</p>}

716

<save.Form method="post" className="mt-4 flex flex-wrap items-center justify-end gap-2">

<button type="button" onClick={() => setShown(null)} className={QUIET}>

Discard

</button>

{save.state !== "idle" ? "Saving…" : `Save as version ${agent.version + 1}`}

</button>

</save.Form>

</div>

)}

</section>

);

}

/** Each field a change touches, before and after; the job and duties as a line diff. */

735

export function ChangeList({ rows }: { rows: ChangeRow[] }) {

return (

{rows.map((row) => (

<dt className="text-xs font-medium text-faint">{row.label}</dt>

741

{row.lines ? (

742

743

{row.lines.map((line, at) => (

<div

key={at}

className={cn(

"flex gap-2 px-2 whitespace-pre-wrap",

748

line.kind === "added" && "bg-success/10 text-success",

749

line.kind === "removed" && "bg-danger/10 text-danger line-through decoration-danger/40",

750

line.kind === "same" && "text-muted",

)}

>

{line.kind === "added" ? "+" : line.kind === "removed" ? "−" : " "}

755

</span>

756

<span className="sr-only">{line.kind === "added" ? "Added: " : line.kind === "removed" ? "Removed: " : ""}</span>

</div>

))}

</dd>

) : (

<span className="text-muted line-through decoration-line-strong">{row.before}</span>

→

</span>

<span className="sr-only">becomes</span>

768

<span className="font-medium text-fg">{row.after}</span>

</dd>

)}

</div>

))}

</dl>

);

}

/** Whose personal agent it is, and, for owners, making it the workspace's. */

778

export function PersonalNotice({ agent, owner, mine }: { agent: WorkspaceAgent; owner: boolean; mine: boolean }) {

779

const navigation = useNavigation();

780

const [asking, setAsking] = useState(false);

781

const busy = navigation.state !== "idle" && navigation.formData?.get("intent") === "promote";

return (

{mine ? "Your personal agent" : `@${agent.personal_owner ?? "a member"}'s personal agent`}

</h2>

{mine

? "Only you can talk to it, in your direct message with it, and it spends from your budget. It isn't in channels, and other agents don't hand it work."

791

: `Only @${agent.personal_owner ?? "its member"} talks to it, and it spends from their budget. As an owner you can archive it, or make it a workspace agent everyone can talk to.`}

</p>

{owner && (

{asking ? (