@bongos/core 1.19.1081 → 1.20.2

package/modules/public-landing/public/projects.html

@@ -116,15 +116,15 @@ h1[tabindex="-1"]:focus:not(:focus-visible){outline:none;}
 .wizField small{font-family:var(--font-body);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-faint);}
 /* the About step's description is prose, so it is a textarea — it wears the
    same control skin as every other field (task 1002334), never its own */
-#view-new input[type=text], #view-new textarea{
+#view-new input[type=text], #view-new input[type=password], #view-new textarea{
   width:100%;min-height:44px;font-family:var(--font-body);font-size:17px;font-weight:400;color:var(--ink);
   background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;outline:none;
   transition:border-color .15s ease;
 }
 #view-new textarea{font-size:15.5px;line-height:1.5;resize:vertical;min-height:64px;display:block;}
 /* no fade toward the card — a 70% mix washed placeholders to 2.89:1 (task 1002749) */
-#view-new input[type=text]::placeholder, #view-new textarea::placeholder{color:var(--ink-faint);font-weight:400;}
-#view-new input[type=text]:focus, #view-new textarea:focus{border-bottom-color:var(--ink);box-shadow:none;}
+#view-new input[type=text]::placeholder, #view-new input[type=password]::placeholder, #view-new textarea::placeholder{color:var(--ink-faint);font-weight:400;}
+#view-new input[type=text]:focus, #view-new input[type=password]:focus, #view-new textarea:focus{border-bottom-color:var(--ink);box-shadow:none;}
 #view-new input[type=text].bad{border-bottom-color:var(--err);}
 .hint{font-size:13.5px;font-weight:400;color:var(--ink-faint);line-height:1.45;margin-top:8px;min-height:18px;}
 .hint.ok{color:var(--ok);}
@@ -316,6 +316,50 @@ summary{min-height:24px;padding:3px 0;}
 .appOpt span span{display:block;font-size:14px;font-weight:400;color:var(--ink-soft);line-height:1.5;max-width:62ch;}
 .appOpt.soon{cursor:default;}
 .appOpt.soon b{color:var(--ink-soft);}
