bareloop 0.35.0 → 0.37.0

package/src/panel/index.html

@@ -180,7 +180,7 @@
   .st-word{font-weight:700;color:var(--text);}
   .wf-ended-inline{flex:1 1 auto;white-space:normal;}
   .wf-compact{flex-wrap:wrap;}
-  .wf-rowmeta{margin-left:auto;}
+  .wf-runno{color:var(--accent);flex:none;}
   .step-state{display:inline-flex;align-items:center;gap:2px;font-size:12px;}
   .badge{display:inline-block;font-size:11px;padding:1px 4px;color:var(--text-dim);background:none;font-weight:700;}
   .badge::before{content:"[";color:var(--text-faint);}
@@ -272,10 +272,21 @@
   .import-view .imp-row{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;}
   .import-view .imp-label{color:var(--text-faint);font-size:11px;letter-spacing:0.08em;min-width:84px;}
   .import-view .imp-text{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;}
-  .startfrom-line{margin:2px 0 8px;font-size:12px;color:var(--accent);overflow-wrap:anywhere;}
+  .startfrom-line{margin:4px 0 0;font-size:11px;color:var(--text-dim);overflow-wrap:anywhere;}
   .job-card .locked{opacity:.55;cursor:not-allowed;}
-  .job-card.reuse .radio-row label{opacity:.55;cursor:not-allowed;}
-  .startfrom-origin{font-size:12px;font-weight:600;color:var(--text-dim);margin:0 0 4px;padding-right:112px;overflow-wrap:anywhere;}
+  /* Reuse workflow picker (hamr 2026-10-06): the third Check type radio; search box + list, then the picked box */
+  .radio-row label{white-space:nowrap;}
+  .rw-box{position:relative;margin-top:6px;}
+  .rw-box input{width:100%;box-sizing:border-box;}
+  .rw-list{list-style:none;margin:0;padding:0;border:1px solid var(--border-strong);border-top:none;background:var(--bg);max-height:220px;overflow:auto;}
+  .rw-list li{padding:7px 8px;border-bottom:1px dotted var(--border);cursor:pointer;}
+  .rw-list li:hover,.rw-list li.hl{background:var(--panel2);}
+  .rw-name{font-weight:700;overflow-wrap:anywhere;} .rw-name mark{background:none;color:var(--accent);text-decoration:underline;}
+  .rw-meta{font-size:11px;color:var(--text-dim);margin-top:2px;overflow-wrap:anywhere;}
+  .rw-empty{padding:7px 8px;font-size:12px;color:var(--text-dim);}
+  .rw-picked{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;padding:6px 8px;border:1px solid var(--accent);}
+  .rw-picked span{overflow-wrap:anywhere;}
+  .rw-picked a{font-size:12px;cursor:pointer;flex:none;}
   .run-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
   .run-actions[hidden]{display:none;}
   .run-actions .stopping{color:var(--amber);font-size:13px;overflow-wrap:anywhere;}
@@ -467,6 +478,7 @@
   .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;}
@@ -518,10 +530,8 @@
           <!-- hamr 2026-10-05: the empty card is ALWAYS there when Chat opens (no + New). The top-right button reads
                "Abandon" while a session is live and unsigned, else "Clear"; both leave an empty card. -->
           <div class="job-card compact" id="job-card" data-testid="job-card">
-            <div class="startfrom-origin" id="chat-startfrom-origin" data-testid="startfrom-origin" hidden></div>
             <h4 id="job-card-title">Job card — draft</h4>
             <button class="btn card-clear" type="button" id="chat-clear-btn" data-testid="chat-clear">Clear</button>
-            <div class="startfrom-line" id="chat-startfrom-line" data-testid="startfrom-line" hidden></div>
             <div class="hint" id="chat-startfrom-note" data-testid="startfrom-note" hidden></div>
 
             <div class="field">
@@ -529,6 +539,15 @@
               <div class="radio-row" role="radiogroup" aria-labelledby="jf-verdict-label">
                 <label><input type="radio" name="jf-verdict" value="deterministic" checked> Deterministic</label>
                 <label><input type="radio" name="jf-verdict" value="rubric"> Rubric</label>
+                <label><input type="radio" name="jf-verdict" value="reuse" data-testid="jf-verdict-reuse"> Reuse workflow</label>
+              </div>
+              <div id="rw" data-testid="rw" hidden>
+                <div class="rw-box" id="rw-search" data-testid="rw-search">
+                  <input id="rw-q" data-testid="rw-q" type="text" placeholder="type a job name…" autocomplete="off">
+                  <ul class="rw-list" id="rw-list" data-testid="rw-list"></ul>
+                </div>
+                <div class="rw-picked" id="rw-picked" data-testid="rw-picked" hidden><span id="rw-picked-txt" data-testid="rw-picked-txt"></span><a id="rw-change" data-testid="rw-change" role="button" tabindex="0">change</a></div>
+                <div class="startfrom-line" id="chat-startfrom-line" data-testid="startfrom-line" hidden></div>
               </div>
             </div>
             <div class="field">
@@ -742,21 +761,24 @@
       <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" data-testid="keyfile-path">the keys file (path loading…)</code>, then Reload keys — every key that has a value gets a row. Only names are listed; keys never reach this page.</span>
+            <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>
           </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>
           </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>
+              <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>
+        <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>
       </section>
