bareloop 0.31.0 → 0.33.0

package/src/panel/authorsession.js

@@ -20,10 +20,12 @@
 // `src/panel/server.js`'s POST routes). Nothing here changes what a step
 // means or what an answer does — only where the answer comes from.
 
+import { applyConfiguredKey, judgeRatesFor, keyNameFor, modelChoiceFor, ratesFor, rowsForHome } from '../providerrows.js';
+import { ConfigError } from '../config.js';
 import {
   mkdirSync, existsSync, writeFileSync, readdirSync,
 } from 'node:fs';
-import { join, resolve } from 'node:path';
+import { join, resolve, dirname } from 'node:path';
 import {
   prepareSource, proveDestination, missingDependencies, looksLikeRepoSource,
 } from '../source.js';
@@ -46,20 +48,6 @@ import { closeJudges } from '../kinds.js';
 import { redactSecrets } from '../validate.js';
 import { tallyCalls } from '../text.js';
 
-/**
- * The job card's "Model" select — a fixed, small, source-grounded mapping
- * from a display id to the `{provider, baseUrl?}` pair `src/interviewrun.js`
- * itself documents (that script's own `--provider openai-api --base-url
- * https://api.deepseek.com/v1` usage line for DeepSeek): the panel builds no
- * provider table of its own, this is a UI convenience over the SAME two
- * provider identities the CLI already resolves through `resolveProvider`.
- * @type {Readonly<Record<string, {provider: string, baseUrl?: string}>>}
- */
-export const MODEL_OPTIONS = Object.freeze({
-  'claude-sonnet-5': Object.freeze({ provider: 'anthropic-api' }),
-  'deepseek-flash': Object.freeze({ provider: 'openai-api', baseUrl: 'https://api.deepseek.com/v1' }),
-});
-
 /**
  * Plain-language labels for the library's own `onPhase(name, …)` calls
  * (`src/authorjob.js`/`src/authorflow.js`) — build item 3's progress
@@ -126,17 +114,18 @@ export function jobNameTaken(name, opts = {}) {
  * creates a session or spends anything — never inside the async pipeline,
  * so a bad card refuses synchronously, in the same HTTP response.
  * @param {any} card
+ * @param {{jobsDir?: string, rows?: readonly import('../providerrows.js').KeyRow[]}} [opts] `rows` = the Settings rows (the Model menu); jobsDir is a server-side test seam — NEVER read off the client card
  * @returns {{ok: true}|{ok: false, error: string}}
  */
