UI: show command only when a step is started, buttons left of comment, fail-comment warning, keep focus on current step

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

Assistant: claude-code
Assistant-Model: sonnet
Assistant-Process: 295952@bnt-lap001
Assistant-Session: e93f64ad-516c-46eb-9666-aad8d300c477

rtut/run.py

@@ -173,7 +173,7 @@ def verify(run: Run, step_id: str, confirm: bool = False, manual_ok: bool | None
     return result
 
 
-def complete(run: Run, step_id: str, evidence: dict[str, str] | None = None) -> None:
+def complete(run: Run, step_id: str, evidence: dict[str, str] | None = None, note: str = "") -> None:
     sd = run.step_def(step_id)
     st = run.state(step_id)
     if st["state"] != "running":
@@ -185,6 +185,8 @@ def complete(run: Run, step_id: str, evidence: dict[str, str] | None = None) ->
     if missing:
         raise RunError(f"evidence required: {', '.join(missing)}")
     st["evidence"] = {k: _clean(str(v), f"evidence {k}") for k, v in evidence.items()}
+    if note.strip():
+        st["note"] = _clean(note.strip(), "note")
     st.update(state="done", finished=_now())
     run.save()
 

rtut/ui.py

@@ -1,6 +1,6 @@
 """Local web UI: pick a pack, fill parameters, walk the steps, record evidence.
 
-Localhost only. Server-rendered forms; the only script is a copy button.
+Localhost only. Server-rendered forms; the only script is small: copy button, fail-comment warning, scroll to current step.
 """
 from __future__ import annotations
 
@@ -19,15 +19,23 @@ h1,h2{font-weight:600}a{color:inherit}hr{border:0;border-top:1px solid #8886}
 .step{border:1px solid #8886;padding:.8rem 1rem;margin:.8rem 0}.step.running{border-color:currentColor}
 .pill{font:12px ui-monospace,monospace;border:1px solid #8886;padding:0 .4rem}
 pre{border:1px solid #8886;padding:.5rem;overflow:auto;margin:.4rem 0}
-button,input,select{font:inherit;padding:.25rem .5rem}.note{opacity:.75}.bad{font-weight:600}"""
+button,input,select{font:inherit;padding:.25rem .5rem}.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.grow{flex:1;min-width:12rem}[hidden]{display:none}#current{scroll-margin-top:1rem}.note{opacity:.75}.bad{font-weight:600}"""
 
 
 def page(title: str, body: str) -> bytes:
     return (f"<!doctype html><meta charset=utf-8><meta name=viewport content='width=device-width'>"
             f"<title>{html.escape(title)}</title><style>{CSS}</style>"
             f"<p class=eyebrow><a href='/'>runbook-tutorials</a></p>{body}"
-            "<script>document.querySelectorAll('[data-copy]').forEach(b=>b.onclick=()=>"
-            "navigator.clipboard.writeText(b.previousElementSibling.textContent))</script>").encode()
+            "<script>"
+            "document.querySelectorAll('[data-copy]').forEach(b=>b.onclick=()=>"
+            "navigator.clipboard.writeText(b.previousElementSibling.textContent));"
+            # first click on 'Mark failed' without a comment only warns; a second click fails the step without one
+            "document.querySelectorAll('[data-fail]').forEach(b=>b.addEventListener('click',ev=>{"
+            "const f=b.closest('form'),n=f.querySelector('[name=note]'),w=f.querySelector('[data-warn]');"
+            "if(n&&!n.value.trim()&&!b.dataset.warned){ev.preventDefault();b.dataset.warned='1';w.hidden=false;n.focus();}}));"
+            # keep the operator on the current step after every action
+            "const c=document.getElementById('current');if(c)c.scrollIntoView({block:'center'});"
+            "</script>").encode()
 
 
 def e(s) -> str:
@@ -87,11 +95,18 @@ class App:
         done_n = sum(1 for x in d["steps"] if r.state(x["id"])["state"] in ("done", "skipped"))
         out.append(f"<p class=eyebrow>{done_n} of {total} steps done</p>"
                    f"<progress max={total} value={done_n} style='width:100%'></progress>")
+        current = next((x["id"] for x in d["steps"] if r.state(x["id"])["state"] == "running"), None)
+        if current is None:
+            current = next((x["id"] for x in d["steps"] if r.state(x["id"])["state"] in ("todo", "failed")), None)
         for n, s in enumerate(d["steps"], 1):
             st = r.state(s["id"]); state = st["state"]
             act = ""
             cmd = R.command_for(r, s["id"])
-            block = f"<pre>{e(cmd)}</pre><button type=button data-copy>Copy</button>" if cmd else ""
+            block = ""
+            if cmd and state == "running":       # the command and Copy appear only once the step is started
+                block = f"<pre>{e(cmd)}</pre><button type=button data-copy>Copy</button>"
+            elif cmd and state == "done":
+                block = f"<details><summary class=note>Command</summary><pre>{e(cmd)}</pre></details>"
             url = f"/run/{i}/{e(rid)}/{e(s['id'])}"
             v = st.get("verification")
             if state == "todo" and not blocked:
@@ -114,18 +129,26 @@ class App:
                     act += "<p><b>✔ Check passed.</b> Press <b>Mark done</b> to lock it in; the next step opens after that.</p>"
                 else:
                     act += "<p class=bad>✘ Check not passed. Fix the cause, then check again, or mark the step failed.</p>"
+                ev = ""
                 if v and v["passed"]:
-                    ev = "".join(f"<label>{e(n)} <input name='e_{e(n)}' required></label> " for n in s.get("evidence", []))
-                    act += f"<form method=post action='{url}/done'>{self.hidden()}{ev}<button>Mark done</button></form>"
-                act += (f"<form method=post action='{url}/fail'>{self.hidden()}<input name=note placeholder='what went wrong (no secrets)'> "
-                        "<button>Mark failed</button></form>")
+                    ev = "".join(f"<label>{e(x)} <input name='e_{e(x)}' required></label> " for x in s.get("evidence", []))
+                    ev = f"<p>{ev}</p>" if ev else ""
+                done_btn = f"<button formaction='{url}/done'>Mark done</button> " if v and v["passed"] else ""
+                act += (f"<form method=post action='{url}/fail'>{self.hidden()}{ev}<p class=row>{done_btn}"
+                        f"<button formaction='{url}/fail' formnovalidate data-fail>Mark failed</button> "
+                        "<input name=note class=grow placeholder='comment (what happened, what went wrong; no secrets)'>"
+                        "</p><p class='note bad' data-warn hidden>Add a comment about what went wrong, or click "
+                        "<b>Mark failed</b> again to fail without one.</p></form>")
             elif state == "failed":
-                act = f"<p class=bad>Failed: {e(st.get('note', ''))}</p><form method=post action='{url}/retry'>{self.hidden()}<button>Retry</button></form>"
+                act = f"<p class=bad>Failed: {e(st.get('note') or '(no comment)')}</p><form method=post action='{url}/retry'>{self.hidden()}<button>Retry</button></form>"
+            elif state == "done" and st.get("note"):
+                act = f"<p class=note>Comment: {e(st['note'])}</p>"
             if state not in ("done", "skipped") and not blocked:
                 blocked = True
                 waiting_for = f"step {n}, {s['title']}"
-            rb = f"<p class=note>Rollback: {e(s['rollback'])}</p>" if s.get("rollback") else ""
-            out.append(f"<div class='step {state}'><span class=pill>{state}</span> <b>{n}. {e(s['title'])}</b> "
+            rb = f"<p class=note>Rollback: {e(s['rollback'])}</p>" if s.get("rollback") and state in ("running", "failed") else ""
+            anchor = " id=current" if s["id"] == current else ""
+            out.append(f"<div{anchor} class='step {state}'><span class=pill>{state}</span> <b>{n}. {e(s['title'])}</b> "
                        f"<span class=note>[{e(s['owner'])}] {e(s.get('risk', 'read-only'))}</span>{block}"
                        f"<p class=note>Done when: {e(s['verify']['done_when'])}</p>{rb}{act}</div>")
         if r.complete:
@@ -178,17 +201,17 @@ def make_handler(app: App, port_holder: list):
                     i = int(parts[2]); p = app.packs[i]
                     params = {k[2:]: v for k, v in form.items() if k.startswith("p_")}
                     r = R.create(p, form.get("operator", ""), params)
-                    return self._redirect(f"/run/{i}/{r.data['run_id']}")
+                    return self._redirect(f"/run/{i}/{r.data['run_id']}#current")
                 i, rid, sid, action = int(parts[1]), parts[2], parts[3], parts[4]
                 p = app.packs[i]; r = R.load(p, rid)
                 if action == "start": R.start(r, sid)
                 elif action == "verify":
                     R.verify(r, sid, confirm=bool(form.get("yes")), manual_ok=(form.get("ok") == "1") if not form.get("yes") else None)
                 elif action == "done":
-                    R.complete(r, sid, {k[2:]: v for k, v in form.items() if k.startswith("e_")})
+                    R.complete(r, sid, {k[2:]: v for k, v in form.items() if k.startswith("e_")}, form.get("note", ""))
                 elif action == "fail": R.fail(r, sid, form.get("note", ""))
                 elif action == "retry": R.retry(r, sid)
-                return self._redirect(f"/run/{i}/{rid}")
+                return self._redirect(f"/run/{i}/{rid}#current")
             except (R.RunError, KeyError, ValueError, IndexError) as ex:
                 msg = str(ex)
             try: