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

47

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

48

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

49

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

50

}

51

52

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

53

const { overview } = loaderData;

54

const slug = params.owner;

55

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

64

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>

75

</h2>

76

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

77

78

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

107

</h2>

108

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

109

110

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

111

{liveCount > 0

112

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

113

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

126

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

127

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

128

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

129

)}

130

131

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

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

137

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

138

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

139

) : (

140

141

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

{routine.name}

</Link>

{routine.agent_name}

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

151

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

152

</p>

153

</div>

154

{routine.next_run_at && (

155

156

{untilLabel(routine.next_run_at)}

</span>

)}

</li>

))}

</ul>

)}

</Panel>

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

166

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

167

) : (

168

169

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

181

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

182

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

183

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

184

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

191

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

198

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

199

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

</span>

</div>

)}

<div>

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

208

</p>

209

210

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

211

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

212

</p>

213

</div>

214

{overview.can_manage && (

215

<BudgetDialog

216

policy={policy}

217

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

246

return (

247

<div>

248

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

249

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

255

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

256

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

257

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

return (

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

263

</h2>

264

{title === "Agents" ? (

265

266

Start from a template

267

</Link>

268

) : (

269

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

)}

</div>

{sorted.map((agent) => {

274

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

275

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}

295

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

</section>

);

}

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

313

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

314

const { spend } = overview;

return (

Spend this month

</h2>

On the workspace's usage

323

</Link>

324

</div>

325

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

</Panel>

<SliceList

slices={spend.by_agent}

332

unit=""

333

icon={(slice) => {

334

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

335

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

336

}}

337

href={(slice) => {

338

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

339

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

}}

/>

</Panel>

</Panel>

</Panel>

</Panel>

</div>

{spend.top_sessions.length > 0 && (

354

355

356

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

))}

</ul>

</Panel>

)}

</section>

);

}

/**

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

368

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

369

*/

370

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

371

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

372

const layout = useAgentsData();

373

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

374

const checked = pending ?? on;

375

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

376

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.

385

</p>

386

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

387

388

<SwitchCard

389

title="Members can create personal agents"

390

name="members_create_agents"

391

checked={checked}

392

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

393

>

394

{checked

395

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

396

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

397

</SwitchCard>

398