Sign in

flagon-io/g1t

public

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

456 lines18,029 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.

Workspace things at the bottom of the sidebar, and on mission control1import { ArrowRight, Hand, Plus, Settings, Users } from "lucide-react";
New workspaces are told to connect a model, before anything fails2import { env } from "cloudflare:workers";
Agents as a team: lifecycle, merge queue, billing and a new shell3import { type ReactNode, useEffect } from "react";
Get started on mission control4import { Link, data, useRevalidator, useRouteLoaderData } from "react-router";
Agents as a team: lifecycle, merge queue, billing and a new shell5
6import type { Lifecycle, Pull, Repo } from "@g1t/contracts";
Initial g1t: services, event bus, intents and attempts7
8import type { Route } from "./+types/home";
API and MCP server, Rust identity service, registration, site redesign9import { Landing } from "../components/landing";
Get started on mission control10import type { ShellData } from "../components/shell";
Agents as a team: lifecycle, merge queue, billing and a new shell11import { STAGE_LABEL, StageDots } from "../components/lifecycle";
API and MCP server, Rust identity service, registration, site redesign12import { RepoList } from "../components/repo-list";
13import {
14 Avatar,
15 ButtonLink,
16 CopyLine,
17 EmptyState,
18 TimeAgo,
19} from "../components/ui";
Agents as a team: lifecycle, merge queue, billing and a new shell20import { Assignee, IssueIcon, PullIcon } from "../components/work";
Work service in Rust, with RFC 3339 timestamps21import { repos as reposApi, work } from "../lib/services.server";
Initial g1t: services, event bus, intents and attempts22import { getViewer } from "../lib/session.server";
23
Agents as a team: lifecycle, merge queue, billing and a new shell24const REFRESH_MS = 5000;
25
Initial g1t: services, event bus, intents and attempts26export function meta({}: Route.MetaArgs) {
27 return [
Email verification, password reset, and Git for AI scale positioning28 { title: "g1t — Git for AI scale" },
Initial g1t: services, event bus, intents and attempts29 {
30 name: "description",
31 content:
Issues and pull requests replace intents and attempts32 "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.",
Initial g1t: services, event bus, intents and attempts33 },
34 ];
35}
36
Agents as a team: lifecycle, merge queue, billing and a new shell37export function headers({ loaderHeaders }: Route.HeadersArgs) {
38 return { "Server-Timing": loaderHeaders.get("Server-Timing") ?? "" };
39}
40
Initial g1t: services, event bus, intents and attempts41export async function loader({ context }: Route.LoaderArgs) {
42 const viewer = getViewer(context);
Agents as a team: lifecycle, merge queue, billing and a new shell43 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));
New workspaces are told to connect a model, before anything fails47 // 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([
Agents as a team: lifecycle, merge queue, billing and a new shell50 timed("repos", reposApi.list(viewer, { memberOnly: Boolean(viewer) })),
51 timed("pulls", work.listActivePulls(viewer)),
52 timed("assigned", work.listAssignedIssues(viewer)),
New workspaces are told to connect a model, before anything fails53 // 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),
Initial g1t: services, event bus, intents and attempts55 ]);
Agents as a team: lifecycle, merge queue, billing and a new shell56 // 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({
Initial g1t: services, event bus, intents and attempts70 viewer,
71 repos,
New workspaces are told to connect a model, before anything fails72 canRunAgents: models == null || models.hosted || models.own != null,
Agents as a team: lifecycle, merge queue, billing and a new shell73 assigned: assigned.flatMap((issue) => {
74 const repo = known.get(issue.repoId);
75 return repo ? [{ issue, repo }] : [];
Initial g1t: services, event bus, intents and attempts76 }),
Agents as a team: lifecycle, merge queue, billing and a new shell77 active: pulls.flatMap((item) => {
78 const repo = known.get(item.pull.repoId);
79 return repo ? [{ ...item, repo }] : [];
80 }),
81 }, { headers: { "Server-Timing": serverTiming } });
82}
83
84type Active = { pull: Pull; lifecycle: Lifecycle | null; repo: Repo };
85
86/** What a pull request is waiting on, in a word or two. */
87function standing({ pull, lifecycle }: Active): string {
88 if (lifecycle) return STAGE_LABEL[lifecycle.stage];
89 return pull.status === "draft" ? "In progress" : "Ready for review";
90}
91
92function PullRows({ items, detail }: { items: Active[]; detail?: boolean }) {
93 return (
94 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
95 {items.map((item) => {
96 const { pull, lifecycle, repo } = item;
97 return (
98 <li key={pull.id}>
99 <Link
100 prefetch="intent"
101 to={`/${repo.namespace}/${repo.name}/pull/${pull.number}`}
102 className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"
103 >
104 <PullIcon status={pull.status} />
105 <span className="min-w-0 grow">
106 <span className="block truncate font-medium">{pull.title}</span>
107 <span className="block truncate font-mono text-xs text-muted">
108 {repo.namespace}/{repo.name}#{pull.number}
109 {pull.issue != null && ` · for #${pull.issue}`} · {pull.agent}
110 </span>
111 {detail && lifecycle && (
112 <span className="mt-1 block text-xs text-muted">{lifecycle.detail}</span>
113 )}
114 </span>
115 {lifecycle && (
116 <span className="hidden shrink-0 sm:block">
117 <StageDots stage={lifecycle.stage} />
118 </span>
119 )}
120 <span className="w-28 shrink-0 text-right text-xs text-muted">
121 {standing(item)}
122 </span>
123 <span className="hidden w-14 shrink-0 text-right text-xs text-faint sm:block">
124 <TimeAgo at={pull.updatedAt} />
125 </span>
126 </Link>
127 </li>
128 );
129 })}
130 </ul>
131 );
Initial g1t: services, event bus, intents and attempts132}
133
Agents as a team: lifecycle, merge queue, billing and a new shell134function Section({ title, children }: { title: ReactNode; children: ReactNode }) {
135 return (
136 <section>
137 <h2 className="flex items-center gap-2 text-sm font-medium text-muted">{title}</h2>
138 <div className="mt-3">{children}</div>
139 </section>
140 );
141}
142
143function plural(count: number, one: string, many: string): string {
144 return `${count} ${count === 1 ? one : many}`;
145}
146
Get started on mission control147type Step = { done: boolean; title: string; about: string; to: string | null; action: string };
148
149/**
Workspace things at the bottom of the sidebar, and on mission control150 * The workspace being looked at, from mission control: what it holds and
151 * what is moving in it, and the way to its people and settings. The rest of
152 * the page stays the viewer's own, across every workspace.
153 */
154function WorkspaceCard({ slug, role, repos, active }: { slug: string; role: string; repos: Repo[]; active: Active[] }) {
155 const mine = active.filter((item) => item.repo.namespace.toLowerCase() === slug);
156 const stats = [
157 { value: repos.filter((repo) => repo.namespace.toLowerCase() === slug).length, label: "repositories" },
158 { value: mine.length, label: "pull requests open" },
159 { value: mine.filter((item) => item.lifecycle?.stage === "needs_you").length, label: "need you" },
160 ];
161 return (
162 <div className="rounded-xl border border-line bg-surface p-5">
163 <div className="flex items-center gap-3">
164 <Avatar name={slug} size={32} square />
165 <div className="min-w-0">
166 <Link to={`/${slug}`} className="block truncate font-medium hover:underline">
167 {slug}
168 </Link>
169 <p className="text-xs text-muted">Workspace · {role}</p>
170 </div>
171 </div>
172 <dl className="mt-4 grid grid-cols-3 gap-2">
173 {stats.map((stat) => (
174 <div key={stat.label} className="rounded-lg bg-bg/60 px-2.5 py-2 ring-1 ring-line">
175 <dt className="sr-only">{stat.label}</dt>
176 <dd className="text-lg font-semibold tabular-nums tracking-tight">{stat.value}</dd>
177 <dd className="text-[0.6875rem] leading-tight text-muted">{stat.label}</dd>
178 </div>
179 ))}
180 </dl>
181 <div className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-sm">
182 <Link to={`/${slug}/-/people`} className="inline-flex items-center gap-1.5 text-muted hover:text-fg">
183 <Users size={13} />
184 Members
185 </Link>
186 <Link
187 to={role === "owner" ? `/${slug}/-/settings` : `/${slug}/-/people`}
188 className="inline-flex items-center gap-1.5 text-muted hover:text-fg"
189 >
190 <Settings size={13} />
191 Settings
192 </Link>
193 <Link to={`/${slug}`} className="inline-flex items-center gap-1 text-accent hover:underline">
194 Its page <ArrowRight size={13} />
195 </Link>
196 </div>
197 </div>
198 );
199}
200
201/**
Get started on mission control202 * The first things to do, ticked off as they are done, until an outcome has
203 * been handed to agents. Shown above everything else on mission control.
204 */
205function GetStarted({ steps }: { steps: Step[] }) {
206 const left = steps.filter((step) => !step.done).length;
207 return (
208 <section className="rounded-2xl bg-surface p-5 ring-1 ring-line">
209 <div className="flex items-baseline justify-between gap-3">
210 <h2 className="font-semibold tracking-tight">Get started</h2>
211 <span className="text-xs text-muted">
212 {steps.length - left} of {steps.length} done
213 </span>
214 </div>
215 <ol className="mt-4 space-y-2">
216 {steps.map((step, index) => (
217 <li
218 key={step.title}
219 className={`flex items-start gap-3 rounded-xl px-3 py-2.5 ${step.done ? "" : "bg-bg/50 ring-1 ring-line"}`}
220 >
221 <span
222 className={`mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-medium ${
223 step.done ? "bg-accent text-bg" : "text-muted ring-1 ring-line-strong"
224 }`}
225 >
226 {step.done ? "✓" : index + 1}
227 </span>
228 <span className="min-w-0 grow">
229 <span className={`block text-sm font-medium ${step.done ? "text-muted line-through decoration-faint" : ""}`}>
230 {step.title}
231 </span>
232 {!step.done && <span className="mt-0.5 block text-xs leading-5 text-muted">{step.about}</span>}
233 </span>
234 {!step.done && step.to && (
235 <Link
236 to={step.to}
237 className="shrink-0 rounded-md bg-fg px-2.5 py-1 text-xs font-medium text-bg transition-colors hover:bg-white"
238 >
239 {step.action}
240 </Link>
241 )}
242 </li>
243 ))}
244 </ol>
245 </section>
246 );
247}
248
Initial g1t: services, event bus, intents and attempts249export default function Home({ loaderData }: Route.ComponentProps) {
New workspaces are told to connect a model, before anything fails250 const { viewer, repos, active, assigned, canRunAgents } = loaderData;
Agents as a team: lifecycle, merge queue, billing and a new shell251
252 const needsYou = active.filter((item) => item.lifecycle?.stage === "needs_you");
253 const ready = active.filter((item) => item.lifecycle?.stage === "ready");
254 const moving = active.filter(
255 (item) => item.lifecycle?.stage !== "needs_you" && item.lifecycle?.stage !== "ready",
256 );
257 // Agents are at work, so the page changes without anyone touching it.
258 const changing = moving.some((item) => item.lifecycle || item.pull.status === "draft");
259 const revalidator = useRevalidator();
260 useEffect(() => {
261 if (!changing) return;
262 const timer = setInterval(() => {
263 if (document.visibilityState === "visible") revalidator.revalidate();
264 }, REFRESH_MS);
265 return () => clearInterval(timer);
266 }, [changing, revalidator]);
267
Get started on mission control268 const shell = useRouteLoaderData("root")?.shell as ShellData | null | undefined;
API and MCP server, Rust identity service, registration, site redesign269 if (!viewer) return <Landing repos={repos} />;
Initial g1t: services, event bus, intents and attempts270
Get started on mission control271 const workspace = shell?.workspace?.slug;
272 const first = repos[0];
Usage while free is shown at cost; agents get rustfmt and clippy273 const handedOff = active.length > 0 || (shell?.monthUsageMicros ?? 0) > 0;
Get started on mission control274 const steps: Step[] = [
275 {
276 done: Boolean(workspace),
277 title: "Create a workspace",
278 about: "Repositories, people and agent credit live in one.",
279 to: "/workspaces/new",
280 action: "Create",
281 },
282 {
283 done: repos.length > 0,
284 title: "Add a repository",
285 about: "Create one, or import one from GitHub by its address. Push to it with git as usual.",
286 to: workspace ? `/new?workspace=${workspace}` : "/new",
287 action: "Add",
288 },
New workspaces are told to connect a model, before anything fails289 canRunAgents
290 ? {
291 // Nothing to pay while g1t is being built out.
292 done: Boolean(shell?.free) || shell?.creditMicros == null || shell.creditMicros > 0,
293 title: "Add agent credit",
294 about: "g1t's agents are paid for from the workspace's credit, at what the model costs plus 20%.",
295 to: workspace ? `/${workspace}/-/billing` : null,
296 action: "Add credit",
297 }
298 : {
299 done: false,
300 title: "Connect a model",
301 about:
302 "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.",
303 to: workspace ? `/${workspace}/-/integrations` : null,
304 action: "Connect",
305 },
Get started on mission control306 {
307 done: handedOff,
308 title: "Hand off an outcome",
309 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.",
310 to: first ? `/${first.namespace}/${first.name}/plans` : null,
311 action: "Write one",
312 },
313 ];
314 const starting = steps.some((step) => !step.done);
315
Agents as a team: lifecycle, merge queue, billing and a new shell316 const summary = [
317 moving.length > 0 && `${moving.length} in progress`,
318 ready.length > 0 && `${ready.length} ready to merge`,
319 needsYou.length > 0 && plural(needsYou.length, "needs you", "need you"),
320 assigned.length > 0 && `${assigned.length} assigned to you`,
321 ].filter(Boolean);
API and MCP server, Rust identity service, registration, site redesign322 return (
323 <main className="mx-auto grid max-w-6xl gap-10 px-4 py-10 lg:grid-cols-[1fr_20rem]">
324 <div className="min-w-0 space-y-10">
Initial g1t: services, event bus, intents and attempts325 <section>
API and MCP server, Rust identity service, registration, site redesign326 <div className="flex items-center gap-3">
327 <Avatar name={viewer.username} size={36} />
328 <div>
329 <h1 className="text-xl font-semibold tracking-tight">
330 Mission control
331 </h1>
332 <p className="text-sm text-muted">
Agents as a team: lifecycle, merge queue, billing and a new shell333 {summary.length === 0
Issues and pull requests replace intents and attempts334 ? "Nothing is being worked on right now."
Agents as a team: lifecycle, merge queue, billing and a new shell335 : `${summary.join(" · ")}.`}
API and MCP server, Rust identity service, registration, site redesign336 </p>
337 </div>
338 </div>
339 </section>
340
Get started on mission control341 {starting && <GetStarted steps={steps} />}
342
Agents as a team: lifecycle, merge queue, billing and a new shell343 {needsYou.length > 0 && (
344 <Section
345 title={
346 <>
347 <Hand size={14} className="text-warn" />
348 Needs you
349 </>
350 }
351 >
352 <PullRows items={needsYou} detail />
353 </Section>
354 )}
355
356 {ready.length > 0 && (
357 <Section title="Ready to merge">
358 <PullRows items={ready} />
359 </Section>
360 )}
361
362 {assigned.length > 0 && (
363 <Section title="Assigned to you">
364 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
365 {assigned.map(({ issue, repo }) => (
366 <li key={issue.id}>
367 <Link
368 prefetch="intent"
369 to={`/${repo.namespace}/${repo.name}/issues/${issue.number}`}
370 className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"
371 >
372 <IssueIcon issue={issue} />
373 <span className="min-w-0 grow">
374 <span className="block truncate font-medium">{issue.title}</span>
375 <span className="block truncate font-mono text-xs text-muted">
376 {repo.namespace}/{repo.name}#{issue.number}
Initial g1t: services, event bus, intents and attempts377 </span>
Agents as a team: lifecycle, merge queue, billing and a new shell378 </span>
379 {issue.agent && <Assignee agent={issue.agent} />}
380 <span className="hidden w-14 shrink-0 text-right text-xs text-faint sm:block">
381 <TimeAgo at={issue.updatedAt} />
382 </span>
383 </Link>
384 </li>
385 ))}
386 </ul>
387 </Section>
388 )}
389
390 <Section title="In progress">
391 {moving.length === 0 ? (
392 <EmptyState title="No pull requests in progress">
393 Assign issues to the g1t agent from a repository's Issues tab,
394 or point your own agent at one.
395 </EmptyState>
396 ) : (
397 <PullRows items={moving} />
398 )}
399 </Section>
API and MCP server, Rust identity service, registration, site redesign400
Initial g1t: services, event bus, intents and attempts401 <section>
API and MCP server, Rust identity service, registration, site redesign402 <div className="flex items-center justify-between">
403 <h2 className="text-sm font-medium text-muted">Your repositories</h2>
404 <ButtonLink to="/new" variant="quiet">
405 <Plus size={14} />
406 New
407 </ButtonLink>
408 </div>
Initial g1t: services, event bus, intents and attempts409 <RepoList repos={repos} />
410 </section>
API and MCP server, Rust identity service, registration, site redesign411 </div>
Initial g1t: services, event bus, intents and attempts412
API and MCP server, Rust identity service, registration, site redesign413 <aside className="space-y-4">
Workspace things at the bottom of the sidebar, and on mission control414 {shell?.workspace && (
415 <WorkspaceCard
416 slug={shell.workspace.slug.toLowerCase()}
417 role={shell.workspace.role}
418 repos={repos}
419 active={active}
420 />
421 )}
API and MCP server, Rust identity service, registration, site redesign422 <div className="rounded-xl border border-line bg-surface p-5">
423 <h2 className="font-medium">Connect an agent</h2>
424 <p className="mt-1.5 text-sm text-muted">
OAuth 2.1 sign-in for MCP clients and other applications425 Add g1t to Claude Code, then run /mcp in it to sign in through
426 your browser.
API and MCP server, Rust identity service, registration, site redesign427 </p>
428 <div className="mt-4 space-y-2">
429 <CopyLine
430 prompt
OAuth 2.1 sign-in for MCP clients and other applications431 text="claude mcp add --transport http g1t https://mcp.g1t.sh"
API and MCP server, Rust identity service, registration, site redesign432 />
433 </div>
434 <Link
Docs as their own app; shared theme package435 to="https://docs.g1t.sh/guides/bring-your-own-agent/"
API and MCP server, Rust identity service, registration, site redesign436 className="mt-4 inline-flex items-center gap-1 text-sm text-accent hover:underline"
437 >
438 How it works <ArrowRight size={13} />
439 </Link>
440 </div>
441 <div className="rounded-xl border border-line bg-surface p-5">
442 <h2 className="font-medium">Explore</h2>
443 <p className="mt-1.5 text-sm text-muted">
Issues and pull requests replace intents and attempts444 Browse public repositories and the issues open on them.
API and MCP server, Rust identity service, registration, site redesign445 </p>
446 <Link
447 to="/explore"
448 className="mt-3 inline-flex items-center gap-1 text-sm text-accent hover:underline"
449 >
450 Public repositories <ArrowRight size={13} />
451 </Link>
452 </div>
453 </aside>
Initial g1t: services, event bus, intents and attempts454 </main>
455 );
456}