feat: add Summary and Q&A History sections to task detail panel

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

2 files changed, 61 insertions, 0 deletions

diff --git a/web/app.js b/web/app.js
index 4652707..2c1e481 100644
--- a/web/app.js
+++ b/web/app.js
@@ -1315,6 +1315,16 @@ function renderTaskPanel(task, executions) {
   overview.appendChild(overviewGrid);
   content.appendChild(overview);
 
+  // ── Summary ──
+  if (task.summary) {
+    const summarySection = makeSection("Summary");
+    const summaryText = document.createElement("div");
+    summaryText.className = "task-summary-text";
+    summaryText.textContent = task.summary;
+    summarySection.appendChild(summaryText);
+    content.appendChild(summarySection);
+  }
+
   // ── Agent Config ──
   const a = task.agent || {};
   const agentSection = makeSection('Agent Config');
@@ -1342,6 +1352,34 @@ function renderTaskPanel(task, executions) {
   agentSection.appendChild(agentGrid);
   content.appendChild(agentSection);
 
+  // ── Q&A History ──
+  let interactions = [];
+  if (task.interactions) {
+    try { interactions = JSON.parse(task.interactions); } catch {}
+  }
+  if (interactions.length > 0) {
+    const qaSection = makeSection("Q&A History");
+    const timeline = document.createElement("div");
+    timeline.className = "qa-timeline";
+    for (const item of interactions) {
+      const entry = document.createElement("div");
+      entry.className = `qa-item qa-${item.type}`;
+      const label = document.createElement("span");
+      label.className = "qa-label";
+      label.textContent = item.type === "question" ? "Agent asked:" : "User answered:";
+      const text = document.createElement("div");
+      text.className = "qa-content";
+      text.textContent = item.content;
+      const ts = document.createElement("span");
+      ts.className = "qa-timestamp";
+      ts.textContent = item.timestamp ? formatDate(item.timestamp) : "";
+      entry.append(label, text, ts);
+      timeline.appendChild(entry);
+    }
+    qaSection.appendChild(timeline);
+    content.appendChild(qaSection);
+  }
+
   // ── Execution Settings ──
   const settingsSection = makeSection('Execution Settings');
   const settingsGrid = document.createElement('div');
diff --git a/web/style.css b/web/style.css
index 2b872fe..1b2b344 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1170,6 +1170,29 @@ dialog label select:focus {
   margin-top: 0.5rem;
 }
 
+.task-summary-text {
+  padding: 0.75rem 1rem;
+  background: var(--surface-1, #f8f9fa);
+  border-radius: 6px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+.qa-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.qa-item {
+  padding: 0.5rem 0.75rem;
+  border-left: 3px solid;
+  border-radius: 0 4px 4px 0;
+}
+.qa-question { border-color: #3b82f6; background: rgba(59,130,246,0.05); }
+.qa-answer { border-color: #10b981; background: rgba(16,185,129,0.05); }
+.qa-label { font-weight: 600; font-size: 0.85em; display: block; margin-bottom: 0.25rem; }
+.qa-content { white-space: pre-wrap; }
+.qa-timestamp { font-size: 0.75em; color: var(--text-muted, #6b7280); margin-top: 0.25rem; display: block; }
+
 .inline-edit-success {
   color: var(--state-completed);
   font-size: 0.82rem;