feat(runtime): capture step evidence in console

api/templates/runtime_console/task_detail.html

@@ -64,25 +64,91 @@
   </form>
 
   <div class="timeline-stage">
-    <div class="screenshot-frame">
-      {% if current_step.image_base64 %}
-      <img
-        src="data:image/png;base64,{{ current_step.image_base64 }}"
-        alt="Task step screenshot"
-      />
-      {% else %}
-      <span>No screenshot</span>
-      {% endif %}
+    <div class="evidence-grid">
+      <section class="evidence-pane">
+        <h3>Before action</h3>
+        <div class="screenshot-frame">
+          {% if current_step.before_image_base64 %}
+          <img
+            src="data:image/png;base64,{{ current_step.before_image_base64 }}"
+            alt="Screenshot captured before the action"
+          />
+          {% else %}
+          <span>No screenshot</span>
+          {% endif %}
+        </div>
+      </section>
+      <section class="evidence-pane">
+        <h3>After action</h3>
+        <div class="screenshot-frame">
+          {% if current_step.after_image_base64 %}
+          <img
+            src="data:image/png;base64,{{ current_step.after_image_base64 }}"
+            alt="Screenshot captured after the action"
+          />
+          {% else %}
+          <span>No screenshot</span>
+          {% endif %}
+        </div>
+      </section>
     </div>
     <div class="step-data">
       <div>
-        <h3>Tool Call</h3>
+        <h3>Operation</h3>
+        <dl class="operation-grid">
+          <div>
+            <dt>Action</dt>
+            <dd>{{ current_step.tool_call.get('action', '-') }}</dd>
+          </div>
+          <div>
+            <dt>Description</dt>
+            <dd>{{ current_step.tool_call.get('description', '-') }}</dd>
+          </div>
+        </dl>
         <pre>{{ current_step.tool_call | tojson(indent=2) }}</pre>
       </div>
       <div>
-        <h3>Result</h3>
+        <h3>Execution result</h3>
         <pre>{{ current_step.result | tojson(indent=2) }}</pre>
       </div>
+      <div>
+        <h3>OCR results</h3>
+        {% if ocr_results %}
+        <ul class="ocr-results">
+          {% for ocr in ocr_results %}
+          <li>
+            <strong>{{ ocr.get('text') or '-' }}</strong>
+            <span>{{ ocr.get('bounds') | tojson }}</span>
+            {% if ocr.get('confidence') is not none %}
+            <span>confidence {{ '%.3f' | format(ocr.get('confidence')) }}</span>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+        {% else %}
+        <p class="muted">No OCR output captured for this step.</p>
+        {% endif %}
+      </div>
+      {% if ui_tree_nodes %}
+      <div>
+        <h3>UI tree</h3>
+        <details class="ui-tree" open>
+          <summary>{{ ui_tree_nodes|length }} normalized nodes</summary>
+          <ul class="ui-tree-nodes">
+            {% for node in ui_tree_nodes %}
+            <li>
+              <strong>{{ node.get('type') or 'unknown' }}</strong>
+              <span>{{ node.get('text') or node.get('id') or '-' }}</span>
+              <code>{{ node.get('bounds') | tojson }}</code>
+              {% if node.get('confidence') is not none %}
+              <span>confidence {{ '%.3f' | format(node.get('confidence')) }}</span>
+              {% endif %}
+            </li>
+            {% endfor %}
+          </ul>
+        </details>
+      </div>
+      {% endif %}
     </div>
   </div>
   {% endif %}