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

export async function loader({ params, context, request }: Route.LoaderArgs): Promise<{ overview: AgentsOverview | null; archived: ArchivedAgent[]; justArchived: string | null }> {

38

// Signed out, sign in first (as Chat and Docs do), rather than a 404.

39

const viewer = requireUser(context, request);

40

if (!viewer || !roleIn(viewer, params.owner)) throw data(null, { status: 404 });

41

const slug = params.owner.toLowerCase();

42

const [overview, archived] = await Promise.all([readOrNull(workspaceAgents.overview(slug, viewer)), readOrNull(workspaceAgents.listArchived(slug, viewer))]);

43

const justArchived = new URL(request.url).searchParams.get("archived");

44

return { overview, archived: archived ?? [], justArchived: justArchived && /^[a-z0-9-]{1,40}$/.test(justArchived) ? justArchived : null };

45

}

46

47

/** Owners set the workspace's agent budget; archived agents are restored or deleted for good from here. */

48

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

49

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

50

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

51

// Whether members create personal agents: on unless an owner turns it off.

52

if (intent === "personal_agents") {

53

return answer("personal_agents", workspaceAgents.setPolicy(slug, viewer, { members_create_agents: form.get("members_create_agents") === "on" }));

54

}

55

// The Archived section (components/agents/archived.tsx): back to life, under its handle or a new one; or gone for good, with its handle typed back.

56

if (intent === "restore") {

57

const newHandle = String(form.get("new_handle") ?? "").trim();

58

return answer("restore", workspaceAgents.restore(slug, String(form.get("handle") ?? ""), viewer, { id: String(form.get("id") ?? "") || null, handle: newHandle || null }));

59

}

60

if (intent === "destroy") {

61

return answer("destroy", workspaceAgents.destroy(slug, String(form.get("handle") ?? ""), viewer, String(form.get("confirm") ?? ""), { id: String(form.get("id") ?? "") || null }));

62

}

63

if (form.get("intent") !== "policy") return { ok: false as const, error: "Unknown request." };

64

const monthly = microsFromDollars(form.get("monthly"));

65

const agent = microsFromDollars(form.get("default_agent"));

66

const session = microsFromDollars(form.get("default_session"));

67

if ([monthly, agent, session].some((v) => v != null && Number.isNaN(v))) return { ok: false as const, error: "Write each amount in dollars, such as 250 or 2.50." };

68

const changes: Partial<AgentPolicy> = { monthly_micros: monthly, default_agent_monthly_micros: agent };

69

if (session != null) changes.default_session_micros = session;

70

return answer("policy", workspaceAgents.setPolicy(slug, viewer, changes));

71

}

72

73

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

74

const { overview, archived, justArchived } = loaderData;

75

const slug = params.owner;

76

useRefreshWhile(Boolean(overview && (overview.live.length > 0 || overview.waiting_on_you.length > 0)));

if (!overview) {

return (

The agents service didn't answer. It's usually back within a minute; reload to try again.

</Quiet>

);

}

const liveCount = Object.values(overview.live_by_agent).reduce((n, c) => n + c, 0);

85

const handles = new Map(overview.agents.map((agent) => [agent.id, agent]));

86