@@ -946,9 +968,12 @@
   // jump straight to that SAME part's Audit-tab row (build item B's
   // click-through), with no re-lookup needed.
   function partBoxState(part, isLastLivePart){
+    // the drafting part happened before the run existed: it is always done
+    if(part.kind === "drafting") return "done";
     if(part.outcome === "green" || part.outcome === "satisfied" || part.outcome === "already-green") return "done";
     if(typeof part.outcome === "string") return "stopped";
     // P5-R: its leg's halt cut this part off — the map's existing "stopped" state, never "done"
+    if(part.status && part.status.key === "died") return "died";
     if(part.stopReason) return "stopped";
     if(isLastLivePart) return "running";
     return "done"; // scout/plan/replan/judge: no per-part verdict, but the part itself already happened
@@ -968,6 +993,7 @@
   // (a single-attempt step, or the whole "run" box on an old-shape spine)
   // reads the part's own outcome.
   function partResultGlyph(part, box){
+    if(part.kind === "drafting") return glyphSpan(attemptGlyph("green", false)); // [✓]: drafting is done once the run exists
     if(partHasNoVerdict(part)) return null;
     var boxIsLive = box.state === "running";
     if(box.attempts.length > 1) return box.attempts.map(function(a){ return glyphSpan(attemptGlyph(a.outcome, boxIsLive)); }).join("");
@@ -986,6 +1012,8 @@
         partIndex: idx,
         title: part.label + occSuffix,
         state: partBoxState(part, isLastLivePart),
+        // the word this box wears: the server's table entry for the part (src/panel/status.js partStatusFor), except the live part, which is running
+        status: isLastLivePart && partBoxState(part, true) === "running" ? {sign:"\u25B6", word:"running"} : (part.status || null),
         noNumber: part.kind !== "step",
         // display-only attempts (map inline text + card/audit result glyph
         // fallback) — [] for a no-verdict part kind even though `part.attempts`
@@ -1000,6 +1028,14 @@
       };
     });
   }
+  // ONE spelling of a part's shown state: `[sign] word` from the server's table; the raw state only when no table entry came
+  function boxStatusWord(box){
+    return box.status && box.status.word ? box.status.word : String(box.state);
+  }
+  // the map box adds the sign; step cards and Audit rows show the word only (an attempt glyph already sits beside them)
+  function boxStatusText(box){
+    return box.status && box.status.word ? "[" + box.status.sign + "] " + boxStatusWord(box) : boxStatusWord(box);
+  }
   function naturalBoxWidth(steps){
     var numIdx = stepNumberIndices(steps);
     var maxChars = 0;
@@ -1100,7 +1136,7 @@
           '" text-anchor="middle" font-size="12" fill="var(--text)">' + escapeXml(lines[1]) + '</text>';
       }
       body += '<text x="' + (x + boxW / 2) + '" y="' + stateY +
-        '" text-anchor="middle" font-size="10" fill="' + colors.textFill + '">' + escapeXml(s.state) + '</text>';
+        '" text-anchor="middle" font-size="10" fill="' + colors.textFill + '">' + escapeXml(boxStatusText(s)) + '</text>';
       // P2 (2026-09-27 ruling): a running box gets the mockup's pulsing
       // amber dot (design/panel-mockup.html ~line 1648) — same fixed color
       // and animation, never re-derived from the state's own stroke color.
@@ -1247,8 +1283,12 @@
     if(!d || isNaN(d.getTime())) return "unknown";
     return d.toLocaleString("en-US", {year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "2-digit"});
   }
-  // the right-side header: `[sign] job (runid) │ **word** — reason · ended 10/4/2026, 6:01 PM` (no capitals: the job
+  // the right-side header: `[sign] job (run-N) │ **word** — reason · ended 10/4/2026, 6:01 PM` (no capitals: the job
   // name is shown as written). `bodyHtml` is already escaped.
