npm - @volter/world-platform - Versions diffs - 2.0.40 → 3.0.1 - Mend

@volter/world-platform 2.0.40 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/client/platform.css +2 -0
package/client/platform.tsx +27 -10
package/dist/client/platform.bundle.js +47 -47
package/dist/client/platform.css +2 -0
package/dist/client/platform.tsx +27 -10
package/dist/src/db/pack-migrations.js +1 -1
package/dist/src/doors.js +1 -1
package/dist/src/mail.js +1 -1
package/dist/src/pages.js +1 -1
package/dist/src/platform.js +10 -2
package/package.json +6 -8
package/src/db/open.ts +1 -1
package/src/db/pack-migrations.ts +1 -1
package/src/doors.ts +1 -1
package/src/mail.ts +1 -1
package/src/pages.ts +1 -1
package/src/platform.ts +10 -2

package/client/platform.css CHANGED Viewed

@@ -20,6 +20,8 @@ a.button.primary { background: var(--accent); border-color: var(--accent); color
 /* the sign-in card: the brand, one way in */
 body.portal #root { width: min(440px, 100%); }
 body.portal .card { width: 100%; }
+/* the platform's own server pages (pages.ts pageShell: the CLI's approval, a refusal) are the same narrow card */
+body.portal > main.card { width: min(480px, 100%); }
 body.portal .card .brand h1 { font-size: 15px; margin: 0; }
 body.portal .card .brand h1 a { color: var(--ink); text-decoration: none; }
 main.boot { max-width: 520px; display: grid; gap: 14px; padding-top: 18vh; }

package/client/platform.tsx CHANGED Viewed

@@ -79,7 +79,7 @@ type OrgWorld = { name: string; host: string; base: string; provisionedAt: strin
 /** 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 }>; /** kept to named members */ restricted?: boolean };
+type WorldRow = { org: string; world: string; name: string; base: string; origin?: string; twins: Array<{ vendor: string }>; /** kept to named members */ restricted?: boolean; /** its landed changesets, when the World answered */ landed?: number };
 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}$/;
