bareloop 0.39.0 → 0.41.0

package/src/panel/index.html

@@ -21,7 +21,7 @@
     --grey-dot:#878eac; --grey-bg:#20242f;
     --cyan:#7dcfff; --cyan-bg:#182634;
     --magenta:#bb9af7;
-    --accent:#7aa2f7;
+    --accent:#7aa2f7; --plan:#7aa2f7;
     --btn-bg:#1f2335; --btn-text:#c0caf5;
     --field-bg:var(--bg); --field-soft-bg:var(--bg); --field-border:var(--text-dim);
     --primary-bg:#7aa2f7; --primary-text:#1a1b26; --primary-border:#7aa2f7;
@@ -67,7 +67,7 @@
       --grey-dot:#626887; --grey-bg:#e2e2e8;
       --cyan:#007197; --cyan-bg:#d6ecf1;
       --magenta:#9854f1;
-      --accent:#2668c2;
+      --accent:#2668c2; --plan:#2668c2;
       --btn-bg:#e9e9ed; --btn-text:#3760bf;
       --field-bg:#ffffff; --field-soft-bg:#f7f7f9;
       --primary-bg:#2668c2; --primary-text:#e1e2e7; --primary-border:#2668c2;
@@ -82,7 +82,7 @@
     --grey-dot:#626887; --grey-bg:#e2e2e8;
     --cyan:#007197; --cyan-bg:#d6ecf1;
     --magenta:#9854f1;
-    --accent:#2668c2;
+    --accent:#2668c2; --plan:#2668c2;
     --btn-bg:#e9e9ed; --btn-text:#3760bf;
     --field-bg:#ffffff; --field-soft-bg:#f7f7f9;
     --primary-bg:#2668c2; --primary-text:#e1e2e7; --primary-border:#2668c2;
@@ -121,6 +121,9 @@
   [hidden]{display:none !important;}
   .main{display:flex;flex:1;min-height:0;}
   .left-pane{width:420px;flex:none;border-right:1px solid var(--border-strong);display:flex;flex-direction:column;background:var(--panel);}
+  /* hamr 2026-10-10: the left pane is 630px on wide screens only. 1200px is the floor: the right pane is then >=570px, never
+     narrower than the 480px it already had at 900px with the 420px pane (630 at 900 left it 270 and wrapped its tabs) */
+  @media (min-width: 1200px){ .left-pane{width:630px;} }
   .right-pane{flex:1;min-width:0;display:flex;flex-direction:column;}
 
   .tabrow{display:flex;border-bottom:1px solid var(--border-strong);background:var(--panel2);counter-reset:tabnum;}
@@ -466,6 +469,41 @@
   /* hamr 2026-10-05: the card's free-text boxes wrap like the ask box (one shared fitBox); a few rows, then they scroll inside */
   /* same look as the card's one-line inputs (white when editable, ordinary 1px border) — a textarea has its own browser border otherwise */
   .job-card textarea.jf-wrap{width:100%;box-sizing:border-box;font:inherit;padding:6px 8px;border:1px solid var(--border-strong);border-radius:0;background:var(--bg);color:var(--text);resize:vertical;overflow-y:auto;max-height:200px;}
+  /* P7 — numbered boxes (The job, Inputs): the number gutter sits OUTSIDE the box, left; a hidden mirror measures each
+     logical line's wrapped height so a number stays level with its line (docs/product/PANEL-BUILD.md, signed mock) */
+  .nbox{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:6px;align-items:stretch;}
+  /* contain:size keeps the gutter's own content out of the row height (the box alone decides it); its padding mirrors the
+     textarea's 6px + 1px border top AND bottom so both scroll the same distance and a number never drifts or falls out */
+  .nbox .gut{color:var(--text-faint);text-align:right;padding:7px 0;box-sizing:border-box;overflow:hidden;contain:size;font-size:inherit;line-height:1.5;}
+  .nbox .gut div{min-height:1.5em;}
+  .nbox-in{position:relative;min-width:0;}
+  /* the numbered boxes grow with their text up to 8 lines (8 x 1.5em + 6px padding x2 + 1px border x2), then scroll; fitBox reads this cap */
+  .job-card .nbox textarea.jf-wrap{display:block;line-height:1.5;max-height:calc(12em + 14px);}
+  .nbox-mir{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;box-sizing:border-box;padding:6px 8px;font:inherit;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
+  .nbox-mir div{min-height:1.5em;}
+  /* P7 — the ONE job plan drawing (chat plan bubble + Job tab): job lines numbered, rule under, checks folded; only the marker is blue */
+  .jp{white-space:normal;font-size:13px;}
+  .jp-legend{font-size:12px;color:var(--text-faint);margin:0 0 8px;}
+  .jp-legend b,.jp .mk{color:var(--plan);font-weight:700;}
+  /* a wrapped job line hangs: its text lines up after the number, not under it (the signed mock's gutter shape) */
+  .jp .jl{margin-bottom:8px;overflow-wrap:anywhere;padding-left:30px;text-indent:-30px;}
+  .jp .jl .sub,.jp .jl .fold{padding-left:0;text-indent:0;}
+  .jp .num{display:inline-block;text-indent:0;width:22px;text-align:right;color:var(--text-faint);margin-right:8px;}
+  .jp .sub{color:var(--text-dim);padding-left:30px;}
+  .jp .fold{padding-left:30px;color:var(--text);}
+  .jp details.fold{padding-left:0;margin:6px 0;}
+  .jp details>summary{cursor:pointer;list-style:none;}
+  .jp details>summary::-webkit-details-marker{display:none;}
+  .jp details>summary::before{content:"\203A";color:var(--plan);font-weight:700;margin-right:6px;}
+  .jp details[open]>summary::before{content:"\2304";}
+  .jp details ul{margin:4px 0 0;padding-left:26px;color:var(--text-dim);}
+  .jp .older{font-size:12px;color:var(--text-faint);margin:0 0 8px;}
+  .jp .jp-sum{margin:0 0 8px;overflow-wrap:anywhere;}
+  .jp .jp-sum .lbl{display:inline-block;color:var(--text-faint);margin-right:8px;}
+  .jp-qs{margin:8px 0;overflow-wrap:anywhere;}
+  .jp-qs .lbl{display:inline-block;color:var(--text-faint);margin-right:8px;}
+  .jp-qs ul{margin:4px 0;padding-left:26px;}
+  .jp-goal{font-size:12px;color:var(--text-faint);margin-top:8px;}
   /* hamr 2026-10-05: the focused/selected Chat-card field gets a blue border (the accent), no outline ring */
   #panel-chat :is(input,select,textarea):focus{border-color:var(--accent);outline:none;}
   /* hamr 2026-10-05: the ask box is dimmed until something asks for a reply (placeholder stays readable) */
@@ -492,19 +530,92 @@
   .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-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;overflow-wrap:anywhere;}
+  .keyfile-strip-actions{display:flex;flex-wrap:wrap;gap:6px;flex:none;max-width:100%;}
   .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;}
-  .pv-table td.pv-price-cell input{width:90px;}
-  /* 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;}
+  /* M4d Providers layout F (hamr approved 2026-10-11): ONE shared grid, so a key row, the model sub-head and
+     every model row sit on the same column edges. Key band: KEY | API SHAPE | BASE URL (two columns) | OLD MAX_TOKENS | TOKENS | refresh.
+     Model row: [USE 44px][MODEL] under KEY, IN + OUT side by side under BASE URL, TOKENS on the key band's TOKENS edge. A key row has a
+     solid 1px line, a model row a dotted 1px hairline. Below 1280px every row collapses to stacked label : value lines. */
+  .pv-grid{--pv-cols:minmax(0,2.8fr) minmax(0,1.5fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,.9fr) minmax(0,.6fr) 272px;font-size:13px;}
+  .pv-head,.pv-krow,.pv-mhead,.pv-mrow{display:grid;grid-template-columns:var(--pv-cols);column-gap:8px;align-items:center;padding:0 8px;min-width:0;}
+  .pv-head > *,.pv-krow > *,.pv-mhead > *,.pv-mrow > *{min-width:0;}
+  .pv-head,.pv-mhead{font-size:11px;font-weight:700;color:var(--text-dim);letter-spacing:0.04em;min-height:26px;}
+  .pv-head{background:var(--panel2);border-bottom:1px solid var(--border-strong);}
+  .pv-mhead{background:var(--bg);border-bottom:1px dotted var(--border-strong);}
+  .pv-key{border-top:1px solid var(--border-strong);}
+  .pv-krow{min-height:40px;padding-top:4px;padding-bottom:4px;}
+  .pv-c-url{grid-column:3 / span 2;}
+  .pv-lbl{display:none;}
+  .pv-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;min-width:0;overflow-wrap:anywhere;}
+  .pv-name code{font-weight:700;}
+  .pv-ok{color:var(--green);font-weight:700;}
+  .pv-fold{border:0;background:none;color:var(--text);font:inherit;padding:0 4px 0 0;min-width:22px;min-height:24px;cursor:pointer;text-align:left;}
+  .pv-krow select,.pv-krow input[type=text]{width:100%;max-width:100%;min-height:28px;box-sizing:border-box;}
+  .pv-grid select,.pv-grid input[type=text]{font-size:12px;height:28px;padding:2px 6px;}
+  .pv-legacy{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:28px;text-transform:none;letter-spacing:0;font-weight:400;font-size:12px;}
+  .pv-legacy input,.pv-m-use input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer;}
+  .pv-tok{text-align:right;font-variant-numeric:tabular-nums;}
+  .pv-refcell{display:flex;justify-content:flex-end;}
+  .pv-refbox{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;}
+  .pv-refbtns{display:flex;gap:6px;}
+  .pv-refbox .pv-msg{width:0;min-width:100%;overflow-wrap:anywhere;margin:2px 0 0;}
+  .pv-refbox .pv-msg:empty{display:none;}
+  .pv-refbtn{white-space:nowrap;flex:0 0 auto;}
+  .pv-refbtn:disabled{opacity:.5;cursor:not-allowed;}
+  .pv-sum{color:var(--text-faint);font-size:11px;font-weight:400;}
+  .pv-key[data-open="1"] .pv-sum{display:none;}
+  .pv-knote{padding:0 8px 4px 34px;margin:0;}
+  .pv-knote:empty{display:none;}
+  .pv-knote > .hint:empty{display:none;}
+  .pv-key[data-open="0"] .pv-models{display:none;}
+  .pv-mrow{border-top:1px dotted var(--border-strong);min-height:32px;}
+  .pv-mrow:hover,.pv-mrow:focus-within{background:var(--panel2);}
+  .pv-um{grid-column:1;display:flex;align-items:center;gap:0;min-width:0;}
+  .pv-uh,.pv-m-use{flex:0 0 44px;width:44px;display:flex;align-items:center;justify-content:center;}
+  .pv-m-use{min-height:32px;}
+  .pv-m-name{min-width:0;overflow-wrap:anywhere;font-size:12px;}
+  .pv-pair{grid-column:3 / span 2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px;align-items:center;min-width:0;}
+  .pv-pair > *{min-width:0;}
+  .pv-pair input[type=text]{width:100%;text-align:right;}
+  .pv-mhead .pv-tok{text-align:right;}
+  .pv-mhead .pv-tok,.pv-m-tok{grid-column:6;}
+  .pv-m-msg{grid-column:1 / -1;padding:2px 8px 2px 52px;margin:0;}
+  .pv-m-msg:empty{display:none;}
+  .pv-more{padding:3px 8px 3px 34px;border-top:1px dotted var(--border-strong);}
+  .pv-more:empty{display:none;}
+  .pv-more .pv-add{border:0;background:none;color:var(--accent);font:inherit;font-size:12px;padding:2px 0;min-height:24px;cursor:pointer;text-decoration:underline;}
+  .pv-more.pv-failed{color:var(--amber);background:var(--amber-bg);font-size:12px;}
+  .pv-typed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px;}
+  .pv-typed input{flex:1 1 160px;min-width:0;max-width:260px;min-height:28px;box-sizing:border-box;}
+  .pv-typed .hint{flex:1 1 100%;margin:0;}
+  .hint.bad{color:var(--red);}
+  .field label.jf-thinking{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:6px;margin-top:6px;font-size:12px;text-transform:none;letter-spacing:0;}
+  .field label.jf-thinking input{width:auto;min-height:0;margin:0;}
   .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;}