+  // a run's NAME for a person (P6 item 7): `job (run-N)`, N from the server (`runNo`, one owner) — the page never counts.
+  // A run with no number (an imported bundle's run is not in the run list) falls back to its id.
+  function runLabel(runNo, runid){ return typeof runNo === "number" ? "run-" + runNo : String(runid || ""); }
+  function runName(job, runNo, runid){ return job + " (" + runLabel(runNo, runid) + ")"; }
   function setRunHeader(sign, nameText, bodyHtml){
     document.getElementById("active-wf-name").textContent = nameText;
     document.getElementById("active-wf-dot").className = "dot " + glyphClass(sign);
@@ -1294,7 +1334,7 @@
     row.setAttribute("tabindex", "0");
     row.setAttribute("role", "button");
     row.setAttribute("aria-pressed", selected ? "true" : "false");
-    var histFullName = r.job + ' (' + r.runid + ')';
+    var histFullName = runName(r.job, r.runNo, r.runid);
     if(r.starting){
       row.innerHTML =
         '<span class="wf-line1"><span class="dot amber"></span>' +
@@ -1312,14 +1352,20 @@
         '<span class="wf-meta">' + escapeXml((r.at || "").slice(0,10) || "unknown") + '</span>' +
         '</span>';
     } else if(compact){
-      // an EXPANDED per-run row under a workflow: `[sign] **word** — reason   runid · $ · date`
+      // an EXPANDED per-run row under a workflow (hamr 2026-10-06), 2 lines, left-aligned:
+      //   `[sign] (run-N)  **word** — reason` / `$ ($drafting) · wall · date`
       row.innerHTML =
         '<span class="wf-line1 wf-compact"><span class="dot ' + glyphClass(r.glyph) + '"></span>' +
-        '<span class="wf-ended wf-ended-inline" title="' + escapeXml(histFullName) + '" data-testid="hist-ended-' + escapeXml(r.runid) + '">' + statusWordHtml(r.status, r.endedLine) + '</span>' +
-        '<span class="wf-meta wf-rowmeta">' + escapeXml(r.runid) + ' \u00B7 ' + escapeXml(rowSpendText(r)) + ' \u00B7 ' + escapeXml(r.date || "unknown") + '</span>' +
-        resumedTagHtml(r.resumedCount, "hist-resumed-" + r.runid) + '</span>';
+        '<span class="wf-name wf-runno" title="' + escapeXml(histFullName) + '" data-testid="hist-runno-' + escapeXml(r.runid) + '">(' + escapeXml(runLabel(r.runNo, r.runid)) + ')</span>' +
+        '<span class="wf-ended wf-ended-inline" data-testid="hist-ended-' + escapeXml(r.runid) + '">' + statusWordHtml(r.status, r.endedLine) + '</span></span>' +
+        '<span class="wf-meta-line">' +
+        '<span class="wf-meta">' + escapeXml(rowSpendText(r, true)) + '</span>' +
+        '<span class="wf-meta">' + escapeXml(rowWallText(r)) + '</span>' +
+        '<span class="wf-meta">' + escapeXml(r.date || "unknown") + '</span>' +
+        resumedTagHtml(r.resumedCount, "hist-resumed-" + r.runid) +
+        '</span>';
     } else {
-      // History card: line 1 sign + job (runid); line 2 **word** — reason; line 3 the facts
+      // History card: line 1 sign + job (run-N); line 2 **word** — reason; line 3 the facts
       row.innerHTML =
         '<span class="wf-line1"><span class="dot ' + glyphClass(r.glyph) + '"></span>' +
         '<span class="wf-name" title="' + escapeXml(histFullName) + '">' + escapeXml(histFullName) + '</span></span>' +
@@ -1370,6 +1416,7 @@
         runs: jobRuns,
         runCount: jobRuns.length,
         lastRunid: last.runid,
+        lastRunNo: last.runNo,
         lastAt: last.at,
         lastGlyph: last.glyph || "▶",
         lastStatus: last.status || null,
@@ -1377,7 +1424,7 @@
         lastResumedCount: last.resumedCount || 0,
         lastCheckType: last.checkType || "unknown",
         lastModel: last.model || null,
-        lastSpend: rowSpendText(last),
+        lastSpend: rowSpendText(last, true),
         lastWall: rowWallText(last) || "unknown",
         lastDate: last.date,
       };
@@ -1503,18 +1550,16 @@
       row.setAttribute("role", "button");
       row.setAttribute("aria-expanded", expanded ? "true" : "false");
       row.setAttribute("aria-pressed", isSelected ? "true" : "false");
-      var wfFullName = g.job + ' (' + g.lastRunid + ')';
+      var wfFullName = runName(g.job, g.lastRunNo, g.lastRunid);
       row.innerHTML =
-        '<span class="wf-line1"><span class="wf-caret">' + (hasOtherRuns ? (expanded ? "▼" : "▶") : "") + '</span><span class="dot ' + glyphClass(g.lastGlyph) + '"></span>' +
-        '<span class="wf-name" title="' + escapeXml(wfFullName) + '">' + escapeXml(wfFullName) + '</span></span>' +
-        (g.lastStatus ? '<span class="wf-ended" data-testid="wf-ended-' + escapeXml(g.job) + '">' + statusWordHtml(g.lastStatus, g.lastEndedLine) + '</span>' : '') +
+        '<span class="wf-line1 wf-compact"><span class="wf-caret">' + (hasOtherRuns ? (expanded ? "▼" : "▶") : "") + '</span><span class="dot ' + glyphClass(g.lastGlyph) + '"></span>' +
+        '<span class="wf-name" title="' + escapeXml(wfFullName) + '">' + escapeXml(wfFullName) + '</span>' +
+        (g.lastStatus ? '<span class="wf-ended wf-ended-inline" data-testid="wf-ended-' + escapeXml(g.job) + '">' + statusWordHtml(g.lastStatus, g.lastEndedLine) + '</span>' : '') + '</span>' +
         '<span class="wf-meta-line">' +
         '<span class="wf-meta">' + escapeXml(g.lastCheckType) + '</span>' +
         '<span class="wf-meta">' + escapeXml(g.lastSpend) + '</span>' +
         '<span class="wf-meta">' + escapeXml(g.lastWall) + '</span>' +
         '<span class="wf-meta">' + escapeXml(g.lastDate || "unknown") + '</span>' +
-        resumedTagHtml(g.lastResumedCount, "wf-resumed-" + g.job) +
-        '<span class="wf-meta">' + g.runCount + ' run' + (g.runCount === 1 ? '' : 's') + '</span>' +
         '</span>';
       row.addEventListener("click", function(){
         // a single-run job has nothing to expand — the click still opens
@@ -1559,7 +1604,7 @@
   function filterBarHTML(scope){
     return (
       '<div class="filterbar" data-scope="' + scope + '" data-testid="' + scope + '-filters">' +
-        '<input type="text" class="search-input" placeholder="search job, run id or model…" ' +
+        '<input type="text" class="search-input" placeholder="search job, run-N, run id or model…" ' +
           'id="' + scope + '-filter-search" data-testid="' + scope + '-filter-search" autocomplete="off">' +
         '<div class="chips" role="group" aria-label="Filter">' +
           '<button class="chip fchip" type="button" aria-pressed="false" data-filter-group="checkType" data-filter-value="deterministic" title="deterministic" data-testid="chip-' + scope + '-ct-deterministic">D</button>' +
@@ -1588,15 +1633,18 @@
   // means "no search filter" — everything passes it, same posture as an
   // empty chip group). item C (2026-09-26): also matches the run's model
   // name (e.g. "deepseek", "sonnet") — `model` is `null`/absent on an older
-  // archived run, same posture as a missing job/runid.
-  function matchesSearch(job, runid, model, query){
+  // archived run, same posture as a missing job/runid. Also the run's shown
+  // name: `run-N` and `job (run-N)` (N is the server's `runNo`, never counted here).
+  function matchesSearch(job, runid, model, query, runNo){
     if(!query) return true;
     var q = String(query).trim().toLowerCase();
     if(!q) return true;
     var j = String(job || "").toLowerCase();
     var r = String(runid || "").toLowerCase();
     var m = String(model || "").toLowerCase();
-    return j.indexOf(q) !== -1 || r.indexOf(q) !== -1 || m.indexOf(q) !== -1;
+    var label = typeof runNo === "number" ? "run-" + runNo : "";
+    var shown = label ? j + " (" + label + ")" : "";
+    return j.indexOf(q) !== -1 || r.indexOf(q) !== -1 || m.indexOf(q) !== -1 || (label !== "" && (label.indexOf(q) !== -1 || shown.indexOf(q) !== -1));
   }
   function filterRuns(runs, filters, nowMs){
     nowMs = (typeof nowMs === "number") ? nowMs : Date.now();
@@ -1607,7 +1655,7 @@
     return (runs || []).filter(function(r){
       if(ct.length && ct.indexOf(r.checkType) === -1) return false;
       if(rs.length && rs.indexOf(r.glyph) === -1) return false;
-      if(!matchesSearch(r.job, r.runid, r.model, q)) return false;
+      if(!matchesSearch(r.job, r.runid, r.model, q, r.runNo)) return false;
       if(time !== "all"){
         var days = time === "7d" ? 7 : 30;
         var t = typeof r.at === "string" ? Date.parse(r.at) : NaN;
@@ -2101,15 +2149,16 @@
    * complete run whose drafting share is itself incomplete — hamr's ruling:
    * a reader summing the two must never read the leading number as exact
    * when the bracket next to it isn't). `draftSpendComplete === false` marks
-   * the bracket itself a floor. `budgetUsd` (when given) appends " of $X.XX".
+   * the bracket itself a floor. `budgetUsd` (when given) appends " of $X.XX". `shortForm` drops the word
+   * "drafting" (the Runs list cards only — "$5.00 ($0.08)").
    */
-  function panelMoneyWithDraft(spendCoreVal, spendCoreFloor, draftSpentUsd, draftSpendComplete, budgetUsd){
+  function panelMoneyWithDraft(spendCoreVal, spendCoreFloor, draftSpentUsd, draftSpendComplete, budgetUsd, shortForm){
     var hasDraft = typeof draftSpentUsd === "number" && draftSpentUsd !== null;
     var draftFloor = hasDraft && draftSpendComplete === false;
     var core = (spendCoreVal === null || spendCoreVal === undefined)
       ? "unknown"
       : ((spendCoreFloor || draftFloor) ? "at least " + panelMoney(spendCoreVal) : panelMoney(spendCoreVal));
-    var draftPart = hasDraft ? " (" + (draftFloor ? "at least " : "") + panelMoney(draftSpentUsd) + " drafting)" : "";
+    var draftPart = hasDraft ? " (" + (draftFloor ? "at least " : "") + panelMoney(draftSpentUsd) + (shortForm ? ")" : " drafting)") : "";
     var capPart = (budgetUsd === undefined) ? "" : (" of " + panelMoney(budgetUsd));
     return core + draftPart + capPart;
   }
@@ -2134,13 +2183,13 @@
    * is a floor only when its own drafting share is incomplete.
    * @param {any} r a `/api/runs` row (or a Workflows group's `last` row)
    */
-  function rowSpendText(r){
+  function rowSpendText(r, shortForm){
     if(r.starting) return "starting…";
-    if(rowIsLive(r)) return liveSpendText(r.spendFloorUsd, r.draftSpentUsd, r.draftSpendComplete);
+    if(rowIsLive(r)) return liveSpendText(r.spendFloorUsd, r.draftSpentUsd, r.draftSpendComplete, shortForm);
     var draftIncomplete = typeof r.draftSpentUsd === "number" && r.draftSpentUsd !== null && r.draftSpendComplete === false;
     var coreVal = r.died ? r.spendFloorUsd : r.spentUsd;
     var coreFloor = !!r.died || draftIncomplete;
-    return panelMoneyWithDraft(coreVal, coreFloor, r.draftSpentUsd, r.draftSpendComplete);
+    return panelMoneyWithDraft(coreVal, coreFloor, r.draftSpentUsd, r.draftSpendComplete, undefined, shortForm);
   }
   function duration(ms){
     if(ms === null || ms === undefined) return "unknown";
@@ -2163,11 +2212,11 @@
    * @param {number|null} spendFloorUsd @param {number|null} draftSpentUsd
    * @param {boolean|null} draftSpendComplete @returns {string}
    */
-  function liveSpendText(spendFloorUsd, draftSpentUsd, draftSpendComplete){
+  function liveSpendText(spendFloorUsd, draftSpentUsd, draftSpendComplete, shortForm){
     if(spendFloorUsd === null || spendFloorUsd === undefined) return "unknown";
     var hasDraft = typeof draftSpentUsd === "number" && draftSpentUsd !== null;
     var draftFloor = hasDraft && draftSpendComplete === false;
-    var draftPart = hasDraft ? " (" + (draftFloor ? "at least " : "") + panelMoney(draftSpentUsd) + " drafting)" : "";
+    var draftPart = hasDraft ? " (" + (draftFloor ? "at least " : "") + panelMoney(draftSpentUsd) + (shortForm ? ")" : " drafting)") : "";
     return panelMoney(spendFloorUsd) + " so far" + draftPart;
   }
   /** build item 6 — the matching wall-clock phrase: "running <duration>",
@@ -2340,8 +2389,9 @@
   var stopAsked = {};
   // Reuse workflow (replaces P5 item 3's Start from this) — ask the server for the prefill (the signed job), then
   // hand it to the Chat tab's New job card. The page decides nothing: the server owns what is locked and what is open.
-  function reuseWorkflow(runid){
-    authorGet("/api/author/start-from?runid=" + encodeURIComponent(runid)).then(function(r){
+  // `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){
       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}}));
@@ -2474,7 +2524,7 @@
 
   function renderRun(detail){
     if(detail.fileMissing){
-      setRunHeader("\u00B7", detail.job + " (" + detail.runid + ")", "file missing");
+      setRunHeader("\u00B7", runName(detail.job, detail.runNo, detail.runid), "file missing");
       document.getElementById("run-empty").hidden = false;
       document.getElementById("run-empty").textContent = "spine file no longer on disk";
       document.getElementById("run-content").hidden = true;
@@ -2485,7 +2535,7 @@
     }
 
     if(detail.starting){
-      setRunHeader("\u25B6", detail.job + " (" + detail.runid + ")", statusWordHtml(detail.status, "starting\u2026") + " \u00B7 " + escapeXml("started " + fmtLocalDateTime(detail.at)));
+      setRunHeader("\u25B6", runName(detail.job, detail.runNo, detail.runid), statusWordHtml(detail.status, "starting\u2026") + " \u00B7 " + escapeXml("started " + fmtLocalDateTime(detail.at)));
       document.getElementById("run-empty").hidden = false;
       document.getElementById("run-empty").textContent = "starting… the run has not written its log yet";
       document.getElementById("run-content").hidden = true;
@@ -2498,7 +2548,7 @@
     document.getElementById("audit-body").hidden = false;
     renderEnded(detail);
 
-    setRunHeader(detail.glyph, detail.job + " (" + detail.runid + ")", runHeaderBody(detail));
+    setRunHeader(detail.glyph, runName(detail.job, detail.runNo, detail.runid), runHeaderBody(detail));
 
     document.getElementById("run-empty").hidden = true;
     document.getElementById("run-content").hidden = false;
@@ -2608,7 +2658,7 @@
           (box.blocked > 0 ? '<span class="badge red" data-testid="part-blocked-badge">' + box.blocked + ' blocked</span>' : '') +
         '</div>' +
         '<div class="step-meta" title="a part is one piece of the run (scout, plan, a step, replan, fix, judge); a call is one model round">' + line1Bits.join(" &middot; ") + '</div>' +
-        '<div class="step-meta">' + escapeXml(toolBreakdownLine(box.part.byTool)) + '</div>';
+        '<div class="step-meta">' + escapeXml(partLine2Text(box.part)) + '</div>';
       listEl.appendChild(card);
       var jumpToAudit = function(){
         document.getElementById("tab-audit").click();
@@ -2630,7 +2680,7 @@
   // ONE spelling of a step's state: its dot + the bold state word — read by the Run tab's step cards AND the Audit tab's grouped rows
   function stepStateHTML(box, testid){
     var cls = box.state === "done" ? "green" : (box.state === "stopped" ? "red" : (box.state === "running" ? "amber" : (box.state === "died" ? "magenta" : "grey")));
-    return '<span class="step-state" data-testid="' + testid + '"><span class="dot ' + cls + '"></span><b class="st-word">' + escapeXml(box.state) + '</b></span>';
+    return '<span class="step-state" data-testid="' + testid + '"><span class="dot ' + cls + '"></span><b class="st-word">' + escapeXml(boxStatusWord(box)) + '</b></span>';
   }
   // build item C: Audit tab attempt row -> its rounds (server-built,
   // lazy-fetched on expand via /api/runs/:runid/rounds?part=<i>&attempt=<n>).
@@ -2769,6 +2819,46 @@
   // shows — expand -> attempts (parts with >1, e.g. a multi-attempt step or
   // the fix loop) or straight to a rounds table (every other part kind,
   // which carries exactly one synthetic whole-part attempt).
+  // The DRAFTING part (a panel-authored run's first part; src/draftspend.js `draftingPartFor`): ONE owner of its
+  // money wording, line 1, line 2 and its Audit table. Money is the spine's own drafting figure ("at least" when it
+  // is a floor); a call with no price reads "unknown", never $0.
+  function draftingMoneyText(part){
+    return (part.spendComplete === false ? "at least " : "") + panelMoney(part.spentUsd);
+  }
+  function draftingLine1Text(part){
+    var n = typeof part.rounds === "number" ? part.rounds : 0;
+    return (part.wallMs === null || part.wallMs === undefined ? "–" : duration(part.wallMs)) + " &middot; " + draftingMoneyText(part) + " &middot; " + n + " call" + (n === 1 ? "" : "s");
+  }
+  // line 2 of a part's card / Audit body: the drafting step names, or a worker part's tool breakdown
+  function partLine2Text(part){
+    if(part && part.kind === "drafting") return (part.draftSteps || []).map(function(x){ return x.label; }).join(" · ");
+    return toolBreakdownLine(part.byTool);
+  }
+  function draftingCallCost(c){
+    if(c.costUsd === null || c.costUsd === undefined) return "unknown";
+    if(c.unpricedRounds > 0) return "unknown (" + c.unpricedRounds + " unpriced round" + (c.unpricedRounds === 1 ? "" : "s") + ")";
+    return panelMoney(c.costUsd);
+  }
+  // one row per drafting step ("–" where it made no call); a step's further calls get their own row named by the
+  // call's own label (confirm#2, revise-1…); the last row is the total, equal to the header's money
+  function draftingTableHtml(part){
+    var rows = "";
+    (part.draftSteps || []).forEach(function(st){
+      var wall = st.wallMs === null || st.wallMs === undefined ? "–" : duration(st.wallMs);
+      var calls = Array.isArray(st.calls) ? st.calls : [];
+      var first = calls[0];
+      rows += "<tr><td>" + escapeXml(st.label) + "</td><td>" + wall + "</td><td>" + (first ? "1" : "–") + "</td><td>" +
+        (first && first.model ? escapeXml(first.model) : "–") + "</td><td>" + (first ? draftingCallCost(first) : "–") + "</td></tr>";
+      calls.slice(1).forEach(function(c){
+        rows += "<tr><td>" + escapeXml(st.label) + " (" + escapeXml(c.label) + ")</td><td>–</td><td>1</td><td>" +
+          (c.model ? escapeXml(c.model) : "–") + "</td><td>" + draftingCallCost(c) + "</td></tr>";
+      });
+    });
+    rows += '<tr class="drafting-total"><td><b>total</b></td><td>' + (part.wallMs === null || part.wallMs === undefined ? "–" : duration(part.wallMs)) +
+      "</td><td>" + (typeof part.rounds === "number" ? part.rounds : 0) + "</td><td>–</td><td>" + draftingMoneyText(part) + "</td></tr>";
+    return '<div class="audit-table-scroll"><table class="rounds-table drafting-table" data-testid="drafting-table">' +
+      "<thead><tr><th>Step</th><th>Time</th><th>Calls</th><th>Model</th><th>Cost</th></tr></thead><tbody>" + rows + "</tbody></table></div>";
+  }
   function partHasWrites(part){
     var bt = part.byTool;
     if(!bt) return false;
@@ -2798,6 +2888,7 @@
    * @returns {string}
    */
   function partLine1Text(part, detail){
+    if(part && part.kind === "drafting") return draftingLine1Text(part);
     var isLiveRunPart = part && part.kind === "run" && detail && !detail.died && detail.spentUsd === null;
     var wallText = (isLiveRunPart && part.wallMs === null) ? liveWallPhrase(detail.wallFloorMs) : duration(part.wallMs);
     var spendText = (isLiveRunPart && part.spentUsd === null)
@@ -3016,9 +3107,15 @@
         built = true;
         var toolsHeader = document.createElement("div");
         toolsHeader.className = "hint";
-        toolsHeader.textContent = toolBreakdownLine(part.byTool);
+        toolsHeader.textContent = partLine2Text(part);
         body.appendChild(toolsHeader);
-        if(attempts.length > 1){
+        if(part.kind === "drafting"){
+          // no tool calls and no rounds: one row per drafting step instead (the drafting part is index 0 of the
+          // shown list; the rounds endpoint has nothing to serve for it)
+          var draftingEl = document.createElement("div");
+          draftingEl.innerHTML = draftingTableHtml(part);
+          body.appendChild(draftingEl);
+        } else if(attempts.length > 1){
           // parts WITH an attempt sub-loop (a multi-attempt step, or the fix
           // loop) expand to attempt rows first — each attempt expands to its
           // own rounds table on its own click, same as the Run tab used to.
@@ -3480,7 +3577,7 @@
       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 = kf.path;
+        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);
@@ -3500,8 +3597,10 @@
               ? '<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>';
+            + "<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"));
@@ -3515,6 +3614,16 @@
         document.dispatchEvent(new CustomEvent("bareloop-providers-changed"));
       }).catch(function(){ pvNote.textContent = "could not read providers"; });
     }
+    // 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 };
+    }
     pvRows.addEventListener("change", function(e){
       var t = e.target;
       var tr = t.closest("tr");
@@ -3525,14 +3634,17 @@
         }).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;
+      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");
-      authorPost("/api/settings/providers/row", {
-        envName: env,
+      var rowBody = pvRowBody(env, {
         name: tr.querySelector(".pv-name").value,
         shape: tr.querySelector(".pv-shape").value,
         baseUrl: tr.querySelector(".pv-url").value,
-      }).then(function(r){
+        priceIn: tr.querySelector(".pv-price-in").value,
+        priceOut: tr.querySelector(".pv-price-out").value,
+      });
+      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"));
@@ -3549,6 +3661,14 @@
       }).catch(function(){ out.textContent = "failed — no answer"; }).then(function(){ t.disabled = false; });
     });
     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"; });
+    });
     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
@@ -3604,9 +3724,11 @@
     // Reuse workflow — set when the card was opened by [Reuse workflow]: the run (or imported job) it came from.
     // Only Source, Destination and the two caps are open on that card; the SERVER refuses any other change.
     var startFrom = null;
+    // the picked job's OWN check type: with the Check type radio on "Reuse workflow" the card's checkType comes from here, never from the radio
+    var reuseCheckType = "deterministic";
+    var reusePickedName = "";
     var reuseSession = false;
     var autoSigned = false;
-    var sfOrigin = document.getElementById("chat-startfrom-origin");
     var sfLine = document.getElementById("chat-startfrom-line");
     var sfNote = document.getElementById("chat-startfrom-note");
     // the locked boxes of a reuse card: the signed workflow, greyed and not editable (the server refuses a change anyway)
@@ -3621,7 +3743,8 @@
       LOCKED_IDS.forEach(function(id){ setLock(id, reuseOn || live); });
       OPEN_IDS.forEach(function(id){ setLock(id, live); });
       document.getElementById("jf-model").disabled = live;
-      document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.disabled = reuseOn || live; });
+      // the Check type radios stay clickable on a reuse card (Deterministic / Rubric = leave reuse); only a live session freezes them
+      document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.disabled = live; });
       document.getElementById("job-card").classList.toggle("reuse", reuseOn);
       if(!reuseOn && !live){ var ck = document.querySelector('input[name="jf-verdict"]:checked'); document.getElementById("jf-judge").disabled = !ck || ck.value !== "rubric"; }
     }
@@ -3632,11 +3755,105 @@
         ["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 = ""; });
         document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.checked = (r.value === "deterministic"); });
       }