return (

87

88

{/* The way back from archiving: the agent is under Archived, below, not gone. */}

89

{justArchived && archived.some((agent) => agent.handle === justArchived) && (

<span>

Archived <span className="font-medium">@{justArchived}</span>. It no longer answers; its conversations stay readable.{" "}

94

95

Restore or delete it under Archived

</Link>

.

</span>

</Alert>

)}

{overview.waiting_on_you.length > 0 && (

Waiting on you

<span className="text-faint">{overview.waiting_on_you.length}</span>

109

</h2>

110

<p className="mt-1 text-sm text-muted">Sessions that reached their spend cap. They stay paused until someone who may raise the cap says so.</p>

111

112

{overview.waiting_on_you.map((session) => (

<SessionCard

key={session.id}

slug={slug}

session={session}

action={

overview.can_manage ? (

<ApproveDialog

slug={slug}

session={session}

trigger={

Approve more…

</Button>

}

/>

) : (

<p className="text-xs text-faint">An owner approves more spend.</p>

)

}

/>

))}

</ul>

</section>

)}

Working now {liveCount > 0 && <span className="text-faint">{liveCount}</span>}

141

</h2>

142

{overview.live.length === 0 ? (

143

144

<Quiet title={liveCount > 0 ? "Working in conversations you're not in" : "No sessions right now"}>

145

{liveCount > 0

146

? "Agents are working on sessions started in private channels or direct messages. What they cost still shows below."

147

: "When a request needs real work, an agent spins off a session for it, with its own budget and a live card in the conversation."}

</Quiet>

</div>

) : (

{overview.live.map((session) => (

))}

</ul>

)}

</section>

{/* The workspace's agents; the viewer's own personal ones apart, under Yours. */}

160

<Roster slug={slug} agents={overview.agents.filter((agent) => agent.scope !== "personal")} live={overview.live_by_agent} />

161

{overview.agents.some((agent) => agent.scope === "personal") && (

162

<Roster slug={slug} title="Yours" agents={overview.agents.filter((agent) => agent.scope === "personal")} live={overview.live_by_agent} />

163

)}

164

165

{overview.can_manage && <PersonalAgents slug={slug} on={overview.policy.members_create_agents} />}

<Panel title="Upcoming routines" aside={overview.upcoming.length > 0 ? "UTC" : undefined}>

171

{overview.upcoming.length === 0 ? (

172

<p className="px-4 py-6 text-center text-sm text-faint">No routines scheduled. Set one up on an agent's Routines tab.</p>

173

) : (

174

175

{overview.upcoming.map((routine) => (

{routine.name}

</Link>

{routine.agent_name}

{routine.schedule ? ` · ${scheduleInWords(routine.schedule)}` : ""}

185

{routine.channel_name ? ` · #${routine.channel_name}` : ""}

186

</p>

187

</div>

188

{routine.next_run_at && (

189

190

{untilLabel(routine.next_run_at)}

</span>

)}

</li>

))}

</ul>

)}

</Panel>

{overview.recent.length === 0 ? (

200

<p className="px-4 py-6 text-center text-sm text-faint">Finished sessions you can see show here, with what they found.</p>

201

) : (

202

203

{overview.recent.map((session) => (

))}

</ul>

)}

</Panel>

</div>

{/* Archived agents, folded: owners see the workspace's, a member their own archived personal agents. */}

</div>

);

}

/** The month's spend by every agent against the workspace's agent budget, with the alert and, for owners, the way to change it. */

218

function BudgetHeader({ overview, slug, liveCount }: { overview: AgentsOverview; slug: string; liveCount: number }) {

219

const { policy, spent_month_micros: spent, alert } = overview;

220

const share = shareOf(spent, policy.monthly_micros);

221

const tone = meterTone(share);

return (

{alert != null && (

<div

role="status"

className={`mb-5 flex items-start gap-2.5 rounded-lg border px-3.5 py-2.5 text-sm ${

228

alert >= 100 ? "border-danger/40 bg-danger/10 text-danger" : "border-warn/40 bg-warn/10 text-warn"

}`}

>

<span>

{alert >= 100

? "Agents have used this month's budget. They take no new work until the 1st, or until an owner raises it."

235

: `Agents have used ${alert}% of this month's budget.`}{" "}

236

{overview.can_manage ? "" : "An owner can raise it."}

</span>

</div>

)}

<div>

Every agent, {monthName(overview.spend.period)}

245

</p>

246

247

<span className="text-3xl font-semibold tracking-tight tabular-nums">{money(spent)}</span>

248

<span className="text-sm text-muted">{policy.monthly_micros != null ? `of ${money(policy.monthly_micros)}` : "No agent budget: the workspace's spend limit applies"}</span>

249

</p>

250

</div>

251

{overview.can_manage && (

252

<BudgetDialog

253

policy={policy}

254

action={`/${slug}/-/agents?index`}

trigger={

Budget

</Button>

}

/>

)}

</div>

{policy.monthly_micros != null && (

<>

{Math.round((share ?? 0) * 100)}% used{tone === "accent" ? "" : tone === "warn" ? ", past the first alert" : ", at the limit"}. Every session, routine and helper rolls up here, then into the workspace's bill.

</p>

</>

)}

</dl>

</section>

);

}