+    .keyfile-strip-main{flex:1 1 100%;}
+  }
+  @media (max-width: 1279px){
+    .pv-head,.pv-mhead{display:none;}
+    .pv-krow,.pv-mrow{display:block;padding:2px 8px;}
+    .pv-cell{display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;align-items:center;min-height:44px;border-top:1px dotted var(--border);}
+    .pv-cell:first-child{border-top:none;}
+    .pv-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-weight:700;}
+    .pv-cell.nolbl{display:flex;}
+    .pv-tok{text-align:left;}
+    .pv-grid select,.pv-grid input[type=text]{height:44px;font-size:14px;}
+    .pv-krow select,.pv-krow input[type=text]{min-height:44px;}
+    .pv-legacy{min-height:44px;gap:10px;}
+    .pv-legacy input,.pv-m-use input{width:24px;height:24px;}
+    .pv-um{min-height:44px;}
+    .pv-uh,.pv-m-use{min-height:44px;}
+    .pv-cell.pv-pair{display:grid;grid-template-columns:104px minmax(0,1fr) minmax(0,1fr);}
+    .pv-cell.pv-pair::before{content:"In / Out $/1M";font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);font-weight:700;}
+    .pv-fold,.pv-refbtn,.pv-more .pv-add{min-height:44px;min-width:44px;}
+    .pv-knote,.pv-more{padding-left:8px;}
+    .pv-m-msg{padding-left:8px;}
   }
   @media (max-width: 899px){
     .main{flex-direction:column;}
@@ -577,35 +688,32 @@
               <!-- 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>
+              <!-- P8: the job's "Thinking on" tick (drafting + the rubric judge; never the worker). The SERVER's per-line `thinking.canChange` decides. -->
+              <label class="jf-thinking" id="jf-thinking-label"><input type="checkbox" id="jf-thinking" data-testid="jf-thinking"> Thinking on</label>
+              <div class="hint" id="jf-thinking-note" data-testid="jf-thinking-note"></div>
             </div>
             <div class="field">
               <label for="jf-name">Job name</label>
               <input id="jf-name" type="text" placeholder="kebab-case, unique">
             </div>
             <div class="field">
-              <label for="jf-goal">Goal</label>
-              <textarea class="jf-wrap" id="jf-goal" rows="2"></textarea>
+              <label for="jf-job">The job</label>
+              <div class="nbox" data-testid="nbox-job">
+                <div class="gut" id="jf-job-gut" aria-hidden="true"></div>
+                <div class="nbox-in"><textarea class="jf-wrap" id="jf-job" rows="3" data-testid="jf-job" spellcheck="false"></textarea><div class="nbox-mir" id="jf-job-mir" aria-hidden="true"></div></div>
+              </div>
             </div>
             <div class="field">
-              <label for="jf-source">Source</label>
-              <textarea class="jf-wrap" id="jf-source" rows="1" placeholder="absolute path to a local repo"></textarea>
+              <label for="jf-inputs">Inputs</label>
+              <div class="nbox" data-testid="nbox-inputs">
+                <div class="gut" id="jf-inputs-gut" aria-hidden="true"></div>
+                <div class="nbox-in"><textarea class="jf-wrap" id="jf-inputs" rows="2" data-testid="jf-inputs" spellcheck="false"></textarea><div class="nbox-mir" id="jf-inputs-mir" aria-hidden="true"></div></div>
+              </div>
             </div>
             <div class="field">
               <label for="jf-dest">Destination</label>
               <textarea class="jf-wrap" id="jf-dest" rows="1" placeholder="the write fence — where in the repo this run may change files"></textarea>
             </div>
-            <div class="field">
-              <label for="jf-success">Success</label>
-              <textarea class="jf-wrap" id="jf-success" rows="2"></textarea>
-            </div>
-            <div class="field">
-              <label for="jf-guardrails">Guardrails</label>
-              <textarea class="jf-wrap" id="jf-guardrails" rows="2"></textarea>
-            </div>
-            <div class="field">
-              <label for="jf-judge">Judge examples <span class="hint" style="display:inline">(rubric only)</span></label>
-              <textarea class="jf-wrap" id="jf-judge" rows="2" disabled></textarea>
-            </div>
 
             <div class="cap-row" data-testid="cap-row">
               <div class="cap-field">
@@ -750,17 +858,16 @@
             <h4 id="details-title">Job card — signed</h4>
             <div class="field"><label>Check type</label><div class="ro-value" id="details-verdict">—</div></div>
             <div class="field"><label>Model</label><div class="ro-value" id="details-model">—</div></div>
+            <div class="field" id="details-description-field"><label>Description</label><div class="ro-value" id="details-description">—</div></div>
+            <div class="field"><label>The job</label><div class="ro-value" id="details-plan" data-testid="details-plan">—</div></div>
+            <div class="field"><label>Inputs</label><div class="ro-value" id="details-inputs" data-testid="details-inputs">—</div></div>
+            <div class="field"><label>Destination</label><div class="ro-value" id="details-dest">—</div></div>
+            <div class="field"><label>Tools</label><div class="ro-value" id="details-tools">—</div></div>
             <div class="field-row">
               <div class="field"><label>$ cap</label><div class="ro-value" id="details-cap-money">—</div></div>
               <div class="field"><label>Time cap</label><div class="ro-value" id="details-cap-time">—</div></div>
             </div>
-            <div class="field" id="details-description-field"><label>Description</label><div class="ro-value" id="details-description">—</div></div>
-            <div class="field"><label>Goal</label><div class="ro-value scroll" id="details-goal">—</div></div>
-            <div class="field"><label>Success</label><div class="ro-value" id="details-success">—</div></div>
-            <div class="field"><label>Guardrails</label><div class="ro-value" id="details-guardrails">—</div></div>
-            <div class="field"><label>Source</label><div class="ro-value" id="details-source">—</div></div>
-            <div class="field"><label>Destination</label><div class="ro-value" id="details-dest">—</div></div>
-            <div class="field"><label>Tools</label><div class="ro-value" id="details-tools">—</div></div>
+            <div class="field"><label>Signed</label><div class="ro-value" id="details-signed" data-testid="details-signed">—</div></div>
             <div class="hint" id="job-note"></div>
           </div>
         </section>
@@ -784,30 +891,26 @@
     </div>
 
     <div class="pane-body">
-      <!-- PROVIDERS TAB (P4b: one row per key in the keys file that has a value) -->
+      <!-- PROVIDERS TAB (P8: one row per key in the keys file that has a value; layout rewritten from fwdloop src/panel/index.html@f9449e8) -->
       <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" data-testid="keys-strip">
           <div class="keyfile-strip-main">
-            <span>Put <code>NAME=key</code> lines in your keys file (Open keys folder), 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-path" data-testid="keyfile-path"></span>
-            <span class="hint" id="pv-keyfile-note" data-testid="keyfile-warning"></span>
+            <span>Put <code>NAME=key</code> lines in <code id="keys-path" data-testid="keys-path">~/.config/bareloop/.env</code>, then Reload keys &mdash; each row below says whether its key is set. Only names are listed; keys never reach this page.</span>
+            <span class="hint bad" id="keys-refusal" data-testid="keys-refusal"></span>
+            <span class="hint" id="keys-open-note" data-testid="keys-open-note"></span>
           </div>
           <div class="keyfile-strip-actions">
-            <button class="btn small" type="button" id="btn-open-keys-folder" data-testid="btn-open-keys-folder">Open keys folder</button>
-            <button class="btn small" type="button" id="btn-reload-keys" data-testid="btn-reload-keys">Reload keys</button>
+            <button class="btn small" id="open-keys-folder" type="button" data-testid="open-keys-folder" aria-label="Open keys folder">Open keys folder</button>
+            <button class="btn small" id="reload-keys" type="button" data-testid="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><th>In $/1M</th><th>Out $/1M</th></tr>
-            </thead>
-            <tbody id="pv-rows"></tbody>
-          </table>
+          <div class="pv-grid" data-testid="provider-table">
+            <div class="pv-head" aria-hidden="true"><span>KEY</span><span>API SHAPE</span><span class="pv-c-url">BASE URL</span><span>OLD MAX_TOKENS</span><span class="pv-tok">TOKENS</span><span></span></div>
+            <div id="pv-rows"></div>
+          </div>
         </div>
-        <div class="hint" id="pv-price-hint" data-testid="pv-price-hint">If your vendor lists two prices, enter the higher one.</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>
+        <div class="hint" id="pv-note" data-testid="pv-note" style="margin-top:6px;">&#10227; refresh models (free) &middot; old max_tokens: tick if the server wants the old field name</div>
       </section>
 
       <!-- MONEY & LIMITS TAB -->
@@ -1991,8 +2094,8 @@
     var nr = "not recorded";
     renderJob({
       job: v.job, resolved: false, checkType: v.checkType || nr, model: v.model || nr,
-      goal: v.goal || nr, success: v.success || nr, guardrails: v.guardrails || nr,
-      source: nr, destination: nr, tools: nr,
+      goal: v.goal || nr, plan: v.plan || null, inputs: v.inputs || null, signed: null,
+      destination: nr, tools: nr,
       budgetUsd: (typeof v.budgetUsd === "number") ? v.budgetUsd : null,
       maxWallMs: (typeof v.maxWallMs === "number") ? v.maxWallMs : null,
       note: "imported · view only — the exported job's own spec",
@@ -2296,7 +2399,7 @@
   // hand it to the Chat tab's New job card. The page decides nothing: the server owns what is locked and what is open.
   // `model` (optional) = the Chat card's Model box, when the picker asks: the estimate line then counts only that worker's runs.
   function reuseWorkflow(runid, model){
-    authorGet("/api/author/start-from?runid=" + encodeURIComponent(runid) + (model ? "&model=" + encodeURIComponent(model) : "")).then(function(r){
+    authorGet("/api/author/start-from?runid=" + encodeURIComponent(runid) + (model ? "&" + model : "")).then(function(r){
       if(!r || !r.ok){ window.alert((r && r.error) || "nothing to start from"); return; }
       document.getElementById("tab-chat").click();
       document.dispatchEvent(new CustomEvent("bareloop-reuse", {detail: {runid: runid, prefill: r}}));
@@ -3128,6 +3231,35 @@
     });
   });
 
+  // ---- the ONE job plan drawing (P7): used by the chat's plan bubble AND the Job tab. `plan` is the server's model
+  // (src/panel/jobplan.js): numbered lines with their rule, the checks under the line each serves (folded), the AI's own
+  // "Not checked", the always-on guards. Only the marker is blue (--plan). Returns HTML (every text is escaped).
+  function renderJobPlan(plan){
+    var h = '<div class="jp" data-testid="job-plan">' + (plan.older ? '<div class="older" data-testid="plan-older">older job \u2014 numbered lines were not saved</div>' : "") + '<div class="jp-legend"><b>\u203A</b> = the approved plan</div>' +
+      (plan.goal && !plan.older ? '<div class="jp-sum" data-testid="plan-goal"><span class="lbl">AI\'s summary</span>' + escapeXml(plan.goal) + "</div>" : "");
+    var checkLine = function(c){
+      return '<div class="fold" data-testid="plan-check"><span class="mk">\u203A</span> check \u00B7 ' + escapeXml(c.name) + (c.cls ? " \u00B7 " + escapeXml(c.cls) : "") + "</div>";
+    };
+    (plan.lines || []).forEach(function(l){
+      h += '<div class="jl" data-testid="plan-line"><span class="num">' + escapeXml(String(l.n)) + "</span>" + escapeXml(l.text);
+      if(l.rule) h += '<div class="sub">~ ' + escapeXml(l.rule) + "</div>";
+      (l.checks || []).forEach(function(c){ h += checkLine(c); });
+      (l.refused || []).forEach(function(r){ h += '<div class="fold" data-testid="plan-refused"><span class="mk">\u203A</span> not checked \u00B7 ' + escapeXml(r) + "</div>"; });
+      h += "</div>";
+    });
+    if((plan.loose || []).length){
+      h += '<div class="jl"><span class="num"></span>other checks' + plan.loose.map(checkLine).join("") + "</div>";
+    }
+    var fold = function(title, items, testid){
+      if(!items || !items.length) return "";
+      return '<details class="fold" data-testid="' + testid + '"><summary>' + escapeXml(title) + " \u00B7 " + items.length + "</summary><ul>" +
+        items.map(function(x){ return "<li>" + escapeXml(x) + "</li>"; }).join("") + "</ul></details>";
+    };
+    h += fold("Not checked (the AI's own reading)", plan.notChecked, "plan-notchecked");
+    h += fold("Always on", plan.alwaysOn, "plan-alwayson");
+    return h + "</div>";
+  }
+
   // ---- Job tab ----
   function renderJob(job){
     var empty = document.getElementById("job-empty");
@@ -3143,10 +3275,14 @@
     var descField = document.getElementById("details-description-field");
     if(job.description){ descField.hidden = false; document.getElementById("details-description").textContent = job.description; }
     else { descField.hidden = true; }
-    document.getElementById("details-goal").textContent = job.goal;
-    document.getElementById("details-success").textContent = job.success;
-    document.getElementById("details-guardrails").textContent = job.guardrails;
-    document.getElementById("details-source").textContent = job.source;
+    // P7: the numbered job lines, their rules and checks — the SAME drawing the chat's plan bubble uses (renderJobPlan)
+    var plan = job.plan || {lines: [{n: 1, text: job.goal || "not recorded", rule: "", checks: [], refused: []}], loose: [], notChecked: [], alwaysOn: [], older: true};
+    document.getElementById("details-plan").innerHTML = renderJobPlan(plan);
+    var ins = Array.isArray(job.inputs) ? job.inputs : [];
+    document.getElementById("details-inputs").innerHTML = ins.length
+      ? ins.map(function(i){ return '<div><span class="num-in">' + escapeXml(String(i.n)) + "</span> " + escapeXml(i.label + ": " + i.value) + "</div>"; }).join("")
+      : "not recorded";
+    document.getElementById("details-signed").textContent = job.signed || "not recorded";
     document.getElementById("details-dest").textContent = job.destination;
     document.getElementById("details-tools").textContent = job.tools;
     document.getElementById("details-cap-money").textContent = panelMoney(job.budgetUsd);
@@ -3218,7 +3354,7 @@
   // drives both fetches — never two independent timers that could race
   // each other. ----
   //
-  // F195 (docs/logs/FINDINGS.md): /api/runs re-replays every spine on
+  // F195 (docs/wiki/FINDINGS.md): /api/runs re-replays every spine on
   // every call (~457ms CPU at 250 rows). hamr's ruling B, 2026-09-27:
   // "refresh less often, up to 30s at most, choose the lesser when
   // possible" — the Runs list polls every 10s (RUNS_LIST_POLL_MS) instead
@@ -3414,7 +3550,7 @@
     document.getElementById("btn-settings").addEventListener("click", function(){
       mainView.hidden = true;
       settingsView.hidden = false;
-      loadProviders();
+      loadProviders(true);
       loadMoney();
     });
     document.getElementById("settings-back").addEventListener("click", function(){
@@ -3423,7 +3559,7 @@
     });
     document.getElementById("tab-money").addEventListener("click", loadMoney);
 
-    // ---- Providers tab (P4b): one row per key in the keys file that has a value ----
+    // ---- Providers tab (P8): one block per key in the keys file that has a value; rewritten from fwdloop src/panel/index.html@f9449e8 ----
     var pvRows = document.getElementById("pv-rows");
     var pvNote = document.getElementById("pv-note");
     var PV_NOTE_DEFAULT = pvNote.textContent;
@@ -3433,104 +3569,316 @@
       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"; document.getElementById("pv-keyfile-path").textContent = "the keys file (path unknown — could not read providers)"; return; }
-        var kf = r.keysFile;
-        document.getElementById("pv-keyfile-path").textContent = "";
-        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>"
-            + '<td class="pv-price-cell"><input type="text" inputmode="decimal" class="pv-price-in" data-testid="pv-price-in-' + e + '" placeholder="not set" value="' + (row.priceInPerM === null ? "" : escapeXml(String(row.priceInPerM))) + '"></td>'
-            + '<td class="pv-price-cell"><input type="text" inputmode="decimal" class="pv-price-out" data-testid="pv-price-out-' + e + '" placeholder="not set" value="' + (row.priceOutPerM === null ? "" : escapeXml(String(row.priceOutPerM))) + '"></td></tr>';
-        }).join("") : '<tr><td colspan="9" 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;
+    // A hint line: plain text, red when it is a refusal.
+    function setNote(el, bad, text){
+      el.className = "hint" + (bad ? " bad" : "");
+      el.textContent = text || "";
+    }
+    // The server's own plain sentence (`say`); the page never shows a code or an HTTP status.
+    function settingsRefusal(r){
+      var b = r && r.body;
+      if(b && typeof b.say === "string" && b.say) return b.say;
+      return "Settings cannot do that. Keys are typed into your keys file by hand.";
+    }
+    function networkText(){ return "Could not reach the panel, so nothing is confirmed. Check it is still running."; }
+    // `list` true = also ask each provider for its model list (free): on page open and on Reload keys. A save repaints without asking again.
+    function loadProviders(list){
+      return authorGet("/api/settings/providers").then(function(d){
+        if(!d || !d.ok){ setNote(document.getElementById("keys-refusal"), true, "Could not read your providers. Reload the page."); return; }
+        paintProviders(d, list === true);
         document.dispatchEvent(new CustomEvent("bareloop-providers-changed"));
-      }).catch(function(){ pvNote.textContent = "could not read providers"; });
+      }, function(){ setNote(document.getElementById("keys-refusal"), true, networkText()); });
+    }
+    // Open keys folder: the server opens the FOLDER in the file manager; if it cannot, the path shows as text
+    document.getElementById("open-keys-folder").addEventListener("click", function(){
+      var out = document.getElementById("keys-open-note");
+      out.textContent = "";
+      authorPost("/api/settings/open-keys-folder", {}).then(function(r){
+        var b = r.body || {};
+        if(b.ok === true) out.textContent = b.opened ? "" : "Could not open it here. Your keys folder: " + (b.path || "(unknown)");
+        else out.textContent = settingsRefusal(r);
+      }, function(){ out.textContent = networkText(); });
+    });
+    document.getElementById("reload-keys").addEventListener("click", function(){ loadProviders(true); });
+
+    // M4d Providers layout F. One parent block per key (.pv-key): its key band (name, API shape select, Base URL box, the legacy tick, tokens,
+    // the Refresh button), a folded summary, and its model lines as child rows (.pv-mrow). The key row owns shape, Base URL and the legacy
+    // tick, so a model line can never drift from them. Shape and Base URL are always editable; a change of either saves both (judged together).
+    var folds = {};      // slot -> true (unfolded) / false (folded): set once, on first paint (a key with a ticked model starts unfolded), then only the person changes it
+    var typedOpen = {};  // slot -> true while "+ type a model name" is open
+    function buildProviderRow(row){
+      var key = document.createElement("div");
+      key.className = "pv-key";
+      key.setAttribute("data-slot", row.slot);
+      key.setAttribute("data-testid", "provider-row-" + row.slot);
+      key.innerHTML =
+        '<div class="pv-krow">' +
+          '<div class="pv-cell pv-name nolbl"><button class="pv-fold" type="button" data-act="fold" data-testid="pv-fold"></button><code></code><span class="pv-status" data-f="status" data-testid="pv-status-' + escapeXml(row.slot) + '"></span><span class="pv-sum" data-f="sum" data-testid="pv-sum"></span></div>' +
+          '<div class="pv-cell"><span class="pv-lbl">API shape</span><select data-prov="shape" data-testid="prov-shape" aria-label="' + escapeXml(row.label + " API shape") + '"></select></div>' +
+          '<div class="pv-cell pv-c-url"><span class="pv-lbl">Base URL</span><input type="text" data-prov="baseUrl" data-testid="prov-baseurl" aria-label="' + escapeXml(row.label + " Base URL") + '" autocomplete="off" spellcheck="false" placeholder="type the Base URL"></div>' +
+          '<div class="pv-cell"><span class="pv-lbl">Old max_tokens</span><label class="pv-legacy"><input type="checkbox" data-prov="legacyMaxTokens" data-testid="prov-legacy" aria-label="' + escapeXml(row.label + " legacy max_tokens") + '"><span data-f="legacy-word">off</span></label></div>' +
+          '<div class="pv-cell pv-tok pv-ktok"><span class="pv-lbl">Tokens</span><span data-f="tokens" data-testid="pv-tokens-' + escapeXml(row.slot) + '"></span></div>' +
+          '<div class="pv-cell pv-refcell nolbl"><div class="pv-refbox"><div class="pv-refbtns"><button class="btn small pv-refbtn" type="button" data-act="test-key" data-testid="prov-test" aria-label="' + escapeXml("Test " + row.envVar) + '">Test</button><button class="btn small pv-refbtn" type="button" data-act="refresh-models" data-testid="prov-refresh" aria-label="' + escapeXml("Refresh models for " + row.label) + '">&#10227; Refresh</button></div><div class="hint pv-msg" data-f="msg-test" data-testid="prov-msg-test" role="status"></div></div></div>' +
+        '</div>' +
+        '<div class="pv-knote"><div class="hint bad pv-msg" data-f="msg-edit" data-testid="prov-msg-edit"></div><div class="hint pv-msg" data-f="msg-legacyMaxTokens" data-testid="prov-msg-legacyMaxTokens"></div></div>' +
+        '<div class="pv-models" data-models-for="' + escapeXml(row.slot) + '" data-testid="models-row-' + escapeXml(row.slot) + '">' +
+          '<div class="pv-mhead" aria-hidden="true"><span class="pv-um"><span class="pv-uh">USE</span><span>MODEL</span></span><span class="pv-pair"><span>IN $/1M</span><span>OUT $/1M</span></span><span class="pv-tok">TOKENS</span></div>' +
+          '<div data-f="models"></div>' +
+          '<div class="pv-more"><button class="pv-add" type="button" data-act="typed-open" data-testid="model-typed-open">+ type a model name</button>' +
+          '<div class="pv-typed" data-f="typed" hidden><input type="text" data-typed="1" data-testid="model-typed" autocomplete="off" spellcheck="false" aria-label="' + escapeXml(row.label + " model name") + '" placeholder="type a model name"> ' +
+          '<button class="btn small" type="button" data-act="add-model" data-testid="model-add">Add</button><div class="hint pv-msg" data-f="typed-msg" data-testid="model-typed-msg"></div></div></div>' +
+        '</div>';
+      key.querySelector("code").textContent = row.envVar;
+      key.querySelectorAll("input").forEach(function(inp){
+        inp.addEventListener("input", function(){ inp.setAttribute("data-dirty", "1"); });
+      });
+      key.querySelector("select").addEventListener("change", function(ev){ ev.target.setAttribute("data-dirty", "1"); });
+      return key;
     }
-    // The row's POST body, or null when exactly ONE price box is filled: a price is both boxes or neither (the server
-    // refuses a half-set one), so nothing in that row saves. This runs only when a save would happen (the row's
-    // change event), so typing the first box never flashes the message; it shows when the person leaves that box.
-    var PV_HALF_PRICE = "Fill both price boxes or clear both.";
-    function pvRowBody(env, v){
-      var pin = String(v.priceIn).trim();
-      var pout = String(v.priceOut).trim();
-      if((pin === "") !== (pout === "")) return null;
-      return { envName: env, name: v.name, shape: v.shape, baseUrl: v.baseUrl, priceInPerM: pin, priceOutPerM: pout };
+    // One child row per model: [Use][name], In + Out side by side, Tokens. The price pair is both-or-neither; the server's one rule says why not.
+    function buildModelLine(slot, m){
+      var d = document.createElement("div");
+      d.className = "pv-mrow";
+      d.setAttribute("data-model", m.model);
+      d.setAttribute("data-testid", "model-line");
+      d.innerHTML =
+        '<div class="pv-cell pv-um nolbl"><span class="pv-m-use"><input type="checkbox" data-mf="use" data-testid="model-use"></span><code class="pv-m-name"></code></div>' +
+        '<div class="pv-cell pv-pair"><label><input type="text" inputmode="decimal" data-mf="inPerM" data-testid="model-in" autocomplete="off"></label>' +
+        '<label><input type="text" inputmode="decimal" data-mf="outPerM" data-testid="model-out" autocomplete="off"></label></div>' +
+        '<div class="pv-cell pv-tok pv-m-tok"><span class="pv-lbl">Tokens</span><span data-f="model-tokens" data-testid="model-tokens"></span></div>' +
+        '<div class="hint pv-msg pv-m-msg" data-f="msg-model" data-testid="model-msg"></div>';
+      d.querySelector(".pv-m-name").textContent = m.model;
+      d.querySelector("[data-mf=use]").setAttribute("aria-label", slot + " " + m.model + " use");
+      d.querySelector("[data-mf=inPerM]").setAttribute("aria-label", m.model + " price in per 1M tokens");
+      d.querySelector("[data-mf=outPerM]").setAttribute("aria-label", m.model + " price out per 1M tokens");
+      d.querySelectorAll("input[type=text]").forEach(function(inp){
+        inp.addEventListener("input", function(){ inp.setAttribute("data-dirty", "1"); });
+      });
+      return d;
     }
-    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"; });
+    // The provider's own model list per key (asked on page open, Reload keys, Refresh models): { models: [ids] } or { why }. Not saved: only ticked or typed lines are.
+    var listed = {};
+    var lastData = null;
+    function linesFor(row){
+      var l = listed[row.slot];
+      var have = {};
+      row.models.forEach(function(m){ have[m.model] = true; });
+      var extra = (l && l.models ? l.models : []).filter(function(id){ return !have[id]; }).map(function(id){ return { model: id, use: false }; });
+      return row.models.concat(extra);
+    }
+    // "3 models · none ticked", "2 models · 1 ticked"; a list that failed with nothing saved says so.
+    function sumText(row){
+      var l = listed[row.slot];
+      var lines = linesFor(row);
+      if(l && l.why && lines.length === 0) return "failed — type a name";
+      var ticked = lines.filter(function(m){ return m.use === true; }).length;
+      return lines.length + (lines.length === 1 ? " model" : " models") + " · " + (ticked === 0 ? "none ticked" : ticked + " ticked");
+    }
+    function paintModels(row, mr){
+      var box = mr.querySelector("[data-f=models]");
+      var lines = linesFor(row);
+      var l = listed[row.slot];
+      var typed = mr.querySelector("[data-f=typed]");
+      typed.hidden = typedOpen[row.slot] !== true;
+      var wanted = lines.map(function(m){ return m.model; });
+      Array.prototype.slice.call(box.querySelectorAll(".pv-mrow")).forEach(function(el){
+        if(wanted.indexOf(el.getAttribute("data-model")) < 0) box.removeChild(el);
+      });
+      var note = box.querySelector("[data-f=models-note]");
+      lines.forEach(function(m){
+        var line = Array.prototype.find.call(box.querySelectorAll(".pv-mrow"), function(el){ return el.getAttribute("data-model") === m.model; });
+        if(!line){ line = buildModelLine(row.slot, m); box.insertBefore(line, note); }
+        var use = line.querySelector("[data-mf=use]");
+        use.checked = m.use === true;
+        ["inPerM", "outPerM"].forEach(function(f){
+          var inp = line.querySelector('[data-mf="' + f + '"]');
+          inp.placeholder = "—";
+          if(inp.getAttribute("data-dirty") !== "1") inp.value = typeof m[f] === "number" ? String(m[f]) : "";
+        });
+        line.querySelector("[data-f=model-tokens]").textContent = typeof m.tokens === "number" ? tokensText(m.tokens) : "—";
+      });
+      note = box.querySelector("[data-f=models-note]");
+      if(!note){ note = document.createElement("div"); note.className = "hint pv-more"; note.setAttribute("data-f", "models-note"); note.setAttribute("data-testid", "models-note"); box.appendChild(note); }
+      setNote(note, false, l && l.why ? l.why + " Type the model name below." : (lines.length === 0 ? "No models yet. Press ⟳ to refresh models, or type a name." : ""));
+      note.className += " pv-more" + (l && l.why ? " pv-failed" : "");
+      box.parentNode.querySelector(".pv-mhead").hidden = lines.length === 0;
+    }
+    var STATUS_WORD = { "set in file": "set in file", "found in shell": "found in shell", "not set": "not set", "refused": "refused — see above" };
+    // The Refresh button: "[ ⟳ Refresh ]", disabled "[ ⟳ refreshing… ]" while the free list call is out.
+    function setRefreshBtn(key, pending){
+      var b = key.querySelector("[data-act=refresh-models]");
+      b.disabled = pending === true;
+      b.innerHTML = pending === true ? "&#10227; refreshing&hellip;" : "&#10227; Refresh";
+    }
+    // The Test button: "[ Test ]", disabled "[ testing… ]" while the free call is out. The route says ok + ms or a plain-words why; written on the key row's own note.
+    function testKey(slot, key){
+      var b = key.querySelector("[data-act=test-key]");
+      var msg = key.querySelector("[data-f=msg-test]");
+      var row = lastData && lastData.rows.filter(function(r){ return r.slot === slot; })[0];
+      if(row && row.baseUrl === ""){
+        setNote(msg, true, "Type a Base URL for " + row.envVar + " in Settings.");
         return;
       }
-      if(!(t.classList.contains("pv-name") || t.classList.contains("pv-shape") || t.classList.contains("pv-url") || t.classList.contains("pv-price-in") || t.classList.contains("pv-price-out"))) return;
-      var env = tr.getAttribute("data-env");
-      var rowBody = pvRowBody(env, {
-        name: tr.querySelector(".pv-name").value,
-        shape: tr.querySelector(".pv-shape").value,
-        baseUrl: tr.querySelector(".pv-url").value,
-        priceIn: tr.querySelector(".pv-price-in").value,
-        priceOut: tr.querySelector(".pv-price-out").value,
+      b.disabled = true;
+      b.innerHTML = "testing&hellip;";
+      setNote(msg, false, "");
+      authorPost("/api/settings/test", { slot: slot }).then(function(r){
+        var d = r.body;
+        if(d && d.ok === true) setNote(msg, false, "OK \u00b7 " + d.ms + " ms");
+        else setNote(msg, true, d && d.why ? d.why : settingsRefusal(r));
+      }, function(){ setNote(msg, true, networkText()); }).then(function(){
+        b.disabled = false;
+        b.innerHTML = "Test";
       });
-      if(!rowBody){ pvNote.textContent = PV_HALF_PRICE; return; }
-      authorPost("/api/settings/providers/row", rowBody).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; });
+    }
+    function refreshModels(slot, tr){
+      listed[slot] = { pending: true };
+      setRefreshBtn(tr, true);
+      return authorPost("/api/settings/models", { slot: slot }).then(function(r){
+        var b = r.body;
+        listed[slot] = b && b.ok ? { models: b.models } : { why: (b && b.why) ? b.why : settingsRefusal(r) };
+      }, function(){ listed[slot] = { why: networkText() }; }).then(function(){
+        if(lastData) paintProviders(lastData, false);
+      });
+    }
+    function paintProviders(data, list){
+      lastData = data;
+      var path = data.keysFile && data.keysFile.path ? data.keysFile.path : "~/.config/bareloop/.env";
+      document.getElementById("keys-path").textContent = path;
+      setNote(document.getElementById("keys-refusal"), true, data.keysFile && data.keysFile.refusal);
+      setNote(pvNote, !!data.configProblem, data.configProblem || PV_NOTE_DEFAULT);
+      data.rows.forEach(function(row){
+        var key = pvRows.querySelector('.pv-key[data-slot="' + row.slot + '"]');
+        if(!key){ key = buildProviderRow(row); pvRows.appendChild(key); }
+        if(folds[row.slot] === undefined) folds[row.slot] = row.models.some(function(m){ return m.use === true; });
+        key.setAttribute("data-open", folds[row.slot] ? "1" : "0");
+        var fold = key.querySelector("[data-act=fold]");
+        fold.textContent = folds[row.slot] ? "▾" : "▸";
+        fold.setAttribute("aria-expanded", folds[row.slot] ? "true" : "false");
+        fold.setAttribute("aria-label", (folds[row.slot] ? "Fold " : "Unfold ") + row.label + " models");
+        paintModels(row, key.querySelector(".pv-models"));
+        setRefreshBtn(key, !!(listed[row.slot] && listed[row.slot].pending));
+        key.querySelector("[data-f=sum]").textContent = sumText(row);
+        var st = key.querySelector("[data-f=status]");
+        var word = STATUS_WORD[row.keyStatus] || row.keyStatus;
+        st.className = row.keyStatus === "set in file" || row.keyStatus === "found in shell" ? "pv-status pv-ok" : "pv-status hint";
+        st.textContent = st.className.indexOf("pv-ok") >= 0 ? "✓" : word;
+        st.setAttribute("title", word);
+        if(st.className.indexOf("pv-ok") >= 0) st.setAttribute("aria-label", word); else st.removeAttribute("aria-label");
+        var legacyIn = key.querySelector('[data-prov=legacyMaxTokens]');
+        if(document.activeElement !== legacyIn) legacyIn.checked = row.legacyMaxTokens === true;
+        key.querySelector("[data-f=legacy-word]").textContent = legacyIn.checked ? "on" : "off";
+        // shape + Base URL: the key row's own boxes, written from the server's row unless the person has typed in them (a refused value stays typed, with its sentence)
+        var sel = key.querySelector("[data-prov=shape]");
+        if(sel.options.length !== data.shapes.length || data.shapes.some(function(sh, i){ return sel.options[i].value !== sh.id; })){
+          sel.textContent = "";
+          data.shapes.forEach(function(sh){ var o = document.createElement("option"); o.value = sh.id; o.textContent = sh.label; sel.appendChild(o); });
+        }
+        if(sel.getAttribute("data-dirty") !== "1") sel.value = row.shape;
+        var urlIn = key.querySelector("[data-prov=baseUrl]");
+        if(urlIn.getAttribute("data-dirty") !== "1" && document.activeElement !== urlIn) urlIn.value = row.baseUrl;
+        key.querySelector("[data-f=tokens]").textContent = tokensText(row.tokens);
+      });
+      // rows that left the keys file leave the page
+      Array.prototype.slice.call(pvRows.querySelectorAll(".pv-key")).forEach(function(key){
+        if(!data.rows.some(function(r){ return r.slot === key.getAttribute("data-slot"); })) pvRows.removeChild(key);
+      });
+      if(list) data.rows.forEach(function(row){
+        var key = pvRows.querySelector('.pv-key[data-slot="' + row.slot + '"]');
+        if(row.baseUrl === ""){ listed[row.slot] = { why: "Type a Base URL for " + row.slot + " in Settings." }; paintProviders(lastData, false); }
+        else refreshModels(row.slot, key);
+      });
+    }
+    // Shape and Base URL save together, on change of either (blur / Enter / pick); the server judges them as a pair and says which sentence on
+    // a refusal (nothing saved, the typed value stays so the person can fix it).
+    function saveEndpoint(key){
+      var msg = key.querySelector("[data-f=msg-edit]");
+      var payload = { slot: key.getAttribute("data-slot"), shape: key.querySelector("[data-prov=shape]").value, baseUrl: key.querySelector("[data-prov=baseUrl]").value.trim() };
+      authorPost("/api/settings/provider", payload).then(function(r){
+        if(r.body && r.body.ok){
+          key.querySelector("[data-prov=shape]").removeAttribute("data-dirty");
+          key.querySelector("[data-prov=baseUrl]").removeAttribute("data-dirty");
+          setNote(msg, true, "");
+          loadProviders();
+        } else setNote(msg, true, settingsRefusal(r));
+      }, function(){ setNote(msg, true, networkText()); });
+    }
+    pvRows.addEventListener("click", function(ev){
+      var b = ev.target.closest && ev.target.closest("button[data-act]");
+      if(!b) return;
+      var key = b.closest(".pv-key");
+      var slot = key.getAttribute("data-slot");
+      var act = b.getAttribute("data-act");
+      if(act === "refresh-models") refreshModels(slot, key);
+      else if(act === "test-key") testKey(slot, key);
+      else if(act === "fold"){ folds[slot] = !folds[slot]; paintProviders(lastData, false); }
+      else if(act === "typed-open"){ typedOpen[slot] = !typedOpen[slot]; paintProviders(lastData, false); }
+      else if(act === "add-model") addTypedModel(slot, b.closest("[data-f=typed]"));
     });
-    document.getElementById("btn-reload-keys").addEventListener("click", loadProviders);
-    // Open keys folder: the server opens the FOLDER in the file manager; if it cannot, the path shows as text
-    document.getElementById("btn-open-keys-folder").addEventListener("click", function(){
-      var out = document.getElementById("pv-keyfile-path");
-      authorPost("/api/settings/open-keys-folder", {}).then(function(r){
-        var b = r.body || {};
-        out.textContent = b.ok && b.opened ? "" : ("Could not open it here. Your keys folder: " + (b.path || "(unknown)"));
-      }).catch(function(){ out.textContent = "Could not open it here — the keys folder is ~/.config/bareloop"; });
+    // Saved like bareloop saves a row field: on change (blur or Enter), no Save button. The legacy tick saves alone; shape and Base URL save as a pair.
+    pvRows.addEventListener("change", function(ev){
+      var inp = ev.target;
+      if(!inp.getAttribute) return;
+      if(inp.getAttribute("data-prov") === "legacyMaxTokens"){ saveProvider(inp.closest(".pv-key"), inp); return; }
+      if(inp.getAttribute("data-prov") === "shape" || inp.getAttribute("data-prov") === "baseUrl"){ saveEndpoint(inp.closest(".pv-key")); return; }
+      if(!inp.getAttribute("data-mf")) return;
+      saveModel(inp.closest(".pv-models") ? inp.closest(".pv-models").getAttribute("data-models-for") : "", inp.closest(".pv-mrow"));
     });
+    // A box the person typed: empty = back to the default (null); a number is sent as a number; anything else is
+    // sent as the text typed, so the server refuses it by naming the box.
+    function priceValue(text){
+      var t = String(text).trim();
+      if(t === "") return null;
+      var n = Number(t);
+      return isFinite(n) ? n : t;
+    }
+    // One model line per save: {slot, model, use, inPerM, outPerM}. A refusal is the line's hint (the server's one rule),
+    // and nothing was saved: the repaint puts the tick back.
+    function saveModel(slot, line){
+      var msg = line.querySelector("[data-f=msg-model]");
+      var payload = {
+        slot: slot,
+        model: line.getAttribute("data-model"),
+        use: line.querySelector("[data-mf=use]").checked,
+        inPerM: priceValue(line.querySelector("[data-mf=inPerM]").value),
+        outPerM: priceValue(line.querySelector("[data-mf=outPerM]").value)
+      };
+      authorPost("/api/settings/model", payload).then(function(r){
+        if(r.body && r.body.ok){
+          line.querySelectorAll("input[type=text]").forEach(function(inp){ inp.removeAttribute("data-dirty"); });
+          loadProviders();
+          setNote(msg, false, "saved — applies from the next model call");
+        } else { setNote(msg, true, settingsRefusal(r)); loadProviders(); }
+      }, function(){ setNote(msg, true, networkText()); });
+    }
+
+    // A model name typed because the list failed: saved as an unticked, empty line (typed lines are saved); the person then fills the prices and ticks it.
+    function addTypedModel(slot, box){
+      var inp = box.querySelector("input");
+      var msg = box.querySelector("[data-f=typed-msg]");
+      authorPost("/api/settings/model", { slot: slot, model: inp.value.trim(), use: false }).then(function(r){
+        if(r.body && r.body.ok){ inp.value = ""; setNote(msg, false, "added"); loadProviders(); }
+        else setNote(msg, true, settingsRefusal(r));
+      }, function(){ setNote(msg, true, networkText()); });
+    }
+
+    // The legacy tick saves alone: {slot, legacyMaxTokens}. A refusal is the cell's hint line.
+    function saveProvider(key, inp){
+      var field = inp.getAttribute("data-prov");
+      var msg = key.querySelector("[data-f=msg-" + field + "]");
+      var payload = { slot: key.getAttribute("data-slot") };
+      payload[field] = inp.checked;
+      authorPost("/api/settings/provider", payload).then(function(r){
+        if(r.body && r.body.ok){
+          inp.removeAttribute("data-dirty");
+          loadProviders();
+          setNote(msg, false, "saved — applies from the next model call");
+        } else setNote(msg, true, settingsRefusal(r));
+      }, function(){ setNote(msg, true, networkText()); });
+    }
+
+    document.getElementById("tab-providers").addEventListener("click", function(){ 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();
@@ -3564,6 +3912,9 @@
     var actionErrEl = document.getElementById("chat-action-error");
     var moneyCapInput = document.getElementById("jf-cap-money");
     var modelSelect = document.getElementById("jf-model");
+    var thinkingBox = document.getElementById("jf-thinking");
+    var thinkingNote = document.getElementById("jf-thinking-note");
+    var lineThinking = {};   // option value -> the server's {support, canChange, say} for that Model line
     var modelStatusEl = document.getElementById("jf-model-status");
     var progressRow = document.getElementById("chat-progress-row");
 
@@ -3594,10 +3945,10 @@
     var sfNote = document.getElementById("chat-startfrom-note");
     var originLine = document.getElementById("chat-origin-line");
     // the locked boxes of a reuse card: the signed workflow, greyed and not editable (the server refuses a change anyway)
-    var LOCKED_IDS = ["jf-name", "jf-goal", "jf-success", "jf-guardrails", "jf-judge"];
+    var LOCKED_IDS = ["jf-name", "jf-job"];
     // hamr 2026-10-05: while a drafting session is live NOTHING on the card is editable (the session was started from
     // these values). The reuse rule (only Source/Destination/caps open) applies before the start. ONE function owns it.
-    var OPEN_IDS = ["jf-source", "jf-dest", "jf-cap-money", "jf-cap-time", "jf-model"];
+    var OPEN_IDS = ["jf-inputs", "jf-dest", "jf-cap-money", "jf-cap-time", "jf-model"];
     var reuseOn = false;
     // Resume mode (hamr 2026-10-07): the card shows the signed job of one run, every box locked except the two caps.
     // `resumeRun` = {runid, noTime} while it is on, else null. Never set together with a drafting session or a reuse pick.
@@ -3608,19 +3959,22 @@
       var resuming = resumeRun !== null;
       var setLock = function(id, on){ var el = document.getElementById(id); el.readOnly = on; el.classList.toggle("locked", on); };
       LOCKED_IDS.forEach(function(id){ setLock(id, reuseOn || live || resuming); });
-      OPEN_IDS.forEach(function(id){ setLock(id, live || (resuming && CAP_IDS.indexOf(id) === -1)); });
-      document.getElementById("jf-model").disabled = live || resuming;
+      // the one exception on a resume card: an older spec that names no model leaves the Model box open (picked at resume)
+      var modelOpen = resuming && resumeRun.pickModel === true;
+      OPEN_IDS.forEach(function(id){ setLock(id, live || (resuming && CAP_IDS.indexOf(id) === -1 && !(modelOpen && id === "jf-model"))); });
+      document.getElementById("jf-model").disabled = live || (resuming && !modelOpen);
       // the Check type radios stay clickable on a reuse card (Deterministic / Rubric = leave reuse); a live session or a resume freezes them
       document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.disabled = live || resuming; });
       document.getElementById("job-card").classList.toggle("reuse", reuseOn);
-      if(!reuseOn && !live && !resuming){ var ck = document.querySelector('input[name="jf-verdict"]:checked'); document.getElementById("jf-judge").disabled = !ck || ck.value !== "rubric"; }
+      syncThinking();
     }
     function setReuseLocked(on){ reuseOn = on; syncCardLock(); }
     function clearStartFrom(keepBoxes){
       // Clear after a reuse starts a genuinely new job: the reused values do not linger in the boxes — except when a Check type
       // radio click leaves reuse (keepBoxes): a radio never blanks what the person has on the card
       if(startFrom && !keepBoxes){
-        ["jf-name", "jf-goal", "jf-source", "jf-dest", "jf-success", "jf-guardrails", "jf-judge", "jf-cap-money", "jf-cap-time"].forEach(function(id){ document.getElementById(id).value = ""; });
+        CARD_BOX_IDS.forEach(function(id){ document.getElementById(id).value = ""; });
+        NUMBERED_IDS.forEach(gutterSync);
         document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.checked = (r.value === "deterministic"); });
       }
       startFrom = null; reuseSession = false; autoSigned = false; reuseCheckType = "deterministic";
@@ -3632,7 +3986,7 @@
     // ---- Reuse workflow picker (hamr 2026-10-06): Check type is ONE radio group of three; "Reuse workflow" shows a search
     // box over the jobs that have a green local run (GET /api/author/reuse-jobs), a pick fills the card through the SAME
     // path the Run tab's button uses (reuseWorkflow -> bareloop-reuse -> applyReuse), then a picked box with `change`.
-    var CARD_BOX_IDS = ["jf-name", "jf-goal", "jf-source", "jf-dest", "jf-success", "jf-guardrails", "jf-judge", "jf-cap-money", "jf-cap-time"];
+    var CARD_BOX_IDS = ["jf-name", "jf-job", "jf-inputs", "jf-dest", "jf-cap-money", "jf-cap-time"];
     var rwBox = document.getElementById("rw");
     var rwSearch = document.getElementById("rw-search");
     var rwQ = document.getElementById("rw-q");
@@ -3649,9 +4003,11 @@
     }
     function setVerdict(v){
       document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.checked = (r.value === v); });
