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

26

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

27

const QUIET =

28

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

29

30

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

31

export type BuilderAnswer =

32

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

33

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

34

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

35

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

36

37

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

38

const EXAMPLES = [

39

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

40

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

41

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

42

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

43

];

44

45

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

46

47

/**

48

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

49

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

50

*/

51

export function DescribeBox({

slug,

owner,

mayCreate,

templates,

fetcher,

initial,

}: {

slug: string;

owner: boolean;

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

62

mayCreate: boolean;

63

templates: AgentTemplate[];

64

fetcher: ReturnType<typeof useFetcher<BuilderAnswer>>;

65

initial?: string;

66

}) {

67

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

68

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

69

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

70

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

71

return (

72

<div>

73

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

82

!mayCreate && "opacity-60",

)}

>

<textarea

id="description"

name="description"

value={text}

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

90

onKeyDown={(event) => {

91

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

92

}}

93

disabled={!mayCreate || busy}

94

rows={4}

95

maxLength={2000}

96

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

97

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} />],

105

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

106

] as const

107

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

<button

key={value}

type="button"

role="radio"

aria-checked={scope === value}

113

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

114

className={cn(

115

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

116

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>

132

133

134

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

140

141

{scope === "personal"

142

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

143

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

144

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

145

</p>

146

{!text && mayCreate && (

147

148

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

149

150

{EXAMPLES.map((example) => (

<button

type="button"

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

155

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

165

166

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

167

168

{templates.map((template) => (

169

170

<Link

171

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

172

preventScrollReset

173

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

202

203

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

215

return (

216

217

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

218

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

219

<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

226

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

227

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

228

* Only the name and the job are required.

229

*/

230

export function ProposalCard({

slug,

owner,

proposal,

value,

onChange,

}: {

slug: string;

owner: boolean;

proposal: AgentProposal;

240

value: BuilderDefinition;

241

onChange: (next: BuilderDefinition) => void;

242

}) {

243

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

244

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

245

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

246

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

247

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

248

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

249

const suggested = new Set(proposal.skills);

250

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

251

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

return (

<button

type="button"

aria-label="Another face"

261

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

262

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

273

{ideas.length > 1 && (

<button

type="button"

aria-label="Another name"

278

onClick={() => {

279

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

280

setIdea(next);

281

rename(ideas[next]!);

282

}}

283

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

300

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

301

}}

302

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>

310

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

325

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

326

rows={8}

327

required

328

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

/>

<div>

Responsibilities

</Label>

<textarea

id="b-duties"

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

337

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

338

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

339

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

340

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

/>

</div>

</Section>

{PRESETS.map((option) => (

<button

key={option.value}

type="button"

role="radio"

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

353

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

354

className={cn(

355

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

356

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) => {

369

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-[[data-state=checked]]:border-accent/50 has-[[data-state=checked]]:bg-accent/5"

>

<Checkbox

checked={on}

onCheckedChange={() => {

378

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

/>

384

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

385

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

Suggested

</Badge>

)}

</label>

);

})}

</div>

</Section>

{hints.length > 0 && (

397

398

399

{hints.map((hint) => (

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

405

</span>

406

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

) : (

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

</Link>

)}

</li>

))}

</ul>

</Section>

)}

{proposal.routines.length > 0 && (

420

<Section

421

title="Routines that would suit it"

422

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

423

>

424

425

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

426

427

428

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

429

</p>

430

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

</li>

))}

</ul>

</Section>

)}

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

440

441

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

442

<Select

443

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

444

onValueChange={(tier) =>

445

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>

453

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

454

455

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

</SelectItem>

))}

</SelectContent>

</Select>

</div>

))}

{(

[

["monthly_micros", "Monthly"],

465

["task_micros", "Per session"],

466

] as const

467

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

{label}

</Label>

<input

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

inputMode="decimal"

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

478

onBlur={(e) => {

479

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

480

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

481

}}

482

placeholder="No cap"

483

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

497

498

/**

499

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

500

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

501

*/

502

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

503

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

504

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

505

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

506

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

507

const handled = useRef<unknown>(null);

508

const log = useRef<HTMLDivElement>(null);

509

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

510

useEffect(() => {

511

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

512

handled.current = fetcher.data;

513

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

514

const answer = fetcher.data;

515

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

516

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

517

}

518

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

519

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

520

useEffect(() => {

521

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

522

}, [turns.length, busy]);

523

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

524

const send = () => {

525

const body = text.trim();

526

if (!body || busy) return;

527

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

528

setTurns(next);

529

setText("");

530

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

531

};

532

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>

540

</div>

541

{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 && (

559

560

561

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

562

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

563

</div>

564

)}

565

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

566

turn.role === "user" ? (

567

568

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

586

</div>

587

<form

588

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

589

onSubmit={(event) => {

590

event.preventDefault();

send();

}}

>

Message {name}

</label>

<textarea

id="try-message"

value={text}

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

601

onKeyDown={(e) => {

602

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

e.preventDefault();

send();

}

}}

rows={1}

maxLength={4000}

placeholder={`Message ${name}`}

610

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

622

623

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

624

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

625

const navigation = useNavigation();

626

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

627

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

644

645

/**

646

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

647

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

648

* person says so.

649

*/

650

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

651

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

652

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

653

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

654

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

655

const handled = useRef<unknown>(null);

656

useEffect(() => {

657

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

658

handled.current = fetcher.data;

659

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

660

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

661

useEffect(() => {

662

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

setShown(null);

setText("");

}

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

667

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

668

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

669

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

670

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

671

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

672

return (

673

674

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

Tell {agent.display_name} what to change

679

</h2>

680

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

690

onKeyDown={(e) => {

691

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

696

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

/>

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

701

</button>

702

</div>

703

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

709

710

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

715

<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. */

734

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

return (

{rows.map((row) => (

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

740

{row.lines ? (

741

742

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

<div

key={at}

className={cn(

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

747

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

748

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

749

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

)}

>

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

754

</span>

755

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

767

<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. */

777

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

778

const navigation = useNavigation();

779

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

780

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

790

: `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 ? (