@volter/world-console 2.0.6 → 2.0.8

package/client/console.tsx

@@ -427,6 +427,9 @@ type Placed = { twin: string; position: number; entry: Entry };
 type Timeline = { entries: Placed[]; next: string | null };
 type Diff = { base: { id: string; at: string | null }; changes: Array<{ twin: string; entry: Entry }> };
 type Branch = { name: string; at?: { instant?: string }; createdAt: string; expiresAt: string | null };
+/** The branches door: the host's snapshots of this World, and the World's own named branches (`volter world branch`),
+ *  one of which, `checkedOut`, is the one this serve holds. */
+type BranchesDoor = { branches: Branch[]; checkedOut?: string; named?: Array<{ name: string; running: boolean }> };
 /** What the World's session answered: its scope; `unknown` when the host has no session door (a write then says). */
 type Scope = 'pending' | 'read' | 'write' | 'unknown';
 
@@ -502,7 +505,7 @@ function WorldView({ name, token, twin, tab, arg, admin, snapshot, onReturn, ope
   const [clockVersion, setClockVersion] = useState(0);
   const clock = useDoor<Clock>(token, `/-/${name}/clock`, tick + clockVersion);
   const twins = useDoor<{ twins: Twin[] }>(token, `/-/${name}/twins`);
-  const branches = useDoor<{ branches: Branch[] }>(token, `/-/${name}/branches`, clockVersion);
+  const branches = useDoor<BranchesDoor>(token, `/-/${name}/branches`, clockVersion);
   const map = useDoor<WorldMap>(token, `/-/${name}/map`, Math.floor(tick / 2));
   // branches are the host's: a host that does not answer the door has no "as of", and the console shows none
   const hasBranches = !(branches.state === 'error' && (branches.status === 404 || branches.status === 405));
@@ -613,13 +616,13 @@ function Connect({ name }: { name: string }): React.JSX.Element {
 
 /** The branch picker, between the World's pages and the branch's (where Neon's sits): this World live, or one of the
  *  host's branches of it; a snapshot names its parent as the way back. */
-function BranchPicker({ name, snapshot, branches, opens }: { name: string; snapshot: Snapshot | null; branches: Load<{ branches: Branch[] }> | null; opens: (name: string) => boolean }): React.JSX.Element {
+function BranchPicker({ name, snapshot, branches, opens }: { name: string; snapshot: Snapshot | null; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean }): React.JSX.Element {
   const short = (n: string): string => n.split('/').pop() ?? n;
   const live = snapshot?.parent ?? name;
   const others = branches?.state === 'ok' ? branches.data.branches.filter((b) => b.name !== name) : [];
   return (
     <details className="menu branch-picker">
-      <summary><svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg><span className="branch-name">{snapshot ? short(name) : short(live)}</span><span className="badge">{snapshot ? 'snapshot' : 'live'}</span></summary>
+      <summary><svg className="branch-glyph" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path fill="currentColor" d="M5 3.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm0 2.122a2.25 2.25 0 1 0-1.5 0v5.256a2.25 2.25 0 1 0 1.5 0V9.5h4.25A2.25 2.25 0 0 0 11.5 7.25v-.878a2.25 2.25 0 1 0-1.5 0v.878a.75.75 0 0 1-.75.75H5V5.372ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm6.5-9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" /></svg><span className="branch-name">{snapshot ? short(name) : (branches?.state === 'ok' && branches.data.checkedOut) || short(live)}</span><span className="badge">{snapshot ? 'snapshot' : 'live'}</span></summary>
       <div className="popover">
         <p className="mode">Branch</p>
         <ul className="branch-list">
@@ -631,7 +634,17 @@ function BranchPicker({ name, snapshot, branches, opens }: { name: string; snaps
               : <span className="mode" title="Its token was handed to whoever made it">{short(b.name)}</span>}</li>
           ))}
         </ul>
-        {branches?.state === 'ok' && others.length === 0 && !snapshot ? <p className="mode">No branches yet. “View an earlier moment…” opens one.</p> : null}
+        {branches?.state === 'ok' && (branches.data.named?.length ?? 0) > 1 ? (
+          <>
+            <p className="mode">This World's branches</p>
+            <ul className="branch-list">
+              {branches.data.named!.map((b) => (
+                <li key={b.name}><span aria-current={b.name === branches.data.checkedOut ? 'true' : undefined}>{b.name} <span className="mode">{b.name === branches.data.checkedOut ? 'served here' : <code>volter world checkout {b.name}</code>}</span></span></li>
+              ))}
+            </ul>
+          </>
+        ) : null}
+        {branches?.state === 'ok' && others.length === 0 && !snapshot && (branches.data.named?.length ?? 0) <= 1 ? <p className="mode">No branches yet. “View an earlier moment…” opens one.</p> : null}
       </div>
     </details>
   );
@@ -700,7 +713,7 @@ function BranchOverview({ name, token, map, vendors, tick }: { name: string; tok
  *  Neon with how to connect and the branches. A World's live preview is its vendors' own screens; beside them, how an
  *  app connects and the branches; under them, what just happened. Counts sit with what they count, not in a row. */
 const THUMB_SCALE = 0.2;
-function WorldOverview({ name, token, map, vendors, twins, session, branches, canWrite, tick, snapshotOf }: { name: string; token: string; map: Load<WorldMap>; vendors: string[]; twins: Load<{ twins: Twin[] }>; session: MirrorSession; branches: Load<{ branches: Branch[] }> | null; canWrite: boolean; tick: number; /** the World this one is a snapshot of, when it is one */ snapshotOf?: string }): React.JSX.Element {
+function WorldOverview({ name, token, map, vendors, twins, session, branches, canWrite, tick, snapshotOf }: { name: string; token: string; map: Load<WorldMap>; vendors: string[]; twins: Load<{ twins: Twin[] }>; session: MirrorSession; branches: Load<BranchesDoor> | null; canWrite: boolean; tick: number; /** the World this one is a snapshot of, when it is one */ snapshotOf?: string }): React.JSX.Element {
   const diff = useDoor<Diff>(token, `/-/${name}/diff`, Math.floor(tick / 2));
   const recent = useDoor<Timeline>(token, `/-/${name}/timeline?limit=8`, tick);
   const rows = map.state === 'ok' ? map.data.twins : [];
@@ -867,7 +880,7 @@ function AsOf({ name, token, clock, refused }: { name: string; token: string; cl
 }
 
 /** Overview: what the World holds, one card per twin (a resource explorer), and the branches cut from it. */
-function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<{ branches: Branch[] }> | null; opens: (name: string) => boolean; onBranchesChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
+function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<BranchesDoor> | null; opens: (name: string) => boolean; onBranchesChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
   const map = useDoor<WorldMap>(token, `/-/${name}/map`);
   const [note, setNote] = useState<string | null>(null);
   const remove = async (b: string): Promise<void> => {
@@ -918,11 +931,20 @@ function Overview({ name, token, canWrite, branches, opens, onBranchesChanged, r
 /** A World's branches, as a database's are (Neon's Branches page): each a copy of it as of a moment, made here (as of now
  *  or a moment you pick, for as long as you say), opened read-only in this tab, compared with its parent (what it changed
  *  since it branched), reset to its parent as it is now, or removed. Each is the World's own branches door. */
-function BranchList({ name, token, canWrite, branches, opens, note, remove, onChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<{ branches: Branch[] }>; opens: (name: string) => boolean; note: string | null; remove: (b: string) => Promise<void>; onChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
+function BranchList({ name, token, canWrite, branches, opens, note, remove, onChanged, refused }: { name: string; token: string; canWrite: boolean; branches: Load<BranchesDoor>; opens: (name: string) => boolean; note: string | null; remove: (b: string) => Promise<void>; onChanged: () => void; refused: (r: Response) => void }): React.JSX.Element {
   const short = (n: string): string => n.split('/').pop() ?? n;
   const list = branches.state === 'ok' ? branches.data.branches : [];
   const [making, setMaking] = useState(false); const [busy, setBusy] = useState(false); const [error, setError] = useState<string | null>(null);
   const [label, setLabel] = useState(''); const [when, setWhen] = useState<'now' | 'at'>('now'); const [at, setAt] = useState(''); const [hours, setHours] = useState('24');
+  // SERVE ANOTHER of the World's own branches here: the World switches under this page, which then reads it afresh
+  const [serving, setServing] = useState<string | null>(null); const [serveError, setServeError] = useState<string | null>(null);
+  const serveHere = async (branch: string): Promise<void> => {
+    setServing(branch); setServeError(null);
+    const r = await door(token, `/-/${name}/branches/${encodeURIComponent(branch)}/serve`, { method: 'POST' }).catch(() => null);
+    if (r?.ok) { location.reload(); return; }
+    setServing(null);
+    setServeError(r ? ((await r.json().catch(() => null)) as { error?: string } | null)?.error ?? `${r.status}` : `${ORIGIN} did not answer`);
+  };
   // made here: kept with its tokens so it opens in this tab; not `made` (a snapshot's "Return to live" never removes it: it lives as long as it was given)
   const make = async (body: Record<string, unknown>, opened: string): Promise<{ name: string } | string> => {
     const r = await door(token, `/-/${name}/branches`, { method: 'POST', body: JSON.stringify(body) }).catch(() => null);
@@ -973,7 +995,7 @@ function BranchList({ name, token, canWrite, branches, opens, note, remove, onCh
           <table className="dense" aria-label="Branches">
             <thead><tr><th id="branches">Branch</th><th>Parent</th><th>As of</th><th>Made</th><th>Goes away</th><th /></tr></thead>
             <tbody>
-              <tr><td><b>{short(name)}</b> <span className="badge">default</span></td><td className="mode">—</td><td className="mode">live</td><td className="mode">—</td><td className="mode">kept</td><td /></tr>
+              <tr><td><b>{branches.data.checkedOut ?? short(name)}</b> <span className="badge">{branches.data.checkedOut ? 'served here' : 'default'}</span></td><td className="mode">—</td><td className="mode">live</td><td className="mode">—</td><td className="mode">kept</td><td /></tr>
               {list.map((b) => {
                 const items = menu(b);
                 return (
@@ -992,8 +1014,28 @@ function BranchList({ name, token, canWrite, branches, opens, note, remove, onCh
               })}
             </tbody>
           </table>
-          {list.length === 0 ? <p className="mode pad">No branches yet.</p> : null}
+          {list.length === 0 ? <p className="mode pad">No snapshots yet.</p> : null}
+        </div>
+      ) : null}
+      {branches.state === 'ok' && (branches.data.named?.length ?? 0) > 0 ? (
+        <>
+        <p className="lede">This World's own branches (<code>volter world branch</code>). One runs at a time; “Serve here” stops this one's twins and serves that one in its place.</p>
+        {serveError ? <p role="alert">{serveError}</p> : null}
+        <div className="block">
+          <table className="dense" aria-label="World branches">
+            <thead><tr><th>Branch</th><th>State</th><th /></tr></thead>
+            <tbody>
+              {branches.data.named!.map((b) => (
+                <tr key={b.name}>
+                  <td><b>{b.name}</b>{b.name === branches.data.checkedOut ? <> <span className="badge">served here</span></> : null}</td>
+                  <td className="mode">{b.running ? 'running' : 'stopped'}</td>
+                  <td className="num row-actions">{canWrite && b.name !== branches.data.checkedOut ? <button type="button" disabled={serving !== null} onClick={() => void serveHere(b.name)}>{serving === b.name ? 'Switching…' : 'Serve here'}</button> : null}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
+        </>
       ) : null}
       <Dialog open={making} onClose={() => { if (!busy) setMaking(false); }} title={`New branch of ${short(name)}`} footer={<><button type="button" onClick={() => setMaking(false)} disabled={busy}>Cancel</button><button type="submit" form="new-branch" className="primary" disabled={busy}>{busy ? 'Making…' : 'Make branch'}</button></>}>
         <form id="new-branch" onSubmit={(e) => void create(e)} className="stack">