@volter/world-platform 2.0.2 → 2.0.4

package/client/platform.css

@@ -67,6 +67,9 @@ kbd { font: 11px/1 var(--mono); padding: 3px 5px; border: 1px solid var(--line-s
 /* cards */
 section.card { margin: 0 0 16px; padding: 18px 20px; }
 section.card h3 { margin: 0 0 6px; font-size: 15px; }
+.invite-list { list-style: none; margin: 8px 0 0; padding: 0; }
+.invite-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
+.invite-list li:first-child { border-top: 0; }
 section.card.flush { padding: 0; overflow: hidden; }
 .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
 .card-head h3 { margin: 0 0 2px; }
@@ -226,3 +229,9 @@ main.booting .side .skeleton, main.booting .content .skeleton { border: 0; backg
 .previews { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; vertical-align: middle; }
 .previews li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
 .worlds-table tr:has(+ .preview-row) td { border-bottom: 0; }
+
+/* who reaches a World: the member list in its access dialog, and the mark in the Worlds table */
+fieldset.member-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; min-width: 0; }
+fieldset.member-pick legend { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
+.name-line { display: inline-flex; align-items: center; gap: 8px; }
+.badge.restricted { font-size: 10px; }

package/client/platform.tsx

@@ -20,6 +20,11 @@ const ORIGIN = window.location.origin;
 const SUPPORT_KEY = 'volter.platform.support';
 const SUPPORT = ((): string => { const t = ROOT.dataset.token ?? ''; try { if (t) sessionStorage.setItem(SUPPORT_KEY, t); return t || (sessionStorage.getItem(SUPPORT_KEY) ?? ''); } catch { return t; } })();
 if (new URLSearchParams(window.location.search).has('support')) { try { window.history.replaceState(null, '', window.location.pathname); } catch { /* fine */ } }
+// the plan a person chose on the pricing page (`/?plan=team`): the tab keeps it through signing in and making an org,
+// and the org's Billing offers it once
+const PLAN_KEY = 'volter.platform.plan';
+{ const chosen = new URLSearchParams(window.location.search).get('plan'); if (chosen && /^[a-z0-9-]{1,32}$/.test(chosen)) { try { sessionStorage.setItem(PLAN_KEY, chosen); } catch { /* storage refused */ } try { const u = new URL(window.location.href); u.searchParams.delete('plan'); window.history.replaceState(null, '', `${u.pathname}${u.search}${u.hash}`); } catch { /* fine */ } } }
+const planIntent = (): string | null => { try { return sessionStorage.getItem(PLAN_KEY); } catch { return null; } };
 /** The catalog's vendors, most used first, as the shell was handed them (pages.ts): what a World can stand in for. */
 const CATALOG: Array<{ vendor: string; supported: boolean }> = (ROOT.dataset.vendors ?? '').split(',').filter(Boolean).map((v) => { const [vendor, s] = v.split(':'); return { vendor: vendor!, supported: s === 's' }; });
 
@@ -71,8 +76,10 @@ const linkTo = (to: Place) => (e: React.MouseEvent<HTMLAnchorElement>): void =>
 type PlatformInfo = { name: string; provider: { kind: 'volter' | 'oidc' | 'github'; name: string; account?: string }; billing: boolean; support: boolean; site?: string };
 type Person = { id: string; email?: string; name?: string; support?: { until: string; reason: string } };
 type OrgWorld = { name: string; host: string; base: string; provisionedAt: string };
+/** An invitation to your address still pending, where the provider keeps them (GET /-/orgs). */
+type Invitation = { id: string; org: { id: string; slug: string | null; name: string }; role: string; expiresAt: string | null };
 type OrgRow = { id: string; slug: string | null; name: string; role: string; held?: string | null; flags?: Record<string, boolean>; worlds?: OrgWorld[]; security?: { membersCanInvite: boolean } };
-type WorldRow = { org: string; world: string; name: string; base: string; origin?: string; twins: Array<{ vendor: string }> };
+type WorldRow = { org: string; world: string; name: string; base: string; origin?: string; twins: Array<{ vendor: string }>; /** kept to named members */ restricted?: boolean };
 const slugOf = (o: OrgRow): string => o.slug ?? o.id;
 const isAdmin = (o: OrgRow): boolean => o.role === 'admin' || o.role === 'org:admin';
 const NAME = /^[a-z0-9][a-z0-9-]{0,38}$/;
@@ -84,7 +91,7 @@ function App(): React.JSX.Element {
   const [version, setVersion] = useState(0);
   const bump = useCallback(() => setVersion((v) => v + 1), []);
   // who you are and your orgs: a 401 is signed out (the sign-in card), anything else refused is said with a retry
-  const [me, setMe] = useState<{ state: 'loading' } | { state: 'out' } | { state: 'error'; error: string } | { state: 'in'; person: Person; orgs: OrgRow[] }>({ state: 'loading' });
+  const [me, setMe] = useState<{ state: 'loading' } | { state: 'out' } | { state: 'error'; error: string } | { state: 'in'; person: Person; orgs: OrgRow[]; invitations: Invitation[] }>({ state: 'loading' });
   const loadMe = useCallback(async () => {
     const r = await door('/-/orgs').catch(() => null);
     if (!r) { setMe({ state: 'error', error: `${ORIGIN} did not answer` }); return; }
@@ -93,8 +100,8 @@ function App(): React.JSX.Element {
     if (r.status === 401 && SUPPORT) { let cleared = false; try { sessionStorage.removeItem(SUPPORT_KEY); cleared = sessionStorage.getItem(SUPPORT_KEY) === null; } catch { /* storage refused */ } if (cleared) { window.location.assign('/'); return; } setMe({ state: 'out' }); return; }
     if (r.status === 401) { setMe({ state: 'out' }); return; }
     if (!r.ok) { setMe({ state: 'error', error: r.status === 429 ? 'You are asking faster than the platform allows. Wait a moment and try again.' : await failure(r) }); return; }
-    const b = (await r.json()) as { person: Person; orgs: OrgRow[] };
-    setMe({ state: 'in', person: b.person, orgs: b.orgs });
+    const b = (await r.json()) as { person: Person; orgs: OrgRow[]; invitations?: Invitation[] };
+    setMe({ state: 'in', person: b.person, orgs: b.orgs, invitations: b.invitations ?? [] });
   }, []);
   useEffect(() => { void loadMe(); }, [loadMe, version]);
   const worlds = useDoor<{ worlds: WorldRow[] }>(me.state === 'in' ? '/-/worlds' : null, version);
@@ -114,10 +121,12 @@ function App(): React.JSX.Element {
   if (me.state === 'loading' || info.state === 'loading') return <Booting />;
   if (me.state === 'out') return <SignIn info={p} />;
   if (me.state === 'error') return <main className="boot"><Brand href="/" /><div role="alert" className="error-state"><span>{me.error}</span><button type="button" onClick={() => void loadMe()}>Try again</button></div><button type="button" onClick={() => void signOutNow()}>Sign in again</button></main>;
-  const { person, orgs } = me;
+  const { person, orgs, invitations } = me;
+  const joined = async (slug: string): Promise<void> => { await loadMe(); bump(); go({ kind: 'org', org: slug, page: 'worlds' }); };
   const current = at.kind === 'org' ? orgs.find((o) => o.slug === at.org || o.id === at.org) ?? null : null;
   // home is your first org, or making one; an org named by its id (a mail's link) is shown by its slug
-  if (at.kind === 'home') { const first = orgs[0]; go(first ? { kind: 'org', org: slugOf(first), page: 'worlds' } : { kind: 'you', page: 'new' }, true); return <Booting />; }
+  // (with a plan chosen on the pricing page, home is the Billing of the first org you administer)
+  if (at.kind === 'home') { const buying = Boolean(p?.billing && planIntent()); const first = buying ? orgs.find(isAdmin) : orgs[0]; go(first ? { kind: 'org', org: slugOf(first), page: buying ? 'billing' : 'worlds' } : { kind: 'you', page: 'new' }, true); return <Booting />; }
   if (at.kind === 'org' && current && at.org !== slugOf(current)) { go({ ...at, org: slugOf(current) }, true); return <Booting />; }
   // the org the sidebar shows: the one you are in, else your first
   const shown = current ?? (at.kind === 'you' ? orgs[0] ?? null : null);
@@ -165,6 +174,7 @@ function App(): React.JSX.Element {
           </nav>
         </aside>
         <div className="content">
+          {invitations.length && !(at.kind === 'you' && at.page === 'new') ? <Invitations list={invitations} onJoined={joined} /> : null}
           {at.kind === 'org' && !current ? <Empty title={`You are not a member of ${at.org}`} action={<Go to={{ kind: 'home' }} className="button">Your orgs</Go>}>An org shows here once one of its admins adds you, or you accept an invitation to it.</Empty> : null}
           {current?.held && at.kind === 'org' && at.page !== 'billing' ? <p role="alert">This org is held: {current.held}.</p> : null}
           {at.kind === 'org' && current && at.page === 'worlds' ? <WorldsPage org={current} rows={rows} load={worlds} orgs={orgs.map(slugOf)} allRows={worlds.state === 'ok' ? worlds.data.worlds.length : 0} version={version} readOnly={Boolean(person.support) || Boolean(current.held)} onChanged={bump} /> : null}
@@ -174,7 +184,7 @@ function App(): React.JSX.Element {
           {at.kind === 'org' && current && at.page === 'activity' ? (isAdmin(current) ? <ActivityPage org={slugOf(current)} version={version} /> : <Empty title="Activity is for admins">An org's activity log is its admins'.</Empty>) : null}
           {at.kind === 'you' && at.page === 'account' ? <AccountPage person={person} info={p} onSignOut={signOut} /> : null}
           {at.kind === 'you' && at.page === 'help' ? (p?.support ? <HelpPage orgs={orgs.map(slugOf)} onChanged={bump} /> : <Empty title="No Help form here">This platform has no Help form: ask whoever runs it.</Empty>) : null}
-          {at.kind === 'you' && at.page === 'new' ? <CreateOrg first={orgs.length === 0} site={p?.site} onMade={async (slug) => { await loadMe(); bump(); go({ kind: 'org', org: slug, page: 'worlds' }); }} /> : null}
+          {at.kind === 'you' && at.page === 'new' ? <CreateOrg first={orgs.length === 0} site={p?.site} invitations={invitations} onJoined={joined} onMade={async (slug) => { await loadMe(); bump(); go({ kind: 'org', org: slug, page: p?.billing && planIntent() ? 'billing' : 'worlds' }); }} /> : null}
         </div>
       </div>
       <Palette open={palette} onClose={() => setPalette(false)} orgs={orgs} shown={shown} worlds={worlds.state === 'ok' ? worlds.data.worlds : []} pages={pages} support={Boolean(p?.support)} />
@@ -244,10 +254,12 @@ function SignIn({ info }: { info: PlatformInfo | null }): React.JSX.Element {
   return (
     <div className="card" role="main">
       <div className="brand"><Brand href="/" /></div>
-      <h2>Sign in to Volter World</h2>
+      <h2>{signedOut ? 'Sign in to Volter World' : 'Sign in or create your account'}</h2>
       {signedOut ? <p role="status">You are signed out.</p> : <p>Your orgs, their Worlds and your teammates.</p>}
-      <a className="button primary wide" href={`/-/sign-in${next !== '/' && !signedOut ? `?next=${encodeURIComponent(next)}` : ''}`}>Continue with {provider}</a>
-      {info?.provider.kind === 'volter' ? <p className="small">New to Volter? You make your account on the way, with GitHub, Google or your email.</p> : null}
+      {/* Volter's account is where GitHub, Google and email are offered: the button names them, not the account a
+          newcomer has never heard of */}
+      <a className="button primary wide" href={`/-/sign-in${next !== '/' && !signedOut ? `?next=${encodeURIComponent(next)}` : ''}`}>{info?.provider.kind === 'volter' ? 'Continue with GitHub, Google or email' : `Continue with ${provider}`}</a>
+      {info?.provider.kind === 'volter' ? <p className="small">New here? Your account is made on the way, the one account for every Volter product.</p> : null}
       {info?.site ? <p className="links"><a href={`${info.site}/`}>Volter World</a><a href={`${info.site}/docs/`}>Docs</a><a href={`${info.site}/terms.html`}>Terms</a><a href={`${info.site}/privacy.html`}>Privacy</a></p> : null}
     </div>
   );
@@ -268,6 +280,7 @@ function Head({ title, count, children, lede }: { title: string; count?: number;
 function WorldsPage({ org, rows, load, orgs, allRows, version, readOnly, onChanged }: { org: OrgRow; rows: WorldRow[]; load: Load<unknown>; orgs: string[]; allRows: number; version: number; readOnly: boolean; onChanged: () => void }): React.JSX.Element {
   const slug = slugOf(org);
   const [making, setMaking] = useState(false); const [q, setQ] = useState(''); const [keyFor, setKeyFor] = useState<string | null>(null);
+  const [accessFor, setAccessFor] = useState<string | null>(null);
   // a read-only link: a read key (the platform's key door, 30 days) carried in the World's dashboard address
   const [link, setLink] = useState<{ world: string; url: string } | null>(null);
   const shareLink = async (w: WorldRow): Promise<void> => {
@@ -299,7 +312,7 @@ function WorldsPage({ org, rows, load, orgs, allRows, version, readOnly, onChang
             <thead><tr><th>World</th><th>Stand-ins for</th><th>Host</th><th>Created</th><th className="num"><span className="sr">Actions</span></th></tr></thead>
             <tbody>{shown.map((w) => { const rec = record.get(w.name); const short = w.name.split('/')[1] ?? w.name; return (<React.Fragment key={w.name}>
               <tr>
-                <td><span className="vendor-cell"><Initial of={short} small /><span className="who"><a href={`/-/worlds/${w.name}/open`}>{short}</a>{w.origin ? <span className="mode mono">{new URL(w.origin).host}</span> : null}</span></span></td>
+                <td><span className="vendor-cell"><Initial of={short} small /><span className="who"><span className="name-line"><a href={`/-/worlds/${w.name}/open`}>{short}</a>{w.restricted ? <span className="badge restricted" title="Only some members of the org reach it">Restricted</span> : null}</span>{w.origin ? <span className="mode mono">{new URL(w.origin).host}</span> : null}</span></span></td>
                 <td><span className="marks" title={w.twins.map((t) => vendorName(t.vendor)).join(', ')}>{w.twins.slice(0, 5).map((t) => <Mark key={t.vendor} vendor={t.vendor} />)}{w.twins.length > 5 ? <span className="mode">+{w.twins.length - 5}</span> : null}<span className="mode">{w.twins.length === 1 ? vendorName(w.twins[0]!.vendor) : `${w.twins.length} vendors`}</span></span></td>
                 <td className="mode">{rec?.host ?? '—'}</td>
                 <td className="mode">{rec ? <span title={when(rec.provisionedAt)}>{ago(rec.provisionedAt)}</span> : '—'}</td>
@@ -307,6 +320,7 @@ function WorldsPage({ org, rows, load, orgs, allRows, version, readOnly, onChang
                   <Menu label={`More for ${w.name}`} items={[
                     { label: 'Copy the command to use it', onSelect: () => { void navigator.clipboard?.writeText(`volter remote add origin ${w.name}`).then(() => toast('Copied: volter remote add origin …')); } },
                     !readOnly ? { label: 'Make a key…', onSelect: () => setKeyFor(w.name) } : null,
+                    isAdmin(org) && !readOnly ? { label: 'Manage access…', onSelect: () => setAccessFor(w.name) } : null,
                     !readOnly ? { label: 'Share a read-only link…', onSelect: () => void shareLink(w) } : null,
                     w.origin ? { label: 'Copy its address', onSelect: () => { void navigator.clipboard?.writeText(w.origin!).then(() => toast('Copied')); } } : null,
                     !readOnly ? { label: 'Delete World…', danger: true, onSelect: () => void remove(w.name) } : null,
@@ -320,6 +334,7 @@ function WorldsPage({ org, rows, load, orgs, allRows, version, readOnly, onChang
         </div>
       )}
       <WorldKey world={keyFor} onClose={() => setKeyFor(null)} />
+      <WorldAccess org={org} world={accessFor} onClose={() => setAccessFor(null)} onSaved={onChanged} />
       <Dialog open={Boolean(link)} onClose={() => setLink(null)} title={`A read-only link to ${link?.world ?? ''}`} footer={<button type="button" className="primary" onClick={() => setLink(null)}>Done</button>}>
         <p className="mode">Whoever opens it sees the World's pages and changes nothing, without an account, for 30 days. Copy it now: it is shown this once. The World lists it under Settings › Keys, where revoking it closes the link at once.</p>
         {link ? <CopyField label="Link" value={link.url} secret /> : null}
@@ -493,6 +508,8 @@ const money = (cents: number): string => (cents % 100 === 0 ? `$${cents / 100}`
 function BillingPage({ org, admin, version, flags }: { org: string; admin: boolean; version: number; flags: Record<string, boolean> }): React.JSX.Element {
   // back from Polar's checkout (`/<org>/billing?upgraded=1`): the first read is Polar's state now, not the cache
   const [fresh] = useState(() => new URLSearchParams(window.location.search).has('upgraded'));
+  // the plan chosen on the pricing page, offered here once
+  const [intent] = useState(() => { const i = planIntent(); try { sessionStorage.removeItem(PLAN_KEY); } catch { /* fine */ } return i; });
   useEffect(() => { if (fresh) { try { window.history.replaceState(null, '', window.location.pathname); } catch { /* fine */ } } }, [fresh]);
   const [again, setAgain] = useState(0);
   const load = useDoor<BillingInfo>(`/-/orgs/${org}/billing${fresh ? '?fresh=1' : ''}`, version + again);
@@ -516,6 +533,7 @@ function BillingPage({ org, admin, version, flags }: { org: string; admin: boole
       <Head title="Billing" lede={<>For {org}. Payment, invoices and receipts are handled by Polar{admin ? '' : '; an admin changes the plan'}.</>} />
       {info.restriction ? <div role="alert" className={`notice ${info.restriction.status === 'restricted' ? 'danger' : 'warn'}`}><strong>{info.restriction.status === 'restricted' ? 'Restricted' : 'Over the plan'}.</strong> {restrictionCopy(info)}</div> : null}
       {info.paid ? <div role="status" className="notice ok"><strong>Payment received.</strong> Your org is on {info.plan.name}.</div> : null}
+      {(() => { const chosen = intent && admin && info.plan.id === 'free' && !info.pendingCheckout ? info.plans.find((c) => c.id === intent && c.priceMonthly > 0) : undefined; return chosen ? <div role="status" className="notice info"><strong>You chose {chosen.name}.</strong> {chosen.trialDays && !sub ? `Its ${chosen.trialDays}-day trial starts at Polar's checkout, which asks for a card and charges it when the trial ends.` : "Polar's checkout takes the payment."} <button type="button" className="primary" disabled={leaving} onClick={() => void leaveFor(`/-/orgs/${org}/checkout`)}>{leaving ? 'Opening Polar…' : chosen.trialDays && !sub ? `Start the ${chosen.trialDays}-day trial` : `Upgrade to ${chosen.name}`}</button></div> : null; })()}
       {info.pendingCheckout ? <div role="status" className="notice info">Your checkout at Polar is still open. <a href={info.pendingCheckout.url}>Continue to checkout</a></div> : null}
       <div className="billing-grid">
         <section className="card plan-card" aria-labelledby="plan-now">
@@ -716,6 +734,48 @@ function MakeToken({ open, kind, base, onClose, onMade }: { open: boolean; kind:
 }
 
 /** A key for one World, for an app or a job: made here (a browser session on the World makes none), shown once. */
+/** Who reaches a World (architecture, "A World may be kept to some of its org"): the whole org, or only the members
+ *  ticked here. Admins always reach it; the members it leaves out lose the keys they hold there when it is saved. */
+function WorldAccess({ org, world, onClose, onSaved }: { org: OrgRow; world: string | null; onClose: () => void; onSaved: () => void }): React.JSX.Element {
+  const slug = slugOf(org); const short = world?.split('/')[1] ?? '';
+  const [members, setMembers] = useState<MemberRow[] | null>(null); const [only, setOnly] = useState(false); const [picked, setPicked] = useState<Set<string>>(new Set());
+  const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    if (!world) return; setMembers(null); setError(null);
+    void Promise.all([door(`/-/worlds/${world}/access`).then((r) => r.json()), door(`/-/orgs/${slug}/members`).then((r) => r.json())]).then(([a, m]) => {
+      const access = a as { restricted?: boolean; members?: string[]; error?: string }; const list = (m as { members?: MemberRow[] }).members ?? [];
+      if (access.error) { setError(access.error); return; }
+      setOnly(Boolean(access.restricted)); setPicked(new Set(access.members ?? [])); setMembers(list);
+    }).catch(() => setError(`${ORIGIN} did not answer`));
+  }, [world, slug]);
+  const others = (members ?? []).filter((m) => !m.role.endsWith('admin'));
+  const leftOut = only ? others.filter((m) => !picked.has(m.userId)).length : 0;
+  const save = async (e: React.FormEvent): Promise<void> => {
+    e.preventDefault(); if (!world) return; setBusy(true);
+    const done = await act<{ revokedFor: number }>(`/-/worlds/${world}/access`, { method: 'PUT', body: JSON.stringify({ restricted: only, members: only ? [...picked] : [] }) }, only ? `${short} is kept to the members picked` : `Everyone in ${org.name} reaches ${short}`);
+    setBusy(false); if (done) { onSaved(); onClose(); }
+  };
+  return (
+    <Dialog open={world !== null} onClose={() => { if (!busy) onClose(); }} title={`Who reaches ${world ?? ''}`} footer={<><button type="button" onClick={onClose} disabled={busy}>Cancel</button><button type="submit" form="world-access" disabled={busy || members === null}>{busy ? 'Saving…' : 'Save'}</button></>}>
+      <form id="world-access" onSubmit={save} className="stack" aria-label="Who reaches the World">
+        {error ? <p role="alert">{error}</p> : members === null ? <p className="mode">Loading the members…</p> : <>
+          <fieldset className="choice"><legend>Access</legend>
+            <label className={!only ? 'choice-card on' : 'choice-card'}><input type="radio" name="worldAccess" checked={!only} onChange={() => setOnly(false)} /><span><strong>Everyone in {org.name}</strong><span className="mode">Every member, and everyone who joins later.</span></span></label>
+            <label className={only ? 'choice-card on' : 'choice-card'}><input type="radio" name="worldAccess" checked={only} onChange={() => setOnly(true)} /><span><strong>Only these members</strong><span className="mode">Admins always reach it.</span></span></label>
+          </fieldset>
+          {only ? <fieldset className="member-pick"><legend>Members</legend>
+            {others.length === 0 ? <p className="mode">Every member of {org.name} is an admin, so everyone reaches it.</p> : others.map((m) => (
+              <label key={m.userId} className="check"><input type="checkbox" checked={picked.has(m.userId)} onChange={(e) => { const next = new Set(picked); if (e.target.checked) next.add(m.userId); else next.delete(m.userId); setPicked(next); }} /> <span>{m.name ?? m.email ?? m.userId}{m.name && m.email ? <span className="mode"> {m.email}</span> : null}</span></label>
+            ))}
+            {(members ?? []).filter((m) => m.role.endsWith('admin')).map((m) => <label key={m.userId} className="check"><input type="checkbox" checked disabled /> <span>{m.name ?? m.email ?? m.userId} <span className="mode">admin</span></span></label>)}
+          </fieldset> : null}
+          {leftOut > 0 ? <p className="mode">{leftOut === 1 ? 'The member left out loses' : `The ${leftOut} members left out lose`} the keys they hold in {short} when you save.</p> : null}
+        </>}
+      </form>
+    </Dialog>
+  );
+}
+
 function WorldKey({ world, onClose }: { world: string | null; onClose: () => void }): React.JSX.Element {
   const [name, setName] = useState(''); const [scope, setScope] = useState<'write' | 'read'>('write'); const [expiry, setExpiry] = useState('90'); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null); const [made, setMade] = useState<{ key: string; base: string } | null>(null);
   useEffect(() => { if (world) { setName(''); setScope('write'); setExpiry('90'); setError(null); setMade(null); } }, [world]);
@@ -889,8 +949,8 @@ function ActivityPage({ org, version }: { org: string; version: number }): React
 }
 /** An audit event as a sentence, the way the peers' logs read ("Created a World"); an event not named here is spelled out. */
 const SAID: Record<string, string> = {
-  ORG_CREATE: 'Created the org', ORG_RENAME: 'Renamed the org', ORG_DELETE: 'Deleted the org', MEMBER_INVITE: 'Invited or added a member', INVITE_REVOKE: 'Revoked an invitation', MEMBER_REMOVE: 'Removed a member', MEMBER_ROLE: 'Changed a role',
-  WORLD_PROVISION: 'Created a World', WORLD_DELETE: 'Deleted a World', WORLD_OPEN: 'Opened a World', PREVIEW_CREATE: 'Made a preview', PREVIEW_DELETE: 'Removed a preview', WORLD_CLAIM: 'Claimed a World into the org', TOKEN_CREATE: 'Made a token', TOKEN_REVOKE: 'Revoked a token', ORG_TOKEN_CREATE: 'Made an org token', ORG_TOKEN_REVOKE: 'Revoked an org token',
+  ORG_CREATE: 'Created the org', ORG_RENAME: 'Renamed the org', ORG_DELETE: 'Deleted the org', MEMBER_INVITE: 'Invited or added a member', MEMBER_JOIN: 'Joined by invitation', INVITE_REVOKE: 'Revoked an invitation', MEMBER_REMOVE: 'Removed a member', MEMBER_ROLE: 'Changed a role',
+  WORLD_PROVISION: 'Created a World', WORLD_DELETE: 'Deleted a World', WORLD_ACCESS_SET: 'Changed who reaches a World', WORLD_OPEN: 'Opened a World', PREVIEW_CREATE: 'Made a preview', PREVIEW_DELETE: 'Removed a preview', WORLD_CLAIM: 'Claimed a World into the org', TOKEN_CREATE: 'Made a token', TOKEN_REVOKE: 'Revoked a token', ORG_TOKEN_CREATE: 'Made an org token', ORG_TOKEN_REVOKE: 'Revoked an org token',
   SECURITY_CHANGE: 'Changed security settings', SUPPORT_REQUEST: 'Wrote to support', SUPPORT_ACCESS_GRANTED: 'Allowed support access', SUPPORT_ACCESS_REVOKED: 'Revoked support access', IMPERSONATION: 'Support opened the org',
   WEBHOOK_CREATE: 'Added a webhook endpoint', WEBHOOK_CHANGE: 'Changed a webhook endpoint', WEBHOOK_DELETE: 'Removed a webhook endpoint', WEBHOOK_DISABLED: 'A webhook endpoint was disabled', SPEND_CAP_CHANGE: 'Changed the spend cap', LABS_CHANGE: 'Changed Labs',
   REMINDER_SENT: 'Sent a billing reminder', PLAN_CHECKOUT: 'Opened a checkout', PLAN_CHANGE: 'The plan changed', QUOTA_WARNED: 'Went over the plan', QUOTA_RESTRICTED: 'The org was held', QUOTA_CLEARED: 'Back within the plan',
@@ -914,7 +974,26 @@ function AccountPage({ person, info, onSignOut }: { person: Person; info: Platfo
 }
 
 /** A new org: its address, and the site's terms accepted where the platform has a site. The first is where a new person starts. */
-function CreateOrg({ first, site, onMade }: { first: boolean; site?: string | undefined; onMade: (slug: string) => Promise<void> }): React.JSX.Element {
+/** The invitations to your address still pending: each org's name, the role, and Join (POST /-/invitations/{id}/join). */
+function Invitations({ list, onJoined }: { list: Invitation[]; onJoined: (slug: string) => Promise<void> }): React.JSX.Element {
+  const [busy, setBusy] = useState<string | null>(null);
+  const join = async (inv: Invitation): Promise<void> => {
+    setBusy(inv.id);
+    const b = await act<{ joined?: string }>(`/-/invitations/${encodeURIComponent(inv.id)}/join`, { method: 'POST' });
+    setBusy(null);
+    if (b?.joined) { toast(`Joined ${inv.org.name}`); await onJoined(b.joined); }
+  };
+  return (
+    <section className="card" aria-labelledby="invited">
+      <h3 id="invited">{list.length === 1 ? 'You are invited' : 'You are invited to these orgs'}</h3>
+      <ul className="invite-list">
+        {list.map((inv) => <li key={inv.id}><span className="vendor-cell"><Initial of={inv.org.name} small /><span><strong>{inv.org.name}</strong> <span className="mode">as {inv.role === 'org:admin' ? 'an admin' : 'a member'}</span></span></span><button type="button" className="primary" disabled={busy !== null} onClick={() => void join(inv)}>{busy === inv.id ? 'Joining…' : `Join ${inv.org.name}`}</button></li>)}
+      </ul>
+    </section>
+  );
+}
+
+function CreateOrg({ first, site, invitations, onJoined, onMade }: { first: boolean; site?: string | undefined; invitations: Invitation[]; onJoined: (slug: string) => Promise<void>; onMade: (slug: string) => Promise<void> }): React.JSX.Element {
   const [name, setName] = useState(''); const [accepted, setAccepted] = useState(false); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
   const issue = !name ? null : !NAME.test(name) ? 'Lowercase letters, digits and dashes, starting with a letter or digit.' : (RESERVED_ORG_NAMES as readonly string[]).includes(name) ? `${name} is one of this platform's own pages: choose another.` : null;
   const create = async (e: React.FormEvent): Promise<void> => {
@@ -926,11 +1005,12 @@ function CreateOrg({ first, site, onMade }: { first: boolean; site?: string | un
   };
   return (
     <div className="narrow">
-      <Head title={first ? 'Welcome to Volter World' : 'Create an org'} lede={first ? 'An org holds your Worlds and your teammates. Make one to start; you can invite people and make more orgs later.' : 'An org holds Worlds and the people who work on them.'} />
+      <Head title={first ? 'Welcome to Volter World' : 'Create an org'} lede={first && invitations.length ? 'Your team is waiting: join the org you were invited to, or make one of your own.' : first ? 'An org holds your Worlds and your teammates. Make one to start; you can invite people and make more orgs later.' : 'An org holds Worlds and the people who work on them.'} />
+      {invitations.length ? <Invitations list={invitations} onJoined={onJoined} /> : null}
       <section className="card" aria-labelledby="create-org">
-        <h3 id="create-org" className="sr">Create an org</h3>
+        <h3 id="create-org" className={invitations.length ? undefined : 'sr'}>{invitations.length ? 'Or make your own org' : 'Create an org'}</h3>
         <form onSubmit={create} className="stack">
-          <label>Org name <input autoFocus name="orgName" value={name} onChange={(e) => setName(e.target.value.toLowerCase())} placeholder="acme" aria-invalid={Boolean(issue)} aria-describedby="org-name-help" autoComplete="off" spellCheck={false} required /></label>
+          <label>Org name <input autoFocus={!invitations.length} name="orgName" value={name} onChange={(e) => setName(e.target.value.toLowerCase())} placeholder="acme" aria-invalid={Boolean(issue)} aria-describedby="org-name-help" autoComplete="off" spellCheck={false} required /></label>
           <p id="org-name-help" className={issue ? 'field-error' : 'mode'}>{issue ?? <>Its address: <code>{ORIGIN}/{name || 'acme'}</code>, and <code>{name || 'acme'}/&lt;world&gt;</code> for its Worlds. You can change the name people see later, not the address.</>}</p>
           {site ? <label className="check"><input name="accepted" type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} required /> <span>I agree to the <a href={`${site}/terms.html`} target="_blank" rel="noreferrer">terms of service</a> and the <a href={`${site}/privacy.html`} target="_blank" rel="noreferrer">privacy policy</a></span></label> : null}
           {error ? <p role="alert">{error}</p> : null}
@@ -986,7 +1066,7 @@ function GettingStarted({ orgs, worlds, firstWorld, version }: { orgs: string[];
   // the way in is the app's folder (docs/contributing/architecture.md): the command makes the World from the vendors
   // the app uses; Create World above is the way for a person without a terminal
   const steps: Array<[boolean, React.ReactNode]> = [
-    [orgs.length > 0, 'Create an org'],
+    [orgs.length > 0, 'Create or join an org'],
     [tokensMade === true, <>Install the command and sign it in: <code>npm install -g @volter/world</code>, then <code>volter login {ORIGIN}</code></>],
     [worlds > 0, <>In your app's folder, make its World here: <code>volter world init</code>, then <code>volter remote add origin {firstWorld ?? `${org ?? '<org>'}/<world>`}{firstWorld ? '' : ' --create'}</code></>],
     [false, <>Send it what your app did: <code>volter world changeset -m "…"</code>, then <code>volter world push</code></>],