@volter/world-console 3.0.10 → 3.0.12

package/dist/client/console.css

@@ -645,6 +645,9 @@ main.app.home { max-width: none; }
 .float.compare-panel { max-height: calc(100vh - 32px); overflow-y: auto; padding: 0; }
 .compare { display: grid; gap: 12px; padding: 12px 14px; width: 900px; max-width: calc(100vw - 320px); }
 .compare-head { display: flex; align-items: center; gap: 8px; }
+.compare-base { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
+.compare-base select { font: inherit; max-width: 22ch; }
+.compare-acts-head { margin: 12px 0 0; font-size: 12px; }
 .compare-head .mode { flex: 1; }
 .compare-sides { display: flex; gap: 16px; flex-wrap: wrap; }
 .compare-sides figure { margin: 0; display: grid; gap: 6px; }

package/dist/client/console.tsx

@@ -1707,7 +1707,8 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
       {/* its name always, as a canvas app labels its frames; what can be done to it once it is selected */}
       <NodeToolbar isVisible position={Position.Top} align="start" className="frame-label">
         <Mark vendor={frame.vendor} /><span>{frame.title}</span>
-        {frame.changes ? <button type="button" className="frame-changed nodrag" onClick={() => compare(key)} title={`${counted(frame.changes, 'change')} here, not in a changeset: compare before and now`}><Icon name="square-dot" size={14} />{frame.changes}</button> : null}
+        {frame.changes ? <button type="button" className="frame-changed nodrag" onClick={() => compare(key)} title={`${counted(frame.changes, 'change')} here, not in a changeset: compare before and now`}><Icon name="square-dot" size={14} />{frame.changes}</button>
+          : picked ? <button type="button" className="ghost nodrag" onClick={() => compare(key)} title="Compare with a branch of this World" aria-label={`Compare ${frame.title} with a branch`}><Icon name="file-diff" size={14} /></button> : null}
         {picked && others.length ? <select className="nodrag frame-add" value="" aria-label={`Add ${frame.title} to a board`} onChange={(e) => { if (e.target.value) addTo(e.target.value, key); }}><option value="">Add to board…</option>{others.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}</select> : null}
         {picked && remove ? <button type="button" className="ghost nodrag" onClick={() => remove.act(key)} title={remove.label} aria-label={remove.label}>✕</button> : null}
       </NodeToolbar>
@@ -1752,55 +1753,86 @@ 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' });
+  // what "before" is: the World as it was the moment before this frame's first change not yet cut (a copy made for the
+  // comparison), or any branch of the World chosen here (a pull request's preview, a named branch), as a compare view
+  // sets one branch beside another
+  const [base, setBase] = useState<string>(frame.since ? 'before' : '');
+  const [before, setBefore] = useState<{ state: 'opening' } | { state: 'ok'; url: string; at?: string } | { state: 'none'; why: string }>({ state: 'opening' });
+  const [made, setMade] = useState<string | null>(null);
+  // the copies this panel made, kept out of the choices after they are gone (the list is read again only every so often)
+  const mine = useRef(new Set<string>());
+  const branches = useDoor<{ branches: Array<{ name: string; origin?: string; at: { instant?: string; label?: string; live?: boolean } | null; expiresAt: string | null }> }>(token, `/-/${name}/branches`, reads);
+  const choices = branches.state === 'ok' ? branches.data.branches.filter((b) => b.name !== made && !mine.current.has(b.name)) : [];
   // its changes, read for this comparison alone
   const listed = useDoor<{ total: number; acts: BoardAct[] }>(token, `/-/${name}/board/changes?frame=${encodeURIComponent(frameKey(frame))}`, reads);
+  // a branch's page beside this World's: a site at the branch's own site address, a vendor's page on the branch's own
+  // content plane through this World's branch door (a one-time read pass), never running on this World's origin
+  const pageOf = async (branch: string, origin: URL | null, isClosed: () => boolean): Promise<{ url: string } | { why: string }> => {
+    const shown = frame.at!;
+    if ('site' in shown) {
+      if (!origin) return { why: 'This World shows sites only at its own local address.' };
+      const u = new URL(frame.url); return { url: `${origin.protocol}//${u.hostname}.${origin.host}${u.pathname}${u.search}` };
+    }
+    const beside = `${WORLDS}/-/${name}/branches/${branch}/pages?${new URLSearchParams({ land: `/${branch}/${frame.vendor}${shown.screen}` }).toString()}`;
+    // the door answers a navigation with the branch's address; a host that shows no content plane says so instead
+    const asked = await fetch(beside, { credentials: 'same-origin', redirect: 'manual' }).catch(() => null);
+    if (isClosed()) return { why: '' };
+    return asked?.type === 'opaqueredirect' ? { url: beside } : { why: `This World does not show its branches' pages${asked ? `: ${await failure(asked)}` : ''}.` };
+  };
   useEffect(() => {
-    if (!frame.since) { setBefore({ state: 'none', why: 'Nothing here has changed since the World was last cut.' }); 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;
+    if (base === '') { setBefore({ state: 'none', why: 'Choose a branch of this World to set beside it.' }); return; }
+    let closed = false;
+    if (base !== 'before') {
+      setBefore({ state: 'opening' });
+      const row = branches.state === 'ok' ? branches.data.branches.find((b) => b.name === base) : undefined;
+      // a moment's wait, so passing over a branch on the way to another opens nothing
+      const wait = setTimeout(() => void pageOf(base, httpOrigin(row?.origin), () => closed).then((r) => { if (!closed) setBefore('url' in r ? { state: 'ok', url: r.url } : { state: 'none', why: r.why }); }), 300);
+      return () => { closed = true; clearTimeout(wait); };
+    }
+    if (!frame.since) { setBefore({ state: 'none', why: 'Nothing here has changed since the World was last cut.' }); return; }
+    setBefore({ state: 'opening' });
     const at = new Date(Date.parse(frame.since) - 1).toISOString();
-    let made: string | null = null; let closed = false;
+    let copy: string | null = null;
     // 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; readToken?: string };
-      made = b.name;
+      const b = (await r.json()) as { name: string; origin?: string };
+      copy = b.name; setMade(b.name); mine.current.add(b.name);
       if (closed) { void door(token, `/-/${name}/branches/${b.name}`, { method: 'DELETE' }).catch(() => null); return; }
-      // a site at the copy's own address; a vendor's page on the copy's own content plane, opened through this World's
-      // branch door (a one-time read pass): framed beside this World's page, never running on this World's origin
-      if ('site' in shown) {
-        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 }); return;
-      }
-      const beside = `${WORLDS}/-/${name}/branches/${b.name}/pages?${new URLSearchParams({ land: `/${b.name}/${frame.vendor}${shown.screen}` }).toString()}`;
-      // the door answers a navigation with the copy's address; a host that shows no content plane says so instead
-      const asked = await fetch(beside, { credentials: 'same-origin', redirect: 'manual' }).catch(() => null);
-      if (closed) return;
-      if (asked?.type !== 'opaqueredirect') { setBefore({ state: 'none', why: `This World does not show its copy's pages${asked ? `: ${await failure(asked)}` : ''}.` }); return; }
-      setBefore({ state: 'ok', url: beside, at });
+      const page = await pageOf(b.name, httpOrigin(b.origin), () => closed);
+      if (!closed) setBefore('url' in page ? { state: 'ok', url: page.url, at } : { state: 'none', why: page.why });
     })(), 500);
     // the copy goes with the comparison, and with the page: a reload or a closed tab runs no cleanup of its own
