Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

g1t/apps/web/app/routes/home.tsx

380 lines14,572 bytesCodeBlame
1import { ArrowRight, Hand, Plus } from "lucide-react";
2import { type ReactNode, useEffect } from "react";
3import { Link, data, useRevalidator, useRouteLoaderData } from "react-router";
4
5import type { Lifecycle, Pull, Repo } from "@g1t/contracts";
6
7import type { Route } from "./+types/home";
8import { Landing } from "../components/landing";
9import type { ShellData } from "../components/shell";
10import { STAGE_LABEL, StageDots } from "../components/lifecycle";
11import { RepoList } from "../components/repo-list";
12import {
13 Avatar,
14 ButtonLink,
15 CopyLine,
16 EmptyState,
17 TimeAgo,
18} from "../components/ui";
19import { Assignee, IssueIcon, PullIcon } from "../components/work";
20import { repos as reposApi, work } from "../lib/services.server";
21import { getViewer } from "../lib/session.server";
22
23const REFRESH_MS = 5000;
24
25export function meta({}: Route.MetaArgs) {
26 return [
27 { title: "g1t — Git for AI scale" },
28 {
29 name: "description",
30 content:
31 "A git forge for thousands of agents working on the same code at once: every change isolated, every decision recorded, every change landed in order. Open source, built on Cloudflare.",
32 },
33 ];
34}
35
36export function headers({ loaderHeaders }: Route.HeadersArgs) {
37 return { "Server-Timing": loaderHeaders.get("Server-Timing") ?? "" };
38}
39
40export async function loader({ context }: Route.LoaderArgs) {
41 const viewer = getViewer(context);
42 const started = Date.now();
43 const times: Record<string, number> = {};
44 const timed = <T,>(name: string, promise: Promise<T>) =>
45 promise.then((value) => ((times[name] = Date.now() - started), value));
46 const [repos, pulls, assigned] = await Promise.all([
47 timed("repos", reposApi.list(viewer, { memberOnly: Boolean(viewer) })),
48 timed("pulls", work.listActivePulls(viewer)),
49 timed("assigned", work.listAssignedIssues(viewer)),
50 ]);
51 // Each issue and pull request is shown under its repository. Most are in
52 // the viewer's own, already listed; the rest are looked up once each, all
53 // at once. One the viewer can no longer see drops out.
54 const known = new Map<string, Repo>(repos.map((repo) => [repo.id, repo]));
55 const missing = [
56 ...new Set([...assigned.map((issue) => issue.repoId), ...pulls.map(({ pull }) => pull.repoId)]),
57 ].filter((id) => !known.has(id));
58 const looked = await Promise.all(missing.map((id) => reposApi.getById(id, viewer)));
59 for (const found of looked) if (found.ok) known.set(found.value.id, found.value);
60 times.lookups = Date.now() - started;
61 const serverTiming = Object.entries(times)
62 .map(([name, ms]) => `${name};dur=${ms}`)
63 .join(", ");
64 return data({
65 viewer,
66 repos,
67 assigned: assigned.flatMap((issue) => {
68 const repo = known.get(issue.repoId);
69 return repo ? [{ issue, repo }] : [];
70 }),
71 active: pulls.flatMap((item) => {
72 const repo = known.get(item.pull.repoId);
73 return repo ? [{ ...item, repo }] : [];
74 }),
75 }, { headers: { "Server-Timing": serverTiming } });
76}
77
78type Active = { pull: Pull; lifecycle: Lifecycle | null; repo: Repo };
79
80/** What a pull request is waiting on, in a word or two. */
81function standing({ pull, lifecycle }: Active): string {
82 if (lifecycle) return STAGE_LABEL[lifecycle.stage];
83 return pull.status === "draft" ? "In progress" : "Ready for review";
84}
85
86function PullRows({ items, detail }: { items: Active[]; detail?: boolean }) {
87 return (
88 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
89 {items.map((item) => {
90 const { pull, lifecycle, repo } = item;
91 return (
92 <li key={pull.id}>
93 <Link
94 prefetch="intent"
95 to={`/${repo.namespace}/${repo.name}/pull/${pull.number}`}
96 className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"
97 >
98 <PullIcon status={pull.status} />
99 <span className="min-w-0 grow">
100 <span className="block truncate font-medium">{pull.title}</span>
101 <span className="block truncate font-mono text-xs text-muted">
102 {repo.namespace}/{repo.name}#{pull.number}
103 {pull.issue != null && ` · for #${pull.issue}`} · {pull.agent}
104 </span>
105 {detail && lifecycle && (
106 <span className="mt-1 block text-xs text-muted">{lifecycle.detail}</span>
107 )}
108 </span>
109 {lifecycle && (
110 <span className="hidden shrink-0 sm:block">
111 <StageDots stage={lifecycle.stage} />
112 </span>
113 )}
114 <span className="w-28 shrink-0 text-right text-xs text-muted">
115 {standing(item)}
116 </span>
117 <span className="hidden w-14 shrink-0 text-right text-xs text-faint sm:block">
118 <TimeAgo at={pull.updatedAt} />
119 </span>
120 </Link>
121 </li>
122 );
123 })}
124 </ul>
125 );
126}
127
128function Section({ title, children }: { title: ReactNode; children: ReactNode }) {
129 return (
130 <section>
131 <h2 className="flex items-center gap-2 text-sm font-medium text-muted">{title}</h2>
132 <div className="mt-3">{children}</div>
133 </section>
134 );
135}
136
137function plural(count: number, one: string, many: string): string {
138 return `${count} ${count === 1 ? one : many}`;
139}
140
141type Step = { done: boolean; title: string; about: string; to: string | null; action: string };
142
143/**
144 * The first things to do, ticked off as they are done, until an outcome has
145 * been handed to agents. Shown above everything else on mission control.
146 */
147function GetStarted({ steps }: { steps: Step[] }) {
148 const left = steps.filter((step) => !step.done).length;
149 return (
150 <section className="rounded-2xl bg-surface p-5 ring-1 ring-line">
151 <div className="flex items-baseline justify-between gap-3">
152 <h2 className="font-semibold tracking-tight">Get started</h2>
153 <span className="text-xs text-muted">
154 {steps.length - left} of {steps.length} done
155 </span>
156 </div>
157 <ol className="mt-4 space-y-2">
158 {steps.map((step, index) => (
159 <li
160 key={step.title}
161 className={`flex items-start gap-3 rounded-xl px-3 py-2.5 ${step.done ? "" : "bg-bg/50 ring-1 ring-line"}`}
162 >
163 <span
164 className={`mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-medium ${
165 step.done ? "bg-accent text-bg" : "text-muted ring-1 ring-line-strong"
166 }`}
167 >
168 {step.done ? "✓" : index + 1}
169 </span>
170 <span className="min-w-0 grow">
171 <span className={`block text-sm font-medium ${step.done ? "text-muted line-through decoration-faint" : ""}`}>
172 {step.title}
173 </span>
174 {!step.done && <span className="mt-0.5 block text-xs leading-5 text-muted">{step.about}</span>}
175 </span>
176 {!step.done && step.to && (
177 <Link
178 to={step.to}
179 className="shrink-0 rounded-md bg-fg px-2.5 py-1 text-xs font-medium text-bg transition-colors hover:bg-white"
180 >
181 {step.action}
182 </Link>
183 )}
184 </li>
185 ))}
186 </ol>
187 </section>
188 );
189}
190
191export default function Home({ loaderData }: Route.ComponentProps) {
192 const { viewer, repos, active, assigned } = loaderData;
193
194 const needsYou = active.filter((item) => item.lifecycle?.stage === "needs_you");
195 const ready = active.filter((item) => item.lifecycle?.stage === "ready");
196 const moving = active.filter(
197 (item) => item.lifecycle?.stage !== "needs_you" && item.lifecycle?.stage !== "ready",
198 );
199 // Agents are at work, so the page changes without anyone touching it.
200 const changing = moving.some((item) => item.lifecycle || item.pull.status === "draft");
201 const revalidator = useRevalidator();
202 useEffect(() => {
203 if (!changing) return;
204 const timer = setInterval(() => {
205 if (document.visibilityState === "visible") revalidator.revalidate();
206 }, REFRESH_MS);
207 return () => clearInterval(timer);
208 }, [changing, revalidator]);
209
210 const shell = useRouteLoaderData("root")?.shell as ShellData | null | undefined;
211 if (!viewer) return <Landing repos={repos} />;
212
213 const workspace = shell?.workspace?.slug;
214 const first = repos[0];
215 const handedOff = active.length > 0 || (shell?.monthSpentMicros ?? 0) > 0;
216 const steps: Step[] = [
217 {
218 done: Boolean(workspace),
219 title: "Create a workspace",
220 about: "Repositories, people and agent credit live in one.",
221 to: "/workspaces/new",
222 action: "Create",
223 },
224 {
225 done: repos.length > 0,
226 title: "Add a repository",
227 about: "Create one, or import one from GitHub by its address. Push to it with git as usual.",
228 to: workspace ? `/new?workspace=${workspace}` : "/new",
229 action: "Add",
230 },
231 {
232 done: shell?.creditMicros == null || shell.creditMicros > 0,
233 title: "Add agent credit",
234 about: "g1t's agents are paid for from the workspace's credit, at what the model costs plus 20%.",
235 to: workspace ? `/${workspace}/-/billing` : null,
236 action: "Add credit",
237 },
238 {
239 done: handedOff,
240 title: "Hand off an outcome",
241 about: "Write what you want on a repository's Plan page. A planner splits it into issues, and agents take them and land them on main.",
242 to: first ? `/${first.namespace}/${first.name}/plans` : null,
243 action: "Write one",
244 },
245 ];
246 const starting = steps.some((step) => !step.done);
247
248 const summary = [
249 moving.length > 0 && `${moving.length} in progress`,
250 ready.length > 0 && `${ready.length} ready to merge`,
251 needsYou.length > 0 && plural(needsYou.length, "needs you", "need you"),
252 assigned.length > 0 && `${assigned.length} assigned to you`,
253 ].filter(Boolean);
254 return (
255 <main className="mx-auto grid max-w-6xl gap-10 px-4 py-10 lg:grid-cols-[1fr_20rem]">
256 <div className="min-w-0 space-y-10">
257 <section>
258 <div className="flex items-center gap-3">
259 <Avatar name={viewer.username} size={36} />
260 <div>
261 <h1 className="text-xl font-semibold tracking-tight">
262 Mission control
263 </h1>
264 <p className="text-sm text-muted">
265 {summary.length === 0
266 ? "Nothing is being worked on right now."
267 : `${summary.join(" · ")}.`}
268 </p>
269 </div>
270 </div>
271 </section>
272
273 {starting && <GetStarted steps={steps} />}
274
275 {needsYou.length > 0 && (
276 <Section
277 title={
278 <>
279 <Hand size={14} className="text-warn" />
280 Needs you
281 </>
282 }
283 >
284 <PullRows items={needsYou} detail />
285 </Section>
286 )}
287
288 {ready.length > 0 && (
289 <Section title="Ready to merge">
290 <PullRows items={ready} />
291 </Section>
292 )}
293
294 {assigned.length > 0 && (
295 <Section title="Assigned to you">
296 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
297 {assigned.map(({ issue, repo }) => (
298 <li key={issue.id}>
299 <Link
300 prefetch="intent"
301 to={`/${repo.namespace}/${repo.name}/issues/${issue.number}`}
302 className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"
303 >
304 <IssueIcon issue={issue} />
305 <span className="min-w-0 grow">
306 <span className="block truncate font-medium">{issue.title}</span>
307 <span className="block truncate font-mono text-xs text-muted">
308 {repo.namespace}/{repo.name}#{issue.number}
309 </span>
310 </span>
311 {issue.agent && <Assignee agent={issue.agent} />}
312 <span className="hidden w-14 shrink-0 text-right text-xs text-faint sm:block">
313 <TimeAgo at={issue.updatedAt} />
314 </span>
315 </Link>
316 </li>
317 ))}
318 </ul>
319 </Section>
320 )}
321
322 <Section title="In progress">
323 {moving.length === 0 ? (
324 <EmptyState title="No pull requests in progress">
325 Assign issues to the g1t agent from a repository's Issues tab,
326 or point your own agent at one.
327 </EmptyState>
328 ) : (
329 <PullRows items={moving} />
330 )}
331 </Section>
332
333 <section>
334 <div className="flex items-center justify-between">
335 <h2 className="text-sm font-medium text-muted">Your repositories</h2>
336 <ButtonLink to="/new" variant="quiet">
337 <Plus size={14} />
338 New
339 </ButtonLink>
340 </div>
341 <RepoList repos={repos} />
342 </section>
343 </div>
344
345 <aside className="space-y-4">
346 <div className="rounded-xl border border-line bg-surface p-5">
347 <h2 className="font-medium">Connect an agent</h2>
348 <p className="mt-1.5 text-sm text-muted">
349 Add g1t to Claude Code, then run /mcp in it to sign in through
350 your browser.
351 </p>
352 <div className="mt-4 space-y-2">
353 <CopyLine
354 prompt
355 text="claude mcp add --transport http g1t https://mcp.g1t.sh"
356 />
357 </div>
358 <Link
359 to="https://docs.g1t.sh/guides/bring-your-own-agent/"
360 className="mt-4 inline-flex items-center gap-1 text-sm text-accent hover:underline"
361 >
362 How it works <ArrowRight size={13} />
363 </Link>
364 </div>
365 <div className="rounded-xl border border-line bg-surface p-5">
366 <h2 className="font-medium">Explore</h2>
367 <p className="mt-1.5 text-sm text-muted">
368 Browse public repositories and the issues open on them.
369 </p>
370 <Link
371 to="/explore"
372 className="mt-3 inline-flex items-center gap-1 text-sm text-accent hover:underline"
373 >
374 Public repositories <ArrowRight size={13} />
375 </Link>
376 </div>
377 </aside>
378 </main>
379 );
380}