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

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

49

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

50

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

51

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

52

}

53

54

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

55

const { overview } = loaderData;

56

const slug = params.owner;

57

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

66

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

return (

{overview.waiting_on_you.length > 0 && (

Waiting on you

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

77

</h2>

78

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

79

80

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

109

</h2>

110

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

111

112

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

113

{liveCount > 0

114

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

115

: "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. */}

128

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

129

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

130

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

131

)}

132

133

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

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

139

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

140

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

141

) : (

142

143

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

{routine.name}

</Link>

{routine.agent_name}

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

153

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

154

</p>

155

</div>

156

{routine.next_run_at && (

157

158

{untilLabel(routine.next_run_at)}

</span>

)}

</li>

))}

</ul>

)}

</Panel>

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

168

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

169

) : (

170

171

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

))}

</ul>

)}

</Panel>

</div>

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

183

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

184

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

185

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

186

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

193

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

200

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

201

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

</span>

</div>

)}

<div>

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

210

</p>

211

212

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

213

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

214

</p>

215

</div>

216

{overview.can_manage && (

217

<BudgetDialog

218

policy={policy}

219

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

248

return (

249

<div>

250

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

251

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

257

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

258

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

259

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

return (

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

265

</h2>

266

{title === "Agents" ? (

267

268

Start from a template

269

</Link>

270

) : (

271

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

)}

</div>

<ul>

{sorted.map((agent) => {

277

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

278

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}

298

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

317

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

318

const { spend } = overview;

return (

Spend this month

</h2>

On the workspace's usage

327

</Link>

328

</div>

329

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

</Panel>

<SliceList

slices={spend.by_agent}

336

unit=""

337

icon={(slice) => {

338

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

339

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

340

}}

341

href={(slice) => {

342

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

343

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

}}

/>

</Panel>

</Panel>

</Panel>

</Panel>

</div>

{spend.top_sessions.length > 0 && (

358

359

360

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

))}

</ul>

</Panel>

)}

</section>

);

}

/**

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

372

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

373

*/

374

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

375

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

376

const layout = useAgentsData();

377

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

378

const checked = pending ?? on;

379

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

380

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.

389

</p>

390

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

391

392

<SwitchCard

393

title="Members can create personal agents"

394

name="members_create_agents"

395

checked={checked}

396

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

397

>

398

{checked

399

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

400

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

401

</SwitchCard>

402