bareloop 0.38.0 → 0.40.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;}
@@ -311,9 +314,28 @@
   .imported-box .summary-row{flex-wrap:wrap;}
   .imported-box .sum-val{flex:1 1 180px;min-width:0;overflow-wrap:anywhere;}
 
-  .map-box{border:1px solid var(--border-strong);padding:10px;overflow-x:auto;margin-top:16px;margin-bottom:14px;background:var(--panel2);}
+  .map-box{border:1px solid var(--border-strong);padding:10px;margin-top:16px;margin-bottom:14px;background:var(--panel2);}
   .map-box::before{content:"┤ MAP ├";display:block;font-size:11px;color:var(--text-faint);letter-spacing:0.08em;margin:-2px 0 8px 0;}
-  .map-box svg{display:block;max-width:100%;height:auto;}
+  /* ruling 1A: chips as wide as their own text, side by side, wrapping — a name is never truncated */
+  .map-chips{display:flex;flex-wrap:wrap;gap:8px 4px;align-items:flex-start;padding-left:1.4em;}
+  /* ruling A: a step + its trailing arrow are ONE unit (the arrow never wraps alone); the lead arrow of a wrapped line
+     hangs in the container's left padding (absolute, zero layout impact — toggling it can never move a chip) */
+  .map-item{position:relative;display:inline-flex;align-items:center;gap:4px;max-width:100%;}
+  .map-arrow{color:var(--text-dim);font-size:13px;flex:none;}
+  .map-lead{display:none;position:absolute;left:-1.3em;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:13px;}
+  .map-item.line-start .map-lead{display:block;}
+  .chip-retry{color:var(--text-dim);font-size:11px;}
+  .map-chip{display:inline-block;width:auto;max-width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:12px;line-height:1.4;text-align:left;padding:4px 8px;border:2px solid var(--border-strong);border-radius:0;background:var(--panel2);color:var(--text-faint);white-space:normal;overflow-wrap:anywhere;}
+  button.map-chip{cursor:pointer;}
+  .map-chip.s-done{border-color:var(--green);color:var(--text);} .map-chip.s-done .chip-sign{color:#2e7d32;}
+  .map-chip.s-running{border-color:var(--amber);color:var(--text);} .map-chip.s-running .chip-sign{color:#b8860b;}
+  .map-chip.s-stopped{border-color:var(--red);color:var(--text);} .map-chip.s-stopped .chip-sign{color:var(--red);}
+  .map-chip.s-died{border-color:var(--magenta);color:var(--text);} .map-chip.s-died .chip-sign{color:var(--magenta);}
+  .map-chip.retry{border-style:dashed;}
+  .map-chip.resumed-next{border-right-style:dotted;}
+  .map-chip .chip-blocked{color:var(--red);font-size:10px;}
+  .map-chip.s-running .chip-sign{animation:chip-pulse 1.2s infinite;}
+  @keyframes chip-pulse{0%,100%{opacity:1}50%{opacity:0.3}}
   .map-key{display:flex;gap:14px;font-size:11px;color:var(--text-dim);margin-top:6px;flex-wrap:wrap;}
 
   .step-card{position:relative;border:1px solid var(--border);padding:10px;margin-bottom:8px;background:var(--panel2);}
@@ -447,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) */
@@ -564,29 +621,23 @@
               <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">
@@ -613,7 +664,7 @@
                animated dots, then a check or a cross with its code-owned reason; chat turns stay in the thread above it, right over the ask box. -->
           <ol class="chat-steps" id="chat-progress-row" data-testid="chat-steps" aria-live="polite" hidden></ol>
 
-          <!-- build item 1 — a failed/rejected send, revise, sign-prepare,
+          <!-- build item 1 — a failed/rejected send, revise (reopen), sign-prepare,
                sign or check-deps POST shows here and STAYS shown: it is set
                only by this tab's own action handlers below and is never
                touched by renderActions()/poll() (which own #chat-card-error
@@ -623,10 +674,12 @@
 
           <div class="chat-input-row">
             <label for="chat-msg" style="display:none">Message</label>
-            <textarea id="chat-msg" rows="2" placeholder="Ask for a change, or reply to the plan…" data-testid="chat-msg"></textarea>
+            <textarea id="chat-msg" rows="2" placeholder="Answer here when the draft asks you a question…" data-testid="chat-msg"></textarea>
           </div>
           <button class="btn primary wide" type="button" id="chat-main-btn" data-testid="chat-main" disabled>Start drafting</button>
           <div class="hint" id="chat-main-hint" data-testid="chat-main-hint"></div>
+          <!-- hamr 2026-10-09: Revise = reopen the boxes, filled as drafted, and draft again. Shown only while a plan waits for the OK. -->
+          <button class="btn wide" type="button" id="chat-reopen-btn" data-testid="chat-reopen" hidden>Revise</button>
           <div class="hint">Only your click signs. The chat can't.</div>
         </section>
 
@@ -729,17 +782,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>
@@ -869,7 +921,6 @@
         btn.setAttribute("aria-selected", "true");
         var panel = document.getElementById(btn.getAttribute("aria-controls"));
         if(panel){ panel.hidden = false; panel.classList.add("active"); }
-        if(btn.id === "tab-run"){ reflowMap(); }
       });
     });
   }
