@volter/world-console 3.0.6 → 3.0.7

package/dist/client/console.tsx

@@ -1752,25 +1752,30 @@ function Thumb({ url, title }: { url: string; title: string }): React.JSX.Elemen
  *  was the moment before the first of them beside how it is now. "Before" is a read-only copy of the World as of then (a
  *  branch the World makes for an hour, removed when this closes), its site read at the copy's own address. */
 function Compare({ name, token, frame, onClose, reads }: { name: string; token: string; frame: BoardFrame; onClose: () => void; /** the board's reads so far: its changes are read again with each */ reads: number }): React.JSX.Element {
-  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at: string } | { state: 'none'; why: string }>({ state: 'opening' });
+  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at: string; /** a vendor's page: opened as a page of its own, never framed */ opens?: boolean } | { state: 'none'; why: string }>({ state: 'opening' });
   // its changes, read for this comparison alone
   const listed = useDoor<{ total: number; acts: BoardAct[] }>(token, `/-/${name}/board/changes?frame=${encodeURIComponent(frameKey(frame))}`, reads);
   useEffect(() => {
     if (!frame.since) { setBefore({ state: 'none', why: 'Nothing here has changed since the World was last cut.' }); return; }
-    if (!frame.at || !('site' in frame.at)) { setBefore({ state: 'none', why: `A ${vendorName(frame.vendor)} page as it was needs a signed-in copy of the World; its changes are listed below.` }); return; }
+    if (!frame.at) { setBefore({ state: 'none', why: `${vendorName(frame.vendor)}'s twin draws no page for this ${frame.kind} yet; its changes are listed below.` }); return; }
+    const shown = frame.at;
     const at = new Date(Date.parse(frame.since) - 1).toISOString();
     let made: string | null = null; let closed = false;
     // a copy is made once the comparison has stayed open a moment: one passed through on the way to another makes none
     const wait = setTimeout(() => void (async () => {
       const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify({ at: { instant: at }, ttl: 3600 }), signal: AbortSignal.timeout(60000) }).catch(() => null);
       if (!r?.ok) { setBefore({ state: 'none', why: `The World made no copy of itself as it was then${r ? `: ${await failure(r)}` : ''}.` }); return; }
-      const b = (await r.json()) as { name: string; origin?: string };
+      const b = (await r.json()) as { name: string; origin?: string; readToken?: string };
       made = b.name;
       if (closed) { void door(token, `/-/${name}/branches/${b.name}`, { method: 'DELETE' }).catch(() => null); return; }
       const o = httpOrigin(b.origin);
       if (!o) { setBefore({ state: 'none', why: 'This World shows sites only at its own local address.' }); return; }
-      const u = new URL(frame.url);
-      setBefore({ state: 'ok', url: `${o.protocol}//${u.hostname}.${o.host}${u.pathname}${u.search}`, at });
+      // a site at the copy's own address, framed; a vendor's page in the copy is behind the copy's session, which opens
+      // only on the copy's own pages (another site's frame is refused it), so it opens as a page of its own: the copy's
+      // hand-off page (served-world, `session/hand-off`) opens the session from the read token, then goes to the page
+      if ('site' in shown) { const u = new URL(frame.url); setBefore({ state: 'ok', url: `${o.protocol}//${u.hostname}.${o.host}${u.pathname}${u.search}`, at }); return; }
+      if (!b.readToken) { setBefore({ state: 'none', why: 'The copy of the World gave no read token to open its pages with.' }); return; }
+      setBefore({ state: 'ok', url: `${o.origin}/-/${b.name}/session/hand-off#${new URLSearchParams({ token: b.readToken, land: `/${b.name}/${frame.vendor}${shown.screen}` }).toString()}`, at, opens: true });
     })(), 500);
     return () => { closed = true; clearTimeout(wait); if (made) void door(token, `/-/${name}/branches/${made}`, { method: 'DELETE' }).catch(() => null); };
   }, [name, token, frame.vendor, frame.id, frame.since]);
@@ -1785,7 +1790,9 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
       <div className="compare-sides">
         <figure>
           <figcaption>Before{before.state === 'ok' ? ` · as of ${when(before.at)}` : ''}</figcaption>
-          {before.state === 'ok' ? <Thumb url={before.url} title={`${frame.title} before`} /> : before.state === 'opening' ? <p className="mode compare-note" role="status">Opening the World as it was…</p> : <p className="mode compare-note">{before.why}</p>}
+          {before.state === 'ok' ? (before.opens
+            ? <p className="mode compare-note"><a href={before.url} target="_blank" rel="noopener noreferrer">Open {frame.title} as it was →</a><br />A read-only copy of the World, kept while this comparison is open.</p>
+            : <Thumb url={before.url} title={`${frame.title} before`} />) : before.state === 'opening' ? <p className="mode compare-note" role="status">Opening the World as it was…</p> : <p className="mode compare-note">{before.why}</p>}
         </figure>
         <figure>
           <figcaption>Now</figcaption>