function Stat({ label, value }: { label: string; value: string }) {

283

return (

284

<div>

285

<dt className="text-xs text-faint">{label}</dt>

286

<dd className="mt-0.5 text-sm font-medium tabular-nums">{value}</dd>

</div>

);

}

/** Every agent, g1t first: its status, what it is working on and its month against its own budget. */

292

function Roster({ slug, agents, live, title = "Agents" }: { slug: string; agents: WorkspaceAgent[]; live: Record<string, number>; title?: string }) {

293

const sorted = [...agents].sort((a, b) => Number(isOrchestrator(b)) - Number(isOrchestrator(a)));

294

const id = `roster-${title.toLowerCase()}`;

return (

{title} <span className="text-faint">{agents.length}</span>

300

</h2>

301

{title === "Agents" ? (

302

303

Start from a template

304

</Link>

305

) : (

306

<span className="text-xs text-faint">Personal: only you talk to them</span>

)}

</div>

<ul>

{sorted.map((agent) => {

312

const count = live[agent.id] ?? 0;

313

const cap = agent.budget.monthly_micros;

return (

</span>

{agent.display_name}

</Link>

{count > 0 && (

{count} {count === 1 ? "session" : "sessions"}

</Badge>

)}

</p>

{isOrchestrator(agent) ? "Orchestrator" : agent.title || agent.role}

333

{agent.status !== "idle" && ` · ${statusLabel(agent.status)}`}

</p>

</div>

</p>

{cap != null && <Meter spent={agent.spent_month_micros} cap={cap} label={`${agent.display_name}'s spend of its monthly budget`} size="sm" className="mt-1.5" />}

</div>

</li>

);

})}

</ul>

</Card>

</section>

);

}

/** Where the month went: by day, by agent, by team, by kind of work and by who asked. */

352

function SpendSection({ overview, slug, handles }: { overview: AgentsOverview; slug: string; handles: Map<string, WorkspaceAgent> }) {

353

const { spend } = overview;

return (

Spend this month

</h2>

On the workspace's usage

362

</Link>

363

</div>

364

<Panel title={<span className="tabular-nums">{money(spend.total_micros)}</span>} aside="By day, UTC">

</Panel>

<SliceList

slices={spend.by_agent}

371

unit=""

372

icon={(slice) => {

373

const agent = handles.get(slice.key);

374

return agent ? <AgentFace agent={{ ...agent, builtin: isOrchestrator(agent) }} size={18} /> : null;

375

}}

376

href={(slice) => {

377

const agent = handles.get(slice.key);

378

return agent ? `/${slug}/-/agents/${agent.handle}/spend` : null;

}}

/>

</Panel>

</Panel>

</Panel>

</Panel>

</div>

{spend.top_sessions.length > 0 && (

393

394

395

{spend.top_sessions.map((session) => (

))}

</ul>

</Panel>

)}

</section>

);

}

/**

* For owners: whether members create personal agents (on unless turned

407

* off), and the personal agents members have, to promote or archive.

408

*/

409

function PersonalAgents({ slug, on }: { slug: string; on: boolean }) {

410

const fetcher = useFetcher<{ ok: boolean; error?: string }>({ key: "personal-agents" });

411

const layout = useAgentsData();

412

const pending = fetcher.formData ? fetcher.formData.get("members_create_agents") === "on" : null;

413

const checked = pending ?? on;

414

const theirs = (layout?.agents ?? []).filter((agent) => agent.scope === "personal" && agent.personal_owner_id !== layout?.viewer_id);

415

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

return (

Personal agents

</h2>

A member's own agent: only they talk to it, in their direct message with it, and it spends from their budget. You keep the workspace's agents, and can promote a personal one to a workspace agent from its profile.

424

</p>

425

<fetcher.Form method="post" action={`/${slug}/-/agents?index`} className="mt-3 max-w-2xl">

426

427

<SwitchCard

428

title="Members can create personal agents"

429

name="members_create_agents"

430

checked={checked}

431

onCheckedChange={(value) => fetcher.submit({ intent: "personal_agents", ...(value ? { members_create_agents: "on" } : {}) }, { method: "post", action: `/${slug}/-/agents?index` })}

432

>

433

{checked

434

? "On: anyone in the workspace can describe an agent and make it theirs. Owners always can."

435

: "Off: only owners create agents. Personal agents members already have keep working."}

436

</SwitchCard>

437