app/routes/people.tsx

Functions

Imports

It imports app/lib/context.ts, app/lib/people-admin.server.ts. No module of this repo imports it.

Source

1// The people page (Owner only): who is in Carrel, their role on each project, and adding, sharing and
2// disabling. Every change goes through app/lib/people-admin.server.ts, which checks the Owner.
3//
4// Carrel decides what a person may do once they are in; Cloudflare Access decides whether they get
5// in at all. So after an add the page says where the same email must also be allowed. The dashboard
6// paths are from Cloudflare's docs as read on 2026-09-27: developers.cloudflare.com/workers/
7// configuration/cloudflare-access/ (the Worker's Access tab offers only "Cloudflare account" and
8// "Email domain"; anything more is edited in Zero Trust), .../cloudflare-one/access-controls/policies/
9// policy-management/ (Zero Trust > Access controls > Policies), and .../cloudflare-one/integrations/
10// identity-providers/one-time-pin/ (Zero Trust > Integrations > Identity providers).
11
12import { useEffect, useRef } from "react";
13import { Form, useFetcher, useNavigation } from "react-router";
14import { Alert, Banner } from "capsomer/react/banner";
15import { Button } from "capsomer/react/button";
16import { Check, Field } from "capsomer/react/field";
17import { useMessage } from "capsomer/react/message";
18import { Panel } from "capsomer/react/panel";
19import { Select } from "capsomer/react/select";
20import { Pill } from "capsomer/react/status";
21import { PageHead } from "capsomer/react/page-head";
22
23import { getEnv, getViewer } from "~/lib/context";
24import { addAgent, addPerson, listPeople, PeopleRefusal, setDisabled, setProjectRole } from "~/lib/people-admin.server";
25
26import type { Route } from "./+types/people";
27
28export function meta() {
29  return [{ title: "People · Carrel" }];
30}
31
32export async function loader({ context }: Route.LoaderArgs) {
33  return listPeople(getEnv(context).DB, getViewer(context));
34}
35
36type ActionResult = { ok: true; intent: string; added?: string; agent?: string } | { ok: false; intent: string; message: string };
37
38export async function action({ request, context }: Route.ActionArgs): Promise<ActionResult> {
39  const db = getEnv(context).DB;
40  const viewer = getViewer(context);
41  const form = await request.formData();
42  const intent = String(form.get("intent") ?? "");
43  const personId = Number(form.get("person"));
44  try {
45    switch (intent) {
46      case "add": {
47        const added = await addPerson(db, viewer, {
48          email: String(form.get("email") ?? ""),
49          name: String(form.get("name") ?? ""),
50          reviewer: form.get("reviewer") === "yes",
51        });
52        return { ok: true, intent, added: added.email };
53      }
54      case "add-agent": {
55        const added = await addAgent(db, viewer, { name: String(form.get("agent") ?? ""), label: String(form.get("label") ?? "") });
56        return { ok: true, intent, agent: added.email };
57      }
58      case "role": {
59        const role = String(form.get("role") ?? "");
60        await setProjectRole(db, viewer, personId, Number(form.get("project")), role === "reader" || role === "editor" ? role : null);
61        return { ok: true, intent };
62      }
63      case "disable":
64      case "enable":
65        await setDisabled(db, viewer, personId, intent === "disable");
66        return { ok: true, intent };
67      default:
68        throw new Response("Bad request", { status: 400 });
69    }
70  } catch (error) {
71    if (error instanceof PeopleRefusal) return { ok: false, intent, message: error.message };
72    throw error;
73  }
74}
75
76type Person = Route.ComponentProps["loaderData"]["people"][number];
77
78/**
79 * Disable and Enable are one control that stays mounted across the reload that follows, so it can say
80 * the result. Disabling is reversible on the server (Enable), so it happens at once and offers Undo.
81 */
82function AccessButton({ person }: { person: Person }) {
83  const fetcher = useFetcher<ActionResult>();
84  const { say } = useMessage();
85  const said = useRef<unknown>(null);
86  const name = person.name || person.email;
87  const disabled = Boolean(person.disabledAt);
88  useEffect(() => {
89    const data = fetcher.data;
90    if (fetcher.state !== "idle" || !data?.ok || data.intent !== "disable" || said.current === data) return;
91    said.current = data;
92    say(`${name} is disabled. They are refused at both doors on their next request.`, {
93      undo: () => fetcher.submit({ intent: "enable", person: String(person.id) }, { method: "post" }),
94      undone: `${name} is enabled again.`,
95    });
96  }, [fetcher, name, person.id, say]);
97  return (
98    <fetcher.Form method="post">
99      <input type="hidden" name="person" value={person.id} />
100      <Button type="submit" name="intent" value={disabled ? "enable" : "disable"} size="sm" pending={fetcher.state !== "idle"}>
101        {disabled ? "Enable" : "Disable"}
102        <span className="cap-sr-only"> {name}</span>
103      </Button>
104    </fetcher.Form>
105  );
106}
107
108export default function People({ loaderData, actionData }: Route.ComponentProps) {
109  const { people, projects } = loaderData;
110  const busy = useNavigation().state !== "idle";
111
112  return (
113    <div className="app-page">
114      <PageHead title="People" lead="Who is in Carrel, and what each person may do on each project. Only the Owner sees this page." />
115
116      {actionData && !actionData.ok ? <Alert tone="crit" title="Nothing changed">{actionData.message}</Alert> : null}
117
118      {actionData?.ok && actionData.agent ? (
119        <Alert tone="warn" title={`Added ${actionData.agent}. It has no key and no role yet.`}>
120          <div className="app-steps">
121            <p>
122              An agent reaches the AI door with a key, a Worker secret named <code>AGENT_KEY_</code> and the agent's name in capitals. Carrel never shows or stores the key.
123              The key says which agent is knocking and grants nothing: what the agent may do is the role you set for it below, and it can never publish.
124            </p>
125            <ol>
126              <li>Set the Worker secret from a file, in the carrel folder: <code>Get-Content &lt;key file&gt; -Raw | npx wrangler secret put AGENT_KEY_{actionData.agent.slice("agent:".length).toUpperCase()}</code>.</li>
127              <li>Set the agent's role on each project it may use, below. Editor lets it save AI drafts, and it flags and previews as a Reader does.</li>
128            </ol>
129          </div>
130        </Alert>
131      ) : actionData?.ok && actionData.added ? (
132        <Alert tone="warn" title={`Added ${actionData.added}. They cannot sign in yet.`}>
133          <div className="app-steps">
134            <p>
135              Carrel decides what a person may do once they are in. Cloudflare Access decides whether they get in at all, and Carrel does not manage it. Allow the same email in
136              both places:
137            </p>
138            <ol>
139              <li>
140                <strong>Carrel's pages</strong> (carrel.dustinedwards.info). In Workers &amp; Pages &gt; carrel &gt; Access, the policy today allows only{" "}
141                <em>Cloudflare account</em> members, and that tab offers only <em>Cloudflare account</em> and <em>Email domain</em>. For one person who is not an account
142                member, add an Include rule with the <em>Emails</em> selector and their address: in Zero Trust &gt; Access controls &gt; Policies (a reusable policy added to
143                the Worker's application), or on the Worker's application itself in Zero Trust &gt; Access controls &gt; Applications.
144              </li>
145              <li>
146                <strong>The AI door</strong> (carrel-mcp.dustinedwards.info), only if they will use Carrel from Claude: in Zero Trust &gt; Access controls &gt; Policies,
147                configure the policy <em>Carrel people</em> (used by the Access for SaaS application <em>Carrel AI Door</em>) and add the address to its Emails rule.
148              </li>
149            </ol>
150            <p>
151              <strong>Signing in without a Cloudflare account:</strong> Access emails a login code only if <em>One-time PIN</em> is set up, in Zero Trust &gt; Integrations
152              &gt; Identity providers &gt; Add new identity provider &gt; One-time PIN. Without it, a person with no Cloudflare account has no way to sign in.
153            </p>
154            <p>Then share a project with them below. A person with no role on a project sees nothing of it.</p>
155          </div>
156        </Alert>
157      ) : actionData?.ok && actionData.intent === "role" ? (
158        <Banner tone="ok">Saved.</Banner>
159      ) : null}
160
161      <Panel title="Access" count={people.length} src="A disabled person is refused at both doors on their next request, whatever Access says. Their roles are kept." flush>
162        <div className="cap-table-wrap" role="region" aria-labelledby="people-caption" tabIndex={0}>
163          <table className="cap-table">
164            <caption id="people-caption" className="cap-sr-only">
165              People and their role on each project
166            </caption>
167            <thead>
168              <tr>
169                <th scope="col">Person</th>
170                <th scope="col">Kind</th>
171                {projects.map((p) => (
172                  <th key={p.id} scope="col">
173                    {p.name}
174                  </th>
175                ))}
176                <th scope="col">
177                  <span className="cap-sr-only">Enable or disable</span>
178                </th>
179              </tr>
180            </thead>
181            <tbody>
182              {people.map((person) => {
183                const kind = person.isOwner ? "Owner" : person.email.startsWith("agent:") ? "Agent (AI)" : person.isReviewer ? "Reviewer (AI)" : "Person";
184                return (
185                  <tr key={person.id}>
186                    <th scope="row">
187                      {person.name || person.email}
188                      <span className="cap-table-aside">{person.email}</span>
189                      {person.disabledAt ? <Pill variant="secondary">Disabled {person.disabledAt.slice(0, 10)}</Pill> : null}
190                    </th>
191                    <td>
192                      <Pill variant="outline">{kind}</Pill>
193                    </td>
194                    {projects.map((project) => {
195                      const role = person.roles.find((r) => r.projectId === project.id)?.role ?? "";
196                      if (person.isOwner) return <td key={project.id}>Owner</td>;
197                      const id = `role-${person.id}-${project.id}`;
198                      return (
199                        <td key={project.id}>
200                          <Form method="post" className="app-inline">
201                            <input type="hidden" name="intent" value="role" />
202                            <input type="hidden" name="person" value={person.id} />
203                            <input type="hidden" name="project" value={project.id} />
204                            <label className="cap-sr-only" htmlFor={id}>
205                              {person.email} on {project.name}
206                            </label>
207                            <Select
208                              id={id}
209                              name="role"
210                              size="sm"
211                              defaultValue={role}
212                              options={[
213                                { value: "", label: "No access" },
214                                { value: "reader", label: "Reader" },
215                                // Reviewers read and flag only: Editor is not offered, and the server refuses it anyway.
216                                ...(person.isReviewer ? [] : [{ value: "editor", label: "Editor" }]),
217                              ]}
218                            />
219                            <Button type="submit" size="sm" pending={busy}>
220                              Set<span className="cap-sr-only"> role for {person.email} on {project.name}</span>
221                            </Button>
222                          </Form>
223                        </td>
224                      );
225                    })}
226                    <td>
227                      {person.isOwner ? null : <AccessButton person={person} />}
228                    </td>
229                  </tr>
230                );
231              })}
232            </tbody>
233          </table>
234        </div>
235      </Panel>
236
237      <Panel title="Add a person">
238        <Form method="post" className="app-form">
239          <div className="app-fields">
240            <Field label="Email" required>
241              <input className="cap-input" type="email" name="email" required autoComplete="off" />
242            </Field>
243            <Field label="Name">
244              <input className="cap-input" type="text" name="name" autoComplete="off" />
245            </Field>
246          </div>
247          <fieldset className="cap-field">
248            <legend className="cap-field-label">Kind</legend>
249            <div className="cap-field-options">
250              <Check type="radio" name="reviewer" value="no" defaultChecked label="A person, who reads, and edits where you share a project as Editor" />
251              <Check type="radio" name="reviewer" value="yes" label="A reviewer (another company's AI agent), who reads and flags only, through the AI door" />
252            </div>
253          </fieldset>
254          <div className="app-actions">
255            <Button type="submit" name="intent" value="add" variant="primary" pending={busy}>
256              Add
257            </Button>
258          </div>
259        </Form>
260      </Panel>
261
262      <Panel title="Add an AI agent" src="For an agent that cannot sign in with OAuth. It reaches the AI door with its own key, never as you.">
263        <Form method="post" className="app-form">
264          <div className="app-fields">
265            <Field label="Agent name" required help="Lower case, such as grok. Its key is the Worker secret AGENT_KEY_ and this name in capitals.">
266              <input className="cap-input" type="text" name="agent" required autoComplete="off" pattern="[A-Za-z0-9][A-Za-z0-9_-]{0,31}" />
267            </Field>
268            <Field label="Label">
269              <input className="cap-input" type="text" name="label" autoComplete="off" />
270            </Field>
271          </div>
272          <div className="app-actions">
273            <Button type="submit" name="intent" value="add-agent" variant="primary" pending={busy}>
274              Add agent
275            </Button>
276          </div>
277        </Form>
278      </Panel>
279    </div>
280  );
281}