HuggingMes

Running

somratpro Claude Sonnet 4.6 commited on 4 days ago

Commit

b25ba68

1 Parent(s): 4c78093

feat: add ENV Builder at /env-builder

Port env-builder from HuggingClaw, adapted for HuggingMes/Hermes vars:
- 8 sections: Core, Backup, Telegram, Terminal, Providers, Cloudflare, Advanced, Custom
- Model catalog with provider/model prefix format (gemini/, anthropic/, openrouter/, etc.)
- Import/export as HUGGINGMES_ENV_BUNDLE base64 or plain .env
- No auth required (useful before GATEWAY_TOKEN is set)
- Dashboard button: "ENV Builder →" beside Open Hermes Agent and Open Terminal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Files changed (4) hide show

Dockerfile +2 -0
env-builder.html +777 -0
env-builder.js +796 -0
health-server.js +25 -0

Dockerfile CHANGED Viewed

@@ -37,6 +37,8 @@ COPY --chown=hermes:hermes health-server.js /opt/huggingmes/health-server.js
 COPY --chown=hermes:hermes hermes-sync.py /opt/huggingmes/hermes-sync.py
 COPY --chown=hermes:hermes cloudflare-proxy-setup.py /opt/huggingmes/cloudflare-proxy-setup.py
 COPY --chown=hermes:hermes cloudflare-keepalive-setup.py /opt/huggingmes/cloudflare-keepalive-setup.py
 RUN chmod +x \
     /opt/huggingmes/start.sh \

 COPY --chown=hermes:hermes hermes-sync.py /opt/huggingmes/hermes-sync.py
 COPY --chown=hermes:hermes cloudflare-proxy-setup.py /opt/huggingmes/cloudflare-proxy-setup.py
 COPY --chown=hermes:hermes cloudflare-keepalive-setup.py /opt/huggingmes/cloudflare-keepalive-setup.py
+COPY --chown=hermes:hermes env-builder.html /opt/huggingmes/env-builder.html
+COPY --chown=hermes:hermes env-builder.js /opt/huggingmes/env-builder.js
 RUN chmod +x \
     /opt/huggingmes/start.sh \

env-builder.html ADDED Viewed

	@@ -0,0 +1,777 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>HuggingMes · ENV Builder</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg:        #0b0c0f;