@@ -884,33 +935,16 @@
     });
   }
 
-  // ---- step map renderer (verbatim algorithm from design/panel-mockup.html's
-  // buildStepMapSVG — ONE renderer, no second hand-authored map anywhere on this page) ----
-  function stepMapColors(state){
-    if(state === "done") return {stroke:"var(--green)", textFill:"#2e7d32"};
-    if(state === "running") return {stroke:"var(--amber)", textFill:"#b8860b"};
-    if(state === "stopped") return {stroke:"var(--red)", textFill:"var(--red)"};
-    // died (hamr's ruling B, 2026-09-25): distinct from stopped/red — no
-    // verdict was ever reached, so this box never shares the red look.
-    if(state === "died") return {stroke:"var(--magenta)", textFill:"var(--magenta)"};
-    return {stroke:"var(--border-strong)", textFill:"var(--text-faint)"};
-  }
+  // ---- step map renderer (buildStepMapHTML below — ONE renderer, no second hand-authored map anywhere on this page) ----
   function escapeXml(s){
     return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
   }
-  var stepMapUidCounter = 0;
-  var MAP_MARGIN = 10, MAP_GAP = 28;
-  var CHAR_W = 7.2;
-  var TITLE_HPAD = 16;
-  var MIN_BOX_W = 100;
-  var BOX_H = 60, BOX_H_2LINE = 78;
-  var ROW_GAP = 70;
   // s.noNumber (F196): a synthetic placeholder box (e.g. "died during
   // planning") is a LABEL, never a real step — it renders without the
   // leading "<n> " step number a real step gets.
   // item 4 (2026-09-25): each step box shows its attempts INLINE, e.g.
   // "attempt 1 [✗] · attempt 2 [✓]" — appended to the box's own title text
-  // (the existing wrapTitleLines 2-line wrap handles overflow the same way
+  // (the chip wraps long text inside itself the same way
   // it already does for a long step id; no third renderer, no new box shape).
   // item 1 (2026-09-27, panel P2 defect): an attempt's own outcome is null
   // in exactly two situations — its window is still open on a LIVE run (the
@@ -935,9 +969,9 @@
     if(g === "✗") return '<span class="glyph-red">' + g + '</span>';
     return g;
   }
