From bc72bccc85fc74963d49f317c481757c256748bd Mon Sep 17 00:00:00 2001
From: arkon <arkon.85@hotmail.com>
Date: Sun, 18 Jan 2026 22:29:23 +0100
Subject: [PATCH] feat(ui): add reconnect button and session count in header

- Add retry button when SSE connection is lost
- Add reconnectSSE method for manual reconnection
- Add session count to header stats
- Include session costs in total cost calculation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/web/public/app.js     | 33 +++++++++++++++++++++++++++------
 src/web/public/index.html |  4 ++++
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/web/public/app.js b/src/web/public/app.js
index edfbafe2..8a8ff196 100644
--- a/src/web/public/app.js
+++ b/src/web/public/app.js
@@ -434,16 +434,29 @@ class ClaudemanApp {
     const text = el.querySelector('span:last-child');
 
     dot.className = 'status-dot ' + status;
-    text.textContent = status === 'connected' ? 'Connected' : 'Disconnected';
 
-    // Show toast on disconnect
-    if (status === 'disconnected') {
-      this.showToast('Connection lost. Reconnecting...', 'warning');
-    } else if (status === 'connected') {
+    if (status === 'connected') {
+      text.textContent = 'Connected';
+      text.onclick = null;
+      text.style.cursor = 'default';
       this.showToast('Connected to server', 'success');
+    } else {
+      text.innerHTML = '<span>Disconnected</span> <button class="btn btn-xs" style="margin-left:0.5rem">Retry</button>';
+      text.querySelector('button').onclick = () => this.reconnectSSE();
+      this.showToast('Connection lost. Click retry to reconnect.', 'warning');
     }
   }
 
+  // Manually reconnect SSE
+  reconnectSSE() {
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
+    }
+    this.showToast('Reconnecting...', 'info');
+    this.connectSSE();
+  }
+
   // Show a toast notification
   showToast(message, type = 'info') {
     const toast = document.createElement('div');
@@ -1113,7 +1126,15 @@ class ClaudemanApp {
 
   // Stats
   updateStats() {
-    document.getElementById('statCost').textContent = `$${this.totalCost.toFixed(2)}`;
+    // Calculate total cost from sessions and total cost tracker
+    let sessionsCost = 0;
+    this.sessions.forEach(s => {
+      sessionsCost += s.totalCost || 0;
+    });
+    const displayCost = Math.max(this.totalCost, sessionsCost);
+
+    document.getElementById('statSessions').textContent = this.sessions.size;
+    document.getElementById('statCost').textContent = `$${displayCost.toFixed(2)}`;
     document.getElementById('statTasks').textContent = this.totalTasks;
   }
 
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 464b5c3d..5095bcfe 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -24,6 +24,10 @@
         </div>
       </div>
       <div class="header-stats">
+        <div class="stat-item">
+          <span class="stat-value" id="statSessions">0</span>
+          <span class="stat-label">Sessions</span>
+        </div>
         <div class="stat-item">
           <span class="stat-value" id="statCost">$0.00</span>
           <span class="stat-label">Total Cost</span>