Format agent outputs

app/static/index.html

@@ -13,8 +13,10 @@
 
   <!-- ── Header ──────────────────────────────────────────────────────── -->
   <header class="app-header flex items-center gap-3 px-5 py-3">
+    <div id="logo-home" class="flex items-center gap-3 cursor-pointer select-none" style="gap:0.75rem">
     <div class="ds-mark">d</div>
     <span class="brand-name">deepset</span>
+    </div>
     <span class="brand-sep">|</span>
     <span class="brand-subtitle">Conference Intelligence</span>
 
@@ -334,11 +336,43 @@
       phaseTextAcc.set(phase, (phaseTextAcc.get(phase) || '') + content);
 
       if (!phaseTextEl.get(phase)) {
-        const el = document.createElement('div');
         const isReport = phase === 'writer';
-        el.className = isReport ? 'prose prose-report prose-lg' : 'prose prose-sm';
-        panel.appendChild(el);
-        phaseTextEl.set(phase, el);
+        if (!isReport) {
+          const wrapper = document.createElement('div');
+          wrapper.className = 'prose-block fade-in';
+
+          const badge = document.createElement('div');
+          badge.className = 'type-badge type-text';
+          badge.textContent = 'text';
+          wrapper.appendChild(badge);
+
+          const el = document.createElement('div');
+          el.className = 'prose prose-sm';
+          wrapper.appendChild(el);
+          panel.appendChild(wrapper);
+          phaseTextEl.set(phase, el);
+        } else {
+          const wrapper = document.createElement('div');
+          wrapper.className = 'final-report-wrapper fade-in';
+
+          const header = document.createElement('div');
+          header.className = 'final-report-header';
+          header.innerHTML = `
+            <div class="final-report-dot"></div>
+            <span class="final-report-label">Final Report</span>
+          `;
+          wrapper.appendChild(header);
+
+          const body = document.createElement('div');
+          body.className = 'final-report-body';
+
+          const el = document.createElement('div');
+          el.className = 'prose prose-report prose-lg';
+          body.appendChild(el);
+          wrapper.appendChild(body);
+          panel.appendChild(wrapper);
+          phaseTextEl.set(phase, el);
+        }
       }
       phaseTextEl.get(phase).innerHTML = marked.parse(phaseTextAcc.get(phase));
       panel.scrollTop = panel.scrollHeight;
@@ -405,19 +439,28 @@
       if (!phase) return;
       ensurePhase(phase);
 
+      if (phase === 'planner') parsePlanForFiles(content);
+
+      // Writer phase: tool_result duplicates the text event — skip it, let appendText handle final report
+      if (phase === 'writer') return;
+
       const panel = document.getElementById(`panel-${phase}`);
       if (!panel) return;
 
-      if (phase === 'planner') parsePlanForFiles(content);
+      const wrapper = document.createElement('div');
+      wrapper.className = 'tool-result-block fade-in';
+
+      const badge = document.createElement('div');
+      badge.className = 'type-badge type-result';
+      badge.textContent = 'tool_result';
+      wrapper.appendChild(badge);
 
-      const isReport = phase === 'writer';
       const el = document.createElement('div');
-      el.className = (isReport ? 'prose prose-report prose-lg' : 'prose prose-sm') + ' prose-block fade-in';
+      el.className = 'prose prose-sm';
       el.innerHTML = marked.parse(content);
-      panel.appendChild(el);
-      // Allow subsequent text chunks to continue in this block
-      phaseTextEl.set(phase, el);
-      phaseTextAcc.set(phase, content);
+      wrapper.appendChild(el);
+
+      panel.appendChild(wrapper);
 
       panel.scrollTop = panel.scrollHeight;
 
@@ -556,13 +599,17 @@
     generateBtn.addEventListener('click', generate);
     themeInput.addEventListener('keydown', e => { if (e.key === 'Enter') generate(); });
 
-    newReportBtn.addEventListener('click', () => {
+    function goHome() {
+      resetState();
       runSection.style.display = 'none';
       inputSection.style.display = 'flex';
       headerStatus.classList.add('hidden');
       themeInput.value = '';
       themeInput.focus();
-    });
+    }
+
+    newReportBtn.addEventListener('click', goHome);
+    document.getElementById('logo-home').addEventListener('click', goHome);
   </script>
 </body>
 </html>

app/static/styles.css

@@ -85,6 +85,41 @@ body {
   max-width: 700px;
   margin: 0 auto;
 }
+
+/* ── Final report container ────────────────────────────────────────── */
+.final-report-wrapper {
+  margin: 12px 4px;
+  border-radius: 12px;
+  border: 1px solid var(--border2);
+  background: var(--surface);
+  overflow: hidden;
+}
+.final-report-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 20px;
+  background: linear-gradient(90deg, rgba(0,110,255,0.14) 0%, transparent 80%);
+  border-bottom: 1px solid var(--border);
+}
+.final-report-label {
+  font-size: 0.6rem;
+  font-family: "SF Mono", Consolas, monospace;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--blue);
+}
+.final-report-dot {
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+  flex-shrink: 0;
+  box-shadow: 0 0 6px var(--green);
+}
+.final-report-body {
+  padding: 24px 28px 28px;
+}
 .prose-report h1 {
   font-size: 1.75rem;
   letter-spacing: -0.5px;
@@ -107,6 +142,26 @@ body {
   border: 1px solid var(--border);
 }
 
+/* ── Tool result block ─────────────────────────────────────────────── */
+.tool-result-block {
+  margin: 8px 0;
+  padding: 10px 14px;
+  background: var(--surface2);
+  border-left: 2px solid var(--amber);
+  border-radius: 0 6px 6px 0;
+}
+
+.type-badge {
+  font-size: 0.6rem;
+  font-family: "SF Mono", Consolas, monospace;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 6px;
+}
+.type-badge.type-result { color: var(--amber); }
+.type-badge.type-text   { color: var(--muted2); }
+
 /* ── Animations ────────────────────────────────────────────────────── */
 @keyframes spin {
   to { transform: rotate(360deg); }