Sign in

pulls/pr_01m47d24b0e6n91zwymwxg0vpx

public

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

441 lines17,180 bytesCodeBlame
1import { ArrowRight, Hand, Plus, Settings, Users } 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 workspace being looked at, from mission control: what it holds and
145 * what is moving in it, and the way to its people and settings. The rest of
146 * the page stays the viewer's own, across every workspace.
147 */
148function WorkspaceCard({ slug, role, repos, active }: { slug: string; role: string; repos: Repo[]; active: Active[] }) {
149 const mine = active.filter((item) => item.repo.namespace.toLowerCase() === slug);
150 const stats = [
151 { value: repos.filter((repo) => repo.namespace.toLowerCase() === slug).length, label: "repositories" },
152 { value: mine.length, label: "pull requests open" },
153 { value: mine.filter((item) => item.lifecycle?.stage === "needs_you").length, label: "need you" },
154 ];
155 return (
156 <div className="rounded-xl border border-line bg-surface p-5">
157 <div className="flex items-center gap-3">
158 <Avatar name={slug} size={32} square />
159 <div className="min-w-0">
160 <Link to={`/${slug}`} className="block truncate font-medium hover:underline">
161 {slug}
162 </Link>
163 <p className="text-xs text-muted">Workspace · {role}</p>
164 </div>
165 </div>
166 <dl className="mt-4 grid grid-cols-3 gap-2">
167 {stats.map((stat) => (
168 <div key={stat.label} className="rounded-lg bg-bg/60 px-2.5 py-2 ring-1 ring-line">
169 <dt className="sr-only">{stat.label}</dt>
170 <dd className="text-lg font-semibold tabular-nums tracking-tight">{stat.value}</dd>
171 <dd className="text-[0.6875rem] leading-tight text-muted">{stat.label}</dd>
172 </div>
173 ))}
174 </dl>
175 <div className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-sm">
176 <Link to={`/${slug}/-/people`} className="inline-flex items-center gap-1.5 text-muted hover:text-fg">
177 <Users size={13} />
178 Members
179 </Link>
180 <Link
181 to={role === "owner" ? `/${slug}/-/settings` : `/${slug}/-/people`}
182 className="inline-flex items-center gap-1.5 text-muted hover:text-fg"
183 >
184 <Settings size={13} />
185 Settings
186 </Link>
187 <Link to={`/${slug}`} className="inline-flex items-center gap-1 text-accent hover:underline">
188 Its page <ArrowRight size={13} />
189 </Link>
190 </div>
191 </div>
192 );
193}
194
195/**
196 * The first things to do, ticked off as they are done, until an outcome has
197 * been handed to agents. Shown above everything else on mission control.
198 */
199function GetStarted({ steps }: { steps: Step[] }) {
200 const left = steps.filter((step) => !step.done).length;
201 return (
202 <section className="rounded-2xl bg-surface p-5 ring-1 ring-line">
203 <div className="flex items-baseline justify-between gap-3">
204 <h2 className="font-semibold tracking-tight">Get started</h2>
205 <span className="text-xs text-muted">
206 {steps.length - left} of {steps.length} done
207 </span>
208 </div>
209 <ol className="mt-4 space-y-2">
210 {steps.map((step, index) => (
211 <li
212 key={step.title}
213 className={`flex items-start gap-3 rounded-xl px-3 py-2.5 ${step.done ? "" : "bg-bg/50 ring-1 ring-line"}`}
214 >
215 <span
216 className={`mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full text-[0.6875rem] font-medium ${
217 step.done ? "bg-accent text-bg" : "text-muted ring-1 ring-line-strong"
218 }`}
219 >
220 {step.done ? "✓" : index + 1}
221 </span>
222 <span className="min-w-0 grow">
223 <span className={`block text-sm font-medium ${step.done ? "text-muted line-through decoration-faint" : ""}`}>
224 {step.title}
225 </span>
226 {!step.done && <span className="mt-0.5 block text-xs leading-5 text-muted">{step.about}</span>}
227 </span>
228 {!step.done && step.to && (
229 <Link
230 to={step.to}
231 className="shrink-0 rounded-md bg-fg px-2.5 py-1 text-xs font-medium text-bg transition-colors hover:bg-white"
232 >
233 {step.action}
234 </Link>
235 )}
236 </li>
237 ))}
238 </ol>
239 </section>
240 );
241}
242
243export default function Home({ loaderData }: Route.ComponentProps) {
244 const { viewer, repos, active, assigned } = loaderData;
245
246 const needsYou = active.filter((item) => item.lifecycle?.stage === "needs_you");
247 const ready = active.filter((item) => item.lifecycle?.stage === "ready");
248 const moving = active.filter(
249 (item) => item.lifecycle?.stage !== "needs_you" && item.lifecycle?.stage !== "ready",
250 );
251 // Agents are at work, so the page changes without anyone touching it.
252 const changing = moving.some((item) => item.lifecycle || item.pull.status === "draft");
253 const revalidator = useRevalidator();
254 useEffect(() => {
255 if (!changing) return;
256 const timer = setInterval(() => {
257 if (document.visibilityState === "visible") revalidator.revalidate();
258 }, REFRESH_MS);
259 return () => clearInterval(timer);
260 }, [changing, revalidator]);
261
262 const shell = useRouteLoaderData("root")?.shell as ShellData | null | undefined;
263 if (!viewer) return <Landing repos={repos} />;
264
265 const workspace = shell?.workspace?.slug;
266 const first = repos[0];
267 const handedOff = active.length > 0 || (shell?.monthSpentMicros ?? 0) > 0;
268 const steps: Step[] = [
269 {
270 done: Boolean(workspace),
271 title: "Create a workspace",
272 about: "Repositories, people and agent credit live in one.",
273 to: "/workspaces/new",
274 action: "Create",
275 },
276 {
277 done: repos.length > 0,
278 title: "Add a repository",
279 about: "Create one, or import one from GitHub by its address. Push to it with git as usual.",
280 to: workspace ? `/new?workspace=${workspace}` : "/new",
281 action: "Add",
282 },
283 {
284 // Nothing to pay while g1t is being built out.
285 done: Boolean(shell?.free) || shell?.creditMicros == null || shell.creditMicros > 0,
286 title: "Add agent credit",
287 about: "g1t's agents are paid for from the workspace's credit, at what the model costs plus 20%.",
288 to: workspace ? `/${workspace}/-/billing` : null,
289 action: "Add credit",
290 },
291 {
292 done: handedOff,
293 title: "Hand off an outcome",
294 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.",
295 to: first ? `/${first.namespace}/${first.name}/plans` : null,
296 action: "Write one",
297 },
298 ];
299 const starting = steps.some((step) => !step.done);
300
301 const summary = [
302 moving.length > 0 && `${moving.length} in progress`,
303 ready.length > 0 && `${ready.length} ready to merge`,
304 needsYou.length > 0 && plural(needsYou.length, "needs you", "need you"),
305 assigned.length > 0 && `${assigned.length} assigned to you`,
306 ].filter(Boolean);
307 return (
308 <main className="mx-auto grid max-w-6xl gap-10 px-4 py-10 lg:grid-cols-[1fr_20rem]">
309 <div className="min-w-0 space-y-10">
310 <section>
311 <div className="flex items-center gap-3">
312 <Avatar name={viewer.username} size={36} />
313 <div>
314 <h1 className="text-xl font-semibold tracking-tight">
315 Mission control
316 </h1>
317 <p className="text-sm text-muted">
318 {summary.length === 0
319 ? "Nothing is being worked on right now."
320 : `${summary.join(" · ")}.`}
321 </p>
322 </div>
323 </div>
324 </section>
325
326 {starting && <GetStarted steps={steps} />}
327
328 {needsYou.length > 0 && (
329 <Section
330 title={
331 <>
332 <Hand size={14} className="text-warn" />
333 Needs you
334 </>
335 }
336 >
337 <PullRows items={needsYou} detail />
338 </Section>
339 )}
340
341 {ready.length > 0 && (
342 <Section title="Ready to merge">
343 <PullRows items={ready} />
344 </Section>
345 )}
346
347 {assigned.length > 0 && (
348 <Section title="Assigned to you">
349 <ul className="divide-y divide-line overflow-hidden rounded-xl border border-line bg-surface">
350 {assigned.map(({ issue, repo }) => (
351 <li key={issue.id}>
352 <Link
353 prefetch="intent"
354 to={`/${repo.namespace}/${repo.name}/issues/${issue.number}`}
355 className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-raised"
356 >
357 <IssueIcon issue={issue} />
358 <span className="min-w-0 grow">
359 <span className="block truncate font-medium">{issue.title}</span>
360 <span className="block truncate font-mono text-xs text-muted">
361 {repo.namespace}/{repo.name}#{issue.number}
362 </span>
363 </span>
364 {issue.agent && <Assignee agent={issue.agent} />}
365 <span className="hidden w-14 shrink-0 text-right text-xs text-faint sm:block">
366 <TimeAgo at={issue.updatedAt} />
367 </span>
368 </Link>
369 </li>
370 ))}
371 </ul>
372 </Section>
373 )}
374
375 <Section title="In progress">
376 {moving.length === 0 ? (
377 <EmptyState title="No pull requests in progress">
378 Assign issues to the g1t agent from a repository's Issues tab,
379 or point your own agent at one.
380 </EmptyState>
381 ) : (
382 <PullRows items={moving} />
383 )}
384 </Section>
385
386 <section>
387 <div className="flex items-center justify-between">
388 <h2 className="text-sm font-medium text-muted">Your repositories</h2>
389 <ButtonLink to="/new" variant="quiet">
390 <Plus size={14} />
391 New
392 </ButtonLink>
393 </div>
394 <RepoList repos={repos} />
395 </section>
396 </div>
397
398 <aside className="space-y-4">
399 {shell?.workspace && (
400 <WorkspaceCard
401 slug={shell.workspace.slug.toLowerCase()}
402 role={shell.workspace.role}
403 repos={repos}
404 active={active}
405 />
406 )}
407 <div className="rounded-xl border border-line bg-surface p-5">
408 <h2 className="font-medium">Connect an agent</h2>
409 <p className="mt-1.5 text-sm text-muted">
410 Add g1t to Claude Code, then run /mcp in it to sign in through
411 your browser.
412 </p>
413 <div className="mt-4 space-y-2">
414 <CopyLine
415 prompt
416 text="claude mcp add --transport http g1t https://mcp.g1t.sh"
417 />
418 </div>
419 <Link
420 to="https://docs.g1t.sh/guides/bring-your-own-agent/"
421 className="mt-4 inline-flex items-center gap-1 text-sm text-accent hover:underline"
422 >
423 How it works <ArrowRight size={13} />
424 </Link>
425 </div>
426 <div className="rounded-xl border border-line bg-surface p-5">
427 <h2 className="font-medium">Explore</h2>
428 <p className="mt-1.5 text-sm text-muted">
429 Browse public repositories and the issues open on them.
430 </p>
431 <Link
432 to="/explore"
433 className="mt-3 inline-flex items-center gap-1 text-sm text-accent hover:underline"
434 >
435 Public repositories <ArrowRight size={13} />
436 </Link>
437 </div>
438 </aside>
439 </main>
440 );
441}