+      setJobPlaceholders(v);
     }
     function clearCardBoxes(){
       CARD_BOX_IDS.forEach(function(id){ document.getElementById(id).value = ""; });
+      NUMBERED_IDS.forEach(gutterSync);
       document.getElementById("jf-cap-note").textContent = "";
     }
     // ONE function shows/hides the picker: visible only while the radio is on Reuse workflow; the search box before a
@@ -3688,7 +4044,7 @@
       }
     }
     function loadReuseJobs(){
-      authorGet("/api/author/reuse-jobs" + (modelSelect.value ? "?model=" + encodeURIComponent(modelSelect.value) : "")).then(function(r){
+      authorGet("/api/author/reuse-jobs" + (modelSelect.value ? "?" + pickQuery(modelSelect.value) : "")).then(function(r){
         rwFailed = !(r && r.ok);
         rwJobs = rwFailed ? null : r.jobs;
         renderReuseList();
@@ -3699,14 +4055,13 @@
     function openPicker(){
       rwQ.value = ""; rwHl = 0;
       rwJobs = null; rwFailed = false; // a fresh open shows "Loading…", never the previous list
-      document.getElementById("jf-judge").disabled = true;
       renderPicker();
       renderReuseList();
       loadReuseJobs();
       refreshStartEnabled();
       rwQ.focus();
     }
-    function pickReuseJob(j){ if(j) reuseWorkflow(j.runid, modelSelect.value); }
+    function pickReuseJob(j){ if(j) reuseWorkflow(j.runid, pickQuery(modelSelect.value)); }
     rwQ.addEventListener("input", function(){ rwHl = 0; renderReuseList(); });
     rwQ.addEventListener("keydown", function(e){
       if(e.key === "ArrowDown"){ rwHl = Math.min(rwHl + 1, rwShown.length - 1); renderReuseList(); e.preventDefault(); }
@@ -3726,7 +4081,9 @@
     document.getElementById("rw-change").addEventListener("click", unpickReuse);
     // leaving resume mode: the title, the hidden drafting chrome, the time box and the resume box all come back
     function exitResumeMode(){
+      var filtered = resumeRun !== null && !!resumeRun.worker;
       resumeRun = null;
+      if(filtered){ renderModelOptions(); }
       originLine.classList.remove("res");
       document.getElementById("job-card-title").textContent = "Job card \u2014 draft";
       document.getElementById("chat-resume-box").hidden = true;
@@ -3740,7 +4097,7 @@
       card.hidden = false;
       originLine.hidden = true;
       exitResumeMode();
-      thread.innerHTML = "";
+      thread.innerHTML = ""; lastMsgSig = null;
       errEl.textContent = "";
       actionErrEl.textContent = "";
       sessionId = null;
@@ -3770,8 +4127,8 @@
     function resetCard(){
       clearCardBoxes();
       setVerdict("deterministic");
-      document.getElementById("jf-judge").disabled = true;
       modelSelect.selectedIndex = 0;
+      setThinkingTick(false);
       msgInput.value = "";
       rwQ.value = "";
       lastPhase = null;
@@ -3797,14 +4154,14 @@
       return {
         // on "Reuse workflow" the type is the picked job's own, never the radio's
         checkType: (verdictValue() === "reuse" ? reuseCheckType : verdictValue()) === "rubric" ? "rubric" : "deterministic",
-        model: document.getElementById("jf-model").value,
+        provider: pickParts(document.getElementById("jf-model").value).provider,
+        model: pickParts(document.getElementById("jf-model").value).model,
         jobName: document.getElementById("jf-name").value.trim(),
-        goal: document.getElementById("jf-goal").value.trim(),
-        source: document.getElementById("jf-source").value.trim(),
+        jobText: document.getElementById("jf-job").value.trim(),
+        inputs: document.getElementById("jf-inputs").value.trim(),
         destination: document.getElementById("jf-dest").value.trim(),
-        success: document.getElementById("jf-success").value.trim(),
-        guardrails: document.getElementById("jf-guardrails").value.trim(),
-        judgeExamples: document.getElementById("jf-judge").value.trim(),
+        // the "Thinking on" tick: sent as a boolean; the server judges it per line and signs it only when ticked
+        thinking: thinkingBox.checked === true,
         capUsd: moneyCap,
         maxWallMs: timeCapMin === "" ? undefined : Math.round(Number(timeCapMin) * 60000),
       };
@@ -3822,6 +4179,7 @@
       var capOk = moneyCapInput.value.trim() !== "" && Number.isFinite(v) && v > 0;
       // on Reuse workflow nothing starts before a job is picked
       startOk = capOk && !sessionLive && keyOk && (verdictValue() !== "reuse" || startFrom !== null);
+      if(typeof syncResumeSign === "function"){ syncResumeSign(); }
       syncCardLock();
       renderMain();
       refreshClearBtn();
@@ -3853,7 +4211,7 @@
         setVerdict(v);
         renderPicker();
       }
-      document.getElementById("jf-judge").disabled = v !== "rubric";
+      setJobPlaceholders(v);
       refreshStartEnabled();
     }
     document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){
@@ -3902,21 +4260,30 @@
       return { keyOk: true, ok: false, text: reachStatusText(reach.status) };
     }
     function refreshModelStatus(){
-      var modelId = modelSelect.value;
-      if(modelId === ""){
+      var modelId = pickParts(modelSelect.value).model;
+      if(modelSelect.value === ""){
         keyOk = false;
         modelStatusEl.className = "jf-readiness bad";
-        modelStatusEl.textContent = "[✗] no model — give a key a Name in Settings > Providers";
+        modelStatusEl.textContent = "[✗] no model — Tick a model in Settings > Providers.";
         refreshStartEnabled();
         return;
       }
-      authorGet("/api/author/model-check?model=" + encodeURIComponent(modelId)).then(function(r){
+      // the key state of the NEW pick is unknown until its check returns: blocked at once, and a late answer for a line
+      // no longer selected is ignored (it would otherwise unblock Start / Sign & resume for the wrong key)
+      var asked = modelSelect.value;
+      keyOk = false;
+      modelStatusEl.className = "jf-readiness unknown";
+      modelStatusEl.textContent = "checking the key\u2026";
+      refreshStartEnabled();
+      authorGet("/api/author/model-check?" + pickQuery(modelSelect.value)).then(function(r){
+        if(modelSelect.value !== asked) return;
         var line = modelStatusLine(r, modelId);
         keyOk = line.keyOk;
         modelStatusEl.className = "jf-readiness " + (line.ok ? "ok" : "bad");
         modelStatusEl.textContent = line.text;
         refreshStartEnabled();
       }).catch(function(){
+        if(modelSelect.value !== asked) return;
         keyOk = false;
         modelStatusEl.className = "jf-readiness bad";
         modelStatusEl.textContent = "[✗] could not check the key";
@@ -3928,25 +4295,89 @@
     function refreshReuseLine(){
       if(!startFrom) return;
       var q = (startFrom.importId ? "import=" + encodeURIComponent(startFrom.importId) : "runid=" + encodeURIComponent(startFrom.runid)) +
-        "&model=" + encodeURIComponent(modelSelect.value);
+        "&" + pickQuery(modelSelect.value);
       authorGet("/api/author/start-from?" + q).then(function(r){
         if(startFrom && r && r.ok){ sfLine.textContent = r.line ? rwMeta({checkType: reuseCheckType, line: r.line}) : ""; }
       }).catch(function(){ /* the line keeps what it had */ });
     }
     modelSelect.addEventListener("change", refreshReuseLine);
     modelSelect.addEventListener("change", function(){ if(!rwBox.hidden && startFrom === null && !reuseSession) loadReuseJobs(); });
-    // 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.
+    // P8 — the Model menu IS the Settings rows: every TICKED, PRICED line, labelled "<KEY> · <model>", in keys-file order. An option's
+    // value carries the key AND the model ("KEY|model"): two keys can tick the same model id, and the card names which one.
+    // Re-read whenever Settings loads or saves, keeping the pick if it survives.
+    function pickValue(slot, model){ return (slot || "") + "|" + model; }
+    function pickParts(v){
+      var i = String(v).indexOf("|");
+      return i < 0 ? {provider: "", model: String(v)} : {provider: v.slice(0, i), model: v.slice(i + 1)};
+    }
+    function pickQuery(v){ var p = pickParts(v); return "model=" + encodeURIComponent(p.model) + "&provider=" + encodeURIComponent(p.provider); }
+    // restore a saved card's pick: its key and model; an older card names only the model (the first option holding it)
+    function setPick(c){
+      if(!c || !c.model) return;
+      var want = c.provider ? pickValue(c.provider, c.model) : null;
+      var opts = Array.prototype.slice.call(modelSelect.options);
+      var hit = opts.filter(function(o){ return want ? o.value === want : pickParts(o.value).model === c.model; })[0];
+      if(!hit){
+        hit = document.createElement("option");
+        hit.value = want || pickValue("", c.model);
+        hit.textContent = (c.provider ? c.provider + " \u00b7 " : "") + c.model;
+        modelSelect.appendChild(hit);
+      }
+      modelSelect.value = hit.value;
+      syncThinking();
+    }
+    // The "Thinking on" box follows the SERVER's answer for the picked line (`thinking.canChange`): false greys AND unticks it with the
+    // server's words; 'unverified' leaves it enabled with no note. The tick is the person's; the page decides nothing.
+    function syncThinking(){
+      var t = lineThinking[modelSelect.value];
+      var blocked = !!(t && t.canChange === false);
+      if(blocked) thinkingBox.checked = false;
+      thinkingBox.disabled = blocked || sessionLive || resumeRun !== null || reuseOn;
+      thinkingNote.textContent = blocked ? (t.say || "") : "";
+      document.getElementById("jf-thinking-label").hidden = reuseOn;
+    }
+    function setThinkingTick(on){ thinkingBox.checked = on === true; syncThinking(); }
+    modelSelect.addEventListener("change", syncThinking);
+    var modelReads = 0;
+    var modelLines = [];
+    var modelSay = "";
+    // A Resume card that must PICK a model (old spec naming none) offers only the lines resolveWorker (src/providerrows.js) accepts
+    // for that spec: the same shape, and the same endpoint when the spec names one (`resumeRun.worker`, from start-from, endpoint
+    // already normalised by the server). With none, the sentence names the shape to tick (label from providershapes).
+    function renderModelOptions(){
+      var w = resumeRun !== null && resumeRun.pickModel === true ? resumeRun.worker : null;
+      var lines = modelLines.filter(function(m){ return !w || (m.shape === w.provider && (w.endpoint === "" || m.endpoint === w.endpoint)); });
+      var was = modelSelect.value;
+      lineThinking = {};
+      lines.forEach(function(m){ lineThinking[pickValue(m.slot, m.model)] = m.thinking || null; });
+      var none = (w && modelLines.length) ? "Tick a " + w.label + " model in Settings > Providers." : (modelSay || "Tick a model in Settings > Providers.");
+      modelSelect.innerHTML = lines.length ? lines.map(function(m){
+        return '<option value="' + escapeXml(pickValue(m.slot, m.model)) + '">' + escapeXml(m.label) + "</option>";
+      }).join("") : '<option value="">' + escapeXml(none) + "</option>";
+      if(lines.some(function(m){ return pickValue(m.slot, m.model) === was; })) modelSelect.value = was;
+      syncThinking();
+    }
     function loadModels(){
+      if(modelSelect.options.length === 0){
+        modelSelect.innerHTML = '<option value="">Reading your models\u2026</option>';
+      }
       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;
+        if(!r || !r.ok) throw new Error("read");
+        modelReads = 0;
+        modelLines = r.lines || [];
+        modelSay = r.say || "";
+        renderModelOptions();
+        refreshModelStatus();
+      }).catch(function(){
+        modelReads += 1;
+        if(modelReads <= 5){
+          modelSelect.innerHTML = '<option value="">Could not read your models. Trying again\u2026</option>';
+          setTimeout(loadModels, 1500);
+        } else {
+          modelSelect.innerHTML = '<option value="">Could not read your models. Reload the page.</option>';
+        }
         refreshModelStatus();
-      }).catch(function(){ refreshModelStatus(); });
+      });
     }
     document.addEventListener("bareloop-providers-changed", loadModels);
     loadModels();
@@ -3964,11 +4395,23 @@
       if(role === "system") return "";
       return "bareloop";
     }
+    // the thread is redrawn only when its messages changed: a 2 s poll tick must not close a fold the person just opened
+    var lastMsgSig = null;
     function renderMessages(state){
+      var sig = JSON.stringify(state.messages);
+      if(sig === lastMsgSig) return;
+      lastMsgSig = sig;
       thread.innerHTML = state.messages.map(function(m){
         var cls = m.role === "you" ? "you" : (m.role === "system" ? "system" : "bot");
         var who = chatWhoLabel(m.role);
         var whoHtml = who ? ('<div class="who">' + escapeXml(who) + '</div>') : "";
+        if(m.kind === "plan" && m.plan){
+          // P7: the confirm turn's plan is drawn by the one job-plan renderer (the Job tab uses the same)
+          var qs = (m.plan.questions || []).length
+            ? '<div class="jp-qs" data-testid="plan-questions"><span class="lbl">AI\'s open questions</span><ul>' +
+              m.plan.questions.map(function(q){ return "<li>" + escapeXml(q) + "</li>"; }).join("") + "</ul><b>Revise if you need to.</b></div>" : "";
+          return '<div class="msg ' + cls + '" data-testid="plan-bubble">' + whoHtml + renderJobPlan(m.plan) + qs + '<div class="jp-goal">' + escapeXml(m.text) + "</div></div>";
+        }
         return '<div class="msg ' + cls + '">' + whoHtml + escapeXml(m.text) + '</div>';
       }).join("");
       thread.scrollTop = thread.scrollHeight;
@@ -4062,22 +4505,61 @@
       fitCardBoxes();
     }
     msgInput.addEventListener("input", renderMain);
+    // P7 — the numbered boxes. A plain job line is numbered 1, 2, 3; a line starting `~` is a rule for the line above and has no
+    // number; Inputs numbers every line; empty lines have none. A hidden mirror (same font/width/padding) measures each logical
+    // line's wrapped height so every number stays level with its own line — the same rules src/jobblock.js parses by.
+    var NUMBERED_IDS = ["jf-job", "jf-inputs"];
+    var FIT_IDS = ["jf-job", "jf-inputs", "jf-dest"];
+    function gutterSync(id){
+      var ta = document.getElementById(id), gut = document.getElementById(id + "-gut"), mir = document.getElementById(id + "-mir");
+      if(!ta || !gut || !mir) return;
+      var lines = ta.value.split("\n");
+      var isJob = id === "jf-job";
+      var n = 0;
+      var nums = lines.map(function(l){
+        var t = l.trim();
+        if(t === "" || (isJob && t.charAt(0) === "~")) return "";
+        n += 1; return String(n);
+      });
+      mir.style.width = ta.clientWidth ? ta.clientWidth + "px" : "";
+      mir.innerHTML = lines.map(function(l){ return "<div>" + (l === "" ? "\u200b" : escapeXml(l)) + "</div>"; }).join("");
+      var rows = mir.children;
+      gut.innerHTML = nums.map(function(t, i){
+        var hgt = rows[i] ? rows[i].offsetHeight : 0;
+        return '<div' + (hgt ? ' style="height:' + hgt + 'px"' : "") + ">" + t + "</div>";
+      }).join("");
+      gut.scrollTop = ta.scrollTop;
+    }
+    // the empty-box examples (grey placeholders that vanish on typing) change with the Check type radio
+    var JOB_PLACEHOLDERS = {
+      deterministic: "Fix the failing date tests in src/date.js\n~ don't edit any test file\nMake npm test pass",
+      rubric: "Write a one-page summary of docs/plan.md\n~ PASS: every number is quoted from the file\n~ FAIL: a number that is not in the file\nKeep it under 300 words",
+    };
+    var INPUTS_PLACEHOLDER = "repo: /home/me/myrepo\nspec: docs/spec.md";
+    function setJobPlaceholders(v){
+      document.getElementById("jf-job").setAttribute("placeholder", JOB_PLACEHOLDERS[v === "rubric" ? "rubric" : "deterministic"]);
+      document.getElementById("jf-inputs").setAttribute("placeholder", INPUTS_PLACEHOLDER);
+    }
+    setJobPlaceholders("deterministic");
     // grow a text box with its text (a few rows, then it scrolls inside); ONE function for the ask box and the card boxes.
     // A box that is hidden (or not laid out) measures 0 and gets no inline height.
     function fitBox(el){
       el.style.height = "auto";
       if(!el.scrollHeight){ el.style.height = ""; return; }
       var border = el.offsetHeight - el.clientHeight;
-      el.style.height = Math.min(el.scrollHeight + border, 200) + "px";
+      var cap = parseFloat(window.getComputedStyle(el).maxHeight);
+      el.style.height = Math.min(el.scrollHeight + border, cap > 0 ? cap : 200) + "px";
     }
     function fitCardBoxes(){
-      ["jf-goal", "jf-source", "jf-dest", "jf-success", "jf-guardrails", "jf-judge"].forEach(function(id){ fitBox(document.getElementById(id)); });
+      FIT_IDS.forEach(function(id){ fitBox(document.getElementById(id)); });
+      NUMBERED_IDS.forEach(gutterSync);
     }
     // live growth: each card box re-fits on its own input (typing and Enter), through the same fitBox
-    ["jf-goal", "jf-source", "jf-dest", "jf-success", "jf-guardrails", "jf-judge"].forEach(function(id){
+    FIT_IDS.forEach(function(id){
       var box = document.getElementById(id);
-      box.addEventListener("input", function(){ fitBox(box); });
+      box.addEventListener("input", function(){ fitBox(box); if(NUMBERED_IDS.indexOf(id) !== -1) gutterSync(id); });
     });
+    NUMBERED_IDS.forEach(function(id){ var box = document.getElementById(id); box.addEventListener("scroll", function(){ document.getElementById(id + "-gut").scrollTop = box.scrollTop; }); });
     window.addEventListener("resize", function(){ fitCardBoxes(); fitBox(msgInput); });
     document.getElementById("tab-chat").addEventListener("click", function(){ fitCardBoxes(); fitBox(msgInput); });
     // Enter sends through the one main button; Shift+Enter (or IME composition) keeps its newline
@@ -4177,16 +4659,10 @@
       reusePickedName = c.jobName || "job";
       setVerdict(reuseSession ? "reuse" : reuseCheckType);
       if(c.model){
-        if(!Array.prototype.some.call(modelSelect.options, function(o){ return o.value === c.model; })){
-          modelSelect.insertAdjacentHTML("beforeend", '<option value="' + escapeXml(c.model) + '">' + escapeXml(c.model) + "</option>");
-        }
-        modelSelect.value = c.model;
+        setPick(c);
       }
-      setVal("jf-name", c.jobName); setVal("jf-goal", c.goal); setVal("jf-source", c.source);
-      setVal("jf-dest", c.destination); setVal("jf-success", c.success); setVal("jf-guardrails", c.guardrails);
-      setVal("jf-judge", c.judgeExamples); setVal("jf-cap-money", c.capUsd);
-      setVal("jf-cap-time", typeof c.maxWallMs === "number" ? Math.round(c.maxWallMs / 60000) : "");
-      document.getElementById("jf-judge").disabled = c.checkType !== "rubric";
+      fillCard(c);
+
       if(reuseSession) setReuseLocked(true);
       renderPicker();
       fitCardBoxes();
@@ -4208,6 +4684,15 @@
 
     // ---- Reuse workflow — the card opens filled from the SIGNED job: four open boxes, the rest greyed ----
     function setVal(id, v){ document.getElementById(id).value = (v === undefined || v === null) ? "" : String(v); }
+    // ONE owner of filling the card from a prefill (a re-attached session, Reuse, Edit in chat, Resume): the six boxes P7 left
+    // (the old Goal/Source/Success/Guardrails/Judge boxes are gone), then every box re-fits and its number gutter re-measures.
+    function fillCard(c){
+      setVal("jf-name", c.jobName); setVal("jf-job", c.jobText); setVal("jf-inputs", c.inputs);
+      setVal("jf-dest", c.destination); setVal("jf-cap-money", c.capUsd);
+      setVal("jf-cap-time", typeof c.maxWallMs === "number" ? Math.round(c.maxWallMs / 60000) : "");
+      setThinkingTick(c.thinking === true);
+      fitCardBoxes();
+    }
     // ONE owner of the reuse fill: the Run tab's / Import view's button and the picker both arrive here (the
     // `bareloop-reuse` event), so the card ends up in the same picked state whichever door was used.
     function applyReuse(d){
@@ -4219,12 +4704,9 @@
       reuseCheckType = c.checkType === "rubric" ? "rubric" : "deterministic";
       reusePickedName = c.jobName || (pre.origin && pre.origin.job) || "job";
       setVerdict("reuse");
-      if(c.model){ modelSelect.value = c.model; }
-      setVal("jf-name", c.jobName); setVal("jf-goal", c.goal); setVal("jf-source", c.source);
-      setVal("jf-dest", c.destination); setVal("jf-success", c.success); setVal("jf-guardrails", c.guardrails);
-      setVal("jf-judge", c.judgeExamples); setVal("jf-cap-money", c.capUsd);
-      setVal("jf-cap-time", typeof c.maxWallMs === "number" ? Math.round(c.maxWallMs / 60000) : "");
-      document.getElementById("jf-judge").disabled = c.checkType !== "rubric";
+      if(c.model){ setPick(c); }
+      fillCard(c);
+
       setReuseLocked(true);
       renderPicker();
       sfLine.hidden = false;
@@ -4248,12 +4730,9 @@
       clearStartFrom();
       openNewCard();
       setVerdict(c.checkType === "rubric" ? "rubric" : "deterministic");
-      if(c.model){ modelSelect.value = c.model; }
-      setVal("jf-name", c.jobName); setVal("jf-goal", c.goal); setVal("jf-source", c.source);
-      setVal("jf-dest", c.destination); setVal("jf-success", c.success); setVal("jf-guardrails", c.guardrails);
-      setVal("jf-judge", c.judgeExamples); setVal("jf-cap-money", c.capUsd);
-      setVal("jf-cap-time", typeof c.maxWallMs === "number" ? Math.round(c.maxWallMs / 60000) : "");
-      document.getElementById("jf-judge").disabled = c.checkType !== "rubric";
+      if(c.model){ setPick(c); }
+      fillCard(c);
+
       originLine.textContent = d.origin || "";
       originLine.hidden = !d.origin;
       renderPicker();
@@ -4272,17 +4751,16 @@
       var r = d.resume || {};
       clearStartFrom();
       openNewCard();
+      // hamr 2026-10-11 Q2(b): a spec that names no model (the server says so) opens the Model box; the pick rides the POST
       resumeRun = {runid: d.runid, noTime: typeof r.maxWallMin !== "number"};
+      if((d.prefill || {}).specNamesModel === false){ resumeRun.pickModel = true; if(d.prefill.specWorker){ resumeRun.worker = d.prefill.specWorker; } renderModelOptions(); }
       document.getElementById("job-card-title").textContent = "RESUME " + (d.title || d.runid);
       setVerdict(c.checkType === "rubric" ? "rubric" : "deterministic");
-      if(c.model){ modelSelect.value = c.model; }
-      setVal("jf-name", c.jobName); setVal("jf-goal", c.goal); setVal("jf-source", c.source);
-      setVal("jf-dest", c.destination); setVal("jf-success", c.success); setVal("jf-guardrails", c.guardrails);
-      setVal("jf-judge", c.judgeExamples);
+      if(c.model && !resumeRun.pickModel){ setPick(c); }
+      fillCard(c);
       setVal("jf-cap-money", r.budgetUsd);
       setVal("jf-cap-time", resumeRun.noTime ? "" : r.maxWallMin);
       document.getElementById("jf-cap-time").parentNode.hidden = resumeRun.noTime;
-      document.getElementById("jf-judge").disabled = c.checkType !== "rubric";
       originLine.textContent = "The same run goes on, not a new one. Only the money cap and the time cap can change; everything else is the signed job.";
       originLine.classList.add("res");
       originLine.hidden = false;
@@ -4300,16 +4778,21 @@
     document.addEventListener("bareloop-resume", function(e){ applyResume(e.detail || {}); });
     document.getElementById("chat-resume-cancel").addEventListener("click", function(){ resetCard(); });
     var resumeSignBtn = document.getElementById("chat-resume-sign");
+    // a Model pick that is needed (older spec) blocks Sign & resume until a ticked line is picked and its key is usable
+    function resumeSignBlocked(){ return resumeRun !== null && resumeRun.pickModel === true && (modelSelect.value === "" || !keyOk); }
+    function syncResumeSign(){ resumeSignBtn.disabled = resumeSignBlocked(); }
     function signResume(){
       var run = resumeRun;
       if(run === null) return;
+      if(resumeSignBlocked()) return;
       var err = document.getElementById("chat-resume-err");
       err.hidden = true;
       resumeSignBtn.disabled = true;
       var body = {budgetUsd: document.getElementById("jf-cap-money").value};
       if(!run.noTime){ body.maxWallMin = document.getElementById("jf-cap-time").value; }
+      if(run.pickModel){ var pk = pickParts(modelSelect.value); body.model = pk.model; if(pk.provider !== ""){ body.provider = pk.provider; } }
       return authorPost("/api/runs/" + encodeURIComponent(run.runid) + "/resume", body).then(function(res){
-        resumeSignBtn.disabled = false;
+        resumeSignBtn.disabled = resumeSignBlocked();
         if(res.body && res.body.ok){
           // the SAME run goes on: the card goes back to empty, the right side to its Run tab, which follows it until it is live again
           resetCard();
@@ -4319,7 +4802,7 @@
           err.textContent = (res.body && res.body.error) || ("refused (" + res.status + ")");
           err.hidden = false;
         }
-      }).catch(function(x){ resumeSignBtn.disabled = false; err.textContent = "could not reach the panel: " + x.message; err.hidden = false; });
+      }).catch(function(x){ resumeSignBtn.disabled = resumeSignBlocked(); err.textContent = "could not reach the panel: " + x.message; err.hidden = false; });
     }
     resumeSignBtn.addEventListener("click", signResume);
 
@@ -4400,6 +4883,7 @@
         if(!o.ok){ chatActionFailed(o.error); return; }
         openNewCard();
         chatActionOk();
+        lastMsgSig = null;
         thread.innerHTML = '<div class="msg system">' + escapeXml("The boxes are open as you drafted them. Edit what you want, then Start drafting. The first draft's cost stays counted.") + "</div>";
       }).catch(function(){ chatActionFailed("network error — could not reach the panel server, not revised"); });
     }