-      startFrom = null; reuseSession = false; autoSigned = false;
-      sfOrigin.hidden = true; sfLine.hidden = true; sfNote.hidden = true;
+      startFrom = null; reuseSession = false; autoSigned = false; reuseCheckType = "deterministic";
+      sfLine.hidden = true; sfNote.hidden = true;
       setReuseLocked(false);
+      renderPicker();
       renderMain();
     }
+    // ---- 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 rwBox = document.getElementById("rw");
+    var rwSearch = document.getElementById("rw-search");
+    var rwQ = document.getElementById("rw-q");
+    var rwList = document.getElementById("rw-list");
+    var rwPicked = document.getElementById("rw-picked");
+    var rwPickedTxt = document.getElementById("rw-picked-txt");
+    var rwJobs = null;
+    var rwFailed = false;
+    var rwShown = [];
+    var rwHl = 0;
+    function verdictValue(){
+      var ck = document.querySelector('input[name="jf-verdict"]:checked');
+      return ck ? ck.value : "deterministic";
+    }
+    function setVerdict(v){
+      document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.checked = (r.value === v); });
+    }
+    function clearCardBoxes(){
+      CARD_BOX_IDS.forEach(function(id){ document.getElementById(id).value = ""; });
+      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
+    // pick, the picked box (+ the estimate line under it) after. A re-attached reuse session shows as picked too.
+    function renderPicker(){
+      var on = verdictValue() === "reuse";
+      var picked = on && (startFrom !== null || reuseSession);
+      rwBox.hidden = !on;
+      rwSearch.hidden = picked;
+      rwPicked.hidden = !picked;
+      rwPickedTxt.innerHTML = picked ? "<b>" + escapeXml(reusePickedName) + "</b>" : "";
+      if(!picked) sfLine.hidden = true;
+    }
+    function rwMark(name, q){
+      var i = q ? name.toLowerCase().indexOf(q.toLowerCase()) : -1;
+      if(i < 0) return escapeXml(name);
+      return escapeXml(name.slice(0, i)) + "<mark>" + escapeXml(name.slice(i, i + q.length)) + "</mark>" + escapeXml(name.slice(i + q.length));
+    }
+    // the server's estimate line, prefixed with the job's check type (the line itself does not carry it)
+    function rwMeta(j){ return j.checkType + " · " + String(j.line || "").replace(/^Same job — /, ""); }
+    function renderReuseList(){
+      var q = rwQ.value.trim();
+      var all = rwJobs || [];
+      rwShown = all.filter(function(j){ return j.job.toLowerCase().indexOf(q.toLowerCase()) !== -1; });
+      if(rwHl >= rwShown.length) rwHl = 0;
+      if(rwShown.length){
+        rwList.innerHTML = rwShown.map(function(j, i){
+          return '<li data-i="' + i + '" data-testid="rw-item" class="' + (i === rwHl ? "hl" : "") + '"><div class="rw-name">' + rwMark(j.job, q) + '</div><div class="rw-meta">' + escapeXml(rwMeta(j)) + "</div></li>";
+        }).join("");
+      } else {
+        rwList.innerHTML = '<div class="rw-empty" data-testid="rw-empty">' + (rwFailed ? "Could not load the job list."
+          : (all.length === 0 ? "No green jobs yet." : 'No green job matches "' + escapeXml(q) + '".')) + "</div>";
+      }
+    }
+    function loadReuseJobs(){
+      authorGet("/api/author/reuse-jobs" + (modelSelect.value ? "?model=" + encodeURIComponent(modelSelect.value) : "")).then(function(r){
+        rwFailed = !(r && r.ok);
+        rwJobs = rwFailed ? null : r.jobs;
+        renderReuseList();
+      }).catch(function(){ rwFailed = true; rwJobs = null; renderReuseList(); });
+    }
+    // the empty search state: card emptied, nothing picked, Sign & run disabled until a job is picked
+    function openPicker(){
+      clearCardBoxes();
+      rwQ.value = ""; rwHl = 0;
+      document.getElementById("jf-judge").disabled = true;
+      renderPicker();
+      renderReuseList();
+      loadReuseJobs();
+      refreshStartEnabled();
+      rwQ.focus();
+    }
+    function pickReuseJob(j){ if(j) reuseWorkflow(j.runid, 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(); }
+      else if(e.key === "ArrowUp"){ rwHl = Math.max(rwHl - 1, 0); renderReuseList(); e.preventDefault(); }
+      else if(e.key === "Enter" && rwShown[rwHl]){ e.preventDefault(); pickReuseJob(rwShown[rwHl]); }
+    });
+    rwList.addEventListener("click", function(e){
+      var li = e.target.closest ? e.target.closest("li") : null;
+      if(li) pickReuseJob(rwShown[Number(li.getAttribute("data-i"))]);
+    });
+    // `change` = back to the empty search state; the radio stays on Reuse workflow
+    function unpickReuse(){
+      clearStartFrom();
+      setVerdict("reuse");
+      openPicker();
+    }
+    document.getElementById("rw-change").addEventListener("click", unpickReuse);
     function openNewCard(){
       card.hidden = false;
       thread.innerHTML = "";
@@ -3667,12 +3884,12 @@
     // back to a fresh empty card: every box, check type deterministic, the default (first) Model, origin/estimate/notes
     // hidden, progress list and thread cleared, reuse lock lifted
     function resetCard(){
-      ["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 = ""; });
-      document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.checked = (r.value === "deterministic"); });
+      clearCardBoxes();
+      setVerdict("deterministic");
       document.getElementById("jf-judge").disabled = true;
       modelSelect.selectedIndex = 0;
       msgInput.value = "";
-      document.getElementById("jf-cap-note").textContent = "";
+      rwQ.value = "";
       lastPhase = null;
       clearStartFrom();
       openNewCard();
@@ -3694,7 +3911,8 @@
       var moneyCap = Number(document.getElementById("jf-cap-money").value);
       var timeCapMin = document.getElementById("jf-cap-time").value.trim();
       return {
-        checkType: document.querySelector('input[name="jf-verdict"]:checked').value === "rubric" ? "rubric" : "deterministic",
+        // 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,
         jobName: document.getElementById("jf-name").value.trim(),
         goal: document.getElementById("jf-goal").value.trim(),
@@ -3718,7 +3936,8 @@
     function refreshStartEnabled(){
       var v = Number(moneyCapInput.value);
       var capOk = moneyCapInput.value.trim() !== "" && Number.isFinite(v) && v > 0;
-      startOk = capOk && !sessionLive && keyOk;
+      // on Reuse workflow nothing starts before a job is picked
+      startOk = capOk && !sessionLive && keyOk && (verdictValue() !== "reuse" || startFrom !== null);
       syncCardLock();
       renderMain();
       refreshClearBtn();
@@ -3741,11 +3960,21 @@
     });
     // the limit changed in Settings: re-read the note for whatever cap is typed
     document.addEventListener("bareloop-limit-changed", refreshCapNote);
+    // Check type: Deterministic / Rubric / Reuse workflow. Reuse opens the picker on an empty card; Deterministic or
+    // Rubric while the picker is showing (picked or not) LEAVES reuse — the empty card on that type (clearStartFrom).
+    function onVerdictChange(v){
+      if(v === "reuse"){ if(rwBox.hidden) openPicker(); return; }
+      if(!rwBox.hidden){
+        clearStartFrom();
+        clearCardBoxes();
+        setVerdict(v);
+        renderPicker();
+      }
+      document.getElementById("jf-judge").disabled = v !== "rubric";
+      refreshStartEnabled();
+    }
     document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){
-      r.addEventListener("change", function(){
-        var isRubric = document.querySelector('input[name="jf-verdict"]:checked').value === "rubric";
-        document.getElementById("jf-judge").disabled = !isRubric;
-      });
+      r.addEventListener("change", function(){ onVerdictChange(r.value); });
     });
 
     // build item 7 / build item 5 (2026-09-28) — key + reachability, $0,
