Merge pull request #22 from yepzdk/feat/issue-3-session-views

yepzdk · web-flow · commit f9efab344d7a · 2026-02-20T13:08:14.000+01:00
feat: add session list and detail view with observations
diff --git a/assets/viewer/index.html b/assets/viewer/index.html
@@ -143,7 +143,13 @@
     .session-card {
       padding: 1rem; background: #161b22;
       border: 1px solid #30363d; border-radius: 6px;
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.5rem; cursor: pointer;
+      transition: border-color 0.15s;
+    }
+    .session-card:hover { border-color: #58a6ff; }
+    .session-card.expanded { border-color: #58a6ff; }
+    .session-card .session-header {
+      display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
     }
     .session-card .session-id {
       font-size: 0.8rem; color: #58a6ff; font-family: monospace;
@@ -153,7 +159,17 @@
     }
     .session-card .session-meta {
       margin-top: 0.375rem; color: #8b949e; font-size: 0.8rem;
-      display: flex; gap: 1rem; flex-wrap: wrap;
+      display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
+    }
+    .session-card .session-duration {
+      font-size: 0.8rem; color: #8b949e;
+    }
+    .session-observations {
+      margin-top: 0.75rem; padding-top: 0.75rem;
+      border-top: 1px solid #30363d;
+    }
+    .session-observations .obs-header {
+      font-size: 0.8rem; color: #8b949e; margin-bottom: 0.5rem;
     }
 
     /* Status badge */
@@ -314,8 +330,15 @@ <h2 id="section-title">Live Feed</h2>
         <!-- Sessions -->
         <div id="section-sessions" class="section">
           <div class="content-inner">
-            <div style="margin-bottom:1rem">
+            <div class="filter-row">
               <button class="btn btn-secondary" id="refresh-sessions">Refresh</button>
+              <label>Status:</label>
+              <select id="sessions-status-filter" style="background:#0d1117;border:1px solid #30363d;color:#c9d1d9;padding:0.5rem 0.75rem;border-radius:6px;font-size:0.875rem;font-family:inherit;">
+                <option value="">All</option>
+                <option value="active">Active</option>
+                <option value="ended">Ended</option>
+              </select>
+              <span id="sessions-count" style="font-size:0.85rem;color:#8b949e"></span>
             </div>
             <div id="sessions-list">
               <div class="placeholder">Loading sessions...</div>
@@ -601,31 +624,124 @@ <h2 id="section-title">Live Feed</h2>
 
     // --- Sessions ---
     const sessionsList = document.getElementById('sessions-list');
+    const sessionsCount = document.getElementById('sessions-count');
+    const sessionsStatusFilter = document.getElementById('sessions-status-filter');
+    let allSessions = [];
+
     document.getElementById('refresh-sessions').addEventListener('click', loadSessions);
+    sessionsStatusFilter.addEventListener('change', renderSessions);
+
+    function fmtDuration(startStr, endStr) {
+      const start = new Date(startStr);
+      const end = endStr ? new Date(endStr) : new Date();
+      if (isNaN(start)) return '';
+      const diffMs = end - start;
+      const mins = Math.floor(diffMs / 60000);
+      if (mins < 60) return mins + 'm';
+      const hours = Math.floor(mins / 60);
+      const remMins = mins % 60;
+      if (hours < 24) return hours + 'h ' + remMins + 'm';
+      const days = Math.floor(hours / 24);
+      return days + 'd ' + (hours % 24) + 'h';
+    }
+
+    function createSessionCard(s) {
+      const div = document.createElement('div');
+      div.className = 'session-card';
+      div.dataset.sessionId = s.ID;
+      const isActive = !s.EndedAt;
+      const badge = isActive
+        ? '<span class="badge badge-active">active</span>'
+        : '<span class="badge badge-ended">ended</span>';
+      const duration = fmtDuration(s.StartedAt, s.EndedAt);
+      const durationSpan = duration ? '<span class="session-duration">' + esc(duration) + '</span>' : '';
+      div.innerHTML =
+        '<div class="session-header">' +
+          '<div class="session-project">' + esc(s.Project || 'No project') + '</div>' +
+          badge +
+          durationSpan +
+        '</div>' +
+        '<div class="session-id">' + esc(s.ID) + '</div>' +
+        '<div class="session-meta">' +
+          '<span>Messages: ' + (s.MessageCount || 0) + '</span>' +
+          '<span>Started: ' + fmtTime(s.StartedAt) + '</span>' +
+          (s.EndedAt ? '<span>Ended: ' + fmtTime(s.EndedAt) + '</span>' : '') +
+        '</div>' +
+        '<div class="session-observations" style="display:none"></div>';
+
+      div.addEventListener('click', function() {
+        const obsContainer = this.querySelector('.session-observations');
+        const isExpanded = this.classList.contains('expanded');
+        if (isExpanded) {
+          this.classList.remove('expanded');
+          obsContainer.style.display = 'none';
+          return;
+        }
+        this.classList.add('expanded');
+        obsContainer.style.display = 'block';
+        if (obsContainer.dataset.loaded === 'true') return;
+        loadSessionObservations(s.ID, obsContainer);
+      });
 
-    async function loadSessions() {
-      sessionsList.innerHTML = '<div class="placeholder">Loading sessions...</div>';
+      return div;
+    }
+
+    async function loadSessionObservations(sessionId, container) {
+      container.innerHTML = '<div class="obs-header">Loading observations...</div>';
       try {
-        const resp = await fetch('/api/sessions');
-        const sessions = await resp.json();
-        if (!sessions || sessions.length === 0) {
-          sessionsList.innerHTML = '<div class="placeholder">No active sessions.</div>';
+        const resp = await fetch('/api/sessions/' + encodeURIComponent(sessionId) + '/observations?limit=50');
+        if (!resp.ok) {
+          container.innerHTML = '<div class="obs-header">Failed to load observations.</div>';
+          container.dataset.loaded = 'true';
           return;
         }
-        sessionsList.innerHTML = '';
-        for (const s of sessions) {
-          const div = document.createElement('div');
-          div.className = 'session-card';
-          div.innerHTML =
-            '<div class="session-id">' + esc(s.ID) + '</div>' +
-            '<div class="session-project">' + esc(s.Project || 'No project') + '</div>' +
-            '<div class="session-meta">' +
-              '<span><span class="badge badge-active">active</span></span>' +
-              '<span>Messages: ' + (s.MessageCount || 0) + '</span>' +
-              '<span>Started: ' + fmtTime(s.StartedAt) + '</span>' +
-            '</div>';
-          sessionsList.appendChild(div);
+        const observations = await resp.json();
+        if (!observations || observations.length === 0) {
+          container.innerHTML = '<div class="obs-header">No observations for this session.</div>';
+          container.dataset.loaded = 'true';
+          return;
         }
+        container.innerHTML = '<div class="obs-header">' + observations.length + ' observation' + (observations.length !== 1 ? 's' : '') + '</div>';
+        for (const obs of observations) {
+          container.appendChild(createEventCard(obs, fmtTime(obs.CreatedAt)));
+        }
+        container.dataset.loaded = 'true';
+      } catch (err) {
+        container.innerHTML = '<div class="obs-header">Failed to load observations.</div>';
+        console.error('Session observations error:', err);
+      }
+    }
+
+    function renderSessions() {
+      const filter = sessionsStatusFilter.value;
+      let filtered = allSessions;
+      if (filter === 'active') filtered = allSessions.filter(s => !s.EndedAt);
+      else if (filter === 'ended') filtered = allSessions.filter(s => s.EndedAt);
+
+      const total = allSessions.length;
+      const shown = filtered.length;
+      sessionsCount.textContent = filter
+        ? shown + ' of ' + total + ' session' + (total !== 1 ? 's' : '')
+        : total + ' session' + (total !== 1 ? 's' : '');
+
+      if (filtered.length === 0) {
+        sessionsList.innerHTML = '<div class="placeholder">' + (filter ? 'No ' + filter + ' sessions.' : 'No sessions yet.') + '</div>';
+        return;
+      }
+      sessionsList.innerHTML = '';
+      for (const s of filtered) {
+        sessionsList.appendChild(createSessionCard(s));
+      }
+    }
+
+    async function loadSessions() {
+      sessionsList.innerHTML = '<div class="placeholder">Loading sessions...</div>';
+      sessionsCount.textContent = '';
+      try {
+        const resp = await fetch('/api/sessions?all=true&limit=50');
+        const sessions = await resp.json();
+        allSessions = sessions || [];
+        renderSessions();
       } catch (err) {
         sessionsList.innerHTML = '<div class="placeholder">Failed to load sessions.</div>';
         console.error('Sessions error:', err);
diff --git a/internal/console/handlers_session.go b/internal/console/handlers_session.go
@@ -35,7 +35,15 @@ func (s *Server) handleCreateSession(w http.ResponseWriter, r *http.Request) {
 }
 
 func (s *Server) handleListSessions(w http.ResponseWriter, r *http.Request) {
-	sessions, err := s.db.ListActiveSessions()
+	var sessions []*db.Session
+	var err error
+
+	if r.URL.Query().Get("all") == "true" {
+		limit := int(parseID(r.URL.Query().Get("limit")))
+		sessions, err = s.db.ListAllSessions(limit)
+	} else {
+		sessions, err = s.db.ListActiveSessions()
+	}
 	if err != nil {
 		s.logger.Error("list sessions", "error", err)
 		writeJSON(w, http.StatusInternalServerError, map[string]string{"error": "internal error"})
@@ -59,6 +67,18 @@ func (s *Server) handleGetSession(w http.ResponseWriter, r *http.Request) {
 	writeJSON(w, http.StatusOK, sess)
 }
 
+func (s *Server) handleSessionObservations(w http.ResponseWriter, r *http.Request) {
+	id := chi.URLParam(r, "id")
+	limit := int(parseID(r.URL.Query().Get("limit")))
+	observations, err := s.db.ListBySessionID(id, limit)
+	if err != nil {
+		s.logger.Error("session observations", "error", err)
+		writeJSON(w, http.StatusInternalServerError, map[string]string{"error": "internal error"})
+		return
+	}
+	writeJSON(w, http.StatusOK, observations)
+}
+
 func (s *Server) handleEndSession(w http.ResponseWriter, r *http.Request) {
 	id := chi.URLParam(r, "id")
 	if err := s.db.EndSession(id); err != nil {
diff --git a/internal/console/server.go b/internal/console/server.go
@@ -124,6 +124,7 @@ func (s *Server) registerRoutes() {
 		r.Get("/sessions", s.handleListSessions)
 		r.Post("/sessions/cleanup", s.handleCleanupSessions)
 		r.Get("/sessions/{id}", s.handleGetSession)
+		r.Get("/sessions/{id}/observations", s.handleSessionObservations)
 		r.Post("/sessions/{id}/end", s.handleEndSession)
 		r.Post("/sessions/{id}/message-count", s.handleIncrementMessageCount)
 
diff --git a/internal/db/observations.go b/internal/db/observations.go
@@ -157,6 +157,35 @@ func (db *DB) RecentObservations(project string, limit int) ([]*Observation, err
 	return results, rows.Err()
 }
 
+// ListBySessionID returns observations for a given session, ordered most recent first.
+func (db *DB) ListBySessionID(sessionID string, limit int) ([]*Observation, error) {
+	if limit <= 0 {
+		limit = 50
+	}
+
+	rows, err := db.conn.Query(
+		`SELECT id, session_id, type, title, text, project, metadata, created_at
+		 FROM observations WHERE session_id = ? ORDER BY created_at DESC LIMIT ?`,
+		sessionID, limit,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("list observations by session %s: %w", sessionID, err)
+	}
+	defer rows.Close()
+
+	var results []*Observation
+	for rows.Next() {
+		o := &Observation{}
+		var createdAt string
+		if err := rows.Scan(&o.ID, &o.SessionID, &o.Type, &o.Title, &o.Text, &o.Project, &o.Metadata, &createdAt); err != nil {
+			return nil, fmt.Errorf("scan observation: %w", err)
+		}
+		o.CreatedAt, _ = time.Parse("2006-01-02 15:04:05", createdAt)
+		results = append(results, o)
+	}
+	return results, rows.Err()
+}
+
 // SearchFilter defines parameters for filtered full-text search.
 type SearchFilter struct {
 	Query     string
diff --git a/internal/db/sessions.go b/internal/db/sessions.go
@@ -113,3 +113,36 @@ func (db *DB) ListActiveSessions() ([]*Session, error) {
 	}
 	return results, rows.Err()
 }
+
+// ListAllSessions returns all sessions (active and ended), ordered by most recent first.
+func (db *DB) ListAllSessions(limit int) ([]*Session, error) {
+	if limit <= 0 {
+		limit = 50
+	}
+
+	rows, err := db.conn.Query(
+		`SELECT id, project, started_at, ended_at, message_count, metadata
+		 FROM sessions ORDER BY started_at DESC LIMIT ?`, limit,
+	)
+	if err != nil {
+		return nil, fmt.Errorf("list all sessions: %w", err)
+	}
+	defer rows.Close()
+
+	var results []*Session
+	for rows.Next() {
+		s := &Session{}
+		var startedAt string
+		var endedAt sql.NullString
+		if err := rows.Scan(&s.ID, &s.Project, &startedAt, &endedAt, &s.MessageCount, &s.Metadata); err != nil {
+			return nil, fmt.Errorf("scan session: %w", err)
+		}
+		s.StartedAt, _ = time.Parse("2006-01-02 15:04:05", startedAt)
+		if endedAt.Valid {
+			t, _ := time.Parse("2006-01-02 15:04:05", endedAt.String)
+			s.EndedAt = &t
+		}
+		results = append(results, s)
+	}
+	return results, rows.Err()
+}