+/* the Render setup (task 1004352): shown only while Render is the choice. Every
+   list in it is a native radio group, and nothing in it is pre-picked for the owner. */
+/* the app's setup status (task 1004353): the same block in the wizard's done panel and
+   on the project's page. Three stages on a hairline, then one sentence; a failure is a
+   sentence and a Retry the owner starts — the platform never retries by itself. */
+.appStat{margin:14px 0 0;}
+.appStat .appStages{list-style:none;display:flex;gap:0;margin:0 0 14px;padding:0;border-top:1px solid var(--rule);}
+.appStat .appStages li{flex:1;padding:8px 0 0;font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);border-top:2px solid transparent;margin-top:-1px;}
+.appStat .appStages li.done{color:var(--ink-soft);border-top-color:var(--ink-soft);}
+.appStat .appStages li.now{color:var(--ink);border-top-color:var(--accent);}
+.appStat p{font-size:14.5px;font-weight:400;color:var(--ink-soft);line-height:1.55;max-width:62ch;margin:0 0 10px;}
+.appStat p.err{color:var(--err);}
+.appStat a{display:inline-block;padding:3px 0;color:var(--link-ink);font-weight:700;text-decoration:none;}
+.appStat h3{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;font-weight:400;color:var(--ink-faint);margin:18px 0 8px;}
+.appStat .appVars{list-style:none;margin:0 0 8px;padding:0;}
+.appStat .appVars li{padding:6px 0;border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink-soft);}
+.appStat .appVars code{color:var(--ink);}
+.appStat .appRetry{margin-top:12px;}
+.appStat .appRetry[hidden]{display:none;}
+.appStat input[type=password]{width:100%;min-height:44px;font-family:var(--font-body);font-size:16px;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;outline:none;}
+.appStat input[type=password]:focus{border-bottom-color:var(--ink);}
+.appStat .btn{min-height:44px;margin-top:10px;}
+.renderSetup{margin:4px 0 18px;padding:18px 0 0;}
+.renderSetup[hidden], .renderSetup [hidden]{display:none;}
+.renderWhy{font-size:14px;font-weight:400;color:var(--ink-soft);line-height:1.55;max-width:62ch;margin:0 0 18px;}
+.renderWhy a{display:inline-block;padding:3px 0;color:var(--link-ink);font-weight:700;text-decoration:none;}
+.renderKeyRow{display:flex;align-items:flex-end;gap:14px;}
+.renderKeyRow .wizField{flex:1;margin-bottom:0;}
+.renderKeyRow .btn{flex:none;min-height:44px;}
+.renderSetup .appOpts{margin-top:22px;}
+.renderSetup .appOpt.off{cursor:default;}
+.renderSetup .appOpt.off b{color:var(--ink-soft);}
+.renderNew{margin-top:22px;}
+#view-new .renderSetup select{width:100%;min-height:44px;font-family:var(--font-body);font-size:16px;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;outline:none;}
+#view-new .renderSetup select:focus{border-bottom-color:var(--ink);}
+#view-new .renderSetup select option{background:var(--card);color:var(--ink);}
+/* the same step on a project's page (task 1004184) wears the wizard's control skin */
+.appConnect{margin:14px 0 0;}
+.appConnect .finePrint{max-width:62ch;}
+.appConnect .actions{display:flex;gap:12px;flex-wrap:wrap;}
+.appConnect .renderSetup input[type=text], .appConnect .renderSetup input[type=password], .appConnect .renderSetup select{width:100%;min-height:44px;font-family:var(--font-body);font-size:16px;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:8px 0;outline:none;}
+.appConnect .renderSetup input[type=text]:focus, .appConnect .renderSetup input[type=password]:focus, .appConnect .renderSetup select:focus{border-bottom-color:var(--ink);}
+.appConnect .renderSetup input::placeholder{color:var(--ink-faint);}
+.appConnect .renderSetup select option{background:var(--card);color:var(--ink);}
 .appOpt .soonTag{display:inline-block;margin-left:8px;padding:0 8px;border:1px solid var(--rule-soft);border-radius:999px;font-size:12px;font-weight:500;line-height:1.6;color:var(--ink-soft);vertical-align:1px;}
 
 /* GitHub repo picker (task 1002099): hairline rows, the chosen one marked on
@@ -471,11 +515,11 @@ summary{min-height:24px;padding:3px 0;}
     <p class="bandWho" id="bandWho"></p>
     <ul class="bandRow">
       <li class="bandCell"><a class="bandT" href="?view=mine" data-nav-to="mine">My projects</a></li>
-      <!-- the deferred Settings slot: a place it would go, rendering nothing at
-           all — not even the hairline that declares a list item. Never a
-           disabled item: the apex has no settings page, and on a child with no
-           hall the buildersOrigin token falls back to the page you are on. -->
-      <li class="bandSlot" aria-hidden="true"></li>
+      <!-- the slot that waited for a settings page (task 1004259): the hub's
+           account page, where the person's own settings live (ADR 0337 D4.3).
+           Apex-only because the page is — /account is served only where
+           platform-identity runs, so a child instance loses the item whole. -->
+      <!--apex-only:start--><li class="bandCell"><a class="bandT" href="/account">Account</a></li><!--apex-only:end-->
       <!-- the honest hover target; the delegated click upgrades it to the POST -->
       <li class="bandCell"><a class="bandT signout" href="/api/bongos/auth/logout">Sign out</a></li>
     </ul>
@@ -782,6 +826,27 @@ summary{min-height:24px;padding:3px 0;}
            Hidden outright when the server sent no verdict: a platform with no
            public map has nothing to say here, and inventing a local rule to
            fill the silence is exactly what the seam exists to prevent. -->
+      <!-- where its app runs (task 1004353): the app's setup on the owner's Render
+           account — its stage, its address, the way to Render, the env var NAMES still
+           to set there, and on a failure one sentence and a Retry that asks for the key
+           again. For a project whose app has no platform chosen, the OWNER is offered
+           Connect Render (task 1004184): the setup wizard's own Render step, cloned into
+           #mAppConnectForm on first open, so there is one flow and one set of words. -->
+      <div class="card mSec" id="mAppCard" hidden>
+        <h2>Where its app runs</h2>
+        <div id="mApp"></div>
+        <div class="appConnect" id="mAppConnect" hidden>
+          <p class="finePrint">Your app has no platform yet. We keep hosting this project’s Builders' hall either way; you can deploy the app itself to your own Render account.</p>
+          <button type="button" class="btn small" id="mAppConnectOpen">Connect Render</button>
+          <div class="appConnectForm" id="mAppConnectForm" hidden>
+            <div class="actions">
+              <button type="button" class="btn" id="mAppConnectGo">Connect Render</button>
+              <button type="button" class="btn ghost" id="mAppConnectCancel">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="card mSec" id="mPublish" hidden>
         <h2>On the public map</h2>
         <div id="mPub"><p class="finePrint">Reading the project…</p></div>
@@ -1317,10 +1382,12 @@ summary{min-height:24px;padding:3px 0;}
           </section>
 
           <!-- step 7 · where the app runs (task 1004351, ADR 0345). The hall is ours to
-               host, so this step is only about the owner's APP. Render is listed but
-               cannot be picked until the connect flow lands (task 1004352), which
-               removes the "soon" state; "decide later" is the owner's ruling and is
-               always the default, so nothing here can block a Create. -->
+               host, so this step is only about the owner's APP. "Decide later" is the
+               owner's ruling and is always the default. Render (task 1004352) asks for
+               the owner's key, checks it, and makes them CHOOSE the workspace — a
+               Render key reaches every workspace its user is in, so nothing is
+               pre-picked. The key lives in a variable only: never in the draft, a
+               URL, a log or any browser store. -->
           <section class="panel" id="panel-app" aria-labelledby="app-h">
             <h1 id="app-h">Where your app will run</h1>
             <p class="appHall"><b>We host your Builders' hall</b> — the place where the project gets built — at the address you just chose. There is nothing for you to set up.</p>
@@ -1328,9 +1395,9 @@ summary{min-height:24px;padding:3px 0;}
             <form data-next="8">
               <fieldset class="appOpts" id="appOpts">
                 <legend>Where your app runs</legend>
-                <label class="appOpt soon" id="appOptRender">
-                  <input type="radio" name="appPlatform" value="render" disabled aria-describedby="appRenderWhat">
-                  <span><b>Render <span class="soonTag">Coming soon</span></b>
+                <label class="appOpt" id="appOptRender">
+                  <input type="radio" name="appPlatform" value="render" aria-describedby="appRenderWhat">
+                  <span><b>Render</b>
                     <span id="appRenderWhat">We set your app up on your own Render account. You lend us your Render key once, and Render bills you directly.</span></span>
                 </label>
                 <label class="appOpt">
@@ -1339,6 +1406,49 @@ summary{min-height:24px;padding:3px 0;}
                     <span>Create the project now. You can choose where your app runs afterwards.</span></span>
                 </label>
               </fieldset>
+              <div class="renderSetup" id="renderSetup" hidden>
+                <p class="renderWhy">Your Render key is used once, to create your app on your own Render account, and then thrown away — it is not kept, not even in this browser. Render bills you directly. A key can act on your whole Render account, so only paste it here. <a href="https://dashboard.render.com/u/settings#api-keys" target="_blank" rel="noopener noreferrer">Create a key in Render</a></p>
+                <div class="renderKeyRow">
+                  <label class="wizField"><span>Render API key</span>
+                    <input type="password" id="f-renderKey" autocomplete="off" spellcheck="false" maxlength="200" placeholder="rnd_…" aria-describedby="h-renderKey">
+                  </label>
+                  <button type="button" class="btn ghost small" id="renderCheck">Check key</button>
+                </div>
+                <div class="hint" id="h-renderKey" role="status">&nbsp;</div>
+                <fieldset class="appOpts" id="renderWs" hidden>
+                  <legend>Which Render workspace</legend>
+                  <div id="renderWsList"></div>
+                </fieldset>
+                <fieldset class="appOpts" id="renderSvc" hidden>
+                  <legend>A new app, or one you already run</legend>
+                  <div id="renderSvcList"></div>
+                </fieldset>
+                <div class="renderNew" id="renderNew" hidden>
+                  <label class="wizField"><span>Your app is built with</span>
+                    <select id="f-renderRuntime">
+                      <option value="node">Node.js</option><option value="python">Python</option><option value="ruby">Ruby</option>
+                      <option value="go">Go</option><option value="rust">Rust</option><option value="elixir">Elixir</option>
+                      <option value="docker">Docker — use my repository’s Dockerfile</option>
+                    </select>
+                  </label>
+                  <label class="wizField" id="renderBuildWrap"><span>Build command <small>— leave empty if there is none</small></span>
+                    <input type="text" id="f-renderBuild" autocomplete="off" spellcheck="false" maxlength="500" placeholder="npm ci">
+                  </label>
+                  <label class="wizField" id="renderStartWrap"><span>Start command</span>
+                    <input type="text" id="f-renderStart" autocomplete="off" spellcheck="false" maxlength="500" placeholder="npm start">
+                  </label>
+                  <label class="wizField"><span>Plan</span>
+                    <select id="f-renderPlan"></select>
+                  </label>
+                  <label class="addrOpt"><input type="checkbox" id="f-renderDb">
+                    <span>My app needs a database (Render Postgres)</span>
+                  </label>
+                  <label class="wizField" id="renderDbPlanWrap" hidden><span>Database plan</span>
+                    <select id="f-renderDbPlan"></select>
+                  </label>
+                </div>
+                <div class="hint" id="h-render" role="status">&nbsp;</div>
+              </div>
               <div class="nav">
                 <button type="button" class="btn ghost" data-back="6">← Back</button>
                 <button type="submit" class="btn">Next →</button>
@@ -1366,6 +1476,8 @@ summary{min-height:24px;padding:3px 0;}
               <h1 id="done-h">The drums are rolling</h1>
             </div>
             <p class="lede" id="doneLede"></p>
+            <p class="hint" id="doneRender" role="status" hidden></p>
+            <div id="doneApp" hidden></div>
             <!-- the STABLE live region: the strip inside is rebuilt every 5s tick,
                  and a live region that is itself replaced never announces -->
             <div id="liveProgress" role="status" aria-live="polite"></div>
@@ -1512,6 +1624,390 @@ summary{min-height:24px;padding:3px 0;}
     });
   }
 
+  /* ── the app's setup on Render (task 1004353) ──
+     GET /provisioning/instances/:id/render is the one source, on both the wizard's done
+     panel and the project's page, so the two can never tell the owner different stories.
+     The server has already shaped it: the stage, the app's address (only ever an
+     onrender.com one), the links (built from a checked service id), the failure as one
+     sentence, and the answers a Retry re-sends. A Retry asks for the key again — it is
+     never kept — and is always the owner's to start.
+     Built node by node with textContent, never from an HTML string (this module's rule):
+     nothing the server sends can become markup, whatever a later field adds. */
+  var APP_STAGES = [['creating', 'Creating'], ['building', 'Building'], ['live', 'Live']];
+  var APP_HREF_RE = /^https:\/\/([a-z0-9-]{1,63}\.onrender\.com|dashboard\.render\.com)(\/[A-Za-z0-9\/_-]*)?$/;
+  function appEl(tag, cls, text) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    if (text != null) e.textContent = text;
+    return e;
+  }
+  function appLink(href, text) {
+    if (!APP_HREF_RE.test(String(href || ''))) return document.createTextNode(text);
+    var a = appEl('a', null, text);
+    a.href = href; a.target = '_blank'; a.rel = 'noopener noreferrer';
+    return a;
+  }
+  function appPara(parts, cls) {
+    var p = appEl('p', cls || null);
+    parts.forEach(function (x) { p.appendChild(typeof x === 'string' ? document.createTextNode(x) : x); });
+    return p;
+  }
+  /* The view for one answer: its root, and — on a failure — the Retry controls the watch
+     wires. null when there is nothing to show (no platform chosen). */
+  function appStatusView(data) {
+    var app = data && data.app;
+    if (!app) return null;
+    var v = { root: appEl('div', 'appStat') };
+    if (app.state === 'disconnected') {
+      v.root.appendChild(appPara(['This project is no longer connected to Render. Its services there are still yours; remove them in Render if you want to stop paying.']));
+      return v;
+    }
+    if (app.error) {
+      v.root.appendChild(appPara([String(app.error)], 'err'));
+      v.root.appendChild(appPara(['Nothing is retried by itself: your Render key was used once and thrown away, so a retry needs it again.']));
+      v.retryBtn = appEl('button', 'btn ghost small appRetryBtn', 'Retry');
+      v.retryBtn.type = 'button';
+      v.root.appendChild(v.retryBtn);
+      v.retryForm = appEl('div', 'appRetry');
+      v.retryForm.hidden = true;
+      var lab = appEl('label', 'wizField');
+      lab.appendChild(appEl('span', null, 'Render API key'));
+      v.keyEl = appEl('input', 'appRetryKey');
+      v.keyEl.type = 'password'; v.keyEl.autocomplete = 'off'; v.keyEl.spellcheck = false; v.keyEl.maxLength = 200; v.keyEl.placeholder = 'rnd_…';
+      lab.appendChild(v.keyEl);
+      v.retryForm.appendChild(lab);
+      v.sendBtn = appEl('button', 'btn small', 'Retry with this key');
+      v.sendBtn.type = 'button';
+      v.retryForm.appendChild(v.sendBtn);
+      v.hint = appEl('div', 'hint appRetryHint', ' ');
+      v.hint.setAttribute('role', 'status');
+      v.retryForm.appendChild(v.hint);
+      v.root.appendChild(v.retryForm);
+    } else {
+      var at = APP_STAGES.map(function (s) { return s[0]; }).indexOf(app.stage);
+      var ol = appEl('ol', 'appStages');
+      APP_STAGES.forEach(function (s, i) {
+        var li = appEl('li', i < at || app.stage === 'live' ? 'done' : (i === at ? 'now' : ''), s[1]);
+        if (i === at) li.setAttribute('aria-current', 'step');
+        ol.appendChild(li);
+      });
+      v.root.appendChild(ol);
+      if (app.stage === 'live') {
+        v.root.appendChild(app.url
+          ? appPara(['Your app is live at ', appLink(app.url, String(app.url).replace(/^https:\/\//, '')), '.'])
+          : appPara(['Your app is live on Render.']));
+      } else if (app.stage === 'building') {
+        v.root.appendChild(appPara([app.mode === 'adopt' ? 'Linked. Waiting for your app to answer at its Render address.' : 'Render is building your app. The first build usually takes a few minutes.']));
+      } else {
+        v.root.appendChild(appPara([app.waiting ? 'Waiting for the project to finish setting up — then your app is created on Render.' : 'Creating your app on your Render account.']));
+      }
+    }
+    if (app.links) v.root.appendChild(appPara([appLink(app.links.service, 'Open it on Render')]));
+    var vars = (data.env_vars || []).filter(function (x) { return !x.set_for_you; });
+    if (vars.length) {
+      v.root.appendChild(appEl('h3', null, 'Still to set on Render'));
+      v.root.appendChild(appPara(['Bongos keeps the names only. Set each value on the service’s environment page in Render.']));
+      var ul = appEl('ul', 'appVars');
+      vars.forEach(function (x) {
+        var li = appEl('li');
+        li.appendChild(appEl('code', null, String(x.name)));
+        if (!x.required) li.appendChild(document.createTextNode(' — optional'));
+        ul.appendChild(li);
+      });
+      v.root.appendChild(ul);
+      if (app.links) v.root.appendChild(appPara([appLink(app.links.env, 'Open the environment page on Render')]));
+    }
+    return v;
+  }
+  function appTerminal(data) { var a = data && data.app; return !a || a.state === 'disconnected' || !!a.error || a.stage === 'live'; }
+  function fetchAppStatus(id) {
+    return fetch(API + '/provisioning/instances/' + encodeURIComponent(id) + '/render', { credentials: 'same-origin' })
+      .then(function (res) { return res.ok ? res.json() : null; })
+      .catch(function () { return null; });
+  }
+  /* Paint the status into `box` and keep it current until it settles. `alive` says whether
+     the surface is still showing this project, so a watch never paints a page that moved on.
+     `card` (default: the box itself) is what hides while there is nothing to show.
+     `offer` (optional) is asked on every paint whether it has something to show instead
+     — the project page's Connect Render (task 1004184) — and keeps the card up if so.
+     Returns a stop function. */
+  function watchApp(id, box, alive, everyMs, card, offer) {
+    var t = null, stopped = false, last = null, view = null, ticks = 0;
+    function paint(data) {
+      if (stopped || !alive()) return;
+      last = data;
+      /* never repaint over a Retry the owner has opened — it holds a key they are typing */
+      /* …whether this watch opened it or an earlier one on the same box did (the project
+         page starts a fresh watch on every reload of the project) */
+      var open = (view && view.retryForm && !view.retryForm.hidden) || !!box.querySelector('.appRetry:not([hidden])');
+      if (!open) {
+        view = appStatusView(data);
+        box.textContent = '';
+        if (view) { box.appendChild(view.root); wire(view); }
+        var offered = offer ? offer(data) : false;
+        (card || box).hidden = !view && !offered;
+      }
+      if (!appTerminal(data) && ticks++ < 360) t = setTimeout(tick, everyMs || 5000);
+    }
+    function tick() { fetchAppStatus(id).then(paint); }
+    function wire(v) {
+      if (!v.retryBtn) return;
+      v.retryBtn.addEventListener('click', function () {
+        v.retryForm.hidden = false; v.retryBtn.hidden = true; v.keyEl.focus();
+      });
+      v.sendBtn.addEventListener('click', function () {
+        if (!last || !last.app || !last.app.retry) return;
+        var key = String(v.keyEl.value || '').trim();
+        if (!/^rnd_[A-Za-z0-9]{16,128}$/.test(key)) {
+          v.hint.textContent = 'That doesn’t look like a Render API key. It starts with “rnd_”.'; v.hint.className = 'hint appRetryHint err'; return;
+        }
+        var body = {};
+        Object.keys(last.app.retry).forEach(function (k) { if (last.app.retry[k] != null) body[k] = last.app.retry[k]; });
+        body.key = key;
+        v.keyEl.value = ''; key = '';
+        v.sendBtn.disabled = true; v.hint.textContent = 'Handing it to Render again…'; v.hint.className = 'hint appRetryHint';
+        fetch(API + '/provisioning/instances/' + encodeURIComponent(id) + '/render', {
+          method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
+        }).then(function (res) {
+          body.key = '';
+          return res.json().catch(function () { return {}; }).then(function (d) {
+            if (!res.ok) throw new Error((d.error && d.error.message) || 'The retry could not be queued.');
+            v.retryForm.hidden = true; view = null; clearTimeout(t); ticks = 0; tick();   // queued: close the form so the next answer can paint
+          });
+        }).catch(function (err) {
+          body.key = '';
+          v.sendBtn.disabled = false; v.hint.textContent = err.message; v.hint.className = 'hint appRetryHint err';
+        });
+      });
+    }
+    tick();
+    return function stop() { stopped = true; clearTimeout(t); };
+  }
+  /* end of the app's setup on Render */
+
+  /* ── connecting Render (task 1004352, ADR 0348; shared with the project page by task 1004184) ──
+     ONE flow, run by the setup wizard's app step and by an existing project's "Where its
+     app runs" card: check the key, choose the workspace, a new app or one to link, the plan
+     and the database. Each caller hands in how to find its elements (`q`, by the wizard's
+     own ids), where the answers live (`st`) and three hooks: save (the wizard's draft), repo
+     (the project's owner/repo) and on (is Render the chosen platform).
+     The KEY lives in this closure and the password field: never on `st` (the wizard's st is
+     its whole sessionStorage draft), never in a URL, a log or any browser store. It is sent
+     twice at most — to the read-only lookup, and with the setup request — and `drop` forgets
+     it once that is sent. The workspace list is Render's answer; the owner must CHOOSE one —
+     a key reaches every workspace its user is in, so nothing is pre-picked (ADR 0327).
+     Prices are Render's list prices per month: starter and basic_256mb were measured by the
+     pilot (task 1004142); Render's own pricing page is the source of truth, and the review
+     says Render bills the owner. Lists are built node by node, never from an HTML string. */
+  var RENDER_WEB_PLANS = [['starter', 'Starter', 7], ['standard', 'Standard', 25], ['pro', 'Pro', 85]];
+  var RENDER_DB_PLANS = [['basic_256mb', 'Basic 256 MB', 6], ['basic_1gb', 'Basic 1 GB', 19], ['basic_4gb', 'Basic 4 GB', 75]];
+  var RENDER_RUNTIMES = { node: 'Node.js', python: 'Python', ruby: 'Ruby', go: 'Go', rust: 'Rust', elixir: 'Elixir', docker: 'Docker' };
+  var RENDER_KEY_RE = /^rnd_[A-Za-z0-9]{16,128}$/;
+  function planLabel(list, v) {
+    var p = list.filter(function (x) { return x[0] === v; })[0] || list[0];
+    return p[1] + ', about $' + p[2] + '/month';
+  }
+  function runtimeLabel(v) { return RENDER_RUNTIMES[v] || RENDER_RUNTIMES.node; }
+  function repoOf(url) { var m = String(url || '').replace(/\.git$/, '').match(/github\.com\/([^/]+\/[^/]+)$/i); return m ? m[1].toLowerCase() : ''; }
+  function renderConnect(q, st, hooks) {
+    var key = '';
+    var workspaces = null;   // Render's answer for the current key, or null
+    var services = null;     // the chosen workspace's web services, or null
+    var wsName = (hooks.ns || '') + 'renderWs', svcName = (hooks.ns || '') + 'renderSvc';
+    function hint(id, msg, err) { var h = q(id); h.textContent = msg || ' '; h.className = 'hint' + (err ? ' err' : ''); }
+    function repo() { return String(hooks.repo() || ''); }
+    function lookup(ownerId) {
+      return fetch(API + '/provisioning/render/lookup', {
+        method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(ownerId ? { key: key, owner_id: ownerId } : { key: key })
+      }).then(function (res) {
+        return res.json().catch(function () { return {}; }).then(function (data) {
+          if (!res.ok) throw new Error((data.error && data.error.message) || 'Render couldn’t be reached. Try again in a moment.');
+          return data;
+        });
+      });
+    }
+    function fillPlans(sel, list, v) {
+      sel.textContent = '';
+      list.forEach(function (p) {
+        var o = appEl('option', null, p[1] + ' — about $' + p[2] + '/month');
+        o.value = p[0];
+        if (p[0] === v) o.selected = true;
+        sel.appendChild(o);
+      });
+    }
+    // One choice row: a radio, its title and a line under it (strings or nodes).
+    function choice(cls, name, attrs, title, sub) {
+      var lab = appEl('label', cls);
+      var input = appEl('input');
+      input.type = 'radio'; input.name = name;
+      Object.keys(attrs).forEach(function (k) {
+        if (k === 'checked' || k === 'disabled') input[k] = !!attrs[k]; else input.setAttribute(k, attrs[k]);
+      });
+      lab.appendChild(input);
+      var body = appEl('span');
+      body.appendChild(appEl('b', null, title));
+      var line = appEl('span');
+      sub.forEach(function (x) { line.appendChild(typeof x === 'string' ? document.createTextNode(x) : x); });
+      body.appendChild(line);
+      lab.appendChild(body);
+      return lab;
+    }
+    function paintWorkspaces() {
+      var list = workspaces || [];
+      var box = q('renderWsList');
+      q('renderWs').hidden = !workspaces;
+      box.textContent = '';
+      list.forEach(function (w, i) {
+        box.appendChild(choice('appOpt', wsName, { 'data-i': String(i), checked: w.id === st.renderOwnerId }, String(w.name),
+          [(w.type === 'user' ? 'Personal workspace' : 'Team workspace') + ' · ' + String(w.id)]));
+      });
+      if (!list.length) box.appendChild(appEl('p', 'hint err', 'This key reaches no workspace.'));
+    }
+    function paintServices() {
+      var list = services || [];
+      var want = repo().toLowerCase();
+      var box = q('renderSvcList');
+      q('renderSvc').hidden = !services;
+      box.textContent = '';
+      box.appendChild(choice('appOpt', svcName, { value: 'new', checked: st.renderMode === 'greenfield' }, 'Create a new app',
+        ['Render builds it from ', appEl('code', null, repo()), '.']));
+      list.forEach(function (s, i) {
+        var mine = repoOf(s.repo) === want;
+        box.appendChild(choice('appOpt' + (mine ? '' : ' off'), svcName,
+          { 'data-i': String(i), disabled: !mine, checked: mine && st.renderMode === 'adopt' && st.renderServiceId === s.id },
+          'Link ' + String(s.name),
+          [mine ? 'Already on Render — nothing on it is changed.' : 'Builds ' + (repoOf(s.repo) || 'another repository') + ', not this project, so it can’t be linked.']));
+      });
+      syncNew();
+    }
+    function syncNew() {
+      var fresh = !!services && st.renderMode === 'greenfield';
+      q('renderNew').hidden = !fresh;
+      if (!fresh) return;
+      q('f-renderRuntime').value = st.renderRuntime || 'node';
+      var docker = q('f-renderRuntime').value === 'docker';
+      q('renderBuildWrap').hidden = docker; q('renderStartWrap').hidden = docker;
+      q('f-renderBuild').value = st.renderBuild || '';
+      q('f-renderStart').value = st.renderStart || '';
+      fillPlans(q('f-renderPlan'), RENDER_WEB_PLANS, st.renderPlan || 'starter');
+      q('f-renderDb').checked = !!st.renderDb;
+      q('renderDbPlanWrap').hidden = !st.renderDb;
+      fillPlans(q('f-renderDbPlan'), RENDER_DB_PLANS, st.renderDbPlan || 'basic_256mb');
+    }
+    function sync() {
+      var on = hooks.on();
+      q('renderSetup').hidden = !on;
+      if (!on) return;
+      if (!key && st.renderOwnerId) hint('h-renderKey', 'Enter your Render key again — it is not kept, not even in this browser.');
+      paintWorkspaces();
+      if (!workspaces) q('renderWs').hidden = true;
+      paintServices();
+      if (!services) q('renderSvc').hidden = true;
+    }
+    function forget() {
+      workspaces = null; services = null;
+      q('renderWs').hidden = true; q('renderSvc').hidden = true; q('renderNew').hidden = true;
+    }
+    q('f-renderKey').addEventListener('input', function () {
+      key = String(q('f-renderKey').value || '').trim();
+      forget();   // an answer belongs to the key that was checked, not to this one
+      hint('h-renderKey', '');
+    });
+    q('renderCheck').addEventListener('click', function () {
+      var btn = q('renderCheck');
+      if (!RENDER_KEY_RE.test(key)) return hint('h-renderKey', 'That doesn’t look like a Render API key. It starts with “rnd_”.', true);
+      btn.disabled = true; hint('h-renderKey', 'Checking with Render…');
+      lookup(null).then(function (data) {
+        workspaces = data.workspaces || [];
+        if (!workspaces.some(function (w) { return w.id === st.renderOwnerId; })) { st.renderOwnerId = ''; st.renderOwnerName = ''; }
+        hint('h-renderKey', workspaces.length > 1
+          ? 'Render accepted the key. It reaches ' + workspaces.length + ' workspaces — choose the one your app belongs in.'
+          : 'Render accepted the key. Choose the workspace to use.');
+        paintWorkspaces();
+        if (st.renderOwnerId) chooseWorkspace(st.renderOwnerId);
+      }, function (err) {
+        forget();
+        hint('h-renderKey', err.message, true);
+      }).then(function () { btn.disabled = false; });
+    });
+    function chooseWorkspace(id) {
+      var w = (workspaces || []).filter(function (x) { return x.id === id; })[0];
+      if (!w) return;
+      if (st.renderOwnerId !== id) { st.renderMode = ''; st.renderServiceId = ''; st.renderServiceName = ''; }
+      st.renderOwnerId = w.id; st.renderOwnerName = w.name; hooks.save();
+      services = null; q('renderSvc').hidden = true; q('renderNew').hidden = true;
+      hint('h-render', 'Looking at what is in ' + w.name + '…');
+      lookup(w.id).then(function (data) {
+        if (st.renderOwnerId !== w.id) return;   // the owner moved on while Render answered
+        services = data.services || [];
+        hint('h-render', '');
+        paintServices();
+      }, function (err) { hint('h-render', err.message, true); });
+    }
+    q('renderWsList').addEventListener('change', function (ev) {
+      var i = Number(ev.target && ev.target.getAttribute('data-i'));
+      var w = (workspaces || [])[i];
+      if (w) chooseWorkspace(w.id);
+    });
+    q('renderSvcList').addEventListener('change', function (ev) {
+      var t = ev.target;
+      if (!t || t.name !== svcName || t.disabled) return;
+      if (t.value === 'new') { st.renderMode = 'greenfield'; st.renderServiceId = ''; st.renderServiceName = ''; }
+      else {
+        var s = (services || [])[Number(t.getAttribute('data-i'))];
+        if (!s) return;
+        st.renderMode = 'adopt'; st.renderServiceId = s.id; st.renderServiceName = s.name;
+      }
+      hooks.save(); syncNew(); hint('h-render', '');
+    });
+    q('renderNew').addEventListener('change', function () {
+      st.renderRuntime = q('f-renderRuntime').value;
+      st.renderPlan = q('f-renderPlan').value;
+      st.renderDb = q('f-renderDb').checked;
+      st.renderDbPlan = q('f-renderDbPlan').value;
+      hooks.save(); syncNew();
+    });
+    q('renderNew').addEventListener('input', function (ev) {
+      if (ev.target.id === q('f-renderBuild').id) st.renderBuild = ev.target.value;
+      if (ev.target.id === q('f-renderStart').id) st.renderStart = ev.target.value;
+      hooks.save();
+    });
+    function validate() {
+      if (!hooks.on()) return true;
+      var bad = function (msg) { hint('h-render', msg, true); return false; };
+      if (!key || !workspaces) return bad(hooks.noKey || 'Check your Render key first.');
+      if (!st.renderOwnerId || !workspaces.some(function (w) { return w.id === st.renderOwnerId; })) return bad('Choose the Render workspace to use.');
+      if (!services) return bad('Wait a moment — Render is still answering.');
+      if (st.renderMode === 'adopt') {
+        if (!services.some(function (s) { return s.id === st.renderServiceId && repoOf(s.repo) === repo().toLowerCase(); })) return bad('Choose the app to link, or create a new one.');
+      } else if (st.renderMode === 'greenfield') {
+        if ((st.renderRuntime || 'node') !== 'docker' && !String(st.renderStart || '').trim()) return bad('Say how your app starts — the command Render should run, for example “npm start”.');
+      } else return bad('Choose whether to create a new app or link one you already run.');
+      hint('h-render', '');
+      return true;
+    }
+    // What the setup request carries — the owner's answers, and the key for this one send.
+    function requestBody() {
+      var b = { key: key, owner_id: st.renderOwnerId, mode: st.renderMode };
+      if (st.renderMode === 'adopt') { b.service_id = st.renderServiceId; return b; }
+      b.runtime = st.renderRuntime || 'node';
+      if (b.runtime !== 'docker') {
+        b.start_command = String(st.renderStart || '').trim();
+        if (String(st.renderBuild || '').trim()) b.build_command = String(st.renderBuild).trim();
+      }
+      b.web_plan = st.renderPlan || 'starter';
+      b.database = !!st.renderDb;
+      if (b.database) b.db_plan = st.renderDbPlan || 'basic_256mb';
+      return b;
+    }
+    // Forget the key — the closure's copy, the field's, and every answer it bought.
+    function drop() { key = ''; q('f-renderKey').value = ''; forget(); }
+    return { sync: sync, forget: forget, validate: validate, requestBody: requestBody, drop: drop, hint: hint,
+      hasKey: function () { return !!key; } };
+  }
+  /* end of connecting Render */
+
   /* HELD, not sampled once: a visitor who flips "reduce motion" mid-session must
      stop the sky then and there (and get it back if they flip it off), instead
      of being stuck with whatever the preference was at load. addListener is the
@@ -3560,7 +4056,7 @@ summary{min-height:24px;padding:3px 0;}
          a handle nobody has asked the server about, and a handle free ten minutes ago
          may not be now (task 1002898 N10) */
       if (step === 6) { checkSlugAvailable(); renderAddrPanel(); }
-      if (step === 7) syncAppStep();
+      if (step === 7) { syncAppStep(); syncRenderSetup(); }
       if (step === 8) renderReview();
     }
 
@@ -4160,6 +4656,7 @@ summary{min-height:24px;padding:3px 0;}
 
     /* per-panel validation on Next */
     function validateStep(step) {
+      if (step === 7) return validateRender();
       if (step === 1) {
         if (!state.name.trim()) { $('h-name').textContent = 'Give it a name to start.'; $('h-name').className = 'hint err'; return false; }
         return true;
@@ -4263,12 +4760,60 @@ summary{min-height:24px;padding:3px 0;}
       root.querySelectorAll('#appOpts input[name=appPlatform]').forEach(function (i) { i.checked = i.value === pick; });
     }
     function appRow() {
-      return appPlatformChoice() === 'render' ? 'Render, on your own account' : 'Not chosen yet — you can decide later';
+      if (appPlatformChoice() !== 'render') return 'Not chosen yet — you can decide later';
+      var ws = esc(state.renderOwnerName || state.renderOwnerId || '');
+      if (state.renderMode === 'adopt') return 'Render, workspace ' + ws + ' — link <code>' + esc(state.renderServiceName || state.renderServiceId || '') + '</code>, changing nothing on it';
+      var plan = planLabel(RENDER_WEB_PLANS, state.renderPlan || 'starter');
+      var db = state.renderDb ? ', with a database (' + planLabel(RENDER_DB_PLANS, state.renderDbPlan || 'basic_256mb') + ')' : ', no database';
+      return 'Render, workspace ' + ws + ' — a new app (' + esc(runtimeLabel(state.renderRuntime || 'node')) + ', ' + plan + ')' + db + '. Render bills you directly.';
     }
     var appOptsEl = root.querySelector('#appOpts');
     if (appOptsEl) appOptsEl.addEventListener('change', function (ev) {
-      if (ev.target && ev.target.name === 'appPlatform' && !ev.target.disabled) { state.appPlatform = ev.target.value; saveDraft(); }
+      if (ev.target && ev.target.name === 'appPlatform' && !ev.target.disabled) { state.appPlatform = ev.target.value; saveDraft(); syncRenderSetup(); }
     });
+
+    /* ── Render (task 1004352, ADR 0348) ──
+       The flow itself is renderConnect(), shared with an existing project's page (task
+       1004184). Here it reads and writes the draft (`state`), so every answer but the key
+       survives a reload. The key is never on state, so a resumed draft asks for it again,
+       and says why. */
+    var rc = renderConnect($, state, {
+      save: saveDraft,
+      repo: function () { return String(state.owner || '') + '/' + String(state.repo || ''); },
+      on: function () { return appPlatformChoice() === 'render'; },
+      noKey: 'Check your Render key first — or choose “Decide later”.'
+    });
+    function syncRenderSetup() { rc.sync(); }
+    function forgetRenderAnswers() { rc.forget(); }
+    function validateRender() { return rc.validate(); }
+    function renderRequestBody() { return rc.requestBody(); }
+    // Send the setup request for a just-created project, then drop the key whatever the
+    // answer. The project exists either way; a refusal here is the APP's, and the done
+    // panel says so in plain words.
+    function sendRenderSetup(instanceId) {
+      if (appPlatformChoice() !== 'render' || !rc.hasKey() || !instanceId) return;
+      var body = renderRequestBody();
+      rc.drop();
+      var note = $('doneRender');
+      note.hidden = false; note.className = 'hint'; note.textContent = 'Handing your app to Render…';
+      fetch(API + '/provisioning/instances/' + encodeURIComponent(instanceId) + '/render', {
+        method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
+      }).then(function (res) {
+        return res.json().catch(function () { return {}; }).then(function (data) {
+          if (!res.ok) throw new Error((data.error && data.error.message) || 'Render setup could not be queued.');
+          note.textContent = body.mode === 'adopt'
+            ? 'Once the project is up, we link your Render app. Your key is used once, then thrown away.'
+            : 'Once the project is up, we create your app on your Render account. Your key is used once, then thrown away.';
+          /* then the app's own progress, from the same read the project's page uses (task 1004353) */
+          var box = $('doneApp');
+          if (box) watchApp(instanceId, box, function () { return state.step === 9; }, 5000);
+        });
+      }).catch(function (err) {
+        note.className = 'hint err';
+        note.textContent = 'Your project is being created, but your app was not handed to Render: ' + err.message + ' You can connect Render from the project’s page once it is live.';
+      });
+      body.key = '';
+    }
     function renderReview() {
       /* every road back to this step gets a live button — the create path
          disables it and only the failure branch used to restore it, which
@@ -4432,6 +4977,7 @@ summary{min-height:24px;padding:3px 0;}
         } catch (e) {}
         renderDone();
         show(9, true);
+        sendRenderSetup(data.instance && data.instance.id);   // the key rides the new project's own setup run (task 1004352)
         startProgress(data.instance && data.instance.id);
       }).catch(function (err) {
         if (String(err && err.message) === 'signing in') return;
@@ -4662,6 +5208,8 @@ summary{min-height:24px;padding:3px 0;}
 
     function renderDone() {
       var adopt = state.mode === 'adopt';
+      $('doneRender').hidden = true;   // sendRenderSetup shows it again when Render is the choice
+      $('doneApp').hidden = true; $('doneApp').textContent = '';
       $('doneLede').innerHTML = 'Provisioning is requested for <strong>' + esc(state.name || state.slug) + '</strong>' +
         (adopt ? ' — adopting your existing repo' : '') +
         '. The platform stands up the server, database, and address on its own — watch it right here, or any time on <a href="?view=mine">your projects page</a>.';
@@ -6227,6 +6775,7 @@ summary{min-height:24px;padding:3px 0;}
         /* the SECOND, GitHub-backed read — fired only here (entry + tab
            return), never from renderManage, which the fetch-free tick calls */
         if (!keepRepo) loadRepoVisibility(inst);
+        loadAppStatus(inst.id || asked, inst);   /* where its app runs (task 1004353; Connect Render, task 1004184) */
         /* the settings row + the project's own manifest — the same cadence as
            the GitHub read: entry + tab return, never the in-flight tick. The
            three cards below share ONE read of the row (task 1003582), so
@@ -6363,6 +6912,100 @@ summary{min-height:24px;padding:3px 0;}
     }
   }
 
+  var stopAppWatch = null;
+  function loadAppStatus(id, inst) {
+    if (stopAppWatch) stopAppWatch();
+    var box = $('mApp'), card = $('mAppCard');
+    var mine = String(id);
+    if (appConnectFor !== mine) resetAppConnect(mine, inst);
+    else appConnectInst = inst || appConnectInst;
+    stopAppWatch = watchApp(id, box, function () { return String(manageId) === mine; }, 10000, card, offerAppConnect);
+  }
+
+  /* ── Connect Render from the project's page (task 1004184) ──
+     Offered only on the owner's own answer that the app has NO platform (the status read
+     is owner-only, so anyone else gets nothing back and sees nothing), and only for a
+     project the server would take it for: not removed, and with a repository to build.
+     The flow is the wizard's own — its markup cloned from #renderSetup with every id
+     prefixed `m-`, and its logic renderConnect() — so the two can never ask different
+     questions. The answers live in a plain object that is dropped with the project; the
+     key, as in the wizard, lives only in renderConnect's closure and the field. */
+  var appConnect = null, appConnectFor = null, appConnectInst = null, appConnectSt = {};
+  function appConnectQ(id) { return document.getElementById('m-' + id); }
+  function appConnectable(inst) {
+    return !!(inst && inst.target_ref && inst.status !== 'torn_down' && inst.status !== 'tearing_down');
+  }
+  function offerAppConnect(data) {
+    var show = !!(data && data.ok && data.app === null && appConnectable(appConnectInst));
+    $('mAppConnect').hidden = !show;
+    if (!show) closeAppConnect();
+    return show;
+  }
+  function closeAppConnect() {
+    /* what Render said belongs to the key just forgotten */
+    if (appConnect) { appConnect.drop(); appConnect.hint('h-renderKey', ''); appConnect.hint('h-render', ''); }
+    $('mAppConnectForm').hidden = true;
+    $('mAppConnectOpen').hidden = false;
+  }
+  function resetAppConnect(id, inst) {
+    closeAppConnect();
+    appConnectFor = id; appConnectInst = inst || null;
+    Object.keys(appConnectSt).forEach(function (k) { delete appConnectSt[k]; });
+  }
+  function buildAppConnect() {
+    if (appConnect) return appConnect;
+    var copy = $('renderSetup').cloneNode(true);
+    copy.id = 'm-renderSetup';
+    copy.querySelectorAll('[id]').forEach(function (e) { e.id = 'm-' + e.id; });
+    copy.querySelectorAll('[aria-describedby]').forEach(function (e) { e.setAttribute('aria-describedby', 'm-' + e.getAttribute('aria-describedby')); });
+    var form = $('mAppConnectForm');
+    form.insertBefore(copy, form.firstChild);
+    appConnect = renderConnect(appConnectQ, appConnectSt, {
+      ns: 'm-',
+      save: function () {},
+      repo: function () { return appConnectInst ? String(appConnectInst.target_ref || '') : ''; },
+      on: function () { return true; }
+    });
+    /* a clone carries whatever the wizard's copy held in this tab — start it empty */
+    closeAppConnect();
+    return appConnect;
+  }
+  $('mAppConnectOpen').addEventListener('click', function () {
+    var rc = buildAppConnect();
+    rc.sync();
+    $('mAppConnectForm').hidden = false;
+    this.hidden = true;
+    appConnectQ('f-renderKey').focus();
+  });
+  $('mAppConnectCancel').addEventListener('click', function () {
+    closeAppConnect();
+    $('mAppConnectOpen').focus();
+  });
+  $('mAppConnectGo').addEventListener('click', function () {
+    var btn = this, rc = appConnect, id = appConnectFor, inst = appConnectInst;
+    if (!rc || !id || !rc.validate()) return;
+    var body = rc.requestBody();
+    rc.drop(); rc.hint('h-renderKey', '');
+    btn.disabled = true;
+    rc.hint('h-render', 'Handing your app to Render…');
+    fetch(API + '/provisioning/instances/' + encodeURIComponent(id) + '/render', {
+      method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
+    }).then(function (res) {
+      body.key = '';
+      return res.json().catch(function () { return {}; }).then(function (d) {
+        if (!res.ok) throw new Error((d.error && d.error.message) || 'Render setup could not be queued.');
+        rc.hint('h-render', '');
+        closeAppConnect();
+        if (String(manageId) === id) loadAppStatus(id, inst);   // the status read now tells the rest
+      });
+    }).catch(function (err) {
+      body.key = '';
+      rc.hint('h-render', err.message + ' Your key was not kept, so check it again to retry.', true);
+    }).then(function () { btn.disabled = false; });
+    body.key = '';
+  });
+  /* end of Connect Render from the project's page */
+
   function loadRepoVisibility(inst) {
     manageRepo = null;
     if (!inst.target_ref) {