feat(host-agent): make execution history authoritative

apps/device-host-agent/host_agent/web/templates/task_detail.html

@@ -1,6 +1,33 @@
 {% extends "base.html" %}
+{% block styles %}
+{{ super() }}
+.task-back { margin-top: 0; }
+.timeline-step { border: 1px solid #c8d0d6; background: #fff; padding: 1rem; margin-bottom: 1rem; }
+.step-heading { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; margin-bottom: 0.75rem; }
+.step-heading p { margin: 0; color: #4d5a63; }
+.evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
+.evidence-pane { margin: 0; min-width: 0; }
+.evidence-pane h3 { font-size: 1rem; margin: 0 0 0.35rem; }
+.screenshot-frame { min-height: 6rem; border: 1px solid #c8d0d6; background: #f8fafb; display: grid; place-items: center; overflow: hidden; color: #5e6b73; }
+.screenshot-frame img { display: block; width: 100%; height: auto; }
+.step-details { margin-top: 0.75rem; }
+.step-details summary { cursor: pointer; font-weight: 600; }
+.step-details pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.65rem 0 0; padding: 0.65rem; border: 1px solid #d5dce0; background: #f8fafb; }
+.operation-grid { display: grid; grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr); gap: 0.35rem 0.75rem; margin: 0.65rem 0 0; }
+.operation-grid dt { font-weight: 600; }
+.operation-grid dd { margin: 0; overflow-wrap: anywhere; }
+.observation-list, .ui-tree-nodes { margin: 0.65rem 0 0; padding-left: 1.25rem; }
+.observation-list li, .ui-tree-nodes li { margin-bottom: 0.45rem; overflow-wrap: anywhere; }
+.observation-list span, .ui-tree-nodes span { color: #4d5a63; margin-left: 0.4rem; }
+.ui-tree-nodes code { overflow-wrap: anywhere; }
+@media (max-width: 640px) {
+  .evidence-grid { grid-template-columns: minmax(0, 1fr); }
+  .timeline-step { padding: 0.75rem; }
+}
+{% endblock %}
 {% block body %}
-    <h1>Task {{ task.get("id") or "" }}</h1>
+    <p class="task-back"><a href="/tasks">&larr; Back to executions</a></p>
+    <h1>Execution</h1>
     <table>
       <thead><tr><th>Field</th><th>Value</th></tr></thead>
       <tbody>{% for row in task_rows %}<tr><td>{{ row[0] }}</td><td>{{ row[1] }}</td></tr>{% endfor %}</tbody>
@@ -10,13 +37,81 @@
     <p>No timeline records.</p>
     {% else %}
     {% for step in timeline_steps %}
-    <div style="border:1px solid #ccc;background:#fff;padding:0.75rem;margin-bottom:0.75rem;">
-      <p><strong>Step {{ step.index }}</strong> &mdash; {{ step.timestamp }}</p>
-      <p>Prompt: {{ step.prompt }}</p>
-      <p>Tool call: <code>{{ step.tool_call_text }}</code></p>
-      <p>Result: <code>{{ step.result_text }}</code></p>
-      {% if step.screenshot_src %}<img src="{{ step.screenshot_src }}" alt="screenshot" style="max-width:100%;border:1px solid #ccc;margin-top:0.5rem;">{% endif %}
-    </div>
+    <section class="timeline-step">
+      <div class="step-heading">
+        <strong>Step {{ step.index }}</strong>
+        <p>{{ step.timestamp }}</p>
+      </div>
+      <div class="evidence-grid">
+        <figure class="evidence-pane">
+          <h3>Before action</h3>
+          <div class="screenshot-frame">
+            {% if step.before_screenshot_src %}
+            <img src="{{ step.before_screenshot_src }}" alt="Screenshot before action">
+            {% else %}
+            <span>No screenshot</span>
+            {% endif %}
+          </div>
+        </figure>
+        <figure class="evidence-pane">
+          <h3>After action</h3>
+          <div class="screenshot-frame">
+            {% if step.after_screenshot_src %}
+            <img src="{{ step.after_screenshot_src }}" alt="Screenshot after action">
+            {% else %}
+            <span>No screenshot</span>
+            {% endif %}
+          </div>
+        </figure>
+      </div>
+      <details class="step-details" open>
+        <summary>Operation</summary>
+        <dl class="operation-grid">
+          <dt>Action</dt><dd>{{ step.tool_call.get("action") or "-" }}</dd>
+          <dt>Description</dt><dd>{{ step.tool_call.get("description") or "-" }}</dd>
+        </dl>
+        <pre>{{ step.tool_call | tojson(indent=2) }}</pre>
+      </details>
+      <details class="step-details">
+        <summary>Result</summary>
+        <pre>{{ step.result | tojson(indent=2) }}</pre>
+      </details>
+      {% if step.prompt %}
+      <details class="step-details">
+        <summary>Planner prompt</summary>
+        <pre>{{ step.prompt }}</pre>
+      </details>
+      {% endif %}
+      {% if step.ocr_results %}
+      <details class="step-details" open>
+        <summary>OCR results ({{ step.ocr_results|length }})</summary>
+        <ul class="observation-list">
+          {% for ocr in step.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>
+      </details>
+      {% endif %}
+      {% if step.ui_tree_nodes %}
+      <details class="step-details">
+        <summary>UI tree ({{ step.ui_tree_nodes|length }} normalized nodes)</summary>
+        <ul class="ui-tree-nodes">
+          {% for node in step.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>
+      {% endif %}
+    </section>
     {% endfor %}
     {% endif %}
 {% endblock %}