bareloop 0.31.0 → 0.32.0

package/src/panel/index.html

@@ -330,12 +330,9 @@
   .expand-field:focus{height:52px;white-space:normal;}
   .radio-row{display:flex;gap:14px;align-items:center;margin-bottom:10px;}
   .radio-row label{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text);margin:0;text-transform:none;}
-  .cap-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:6px;}
+  .cap-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-bottom:6px;}
   .cap-field label{display:block;font-size:11px;font-weight:700;color:var(--text-dim);margin-bottom:1px;}
   .cap-field input{width:100%;padding:5px 6px;box-sizing:border-box;}
-  @media (max-width: 899px){
-    .cap-row{grid-template-columns:1fr;}
-  }
   .btn.primary{background:var(--primary-bg);color:var(--primary-text);border-color:var(--primary-border);font-weight:700;}
   .btn.primary::before,.btn.primary::after{color:var(--primary-text);opacity:0.6;}
   .btn:disabled{opacity:0.5;cursor:not-allowed;}
@@ -377,6 +374,32 @@
   .actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:stretch;}
   .actions-row > .btn{flex:1 1 auto;}
 
+  /* Settings view (P4a) — same tokens as the rest of the page; the mockup's settings styles */
+  .settings-view{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;}
+  .settings-header{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:2px solid var(--border-strong);background:var(--panel);}
+  .settings-header h2{margin:0;font-size:15px;display:inline;}
+  .settings-header h2::before{content:"┤ ";color:var(--text-faint);}
+  .settings-header h2::after{content:" ├";color:var(--text-faint);}
+  .money-strip{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;align-items:end;padding:10px;border:1px solid var(--border-strong);background:var(--panel2);}
+  .money-item{min-width:0;}
+  .money-item label{display:block;font-size:11px;font-weight:700;color:var(--text-dim);margin-bottom:2px;}
+  .money-value{font-size:16px;font-weight:700;padding:6px 0;overflow-wrap:anywhere;}
+  .money-item input{width:100%;height:44px;box-sizing:border-box;}
+  .keyfile-strip{position:relative;border:1px solid var(--border-strong);padding:12px 12px 8px;background:var(--panel2);margin:14px 0;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
+  .keyfile-strip::before{content:"┤ KEYS ├";position:absolute;top:-9px;left:10px;background:var(--panel2);padding:0 4px;font-size:11px;color:var(--text-faint);letter-spacing:0.08em;}
+  .keyfile-strip-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:220px;}
+  .keyfile-strip-actions{display:flex;gap:6px;flex:none;}
+  .keyfile-strip code{background:var(--bg);border:1px solid var(--border-strong);padding:1px 5px;font-size:11px;color:var(--amber);overflow-wrap:anywhere;}
+  .pv-table td,.pv-table th{white-space:nowrap;vertical-align:top;}
+  .pv-table select,.pv-table input{min-height:32px;max-width:190px;box-sizing:border-box;}
+  .pv-table .hint{display:block;margin-top:3px;}
+  /* the Test cell keeps ONE width whatever the result says ("testing…", "OK · 312 ms", a long failure note) */
+  .pv-table td.pv-test-cell{width:180px;min-width:180px;max-width:180px;}
+  .pv-table .pv-test-result{white-space:normal;overflow-wrap:anywhere;}
+  .table-wrap{overflow-x:auto;border:1px solid var(--border-strong);background:var(--panel2);max-width:100%;}
+  @media (max-width: 899px){
+    .money-strip{grid-template-columns:1fr 1fr;}
+  }
   @media (max-width: 899px){
     .main{flex-direction:column;}
     .left-pane{width:100%;border-right:none;border-bottom:1px solid var(--border-strong);}
@@ -402,6 +425,7 @@
     </div>
     <div class="topbar-right">
       <span class="hint" id="host-line"></span>
+      <button class="btn small" type="button" id="btn-settings" data-testid="btn-settings">&#9881; Settings</button>
       <button class="theme-toggle" id="theme-toggle" type="button" aria-label="Toggle light/dark theme">&#9789;</button>
     </div>
   </header>
@@ -431,10 +455,7 @@
             </div>
             <div class="field">
               <label for="jf-model">Model</label>
-              <select id="jf-model">
-                <option value="claude-sonnet-5">claude-sonnet-5 · Anthropic</option>
-                <option value="deepseek-flash">deepseek-flash · DeepSeek</option>
-              </select>
+              <select id="jf-model" data-testid="jf-model"></select>
               <!-- build item 5 (2026-09-28) — ONE line under Model, not two:
                    key + reachability collapsed into a single readiness read. -->
               <div class="jf-readiness unknown" id="jf-model-status" data-testid="jf-model-status"></div>
@@ -472,15 +493,12 @@
               <div class="cap-field">
                 <label for="jf-cap-money">Cap $</label>
                 <input id="jf-cap-money" type="text">
+                <div class="hint" id="jf-cap-note" data-testid="cap-note"></div>
               </div>
               <div class="cap-field">
                 <label for="jf-cap-time">Time cap (min)</label>
                 <input id="jf-cap-time" type="text" placeholder="or blank = no wall">
               </div>
-              <div class="cap-field">
-                <label for="jf-price">Token price $</label>
-                <input id="jf-price" type="text" placeholder="est." disabled>
-              </div>
             </div>
             <button class="btn primary" type="button" id="chat-start-btn" data-testid="chat-start" disabled>Start drafting</button>
             <div class="hint" id="chat-card-error" data-testid="chat-card-error"></div>
@@ -620,6 +638,74 @@
 
   </div>
 
+  <!-- SETTINGS VIEW (P4a) — reads/writes ~/.config/bareloop/config.json through
+       /api/settings/*; every call carries the per-start token. -->
+  <section class="settings-view" id="settings-view" aria-label="Settings" hidden>
+    <div class="settings-header">
+      <button class="btn small" type="button" id="settings-back" data-testid="settings-back">&larr; Back</button>
+      <h2>Settings</h2>
+    </div>
+
+    <div class="tabrow" role="tablist" aria-label="Settings views">
+      <button role="tab" id="tab-providers" aria-controls="panel-providers" aria-selected="true" data-testid="settings-tab-providers">Providers</button>
+      <button role="tab" id="tab-money" aria-controls="panel-money" aria-selected="false" data-testid="settings-tab-money">Money &amp; limits</button>
+    </div>
+
+    <div class="pane-body">
+      <!-- PROVIDERS TAB (P4b: one row per key in the keys file that has a value) -->
+      <section id="panel-providers" class="tabpanel active" role="tabpanel" aria-labelledby="tab-providers">
+        <div class="keyfile-strip" data-testid="keyfile-box">
+          <div class="keyfile-strip-main">
+            <span>Put <code>NAME=key</code> lines in <code id="pv-keyfile-path">~/.config/bareloop/.env</code>, then Reload keys — every key that has a value gets a row. Only names are listed; keys never reach this page.</span>
+            <span class="hint" id="pv-keyfile-note" data-testid="keyfile-warning"></span>
+          </div>
+          <div class="keyfile-strip-actions">
+            <button class="btn small" type="button" id="btn-reload-keys" data-testid="btn-reload-keys">Reload keys</button>
+          </div>
+        </div>
+        <div class="table-wrap" data-testid="provider-table-wrap">
+          <table class="pv-table" data-testid="provider-table">
+            <thead>
+              <tr><th>Key</th><th>Name</th><th>API shape</th><th>Base URL</th><th>Test</th><th>Tokens used</th><th>Balance</th></tr>
+            </thead>
+            <tbody id="pv-rows"></tbody>
+          </table>
+        </div>
+        <div id="pv-shell" data-testid="pv-shell"></div>
+        <div class="hint" id="pv-note" data-testid="pv-note" style="margin-top:6px;">Name is the model id Chat uses. Base URL blank = the API shape's own host. Test asks the provider for its model list — it costs nothing.</div>
+      </section>
+
+      <!-- MONEY & LIMITS TAB -->
+      <section id="panel-money" class="tabpanel" role="tabpanel" aria-labelledby="tab-money" hidden>
+        <div class="money-strip" data-testid="money-strip">
+          <div class="money-item">
+            <label>$ month / to date</label>
+            <div class="money-value" id="ml-usd" data-testid="ml-usd">…</div>
+          </div>
+          <div class="money-item">
+            <label>Tokens month / to date</label>
+            <div class="money-value" id="ml-tokens" data-testid="ml-tokens">…</div>
+          </div>
+          <div class="money-item">
+            <label for="ml-money">Monthly money limit ($)</label>
+            <input id="ml-money" type="text" placeholder="blank = no limit" data-testid="ml-money">
+          </div>
+        </div>
+        <div class="hint" id="ml-note" data-testid="ml-note" style="margin-top:6px;">Limits are yours. The agent can never change them. A run whose cap is more than what is left this month does not start.</div>
+
+        <h4 style="margin-top:20px;font-size:13px;">Per-provider breakdown</h4>
+        <div class="table-wrap">
+          <table data-testid="provider-breakdown-table">
+            <thead>
+              <tr><th>Provider</th><th>$ month / to date</th><th>minutes month / to date</th><th>tokens</th></tr>
+            </thead>
+            <tbody id="ml-breakdown"></tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  </section>
+
 </div>
 
 <script>
@@ -2672,6 +2758,156 @@
     });
   })();
 
+  // ---- Settings view (PANEL-BUILD.md P4a) ----
+  (function(){
+    var mainView = document.getElementById("main-view");
+    var settingsView = document.getElementById("settings-view");
+    var limitInput = document.getElementById("ml-money");
+    var noteEl = document.getElementById("ml-note");
+    var NOTE_DEFAULT = noteEl.textContent;
+    // table cells: an "at least" figure keeps its marker as a "≥" prefix on that number — never dropped
+    function moneyCell(n, atLeast){ return (atLeast ? "≥" : "") + panelMoney(n); }
+    // wall minutes: "unknown" when no run had a known wall (never a clean 0); 1 decimal under 100, else a whole number with a thousands separator
+    function minutesCell(ms, atLeast){
+      if(ms === null || ms === undefined) return "unknown";
+      var m = ms / 60000;
+      var txt = m < 100 ? m.toFixed(1) : Math.round(m).toLocaleString("en-US");
+      return (atLeast ? "≥" : "") + txt + " min";
+    }
+    var keepNote = false;
+    function loadMoney(){
+      authorGet("/api/settings/money").then(function(r){
+        if(!r || !r.ok){ noteEl.textContent = "could not read your spend"; return; }
+        document.getElementById("ml-usd").textContent = moneyCell(r.monthUsd, r.monthAtLeast) + " / " + moneyCell(r.totalUsd, r.totalAtLeast);
+        document.getElementById("ml-tokens").textContent = tokensText(r.monthTokens) + " / " + tokensText(r.totalTokens);
+        if(document.activeElement !== limitInput){
+          limitInput.value = r.monthlyLimitUsd === null ? "" : r.monthlyLimitUsd.toFixed(2);
+        }
+        var rows = r.byProvider.map(function(p){
+          return "<tr><td>" + escapeXml(p.label)
+            + "</td><td>" + escapeXml(moneyCell(p.monthUsd, p.monthAtLeast) + " / " + moneyCell(p.totalUsd, p.totalAtLeast))
+            + "</td><td>" + escapeXml(minutesCell(p.monthWallMs, p.monthWallAtLeast) + " / " + minutesCell(p.totalWallMs, p.totalWallAtLeast))
+            + "</td><td>" + escapeXml(tokensText(p.tokens)) + "</td></tr>";
+        }).join("");
+        document.getElementById("ml-breakdown").innerHTML = rows || '<tr><td colspan="4" class="hint">no runs yet</td></tr>';
+        if(keepNote){ keepNote = false; return; }
+        noteEl.textContent = r.configProblem ? r.configProblem : NOTE_DEFAULT;
+      }).catch(function(){ noteEl.textContent = "could not read your spend"; });
+    }
+    document.getElementById("btn-settings").addEventListener("click", function(){
+      mainView.hidden = true;
+      settingsView.hidden = false;
+      loadProviders();
+      loadMoney();
+    });
+    document.getElementById("settings-back").addEventListener("click", function(){
+      settingsView.hidden = true;
+      mainView.hidden = false;
+    });
+    document.getElementById("tab-money").addEventListener("click", loadMoney);
+
+    // ---- Providers tab (P4b): one row per key in the keys file that has a value ----
+    var pvRows = document.getElementById("pv-rows");
+    var pvNote = document.getElementById("pv-note");
+    var PV_NOTE_DEFAULT = pvNote.textContent;
+    function tokensText(n){
+      if(!n) return "0";
+      if(n >= 1e6) return (n / 1e6).toFixed(1) + "M";
+      if(n >= 1e3) return (n / 1e3).toFixed(1) + "k";
+      return String(n);
+    }
+    function loadProviders(){
+      authorGet("/api/settings/providers").then(function(r){
+        if(!r || !r.ok){ pvNote.textContent = "could not read providers"; return; }
+        var kf = r.keysFile;
+        document.getElementById("pv-keyfile-path").textContent = kf.path;
+        document.getElementById("pv-keyfile-note").textContent = kf.warning ? ("⚠ " + kf.warning) : "";
+        pvRows.innerHTML = r.rows.length ? r.rows.map(function(row){
+          var e = escapeXml(row.envName);
+          var shapeOpts = r.shapes.map(function(s){
+            return '<option value="' + escapeXml(s.id) + '"' + (s.id === row.shape ? " selected" : "") + ">" + escapeXml(s.label) + "</option>";
+          }).join("");
+          var bal = row.balance.kind === "note"
+            ? '<input type="text" class="pv-balance" placeholder="type by hand" value="' + (row.balance.usd === null ? "" : escapeXml(row.balance.usd.toFixed(2))) + '"><div class="hint">a note, never checked</div>'
+            : (row.balance.kind === "fetch" ? '<span class="pv-balance-fetch" data-env="' + e + '">…</span>' : "—");
+          return '<tr data-testid="provider-row-' + e + '" data-env="' + e + '">'
+            + "<td><code>" + e + "</code>"
+            + '<div class="hint" data-testid="pv-status-' + e + '">' + escapeXml(row.keyStatus) + "</div></td>"
+            + '<td><input type="text" class="pv-name" data-testid="pv-name-' + e + '" placeholder="model id" value="' + escapeXml(row.name) + '"></td>'
+            + '<td><select class="pv-shape" data-testid="pv-shape-' + e + '">' + shapeOpts + "</select></td>"
+            + '<td><input type="text" class="pv-url" data-testid="pv-url-' + e + '" placeholder="' + escapeXml(row.placeholder || "the shape\'s own host") + '" value="' + escapeXml(row.baseUrl) + '"></td>'
+            + '<td class="pv-test-cell">' + (row.canTest
+              ? '<button class="btn small pv-test" type="button" data-testid="test-connection-' + e + '">Test</button><div class="hint pv-test-result" data-testid="test-result-' + e + '"></div>'
+              : '<span class="hint">not available</span>') + "</td>"
+            + '<td data-testid="pv-tokens-' + e + '">' + escapeXml(tokensText(row.tokens)) + "</td>"
+            + "<td>" + bal + "</td></tr>";
+        }).join("") : '<tr><td colspan="7" class="hint" data-testid="pv-empty">no keys with a value yet — add NAME=key to the keys file, then Reload keys</td></tr>';
+        pvRows.querySelectorAll(".pv-balance-fetch").forEach(function(fetchEl){
+          authorGet("/api/settings/providers/balance?env=" + encodeURIComponent(fetchEl.getAttribute("data-env"))).then(function(b){
+            fetchEl.textContent = b && b.text ? b.text : ("— " + ((b && b.note) || "unavailable"));
+          }).catch(function(){ fetchEl.textContent = "— unavailable"; });
+        });
+        // a key exported only in the shell has no row: say so, by NAME, once per name
+        document.getElementById("pv-shell").innerHTML = (r.shellOnly || []).map(function(n){
+          return '<div class="hint" data-testid="pv-shell-' + escapeXml(n) + '">' + escapeXml(n) + " is set in your shell but not in ~/.config/bareloop/.env — add it there to use it here and in Chat.</div>";
+        }).join("");
+        pvNote.textContent = r.configProblem ? r.configProblem : PV_NOTE_DEFAULT;
+        document.dispatchEvent(new CustomEvent("bareloop-providers-changed"));
+      }).catch(function(){ pvNote.textContent = "could not read providers"; });
+    }
+    pvRows.addEventListener("change", function(e){
+      var t = e.target;
+      var tr = t.closest("tr");
+      if(!tr) return;
+      if(t.classList.contains("pv-balance")){
+        authorPost("/api/settings/providers/balance-note", { usd: t.value.trim() === "" ? null : t.value.trim() }).then(function(r){
+          pvNote.textContent = r.body && r.body.ok ? "Saved — balance note." : ((r.body && r.body.error) || "could not save");
+        }).catch(function(){ pvNote.textContent = "could not save"; });
+        return;
+      }
+      if(!(t.classList.contains("pv-name") || t.classList.contains("pv-shape") || t.classList.contains("pv-url"))) return;
+      var env = tr.getAttribute("data-env");
+      authorPost("/api/settings/providers/row", {
+        envName: env,
+        name: tr.querySelector(".pv-name").value,
+        shape: tr.querySelector(".pv-shape").value,
+        baseUrl: tr.querySelector(".pv-url").value,
+      }).then(function(r){
+        pvNote.textContent = r.body && r.body.ok ? ("Saved — " + env + ".") : ((r.body && r.body.error) || "could not save");
+        // no re-render: it would steal focus mid-edit; Chat's Model menu just re-reads
+        document.dispatchEvent(new CustomEvent("bareloop-providers-changed"));
+      }).catch(function(){ pvNote.textContent = "could not save"; });
+    });
+    pvRows.addEventListener("click", function(e){
+      var t = e.target;
+      if(!t.classList || !t.classList.contains("pv-test")) return;
+      var out = t.parentNode.querySelector(".pv-test-result");
+      out.textContent = "testing…"; t.disabled = true;
+      authorPost("/api/settings/providers/test", { envName: t.closest("tr").getAttribute("data-env") }).then(function(r){
+        var b = r.body || {};
+        out.textContent = b.reachable ? ("OK" + (b.ms !== null && b.ms !== undefined ? " · " + b.ms + " ms" : "")) : ("failed — " + (b.note || b.status || b.error || "no answer"));
+      }).catch(function(){ out.textContent = "failed — no answer"; }).then(function(){ t.disabled = false; });
+    });
+    document.getElementById("btn-reload-keys").addEventListener("click", loadProviders);
+    wireTabs([document.getElementById("tab-providers"), document.getElementById("tab-money")]);
+    document.getElementById("tab-providers").addEventListener("click", loadProviders);
+    // Auto-save on a human edit (change = blur or Enter): POST carries the per-start token; the chat has no route here
+    limitInput.addEventListener("change", function(){
+      var text = limitInput.value.trim();
+      authorPost("/api/settings/money", { monthlyLimitUsd: text === "" ? null : text }).then(function(r){
+        var msg = r.body && r.body.ok
+          ? (r.body.monthlyLimitUsd === null ? "Saved — no monthly limit." : "Saved — monthly limit " + panelMoney(r.body.monthlyLimitUsd) + ".")
+          : ((r.body && r.body.error) || "could not save");
+        keepNote = true;
+        loadMoney();
+        noteEl.textContent = msg;
+        document.dispatchEvent(new CustomEvent("bareloop-limit-changed"));
+      }).catch(function(){ noteEl.textContent = "could not save"; });
+    });
+    // verification convenience, like the mockup: ?settings=1 opens Settings on load
+    if(location.search.indexOf("settings=1") !== -1){ document.getElementById("btn-settings").click(); }
+  })();
+
   // ---- Chat tab: job-card authoring (PANEL-BUILD.md P3) ----
   (function(){
     var newBtn = document.getElementById("chat-new-btn");
@@ -2756,6 +2992,23 @@
       startBtn.disabled = !capOk || sessionLive || !keyOk;
     }
     moneyCapInput.addEventListener("input", refreshStartEnabled);
+    // P4a — the monthly-limit note sits right under the cap, as the person types.
+    // Plain text, no button; the wording comes from the server (one library check).
+    var capNoteEl = document.getElementById("jf-cap-note");
+    var capNoteTimer = null;
+    function refreshCapNote(){
+      var v = Number(moneyCapInput.value);
+      if(moneyCapInput.value.trim() === "" || !Number.isFinite(v) || v <= 0){ capNoteEl.textContent = ""; return; }
+      authorGet("/api/author/monthly-check?cap=" + encodeURIComponent(String(v))).then(function(r){
+        capNoteEl.textContent = (r && r.refusal) ? r.refusal : "";
+      }).catch(function(){ capNoteEl.textContent = ""; });
+    }
+    moneyCapInput.addEventListener("input", function(){
+      if(capNoteTimer){ clearTimeout(capNoteTimer); }
+      capNoteTimer = setTimeout(refreshCapNote, 250);
+    });
+    // the limit changed in Settings: re-read the note for whatever cap is typed
+    document.addEventListener("bareloop-limit-changed", refreshCapNote);
     document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){
       r.addEventListener("change", function(){
         var isRubric = document.querySelector('input[name="jf-verdict"]:checked').value === "rubric";
@@ -2806,6 +3059,13 @@
     }
     function refreshModelStatus(){
       var modelId = modelSelect.value;
+      if(modelId === ""){
+        keyOk = false;
+        modelStatusEl.className = "jf-readiness bad";
+        modelStatusEl.textContent = "[✗] no model — give a key a Name in Settings > Providers";
+        refreshStartEnabled();
+        return;
+      }
       authorGet("/api/author/model-check?model=" + encodeURIComponent(modelId)).then(function(r){
         var line = modelStatusLine(r, modelId);
         keyOk = line.keyOk;
@@ -2820,7 +3080,21 @@
       });
     }
     modelSelect.addEventListener("change", refreshModelStatus);
-    refreshModelStatus();
+    // P4b — the Model menu IS the Settings rows: every Name, in keys-file order (a blank Name
+    // is never offered). Re-read whenever Settings loads or saves, keeping the pick if it survives.
+    function loadModels(){
+      authorGet("/api/author/models").then(function(r){
+        var models = r && r.ok ? r.models : [];
+        var was = modelSelect.value;
+        modelSelect.innerHTML = models.length ? models.map(function(m){
+          return '<option value="' + escapeXml(m.id) + '">' + escapeXml(m.id) + " · " + escapeXml(m.envName) + "</option>";
+        }).join("") : '<option value="">no model — add a Name in Settings</option>';
+        if(models.some(function(m){ return m.id === was; })) modelSelect.value = was;
+        refreshModelStatus();
+      }).catch(function(){ refreshModelStatus(); });
+    }
+    document.addEventListener("bareloop-providers-changed", loadModels);
+    loadModels();
 
     // build item 2 — one plain line per event, no "(progress)" jargon
     // suffix: `onPhase` no longer posts its own bubble (see

package/src/panel/server.js

@@ -5,8 +5,10 @@
 // `src/cli.js` calls — `src/replayio.js`'s read side and `src/runlist.js`'s
 // run list — never a re-implementation of either.
 //
-// READ-ONLY, BY CONSTRUCTION: GET/HEAD only (anything else -> 405); no
-// endpoint runs a job, spends money, signs, or reads a key/.env. Nothing
+// READ-ONLY, BY CONSTRUCTION: GET/HEAD only (anything else -> 405) EXCEPT the two
+// human-click-guarded route families in their own modules (`/api/author/*`,
+// `/api/settings/*` — P3/P4a); no endpoint here runs a job, spends money, signs, or
+// returns a key/.env value. Nothing
 // here imports `src/providers.js` or touches `process.env` for a secret —
 // grepped before writing this file, and the same discipline is kept here.
 //
@@ -28,19 +30,23 @@ import {
   dirname, join, basename, relative, isAbsolute, sep,
 } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { readRunList } from '../runlist.js';
+import { readRunList, DIED_MTIME_MS } from '../runlist.js';
 import {
   replayOne, parseJsonl, resolveSiblings, isSidecarByName,
 } from '../replayio.js';
 import { summarizeForAllLine, auditWindow } from '../replay.js';
 import { runBehaviour } from '../behaviour.js';
-import { SPEND_RECORD_TYPES } from '../ledger.js';
+import { SPEND_RECORD_TYPES, floorsFromRecords } from '../ledger.js';
 import { jobSpecHash } from '../job.js';
 import { confirmProtections } from '../authorflow.js';
 import { createAuthorRoutes, mintToken } from './authorroutes.js';
+import { createSettingsRoutes } from './settingsroutes.js';
 
 const HERE = dirname(fileURLToPath(import.meta.url));
 
+/** Largest POST body the panel buffers (job cards are short prose); a bigger one is refused with 413. */
+const MAX_BODY_BYTES = 1024 * 1024;
+
 /**
  * A runid, as it appears in a URL path segment — never a raw filesystem
  * path. `~` is included so a backfill-disambiguated runid (F197:
@@ -131,17 +137,10 @@ export function checkTypeTitle(verdictType, atIso) {
   return null;
 }
 
-// DIED (hamr's ruling B, 2026-09-25): a run with no `job-end` never shares
-// the failed glyph — [✗] stays reserved for a run whose close/arbiter
-// actually rendered a "no" (a real result). A spine that just stops, with
-// no ending ever recorded, is a DIFFERENT fact (killed, crashed, or the
-// machine slept) and gets its own [?] glyph. The distinguishing signal is
-// the spine FILE's own mtime, never wall-clock "now minus job-start" (a
-// resumed/paused run can legitimately sit quiet for a long time without
-// having died): still fresh (written to within this window) reads as the
-// existing `running` [▶] state; older than this reads as died. Tighten-only,
-// named so a future change is a deliberate, visible edit.
-export const DIED_MTIME_MS = 10 * 60 * 1000;
+// DIED (hamr's ruling B, 2026-09-25): a run with no `job-end` is `died` [?], never [✗], once its
+// spine file's mtime is older than DIED_MTIME_MS — the constant and its full comment live in
+// src/runlist.js (the monthly limit reads the same rule); re-exported here for the panel's callers.
+export { DIED_MTIME_MS };
 
 /**
  * Plain-words description of ONE spine record, for the died "why" sentence's
@@ -237,32 +236,6 @@ export function formatTimestamp(ts) {
  * @param {string|null} outcome `replayRun`'s own `summary.outcome`
  * @returns {{died: boolean, why: string|null, spendFloorUsd: number|null, wallFloorMs: number|null}}
  */
-/**
- * The priced-rounds spend floor + first-record→last-record wall floor,
- * derived straight off the spine's raw records — the same derivation a
- * died run's "at least …" figures use, factored out so build item 6
- * (2026-09-28) can hand a genuinely-still-running spine the identical
- * floor instead of "unknown" on the Run tab, without a second copy of this
- * math.
- * @param {any[]} records raw parsed spine records
- * @returns {{spendFloorUsd: number|null, wallFloorMs: number|null}}
- */
-function floorsFromRecords(records) {
-  let spendSum = 0;
-  let pricedCount = 0;
-  for (const r of records) {
-    if (!r || typeof r !== 'object' || !SPEND_RECORD_TYPES.includes(r.type)) continue; // worker-result echoes excluded by construction — not a spend type
-    if (typeof r.costUsd === 'number' && Number.isFinite(r.costUsd)) { spendSum += r.costUsd; pricedCount += 1; }
-  }
-  const spendFloorUsd = pricedCount > 0 ? spendSum : null;
-
-  const withTs = records.filter((r) => r && typeof r === 'object' && typeof r.ts === 'string');
-  const firstMs = withTs.length ? Date.parse(withTs[0].ts) : NaN;
-  const lastMs = withTs.length ? Date.parse(withTs[withTs.length - 1].ts) : NaN;
-  const wallFloorMs = Number.isFinite(firstMs) && Number.isFinite(lastMs) && lastMs >= firstMs ? lastMs - firstMs : null;
-  return { spendFloorUsd, wallFloorMs };
-}
-
 function deriveDeath(spinePath, records, outcome) {
   const notDied = {
     died: false, why: null, spendFloorUsd: null, wallFloorMs: null,
@@ -1751,9 +1724,17 @@ function sendText(res, code, text) {
  * only `createPanelServer` below always supplies one.
  * @param {import('node:http').IncomingMessage} req
  * @param {import('node:http').ServerResponse} res
- * @param {{ home?: string, port: number, token?: string, authorRoutes?: ReturnType<typeof createAuthorRoutes> }} opts
+ * @param {{ home?: string, port: number, token?: string, authorRoutes?: ReturnType<typeof createAuthorRoutes>, settingsRoutes?: ReturnType<typeof createSettingsRoutes> }} opts
  */
 export function handleRequest(req, res, opts) {
+  /** the ONE writable route family for a path, or null — `/api/author/*` (authoring) or
+   * `/api/settings/*` (Settings, P4a): separate modules, each behind the human-click guard.
+   * @param {any} o @param {string} p */
+  function routesFor(o, p) {
+    if (o.authorRoutes && p.startsWith('/api/author')) return o.authorRoutes;
+    if (o.settingsRoutes && p.startsWith('/api/settings')) return o.settingsRoutes;
+    return null;
+  }
   const method = req.method ?? 'GET';
 
   let url;
@@ -1766,22 +1747,39 @@ export function handleRequest(req, res, opts) {
   const { pathname } = url;
 
   if (method !== 'GET' && method !== 'HEAD') {
-    if (opts.authorRoutes && pathname.startsWith('/api/author')) {
+    const routes = routesFor(opts, pathname);
+    if (routes) {
       let raw = '';
-      req.on('data', (c) => { raw += c; });
+      let size = 0;
+      let refused = false;
+      req.on('data', (c) => {
+        if (refused) return;
+        size += c.length;
+        if (size > MAX_BODY_BYTES) {
+          refused = true;
+          raw = '';
+          res.once('finish', () => { req.destroy(); });
+          res.setHeader('connection', 'close');
+          sendText(res, 413, `request body over ${MAX_BODY_BYTES} bytes`);
+          return;
+        }
+        raw += c;
+      });
       req.on('end', () => {
+        if (refused) return;
         /** @type {any} */
         let body = null;
         if (raw.length > 0) { try { body = JSON.parse(raw); } catch { body = null; } }
-        opts.authorRoutes?.handle(req, res, pathname, body);
+        routes.handle(req, res, pathname, body);
       });
       return;
     }
-    sendText(res, 405, 'method not allowed — this panel is read-only outside /api/author (GET/HEAD only)');
+    sendText(res, 405, 'method not allowed — this panel is read-only outside /api/author and /api/settings (GET/HEAD only)');
     return;
   }
-  if (opts.authorRoutes && pathname.startsWith('/api/author')) {
-    opts.authorRoutes.handle(req, res, pathname, null);
+  const getRoutes = routesFor(opts, pathname);
+  if (getRoutes) {
+    getRoutes.handle(req, res, pathname, null);
     return;
   }
 
@@ -1901,10 +1899,12 @@ export function createPanelServer(opts = {}) {
     let boundPort = requestedPort;
     /** @type {ReturnType<typeof createAuthorRoutes>|undefined} */
     let authorRoutes;
+    /** @type {ReturnType<typeof createSettingsRoutes>|undefined} */
+    let settingsRoutes;
     const server = createServer((req, res) => {
       try {
         handleRequest(req, res, {
-          home, port: boundPort, token, authorRoutes,
+          home, port: boundPort, token, authorRoutes, settingsRoutes,
         });
       } catch (e) {
         sendText(res, 500, `internal error: ${/** @type {Error} */ (e).message}`);
@@ -1926,6 +1926,10 @@ export function createPanelServer(opts = {}) {
         spawnFn: opts.spawnFn,
         bareloopBin: opts.bareloopBin,
         fetchImpl: opts.fetchImpl,
+        home,
+      });
+      settingsRoutes = createSettingsRoutes({
+        port: boundPort, token, home, env: opts.env, fetchImpl: opts.fetchImpl,
       });
       resolve({
         server,
@@ -1942,7 +1946,10 @@ export function createPanelServer(opts = {}) {
  * Never picks a different port on collision (see file header): prints a
  * loud, named error to stderr and returns 1.
  * @param {string[]} argv
- * @param {{ out: (s: string) => void, err: (s: string) => void, runlistHome?: string }} ctx
+ * @param {{ out: (s: string) => void, err: (s: string) => void, runlistHome?: string, env?: Record<string,string|undefined> }} ctx
+ *   `env` is the RAW shell env (never the start-time merge with the keys file) — the routes
+ *   re-merge `~/.config/bareloop/.env` onto it per request so Reload keys is real;
+ *   undefined = the process env.
  * @returns {Promise<number>}
  */
 export async function panelMain(argv, ctx) {
@@ -1956,7 +1963,7 @@ export async function panelMain(argv, ctx) {
     }
   }
   try {
-    const { port: boundPort } = await createPanelServer({ port, home: ctx.runlistHome });
+    const { port: boundPort } = await createPanelServer({ port, home: ctx.runlistHome, env: ctx.env });
     ctx.out(`bareloop panel — read-only, http://127.0.0.1:${boundPort} (Ctrl-C to stop)`);
     // never resolves on its own — the process stays up until killed, same
     // shape any other long-running dev server takes.