-    const drop = (): void => { if (made) void door(token, `/-/${name}/branches/${made}`, { method: 'DELETE', keepalive: true }).catch(() => null); made = null; };
+    const drop = (): void => { if (copy) void door(token, `/-/${name}/branches/${copy}`, { method: 'DELETE', keepalive: true }).catch(() => null); copy = null; };
     // a page kept for back and forward keeps its copy: it may be shown again
     const left = (e: PageTransitionEvent): void => { if (!e.persisted) drop(); };
     window.addEventListener('pagehide', left);
-    return () => { closed = true; clearTimeout(wait); window.removeEventListener('pagehide', left); drop(); };
-  }, [name, token, frame.vendor, frame.id, frame.since]);
+    return () => { closed = true; clearTimeout(wait); window.removeEventListener('pagehide', left); drop(); setMade(null); };
+  }, [name, token, frame.vendor, frame.id, frame.since, base]);
   const now = frameUrl(name, frame);
+  // nothing to choose: said, rather than an empty list
+  const noBranches = !frame.at || base !== '' ? null : branches.state === 'ok' && choices.length === 0 ? 'This World has no branches to set beside it: make one under Branches.' : branches.state === 'error' ? `The World's branches could not be read: ${branches.error}` : null;
   return (
     <div className="compare" role="dialog" aria-label={`Changes to ${frame.title}`}>
       <div className="compare-head">
         <Mark vendor={frame.vendor} /><strong>{frame.title}</strong>
-        <span className="mode">{counted(frame.changes, 'change')} not yet cut{frame.since ? `, since ${when(frame.since)}` : ''}</span>
+        <span className="mode">{frame.changes ? `${counted(frame.changes, 'change')} not yet cut${frame.since ? `, since ${when(frame.since)}` : ''}` : 'No changes here not yet cut'}</span>
+        {frame.at ? <label className="compare-base">Compare with{' '}
+          <select value={base} onChange={(e) => setBase(e.target.value)}>
+            {base === '' ? <option value="">Choose a branch…</option> : null}
+            {frame.since || base === 'before' ? <option value="before">Before these changes</option> : null}
+            {base && base !== 'before' && !choices.some((b) => b.name === base) ? <option value={base}>{base.split('/')[1]}</option> : null}
+            {choices.map((b) => <option key={b.name} value={b.name}>{b.name.split('/')[1]}{b.at?.label ? ` (${b.at.label})` : b.at?.instant ? ` (as of ${when(b.at.instant)})` : b.at?.live ? ' (live)' : ''}</option>)}
+          </select>
+        </label> : null}
         <button type="button" className="ghost" onClick={onClose} aria-label="Close the comparison">✕</button>
       </div>
       <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>}
+          <figcaption>{base === 'before' ? `Before${before.state === 'ok' && before.at ? ` · as of ${when(before.at)}` : ''}` : base ? base.split('/')[1] : 'A branch'}</figcaption>
+          {noBranches ? <p className="mode compare-note">{noBranches}</p> : 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>}
         </figure>
         <figure>
           <figcaption>Now</figcaption>
@@ -1808,6 +1840,7 @@ function Compare({ name, token, frame, onClose, reads }: { name: string; token:
         </figure>
       </div>
       {listed.state === 'error' ? <p role="alert" className="mode">Its changes could not be read: {listed.error}</p> : null}
+      {base !== 'before' && base && listed.state === 'ok' && listed.data.acts.length ? <p className="mode compare-acts-head">This World's own changes here, not yet cut:</p> : null}
       <ol className="compare-acts">
         {(listed.state === 'ok' ? listed.data.acts : []).map((a) => {
           const first = a.entries[0]!; const words = said({ ...first, service: frame.vendor, id: '', occurredAt: a.at } as unknown as Entry);