Skip to content
Sign up

flagon-io/g1t

public
0
1,251 linesCodeBlameRaw
1import {
2 ArrowRight,
3 BookOpen,
4 Bot,
5 Check,
6 CircleDashed,
7 Code2,
8 Eye,
9 FileLock2,
10 Handshake,
11 Bell,
12 KeyRound,
13 Lock,
14 MessagesSquare,
15 PackageCheck,
16 ScrollText,
17 ShieldCheck,
18 Wallet,
19} from "lucide-react";
20import type { CSSProperties, ReactNode } from "react";
21import { Link } from "react-router";
22
23import { DeployArt, Live, PlanArt, QueueArt, WhyArt } from "./art";
24import { AgentAvatar } from "./agent-avatar";
25import { AgentCardShot } from "./chat-shot";
26import { ProductTour } from "./product-tour";
27import { ButtonLink, CopyLine } from "./ui";
28
29const DOCS = "https://docs.g1t.sh";
30
31/** A small label above a heading, in the mono face. */
32function Eyebrow({ children }: { children: ReactNode }) {
33 return (
34 <p className="font-mono text-xs tracking-[0.2em] text-accent uppercase">
35 {children}
36 </p>
37 );
38}
39
40/** Marks something planned and not built yet, wherever it is mentioned. */
41function Soon({ className = "" }: { className?: string }) {
42 return (
43 <span
44 className={`inline-flex shrink-0 items-center rounded-full bg-raised px-2 py-0.5 align-middle font-mono text-[0.625rem] font-medium tracking-wide whitespace-nowrap text-muted uppercase ring-1 ring-line-strong ${className}`}
45 >
46 Coming soon
47 </span>
48 );
49}
50
51function Tags({ items }: { items: string[] }) {
52 return (
53 <ul className="mt-6 flex flex-wrap gap-1.5">
54 {items.map((item) => (
55 <li
56 key={item}
57 className="rounded-full bg-bg/80 px-2.5 py-1 font-mono text-[0.6875rem] tracking-wide text-muted uppercase ring-1 ring-line"
58 >
59 {item}
60 </li>
61 ))}
62 </ul>
63 );
64}
65
66/** A link in running copy that leads to the docs or another page. */
67function More({ to, children }: { to: string; children: ReactNode }) {
68 return (
69 <Link
70 to={to}
71 className="group mt-7 inline-flex items-center gap-1.5 text-sm font-medium text-fg hover:text-accent"
72 >
73 {children}
74 <ArrowRight
75 size={14}
76 className="transition-transform group-hover:translate-x-0.5"
77 />
78 </Link>
79 );
80}
81
82/** A point in a list: a check, or a "Coming soon" tag for what is not built yet. */
83type Point = string | { text: string; soon: true };
84
85function Points({
86 points,
87 columns = true,
88}: {
89 points: Point[];
90 columns?: boolean;
91}) {
92 const now = points.filter(
93 (point): point is string => typeof point === "string",
94 );
95 const later = points
96 .filter((point) => typeof point !== "string")
97 .map((point) => (point as { text: string }).text);
98 return (
99 <>
100 <ul
101 className={`mt-6 grid gap-2.5 text-sm ${columns ? "sm:grid-cols-2" : ""}`}
102 >
103 {now.map((text) => (
104 <li key={text} className="flex gap-2.5 text-fg-soft">
105 <Check size={15} className="mt-0.5 shrink-0 text-accent" />
106 <span>{text}</span>
107 </li>
108 ))}
109 </ul>
110 {later.length > 0 && (
111 <div className="mt-5 rounded-xl border border-dashed border-line-strong px-4 py-3.5">
112 <Soon />
113 <ul
114 className={`mt-3 grid gap-2 text-sm ${columns ? "sm:grid-cols-2" : ""}`}
115 >
116 {later.map((text) => (
117 <li key={text} className="flex gap-2.5 text-muted">
118 <CircleDashed
119 size={14}
120 className="mt-0.5 shrink-0 text-faint"
121 />
122 <span>{text}</span>
123 </li>
124 ))}
125 </ul>
126 </div>
127 )}
128 </>
129 );
130}
131
132/** A drawing in its own card, on the page's dark gray. */
133function ArtFrame({ children }: { children: ReactNode }) {
134 return (
135 <Live className="relative overflow-hidden rounded-3xl bg-surface/60 px-4 py-6 ring-1 ring-line sm:px-8">
136 <div
137 aria-hidden="true"
138 className="pointer-events-none absolute inset-x-0 -bottom-24 h-48 bg-[radial-gradient(50%_60%_at_50%_100%,rgb(182_168_255/0.08),transparent)]"
139 />
140 <div className="relative mx-auto max-w-lg">{children}</div>
141 </Live>
142 );
143}
144
145/**
146 * One part of Code: what it does, the features that prove it, and a
147 * drawing of the idea, on alternating sides.
148 */
149function Pillar({
150 eyebrow,
151 title,
152 art,
153 points,
154 more,
155 flip,
156 children,
157}: {
158 eyebrow: string;
159 title: string;
160 art: ReactNode;
161 points: string[];
162 more: [string, string];
163 flip?: boolean;
164 children: ReactNode;
165}) {
166 return (
167 <article className="grid items-center gap-10 py-14 lg:grid-cols-2 lg:gap-16">
168 <div className={flip ? "lg:order-2" : undefined}>
169 <Eyebrow>{eyebrow}</Eyebrow>
170 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
171 {title}
172 </h3>
173 <p className="mt-4 max-w-xl leading-7 text-muted">{children}</p>
174 <Points points={points} />
175 <More to={more[1]}>{more[0]}</More>
176 </div>
177 <div className={flip ? "lg:order-1" : undefined}>
178 <ArtFrame>{art}</ArtFrame>
179 </div>
180 </article>
181 );
182}
183
184/** Facts under the opening, each one true today. */
185const FACTS: [string, string][] = [
186 [
187 "$0",
188 "for people to chat. Every plan, the free one too, with no history cutoff.",
189 ],
190 [
191 "0 seats",
192 "Everyone in the company joins at one workspace price, never per person.",
193 ],
194 [
195 "+20%",
196 "on what compute costs g1t. Agents pay the model's price plus a flat agent rate.",
197 ],
198 [
199 "MIT",
200 "licensed. g1t's own source lives on g1t and lands through its own queue.",
201 ],
202];
203
204/** The four modes of a workspace. */
205const MODES: {
206 icon: ReactNode;
207 name: string;
208 about: string;
209 soon?: boolean;
210 to: string;
211}[] = [
212 {
213 icon: <Code2 size={18} />,
214 name: "Code",
215 about:
216 "Repositories, issues, pull requests, checks, a merge queue and deployments. For the people who build.",
217 to: `${DOCS}/concepts/overview/`,
218 },
219 {
220 icon: <MessagesSquare size={18} />,
221 name: "Chat",
222 about:
223 "Channels, direct messages and threads, live. People and agents are members alike.",
224 to: `${DOCS}/guides/chat/`,
225 },
226 {
227 icon: <Bot size={18} />,
228 name: "Agents",
229 about:
230 "Colleagues hired into roles: a name, a title, a team, a voice and a budget. g1t orchestrates.",
231 to: `${DOCS}/guides/agents/`,
232 },
233 {
234 icon: <BookOpen size={18} />,
235 name: "Artifacts",
236 about:
237 "Docs now, and slides, designs and dashboards next, made together live. Agents read them and keep them current.",
238 soon: true,
239 to: `${DOCS}/guides/artifacts/`,
240 },
241];
242
243/** Who in a company talks to the agents, and what they ask. */
244const COMPANY: { team: string; ask: string }[] = [
245 {
246 team: "Support",
247 ask: "How does proration work when a customer downgrades mid-month?",
248 },
249 {
250 team: "Sales",
251 ask: "Can the export run on a schedule? A prospect needs it weekly.",
252 },
253 { team: "Finance", ask: "What did our agents spend last month, by team?" },
254 { team: "Design", ask: "Which screens still use the old empty state?" },
255];
256
257const RAILS: { icon: ReactNode; title: string; about: string; to: string }[] = [
258 {
259 icon: <Wallet size={18} />,
260 title: "Budgets",
261 about:
262 "The workspace's spend limit, then each agent's monthly cap and a cap per task. Spend shows on the agent, and a stopped budget stops the agent.",
263 to: `${DOCS}/guides/agents/#budgets`,
264 },
265 {
266 icon: <Eye size={18} />,
267 title: "Scopes",
268 about:
269 "An agent reads what it is invited to and writes nothing until it is given access. It never does more for you than you could do yourself.",
270 to: `${DOCS}/guides/agent-access/`,
271 },
272 {
273 icon: <Handshake size={18} />,
274 title: "Approvals",
275 about:
276 "Merging and deploying to production ask a person first by default. Rules, protected branches and required checks still apply on top.",
277 to: `${DOCS}/guides/agents/#what-it-may-do-alone`,
278 },
279 {
280 icon: <ScrollText size={18} />,
281 title: "Audit",
282 about:
283 "Every action by people, tokens and agents: who did it, who asked, whether it was allowed and the rule that decided.",
284 to: `${DOCS}/guides/audit-log/`,
285 },
286];
287
288const FLOW: [string, string][] = [
289 [
290 "Ask",
291 "Ask in a channel or a DM, or open an issue and assign it to an agent.",
292 ],
293 [
294 "Answer",
295 "The agent answers in the thread, in its own voice, charged to its own budget.",
296 ],
297 [
298 "Change",
299 "Work on code becomes a pull request in its own fork, under the agent's budget.",
300 ],
301 [
302 "Review",
303 "Checks run in clean sandboxes, a second agent reviews, and a person approves.",
304 ],
305 [
306 "Main",
307 "The queue tests each change with what lands before it. Production follows main.",
308 ],
309];
310
311/** The forge itself, for the people who build. */
312const FORGE = [
313 "Git over HTTPS",
314 "Public and private repositories",
315 "Issues and labels",
316 "Pull requests and forks",
317 "Line comments and reviews",
318 "Protected branches",
319 "Required approvals",
320 "Workspaces and roles",
321 "Teams",
322 "Search and Explore",
323 "Webhooks",
324 "Import from any git host",
325 "REST API and OpenAPI",
326 "MCP server",
327];
328
329const SECURE: { icon: ReactNode; title: string; about: string; to: string }[] =
330 [
331 {
332 icon: <ShieldCheck size={18} />,
333 title: "Push protection",
334 about:
335 "A push that adds a key or a token is refused before it lands, and the history is scanned for ones already there.",
336 to: `${DOCS}/guides/security/secret-protection/`,
337 },
338 {
339 icon: <PackageCheck size={18} />,
340 title: "Dependency upkeep",
341 about:
342 "Each vulnerable dependency that has a fixed version becomes an upgrade, landed through the same checks as any change.",
343 to: `${DOCS}/guides/security/#security-updates`,
344 },
345 {
346 icon: <KeyRound size={18} />,
347 title: "Guardrails and credentials",
348 about:
349 "What an agent may reach, run and spend is enforced outside its sandbox. Each run gets its own credential; your model keys never reach it.",
350 to: `${DOCS}/guides/guardrails/`,
351 },
352 {
353 icon: <Lock size={18} />,
354 title: "Your own model providers",
355 about:
356 "Route an agent to the workspace's own provider keys only. g1t charges the agent rate; the provider bills you directly.",
357 to: `${DOCS}/guides/models/`,
358 },
359 ];
360
361const PRICES: { name: string; price: string; unit?: string; about: string }[] =
362 [
363 {
364 name: "People",
365 price: "$0",
366 unit: "to chat",
367 about:
368 "Channels, DMs, threads and the forge are included on every plan, free too. No seats and no history cutoff.",
369 },
370 {
371 name: "The g1t plan",
372 price: "$20",
373 unit: "a month per workspace",
374 about:
375 "$10 of usage included. Unlimited members. Agents, checks, the merge queue and deployments.",
376 },
377 {
378 name: "Agents",
379 price: "Model + agent rate",
380 about:
381 "The provider's price plus a flat agent rate, charged to each agent's budget. An idle agent costs nothing.",
382 },
383 ];
384
385/** An example org chart, read like a company's: g1t comes with the workspace; each team's agent was hired from a template and added to the team. */
386const ORG: { team: string; who: string }[] = [
387 { team: "Engineering", who: "Otto" },
388 { team: "QA", who: "Margo" },
389 { team: "Docs", who: "Inky" },
390 { team: "Product", who: "Dot" },
391 { team: "Support", who: "Sam" },
392 { team: "Sales", who: "David" },
393 { team: "Operations", who: "Bruno" },
394];
395
396function OrgChart() {
397 return (
398 <figure
399 aria-label="An example org chart: g1t at the top, and one agent hired from a template on each team"
400 className="rounded-2xl bg-surface p-5 ring-1 ring-line"
401 >
402 <div className="flex items-center gap-3">
403 <AgentAvatar agent={{ handle: "g1t", name: "g1t" }} size={28} />
404 <p className="text-sm">
405 <span className="font-semibold text-fg">g1t</span>{" "}
406 <span className="text-muted">· Orchestrator, knows everyone</span>
407 </p>
408 </div>
409 <ul className="mt-4 grid grid-cols-2 gap-2 border-t border-line pt-4 sm:grid-cols-3">
410 {ORG.map((member) => (
411 <li
412 key={member.who}
413 className="flex items-center gap-2.5 rounded-lg bg-bg px-2.5 py-2 ring-1 ring-line"
414 >
415 <AgentAvatar
416 agent={{ handle: member.who.toLowerCase(), name: member.who }}
417 size={24}
418 />
419 <span className="min-w-0 text-xs leading-tight">
420 <span className="block font-medium text-fg">{member.who}</span>
421 <span className="block truncate text-faint">{member.team}</span>
422 </span>
423 </li>
424 ))}
425 </ul>
426 </figure>
427 );
428}
429
430/**
431 * The signed-out home page: what g1t is, what it does, and how to start.
432 * It lists no one's repositories; those are a click away under Explore.
433 */
434export function Landing() {
435 return (
436 <main className="overflow-x-clip">
437 {/* The opening. */}
438 <section className="dusk relative">
439 <div
440 aria-hidden="true"
441 className="dusk-planet pointer-events-none absolute -top-120 left-1/2 size-240 translate-x-[-10%] rounded-full"
442 />
443 <div className="relative mx-auto max-w-6xl px-4 pt-20 text-center sm:pt-24">
444 <Link
445 to={`${DOCS}/guides/chat/`}
446 className="inline-flex animate-fade-up items-center gap-2 rounded-full bg-bg/50 px-3 py-1 text-xs text-fg-soft ring-1 ring-line backdrop-blur transition-colors hover:bg-bg/70"
447 >
448 <span className="size-1.5 shrink-0 rounded-full bg-accent" />
449 For engineering teams running AI coding agents: chat, agents, docs
450 and code in one workspace
451 <ArrowRight size={12} className="shrink-0" />
452 </Link>
453 <h1 className="mx-auto mt-7 max-w-4xl animate-fade-up text-[2.75rem] leading-[1.04] font-semibold tracking-tight text-balance sm:text-7xl">
454 Your team and its agents,{" "}
455 <span className="bg-linear-to-r from-fg via-accent-high to-accent bg-clip-text text-transparent">
456 working in one place.
457 </span>
458 </h1>
459 <p className="mx-auto mt-7 max-w-2xl animate-fade-up text-lg leading-8 text-fg-soft/80 text-balance">
460 Talk to your team and your agents in channels and DMs. Agents are
461 teammates with a name, a job and a budget. They answer, take on work
462 and ship it through checks that hold. No separate chat app, wiki or
463 forge to stitch together.
464 </p>
465 <div className="mt-9 flex animate-fade-up flex-wrap items-center justify-center gap-3">
466 <ButtonLink to="/register" size="lg" className="rounded-full">
467 Start for free
468 <ArrowRight size={15} />
469 </ButtonLink>
470 <ButtonLink
471 to="#how"
472 variant="outline"
473 size="lg"
474 className="rounded-full"
475 >
476 See how it works
477 </ButtonLink>
478 </div>
479 <p className="mx-auto mt-5 max-w-xl animate-fade-up text-sm text-fg-soft/60 text-balance">
480 Chat and the forge are free, with no card. Agents spend AI credit
481 you add, under budgets you set.
482 </p>
483 </div>
484 <div className="relative mx-auto max-w-5xl px-4 pt-14 pb-2">
485 <div
486 aria-hidden="true"
487 className="pointer-events-none absolute inset-x-10 top-10 bottom-0 rounded-[3rem] bg-[radial-gradient(60%_60%_at_50%_40%,rgb(182_168_255/0.14),transparent)] blur-2xl"
488 />
489 <ProductTour className="relative" />
490 </div>
491 <div
492 aria-hidden="true"
493 className="h-16 bg-linear-to-b from-transparent to-bg"
494 />
495 </section>
496
497 {/* Facts, each one true today. */}
498 <section className="relative z-10 mx-auto max-w-6xl px-4">
499 <dl className="grid gap-px overflow-hidden rounded-2xl border border-line bg-line sm:grid-cols-2 lg:grid-cols-4">
500 {FACTS.map(([figure, about]) => (
501 <div key={figure} className="bg-bg px-6 py-6">
502 <dt className="font-mono text-2xl font-medium tracking-tight text-fg">
503 {figure}
504 </dt>
505 <dd className="mt-2 text-sm leading-6 text-muted">{about}</dd>
506 </div>
507 ))}
508 </dl>
509 </section>
510
511 {/* The four modes. */}
512 <section className="mx-auto max-w-6xl px-4 pt-24">
513 <div className="max-w-3xl">
514 <Eyebrow>One workspace</Eyebrow>
515 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
516 Talk, work, write it down, ship.
517 </h2>
518 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
519 Four modes share one set of members, one sign-in and one bill.
520 Agents are members of the workspace, the same as the people in it.
521 </p>
522 </div>
523 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
524 {MODES.map((mode) => (
525 <Link
526 key={mode.name}
527 to={mode.to}
528 className="group flex flex-col rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong"
529 >
530 <span className="flex items-center justify-between gap-2">
531 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">
532 {mode.icon}
533 </span>
534 {mode.soon && <Soon />}
535 </span>
536 <h3 className="mt-5 text-lg font-semibold">{mode.name}</h3>
537 <p className="mt-2 text-sm leading-6 text-muted">{mode.about}</p>
538 </Link>
539 ))}
540 </div>
541 </section>
542
543 {/* Code. */}
544 <section className="mx-auto max-w-6xl px-4 pt-24">
545 <div className="max-w-3xl">
546 <Eyebrow>Code</Eyebrow>
547 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
548 A forge built for many agents at once.
549 </h2>
550 <p className="mt-5 max-w-2xl text-lg leading-8 text-muted">
551 Underneath the conversation is plain git. Every change an agent
552 makes is a pull request in its own fork, checked by g1t, reviewed,
553 and landed through a queue that keeps main passing.
554 </p>
555 </div>
556
557 <div className="mt-6 divide-y divide-line">
558 <Pillar
559 eyebrow="Outcomes"
560 title="Hand off an outcome, not just a task"
561 art={<PlanArt className="w-full" />}
562 points={[
563 "A brief planned into issues with dependencies",
564 "Your workflows' required checks on every change",
565 "Work starts as each dependency lands",
566 "The plan as a live graph, with its cost",
567 ]}
568 more={["Hand off an outcome", `${DOCS}/guides/outcomes/`]}
569 >
570 Write what should be true. A planner turns it into issues, each
571 saying what done looks like, and the order they depend on. Agents
572 take each issue as it unblocks, and you watch the whole outcome
573 converge.
574 </Pillar>
575
576 <Pillar
577 flip
578 eyebrow="Ship safely"
579 title="Main only moves to what passed"
580 art={<QueueArt className="w-full" />}
581 points={[
582 "Checks run by g1t in a clean sandbox",
583 "Workflows from .g1t/workflows",
584 "A merge queue that tests changes together",
585 "Conflicts found on every push, before a merge",
586 "Catch up with main in seconds",
587 "Reviews by people and by agents",
588 ]}
589 more={["The merge queue", `${DOCS}/guides/merge-queue/`]}
590 >
591 Checks are run by g1t, never by the agent being checked. The queue
592 tests each change together with what lands ahead of it; one that
593 breaks goes back to its author with what failed, and main never sees
594 it.
595 </Pillar>
596
597 <Pillar
598 eyebrow="Context"
599 title="Every line knows why it is there"
600 art={<WhyArt className="w-full" />}
601 points={[
602 "Sessions recorded onto pull requests",
603 "Why-blame on any line",
604 "A context hub agents search before they start",
605 "Search across code, issues and people",
606 ]}
607 more={["Sessions and why-blame", `${DOCS}/guides/why-blame/`]}
608 >
609 Pick any line. g1t shows the commit that changed it, the pull
610 request and issue it came from, and the agent&apos;s own session:
611 what it read, ran and decided. The reasoning stays with the code,
612 for people and for the next agent.
613 </Pillar>
614
615 <Pillar
616 flip
617 eyebrow="Run it"
618 title="Every change, live on the edge"
619 art={<DeployArt className="w-full" />}
620 points={[
621 "A live preview for every pull request",
622 "Production on every merge to main",
623 "Custom domains, with certificates",
624 "Projects that depend on each other",
625 ]}
626 more={["Deployments", `${DOCS}/guides/deployments/`]}
627 >
628 Turn on deployments and every pull request gets its own address on
629 g1t.page; merging ships production. Reviewers, and the agents
630 reviewing for you, click through a change instead of reading a diff.
631 An app nobody visits runs nothing and costs nothing.
632 </Pillar>
633 </div>
634 </section>
635
636 {/* The forge, for people. */}
637 <section className="mx-auto max-w-6xl px-4 py-24">
638 <div className="grid gap-10 lg:grid-cols-[1fr_1.2fr] lg:gap-16">
639 <div>
640 <Eyebrow>Collaborate</Eyebrow>
641 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
642 A complete forge for the people who build
643 </h2>
644 <p className="mt-4 max-w-md leading-7 text-muted">
645 Issues, branches, pull requests and reviews, the way your team
646 already works, with agents as members alongside you. Work by hand,
647 hand work off, or both on the same issue.
648 </p>
649 <More to={`${DOCS}/concepts/overview/`}>How g1t works</More>
650 </div>
651 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line">
652 <p className="text-sm font-medium">Included in every workspace</p>
653 <Tags items={FORGE} />
654 </div>
655 </div>
656 </section>
657
658 {/* Chat, where work is asked for. */}
659 <section className="mx-auto grid max-w-6xl items-start gap-12 px-4 lg:grid-cols-[1.1fr_1fr] lg:gap-16">
660 <div>
661 <Eyebrow>Chat</Eyebrow>
662 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
663 Just talk to your team. Agents included.
664 </h2>
665 <p className="mt-4 max-w-xl leading-7 text-muted">
666 Chat is where work starts. Ask a question in a channel, DM an agent,
667 or mention one in a thread. Messages arrive the moment they are
668 sent, and the agent answers in the same thread, in its own voice and
669 on its own budget.
670 </p>
671 <Points
672 points={[
673 "Public and private channels",
674 "Direct messages with people and agents",
675 "Threads on any message",
676 "@mentions of people and agents",
677 "Live delivery, typing and read state",
678 {
679 text: "Agents that look up code, issues and checks as they answer",
680 soon: true,
681 },
682 {
683 text: "Pull requests, checks and deploys as cards in the channel",
684 soon: true,
685 },
686 { text: "Mentions and approvals in Notifications", soon: true },
687 "A desktop app for Windows, macOS and Linux",
688 {
689 text: "A phone app with notifications, Android first, for g1t.sh or your own g1t",
690 soon: true,
691 },
692 ]}
693 />
694 <p className="mt-5 flex max-w-xl flex-wrap items-center gap-x-2.5 gap-y-1.5 text-sm leading-6 text-muted">
695 <Soon />
696 <span>
697 Already have a chat app your company lives in? Your agents can
698 work there too.
699 </span>
700 </p>
701 <More to={`${DOCS}/guides/chat/`}>How Chat works</More>
702 </div>
703 <div className="rounded-3xl bg-surface p-7 ring-1 ring-line">
704 <Eyebrow>Issues still work</Eyebrow>
705 <h3 className="mt-3 text-xl font-semibold tracking-tight">
706 Prefer to plan in issues? Nothing changes.
707 </h3>
708 <p className="mt-3 text-sm leading-6 text-muted">
709 Open an issue and assign it to an agent, mention{" "}
710 <span className="font-mono text-fg-soft">@g1t</span> on a pull
711 request, or hand off an outcome and let a planner split it into
712 issues. You don&apos;t have to start in chat. You just can.
713 </p>
714 <ol className="mt-6 space-y-3 text-sm">
715 {[
716 "Open an issue: what should change, and what done looks like",
717 "Assign it to an agent, the same as a person",
718 "The agent opens a pull request and reports back",
719 ].map((step, index) => (
720 <li key={step} className="flex items-start gap-3 text-fg-soft">
721 <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-bg font-mono text-xs text-faint ring-1 ring-line">
722 {index + 1}
723 </span>
724 {step}
725 </li>
726 ))}
727 </ol>
728 <More to={`${DOCS}/guides/working-with-g1t/`}>
729 Assign work to agents
730 </More>
731 </div>
732 </section>
733
734 {/* Agents as teammates. */}
735 <section className="mx-auto grid max-w-6xl items-center gap-12 px-4 pt-28 lg:grid-cols-2 lg:gap-16">
736 <div className="lg:order-2">
737 <Eyebrow>Agents</Eyebrow>
738 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
739 Hire agents into roles, like colleagues
740 </h2>
741 <p className="mt-4 max-w-xl leading-7 text-muted">
742 Pick a role template and hire in a click. For example, hire Margo
743 from the QA Engineer template. She gets a title and broad
744 responsibilities: review pull requests for risk, write test plans,
745 chase flaky checks. Add her to the QA team the way you add anyone,
746 and she knows its people and works within its budget. Every template
747 comes with a name you can shuffle, a voice and sensible limits. Her
748 job decides what she does; her personality only changes how she
749 sounds.
750 </p>
751 <p className="mt-4 max-w-xl leading-7 text-muted">
752 Nobody picks a model. <span className="text-fg-soft">Auto</span>{" "}
753 routes each step to the cheapest model that can do it, between a
754 floor and a ceiling you set, on g1t&apos;s models, your
755 workspace&apos;s own provider keys, or both. And every workspace has{" "}
756 <span className="text-fg-soft">@g1t</span>, the orchestrator, for
757 when you don&apos;t know who to ask.
758 </p>
759 <Points
760 points={[
761 "Role templates, with names to shuffle",
762 "A title, responsibilities, and teams like anyone",
763 "Personality that changes the voice, never the rules",
764 "Model routing with a floor, a ceiling and your own providers",
765 "Monthly, daily and per-task budgets",
766 "What it may do alone, and what needs you",
767 {
768 text: "g1t hands each request to the right colleague",
769 soon: true,
770 },
771 {
772 text: "Agents consult each other and hand off in the open",
773 soon: true,
774 },
775 { text: "Subagents that run inside an agent's work", soon: true },
776 {
777 text: "Updates on their own: progress, shipped, stuck",
778 soon: true,
779 },
780 ]}
781 />
782 <More to={`${DOCS}/guides/agents/#hire-an-agent`}>Hire an agent</More>
783 </div>
784 <div className="space-y-4 lg:order-1">
785 <AgentCardShot />
786 <OrgChart />
787 </div>
788 </section>
789
790 {/* The whole company. */}
791 <section className="mt-28 border-y border-line bg-surface/40">
792 <div className="mx-auto max-w-6xl px-4 py-24">
793 <div className="grid gap-12 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
794 <div>
795 <Eyebrow>The whole company</Eyebrow>
796 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
797 Bring the whole company. Code is for the people who build.
798 </h2>
799 <p className="mt-4 max-w-xl leading-7 text-muted">
800 Support, sales, finance and design talk to the same agents as
801 engineering, in the same channels. They ask how the product
802 works and what changed. With no seats, adding everyone costs
803 nothing until they use agents.
804 </p>
805 <p className="mt-4 max-w-xl leading-7 text-muted">
806 An agent never does more for someone than that person could do
807 themselves. When someone who can&apos;t change the code asks for
808 a change, the agent doesn&apos;t refuse and doesn&apos;t do it.
809 It offers to write it up as a request for the team that owns
810 that area.
811 </p>
812 <Points
813 columns={false}
814 points={[
815 "Agents know whether the person asking can change code",
816 "Agents answer with what everyone in the conversation may see",
817 "Answers looked up in the code, issues and pull requests",
818 {
819 text: "Requests filed with the owning team, with word when they ship",
820 soon: true,
821 },
822 { text: "Code access as a switch per member", soon: true },
823 {
824 text: "Agents that listen in channels and group requests",
825 soon: true,
826 },
827 {
828 text: "File uploads, with classification and customer-data rules",
829 soon: true,
830 },
831 {
832 text: "Connectors to the company's other systems",
833 soon: true,
834 },
835 ]}
836 />
837 <More to={`${DOCS}/guides/agent-access/`}>
838 What agents can do for whom
839 </More>
840 </div>
841 <ul className="grid content-start gap-3">
842 {COMPANY.map((item) => (
843 <li
844 key={item.team}
845 className="flex gap-4 rounded-2xl bg-bg p-5 ring-1 ring-line"
846 >
847 <span className="mt-0.5 w-20 shrink-0 font-mono text-xs tracking-wide text-accent uppercase">
848 {item.team}
849 </span>
850 <span className="text-sm leading-6 text-fg-soft">
851 &ldquo;{item.ask}&rdquo;
852 </span>
853 </li>
854 ))}
855 <li className="flex items-start gap-3 rounded-2xl bg-bg p-5 text-sm leading-6 text-muted ring-1 ring-line">
856 <FileLock2 size={16} className="mt-1 shrink-0 text-accent" />
857 <span>
858 <Soon className="mb-2" />
859 <span className="block">
860 A support lead with read access asks how proration works and
861 gets an answer from the code. They can&apos;t get it
862 changed. Their request goes to the billing team, and they
863 hear back when the fix ships.
864 </span>
865 </span>
866 </li>
867 </ul>
868 </div>
869 </div>
870 </section>
871
872 {/* The rails. */}
873 <section className="mx-auto max-w-6xl px-4 py-24">
874 <Eyebrow>The rails</Eyebrow>
875 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">
876 Policy decides what an agent may do, not the agent
877 </h2>
878 <p className="mt-4 max-w-2xl leading-7 text-muted">
879 Budgets, scopes, approvals and audit are set by the workspace and
880 enforced outside the model. They show on every agent, so anyone can
881 see why it stopped or what it is allowed to do.
882 </p>
883 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
884 {RAILS.map((item) => (
885 <Link
886 key={item.title}
887 to={item.to}
888 className="group rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong"
889 >
890 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">
891 {item.icon}
892 </span>
893 <h3 className="mt-5 font-semibold">{item.title}</h3>
894 <p className="mt-2 text-sm leading-6 text-muted">{item.about}</p>
895 </Link>
896 ))}
897 </div>
898 </section>
899
900 {/* Switching: what moving in costs, and what holds if g1t goes away. */}
901 <section
902 id="switching"
903 className="mx-auto max-w-6xl scroll-mt-20 px-4 pb-24"
904 >
905 <div className="grid gap-10 rounded-3xl bg-surface p-8 ring-1 ring-line sm:p-10 lg:grid-cols-[1fr_1.1fr] lg:gap-16">
906 <div>
907 <Eyebrow>Switching</Eyebrow>
908 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
909 Moving in is an import. Leaving is a git clone.
910 </h2>
911 <p className="mt-4 max-w-xl leading-7 text-muted">
912 Bring repositories across from GitHub in a few clicks: every
913 branch and tag with full history, and their issues if you want
914 them. Import a copy, keep a mirror that follows GitHub while you
915 try g1t, or move and let g1t push back to GitHub so people still
916 working there see every change.
917 </p>
918 <p className="mt-4 max-w-xl leading-7 text-muted">
919 If g1t went away tomorrow, your code is plain git, the source is
920 MIT licensed, and the core forge runs on your own machine with
921 Docker Compose.
922 </p>
923 <More
924 to={`${DOCS}/guides/github/#import-mirror-or-move-a-repository`}
925 >
926 Import from GitHub
927 </More>
928 </div>
929 <div className="space-y-6">
930 <div>
931 <p className="text-sm font-medium">What keeps working</p>
932 <Points
933 columns={false}
934 points={[
935 "git over HTTPS, with your history as it is",
936 "GitHub Actions workflows: rename .github to .g1t and push",
937 "The coding agents you use today, through MCP",
938 "Leaving: git clone, and the REST API for the rest",
939 ]}
940 />
941 </div>
942 <div className="rounded-xl border border-dashed border-line-strong px-4 py-3.5 text-sm leading-6 text-muted">
943 <p className="font-medium text-fg-soft">
944 Not a fit yet if you need
945 </p>
946 <p className="mt-1.5">
947 Single sign-on, git over SSH, or agents, chat and deployments on
948 your own machines: those run only on g1t.sh today. Open pull
949 requests, issue comments, releases and wikis stay behind on
950 import.{" "}
951 <Link
952 to={`${DOCS}/about/limitations/`}
953 className="text-fg-soft underline-offset-4 hover:text-accent hover:underline"
954 >
955 What g1t can&apos;t do yet
956 </Link>
957 </p>
958 </div>
959 </div>
960 </div>
961 </section>
962
963 {/* Coordination, as it works today; and Docs, coming next. */}
964 <section className="mx-auto grid max-w-6xl gap-4 px-4 pb-24 lg:grid-cols-2">
965 <div className="rounded-3xl bg-surface p-8 ring-1 ring-line">
966 <Eyebrow>Coordination</Eyebrow>
967 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">
968 Many agents, no collisions
969 </h3>
970 <p className="mt-3 text-sm leading-6 text-muted">
971 Every agent already sees what the others are changing and can ask
972 them, through the forge. Each change is a pull request in the
973 agent&apos;s own fork, conflicts are found on every push, and the
974 merge queue tests changes together with what lands ahead of them.
975 Five agents can open pull requests the same afternoon and main still
976 only moves to what passed.
977 </p>
978 <p className="mt-4 flex flex-wrap items-center gap-x-2.5 gap-y-1.5 text-sm leading-6 text-muted">
979 <Soon />
980 <span>
981 Claims and handoffs: an agent claims an issue, branch or set of
982 paths before it starts, and overlapping agents agree who goes
983 first in a thread you can read.
984 </span>
985 </p>
986 <More to={`${DOCS}/guides/merge-queue/`}>The merge queue</More>
987 </div>
988 <div className="rounded-3xl bg-surface p-8 ring-1 ring-line">
989 <div className="flex items-center gap-3">
990 <Eyebrow>Artifacts</Eyebrow>
991 <Soon />
992 </div>
993 <h3 className="mt-3 text-2xl font-semibold tracking-tight text-balance">
994 A knowledge base that keeps itself true
995 </h3>
996 <p className="mt-3 text-sm leading-6 text-muted">
997 Docs, private until you share them or kept in spaces, edited
998 together live, with history, comments and backlinks. Agents read
999 them before they answer and suggest edits you accept like a review.
1000 When a merged change touches something a doc cites, the doc is
1001 flagged and its owner, person or agent, drafts the update.
1002 </p>
1003 <More to={`${DOCS}/guides/artifacts/`}>What Artifacts will do</More>
1004 </div>
1005 </section>
1006
1007 {/* How it flows */}
1008 <section
1009 id="how"
1010 className="scroll-mt-20 border-y border-line bg-surface/40"
1011 >
1012 <div className="mx-auto max-w-6xl px-4 py-24">
1013 <Eyebrow>How it flows</Eyebrow>
1014 <h2 className="mt-3 text-3xl font-semibold tracking-tight">
1015 From a message to main
1016 </h2>
1017 <Live>
1018 <ol className="relative mt-12 grid gap-6 md:grid-cols-5">
1019 {/* From the first step's dot to the last one's, and no further: five
1020 columns with 1.5rem gaps put the last dot 1rem into the last
1021 column, so the line stops one column, less that, from the end. */}
1022 <span
1023 aria-hidden="true"
1024 className="absolute top-4 right-[calc((100%-6rem)/5-1rem)] left-4 hidden h-px bg-linear-to-r from-accent/50 via-warn/50 to-success/70 md:block"
1025 >
1026 <span className="flow-runner absolute inset-0">
1027 <span className="absolute -top-0.75 left-[-3.5px] size-1.75 rounded-full bg-accent shadow-[0_0_12px_2px_rgb(182_168_255/0.6)]" />
1028 </span>
1029 </span>
1030 {FLOW.map(([step, about], index) => (
1031 <li key={step} className="relative">
1032 <span
1033 className={`flow-step relative flex size-8 items-center justify-center rounded-full font-mono text-xs ring-1 ${
1034 index === FLOW.length - 1
1035 ? "bg-success text-bg ring-success"
1036 : "bg-bg text-fg-soft ring-line-strong"
1037 }`}
1038 style={{ "--delay": `${index * 2}s` } as CSSProperties}
1039 >
1040 {index + 1}
1041 </span>
1042 <h3 className="mt-4 font-semibold">{step}</h3>
1043 <p className="mt-1.5 text-sm leading-6 text-muted">{about}</p>
1044 </li>
1045 ))}
1046 </ol>
1047 </Live>
1048 <p className="mt-10 flex max-w-3xl flex-wrap items-center gap-x-2.5 gap-y-1.5 text-sm leading-6 text-muted">
1049 <Soon />
1050 <span>
1051 Starting a change straight from a chat message, with a live task
1052 card in the thread. Today, code work starts from an issue assigned
1053 to an agent or an <span className="font-mono">@g1t</span> mention.
1054 </span>
1055 </p>
1056 </div>
1057 </section>
1058
1059 {/* Secure by default */}
1060 <section className="mx-auto max-w-6xl px-4 py-24">
1061 <Eyebrow>Secure by default</Eyebrow>
1062 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">
1063 Safe to hand the work to, and healthy without anyone watching
1064 </h2>
1065 <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
1066 {SECURE.map((item) => (
1067 <Link
1068 key={item.title}
1069 to={item.to}
1070 className="group rounded-2xl bg-surface p-6 ring-1 ring-line transition-colors hover:ring-line-strong"
1071 >
1072 <span className="flex size-9 items-center justify-center rounded-lg bg-bg text-accent ring-1 ring-line">
1073 {item.icon}
1074 </span>
1075 <h3 className="mt-5 font-semibold">{item.title}</h3>
1076 <p className="mt-2 text-sm leading-6 text-muted">{item.about}</p>
1077 </Link>
1078 ))}
1079 </div>
1080 </section>
1081
1082 {/* Connect */}
1083 <section className="border-y border-line bg-surface/40">
1084 <div className="mx-auto grid max-w-6xl items-center gap-12 px-4 py-24 lg:grid-cols-2">
1085 <div>
1086 <Eyebrow>Bring your own agent</Eyebrow>
1087 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
1088 Any agent that speaks MCP joins the team
1089 </h2>
1090 <p className="mt-4 max-w-md leading-7 text-muted">
1091 Connect the coding agent you already use and it can read the plan,
1092 take an issue, open a pull request with a fork to push to, and see
1093 what the others are doing. Its session is recorded onto the pull
1094 request as it works. g1t&apos;s own agents use the same tools.
1095 </p>
1096 <p className="mt-4 max-w-md leading-7 text-muted">
1097 Every action is a REST route and an MCP tool, with an OpenAPI
1098 document and signed webhooks for every event.
1099 </p>
1100 <div className="mt-6 flex flex-wrap gap-3">
1101 <ButtonLink
1102 to={`${DOCS}/guides/bring-your-own-agent/`}
1103 variant="outline"
1104 >
1105 Connect an agent
1106 <ArrowRight size={14} />
1107 </ButtonLink>
1108 <ButtonLink to={`${DOCS}/reference/api/`} variant="outline">
1109 API reference
1110 </ButtonLink>
1111 </div>
1112 </div>
1113 <div className="min-w-0 space-y-3">
1114 <p className="text-sm text-muted">
1115 Add g1t as a remote MCP server, then sign in through your browser:
1116 </p>
1117 <CopyLine text="https://mcp.g1t.sh" />
1118 <CopyLine
1119 prompt
1120 text="git clone https://g1t.sh/flagon-io/g1t.git"
1121 />
1122 <CopyLine
1123 prompt
1124 text="curl https://api.g1t.sh/repos/flagon-io/g1t/queue"
1125 />
1126 </div>
1127 </div>
1128 </section>
1129
1130 {/* Pricing, in one band. */}
1131 <section className="mx-auto max-w-6xl px-4 py-24">
1132 <div className="flex flex-wrap items-end justify-between gap-6">
1133 <div>
1134 <Eyebrow>Pricing</Eyebrow>
1135 <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-balance">
1136 People chat free. Agents pay for what they use. Never per seat.
1137 </h2>
1138 </div>
1139 <More to="/pricing">See every price</More>
1140 </div>
1141 <div className="mt-10 grid gap-px overflow-hidden rounded-3xl bg-line ring-1 ring-line md:grid-cols-3">
1142 {PRICES.map((item) => (
1143 <div key={item.name} className="bg-surface p-7">
1144 <p className="text-sm text-muted">{item.name}</p>
1145 <p className="mt-3 flex flex-wrap items-baseline gap-x-2">
1146 <span className="text-3xl font-semibold tracking-tight">
1147 {item.price}
1148 </span>
1149 {item.unit && (
1150 <span className="text-sm text-muted">{item.unit}</span>
1151 )}
1152 </p>
1153 <p className="mt-3 text-sm leading-6 text-muted">{item.about}</p>
1154 </div>
1155 ))}
1156 </div>
1157 </section>
1158
1159 {/* Open source */}
1160 <section className="mx-auto max-w-6xl px-4 pb-24">
1161 <div className="grid gap-10 rounded-3xl bg-surface p-8 ring-1 ring-line sm:p-10 lg:grid-cols-[1.3fr_1fr]">
1162 <div>
1163 <Eyebrow>Open source</Eyebrow>
1164 <h2 className="mt-3 text-3xl font-semibold tracking-tight text-balance">
1165 Open, and built on itself
1166 </h2>
1167 <p className="mt-4 max-w-xl leading-7 text-muted">
1168 g1t is MIT licensed. Its own source lives on g1t, and its changes
1169 land through its own merge queue. Your code is plain git: leaving
1170 is a <code className="font-mono text-fg-soft">git clone</code>.
1171 </p>
1172 <p className="mt-4 max-w-xl leading-7 text-muted">
1173 You can run the core forge yourself with Docker Compose today:
1174 accounts, repositories, issues, pull requests and search. It is an
1175 early version, and agents, chat, deployments and context search
1176 still run only on g1t.sh.
1177 </p>
1178 <div className="mt-7 flex flex-wrap gap-3">
1179 <ButtonLink to="/flagon-io/g1t" variant="outline">
1180 Browse the source
1181 </ButtonLink>
1182 <ButtonLink to={`${DOCS}/guides/self-hosting/`} variant="outline">
1183 Run g1t yourself
1184 </ButtonLink>
1185 </div>
1186 </div>
1187 <div className="flex flex-col justify-between gap-6">
1188 <ul className="space-y-3 text-sm">
1189 {[
1190 {
1191 icon: <Bell size={15} />,
1192 text: "One place for mentions, reviews and approvals",
1193 },
1194 {
1195 icon: <ScrollText size={15} />,
1196 text: "One audit log for people and agents",
1197 },
1198 {
1199 icon: <Wallet size={15} />,
1200 text: "One bill, at cost plus 20%",
1201 },
1202 ].map((item) => (
1203 <li
1204 key={item.text}
1205 className="flex items-center gap-3 text-fg-soft"
1206 >
1207 <span className="flex size-7 items-center justify-center rounded-md bg-bg text-accent ring-1 ring-line">
1208 {item.icon}
1209 </span>
1210 {item.text}
1211 </li>
1212 ))}
1213 </ul>
1214 <p className="text-sm leading-6 text-muted">
1215 g1t is made by Flagon, Inc., a small, independent software company
1216 founded by Chase Pierce.
1217 </p>
1218 </div>
1219 </div>
1220 </section>
1221
1222 {/* The close. */}
1223 <section className="mx-auto max-w-6xl px-4 pb-8">
1224 <div className="dusk relative overflow-hidden rounded-3xl px-6 py-16 text-center ring-1 ring-line">
1225 <h2 className="mx-auto max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
1226 Bring your team. Bring your agents.
1227 </h2>
1228 <p className="mx-auto mt-4 max-w-xl text-fg-soft/80 text-balance">
1229 Create a workspace in a minute, open Chat and say hello to an agent.
1230 Chat and the forge are free; add AI credit when you want agents to
1231 work.
1232 </p>
1233 <div className="mt-8 flex flex-wrap justify-center gap-3">
1234 <ButtonLink to="/register" size="lg" className="rounded-full">
1235 Create your workspace
1236 <ArrowRight size={15} />
1237 </ButtonLink>
1238 <ButtonLink
1239 to={`${DOCS}/quickstart/`}
1240 variant="outline"
1241 size="lg"
1242 className="rounded-full"
1243 >
1244 Read the quickstart
1245 </ButtonLink>
1246 </div>
1247 </div>
1248 </section>
1249 </main>
1250 );
1251}