Skip to content
Sign up

flagon-io/g1t

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