Ask a registry which store to install

The client had our store's config URL compiled into it, which meant a second store
— or anybody else's site — needed a release of this app. It now asks
`GET /api/stores` and installs what the site offers: one record and there is
nothing to decide, several and the setup screen shows a picker.

From a record the client works the rest out. `storeRepositoryUrl` gives the
`config.json` to read, and that file stays the authority on how the store behaves;
`catalogUrl` and `name` override its `store.base_url` and `store.name`, because the
registry is what says which catalog a store is *for*. The store id — which names
the store home and the folder games land in — comes from the repository name, so
`ttg-desktop-store` becomes `ttg`.

A repository with no `config.json` still installs: the engine merges whatever it
is handed onto its own defaults, so the client writes a three-field config and the
store behaves like the default one pointed at that catalog. That was worth having
rather than an error, and it is tested.

The registry address is now the single thing about a particular site left in the
client, and `STORES_API` overrides it — which is how this was tested, against a
local endpoint serving the same payload the site returns, with one store that has a
config and one that has not. Both installed; the engine listed all ten titles with
the synthesised config.

`npm run uitest` now passes on either outcome — the grid when a store is present,
the setup gate with a populated picker when there is none — and it reports both, so
the gate cannot silently regress into an empty screen. Run with the registry
unreachable it produces the retry gate, and fails, which is the honest verdict: a
client that cannot reach the registry cannot set anything up.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

renderer/app.js

@@ -203,18 +203,34 @@ async function runRemove (name) {
 
 // --- gate: no python, or no store yet -------------------------------------
 
-function showGate (title, body, action, link) {
+function showGate (title, body, action, link, choices) {
   el('grid').hidden = true
   el('empty').hidden = true
   const gate = el('gate')
   gate.hidden = false
   text(el('gate-title'), title)
   text(el('gate-body'), body)
+
+  // Only shown when the registry offers more than one store; with a single one
+  // there is nothing to decide.
+  const choice = el('gate-choice')
+  const select = el('gate-select')
+  choice.hidden = !choices || choices.length < 2
+  if (!choice.hidden) {
+    text(el('gate-choice-label'), T.setupChoose)
+    select.replaceChildren(...choices.map((store, index) => {
+      const option = document.createElement('option')
+      option.value = String(index)
+      option.textContent = store.name
+      return option
+    }))
+  }
+
   const button = el('gate-action')
   button.hidden = !action
   if (action) {
     text(button, action.label)
-    button.onclick = action.onClick
+    button.onclick = () => action.onClick(choices ? choices[Number(select.value) || 0] : undefined)
   }
   const anchor = el('gate-link')
   anchor.hidden = !link
@@ -263,10 +279,10 @@ async function boot () {
     return
   }
 
-  const setUpStore = async () => {
+  const setUpStore = async (chosen) => {
     showProgress(T.setupWorking)
     try {
-      await api.bootstrap()
+      await api.bootstrap(chosen)
       hideGate()
       await refresh()
     } catch (err) {
@@ -274,16 +290,35 @@ async function boot () {
     }
   }
 
+  // Which stores exist is the site's answer, not this client's: the registry is
+  // asked for it, and its records carry the catalog and the config repository.
+  const offerStores = async () => {
+    const result = await api.registry()
+    if (result.error) {
+      showGate(`${T.registryFailed}`, `${result.url}\n\n${result.error}`,
+        { label: T.registryRetry, onClick: offerStores })
+      return
+    }
+    if (!result.stores.length) {
+      showGate(T.setupTitle, `${T.registryEmpty}\n\n${result.url}`, null)
+      return
+    }
+    showGate(T.setupTitle,
+      `${T.setupBody}\n\n${state.storeRoot}`,
+      { label: T.setupAction, onClick: async (chosen) => { await setUpStore(chosen); await runSync([]) } },
+      null,
+      result.stores)
+  }
+
   if (!state.store) {
-    showGate(T.setupTitle, `${T.setupBody}\n\n${state.defaultHome}`,
-      { label: T.setupAction, onClick: async () => { await setUpStore(); await runSync([]) } })
+    await offerStores()
     return
   }
 
   if (state.engine && !state.engine.ok) {
     showGate(T.oldEngineTitle,
       `${T.oldEngineBody}\n\n${state.engine.text} → ${state.minEngine}`,
-      { label: T.oldEngineAction, onClick: setUpStore })
+      { label: T.oldEngineAction, onClick: offerStores })
     return
   }
 

renderer/index.html

@@ -29,6 +29,10 @@
     <h1 id="gate-title"></h1>
     <p id="gate-body"></p>
     <div class="gate-actions">
+      <label id="gate-choice" class="gate-choice" hidden>
+        <span id="gate-choice-label"></span>
+        <select id="gate-select" class="select"></select>
+      </label>
       <button id="gate-action" class="btn btn-primary" hidden></button>
       <a id="gate-link" class="link" href="#" hidden></a>
     </div>

renderer/style.css

@@ -87,7 +87,8 @@ body {
 }
 .gate h1 { font-size: 20px; margin: 0 0 10px; }
 .gate p { color: var(--ink-dim); white-space: pre-line; margin: 0 0 20px; word-break: break-all; }
-.gate-actions { display: flex; gap: 14px; justify-content: center; align-items: center; }
+.gate-actions { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
+.gate-choice { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 13px; }
 
 /* --- the grid ----------------------------------------------------------- */
 .grid {