Skip to content
Sign in

flagon-io/g1t

public
0

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

404 lines18,072 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.

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1import { ArrowUpRight, Users } from "lucide-react";
2import { useState } from "react";
Merge branch 'worktree-agent-a985c01f43538af01'3import { Form, Link, data, useSearchParams } from "react-router";
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look4
5import {
6 BASE_PERMISSIONS,
7 BASE_PERMISSION_LABELS,
8 type BasePermission,
9 DEFAULT_BASE_PERMISSION,
10 REPO_ROLE_LABELS,
11} from "@g1t/contracts";
Agents as a team: lifecycle, merge queue, billing and a new shell12
13import type { Route } from "./+types/people";
Social cards for every page: og.g1t.sh14import { page } from "../../lib/meta";
Merge branch 'worktree-agent-a985c01f43538af01'15import { Avatar, CopyLine, ErrorText, Field, Input, Pill, SubmitButton, TimeAgo } from "../../components/ui";
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look16import { Badge } from "../../components/ui/badge";
17import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select";
18import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs";
19import { inviteLink, inviteState, moreInvitesMailto } from "../../lib/invites";
Merge Stripe Tax, the card fee on card payments, and one free workspace per person20import { billing, identity } from "../../lib/services.server";
21import { StartPlanToInvite } from "../../components/start-plan";
Agents as a team: lifecycle, merge queue, billing and a new shell22import {
23 assertSameOrigin,
24 getViewer,
25 requireUser,
26 roleIn,
27 unwrap,
28} from "../../lib/session.server";
29
Social cards for every page: og.g1t.sh30export function meta({ params, ...args }: Route.MetaArgs) {
Navigation: the workspace's own page with tabs, pins and recent in the sidebar31 return page(args, { title: `People · ${params.owner} · g1t` });
Agents as a team: lifecycle, merge queue, billing and a new shell32}
33
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look34export async function loader({ params, context, request }: Route.LoaderArgs) {
Agents as a team: lifecycle, merge queue, billing and a new shell35 const viewer = getViewer(context);
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look36 const role = roleIn(viewer, params.owner);
37 // Who is in a workspace is its members' business; anyone else, including
38 // someone a repository is shared with, gets nothing here.
39 if (!role) throw data(null, { status: 404 });
40 const owner = role === "owner";
Merge Stripe Tax, the card fee on card payments, and one free workspace per person41 const [members, invites, workspace, outside, teams, free] = await Promise.all([
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look42 identity.listMembers(params.owner, viewer),
43 owner ? identity.workspaceInvites(params.owner, viewer).catch(() => null) : null,
44 identity.getWorkspace(params.owner),
45 owner ? identity.outsideCollaborators(viewer, params.owner).catch(() => null) : null,
Teams and CODEOWNERS, labels and milestones, dependency updates, the security suite, and a clearer top bar46 // Each member's teams, as the viewer may see them.
47 identity.teamMemberships(viewer, params.owner).catch(() => null),
Merge Stripe Tax, the card fee on card payments, and one free workspace per person48 // A free workspace adds no one until it starts the plan; identity
49 // refuses it either way, so a failure here only hides the note.
50 billing.freeWorkspaces([params.owner]).catch(() => [] as string[]),
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look51 ]);
Agents as a team: lifecycle, merge queue, billing and a new shell52 return {
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look53 role,
Merge Stripe Tax, the card fee on card payments, and one free workspace per person54 free: free.includes(params.owner.toLowerCase()),
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look55 members: unwrap(members),
56 invites: invites?.ok ? invites.value : [],
57 base: workspace?.basePermission ?? DEFAULT_BASE_PERMISSION,
58 outside: outside?.ok ? outside.value : [],
Teams and CODEOWNERS, labels and milestones, dependency updates, the security suite, and a clearer top bar59 teams: Object.fromEntries((teams?.ok ? teams.value : []).map((person) => [person.username, person.teams])),
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look60 origin: new URL(request.url).origin,
Agents as a team: lifecycle, merge queue, billing and a new shell61 };
62}
63
64export async function action({ request, params, context }: Route.ActionArgs) {
65 assertSameOrigin(request);
66 const user = requireUser(context, request);
67 const form = await request.formData();
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look68 if (form.get("action") === "revoke-invite") {
69 const result = await identity.revokeWorkspaceInvite(user, params.owner, String(form.get("id") ?? ""));
70 return result.ok ? null : { error: result.error.message };
71 }
72 if (form.get("action") === "base-permission") {
73 const base = String(form.get("base") ?? "");
74 if (!(BASE_PERMISSIONS as readonly string[]).includes(base)) return { error: "Choose a base permission." };
75 const result = await identity.setBasePermission(user, params.owner, base as BasePermission);
76 return result.ok ? { based: result.value } : { error: result.error.message, base: true };
77 }
78 const member = String(form.get("member") ?? "").trim();
79 // An address is invited by email; a username is added at once.
80 if (form.get("action") !== "remove" && member.includes("@")) {
81 const result = await identity.inviteMember(user, params.owner, member);
82 return result.ok ? { invited: result.value.email, outOfInvites: false } : { error: result.error.message, outOfInvites: result.error.code === "limit" };
83 }
Agents as a team: lifecycle, merge queue, billing and a new shell84 const result =
85 form.get("action") === "remove"
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look86 ? await identity.removeMember(user, params.owner, member)
87 : await identity.addMember(user, params.owner, member);
88 if (!result.ok) return { error: result.error.message, converting: form.get("action") === "convert" };
89 return form.get("action") === "convert" ? { converted: member } : null;
Agents as a team: lifecycle, merge queue, billing and a new shell90}
91
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look92/** What the base permission means for members, in a sentence. */
93const BASE_MEANS: Record<BasePermission, string> = {
94 none: "Members see only public repositories and the ones they are given a role on.",
95 read: "Members can see and clone every repository, open issues and pull requests, and comment.",
96 write: "Members can see every repository, manage its issues and pull requests, push, merge, and put agents to work.",
97 admin: "Members can do everything on every repository, including its settings, webhooks, secrets and who has access. Only owners transfer or delete one.",
98};
99
100export default function WorkspacePeople({ loaderData, actionData, params }: Route.ComponentProps) {
Merge Stripe Tax, the card fee on card payments, and one free workspace per person101 const { role, members, invites, origin, base, outside, teams, free } = loaderData;
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look102 const owner = role === "owner";
103 const pending = invites.filter((invite) => invite.status === "pending");
104 const [search, setSearch] = useSearchParams();
105 const tab = search.get("tab") === "outside" && owner ? "outside" : "members";
106 const membersTab = (
107 <>
A catalogue of model providers, and settings that feel like settings108 <ul className="divide-y divide-line rounded-xl border border-line">
Agents as a team: lifecycle, merge queue, billing and a new shell109 {members.map((member) => (
110 <li key={member.username} className="flex items-center gap-3 px-4 py-3">
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look111 <Avatar name={member.username} image={member.avatar} size={28} />
112 <div className="min-w-0 grow truncate">
113 <Link to={`/u/${member.username}`} className="font-mono text-sm hover:text-accent">
114 {member.username}
115 </Link>
116 {member.name && <span className="ml-2 hidden text-sm text-muted sm:inline">{member.name}</span>}
Teams and CODEOWNERS, labels and milestones, dependency updates, the security suite, and a clearer top bar117 {(teams[member.username] ?? []).length > 0 && (
118 <div className="mt-1 flex flex-wrap gap-1">
119 {(teams[member.username] ?? []).slice(0, 3).map((team) => (
120 <Link
121 key={team.slug}
122 to={`/${params.owner}/-/teams/${team.slug}`}
123 className="rounded-full border border-line px-2 py-px text-xs text-muted transition-colors hover:border-line-strong hover:text-fg"
124 >
125 {team.name}
126 </Link>
127 ))}
128 {(teams[member.username] ?? []).length > 3 && (
129 <span className="px-1 text-xs text-faint">+{(teams[member.username] ?? []).length - 3} more</span>
130 )}
131 </div>
132 )}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look133 </div>
134 {member.role === "owner" ? <Badge tone="accent">Owner</Badge> : <Badge>Member</Badge>}
135 {owner && (
136 // The same room on every row, so the badges line up.
137 <span className="flex w-[5.5rem] justify-end">
138 {member.role !== "owner" && (
139 <Form method="post">
140 <input type="hidden" name="action" value="remove" />
141 <input type="hidden" name="member" value={member.username} />
Merge branch 'worktree-agent-a985c01f43538af01'142 <SubmitButton variant="quiet" match={{ action: "remove", member: member.username }} pending="Removing…">
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look143 Remove
Merge branch 'worktree-agent-a985c01f43538af01'144 </SubmitButton>
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look145 </Form>
146 )}
147 </span>
Agents as a team: lifecycle, merge queue, billing and a new shell148 )}
149 </li>
150 ))}
151 </ul>
Merge Stripe Tax, the card fee on card payments, and one free workspace per person152 {owner && free && (
153 <div className="mt-6">
154 <StartPlanToInvite workspace={params.owner} owner={owner} />
155 </div>
156 )}
157 {owner && !free && (
Merge branch 'worktree-agent-a985c01f43538af01'158 // Empty again once the person is on the list; kept as typed when it failed.
159 <Form
160 method="post"
161 key={`${members.length}:${pending.length}`}
162 className="mt-6 flex flex-col gap-3 sm:flex-row sm:items-start"
163 >
164 <input type="hidden" name="action" value="add" />
Agents as a team: lifecycle, merge queue, billing and a new shell165 <div className="grow">
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look166 <Field
167 label="Add a member"
168 hint="A g1t username joins at once, as a member. An email address gets an invite: without a g1t account, it makes one and joins in one step, using one of your invites."
169 >
170 <Input name="member" required maxLength={254} placeholder="username or name@example.com" />
Agents as a team: lifecycle, merge queue, billing and a new shell171 </Field>
172 </div>
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look173 <div className="sm:pt-[1.625rem]">
Merge branch 'worktree-agent-a985c01f43538af01'174 <SubmitButton match={{ action: "add" }} pending="Adding…">
175 Add
176 </SubmitButton>
Agents as a team: lifecycle, merge queue, billing and a new shell177 </div>
178 </Form>
179 )}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look180 {actionData && "invited" in actionData && actionData.invited && (
181 <p className="text-sm text-muted" role="status">
182 Invite sent to <span className="text-fg">{actionData.invited}</span>.
183 </p>
184 )}
185 {actionData && "converted" in actionData && (
186 <p className="text-sm text-muted" role="status">
187 <span className="font-mono text-fg">{actionData.converted}</span> is now a member of {params.owner}.
188 </p>
189 )}
190 {actionData && !("base" in actionData) && !("converting" in actionData && actionData.converting) && (
191 <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>
192 )}
193 {actionData && "outOfInvites" in actionData && actionData.outOfInvites && (
194 <p className="mt-1 text-sm text-muted">
195 <a href={moreInvitesMailto(params.owner)} className="text-accent underline underline-offset-4">
196 Ask for more invites
197 </a>{" "}
198 for {params.owner}.
199 </p>
200 )}
201
202 {owner && pending.length > 0 && (
203 <section className="mt-8">
204 <h2 className="text-sm font-medium">Pending invites</h2>
205 <ul className="mt-3 divide-y divide-line rounded-xl border border-line">
206 {pending.map((invite) => (
207 <li key={invite.id} className="space-y-2 px-4 py-3">
208 <div className="flex flex-wrap items-center gap-3">
209 <span className="min-w-0 grow truncate text-sm">{invite.email}</span>
210 <Pill>{inviteState(invite).label}</Pill>
211 <Form method="post">
212 <input type="hidden" name="action" value="revoke-invite" />
213 <input type="hidden" name="id" value={invite.id} />
Merge branch 'worktree-agent-a985c01f43538af01'214 <SubmitButton variant="quiet" match={{ action: "revoke-invite", id: invite.id }} pending="Revoking…">
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look215 Revoke
Merge branch 'worktree-agent-a985c01f43538af01'216 </SubmitButton>
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look217 </Form>
218 </div>
219 <p className="text-xs text-faint">
220 By {invite.invitedBy ?? "g1t"} · <TimeAgo at={invite.createdAt} />
221 </p>
222 {invite.code && <CopyLine text={inviteLink(invite.code, origin)} />}
223 </li>
224 ))}
225 </ul>
226 </section>
227 )}
228
229 <BasePermissionSection
Merge branch 'worktree-agent-a985c01f43538af01'230 // Starts from the saved choice whenever it changes.
231 key={base}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look232 base={base}
233 owner={owner}
234 slug={params.owner}
235 error={actionData && "base" in actionData && "error" in actionData ? (actionData.error ?? null) : null}
236 saved={Boolean(actionData && "based" in actionData)}
237 />
238 </>
239 );
240 return (
241 <div className="max-w-2xl">
242 {owner ? (
243 <Tabs
244 value={tab}
245 onValueChange={(value) => {
246 const next = new URLSearchParams(search);
247 if (value === "outside") next.set("tab", "outside");
248 else next.delete("tab");
249 setSearch(next, { replace: true, preventScrollReset: true });
250 }}
251 >
252 <TabsList className="mb-3">
253 <TabsTrigger value="members">Members · {members.length}</TabsTrigger>
254 <TabsTrigger value="outside">Outside collaborators · {outside.length}</TabsTrigger>
255 </TabsList>
256 <TabsContent value="members">{membersTab}</TabsContent>
257 <TabsContent value="outside">
258 <OutsideCollaborators
259 people={outside}
260 slug={params.owner}
Merge Stripe Tax, the card fee on card payments, and one free workspace per person261 free={free}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look262 error={actionData && "converting" in actionData && actionData.converting ? actionData.error : null}
263 />
264 </TabsContent>
265 </Tabs>
266 ) : (
267 membersTab
268 )}
Agents as a team: lifecycle, merge queue, billing and a new shell269 </div>
270 );
271}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look272
273/** What members get on every repository, which owners choose. */
274function BasePermissionSection({
275 base,
276 owner,
277 slug,
278 error,
279 saved,
280}: {
281 base: BasePermission;
282 owner: boolean;
283 slug: string;
284 error: string | null;
285 saved: boolean;
286}) {
287 const [chosen, setChosen] = useState<BasePermission>(base);
288 return (
289 <section id="base-permission" className="mt-10 scroll-mt-20 border-t border-line pt-8">
290 <h2 className="font-medium">Base permission</h2>
291 <p className="mt-1 text-sm text-muted">
292 The role every member has on each of {slug}'s repositories. Owners are Admins on all of them, and a role given to
293 someone on one repository adds to this; it never takes away.
294 </p>
295 {owner ? (
296 <Form method="post" className="mt-4 rounded-xl border border-line bg-surface p-4">
297 <input type="hidden" name="action" value="base-permission" />
298 <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
299 <Select name="base" value={chosen} onValueChange={(value) => setChosen(value as BasePermission)}>
300 <SelectTrigger aria-label="Base permission" className="sm:max-w-48">
301 <SelectValue />
302 </SelectTrigger>
303 <SelectContent>
304 {BASE_PERMISSIONS.map((value) => (
305 <SelectItem key={value} value={value} description={BASE_MEANS[value]}>
306 {BASE_PERMISSION_LABELS[value]}
307 </SelectItem>
308 ))}
309 </SelectContent>
310 </Select>
Merge branch 'worktree-agent-a985c01f43538af01'311 <SubmitButton variant="quiet" match={{ action: "base-permission" }} pending="Saving…" disabled={chosen === base}>
312 Save
313 </SubmitButton>
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look314 {saved && chosen === base && <span className="text-sm text-muted">Saved.</span>}
315 </div>
316 <p className="mt-3 text-sm text-muted">{BASE_MEANS[chosen]}</p>
317 <ErrorText>{error}</ErrorText>
318 </Form>
319 ) : (
320 <div className="mt-4 rounded-xl border border-line bg-surface p-4 text-sm">
321 <p>
322 <span className="font-medium">{BASE_PERMISSION_LABELS[base]}.</span>{" "}
323 <span className="text-muted">{BASE_MEANS[base]}</span>
324 </p>
325 <p className="mt-2 text-xs text-faint">Owners of the workspace choose it.</p>
326 </div>
327 )}
328 </section>
329 );
330}
331
332/** People with a role on some of the workspace's repositories who are not members of it. */
333function OutsideCollaborators({
334 people,
335 slug,
Merge Stripe Tax, the card fee on card payments, and one free workspace per person336 free,
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look337 error,
338}: {
339 people: Route.ComponentProps["loaderData"]["outside"];
340 slug: string;
Merge Stripe Tax, the card fee on card payments, and one free workspace per person341 free: boolean;
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look342 error: string | null | undefined;
343}) {
344 return (
345 <>
346 <p className="mb-4 text-sm text-muted">
347 People given a role on one or more of {slug}'s repositories without being members. They see only those
348 repositories. Change or take away a role on the repository's Access settings.
349 </p>
Merge Stripe Tax, the card fee on card payments, and one free workspace per person350 {free && (
351 <div className="mb-4">
352 <StartPlanToInvite workspace={slug} owner />
353 </div>
354 )}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look355 {people.length === 0 ? (
356 <div className="rounded-xl border border-dashed border-line px-6 py-10 text-center">
357 <Users size={18} className="mx-auto text-faint" />
358 <p className="mt-2 text-sm font-medium">No outside collaborators</p>
359 <p className="mt-1 text-sm text-muted">Add someone to a single repository from its Settings → Access.</p>
360 </div>
361 ) : (
362 <ul className="divide-y divide-line rounded-xl border border-line">
363 {people.map((person) => (
364 <li key={person.username} className="px-4 py-3">
365 <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
366 <Avatar name={person.username} image={person.avatar} size={28} />
367 <div className="min-w-0 grow basis-32">
368 <Link to={`/u/${person.username}`} className="font-mono text-sm hover:text-accent">
369 {person.username}
370 </Link>
371 {person.name && <span className="ml-2 text-sm text-muted">{person.name}</span>}
372 </div>
Merge Stripe Tax, the card fee on card payments, and one free workspace per person373 {!free && (
374 <Form method="post">
375 <input type="hidden" name="action" value="convert" />
376 <input type="hidden" name="member" value={person.username} />
377 <SubmitButton variant="quiet" match={{ action: "convert", member: person.username }} pending="Converting…">
378 Convert to member
379 </SubmitButton>
380 </Form>
381 )}
Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look382 </div>
383 <ul className="mt-2 flex flex-wrap gap-1.5 pl-10">
384 {person.repos.map((grant) => (
385 <li key={grant.repo}>
386 <Link
387 to={`/${grant.repo}/settings/access`}
388 className="group inline-flex items-center gap-1.5 rounded-full border border-line px-2 py-0.5 text-xs transition-colors hover:border-line-strong hover:bg-surface"
389 >
390 <span className="font-mono text-fg/90">{grant.repo}</span>
391 <span className="text-muted">{REPO_ROLE_LABELS[grant.role]}</span>
392 <ArrowUpRight size={11} className="text-faint group-hover:text-fg" />
393 </Link>
394 </li>
395 ))}
396 </ul>
397 </li>
398 ))}
399 </ul>
400 )}
401 <ErrorText>{error}</ErrorText>
402 </>
403 );
404}

This file's history is long; its oldest lines are credited to the oldest commit read.