Sign in

flagon-io/g1t

public

g1t/apps/web/app/routes/workspace/layout.tsx

127 lines5,179 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Integrations: your own model provider, alerts that open issues, tickets agents read1import { CreditCard, KeyRound, LayoutGrid, Plug, Plus, Settings, Users } from "lucide-react";
A catalogue of model providers, and settings that feel like settings2import { Outlet, data, useLocation, useRouteLoaderData } from "react-router";
Agents as a team: lifecycle, merge queue, billing and a new shell3
4import type { Route } from "./+types/layout";
5import { Avatar, ButtonLink, Pill, TabLink } from "../../components/ui";
6import { identity } from "../../lib/services.server";
7import { getViewer, roleIn } from "../../lib/session.server";
8
9export function meta({ loaderData, params }: Route.MetaArgs) {
10 return [{ title: `${loaderData?.workspace.name ?? params.owner} · g1t` }];
11}
12
13export async function loader({ params, context }: Route.LoaderArgs) {
14 const workspace = await identity.getWorkspace(params.owner);
15 if (!workspace) throw data(null, { status: 404 });
16 return { workspace, role: roleIn(getViewer(context), workspace.slug) };
17}
18
A catalogue of model providers, and settings that feel like settings19/** A workspace's own pages, each with its title and what it is for. */
20const PAGES: Record<string, { title: string; about: string }> = {
21 settings: { title: "General", about: "The workspace's name, address and description." },
22 people: {
23 title: "Members",
24 about: "Members create repositories, push, manage issues and merge pull requests. Owners also manage members, tokens, billing and integrations.",
25 },
26 tokens: {
27 title: "Access tokens",
28 about: "Tokens that belong to the workspace, not a person: for CI, integrations and agents that work for the whole team.",
29 },
30 usage: { title: "Usage", about: "What the workspace's agents cost, run by run, by repository, pull request and model." },
31 billing: { title: "Billing", about: "Agent credit, and every charge against it." },
Webhooks: every event, to your own addresses, signed and retried32 webhooks: {
33 title: "Webhooks",
34 about: "Every repository's events, sent to your own addresses as they happen. A repository can also have its own, under its settings.",
35 },
A catalogue of model providers, and settings that feel like settings36 integrations: {
37 title: "Integrations",
38 about: "Model providers, alerts and trackers. Secrets are sealed when saved, and agents never see them.",
39 },
40};
41
Agents as a team: lifecycle, merge queue, billing and a new shell42export default function WorkspaceLayout({ loaderData }: Route.ComponentProps) {
43 const { workspace, role } = loaderData;
44 const base = `/${workspace.slug}`;
45 const signedIn = useRouteLoaderData("root")?.user != null;
A catalogue of model providers, and settings that feel like settings46 // The sidebar finds the workspace's pages for someone signed in, so its
47 // pages need a title, not the workspace's whole header again.
48 const page = PAGES[useLocation().pathname.split("/-/")[1]?.split("/")[0] ?? ""];
49 if (signedIn && page) {
50 return (
51 <div className="mx-auto max-w-5xl px-4 py-10 sm:px-8">
52 <header className="mb-8 border-b border-line pb-6">
53 <h1 className="text-2xl font-semibold tracking-tight">{page.title}</h1>
54 <p className="mt-1.5 text-sm text-muted">{page.about}</p>
55 </header>
56 <Outlet />
57 </div>
58 );
59 }
Agents as a team: lifecycle, merge queue, billing and a new shell60 return (
61 <>
62 {/* The workspace's own header band, under the site header. */}
63 <div className="border-b border-line bg-surface/60">
64 <div className="mx-auto max-w-6xl px-4 pt-8">
65 <div className="flex flex-wrap items-center gap-4">
66 <Avatar name={workspace.slug} size={52} square />
67 <div className="min-w-0 grow">
68 <div className="flex flex-wrap items-center gap-2.5">
69 <h1 className="truncate text-2xl font-semibold tracking-tight">
70 {workspace.name}
71 </h1>
72 {role && <Pill>{role}</Pill>}
73 </div>
74 <p className="font-mono text-sm text-muted">g1t.sh/{workspace.slug}</p>
75 </div>
76 {role && (
77 <ButtonLink to={`/new?workspace=${workspace.slug}`}>
78 <Plus size={15} />
79 New repository
80 </ButtonLink>
81 )}
82 </div>
83 {workspace.description && (
84 <p className="mt-4 max-w-2xl text-sm text-muted">{workspace.description}</p>
85 )}
86 {signedIn ? (
87 <div className="pb-8" />
88 ) : (
89 <nav className="mt-6 flex flex-wrap gap-x-6">
90 <TabLink to={base} end icon={<LayoutGrid size={15} />}>
91 Overview
92 </TabLink>
93 {role && (
94 <>
95 <TabLink
96 to={`${base}/-/people`}
97 icon={<Users size={15} />}
98 count={workspace.memberCount}
99 >
100 People
101 </TabLink>
102 <TabLink to={`${base}/-/tokens`} icon={<KeyRound size={15} />}>
103 Access tokens
104 </TabLink>
105 <TabLink to={`${base}/-/billing`} icon={<CreditCard size={15} />}>
106 Billing
107 </TabLink>
Integrations: your own model provider, alerts that open issues, tickets agents read108 <TabLink to={`${base}/-/integrations`} icon={<Plug size={15} />}>
109 Integrations
110 </TabLink>
Agents as a team: lifecycle, merge queue, billing and a new shell111 </>
112 )}
113 {role === "owner" && (
114 <TabLink to={`${base}/-/settings`} icon={<Settings size={15} />}>
115 Settings
116 </TabLink>
117 )}
118 </nav>
119 )}
120 </div>
121 </div>
122 <div className="mx-auto max-w-6xl px-4 py-8">
123 <Outlet />
124 </div>
125 </>
126 );
127}