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

471 lines19,253 bytesCodeBlame
1import { ArrowRight, Hand, Plus, Settings, Users } from "lucide-react";
2import { env } from "cloudflare:workers";
3import { type ReactNode, useEffect } from "react";
4import { Link, data, useRevalidator, useRouteLoaderData } from "react-router";
5
6import type { Lifecycle, Pull, Repo } from "@g1t/contracts";
7
8import type { Route } from "./+types/home";
9import { page } from "../lib/meta";
10import { Landing } from "../components/landing";
11import type { ShellData } from "../components/shell";
12import { STAGE_LABEL, StageDots } from "../components/lifecycle";
13import { RepoList } from "../components/repo-list";
14import {
15 Avatar,
16 ButtonLink,
17 CopyLine,
18 EmptyState,
19 TimeAgo,
20} from "../components/ui";
21import { Assignee, IssueIcon, PullIcon } from "../components/work";
22import { repos as reposApi, work } from "../lib/services.server";
23import { getViewer } from "../lib/session.server";
24
25const REFRESH_MS = 5000;
26
27const dollars = (micros: number) => `$${(Math.max(0, micros) / 1_000_000).toFixed(2)}`;
28
29export function meta(args: Route.MetaArgs) {
30 return page(args, {
31 title: "g1t — Git for AI scale",
32 description:
33 "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.",
34 });
35}
36
37export function headers({ loaderHeaders }: Route.HeadersArgs) {
38 return { "Server-Timing": loaderHeaders.get("Server-Timing") ?? "" };
39}
40
41export async function loader({ context }: Route.LoaderArgs) {
42 const viewer = getViewer(context);
43 const started = Date.now();
44 const times: Record<string, number> = {};
45 const timed = <T,>(name: string, promise: Promise<T>) =>
46 promise.then((value) => ((times[name] = Date.now() - started), value));
47 // The workspace the sidebar shows, as the shell picks it.
48 const workspace = viewer?.workspaces?.[0]?.slug ?? null;
49 const [repos, pulls, assigned, models] = await Promise.all([
50 timed("repos", reposApi.list(viewer, { memberOnly: Boolean(viewer) })),
51 timed("pulls", work.listActivePulls(viewer)),
52 timed("assigned", work.listAssignedIssues(viewer)),
53 // Whether its agents can reach a model: g1t's, or one it connected.
54 workspace ? timed("models", env.RUNNER.modelAccess(workspace).catch(() => null)) : Promise.resolve(null),
55 ]);
56 // Each issue and pull request is shown under its repository. Most are in
57 // the viewer's own, already listed; the rest are looked up once each, all
58 // at once. One the viewer can no longer see drops out.
59 const known = new Map<string, Repo>(repos.map((repo) => [repo.id, repo]));
60 const missing = [
61 ...new Set([...assigned.map((issue) => issue.repoId), ...pulls.map(({ pull }) => pull.repoId)]),
62 ].filter((id) => !known.has(id));
63 const looked = await Promise.all(missing.map((id) => reposApi.getById(id, viewer)));
64 for (const found of looked) if (found.ok) known.set(found.value.id, found.value);
65 times.lookups = Date.now() - started;
66 const serverTiming = Object.entries(times)
67 .map(([name, ms]) => `${name};dur=${ms}`)
68 .join(", ");
69 return data({
70 viewer,
71 repos,
72 canRunAgents: models == null || models.hosted || models.own != null,
73 // Its free allowance on g1t's models, when that is what it runs on.
74 trial: models?.own == null ? (models?.trial ?? null) : null,
75 assigned: assigned.flatMap((issue) => {
76 const repo = known.get(issue.repoId);
77 return repo ? [{ issue, repo }] : [];
78 }),
79 active: pulls.flatMap((item) => {
80 const repo = known.get(item.pull.repoId);
81 return repo ? [{ ...item, repo }] : [];
82 }),
83 }, { headers: { "Server-Timing": serverTiming } });
84}
85
86type Active = { pull: Pull; lifecycle: Lifecycle | null; repo: Repo };
87
88/** What a pull request is waiting on, in a word or two. */
89function standing({ pull, lifecycle }: Active): string {
90 if (lifecycle) return STAGE_LABEL[lifecycle.stage];
91 return pull.status === "draft" ? "In progress" : "Ready for review";
92}
93
94function PullRows({ items, detail }: { items: Active[]; detail?: boolean }) {
95 return (
96 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
97 {items.map((item) => {
98 const { pull, lifecycle, repo } = item;
99 return (
100 <li key={pull.id}>
101 <Link
102 prefetch="intent"
103 to={`/${repo.namespace}/${repo.name}/pull/${pull.number}`}
104 className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"
105 >
106 <PullIcon status={pull.status} />
107 <span className="min-w-0 grow">
108 <span className="block truncate font-medium">{pull.title}</span>
109 <span className="block truncate font-mono text-xs text-muted">
110 {repo.namespace}/{repo.name}#{pull.number}
111 {pull.issue != null && ` · for #${pull.issue}`} · {pull.agent}
112 </span>
113 {detail && lifecycle && (
114 <span className="mt-1 block text-xs text-muted">{lifecycle.detail}</span>
115 )}
116 </span>
117 {lifecycle && (
118 <span className="hidden shrink-0 sm:block">
119 <StageDots stage={lifecycle.stage} />
120 </span>
121 )}
122 <span className="w-28 shrink-0 text-right text-xs text-muted">
123 {standing(item)}
124 </span>
125 <span className="hidden w-14 shrink-0 text-right text-xs text-faint sm:block">
126 <TimeAgo at={pull.updatedAt} />
127 </span>
128 </Link>
129 </li>
130 );
131 })}
132 </ul>
133 );
134}
135
136function Section({ title, children }: { title: ReactNode; children: ReactNode }) {
137 return (
138 <section>
139 <h2 className="flex items-center gap-2 text-sm font-medium text-muted">{title}</h2>
140 <div className="mt-3">{children}</div>
141 </section>
142 );
143}
144
145function plural(count: number, one: string, many: string): string {
146 return `${count} ${count === 1 ? one : many}`;
147}
148
149type Step = { done: boolean; title: string; about: string; to: string | null; action: string };
150
151/**
152 * The workspace being looked at, from mission control: what it holds and
153 * what is moving in it, and the way to its people and settings. The rest of
154 * the page stays the viewer's own, across every workspace.
155 */
156function WorkspaceCard({ slug, role, repos, active }: { slug: string; role: string; repos: Repo[]; active: Active[] }) {
157 const mine = active.filter((item) => item.repo.namespace.toLowerCase() === slug);
158 const stats = [
159 { value: repos.filter((repo) => repo.namespace.toLowerCase() === slug).length, label: "repositories" },
160 { value: mine.length, label: "pull requests open" },
161 { value: mine.filter((item) => item.lifecycle?.stage === "needs_you").length, label: "need you" },
162 ];
163 return (
164 <div className="rounded-xl border border-line bg-surface p-5">
165 <div className="flex items-center gap-3">
166 <Avatar name={slug} size={32} square />
167 <div className="min-w-0">
168 <Link to={`/${slug}`} className="block truncate font-medium hover:underline">
169 {slug}
170 </Link>
171 <p className="text-xs text-muted">Workspace · {role}</p>
172 </div>
173 </div>
174 <dl className="mt-4 grid grid-cols-3 gap-2">
175 {stats.map((stat) => (
176 <div key={stat.label} className="rounded-lg bg-bg/60 px-2.5 py-2 ring-1 ring-line">
177 <dt className="sr-only">{stat.label}</dt>
178 <dd className="text-lg font-semibold tabular-nums tracking-tight">{stat.value}</dd>
179 <dd className="text-[0.6875rem] leading-tight text-muted">{stat.label}</dd>
180 </div>
181 ))}
182 </dl>
183 <div className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-sm">
184 <Link to={`/${slug}/-/people`} className="inline-flex items-center gap-1.5 text-muted hover:text-fg">
185 <Users size={13} />
186 Members
187 </Link>
188 <Link
189 to={role === "owner" ? `/${slug}/-/settings` : `/${slug}/-/people`}
190 className="inline-flex items-center gap-1.5 text-muted hover:text-fg"
191 >
192 <Settings size={13} />
193 Settings
194 </Link>
195 <Link to={`/${slug}`} className="inline-flex items-center gap-1 text-accent hover:underline">
196 Its page <ArrowRight size={13} />
197 </Link>
198 </div>
199 </div>
200 );
201}
202
203/**
204 * The first things to do, ticked off as they are done, until an outcome has
205 * been handed to agents. Shown above everything else on mission control.
206 */
207function GetStarted({ steps }: { steps: Step[] }) {
208 const left = steps.filter((step) => !step.done).length;
209 return (
210 <section className="rounded-2xl bg-surface p-5 ring-1 ring-line">
211 <div className="flex items-baseline justify-between gap-3">
212 <h2 className="font-semibold tracking-tight">Get started</h2>
213 <span className="text-xs text-muted">
214 {steps.length - left} of {steps.length} done
215 </span>
216 </div>
217 <ol className="mt-4 space-y-2">
218 {steps.map((step, index) => (
219 <li
220 key={step.title}
221 className={`flex items-start gap-3 rounded-xl px-3 py-2.5 ${step.done ? "" : "bg-bg/50 ring-1 ring-line"}`}
222 >
223 <span
224 className={`mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-medium ${
225 step.done ? "bg-accent text-bg" : "text-muted ring-1 ring-line-strong"
226 }`}
227 >
228 {step.done ? "✓" : index + 1}
229 </span>
230 <span className="min-w-0 grow">
231 <span className={`block text-sm font-medium ${step.done ? "text-muted line-through decoration-faint" : ""}`}>
232 {step.title}
233 </span>
234 {!step.done && <span className="mt-0.5 block text-xs leading-5 text-muted">{step.about}</span>}
235 </span>
236 {!step.done && step.to && (
237 <Link
238 to={step.to}
239 className="shrink-0 rounded-md bg-fg px-2.5 py-1 text-xs font-medium text-bg transition-colors hover:bg-white"
240 >
241 {step.action}
242 </Link>
243 )}
244 </li>
245 ))}
246 </ol>
247 </section>
248 );
249}
250
251export default function Home({ loaderData }: Route.ComponentProps) {
252 const { viewer, repos, active, assigned, canRunAgents, trial } = loaderData;
253
254 const needsYou = active.filter((item) => item.lifecycle?.stage === "needs_you");
255 const ready = active.filter((item) => item.lifecycle?.stage === "ready");
256 const moving = active.filter(
257 (item) => item.lifecycle?.stage !== "needs_you" && item.lifecycle?.stage !== "ready",
258 );
259 // Agents are at work, so the page changes without anyone touching it.
260 const changing = moving.some((item) => item.lifecycle || item.pull.status === "draft");
261 const revalidator = useRevalidator();
262 useEffect(() => {
263 if (!changing) return;
264 const timer = setInterval(() => {
265 if (document.visibilityState === "visible") revalidator.revalidate();
266 }, REFRESH_MS);
267 return () => clearInterval(timer);
268 }, [changing, revalidator]);
269
270 const shell = useRouteLoaderData("root")?.shell as ShellData | null | undefined;
271 if (!viewer) return <Landing repos={repos} />;
272
273 const workspace = shell?.workspace?.slug;
274 const first = repos[0];
275 const handedOff = active.length > 0 || (shell?.monthUsageMicros ?? 0) > 0;
276 const steps: Step[] = [
277 {
278 done: Boolean(workspace),
279 title: "Create a workspace",
280 about: "Repositories, people and agent credit live in one.",
281 to: "/workspaces/new",
282 action: "Create",
283 },
284 {
285 done: repos.length > 0,
286 title: "Add a repository",
287 about: "Create one, or import one from GitHub by its address. Push to it with git as usual.",
288 to: workspace ? `/new?workspace=${workspace}` : "/new",
289 action: "Add",
290 },
291 trial?.open
292 ? {
293 done: true,
294 title: "Try g1t's agents free",
295 about: `This workspace has ${dollars(trial.limitMicros - trial.usedMicros)} of its free ${dollars(trial.limitMicros)} left on g1t's models${trial.endsAt ? `, until ${new Date(trial.endsAt).toLocaleDateString("en-US", { month: "long", day: "numeric", timeZone: "America/Los_Angeles" })}` : ""}: assign issues and watch agents land them. Connect your own model under Integrations any time for more.`,
296 to: workspace ? `/${workspace}/-/integrations` : null,
297 action: "Connect",
298 }
299 : canRunAgents
300 ? {
301 // Done unless the workspace is near or at its usage limit.
302 done: Boolean(shell?.free) || shell?.limit == null || shell.limit.comped || shell.limit.state === "ok",
303 title: "Keep work running",
304 about: "Usage is charged after it runs, at what it costs g1t plus a markup. Add a card under Billing, so g1t charges it as you near your limit instead of stopping work.",
305 to: workspace ? `/${workspace}/-/billing` : null,
306 action: "Billing",
307 }
308 : {
309 done: false,
310 title: "Connect a model",
311 about: `${
312 trial?.reason === "used"
313 ? "This workspace has used its free allowance on g1t's models. "
314 : trial?.reason === "pool" || trial?.reason === "ended"
315 ? "The free allowance on g1t's models has ended. "
316 : ""
317 }Agents need a model to think with. Connect your Anthropic or OpenAI key, or any compatible endpoint; g1t itself costs nothing while it is being built out.`,
318 to: workspace ? `/${workspace}/-/integrations` : null,
319 action: "Connect",
320 },
321 {
322 done: handedOff,
323 title: "Hand off an outcome",
324 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.",
325 to: first ? `/${first.namespace}/${first.name}/plans` : null,
326 action: "Write one",
327 },
328 ];
329 const starting = steps.some((step) => !step.done);
330
331 const summary = [
332 moving.length > 0 && `${moving.length} in progress`,
333 ready.length > 0 && `${ready.length} ready to merge`,
334 needsYou.length > 0 && plural(needsYou.length, "needs you", "need you"),
335 assigned.length > 0 && `${assigned.length} assigned to you`,
336 ].filter(Boolean);
337 return (
338 <main className="mx-auto grid max-w-6xl gap-10 px-4 py-10 lg:grid-cols-[1fr_20rem]">
339 <div className="min-w-0 space-y-10">
340 <section>
341 <div className="flex items-center gap-3">
342 <Avatar name={viewer.username} size={36} />
343 <div>
344 <h1 className="text-xl font-semibold tracking-tight">
345 Mission control
346 </h1>
347 <p className="text-sm text-muted">
348 {summary.length === 0
349 ? "Nothing is being worked on right now."
350 : `${summary.join(" · ")}.`}
351 </p>
352 </div>
353 </div>
354 </section>
355
356 {starting && <GetStarted steps={steps} />}
357
358 {needsYou.length > 0 && (
359 <Section
360 title={
361 <>
362 <Hand size={14} className="text-warn" />
363 Needs you
364 </>
365 }
366 >
367 <PullRows items={needsYou} detail />
368 </Section>
369 )}
370
371 {ready.length > 0 && (
372 <Section title="Ready to merge">
373 <PullRows items={ready} />
374 </Section>
375 )}
376
377 {assigned.length > 0 && (
378 <Section title="Assigned to you">
379 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
380 {assigned.map(({ issue, repo }) => (
381 <li key={issue.id}>
382 <Link
383 prefetch="intent"
384 to={`/${repo.namespace}/${repo.name}/issues/${issue.number}`}
385 className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"
386 >
387 <IssueIcon issue={issue} />
388 <span className="min-w-0 grow">
389 <span className="block truncate font-medium">{issue.title}</span>
390 <span className="block truncate font-mono text-xs text-muted">
391 {repo.namespace}/{repo.name}#{issue.number}
392 </span>
393 </span>
394 {issue.agent && <Assignee agent={issue.agent} />}
395 <span className="hidden w-14 shrink-0 text-right text-xs text-faint sm:block">
396 <TimeAgo at={issue.updatedAt} />
397 </span>
398 </Link>
399 </li>
400 ))}
401 </ul>
402 </Section>
403 )}
404
405 <Section title="In progress">
406 {moving.length === 0 ? (
407 <EmptyState title="No pull requests in progress">
408 Assign issues to the g1t agent from a repository's Issues tab,
409 or point your own agent at one.
410 </EmptyState>
411 ) : (
412 <PullRows items={moving} />
413 )}
414 </Section>
415
416 <section>
417 <div className="flex items-center justify-between">
418 <h2 className="text-sm font-medium text-muted">Your repositories</h2>
419 <ButtonLink to="/new" variant="quiet">
420 <Plus size={14} />
421 New
422 </ButtonLink>
423 </div>
424 <RepoList repos={repos} />
425 </section>
426 </div>
427
428 <aside className="space-y-4">
429 {shell?.workspace && (
430 <WorkspaceCard
431 slug={shell.workspace.slug.toLowerCase()}
432 role={shell.workspace.role}
433 repos={repos}
434 active={active}
435 />
436 )}
437 <div className="rounded-xl border border-line bg-surface p-5">
438 <h2 className="font-medium">Connect an agent</h2>
439 <p className="mt-1.5 text-sm text-muted">
440 Add g1t to Claude Code, then run /mcp in it to sign in through
441 your browser.
442 </p>
443 <div className="mt-4 space-y-2">
444 <CopyLine
445 prompt
446 text="claude mcp add --transport http g1t https://mcp.g1t.sh"
447 />
448 </div>
449 <Link
450 to="https://docs.g1t.sh/guides/bring-your-own-agent/"
451 className="mt-4 inline-flex items-center gap-1 text-sm text-accent hover:underline"
452 >
453 How it works <ArrowRight size={13} />
454 </Link>
455 </div>
456 <div className="rounded-xl border border-line bg-surface p-5">
457 <h2 className="font-medium">Explore</h2>
458 <p className="mt-1.5 text-sm text-muted">
459 Browse public repositories and the issues open on them.
460 </p>
461 <Link
462 to="/explore"
463 className="mt-3 inline-flex items-center gap-1 text-sm text-accent hover:underline"
464 >
465 Public repositories <ArrowRight size={13} />
466 </Link>
467 </div>
468 </aside>
469 </main>
470 );
471}