g1t/apps/web/app/routes/workspace/people.tsx
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.
| Agents as a team: lifecycle, merge queue, billing and a new shell | 1 | import { Form } from "react-router"; |
| 2 | ||
| 3 | import type { Route } from "./+types/people"; | |
| 4 | import { Avatar, Button, ErrorText, Field, Input, Pill } from "../../components/ui"; | |
| 5 | import { identity } from "../../lib/services.server"; | |
| 6 | import { | |
| 7 | assertSameOrigin, | |
| 8 | getViewer, | |
| 9 | requireUser, | |
| 10 | roleIn, | |
| 11 | unwrap, | |
| 12 | } from "../../lib/session.server"; | |
| 13 | ||
| 14 | export function meta({ params }: Route.MetaArgs) { | |
| 15 | return [{ title: `People · ${params.owner} · g1t` }]; | |
| 16 | } | |
| 17 | ||
| 18 | export async function loader({ params, context }: Route.LoaderArgs) { | |
| 19 | const viewer = getViewer(context); | |
| 20 | return { | |
| 21 | role: roleIn(viewer, params.owner), | |
| 22 | members: unwrap(await identity.listMembers(params.owner, viewer)), | |
| 23 | }; | |
| 24 | } | |
| 25 | ||
| 26 | export async function action({ request, params, context }: Route.ActionArgs) { | |
| 27 | assertSameOrigin(request); | |
| 28 | const user = requireUser(context, request); | |
| 29 | const form = await request.formData(); | |
| 30 | const username = String(form.get("member") ?? ""); | |
| 31 | const result = | |
| 32 | form.get("action") === "remove" | |
| 33 | ? await identity.removeMember(user, params.owner, username) | |
| 34 | : await identity.addMember(user, params.owner, username); | |
| 35 | return result.ok ? null : { error: result.error.message }; | |
| 36 | } | |
| 37 | ||
| 38 | export default function WorkspacePeople({ loaderData, actionData }: Route.ComponentProps) { | |
| 39 | const { role, members } = loaderData; | |
| 40 | return ( | |
| 41 | <div className="max-w-2xl"> | |
| A catalogue of model providers, and settings that feel like settings | 42 | <ul className="divide-y divide-line rounded-xl border border-line"> |
| Agents as a team: lifecycle, merge queue, billing and a new shell | 43 | {members.map((member) => ( |
| 44 | <li key={member.username} className="flex items-center gap-3 px-4 py-3"> | |
| 45 | <Avatar name={member.username} size={28} /> | |
| 46 | <span className="grow font-mono text-sm">{member.username}</span> | |
| 47 | <Pill>{member.role}</Pill> | |
| 48 | {role === "owner" && member.role !== "owner" && ( | |
| 49 | <Form method="post"> | |
| 50 | <input type="hidden" name="action" value="remove" /> | |
| 51 | <input type="hidden" name="member" value={member.username} /> | |
| 52 | <Button variant="quiet" type="submit"> | |
| 53 | Remove | |
| 54 | </Button> | |
| 55 | </Form> | |
| 56 | )} | |
| 57 | </li> | |
| 58 | ))} | |
| 59 | </ul> | |
| 60 | {role === "owner" && ( | |
| 61 | <Form method="post" className="mt-6 flex items-end gap-3"> | |
| 62 | <div className="grow"> | |
| 63 | <Field label="Add a member" hint="Their g1t username. They join as a member."> | |
| 64 | <Input name="member" required maxLength={39} /> | |
| 65 | </Field> | |
| 66 | </div> | |
| 67 | <div className="pb-6"> | |
| 68 | <Button type="submit">Add</Button> | |
| 69 | </div> | |
| 70 | </Form> | |
| 71 | )} | |
| 72 | <ErrorText>{actionData?.error}</ErrorText> | |
| 73 | </div> | |
| 74 | ); | |
| 75 | } |