-export function validateJobCard(card) {
+export function validateJobCard(card, opts = {}) {
   if (!card || typeof card !== 'object') return { ok: false, error: 'missing job card' };
   const { jobName, checkType, model, goal, source, destination, success, guardrails, capUsd } = card;
   if (!isSlug(jobName)) return { ok: false, error: 'Job name must be a kebab-case slug (letters, digits, dashes)' };
-  if (jobNameTaken(jobName, card.jobsDirOverride ? { jobsDir: card.jobsDirOverride } : {})) {
+  if (jobNameTaken(jobName, { jobsDir: opts.jobsDir })) {
     return { ok: false, error: `a job named "${jobName}" already exists — P3 is new jobs only (Q4=A)` };
   }
   if (checkType !== 'deterministic' && checkType !== 'rubric') return { ok: false, error: 'Check type must be deterministic or rubric' };
-  if (!MODEL_OPTIONS[model]) return { ok: false, error: `Model must be one of: ${Object.keys(MODEL_OPTIONS).join(', ')}` };
+  if (!modelChoiceFor(opts.rows ?? [], model)) return { ok: false, error: 'Model must be one of the Names in Settings > Providers' };
   for (const [field, label] of [[goal, 'Goal'], [source, 'Source'], [destination, 'Destination'], [success, 'Success'], [guardrails, 'Guardrails']]) {
     if (typeof field !== 'string' || field.trim() === '') return { ok: false, error: `${label} is required` };
   }
@@ -155,7 +144,7 @@ export function validateJobCard(card) {
  * is the ONE thing a person answers next; `answer()`/`send()`/`revise()`/
  * `signPrepare()` are the only ways in.
  * @param {any} card the validated job card (see {@link validateJobCard})
- * @param {{env?: Record<string,string|undefined>, sessionsRoot?: string, timeoutMs?: number,
+ * @param {{env?: Record<string,string|undefined>, sessionsRoot?: string, home?: string, timeoutMs?: number,
  *   scout?: any, generate?: Function, confirmGenerate?: Function, authorFn?: Function,
  *   prepareSigningFn?: Function}} [deps] the last five are TEST SEAMS ONLY — see the note
  *   just above where each is read, below.
@@ -164,6 +153,8 @@ export function validateJobCard(card) {
 export function createSession(card, deps = {}) {
   const env = deps.env ?? process.env;
   const sessionsRoot = deps.sessionsRoot ?? join(process.env.HOME ?? '/tmp', '.config', 'bareloop', 'panel-sessions');
+  // config.json lives beside the sessions dir (~/.config/bareloop) unless a home is injected
+  const configHome = deps.home ?? dirname(sessionsRoot);
   const timeoutMs = deps.timeoutMs ?? 300_000;
   // TEST SEAMS ONLY (never set by `src/panel/authorroutes.js`'s real caller):
   // override the declaration composer and/or `prepareSigning` itself so a
@@ -309,13 +300,28 @@ export function createSession(card, deps = {}) {
 
   async function run() {
     // ── keys, at $0, before anything is prepared ────────────────────────
-    const modelChoice = MODEL_OPTIONS[card.model];
+    const keyRows = rowsForHome(configHome);
+    const modelChoice = modelChoiceFor(keyRows, card.model);
+    if (!modelChoice) { refuse(`Model "${card.model}" is not a Name in Settings > Providers. Stopped — nothing spent.`); return; }
     let providerEntry;
     try { providerEntry = resolveProvider(modelChoice.provider); } catch (e) { refuse(/** @type {Error} */ (e).message); return; }
-    const apiKey = env[providerEntry.envKey];
-    if (!apiKey) { refuse(`${providerEntry.envKey} not set. Stopped — nothing spent.`); return; }
+    // P4a item 4 — the key variable the person picked in Settings stands in for the built-in one
+    const keyCfg = keyRows;
+    const draftEnv = applyConfiguredKey(env, modelChoice.provider, modelChoice.baseUrl, keyCfg, modelChoice.name);
+    const draftKeyName = keyNameFor(modelChoice.provider, modelChoice.baseUrl, keyCfg, modelChoice.name).name;
+    const apiKey = draftEnv[providerEntry.envKey];
+    if (!apiKey) { refuse(`${draftKeyName} not set. Stopped — nothing spent.`); return; }
+    // the customer's own price on this row (USD per 1M in config.json), resolved once here at $0 and
+    // handed to every model call this session makes; a bad price refuses, never falls back to the guess
+    /** @type {ReturnType<typeof ratesFor>} */
+    let draftPrice = null;
+    try { draftPrice = ratesFor(modelChoice.provider, modelChoice.baseUrl, keyCfg, modelChoice.name); } catch (e) {
+      if (!(e instanceof ConfigError)) throw e;
+      refuse(`${e.message}. Stopped — nothing spent.`);
+      return;
+    }
     const keyProblem = apiKeyProblem(apiKey);
-    if (keyProblem) { refuse(`${providerEntry.envKey} ${keyProblem}. Stopped — nothing spent.`); return; }
+    if (keyProblem) { refuse(`${draftKeyName} ${keyProblem}. Stopped — nothing spent.`); return; }
 
     const verdictType = card.checkType === 'rubric' ? 'soft-green' : 'green';
     const into = join(outDir, 'source-seed');
@@ -389,6 +395,8 @@ export function createSession(card, deps = {}) {
       description: `${card.jobName} — authored through the bareloop panel (${verdictType}, ${LANG})`,
       provider: modelChoice.provider,
       ...(modelChoice.baseUrl ? { baseUrl: modelChoice.baseUrl } : {}),
+      // the Name is the model id: signed into the spec only when it is not the provider's own default
+      ...(modelChoice.name !== providerEntry.tiers.sonnet ? { model: modelChoice.name } : {}),
       cadence: { unit: 'day', every: 1 },
       budgetUsd: card.capUsd,
       ...(typeof card.maxWallMs === 'number' ? { maxWallMs: card.maxWallMs } : {}),
@@ -414,7 +422,7 @@ export function createSession(card, deps = {}) {
     const draftJudge = (() => {
       try { return resolveJobJudge(draft, modelChoice.provider, resolveWorkerModel); } catch { return { provider: modelChoice.provider, model: providerEntry.tiers.sonnet }; }
     })();
-    const MODEL = providerEntry.tiers.sonnet;
+    const MODEL = modelChoice.name;
     const { provider } = buildRunnerProviders({
       providerName: modelChoice.provider, apiKey, model: MODEL, tierModels: providerEntry.tiers, baseUrl: modelChoice.baseUrl,
       judgeApiKey: apiKey, judgeModel: MODEL, judgeProviderName: modelChoice.provider, judgeBaseUrl: modelChoice.baseUrl,
@@ -424,8 +432,8 @@ export function createSession(card, deps = {}) {
     // `provider` for the model boundary) and/or `scout` (bypassing the real
     // paid scout) so it can drive the REAL confirm turn/ask()/revise/hash
     // machinery below with a deterministic fake, never a live provider call.
-    const generate = deps.generate ?? makeLoopGenerate(provider);
-    const confirmGenerate = deps.confirmGenerate ?? makeLoopGenerate(provider, { system: CONFIRM_SYSTEM });
+    const generate = deps.generate ?? makeLoopGenerate(provider, { rates: draftPrice?.rates ?? null });
+    const confirmGenerate = deps.confirmGenerate ?? makeLoopGenerate(provider, { system: CONFIRM_SYSTEM, rates: draftPrice?.rates ?? null });
 
     state.phase = 'drafting';
     state.progressLabel = 'drafting';
@@ -439,6 +447,7 @@ export function createSession(card, deps = {}) {
       questions: questionsFor(verdictType),
       writeScope, provider, generate,
       ceilingUsd: card.capUsd,
+      rates: draftPrice?.rates ?? null,
       onPhase, onCall,
       ask, confirmGenerate, isRepo: true, langResult,
       ...(deps.scout ? { scout: deps.scout } : {}),
@@ -472,8 +481,17 @@ export function createSession(card, deps = {}) {
     const judges = closeJudges(spec.closeDecl);
     const judge = judges ? resolveJobJudge(spec, modelChoice.provider, resolveWorkerModel) : null;
     let judgeProvider = null;
+    /** @type {ReturnType<typeof ratesFor>} */
+    let judgePrice = null;
     if (judge) {
-      const judgeKeyValue = env.JUDGE_API_KEY ?? env[resolveProvider(judge.provider).envKey];
+      try {
+        judgePrice = judgeRatesFor(judge, modelChoice.provider, modelChoice.baseUrl, draftPrice, keyCfg);
+      } catch (e) {
+        if (!(e instanceof ConfigError)) throw e;
+        refuse(`${e.message} — refusing before gate 4 spends anything`);
+        return;
+      }
+      const judgeKeyValue = env.JUDGE_API_KEY ?? (judge.provider === modelChoice.provider ? draftEnv : applyConfiguredKey(env, judge.provider, undefined, keyCfg, judge.model))[resolveProvider(judge.provider).envKey];
       const judgeKeyProblem = judgeKeyValue ? apiKeyProblem(judgeKeyValue) : null;
       if (!judgeKeyValue || judgeKeyProblem) {
         refuse(`the judge key is not usable (${judgeKeyProblem ?? 'not set'}) — refusing before gate 4 spends anything`);
@@ -488,7 +506,7 @@ export function createSession(card, deps = {}) {
     const signing = await prepareSigningFn({
       spec, workdir: prep.tree, seedRef: authored.seedRef, timeoutMs,
       shellCapUsd: spec.budgetUsd, ceilingUsd: card.capUsd, priorCalls: [...metered],
-      judgeLoop: judgeProvider ? (o) => defaultJudgeLoop({ provider: judgeProvider, system: o.system }) : null,
+      judgeLoop: judgeProvider ? (o) => defaultJudgeLoop({ provider: judgeProvider, system: o.system, rates: judgePrice?.rates ?? null }) : null,
       judgeModel: judge?.model ?? null,
       onJudgeCost: (c) => onCall({ label: `${c.label}:${c.id}`, costUsd: c.costUsd, unpricedRounds: c.unpricedRounds }),
     });

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