-  // PLAIN TEXT ONLY — feeds the SVG step map's title/width calculation
-  // (`stepTitleText`, an SVG <text> node), never innerHTML; a colour span
-  // here would render as literal "<span>" characters inside the map.
+  // PLAIN TEXT ONLY — feeds the step map chip label (`stepTitleText`, escaped
+  // before it goes into the chip); a colour span here would render as literal
+  // "<span>" characters inside the map.
   // {@link glyphSpan} (the P3 colour addition) is used only by the DOM
   // part-card renderer below, never by this function.
   function attemptsInlineText(attempts, boxIsLive){
@@ -1042,224 +1076,102 @@
   function boxStatusText(box){
     return box.status && box.status.word ? "[" + box.status.sign + "] " + boxStatusWord(box) : boxStatusWord(box);
   }
-  function naturalBoxWidth(steps){
+  // Ruling 1A (hamr, 2026-10-09): the step map is a row of CHIPS — each box as wide as its own text, flowing
+  // side by side and wrapping to the next line. Plain HTML + CSS (.map-chips / .map-chip): the browser does the
+  // wrapping, so there is no width arithmetic, no resize observer, and no horizontal scroll at phone width. A name
+  // is never truncated (it wraps inside its chip when it is longer than the line).
+  // Marks that were line styles on the old SVG are now border styles: a retried step has a DASHED border, and a step
+  // whose leg ended there (the run resumed after it) has a DOTTED right edge. The sign + word come from
+  // boxStatusText (src/panel/status.js's table) — the chip shows "[sign title]" and keeps the word in its tooltip.
+  function buildStepMapHTML(steps){
     var numIdx = stepNumberIndices(steps);
-    var maxChars = 0;
-    steps.forEach(function(s, idx){ maxChars = Math.max(maxChars, stepTitleText(numIdx[idx], s).length); });
-    return Math.max(MIN_BOX_W, Math.ceil(maxChars * CHAR_W) + TITLE_HPAD);
-  }
-  function computeMapLayout(n, availW, naturalW){
-    if(!availW) return {perRow:n, boxW:naturalW};
-    var usableW = availW - MAP_MARGIN * 2;
-    for(var perRow = n; perRow >= 2; perRow--){
-      var totalW = perRow * naturalW + (perRow - 1) * MAP_GAP;
-      if(totalW <= usableW){
-        var stretched = (usableW - (perRow - 1) * MAP_GAP) / perRow;
-        return {perRow:perRow, boxW:Math.max(naturalW, stretched)};
-      }
-    }
-    return {perRow:1, boxW:Math.max(MIN_BOX_W, usableW)};
-  }
-  function wrapTitleLines(text, maxWidth){
-    var maxChars = Math.max(1, Math.floor((maxWidth - TITLE_HPAD) / CHAR_W));
-    if(text.length <= maxChars) return [text];
-    var words = text.split(' ');
-    var line1 = '', i = 0;
-    for(; i < words.length; i++){
-      var cand = line1 ? line1 + ' ' + words[i] : words[i];
-      if(line1 && cand.length > maxChars) break;
-      line1 = cand;
+    var last = steps.length - 1;
+    var body = steps.map(function(s, idx){
+      var sign = s.status && s.status.sign ? s.status.sign : "";
+      var tries = boxRetryTry(s);
+      var cls = "map-chip s-" + String(s.state).replace(/[^a-z-]/g, "") +
+        (tries ? " retry" : "") + (s.resumedNext ? " resumed-next" : "");
+      var label = escapeXml(stepTitleText(numIdx[idx], s));
+      var blocked = s.blocked > 0 ? ' <span class="chip-blocked">' + s.blocked + ' blocked</span>' : '';
+      var retry = tries ? '<span class="chip-retry">\u21bb' + tries + '</span> ' : '';
+      var inner = '[' + retry + '<span class="chip-sign">' + escapeXml(sign) + '</span> ' + label + blocked + ']';
+      var tip = ' title="' + escapeXml(boxStatusText(s)) + '"';
+      var attrs = ' class="' + cls + '"' + tip + (s.resumedNext ? ' data-resumed="1"' : '') + (tries ? ' data-retry="' + tries + '"' : '');
+      var chip = typeof s.partIndex === "number"
+        ? '<button type="button"' + attrs + ' data-part-index="' + s.partIndex + '">' + inner + '</button>'
+        : '<span' + attrs + '>' + inner + '</span>';
+      return '<span class="map-item" role="listitem">' +
+        (idx > 0 ? '<span class="map-lead" aria-hidden="true">\u2192</span>' : '') +
+        chip + (idx < last ? '<span class="map-arrow" aria-hidden="true">\u2192</span>' : '') + '</span>';
+    }).join("");
+    return '<div class="map-chips" role="list" aria-label="step map">' + body + '</div>';
+  }
+  // Ruling A: the first chip of each WRAPPED line shows a leading arrow. CSS cannot know which chip starts a line, so
+  // after render/resize this compares each item's offsetTop with the previous item's (same line = same top). The lead
+  // arrow is absolutely positioned (no layout impact), so toggling the class can never reflow a chip — no loop.
+  // Takes anything with offsetTop + classList (real elements, or stubs in tests).
+  function markLineStarts(items){
+    for(var i = 0; i < items.length; i++){
+      var starts = i > 0 && items[i].offsetTop > items[i - 1].offsetTop;
+      if(starts) items[i].classList.add("line-start"); else items[i].classList.remove("line-start");
     }
-    if(!line1) return [text.slice(0, maxChars), text.slice(maxChars)];
-    var line2 = words.slice(i).join(' ');
-    return line2 ? [line1, line2] : [line1];
   }
-  // ONE shared rule for "does this box draw a retry loop, and what try number" — a multi-attempt
+  // ONE shared rule for "does this box draw a retry mark, and what try number" — a multi-attempt
   // box (a re-run step, or the fix loop; `run` on an old-shape spine falls in here too, naturally,
-  // never special-cased) gets a dashed self-loop labelled with its final try number; anything
-  // else (incl. every no-verdict kind, whose attempts is already forced to [] upstream) gets 0.
+  // never special-cased) gets a dashed border; anything else (incl. every no-verdict kind, whose
+  // attempts is already forced to [] upstream) gets 0.
   function boxRetryTry(box){
     var attempts = Array.isArray(box.attempts) ? box.attempts : [];
     return attempts.length > 1 ? attempts.length : 0;
   }
-  // item 2 (2026-09-27): the ONE place a retry loop's x-coordinate (curve
-  // start/control/end, and the "try N" label) is kept inside the box that
-  // owns it — MIN_BOX_W (100) is comfortably wider than 2*RETRY_INSET, so
-  // this never inverts the clamp range.
-  var RETRY_INSET = 4;
-  function clampRetryX(v, boxX, boxW){
-    var lo = boxX + RETRY_INSET, hi = boxX + boxW - RETRY_INSET;
-    return Math.min(hi, Math.max(lo, v));
-  }
-  function buildStepMapSVG(steps, availWidth){
-    var n = steps.length;
-    var naturalW = naturalBoxWidth(steps);
-    var layout = computeMapLayout(n, availWidth, naturalW);
-    var perRow = layout.perRow, boxW = layout.boxW, gap = MAP_GAP;
-    var rows = Math.ceil(n / perRow);
-    var margin = MAP_MARGIN;
-    var numIdx = stepNumberIndices(steps);
-    var titleLines = steps.map(function(s, idx){ return wrapTitleLines(stepTitleText(numIdx[idx], s), boxW); });
-    var maxLines = titleLines.reduce(function(m, l){ return Math.max(m, l.length); }, 1);
-    var boxH = maxLines > 1 ? BOX_H_2LINE : BOX_H;
-    var rowH = boxH + ROW_GAP;
-    var totalW = margin * 2 + perRow * boxW + (perRow - 1) * gap;
-    var totalH = rows * rowH;
-    var uid = "sm" + (stepMapUidCounter++);
-    var body =
-      '<defs>' +
-        '<marker id="' + uid + '-arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">' +
-          '<path d="M0,0 L6,3 L0,6 z" fill="var(--text-dim)"></path></marker>' +
-        '<marker id="' + uid + '-arrow-grey" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">' +
-          '<path d="M0,0 L6,3 L0,6 z" fill="var(--text-faint)"></path></marker>' +
-      '</defs>';
-    steps.forEach(function(s, idx){
-      var row = Math.floor(idx / perRow);
-      var col = idx % perRow;
-      var rtl = (row % 2) === 1;
-      var slotCol = rtl ? (perRow - 1 - col) : col;
-      var x = margin + slotCol * (boxW + gap);
-      var y = 30 + row * rowH;
-      var colors = stepMapColors(s.state);
-      var lines = titleLines[idx];
-      var nextRow = idx < n - 1 ? Math.floor((idx + 1) / perRow) : null;
-      var hasDrop = nextRow !== null && nextRow !== row;
-      var stateY = y + boxH - 18;
-      var partIdxAttr = typeof s.partIndex === "number" ? (' data-part-index="' + s.partIndex + '" style="cursor:pointer;"') : '';
-      body += '<rect x="' + x + '" y="' + y + '" width="' + boxW + '" height="' + boxH +
-        '" rx="0" fill="var(--panel2)" stroke="' + colors.stroke + '" stroke-width="2"' + partIdxAttr + '></rect>';
-      if(s.blocked > 0){
-        body += '<text x="' + (x + boxW - 6) + '" y="' + (y + 12) +
-          '" text-anchor="end" font-size="10" fill="var(--red)">' + s.blocked + ' blocked</text>';
-      }
-      if(lines.length === 1){
-        body += '<text x="' + (x + boxW / 2) + '" y="' + (y + 25) +
-          '" text-anchor="middle" font-size="12" fill="var(--text)">' + escapeXml(lines[0]) + '</text>';
-      } else {
-        body += '<text x="' + (x + boxW / 2) + '" y="' + (y + 17) +
-          '" text-anchor="middle" font-size="12" fill="var(--text)">' + escapeXml(lines[0]) + '</text>';
-        body += '<text x="' + (x + boxW / 2) + '" y="' + (y + 29) +
-          '" 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(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.
-      if(s.state === "running"){
-        body += '<circle cx="' + (x + 20) + '" cy="' + (y + 12) + '" r="4" fill="#b8860b">' +
-          '<animate attributeName="opacity" values="1;0.3;1" dur="1.2s" repeatCount="indefinite"></animate></circle>';
-      }
-      var retryTry = boxRetryTry(s);
-      if(retryTry){
-        // dashed self-loop under the box, same proportions as the design mockup's curve,
-        // scaled to this box's own width. When this same box also carries the row-to-row
-        // snake drop (which leaves from dead-center, x=cx), shift the loop's start away from
-        // center by a fixed pixel offset so the two never begin at the same point.
-        // item 2 (2026-09-27): at a narrow box width, subtracting that same
-        // fixed pixel shift from proportionally-small x-fractions (e.g. the
-        // curve's own endpoint at 2.8% of boxW) can push the coordinate past
-        // the box's own left edge — the fixed shift was sized for desktop
-        // widths and never scaled down with boxW. clampRetryX is the ONE
-        // place every retry x-coordinate (curve start/control/end AND the
-        // "try N" label) is kept inside [x + RETRY_INSET, x + boxW -
-        // RETRY_INSET] — never re-clamped ad hoc per coordinate — so the
-        // whole loop and its label always stay inside the box that owns it,
-        // at every width, while keeping the mockup's proportions untouched
-        // wherever they already fit (every desktop-width box already fits).
-        var retryShift = hasDrop ? 14 : 0;
-        var bottom = y + boxH;
-        var sx = clampRetryX(x + boxW * 0.50 - retryShift, x, boxW);
-        var sy = bottom + 5;
-        var c1x = clampRetryX(x + boxW * 0.278 - retryShift, x, boxW), c1y = bottom + 30;
-        var c2x = clampRetryX(x + boxW * 0.167 - retryShift, x, boxW), c2y = bottom + 30;
-        var ex = clampRetryX(x + boxW * 0.028 - retryShift, x, boxW), ey = bottom + 2;
-        var labelX = clampRetryX(x + boxW * 0.267 - retryShift, x, boxW);
-        body += '<path d="M ' + sx + ' ' + sy + ' C ' + c1x + ' ' + c1y + ', ' + c2x + ' ' + c2y + ', ' + ex + ' ' + ey +
-          '" fill="none" stroke="var(--text-faint)" stroke-width="1.5" stroke-dasharray="3,3" marker-end="url(#' + uid + '-arrow-grey)"></path>';
-        body += '<text x="' + labelX + '" y="' + (bottom + 32) +
-          '" text-anchor="middle" font-size="10" fill="var(--text-faint)">try ' + retryTry + '</text>';
-      }
-      if(idx < n - 1){
-        // P5-R: where a leg ended and the next leg picked up, the connector is DOTTED (and says so) —
-        // one run, one map; the dotted line is the only mark of the resume.
-        var dash = s.resumedNext ? ' stroke-dasharray="2,4" data-resumed="1"' : '';
-        if(nextRow === row){
-          var midY = y + boxH / 2;
-          if(!rtl){
-            var nx = x + boxW + gap;
-            body += '<line x1="' + (x + boxW) + '" y1="' + midY + '" x2="' + (nx - 2) + '" y2="' + midY +
-              '" stroke="var(--text-dim)" stroke-width="2"' + dash + ' marker-end="url(#' + uid + '-arrow)"></line>';
-          } else {
-            var px = x - gap - boxW;
-            body += '<line x1="' + x + '" y1="' + midY + '" x2="' + (px + boxW + 2) + '" y2="' + midY +
-              '" stroke="var(--text-dim)" stroke-width="2"' + dash + ' marker-end="url(#' + uid + '-arrow)"></line>';
-          }
-        } else {
-          var cx = x + boxW / 2;
-          body += '<line x1="' + cx + '" y1="' + (y + boxH) + '" x2="' + cx + '" y2="' + (y + rowH - 2) +
-            '" stroke="var(--text-dim)" stroke-width="2"' + dash + ' marker-end="url(#' + uid + '-arrow)"></line>';
-        }
-      }
-    });
-    return '<svg width="' + totalW + '" height="' + totalH + '" viewBox="0 0 ' + totalW + ' ' + totalH + '" role="img" aria-label="step map">' + body + '</svg>';
-  }
-  // the line-style key under the MAP (hamr 2026-10-04): only the two line styles, never a sign legend
+  // the line-style key under the MAP (hamr 2026-10-04): only the two border styles, never a sign legend
   function stepMapKeyHTML(steps){
     var resumed = (steps || []).some(function(b){ return b.resumedNext; });
     return '<div class="map-key" data-testid="map-key">' +
-      '<span>⤾ dashed = retry</span>' +
-      (resumed ? '<span>&middot;&middot;&middot; dotted = resumed</span>' : '') +
+      '<span>\u21bbN = took N tries (dashed box)</span>' +
+      (resumed ? '<span>dotted edge = resumed after</span>' : '') +
       '</div>';
   }
-  var lastSteps = null;
-  var lastWidth = null;
-  function mapAvailWidth(wrapper){
-    if(!wrapper) return null;
-    var w = wrapper.getBoundingClientRect().width;
-    if(!w) return null;
-    return Math.max(0, w - 20);
-  }
   function renderStepMap(steps){
     var mount = document.getElementById("map-mount");
     var wrapper = document.getElementById("map-box");
-    lastSteps = steps;
     if(!steps || !steps.length){
       mount.innerHTML = "";
       wrapper.hidden = true;
       return;
     }
     wrapper.hidden = false;
-    var w = mapAvailWidth(wrapper);
-    lastWidth = w;
-    mount.innerHTML = buildStepMapSVG(steps, w) + stepMapKeyHTML(steps);
-    // build item B: a map box click jumps to the Audit tab, that same part
+    mount.innerHTML = buildStepMapHTML(steps) + stepMapKeyHTML(steps);
+    layoutMap();
+    // build item B: a map chip click jumps to the Audit tab, that same part
     // expanded and scrolled into view — same click-through as the card list,
-    // sharing partIndex so the two can never disagree about which row a box
-    // maps to. Delegated once per render (mount.innerHTML above already
-    // wiped any previous listeners' targets along with the old markup).
-    mount.querySelectorAll("rect[data-part-index]").forEach(function(rect){
-      rect.addEventListener("click", function(){
-        var idx = Number(rect.getAttribute("data-part-index"));
+    // sharing partIndex so the two can never disagree about which row a chip
+    // maps to. Bound once per render (mount.innerHTML above already wiped any
+    // previous listeners' targets along with the old markup).
+    mount.querySelectorAll(".map-chip[data-part-index]").forEach(function(chip){
+      chip.addEventListener("click", function(){
+        var idx = Number(chip.getAttribute("data-part-index"));
         document.getElementById("tab-audit").click();
         openAuditPart(idx);
       });
     });
   }
-  function reflowMap(){
-    var wrapper = document.getElementById("map-box");
-    if(!wrapper || wrapper.hidden || !lastSteps) return;
-    var w = mapAvailWidth(wrapper);
-    if(w === null || w === lastWidth) return;
-    lastWidth = w;
-    document.getElementById("map-mount").innerHTML = buildStepMapSVG(lastSteps, w) + stepMapKeyHTML(lastSteps);
+  function layoutMap(){
+    var box = document.getElementById("map-box");
+    if(!box || box.hidden) return;
+    markLineStarts(Array.prototype.slice.call(box.querySelectorAll(".map-item")));
+  }
+  var layoutTimer = null;
+  function layoutMapSoon(){
+    if(layoutTimer) clearTimeout(layoutTimer);
+    layoutTimer = setTimeout(function(){ layoutTimer = null; layoutMap(); }, 60);
   }
   if(typeof ResizeObserver !== "undefined"){
-    var ro = new ResizeObserver(function(){ reflowMap(); });
-    var mb = document.getElementById("map-box");
-    if(mb) ro.observe(mb);
+    var mapRo = new ResizeObserver(layoutMapSoon);
+    var mapBoxEl = document.getElementById("map-box");
+    if(mapBoxEl) mapRo.observe(mapBoxEl);
   } else {
-    window.addEventListener("resize", reflowMap);
+    window.addEventListener("resize", layoutMapSoon);
   }
 
   // F196: a `synthetic` step (e.g. the "died during planning" placeholder
@@ -2110,8 +2022,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",
@@ -3247,6 +3159,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");
@@ -3262,10 +3203,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);
@@ -3337,7 +3282,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
@@ -3675,6 +3620,7 @@
     var msgInput = document.getElementById("chat-msg");
     var mainBtn = document.getElementById("chat-main-btn");
     var mainHint = document.getElementById("chat-main-hint");
+    var reopenBtn = document.getElementById("chat-reopen-btn");
     var mainAction = "none";
     var lastState = null;
     var startOk = false;
@@ -3712,10 +3658,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.
@@ -3731,14 +3677,14 @@
       // 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"; }
     }
     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";
@@ -3750,7 +3696,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");
@@ -3767,9 +3713,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
@@ -3817,7 +3765,6 @@
     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();
@@ -3858,7 +3805,7 @@
       card.hidden = false;
       originLine.hidden = true;
       exitResumeMode();
-      thread.innerHTML = "";
+      thread.innerHTML = ""; lastMsgSig = null;
       errEl.textContent = "";
       actionErrEl.textContent = "";
       sessionId = null;
@@ -3888,7 +3835,6 @@
     function resetCard(){
       clearCardBoxes();
       setVerdict("deterministic");
-      document.getElementById("jf-judge").disabled = true;
       modelSelect.selectedIndex = 0;
       msgInput.value = "";
       rwQ.value = "";
@@ -3917,12 +3863,9 @@
         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(),
-        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(),
         capUsd: moneyCap,
         maxWallMs: timeCapMin === "" ? undefined : Math.round(Number(timeCapMin) * 60000),
       };
@@ -3971,7 +3914,7 @@
         setVerdict(v);
         renderPicker();
       }
-      document.getElementById("jf-judge").disabled = v !== "rubric";
+      setJobPlaceholders(v);
       refreshStartEnabled();
     }
     document.querySelectorAll('input[name="jf-verdict"]').forEach(function(r){
@@ -4082,11 +4025,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;
@@ -4127,26 +4082,20 @@
     }
 
     // hamr's ruling 2026-10-05: ONE wide button below the message box. Its wording, action and enabled state are ONE
-    // pure function of (state, typed-text-empty, reuse); state = {session, startOk, phase, pendingAsk, revisesLeft,
-    // signClicked, specHash}. Actions: start | check-deps | send | revise | sign-prepare | sign | none.
+    // pure function of (state, typed-text-empty, reuse); state = {session, startOk, phase, pendingAsk,
+    // signClicked, specHash}. Actions: start | check-deps | send | sign-prepare | sign | none.
     function mainButtonFor(st, textEmpty, reuse){
       var ask = st.pendingAsk;
       var atMenu = !!ask && ask.kind === "menu";
-      var left = st.revisesLeft || 0;
-      var hint = atMenu ? left + (left === 1 ? " change left" : " changes left") : "";
+      var hint = "";
       if(!st.session){
         return {text: reuse ? "Sign & run" : "Start drafting", action: "start", disabled: !st.startOk, hint: ""};
       }
       if(ask && ask.kind === "install-needed"){
         return {text: "Check again", action: "check-deps", disabled: false, hint: ""};
       }
-      if(ask && !textEmpty){
-        return atMenu
-          ? {text: "Send", action: "revise", disabled: left <= 0, hint: hint}
-          : {text: "Send", action: "send", disabled: false, hint: ""};
-      }
       if(ask && !atMenu){
-        return {text: "Send", action: "send", disabled: true, hint: ""};
+        return {text: "Send", action: "send", disabled: textEmpty, hint: ""};
       }
       if(atMenu || st.phase === "prepared"){
         if(st.phase === "prepared" && st.signClicked){
@@ -4156,16 +4105,21 @@
       }
       return {text: "Sign & run", action: "none", disabled: true, hint: ""};
     }
-    // pure: the ask box takes typed text only when the session has a pending ask that accepts it (the plan menu -> a
-    // change request, or any question); not with no session, no ask, or while waiting on an install
+    // pure: the ask box takes typed text only when the session has a pending ask that accepts it (a question the plan
+    // raised); not with no session, no ask, while the plan waits for the OK (that is Sign & run or Revise, never typed
+    // text), or while waiting on an install
     function askBoxOpenFor(st){
-      return !!st.session && !!st.pendingAsk && st.pendingAsk.kind !== "install-needed";
+      return !!st.session && !!st.pendingAsk && st.pendingAsk.kind !== "install-needed" && st.pendingAsk.kind !== "menu";
+    }
+    // pure: Revise shows only while a plan waits for the OK
+    function reviseShownFor(st){
+      return !!st.session && !!st.pendingAsk && st.pendingAsk.kind === "menu";
     }
     function renderMain(){
       var st = {session: sessionLive, startOk: startOk, signClicked: signClickedOnce};
       if(sessionLive && lastState){
         st.phase = lastState.phase; st.pendingAsk = lastState.pendingAsk;
-        st.revisesLeft = lastState.revisesLeft; st.specHash = lastState.specHash;
+        st.specHash = lastState.specHash;
       }
       // hamr 2026-10-05: the ask box is open only while something asks for a reply; otherwise dimmed and emptied
       var open = askBoxOpenFor(st);
@@ -4176,26 +4130,66 @@
       mainBtn.disabled = b.disabled;
       mainAction = b.action;
       mainHint.textContent = b.hint;
+      reopenBtn.hidden = !reviseShownFor(st);
       fitBox(msgInput);
       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
@@ -4300,11 +4294,8 @@
         }
         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";
+      fillCard(c);
+
       if(reuseSession) setReuseLocked(true);
       renderPicker();
       fitCardBoxes();
@@ -4326,6 +4317,14 @@
 
     // ---- 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) : "");
+      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){
@@ -4338,11 +4337,8 @@
       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";
+      fillCard(c);
+
       setReuseLocked(true);
       renderPicker();
       sfLine.hidden = false;
@@ -4367,11 +4363,8 @@
       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";
+      fillCard(c);
+
       originLine.textContent = d.origin || "";
       originLine.hidden = !d.origin;
       renderPicker();
@@ -4394,13 +4387,10 @@
       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);
+      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;
@@ -4444,10 +4434,10 @@
     // build item 1 — the "lost answer" fix. ROOT CAUSE: `renderActions`
     // (fed by the every-2s `poll()`) unconditionally overwrites
     // `#chat-card-error` on every tick (`errEl.textContent = state.error ||
-    // ""`), including the SAME tick the send/revise/sign handlers below
+    // ""`), including the SAME tick the send/sign handlers below
     // used to call `poll()` in their own `.then` — so a refused/failed POST's
     // error was wiped before a person could read it (often on the very next
-    // line of the same callback). Compounding it, `send`/`revise` cleared
+    // line of the same callback). Compounding it, `send` cleared
     // `msgInput.value` unconditionally, even on failure — so a rejected
     // answer vanished from the box with no trace at all. Fixed by: (1) a
     // dedicated `#chat-action-error` element only these handlers touch,
@@ -4508,20 +4498,21 @@
       }).catch(function(){ chatActionFailed("network error — could not reach the panel server, your text was NOT sent"); });
     }
 
-    function doRevise(){
+    // hamr 2026-10-09 (as fwdloop's Revise): the draft is ended and the New job card opens with the SAME values in every
+    // box, all editable; Start drafting then drafts fresh from whatever the boxes now say. No typed change request goes
+    // to the model. The ended draft is an Abandon: money already spent stays booked.
+    function doReopen(){
       if(!sessionId) return;
-      var text = msgInput.value;
-      authorPost("/api/author/" + sessionId + "/revise", {text: text}).then(function(r){
+      authorPost("/api/author/" + sessionId + "/abandon", {}).then(function(r){
         var o = chatPostOutcome(r);
-        if(o.ok){
-          chatActionOk();
-          msgInput.value = "";
-        } else {
-          chatActionFailed(o.error);
-        }
-        poll();
-      }).catch(function(){ chatActionFailed("network error — could not reach the panel server, your text was NOT sent"); });
+        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"); });
     }
+    reopenBtn.addEventListener("click", doReopen);
 
     function doSign(){
       if(!sessionId) return;
@@ -4553,7 +4544,6 @@
       if(mainAction === "start") doStart();
       else if(mainAction === "check-deps") doCheckDeps();
       else if(mainAction === "send") doSend();
-      else if(mainAction === "revise") doRevise();
       else if(mainAction === "sign-prepare" || mainAction === "sign") doSign();
     });