@@ -3818,10 +4047,11 @@
       var q = (startFrom.importId ? "import=" + encodeURIComponent(startFrom.importId) : "runid=" + encodeURIComponent(startFrom.runid)) +
         "&model=" + encodeURIComponent(modelSelect.value);
       authorGet("/api/author/start-from?" + q).then(function(r){
-        if(startFrom && r && r.ok){ sfLine.textContent = r.line || ""; }
+        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.
     function loadModels(){
@@ -3940,7 +4170,7 @@
       var open = askBoxOpenFor(st);
       msgInput.disabled = !open;
       if(!open) msgInput.value = "";
-      var b = mainButtonFor(st, !msgInput.value.trim(), !!startFrom);
+      var b = mainButtonFor(st, !msgInput.value.trim(), !!startFrom || verdictValue() === "reuse");
       mainBtn.textContent = b.text;
       mainBtn.disabled = b.disabled;
       mainAction = b.action;
@@ -3960,6 +4190,11 @@
     function fitCardBoxes(){
       ["jf-goal", "jf-source", "jf-dest", "jf-success", "jf-guardrails", "jf-judge"].forEach(function(id){ fitBox(document.getElementById(id)); });
     }
+    // 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){
+      var box = document.getElementById(id);
+      box.addEventListener("input", function(){ fitBox(box); });
+    });
     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
@@ -4055,7 +4290,9 @@
       reuseSession = st.reuse === true;
       autoSigned = false;
       signClickedOnce = reuseSession;
-      document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){ r.checked = (r.value === (c.checkType === "rubric" ? "rubric" : "deterministic")); });
+      reuseCheckType = c.checkType === "rubric" ? "rubric" : "deterministic";
+      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>");
@@ -4068,6 +4305,8 @@
       setVal("jf-cap-time", typeof c.maxWallMs === "number" ? Math.round(c.maxWallMs / 60000) : "");
       document.getElementById("jf-judge").disabled = c.checkType !== "rubric";
       if(reuseSession) setReuseLocked(true);
