env-builder UX, gateway configurability, and HF Spaces runtime robustness

Improve Jupyter security, env-builder UX, gateway configurability, and HF Spaces runtime robustness

env-builder.html

@@ -908,7 +908,8 @@ body {
               <span class="pblock-title">📦 Bundle Output</span>
             </div>
             <div class="pblock-body">
-              <textarea id="bundleOut" placeholder="Your encoded bundle will appear here…" readonly spellcheck="false"></textarea>
+              <button id="generateBundle" class="btn btn-amber" style="width:100%;font-size:12.5px;"># Generate Bundle</button>
+              <textarea id="bundleOut" placeholder="Click # Generate to build your bundle…" readonly spellcheck="false"></textarea>
               <input type="text" id="envLineOut" placeholder="HUGGINGCLAW_ENV_BUNDLE=…" readonly spellcheck="false">
               <div class="row-btns">
                 <button id="copyBundle" class="btn btn-amber">⎘ Bundle</button>

env-builder.js

@@ -2104,7 +2104,7 @@ function valueControlHTML(field) {
   return control;
 }
 
-function cardHTML(f) {
+function cardHTML(f, origIdx = 0) {
   const TAG_META = {
     critical:   { cls: 'badge-critical',   lbl: 'critical'   },
     credential: { cls: 'badge-credential', lbl: 'credential' },
@@ -2116,7 +2116,7 @@ function cardHTML(f) {
   const tm = TAG_META[f.tag] || TAG_META.optional;
   const badge = `<span class="badge ${tm.cls}">${tm.lbl}</span>`;
 
-  return `<div class="env-card" data-row data-group="${esc(f.g)}" data-search="${esc((f.g + ' ' + f.k + ' ' + (f.lbl || '') + ' ' + (f.tag || '')).toLowerCase())}">
+  return `<div class="env-card" data-row data-orig-idx="${origIdx}" data-group="${esc(f.g)}" data-search="${esc((f.g + ' ' + f.k + ' ' + (f.lbl || '') + ' ' + (f.tag || '')).toLowerCase())}">
     <div class="card-top">
       <input type="checkbox" class="card-check" data-check="${esc(f.k)}" ${f.common ? 'data-common="1"' : ''}>
       <div class="card-info">
@@ -2194,14 +2194,17 @@ function collect() {
   return obj;
 }
 
-function refresh() {
+function generateBundle() {
   const obj = collect();
   const keys = Object.keys(obj).sort();
   const bundle = keys.length ? encodeBundle(Object.fromEntries(keys.map(k => [k, obj[k]]))) : '';
-
   $('bundleOut').value = bundle;
   $('envLineOut').value = bundle ? `HUGGINGCLAW_ENV_BUNDLE=${bundle}` : '';
+}
 
+function refresh() {
+  const obj = collect();
+  const keys = Object.keys(obj).sort();
   const s = $('summary');
   if (keys.length) {
     s.innerHTML = `<strong>${keys.length}</strong> variable${keys.length > 1 ? 's' : ''} selected<div class="sum-keys">${keys.map(k => `<span class="sum-key">${esc(k)}</span>`).join('')}</div>`;
@@ -2379,13 +2382,24 @@ function toggleField(key) {
   const chk = document.querySelector(`[data-check="${CSS.escape(key)}"]`);
   if (chk) {
     chk.checked = on;
+    sortSection(inp.closest('[data-row]'));
     markSelected();
   }
   refresh();
 }
 
+function sortSection(cardEl) {
+  const cards = cardEl && cardEl.closest('.cards');
+  if (!cards) return;
+  const all     = [...cards.querySelectorAll('[data-row]')];
+  const checked = all.filter(c =>  c.querySelector('[data-check]')?.checked);
+  const rest    = all.filter(c => !c.querySelector('[data-check]')?.checked);
+  rest.sort((a, b) => Number(a.dataset.origIdx) - Number(b.dataset.origIdx));
+  [...checked, ...rest].forEach(c => cards.appendChild(c));
+}
+
 function bindFieldEvents() {
-  document.querySelectorAll('[data-check]').forEach(el => el.addEventListener('change', () => { markSelected(); refresh(); }));
+  document.querySelectorAll('[data-check]').forEach(el => el.addEventListener('change', () => { sortSection(el.closest('[data-row]')); markSelected(); refresh(); }));
   document.querySelectorAll('[data-key]').forEach(el => el.addEventListener('input', refresh));
   document.querySelectorAll('[data-toggle]').forEach(btn => btn.addEventListener('click', () => toggleField(btn.dataset.toggle)));
   document.querySelectorAll('[data-pick-for]').forEach(sel => sel.addEventListener('change', () => handlePickerChange(sel)));
@@ -2410,7 +2424,7 @@ function renderSections() {
         <span class="sec-count">${items.length}</span>
         <div class="sec-line"></div>
       </div>
-      <div class="cards">${items.map(cardHTML).join('')}</div>`;
+      <div class="cards">${items.map((f, i) => cardHTML(f, i)).join('')}</div>`;
     wrap.appendChild(sec);
   });
   bindFieldEvents();
@@ -2503,6 +2517,7 @@ $('applyBundle').onclick = () => {
     showToast('Invalid bundle');
   }
 };
+$('generateBundle').onclick = () => generateBundle();
 $('copyBundle').onclick = () => copyText($('bundleOut').value);
 $('copyEnvLine').onclick = () => copyText($('envLineOut').value);
 $('copyJson').onclick = () => copyText(JSON.stringify(collect(), null, 2));

start.sh

@@ -323,7 +323,7 @@ CONFIG_JSON=$(cat <<'CONFIGEOF'
 {
   "gateway": {
     "mode": "local",
-    "port": 7860,
+    "port": "${GATEWAY_PORT}",
     "bind": "lan",
     "auth": {
       "token": ""
@@ -1653,7 +1653,7 @@ while true; do
   stdbuf -oL -eL openclaw "${GATEWAY_ARGS[@]}" 2>&1 | tee -a /home/node/.openclaw/gateway.log &
   GATEWAY_PID=$!
 
-  # Poll for the gateway to start listening on 7860. OpenClaw can take 20-30s
+  # Poll for the gateway to start listening on ${GATEWAY_PORT}. OpenClaw can take 20-30s
   # on cold start (plugin install + auto-restore). Bail out early if the
   # pipeline died.
   GATEWAY_READY_TIMEOUT="${GATEWAY_READY_TIMEOUT:-90}"