+  --bg2:       #111318;
+  --bg3:       #181c23;
+  --bg4:       #1e2330;
+  --border:    #252b38;
+  --border2:   #2e3648;
+  --amber:     #f5a623;
+  --amber2:    #ffbe55;
+  --amber-dim: rgba(245,166,35,.12);
+  --amber-glow:rgba(245,166,35,.22);
+  --green:     #3dd68c;
+  --red:       #f05f5f;
+  --blue:      #5b8af5;
+  --text:      #e4e8f0;
+  --text2:     #8d97ad;
+  --text3:     #535f76;
+  --mono:      'JetBrains Mono', monospace;
+  --sans:      'Syne', sans-serif;
+  --r:         8px;
+  --r2:        12px;
+  --sidebar-w: 220px;
+  --panel-w:   340px;
+}
+html { scroll-behavior: smooth; }
+body {
+  font-family: var(--sans);
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: 52px;
+  background: rgba(11,12,15,.9);
+  backdrop-filter: blur(14px);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  gap: 16px;
+  flex-shrink: 0;
+}
+.topbar-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+.topbar-logo .logo-emoji { font-size: 24px; line-height: 1; }
+.topbar-wordmark {
+  font-weight: 800;
+  font-size: 14px;
+  letter-spacing: -.2px;
+  color: var(--text);
+  white-space: nowrap;
+}
+.topbar-wordmark em {
+  color: var(--amber);
+  font-style: normal;
+}
+.topbar-divider {
+  width: 1px;
+  height: 22px;
+  background: var(--border2);
+}
+.topbar-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text2);
+  letter-spacing: .5px;
+  text-transform: uppercase;
+}
+.topbar-spacer { flex: 1; }
+.topbar-pill {
+  font-family: var(--mono);
+  font-size: 10px;
+  color: var(--amber);
+  background: var(--amber-dim);
+  border: 1px solid var(--amber-glow);
+  border-radius: 20px;
+  padding: 3px 10px;
+  letter-spacing: .5px;
+}
+.layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  height: calc(100vh - 52px);
+}
+.sidebar-wrap {
+  width: var(--sidebar-w);
+  flex-shrink: 0;
+  border-right: 1px solid var(--border);
+  background: var(--bg2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.sidebar-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 10px;
+}
+.sidebar-scroll::-webkit-scrollbar { width: 4px; }
+.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
+.sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+.sb-label {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--text3);
+  padding: 0 8px 10px;
+}
+.nav-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--r);
+  text-align: left;
+  color: var(--text2);
+  font-family: var(--sans);
+  font-size: 12.5px;
+  font-weight: 500;
+  transition: background .15s, color .15s;
+  margin-bottom: 2px;
+}
+.nav-btn:hover { background: var(--bg3); color: var(--text); }
+.nav-btn.active {
+  background: var(--amber-dim);
+  color: var(--amber);
+  border: 1px solid var(--amber-glow);
+}
+.nav-icon { font-size: 13px; flex-shrink: 0; }
+.nav-label { flex: 1; }
+.nav-count {
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text3);
+  background: var(--bg3);
+  border-radius: 10px;
+  padding: 1px 6px;
+  min-width: 20px;
+  text-align: center;
+  transition: background .2s, color .2s;
+}
+.nav-btn.active .nav-count {
+  background: var(--amber-glow);
+  color: var(--amber2);
+}
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg2);
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+.search-wrap {
+  position: relative;
+  flex: 1;
+  min-width: 160px;
+  max-width: 340px;
+}
+.search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text3);
+  pointer-events: none;
+  font-size: 12px;
+}
+#search {
+  width: 100%;
+  background: var(--bg3);
+  border: 1px solid var(--border2);
+  border-radius: var(--r);
+  padding: 7px 10px 7px 30px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--text);
+  outline: none;
+  transition: border-color .15s;
+}
+#search:focus { border-color: var(--amber); }
+#search::placeholder { color: var(--text3); }
+.tb-sep {
+  width: 1px;
+  height: 24px;
+  background: var(--border2);
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 13px;
+  border-radius: var(--r);
+  border: 1px solid var(--border2);
+  background: var(--bg3);
+  color: var(--text2);
+  font-family: var(--sans);
+  font-size: 11.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all .15s;
+  white-space: nowrap;
+}
+.btn:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }
+.btn-amber {
+  background: var(--amber);
+  color: #0b0c0f;
+  border-color: var(--amber);
+}
+.btn-amber:hover { background: var(--amber2); border-color: var(--amber2); }
+.btn-ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--text3);
+}
+.btn-ghost:hover { background: var(--bg3); color: var(--text2); border-color: var(--border2); }
+.content-wrap {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+}
+.sections-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px 80px;
+  min-width: 0;
+}
+.sections-scroll::-webkit-scrollbar { width: 5px; }
+.sections-scroll::-webkit-scrollbar-track { background: transparent; }
+.sections-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+.sec { margin-bottom: 28px; }
+.sec.sec-hidden { display: none !important; }
+.sec-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.sec-icon { font-size: 14px; }
+.sec-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--text3);
+}
+.sec-line {
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 10px;
+}
+.env-card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  padding: 12px;
+  transition: border-color .2s, background .2s;
+}
+.env-card:hover { border-color: var(--border2); }
+.env-card.hidden { display: none; }
+.env-card.selected {
+  border-color: var(--amber-glow);
+  background: linear-gradient(135deg, var(--bg2) 80%, rgba(245,166,35,.04));
+}
+.card-top {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  margin-bottom: 9px;
+}
+.card-check {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--amber);
+  flex-shrink: 0;
+  margin-top: 2px;
+  cursor: pointer;
+}
+.card-info { flex: 1; min-width: 0; }
+.card-key {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: .3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.card-lbl {
+  font-size: 11px;
+  color: var(--text3);
+  margin-top: 2px;
+  line-height: 1.35;
+}
+.badge {
+  flex-shrink: 0;
+  font-family: var(--mono);
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .6px;
+  padding: 2px 7px;
+  border-radius: 20px;
+}
+.badge-s {
+  background: rgba(240,95,95,.12);
+  color: var(--red);
+  border: 1px solid rgba(240,95,95,.25);
+}
+.badge-f {
+  background: rgba(61,214,140,.1);
+  color: var(--green);
+  border: 1px solid rgba(61,214,140,.2);
+}
+.card-input { position: relative; }
+.card-input input[type="text"],
+.card-input input[type="password"],
+.card-input input[type="number"],
+.card-input textarea,
+.card-input select {
+  width: 100%;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 7px 10px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text);
+  outline: none;
+  transition: border-color .15s;
+  resize: vertical;
+}
+.card-input input[type="text"]:focus,
+.card-input input[type="password"]:focus,
+.card-input input[type="number"]:focus,
+.card-input textarea:focus,
+.card-input select:focus {
+  border-color: var(--amber);
+}
+.card-input textarea { min-height: 64px; }
+.card-input select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238d97ad' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 28px;
+}
+.card-input optgroup { color: var(--text2); font-weight: 600; }
+.card-input option { color: var(--text); background: var(--bg3); }
+.toggle-shell { display: flex; align-items: center; gap: 8px; }
+.tog {
+  padding: 5px 14px;
+  border-radius: 20px;
+  border: 1px solid var(--border2);
+  background: var(--bg3);
+  color: var(--text3);
+  font-family: var(--mono);
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all .18s;
+  letter-spacing: .5px;
+}
+.tog.on {
+  background: rgba(61,214,140,.15);
+  border-color: rgba(61,214,140,.4);
+  color: var(--green);
+}
+.picker-shell { display: flex; flex-direction: column; gap: 6px; }
+.picker-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+.picker-select {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 28px 6px 8px !important;
+  font-size: 11px !important;
+}
+.mini-btn {
+  padding: 5px 9px;
+  border-radius: var(--r);
+  border: 1px solid var(--border2);
+  background: var(--bg3);
+  color: var(--text2);
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all .15s;
+  white-space: nowrap;
+}
+.mini-btn:hover { background: var(--bg4); color: var(--text); }
+.right-panel {
+  width: var(--panel-w);
+  flex-shrink: 0;
+  border-left: 1px solid var(--border);
+  background: var(--bg2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.panel-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.panel-scroll::-webkit-scrollbar { width: 4px; }
+.panel-scroll::-webkit-scrollbar-track { background: transparent; }
+.panel-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+.pblock {
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--r2);
+  overflow: hidden;
+}
+.pblock-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+}
+.pblock-title {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text3);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.pblock-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
+.pblock-body textarea,
+.pblock-body input[type="text"] {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 8px 10px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  color: var(--text2);
+  outline: none;
+  resize: vertical;
+  transition: border-color .15s;
+}
+.pblock-body textarea:focus,
+.pblock-body input[type="text"]:focus {
+  border-color: var(--amber);
+  color: var(--text);
+}
+#importText { min-height: 80px; }
+#bundleOut { min-height: 60px; color: var(--amber2); }
+#envLineOut { font-size: 10px; }
+.row-btns { display: flex; gap: 6px; flex-wrap: wrap; }
+#summary {
+  font-size: 11.5px;
+  color: var(--text2);
+  line-height: 1.6;
+}
+#summary strong {
+  font-size: 15px;
+  color: var(--amber);
+  font-family: var(--mono);
+}
+.sum-keys {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.sum-key {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  color: var(--text2);
+  background: var(--bg4);
+  border: 1px solid var(--border2);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+#customSec { margin-top: 8px; }
+.custom-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.custom-row input {
+  flex: 1;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  padding: 7px 10px;
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text);
+  outline: none;
+  transition: border-color .15s;
+  min-width: 0;
+}
+.custom-row input:focus { border-color: var(--amber); }
+.custom-row input:first-child { flex: 0 0 40%; }
+#toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(20px);
+  background: var(--bg4);
+  border: 1px solid var(--border2);
+  color: var(--amber);
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 9px 20px;
+  border-radius: 30px;
+  z-index: 9999;
+  opacity: 0;
+  transition: opacity .2s, transform .2s;
+  pointer-events: none;
+  box-shadow: 0 8px 32px rgba(0,0,0,.5);
+}
+#toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
+@media (max-width: 900px) {
+  :root { --panel-w: 280px; --sidebar-w: 180px; }
+}
+@media (max-width: 700px) {
+  .right-panel { display: none; }
+  :root { --sidebar-w: 160px; }
+}
+@media (max-width: 520px) {
+  .sidebar-wrap { display: none; }
+  .topbar-divider, .topbar-title { display: none; }
+}
+</style>
+</head>
+<body>
+<header class="topbar">
+  <div class="topbar-logo">
+    <span class="logo-emoji">🪽</span>
+    <span class="topbar-wordmark">Hugging<em>Mes</em></span>
+  </div>
+  <div class="topbar-divider"></div>
+  <span class="topbar-title">ENV Builder</span>
+  <div class="topbar-spacer"></div>
+  <span class="topbar-pill">v2025</span>
+</header>
+<div class="layout">
+  <aside class="sidebar-wrap">
+    <div class="sidebar-scroll">
+      <div id="sidebar"></div>
+    </div>
+  </aside>
+  <main class="main">
+    <div class="toolbar">
+      <div class="search-wrap">
+        <span class="search-icon">⌕</span>
+        <input id="search" type="text" placeholder="Search variables…" autocomplete="off" spellcheck="false">
+      </div>
+      <div class="tb-sep"></div>
+      <button id="selectCommon" class="btn">★ Common</button>
+      <button id="selectVisible" class="btn">☑ Visible</button>
+      <button id="clearAll" class="btn btn-ghost">✕ Clear</button>
+    </div>
+    <div class="content-wrap">
+      <div class="sections-scroll">
+        <div id="sections"></div>
+        <div id="customSec" class="sec" data-section="Custom Env">
+          <div class="sec-header">
+            <span class="sec-icon">🔧</span>
+            <span class="sec-title">Custom Env</span>
+            <div class="sec-line"></div>
+          </div>
+          <div id="customRows"></div>
+          <button id="addCustom" class="btn" style="margin-top:6px;">+ Add variable</button>
+        </div>
+      </div>
+      <aside class="right-panel">
+        <div class="panel-scroll">
+          <div class="pblock">
+            <div class="pblock-head">
+              <span class="pblock-title">📊 Summary</span>
+            </div>
+            <div class="pblock-body">
+              <div id="summary">No variables selected yet.</div>
+            </div>
+          </div>
+          <div class="pblock">
+            <div class="pblock-head">
+              <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>
+              <input type="text" id="envLineOut" placeholder="HUGGINGMES_ENV_BUNDLE=…" readonly spellcheck="false">
+              <div class="row-btns">
+                <button id="copyBundle" class="btn btn-amber">⎘ Bundle</button>
+                <button id="copyEnvLine" class="btn">⎘ Env Line</button>
+                <button id="copyJson" class="btn">⎘ JSON</button>
+                <button id="applyBundle" class="btn btn-ghost">↺ Apply</button>
+              </div>
+            </div>
+          </div>
+          <div class="pblock">
+            <div class="pblock-head">
+              <span class="pblock-title">📥 Import</span>
+            </div>
+            <div class="pblock-body">
+              <textarea id="importText" placeholder="Paste .env, JSON, or HUGGINGMES_ENV_BUNDLE=… here" spellcheck="false"></textarea>
+              <button id="applyImport" class="btn btn-amber" style="width:100%;">↓ Import & Apply</button>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </main>
+</div>
+<div id="toast">Copied ✓</div>
+<script src="env-builder.js"></script>
+</body>
+</html>