+      renderPicker();
+      fitCardBoxes();
       renderMessages(st);
       renderActions(st);
       if(pollTimer) clearInterval(pollTimer);
@@ -4086,15 +4325,17 @@
 
     // ---- 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); }
-    document.addEventListener("bareloop-reuse", function(e){
-      var d = e.detail || {};
+    // 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){
       var pre = d.prefill || {};
       var c = pre.card || {};
       clearStartFrom();
       openNewCard();
       startFrom = d.importId ? {importId: d.importId} : {runid: d.runid};
-      var radios = document.querySelectorAll('input[name="jf-verdict"]');
-      radios.forEach(function(r){ r.checked = (r.value === (c.checkType === "rubric" ? "rubric" : "deterministic")); });
+      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);
@@ -4102,10 +4343,9 @@
       setVal("jf-cap-time", typeof c.maxWallMs === "number" ? Math.round(c.maxWallMs / 60000) : "");
       document.getElementById("jf-judge").disabled = c.checkType !== "rubric";
       setReuseLocked(true);
-      sfOrigin.hidden = false;
-      sfOrigin.textContent = "Reuse: " + ((pre.origin && pre.origin.job) || "job") + (d.runid ? " (run " + d.runid + ")" : " (imported)");
+      renderPicker();
       sfLine.hidden = false;
-      sfLine.textContent = pre.line || "";
+      sfLine.textContent = pre.line ? rwMeta({checkType: reuseCheckType, line: pre.line}) : "";
       sfLine.className = "startfrom-line";
       sfNote.hidden = !pre.note;
       sfNote.textContent = pre.note || "";
@@ -4113,7 +4353,8 @@
       refreshReuseLine();
       refreshCapNote();
       refreshStartEnabled();
-    });
+    }
+    document.addEventListener("bareloop-reuse", function(e){ applyReuse(e.detail || {}); });
 
     // build item 1 — the "lost answer" fix. ROOT CAUSE: `renderActions`
     // (fed by the every-2s `poll()`) unconditionally overwrites