Phase 2: Chat History for Agent Tab

Backend: _get_chat_history() reads JSONL sessions. API: GET /api/agents/{id}/chat-history. Frontend: Chat History tab shows session list with title, model, message count. Click to open session in chat panel.

static/panels.js

@@ -1917,6 +1917,7 @@ async function openAgentDetail(agentId) {
       </button>
       <button class="agent-tab${_agentTab==='activity'?' active':''}" onclick="switchAgentTab('activity')">Activity</button>
       <button class="agent-tab${_agentTab==='errors'?' active':''}" onclick="switchAgentTab('errors')">Errors</button>
+      <button class="agent-tab${_agentTab==='chat'?' active':''}" onclick="switchAgentTab('chat')">Chat History</button>
     </div>
 
     <div id="agentTabContent" class="agent-tab-content">
@@ -1936,7 +1937,7 @@ async function switchAgentTab(tab) {
 
   // Update tab buttons
   document.querySelectorAll('.agent-tab').forEach((el, i) => {
-    const tabs = ['overview', 'soul', 'memory', 'inbox', 'activity', 'errors'];
+    const tabs = ['overview', 'soul', 'memory', 'inbox', 'activity', 'errors', 'chat'];
     el.classList.toggle('active', tabs[i] === tab);
   });
 
@@ -1961,6 +1962,9 @@ async function switchAgentTab(tab) {
     case 'errors':
       await loadAgentErrors(agentId, content);
       break;
+    case 'chat':
+      await loadAgentChatHistory(agentId, content);
+      break;
   }
 }
 
@@ -2252,6 +2256,51 @@ function toggleInboxMsg(el) {
   el.classList.toggle('expanded');
 }
 
+async function loadAgentChatHistory(agentId, content) {
+  try {
+    const data = await api(`/api/agents/${agentId}/chat-history`);
+    const sessions = data.sessions || [];
+
+    if (sessions.length === 0) {
+      content.innerHTML = `
+        <div style="padding:24px;text-align:center;color:var(--muted);font-size:12px">
+          <div style="font-size:28px;margin-bottom:8px">💬</div>
+          <div>No chat history yet</div>
+          <div style="font-size:10px;margin-top:4px;opacity:0.6">Your conversations with ${agentId} appear here</div>
+        </div>`;
+      return;
+    }
+
+    const rows = sessions.map(s => {
+      const created = s.created_at ? new Date(s.created_at).toLocaleString() : 'N/A';
+      const rel = s.created_at ? _relTime(s.created_at) : '';
+      const model = s.model || 'unknown';
+      return `
+        <div class="chat-history-row" onclick="openAgentChatSession('${agentId}','${s.session_id}')">
+          <div class="chat-history-title">${esc(s.title)}</div>
+          <div class="chat-history-meta">
+            <span style="font-size:10px;color:var(--muted)">${created} · ${rel}</span>
+            <span style="font-size:9px;padding:1px 5px;background:var(--code-bg);border-radius:4px;color:var(--muted);font-family:monospace">${esc(model)}</span>
+            <span style="font-size:9px;color:var(--muted)">${s.message_count} msgs</span>
+          </div>
+        </div>`;
+    }).join('');
+
+    content.innerHTML = `<div class="chat-history-list">${rows}</div>`;
+
+  } catch(e) {
+    content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
+  }
+}
+
+function openAgentChatSession(agentId, sessionId) {
+  // Switch to the chat panel and load this session
+  closeAgentDetail();
+  if (typeof switchToChatPanel === 'function') switchToChatPanel();
+  if (typeof loadSession === 'function') loadSession(sessionId);
+  showToast(`Loading chat session...`);
+}
+
 // Edit handlers
 function editAgentSoul(agentId) {
   document.getElementById('soulView').style.display = 'none';

static/style.css

@@ -1630,3 +1630,41 @@ body.resizing{user-select:none;cursor:col-resize;}
 .error-event-row:hover {
   background: rgba(244, 67, 54, 0.1);
 }
+
+.chat-history-list {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.chat-history-row {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.chat-history-row:hover {
+  background: var(--row-hover);
+  border-color: var(--accent);
+}
+
+.chat-history-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chat-history-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}