@@ -226,7 +226,8 @@ function Palette({ open, onClose, orgs, shown, worlds, pages, support }: { open:
   const items: Item[] = useMemo(() => {
     const all: Item[] = [];
     if (shown) for (const [k, label] of pages) all.push({ label, hint: shown.name, run: () => go({ kind: 'org', org: slugOf(shown), page: k }) });
-    for (const w of worlds) all.push({ label: `Open ${w.name}`, hint: 'World', run: () => { window.location.assign(`/-/worlds/${w.name}/open`); } });
+    // a World opens at an origin of its own, where its host serves its dashboard; one without has nothing to open
+    for (const w of worlds) if (w.origin) all.push({ label: `Open ${w.name}`, hint: 'World', run: () => { window.location.assign(`/-/worlds/${w.name}/open`); } });
     for (const o of orgs) if (o.id !== shown?.id) all.push({ label: `Switch to ${o.name}`, hint: 'org', run: () => go({ kind: 'org', org: slugOf(o), page: 'worlds' }) });
     all.push({ label: 'Account and tokens', hint: 'you', run: () => go({ kind: 'you', page: 'account' }) });
     if (support) all.push({ label: 'Help', hint: 'you', run: () => go({ kind: 'you', page: 'help' }) });
@@ -303,7 +304,7 @@ function WorldsPage({ org, rows, load, orgs, allRows, version, readOnly, onChang
   return (
     <>
       <Head title="Worlds" count={load.state === 'ok' ? rows.length : undefined}>{rows.length > 0 ? <input type="search" className="toolbar-search" aria-label="Find a World" placeholder="Find a World…" value={q} onChange={(e) => setQ(e.target.value)} /> : null}{make}</Head>
-      <GettingStarted orgs={orgs} worlds={allRows - rows.filter((r) => r.name.split('/')[1] === 'sample').length} firstWorld={rows.find((r) => r.name.split('/')[1] !== 'sample')?.name} version={version} />
+      <GettingStarted orgs={orgs} worlds={allRows - rows.filter((r) => r.name.split('/')[1] === 'sample').length} firstWorld={rows.find((r) => r.name.split('/')[1] !== 'sample')?.name} pushed={rows.some((r) => r.name.split('/')[1] !== 'sample' && (r.landed ?? 0) > 0)} version={version} refresh={onChanged} />
       {load.state !== 'ok' ? <Pending load={load} what="the org's Worlds" retry={onChanged} /> : rows.length === 0 ? (
         <Empty title="No Worlds yet" action={<div className="actions-row">{make}{!readOnly ? <button type="button" onClick={() => void trySample()} disabled={sampling}>{sampling ? 'Making the sample…' : 'Try a sample World'}</button> : null}</div>}>A World stands in for the services your app uses: your app talks to it as it would to Stripe or GitHub, nothing real happens, and you see everything it did on each vendor's own screens.{!readOnly ? <span className="mode sample-note">The sample is a small shop's Stripe and Slack, seeded as its app would leave them. It counts as one of the org's Worlds; delete it when you are done.</span> : null}</Empty>
       ) : (
@@ -312,11 +313,11 @@ 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"><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="vendor-cell"><Initial of={short} small /><span className="who"><span className="name-line">{w.origin ? <a href={`/-/worlds/${w.name}/open`}>{short}</a> : short}{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>
-                <td className="num row-actions"><a className="button primary" href={`/-/worlds/${w.name}/open`} aria-label={`Open ${w.name}`}>Open</a>
+                <td className="num row-actions">{w.origin ? <a className="button primary" href={`/-/worlds/${w.name}/open`} aria-label={`Open ${w.name}`}>Open</a> : <span className="mode" title="Its host serves no dashboard: the command and your app reach it at its address">No dashboard</span>}
                   <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,
@@ -1055,23 +1056,39 @@ function HelpPage({ orgs, onChanged }: { orgs: string[]; onChanged?: () => void
 }
 /** The first run: what a person does next, with the real commands, as a checklist with its progress; dismissed for good. */
-function GettingStarted({ orgs, worlds, firstWorld, version }: { orgs: string[]; worlds: number; firstWorld?: string | undefined; version: number }): React.JSX.Element | null {
+function GettingStarted({ orgs, worlds, firstWorld, pushed, version, refresh }: { orgs: string[]; worlds: number; firstWorld?: string | undefined; pushed: boolean; version: number; refresh: () => void }): React.JSX.Element | null {
   const KEY = 'volter.console.onboarding';
   const [dismissed, setDismissed] = useState<boolean>(() => { try { return localStorage.getItem(KEY) === 'done'; } catch { return false; } });
   const [tokensMade, setTokensMade] = useState<boolean | null>(null);
   const mounted = useRef(true); useEffect(() => () => { mounted.current = false; }, []);
   useEffect(() => { void door('/-/tokens').then(async (r) => { if (mounted.current) setTokensMade(r.ok ? ((await r.json()) as { tokens: unknown[] }).tokens.length > 0 : false); }).catch(() => undefined); }, [version]);
-  if (dismissed) return null;
   const org = orgs[0];
   // 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 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></>],
+    [tokensMade === true, <React.Fragment key="command">Install the command and sign it in: <code>npm install -g @volter/world</code>, then <code>volter login {ORIGIN}</code></React.Fragment>],
+    [worlds > 0, <React.Fragment key="world">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></React.Fragment>],
+    [pushed, <React.Fragment key="push">Send it what your app did: <code>volter world changeset -m "…"</code>, then <code>volter world push</code></React.Fragment>],
   ];
   const done = steps.filter(([d]) => d).length;
+  // unfinished, the list re-reads what it ticks from while its tab is in view: its last steps happen in a terminal, and
+  // a World made or a push landed there ticks here without a reload
+  const again = useRef(refresh); again.current = refresh;
+  useEffect(() => {
+    if (dismissed || done === steps.length) return;
+    const every = setInterval(() => { if (document.visibilityState === 'visible') again.current(); }, 5000);
+    return () => clearInterval(every);
+  }, [dismissed, done, steps.length]);
+  if (dismissed) return null;
+  const dismiss = (): void => { try { localStorage.setItem(KEY, 'done'); } catch { /* no storage */ } setDismissed(true); };
+  // all four done: what comes next, in a line, and the card goes when you say
+  if (done === steps.length) return (
+    <section aria-labelledby="getting-started" className="onboarding">
+      <div className="onboarding-head"><h3 id="getting-started">You are set up</h3><span className="mode">{done} of {steps.length}</span><div className="progress" aria-hidden="true"><span style={{ width: '100%' }} /></div><button type="button" onClick={dismiss}>Done</button></div>
+      <p className="mode onboarding-alt">Your app's changes land in {firstWorld ?? 'its World'}. Next: {org ? <Go to={{ kind: 'org', org, page: 'members' }}>invite your team</Go> : 'invite your team'}, who open it as themselves, and give each pull request a preview World with the GitHub Action.</p>
+    </section>
+  );
   return (
     <section aria-labelledby="getting-started" className="onboarding">
       <div className="onboarding-head"><h3 id="getting-started">Get started</h3><span className="mode">{done} of {steps.length}</span><div className="progress" aria-hidden="true"><span style={{ width: `${(done / steps.length) * 100}%` }} /></div><button type="button" className="icon-button" aria-label="Dismiss getting started" onClick={() => { try { localStorage.setItem(KEY, 'done'); } catch { /* no storage */ } setDismissed(true); }}>✕</button></div>