Sign in

flagon-io/g1t

public

Git for AI scale: a forge for thousands of agents working on the same code at once.

gitagentscloudflarerustforgemcp

g1t/apps/web/app/routes/repo/plan.tsx

304 lines13,390 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Agents as a team: lifecycle, merge queue, billing and a new shell1import { env } from "cloudflare:workers";
What happened across an outcome, as a feed beside its graph2import type { G1tEvent } from "@g1t/contracts";
Agents as a team: lifecycle, merge queue, billing and a new shell3import { ArrowRight, FileCode2, Sparkles, Terminal } from "lucide-react";
4import { useEffect } from "react";
5import { Form, Link, data, useNavigation, useRevalidator } from "react-router";
6
7import type { Route } from "./+types/plan";
8import { Markdown } from "../../components/markdown";
Agents ask each other, hand each other work, and answer9import { Activity, Exchanges } from "../../components/activity";
Dark gray base with lavender as an accent, and a live outcome view for plans10import { Outcome } from "../../components/outcome";
Agents as a team: lifecycle, merge queue, billing and a new shell11import { Button, ErrorText, TimeAgo } from "../../components/ui";
12import { Label } from "../../components/work";
What happened across an outcome, as a feed beside its graph13import { billing, events, identity, work } from "../../lib/services.server";
Agents as a team: lifecycle, merge queue, billing and a new shell14import {
15 assertSameOrigin,
16 getViewer,
17 requireUser,
18 roleIn,
19 unwrap,
20} from "../../lib/session.server";
21
22const REFRESH_MS = 4000;
23
24export function meta({ params }: Route.MetaArgs) {
25 return [{ title: `Plan · ${params.owner}/${params.repo} · g1t` }];
26}
27
28export async function loader({ params, context }: Route.LoaderArgs) {
29 const viewer = getViewer(context);
30 // Members only; to anyone else the page does not exist.
31 if (!roleIn(viewer, params.owner)) throw data(null, { status: 404 });
32 const path = { namespace: params.owner, name: params.repo };
Dark gray base with lavender as an accent, and a live outcome view for plans33 const [plan, ledger] = await Promise.all([
34 work.getPlan(path, viewer, params.id),
35 billing.ledger(params.owner, viewer),
36 ]);
37 const found = unwrap(plan);
38 // What the agents working on this outcome have cost so far.
39 const pulls = new Set(found.progress.flatMap((item) => (item.pull != null ? [item.pull] : [])));
40 const repo = `${params.owner}/${params.repo}`;
41 const costMicros = ledger.ok
42 ? ledger.value
43 .filter((entry) => entry.kind === "usage" && entry.repo === repo && entry.number != null && pulls.has(entry.number))
44 .reduce((sum, entry) => sum - entry.amountMicros, 0)
45 : null;
What happened across an outcome, as a feed beside its graph46 // What happened across the outcome's issues and pull requests.
47 let activity: G1tEvent[] = [];
48 if (found.status === "applied" && found.progress.length > 0) {
49 const numbers = new Set([
50 ...found.progress.map((item) => item.number),
51 ...found.progress.flatMap((item) => (item.pull != null ? [item.pull] : [])),
52 ]);
53 const since = found.finishedAt ?? found.createdAt;
54 const recent = await events.list({ repoId: found.repoId, limit: 200 }).catch(() => []);
55 activity = recent
56 .filter((event) => event.time >= since)
57 .filter((event) => {
58 const data = event.data as { number?: number; issue?: number };
59 // Issues an agent filed while working on this outcome belong to it too.
60 if (event.type === "issue.opened" && event.actor === "usr_g1t_agent") return true;
61 return (data.number != null && numbers.has(data.number)) || (data.issue != null && numbers.has(data.issue));
62 })
63 .slice(0, 40);
64 // Events name accounts by id; show names.
65 const named = await identity
66 .usernames([...new Set(activity.flatMap((event) => (event.actor ? [event.actor] : [])))])
67 .catch(() => ({}) as Record<string, string>);
68 const known: Record<string, string> = { ...named, usr_g1t_agent: "g1t-agent", g1t_policy: "g1t" };
69 activity = activity.map((event) => ({ ...event, actor: event.actor ? (known[event.actor] ?? event.actor) : null }));
70 }
71 return { plan: found, costMicros, activity };
Agents as a team: lifecycle, merge queue, billing and a new shell72}
73
74export async function action({ request, params, context }: Route.ActionArgs) {
75 assertSameOrigin(request);
76 const user = requireUser(context, request);
77 const form = await request.formData();
78 const path = { namespace: params.owner, name: params.repo };
79 const applied = await env.RUNNER.applyPlan(user, path, params.id, {
80 assign: form.get("action") === "assign",
81 keep: form.getAll("keep").map(Number),
82 });
83 return applied.ok ? null : { error: applied.error.message };
84}
85
86export default function PlanPage({ loaderData, actionData, params }: Route.ComponentProps) {
What happened across an outcome, as a feed beside its graph87 const { plan, costMicros, activity } = loaderData;
Agents as a team: lifecycle, merge queue, billing and a new shell88 const base = `/${params.owner}/${params.repo}`;
89 const applying = useNavigation().state === "submitting";
90
91 // The agent is still writing it.
92 const revalidator = useRevalidator();
93 const planning = plan.status === "planning";
Dark gray base with lavender as an accent, and a live outcome view for plans94 // Planning, or agents still converging what was applied.
95 const moving =
96 planning || plan.progress.some((item) => item.state !== "landed" && item.state !== "closed");
Agents as a team: lifecycle, merge queue, billing and a new shell97 useEffect(() => {
Dark gray base with lavender as an accent, and a live outcome view for plans98 if (!moving) return;
Agents as a team: lifecycle, merge queue, billing and a new shell99 const timer = setInterval(() => {
100 if (document.visibilityState === "visible") revalidator.revalidate();
101 }, REFRESH_MS);
102 return () => clearInterval(timer);
Dark gray base with lavender as an accent, and a live outcome view for plans103 }, [moving, revalidator]);
104 const converging = plan.status === "applied" && plan.progress.length > 0;
Agents as a team: lifecycle, merge queue, billing and a new shell105
106 const independent = plan.issues.filter((issue) => issue.dependsOn.length === 0).length;
107 return (
Dark gray base with lavender as an accent, and a live outcome view for plans108 <div className={converging ? "" : "max-w-4xl"}>
Agents as a team: lifecycle, merge queue, billing and a new shell109 <p className="text-sm">
110 <Link to={`${base}/plans`} className="text-muted hover:text-fg">
111 Plans
112 </Link>
113 </p>
114 <h2 className="mt-2 text-xl font-semibold tracking-tight">The outcome</h2>
Polish: phones, copy boxes, the plan page, the landing page, a real glide115 <div className="mt-3 rounded-xl border border-line bg-surface p-5 text-sm">
116 <Markdown source={plan.brief} repo={{ namespace: params.owner, name: params.repo }} />
Agents as a team: lifecycle, merge queue, billing and a new shell117 </div>
118 <p className="mt-2 text-xs text-faint">
119 Asked for by {plan.author.username} <TimeAgo at={plan.createdAt} />
120 </p>
121
Dark gray base with lavender as an accent, and a live outcome view for plans122 {converging && (
123 <section className="mt-8">
124 <Outcome plan={plan} base={base} costMicros={costMicros} />
Agents ask each other, hand each other work, and answer125 {plan.exchanges.length > 0 && (
126 <div className="mt-10">
127 <h3 className="font-mono text-[0.6875rem] tracking-[0.2em] text-faint uppercase">Agents talking</h3>
128 <div className="mt-3 max-w-3xl">
129 <Exchanges exchanges={plan.exchanges} base={base} />
130 </div>
131 </div>
132 )}
What happened across an outcome, as a feed beside its graph133 {activity.length > 0 && (
134 <div className="mt-10">
135 <h3 className="font-mono text-[0.6875rem] tracking-[0.2em] text-faint uppercase">What happened</h3>
136 <div className="mt-3 max-w-3xl">
137 <Activity events={activity} base={base} />
138 </div>
139 </div>
140 )}
Dark gray base with lavender as an accent, and a live outcome view for plans141 </section>
142 )}
143
Agents as a team: lifecycle, merge queue, billing and a new shell144 {planning && (
145 <div className="mt-8 flex items-center gap-3 rounded-xl border border-accent/30 bg-accent/5 px-4 py-4 text-sm">
146 <span className="size-2 animate-pulse rounded-full bg-accent" />
147 <span>
148 An agent is reading the repository and writing the plan. This takes a
149 minute or two; the page fills in when it is done.
150 </span>
151 </div>
152 )}
153 {plan.status === "failed" && (
154 <div className="mt-8 rounded-xl border border-danger/40 bg-danger/5 px-4 py-4 text-sm">
155 <p className="font-medium">The plan could not be written</p>
156 <p className="mt-1 text-muted">{plan.error}</p>
157 <p className="mt-3">
158 <Link to={`${base}/plans`} className="text-fg underline underline-offset-4">
159 Try again
160 </Link>
161 </p>
162 </div>
163 )}
164
165 {plan.issues.length > 0 && (
166 <Form method="post" className="mt-8">
167 <div className="flex flex-wrap items-baseline justify-between gap-2">
168 <h2 className="text-xl font-semibold tracking-tight">
169 {plan.status === "applied" ? "What was opened" : "The plan"}
170 </h2>
171 <p className="text-sm text-muted">
172 {plan.issues.length} {plan.issues.length === 1 ? "issue" : "issues"},{" "}
173 {independent} that can start at once
174 </p>
175 </div>
176 {plan.summary && <p className="mt-2 text-sm text-muted">{plan.summary}</p>}
177
178 <ol className="mt-5 space-y-3">
179 {plan.issues.map((issue, index) => {
180 const position = index + 1;
181 return (
182 <li
183 key={position}
184 className="flex gap-3 rounded-xl border border-line bg-surface p-4"
185 >
186 {plan.status === "ready" ? (
187 <input
188 type="checkbox"
189 name="keep"
190 value={position}
191 defaultChecked
192 aria-label={`Open issue ${position}`}
193 className="mt-1.5 accent-accent"
194 />
195 ) : (
196 <span className="mt-0.5 w-5 shrink-0 text-center font-mono text-sm text-faint">
197 {position}
198 </span>
199 )}
200 <div className="min-w-0 grow">
201 <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
202 {issue.number != null ? (
203 <Link
204 to={`${base}/issues/${issue.number}`}
205 className="font-medium hover:underline"
206 >
207 {issue.title}{" "}
208 <span className="font-normal text-faint">#{issue.number}</span>
209 </Link>
210 ) : (
211 <span className="font-medium">
212 <span className="mr-1.5 font-mono text-sm font-normal text-faint">
213 {position}.
214 </span>
215 {issue.title}
216 </span>
217 )}
218 {issue.labels.map((name) => (
219 <Label key={name} name={name} />
220 ))}
221 </div>
222 <p className="mt-1.5 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
223 {issue.dependsOn.length === 0 ? (
224 <span className="text-accent">Starts at once</span>
225 ) : (
226 <span className="flex items-center gap-1">
227 <ArrowRight size={12} />
228 After{" "}
229 {issue.dependsOn
230 .map((earlier) => {
231 const number = plan.issues[earlier - 1]?.number;
232 return number != null ? `#${number}` : `${earlier}`;
233 })
234 .join(", ")}
235 </span>
236 )}
237 {issue.checks.map((check) => (
238 <span key={check} className="flex items-center gap-1 font-mono">
239 <Terminal size={12} />
240 {check}
241 </span>
242 ))}
243 </p>
244 {issue.files.length > 0 && (
245 <p className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-xs text-faint">
246 <FileCode2 size={12} />
247 {issue.files.map((file) => (
248 <span key={file}>{file}</span>
249 ))}
250 </p>
251 )}
252 <details className="mt-2">
253 <summary className="cursor-pointer text-xs text-faint hover:text-fg">
254 What the agent will be told
255 </summary>
256 <div className="mt-2 border-t border-line pt-3">
257 <Markdown source={issue.body} repo={{ namespace: params.owner, name: params.repo }} />
258 </div>
259 </details>
260 </div>
261 </li>
262 );
263 })}
264 </ol>
265
266 {plan.status === "ready" && (
267 <div className="mt-6 flex flex-wrap items-center gap-3">
268 <Button variant="accent" type="submit" name="action" value="assign" disabled={applying}>
269 <Sparkles size={15} />
270 {applying ? "Opening issues…" : "Open these and assign g1t agents"}
271 </Button>
272 <Button variant="quiet" type="submit" name="action" value="open" disabled={applying}>
273 Only open the issues
274 </Button>
275 <span className="text-xs text-muted">
276 Untick any you do not want. Agents work on the independent ones at once
277 and the rest follow as what they depend on merges.
278 </span>
279 </div>
280 )}
Polish: phones, copy boxes, the plan page, the landing page, a real glide281 {plan.status === "applied" && !moving && (
282 <p className="mt-6 text-sm text-muted">Everything in this plan has landed.</p>
283 )}
284 {plan.status === "applied" && moving && (
Agents as a team: lifecycle, merge queue, billing and a new shell285 <p className="mt-6 text-sm text-muted">
Polish: phones, copy boxes, the plan page, the landing page, a real glide286 Some are still open. Follow them under{" "}
Agents as a team: lifecycle, merge queue, billing and a new shell287 <Link to={`${base}/issues`} className="text-fg underline underline-offset-4">
288 Issues
289 </Link>{" "}
290 or in{" "}
291 <Link to="/" className="text-fg underline underline-offset-4">
292 mission control
293 </Link>
294 .
295 </p>
296 )}
297 <div className="mt-3">
298 <ErrorText>{actionData?.error}</ErrorText>
299 </div>
300 </Form>
301 )}
302 </div>
303 );
304}