env-builder.js ADDED Viewed

	@@ -0,0 +1,796 @@

+// ── Model Catalogs ──
+const MODEL_CATALOGS = {
+  "LLM_MODEL": {
+    "Anthropic": [
+      "anthropic/claude-opus-4-7",
+      "anthropic/claude-opus-4-6",
+      "anthropic/claude-sonnet-4-6",
+      "anthropic/claude-sonnet-4-5",
+      "anthropic/claude-haiku-4-5",
+      "anthropic/claude-haiku-3-5"
+    ],
+    "Gemini": [
+      "gemini/gemini-2.5-pro-preview-06-05",
+      "gemini/gemini-2.5-flash-preview-05-20",
+      "gemini/gemini-2.5-flash",
+      "gemini/gemini-2.0-flash",
+      "gemini/gemini-1.5-pro",
+      "gemini/gemini-1.5-flash",
+      "google/gemini-2.5-flash",
+      "google/gemini-2.0-flash"
+    ],
+    "OpenAI": [
+      "openai/gpt-4.1",
+      "openai/gpt-4.1-mini",
+      "openai/gpt-4o",
+      "openai/gpt-4o-mini",
+      "openai/o3",
+      "openai/o4-mini",
+      "openai/o3-mini"
+    ],
+    "OpenRouter": [
+      "openrouter/anthropic/claude-opus-4-7",
+      "openrouter/anthropic/claude-sonnet-4-6",
+      "openrouter/anthropic/claude-haiku-4-5",
+      "openrouter/openai/gpt-4o",
+      "openrouter/openai/o3",
+      "openrouter/google/gemini-2.5-flash",
+      "openrouter/google/gemini-2.5-pro",
+      "openrouter/meta-llama/llama-4-maverick",
+      "openrouter/deepseek/deepseek-r1",
+      "openrouter/deepseek/deepseek-chat-v3-5",
+      "openrouter/mistralai/mistral-large"
+    ],
+    "DeepSeek": [
+      "deepseek/deepseek-chat",
+      "deepseek/deepseek-reasoner"
+    ],
+    "xAI": [
+      "xai/grok-3",
+      "xai/grok-3-mini",
+      "xai/grok-2"
+    ],
+    "HuggingFace": [
+      "huggingface/meta-llama/Llama-3.3-70B-Instruct",
+      "huggingface/meta-llama/Llama-3.1-70B-Instruct",
+      "huggingface/Qwen/Qwen2.5-72B-Instruct",
+      "huggingface/mistralai/Mistral-7B-Instruct-v0.3",
+      "huggingface/google/gemma-2-27b-it"
+    ],
+    "Moonshot / Kimi": [
+      "moonshot/moonshot-v1-128k",
+      "kimi-coding/kimi-k2-0711-preview",
+      "kimi-coding-cn/kimi-k2-0711-preview"
+    ],
+    "Alibaba": [
+      "alibaba/qwen-max",
+      "alibaba/qwen-plus",
+      "alibaba/qwen-turbo"
+    ],
+    "Minimax": [
+      "minimax/minimax-01",
+      "minimax-cn/minimax-01"
+    ],
+    "NVIDIA": [
+      "nvidia/meta/llama-3.1-70b-instruct",
+      "nvidia/meta/llama-3.3-70b-instruct"
+    ],
+    "GLM / ZAI": [
+      "zai/glm-4-plus",
+      "glm/chatglm-turbo"
+    ],
+    "Vercel AI Gateway": [
+      "vercel-ai-gateway/anthropic/claude-sonnet-4-6",
+      "vercel-ai-gateway/openai/gpt-4o"
+    ],
+    "Custom / OpenAI-compatible": [
+      "custom"
+    ]
+  }
+};
+// ── Icons per group ──
+const ICONS = {
+  "All":       "🌐",
+  "Core":      "⚡",
+  "Backup":    "💾",
+  "Telegram":  "📱",
+  "Terminal":  "💻",
+  "Providers": "🔑",
+  "Cloudflare":"☁️",
+  "Advanced":  "⚙️",
+  "Custom Env":"🔧"
+};
+// ── Field definitions ──
+const FIELDS = [
+  // ── Core ──
+  {
+    "g": "Core", "icon": "⚡",
+    "k": "GATEWAY_TOKEN",
+    "lbl": "Gateway token — protects the Hermes web UI",
+    "type": "password", "secret": 1, "common": 1
+  },
+  {
+    "g": "Core", "icon": "⚡",
+    "k": "LLM_MODEL",
+    "lbl": "Default model (provider/model-name format)",
+    "type": "model", "options_key": "LLM_MODEL",
+    "ph": "gemini/gemini-2.5-flash", "common": 1
+  },
+  {
+    "g": "Core", "icon": "⚡",
+    "k": "LLM_API_KEY",
+    "lbl": "API key for the chosen provider",
+    "type": "password", "secret": 1, "common": 1
+  },
+  // ── Backup ──
+  {
+    "g": "Backup", "icon": "💾",
+    "k": "HF_TOKEN",
+    "lbl": "HuggingFace token — enables state backup to a private dataset",
+    "type": "password", "secret": 1, "common": 1
+  },
+  {
+    "g": "Backup", "icon": "💾",
+    "k": "BACKUP_DATASET_NAME",
+    "lbl": "Name of the HF dataset used for backups",
+    "type": "text", "ph": "huggingmes-backup", "common": 1
+  },
+  {
+    "g": "Backup", "icon": "💾",
+    "k": "SYNC_INTERVAL",
+    "lbl": "Backup sync interval (seconds)",
+    "type": "number", "ph": "600"
+  },
+  // ── Telegram ──
+  {
+    "g": "Telegram", "icon": "📱",
+    "k": "TELEGRAM_BOT_TOKEN",
+    "lbl": "Telegram bot token from @BotFather",
+    "type": "password", "secret": 1, "common": 1
+  },
+  {
+    "g": "Telegram", "icon": "📱",
+    "k": "TELEGRAM_ALLOWED_USERS",
+    "lbl": "Allowed Telegram user IDs (comma-separated)",
+    "type": "text", "ph": "123456789,987654321", "common": 1
+  },
+  {
+    "g": "Telegram", "icon": "📱",
+    "k": "TELEGRAM_MODE",
+    "lbl": "Telegram update mode",
+    "type": "select",
+    "options": ["webhook", "polling"],
+    "ph": "webhook"
+  },
+  {
+    "g": "Telegram", "icon": "📱",
+    "k": "TELEGRAM_WEBHOOK_URL",
+    "lbl": "Override webhook URL (auto-detected from SPACE_HOST if blank)",
+    "type": "text", "ph": "https://your-space.hf.space/telegram"
+  },
+  {
+    "g": "Telegram", "icon": "📱",
+    "k": "TELEGRAM_BASE_URL",
+    "lbl": "Custom Telegram API base URL (for proxies)",
+    "type": "text", "ph": "https://proxy.example.com/bot"
+  },
+  // ── Terminal ──
+  {
+    "g": "Terminal", "icon": "💻",
+    "k": "DEV_MODE",
+    "lbl": "Enable JupyterLab terminal (on by default)",
+    "type": "toggle", "ph": "true", "common": 1
+  },
+  {
+    "g": "Terminal", "icon": "💻",
+    "k": "JUPYTER_TOKEN",
+    "lbl": "Override terminal password (defaults to GATEWAY_TOKEN)",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Terminal", "icon": "💻",
+    "k": "JUPYTER_ROOT_DIR",
+    "lbl": "JupyterLab root directory",
+    "type": "text", "ph": "/opt/data/workspace"
+  },
+  // ── Providers ──
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "ANTHROPIC_API_KEY",
+    "lbl": "Anthropic API key",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "OPENAI_API_KEY",
+    "lbl": "OpenAI API key",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "GOOGLE_API_KEY",
+    "lbl": "Google / Gemini API key",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "GEMINI_API_KEY",
+    "lbl": "Gemini API key (alias for GOOGLE_API_KEY)",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "OPENROUTER_API_KEY",
+    "lbl": "OpenRouter API key",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "DEEPSEEK_API_KEY",
+    "lbl": "DeepSeek API key",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "XAI_API_KEY",
+    "lbl": "xAI (Grok) API key",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "HERMES_INFERENCE_PROVIDER",
+    "lbl": "Force Hermes inference provider (overrides auto-detect)",
+    "type": "select",
+    "options": ["auto", "anthropic", "openai", "gemini", "openrouter", "huggingface", "custom", "deepseek", "xai"],
+    "ph": "auto"
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "CUSTOM_BASE_URL",
+    "lbl": "Custom OpenAI-compatible base URL",
+    "type": "text", "ph": "https://your-api.example.com/v1"
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "CUSTOM_API_KEY",
+    "lbl": "API key for the custom provider",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "CUSTOM_PROVIDER",
+    "lbl": "Provider name for custom endpoints",
+    "type": "text", "ph": "custom"
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "CUSTOM_MODEL_CONTEXT_LENGTH",
+    "lbl": "Context length for custom model",
+    "type": "number", "ph": "131072"
+  },
+  {
+    "g": "Providers", "icon": "🔑",
+    "k": "CUSTOM_MODEL_MAX_TOKENS",
+    "lbl": "Max output tokens for custom model",
+    "type": "number", "ph": "8192"
+  },
+  // ── Cloudflare ──
+  {
+    "g": "Cloudflare", "icon": "☁️",
+    "k": "CLOUDFLARE_WORKERS_TOKEN",
+    "lbl": "Cloudflare Workers API token (for Telegram proxy setup)",
+    "type": "password", "secret": 1
+  },
+  {
+    "g": "Cloudflare", "icon": "☁️",
+    "k": "CLOUDFLARE_PROXY_URL",
+    "lbl": "Cloudflare proxy URL for Telegram (if already deployed)",
+    "type": "text", "ph": "https://your-worker.your-subdomain.workers.dev"
+  },
+  {
+    "g": "Cloudflare", "icon": "☁️",
+    "k": "CLOUDFLARE_PROXY_DEBUG",
+    "lbl": "Enable Cloudflare proxy debug logging",
+    "type": "toggle", "ph": "false"
+  },
+  // ── Advanced ──
+  {
+    "g": "Advanced", "icon": "⚙️",
+    "k": "WEBHOOK_URL",
+    "lbl": "URL to POST a JSON notification on gateway (re)start",
+    "type": "text", "ph": "https://..."
+  },
+  {
+    "g": "Advanced", "icon": "⚙️",
+    "k": "GATEWAY_READY_TIMEOUT",
+    "lbl": "Seconds to wait for gateway API port before failing",
+    "type": "number", "ph": "120"
+  },
+  {
+    "g": "Advanced", "icon": "⚙️",
+    "k": "API_SERVER_PORT",
+    "lbl": "Hermes gateway internal API port",
+    "type": "number", "ph": "8642"
+  },
+  {
+    "g": "Advanced", "icon": "⚙️",
+    "k": "DASHBOARD_PORT",
+    "lbl": "Hermes dashboard internal port",
+    "type": "number", "ph": "9119"
+  },
+  {
+    "g": "Advanced", "icon": "⚙️",
+    "k": "HERMES_BACKGROUND_NOTIFICATIONS",
+    "lbl": "Background process notification level",
+    "type": "select",
+    "options": ["result", "progress", "none"],
+    "ph": "result"
+  },
+  {
+    "g": "Advanced", "icon": "⚙️",
+    "k": "TELEGRAM_WEBHOOK_SECRET",
+    "lbl": "Secret token for Telegram webhook validation (auto-generated if blank)",
+    "type": "password", "secret": 1
+  }
+];
+// ── Runtime (shared with HuggingClaw env-builder) ──
+const BUNDLE_KEY = 'HUGGINGMES_ENV_BUNDLE';
+const $ = id => document.getElementById(id);
+const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({
+  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
+}[c]));
+const safeKey = k => /^[A-Z_][A-Z0-9_]*$/.test(k) && ![BUNDLE_KEY, 'ENV_BUNDLE'].includes(k);
+function encodeBundle(obj) {
+  const j = JSON.stringify(obj);
+  let b = '';
+  for (const x of new TextEncoder().encode(j)) b += String.fromCharCode(x);
+  return btoa(b).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+}
+function decodeBundle(raw) {
+  try {
+    raw = String(raw || '').trim();
+    if (!raw) return {};
+    if (raw.includes(BUNDLE_KEY + '=')) raw = raw.split(BUNDLE_KEY + '=').pop().trim();
+    if ((raw.startsWith('"') && raw.endsWith('"')) || (raw.startsWith("'") && raw.endsWith("'"))) raw = raw.slice(1, -1);
+    if (raw.startsWith('{')) return JSON.parse(raw);
+    const p = raw + '='.repeat((4 - raw.length % 4) % 4);
+    const b = atob(p.replace(/-/g, '+').replace(/_/g, '/'));
+    const bytes = Uint8Array.from(b, c => c.charCodeAt(0));
+    return JSON.parse(new TextDecoder().decode(bytes));
+  } catch { return {}; }
+}
+function parseEnv(text) {
+  text = String(text || '').trim();
+  if (!text) return {};
+  if (text.startsWith('{') || /^[A-Za-z0-9_-]{20,}$/.test(text) || text.includes(BUNDLE_KEY + '=')) {
+    return decodeBundle(text);
+  }
+  const out = {};
+  for (let line of text.split(/\r?\n/)) {
+    line = line.trim();
+    if (!line || line.startsWith('#')) continue;
+    if (line.startsWith('export ')) line = line.slice(7).trim();
+    const i = line.indexOf('=');
+    if (i < 1) continue;
+    const key = line.slice(0, i).trim();
+    let val = line.slice(i + 1).trim();
+    if ((val.startsWith('"') && val.endsWith('"')) || (val.startsWith("'") && val.endsWith("'"))) val = val.slice(1, -1);
+    if (safeKey(key)) out[key] = val;
+  }
+  return out;
+}
+function showToast(msg = 'Copied!') {
+  const t = $('toast');
+  t.textContent = msg;
+  t.classList.add('show');
+  setTimeout(() => t.classList.remove('show'), 1500);
+}
+let activeGroup = 'All';
+let customCount = 0;
+const GROUPS = ['All', ...[...new Set(FIELDS.map(f => f.g))], 'Custom Env'];
+function renderSidebar() {
+  const sb = $('sidebar');
+  sb.innerHTML = '<div class="sb-label">Groups</div>';
+  GROUPS.forEach(g => {
+    const btn = document.createElement('button');
+    btn.className = 'nav-btn' + (activeGroup === g ? ' active' : '');
+    btn.dataset.group = g;
+    const id = 'nc_' + g.replace(/\W/g, '_');
+    btn.innerHTML = `<span class="nav-icon">${ICONS[g] || '📁'}</span><span class="nav-label">${esc(g)}</span><span class="nav-count" id="${id}">0</span>`;
+    btn.onclick = () => { activeGroup = g; renderSidebar(); filter(); };
+    sb.appendChild(btn);
+  });
+}
+function renderOptionsHTML(field) {
+  if (field.options_key === 'LLM_MODEL') {
+    const groups = MODEL_CATALOGS.LLM_MODEL || {};
+    return Object.entries(groups).map(([group, items]) => {
+      const options = items.map(v => `<option value="${esc(v)}">${esc(v)}</option>`).join('');
+      return `<optgroup label="${esc(group)}">${options}</optgroup>`;
+    }).join('');
+  }
+  const src = field.options || MODEL_CATALOGS[field.options_key] || [];
+  if (Array.isArray(src)) return src.map(v => `<option value="${esc(v)}">${esc(v)}</option>`).join('');
+  return '';
+}
+function defaultValueFor(field) {
+  if (field.type === 'toggle') {
+    const on = String(field.ph ?? '').toLowerCase();
+    return ['1', 'true', 'yes', 'on', 'enabled'].includes(on) ? 'true' : 'false';
+  }
+  if (field.type === 'select') return String(field.ph ?? '');
+  return '';
+}
+function valueControlHTML(field) {
+  const key = esc(field.k);
+  const placeholder = esc(field.ph || field.lbl || '');
+  const isSecret = !!field.secret;
+  const isTextarea = field.type === 'textarea';
+  const hasPicker = !!field.options_key || Array.isArray(field.options);
+  const inputType = isSecret ? 'password' : (field.type === 'number' ? 'number' : 'text');
+  let control = '';
+  if (field.type === 'toggle') {
+    const initial = defaultValueFor(field);
+    control = `<div class="toggle-shell" data-toggle-row="1" data-field="${key}">
+      <input type="hidden" data-key="${key}" value="${initial}">
+      <button type="button" class="tog ${initial === 'true' ? 'on' : ''}" data-toggle="${key}">${initial === 'true' ? 'On' : 'Off'}</button>
+    </div>`;
+  } else if (isTextarea) {
+    control = `<textarea data-key="${key}" placeholder="${placeholder}" spellcheck="false"></textarea>`;
+  } else {
+    control = `<input type="${inputType}" data-key="${key}" placeholder="${placeholder}" spellcheck="false"/>`;
+  }
+  if (!hasPicker) return control;
+  return `<div class="picker-shell" data-picker-shell="${key}" data-picker-mode="single">
+    <div class="picker-row">
+      <select class="picker-select" data-pick-for="${key}" aria-label="${esc(field.lbl || field.k)} presets">
+        <option value="">Choose preset…</option>
+        ${renderOptionsHTML(field)}
+        <option value="__custom__">Custom…</option>
+      </select>
+      <button type="button" class="mini-btn" data-custom-for="${key}">+ Custom</button>
+      <button type="button" class="mini-btn" data-clear-for="${key}">Clear</button>
+    </div>
+    ${control}
+  </div>`;
+}
+function cardHTML(f) {
+  const badge = f.secret
+    ? '<span class="badge badge-s">secret</span>'
+    : '<span class="badge badge-f">safe</span>';
+  return `<div class="env-card" data-row data-group="${esc(f.g)}" data-search="${esc((f.g + ' ' + f.k + ' ' + (f.lbl || '')).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">
+        <div class="card-key">${esc(f.k)}</div>
+        <div class="card-lbl">${esc(f.lbl || '')}</div>
+      </div>
+      ${badge}
+    </div>
+    <div class="card-input">${valueControlHTML(f)}</div>
+  </div>`;
+}
+function addCustomRow(key = '', val = '', enabled = false) {
+  const id = customCount++;
+  const row = document.createElement('div');
+  row.className = 'custom-row';
+  row.dataset.customRow = id;
+  row.dataset.enabled = enabled ? '1' : '0';
+  row.innerHTML = `
+    <input data-ck="${id}" placeholder="CUSTOM_ENV_NAME" value="${esc(key)}">
+    <input data-cv="${id}" placeholder="value" value="${esc(val)}">
+    <button class="tog${enabled ? ' on' : ''}">${enabled ? 'On' : 'Off'}</button>`;
+  $('customRows').appendChild(row);
+  row.querySelectorAll('input').forEach(el => el.addEventListener('input', refresh));
+  row.querySelector('button').onclick = () => {
+    const on = row.dataset.enabled !== '1';
+    row.dataset.enabled = on ? '1' : '0';
+    row.querySelector('button').textContent = on ? 'On' : 'Off';
+    row.querySelector('button').classList.toggle('on', on);
+    refresh();
+  };
+}
+function getFieldValueInput(key) { return document.querySelector(`[data-key="${CSS.escape(key)}"]`); }
+function setFieldValue(key, value) {
+  const el = getFieldValueInput(key);
+  if (el) el.value = value ?? '';
+}
+function appendCsvValue(existing, next) {
+  const parts = String(existing || '').split(',').map(s => s.trim()).filter(Boolean);
+  const val = String(next || '').trim();
+  if (!val) return parts.join(', ');
+  if (!parts.includes(val)) parts.push(val);
+  return parts.join(', ');
+}
+function collect() {
+  const obj = {};
+  document.querySelectorAll('[data-key]').forEach(el => {
+    const key = el.dataset.key;
+    if (!key || !safeKey(key)) return;
+    const chk = document.querySelector(`[data-check="${CSS.escape(key)}"]`);
+    if (!chk || !chk.checked) return;
+    const val = String(el.value ?? '').trim();
+    if (val) obj[key] = val;
+  });
+  document.querySelectorAll('[data-custom-row]').forEach(row => {
+    const id = row.dataset.customRow;
+    const key = (row.querySelector(`[data-ck="${id}"]`)?.value || '').trim();
+    const val = (row.querySelector(`[data-cv="${id}"]`)?.value || '').trim();
+    if (row.dataset.enabled === '1' && safeKey(key) && val) obj[key] = val;
+  });
+  return obj;
+}
+function refresh() {
+  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 ? `${BUNDLE_KEY}=${bundle}` : '';
+  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>`;
+  } else {
+    s.innerHTML = 'No variables selected yet.';
+  }
+  updateCounts();
+}
+function markSelected() {
+  document.querySelectorAll('[data-row]').forEach(r => r.classList.toggle('selected', !!r.querySelector('[data-check]')?.checked));
+}
+function updateCounts() {
+  document.querySelectorAll('[id^="nc_"]').forEach(el => el.textContent = '0');
+  const byGrp = {};
+  document.querySelectorAll('[data-check]:checked').forEach(ch => {
+    const g = ch.closest('[data-row]')?.dataset.group;
+    if (g) byGrp[g] = (byGrp[g] || 0) + 1;
+  });
+  const custOn = document.querySelectorAll('[data-custom-row][data-enabled="1"]').length;
+  const total = Object.values(byGrp).reduce((a, b) => a + b, 0) + custOn;
+  const allEl = document.getElementById('nc_All'); if (allEl) allEl.textContent = total;
+  Object.entries(byGrp).forEach(([g, c]) => {
+    const el = document.getElementById('nc_' + g.replace(/\W/g, '_'));
+    if (el) el.textContent = c;
+  });
+  const custEl = document.getElementById('nc_Custom_Env'); if (custEl) custEl.textContent = custOn;
+}
+function filter() {
+  const q = $('search').value.trim().toLowerCase();
+  document.querySelectorAll('.sec[data-section]').forEach(sec => {
+    const grp = sec.dataset.section;
+    const gMatch = activeGroup === 'All' || activeGroup === grp;
+    if (!gMatch) { sec.classList.add('sec-hidden'); return; }
+    let any = false;
+    sec.querySelectorAll('[data-row]').forEach(card => {
+      const m = !q || card.dataset.search.includes(q);
+      card.classList.toggle('hidden', !m);
+      if (m) any = true;
+    });
+    sec.classList.toggle('sec-hidden', !any);
+  });
+  const cs = $('customSec');
+  if (cs) cs.style.display = (activeGroup === 'All' || activeGroup === 'Custom Env') ? '' : 'none';
+  document.querySelectorAll('.nav-btn').forEach(b => b.classList.toggle('active', b.dataset.group === activeGroup));
+}
+function clearForm() {
+  document.querySelectorAll('[data-check]').forEach(c => c.checked = false);
+  document.querySelectorAll('[data-key]').forEach(el => {
+    if (el.closest('[data-toggle-row]')) {
+      el.value = 'false';
+      const btn = el.closest('.toggle-shell')?.querySelector('[data-toggle]');
+      if (btn) { btn.textContent = 'Off'; btn.classList.remove('on'); }
+      return;
+    }
+    el.value = '';
+  });
+  $('customRows').innerHTML = '';
+  customCount = 0;
+  addCustomRow();
+}
+function applyObj(obj, replace = false) {
+  if (replace) clearForm();
+  for (const [key, val] of Object.entries(obj || {})) {
+    if (!safeKey(key)) continue;
+    const inp = getFieldValueInput(key);
+    const chk = document.querySelector(`[data-check="${CSS.escape(key)}"]`);
+    if (inp && chk) {
+      inp.value = val;
+      chk.checked = true;
+      const btn = inp.closest('[data-toggle-row]')?.querySelector('[data-toggle]');
+      if (btn) {
+        const on = String(val).trim().toLowerCase() === 'true';
+        btn.textContent = on ? 'On' : 'Off';
+        btn.classList.toggle('on', on);
+        inp.value = on ? 'true' : 'false';
+      }
+    } else {
+      addCustomRow(key, val, true);
+    }
+  }
+  markSelected(); filter(); refresh();
+}
+function autoCheck(key) {
+  const chk = document.querySelector(`[data-check="${CSS.escape(key)}"]`);
+  if (chk && !chk.checked) { chk.checked = true; markSelected(); }
+}
+function handlePickerChange(sel) {
+  const key = sel.dataset.pickFor;
+  const value = sel.value;
+  if (!key || !value || value === '__custom__') { if (value === '__custom__') sel.value = ''; return; }
+  const inp = getFieldValueInput(key);
+  if (!inp) return;
+  inp.value = value;
+  sel.value = '';
+  autoCheck(key);
+  refresh();
+}
+function promptCustomModel(btn) {
+  const key = btn.dataset.customFor;
+  const inp = getFieldValueInput(key);
+  if (!inp) return;
+  const text = prompt('Enter a custom value', '');
+  if (text === null) return;
+  const val = String(text).trim();
+  if (!val) return;
+  inp.value = val;
+  autoCheck(key);
+  refresh();
+}
+function resetPickerField(btn) {
+  const key = btn.dataset.clearFor;
+  const inp = getFieldValueInput(key);
+  if (!inp) return;
+  if (inp.closest('[data-toggle-row]')) {
+    inp.value = 'false';
+    const toggleBtn = inp.closest('.toggle-shell')?.querySelector('[data-toggle]');
+    if (toggleBtn) { toggleBtn.textContent = 'Off'; toggleBtn.classList.remove('on'); }
+  } else {
+    inp.value = '';
+  }
+  refresh();
+}
+function toggleField(key) {
+  const inp = getFieldValueInput(key);
+  if (!inp) return;
+  const on = String(inp.value || '').trim().toLowerCase() !== 'true';
+  inp.value = on ? 'true' : 'false';
+  const btn = inp.closest('.toggle-shell')?.querySelector('[data-toggle]');
+  if (btn) { btn.textContent = on ? 'On' : 'Off'; btn.classList.toggle('on', on); }
+  const chk = document.querySelector(`[data-check="${CSS.escape(key)}"]`);
+  if (chk) { chk.checked = on; markSelected(); }
+  refresh();
+}
+function bindFieldEvents() {
+  document.querySelectorAll('[data-check]').forEach(el => el.addEventListener('change', () => { 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)));
+  document.querySelectorAll('[data-custom-for]').forEach(btn => btn.addEventListener('click', () => promptCustomModel(btn)));
+  document.querySelectorAll('[data-clear-for]').forEach(btn => btn.addEventListener('click', () => resetPickerField(btn)));
+}
+function renderSections() {
+  const grouped = {};
+  FIELDS.forEach(f => { (grouped[f.g] ||= []).push(f); });
+  const wrap = $('sections');
+  wrap.innerHTML = '';
+  Object.entries(grouped).forEach(([grp, items]) => {
+    const sec = document.createElement('div');
+    sec.className = 'sec';
+    sec.dataset.section = grp;
+    sec.innerHTML = `<div class="sec-header">
+      <span class="sec-icon">${ICONS[grp] || '📁'}</span>
+      <span class="sec-title">${esc(grp)}</span>
+      <div class="sec-line"></div>
+    </div>
+    <div class="cards">${items.map(cardHTML).join('')}</div>`;
+    wrap.appendChild(sec);
+  });
+  bindFieldEvents();
+}
+function copyText(text) {
+  return navigator.clipboard.writeText(text).then(
+    () => showToast('Copied ✓'),
+    () => {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.style.position = 'fixed';
+      ta.style.left = '-9999px';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      ta.remove();
+      showToast('Copied ✓');
+    }
+  );
+}
+// ��─ Init ──
+renderSidebar();
+renderSections();
+addCustomRow();
+filter();
+refresh();
+// ── Events ──
+$('search').oninput = filter;
+$('selectCommon').onclick = () => {
+  document.querySelectorAll('[data-common="1"]').forEach(c => c.checked = true);
+  markSelected(); refresh();
+};
+$('selectVisible').onclick = () => {
+  document.querySelectorAll('.sec:not(.sec-hidden) [data-row]:not(.hidden) [data-check]').forEach(c => c.checked = true);
+  markSelected(); refresh();
+};
+$('clearAll').onclick = () => { clearForm(); markSelected(); filter(); refresh(); };
+$('applyImport').onclick = () => {
+  try { applyObj(parseEnv($('importText').value), true); showToast('Imported ✓'); }
+  catch (e) { showToast('Import failed'); alert(e.message); }
+};
+$('importText').addEventListener('paste', () => {
+  setTimeout(() => {
+    try {
+      const val = $('importText').value.trim();
+      if (!val) return;
+      applyObj(parseEnv(val), true);
+      showToast('Auto-imported ✓');
+    } catch (e) { showToast('Import failed'); }
+  }, 0);
+});
+$('importText').addEventListener('input', () => {
+  const val = $('importText').value.trim();
+  if (!val) return;
+  const looksLikeEnv = val.includes('=') || val.startsWith('{') || /^[A-Za-z0-9_\-]{20,}$/.test(val);
+  if (looksLikeEnv) {
+    try { applyObj(parseEnv(val), true); } catch (e) { /* silent */ }
+  }
+});
+$('addCustom').onclick = () => addCustomRow();
+$('applyBundle').onclick = () => {
+  try { applyObj(decodeBundle($('bundleOut').value), true); showToast('Bundle applied ✓'); }
+  catch (e) { showToast('Invalid bundle'); }
+};
+$('copyBundle').onclick = () => copyText($('bundleOut').value);
+$('copyEnvLine').onclick = () => copyText($('envLineOut').value);
+$('copyJson').onclick = () => copyText(JSON.stringify(collect(), null, 2));

health-server.js CHANGED Viewed

@@ -537,6 +537,7 @@ function renderDashboard(data) {
     <div class="hero-buttons">
       <a class="hero-action" href="${APP_BASE}/" target="_blank" rel="noopener noreferrer">Open Hermes Agent →</a>
       <a class="hero-action secondary" href="/terminal/" target="_blank" rel="noopener noreferrer">Open Terminal →</a>
     </div>
     <section class="overview">
       ${tiles}
@@ -588,6 +589,30 @@ const server = http.createServer(async (req, res) => {
     return;
   }
   if (path === "/") {
     const data = await statusPayload();
     res.writeHead(200, { "content-type": "text/html; charset=utf-8" });

     <div class="hero-buttons">
       <a class="hero-action" href="${APP_BASE}/" target="_blank" rel="noopener noreferrer">Open Hermes Agent →</a>
       <a class="hero-action secondary" href="/terminal/" target="_blank" rel="noopener noreferrer">Open Terminal →</a>
+      <a class="hero-action secondary" href="/env-builder" target="_blank" rel="noopener noreferrer">ENV Builder →</a>
     </div>
     <section class="overview">
       ${tiles}
     return;
   }
+  if (path === "/env-builder" || path === "/env-builder/") {
+    try {
+      const html = fs.readFileSync(require("path").join(__dirname, "env-builder.html"), "utf8");
+      res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+      res.end(html);
+    } catch (e) {
+      res.writeHead(404, { "content-type": "text/plain" });
+      res.end("env-builder.html not found");
+    }
+    return;
+  }
+  if (path === "/env-builder.js") {
+    try {
+      const js = fs.readFileSync(require("path").join(__dirname, "env-builder.js"), "utf8");
+      res.writeHead(200, { "content-type": "application/javascript; charset=utf-8" });
+      res.end(js);
+    } catch (e) {
+      res.writeHead(404, { "content-type": "text/plain" });
+      res.end("env-builder.js not found");
+    }
+    return;
+  }
   if (path === "/") {
     const data = await statusPayload();
     res.writeHead(200, { "content-type": "text/html; charset=utf-8" });