@qiaolei81/copilot-session-viewer 0.2.1 → 0.2.4

package/CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.2] - 2026-02-27
+
+### Fixed
+- **ETag Cache Bug** - `session.updated`/`session.created` field name typo (should be `updatedAt`/`createdAt`) caused ETag to always be `md5("sessionId-undefined")`, resulting in permanent 304 Not Modified responses — frontend never saw new events for WIP sessions
+
 ## [0.2.1] - 2026-02-25
 
 ### Changed

package/lib/parsers/index.js

@@ -2,6 +2,7 @@ const BaseSessionParser = require('./base-parser');
 const CopilotSessionParser = require('./copilot-parser');
 const ClaudeSessionParser = require('./claude-parser');
 const PiMonoParser = require('./pi-mono-parser');
+const VsCodeParser = require('./vscode-parser');
 const ParserFactory = require('./parser-factory');
 
 module.exports = {
@@ -9,5 +10,6 @@ module.exports = {
   CopilotSessionParser,
   ClaudeSessionParser,
   PiMonoParser,
+  VsCodeParser,
   ParserFactory
 };

package/lib/parsers/vscode-parser.js

@@ -0,0 +1,413 @@
+const BaseSessionParser = require('./base-parser');
+
+/**
+ * VSCode Copilot Chat Session Parser
+ *
+ * Parses chat sessions stored by VS Code's GitHub Copilot Chat extension.
+ * Location: ~/Library/Application Support/Code/User/workspaceStorage/<hash>/chatSessions/<uuid>.json
+ *
+ * Format: A single JSON object with a `requests` array. Each request has
+ * a `message` (user input) and a `response` array of typed content items.
+ */
+class VsCodeParser extends BaseSessionParser {
+  /**
+   * VSCode sessions are passed as a plain JS object (already parsed JSON),
+   * not as an array of events. We detect them by the presence of `requests`.
+   * The ParserFactory passes raw events arrays for JSONL sources, so we
+   * keep canParse() returning false — VSCode sessions are loaded differently.
+   */
+  canParse(_events) {
+    // VSCode sessions are JSON objects, not event arrays.
+    // SessionRepository calls parseVsCode() directly; canParse is unused here.
+    return false;
+  }
+
+  /**
+   * Parse a VSCode chat session JSON object into the normalised format.
+   * @param {Object} sessionJson - Parsed JSON from chatSessions/<uuid>.json
+   * @returns {Object} Normalised session data
+   */
+  parseVsCode(sessionJson) {
+    const metadata = this._getMetadata(sessionJson);
+    const events = this._toEvents(sessionJson);
+    return {
+      metadata,
+      turns: this._extractTurns(events),
+      toolCalls: this._extractToolCalls(events),
+      allEvents: events,
+    };
+  }
+
+  // ---- required abstract methods (not used for VsCode path) ----
+  parse(_events) { return null; }
+  getMetadata(_events) { return null; }
+  extractTurns(_events) { return []; }
+  extractToolCalls(_events) { return []; }
+
+  // ---- private helpers ----
+
+  _getMetadata(sessionJson) {
+    const requests = sessionJson.requests || [];
+    const firstReq = requests[0] || {};
+    const lastReq = requests[requests.length - 1] || {};
+
+    // Derive workspace label from agent name or fallback
+    const agentName = firstReq.agent?.name || firstReq.agent?.id || 'vscode-copilot';
+
+    return {
+      sessionId: sessionJson.sessionId,
+      startTime: sessionJson.creationDate
+        ? new Date(sessionJson.creationDate).toISOString()
+        : (firstReq.timestamp ? new Date(firstReq.timestamp).toISOString() : null),
+      endTime: sessionJson.lastMessageDate
+        ? new Date(sessionJson.lastMessageDate).toISOString()
+        : (lastReq.timestamp ? new Date(lastReq.timestamp).toISOString() : null),
+      model: firstReq.modelId || null,
+      producer: 'vscode-copilot-chat',
+      version: firstReq.agent?.extensionVersion || null,
+      agentName,
+      requestCount: requests.length,
+    };
+  }
+
+  /**
+   * Convert VSCode session JSON into a flat event array that matches the
+   * normalised event schema used by the rest of the viewer.
+   */
+  _toEvents(sessionJson) {
+    const events = [];
+    const requests = sessionJson.requests || [];
+
+    // session.start synthetic event
+    events.push({
+      type: 'session.start',
+      id: `${sessionJson.sessionId}-start`,
+      timestamp: sessionJson.creationDate
+        ? new Date(sessionJson.creationDate).toISOString()
+        : null,
+      data: {
+        sessionId: sessionJson.sessionId,
+        producer: 'vscode-copilot-chat',
+        selectedModel: requests[0]?.modelId || null,
+      },
+    });
+
+    for (const req of requests) {
+      const ts = req.timestamp ? new Date(req.timestamp).toISOString() : null;
+      // Use completedAt for assistant events — more accurate than request start time
+      const completedAt = req.modelState?.completedAt
+        ? new Date(req.modelState.completedAt).toISOString()
+        : ts;
+      const reqStartMs = ts ? new Date(ts).getTime() : null;
+      const reqEndMs = completedAt ? new Date(completedAt).getTime() : reqStartMs;
+      const reqDurationMs = (reqStartMs && reqEndMs) ? (reqEndMs - reqStartMs) : 0;
+
+      // Build subAgentInvocationId → agent name map from this request's response items
+      const responseItems = req.response || [];
+      const subAgentNames = this._buildSubAgentNameMap(responseItems);
+
+      // Count items per subagent (in first-appearance order) for proportional time estimation
+      const subAgentItemCounts = new Map(); // sid → count
+      const subAgentOrder = []; // ordered unique sids
+      for (const item of responseItems) {
+        if (!item || typeof item !== 'object') continue;
+        const sid = item.subAgentInvocationId;
+        if (!sid) continue;
+        if (!subAgentItemCounts.has(sid)) { subAgentItemCounts.set(sid, 0); subAgentOrder.push(sid); }
+        subAgentItemCounts.set(sid, subAgentItemCounts.get(sid) + 1);
+      }
+      const totalSubAgentItems = [...subAgentItemCounts.values()].reduce((a, b) => a + b, 0);
+
+      // Compute estimated start/end timestamps per subagent (proportional to item count)
+      const subAgentTimestamps = new Map(); // sid → { startTime, endTime }
+      if (reqStartMs && totalSubAgentItems > 0) {
+        let cursor = reqStartMs;
+        for (const sid of subAgentOrder) {
+          const fraction = subAgentItemCounts.get(sid) / totalSubAgentItems;
+          const duration = Math.round(reqDurationMs * fraction);
+          subAgentTimestamps.set(sid, {
+            startTime: new Date(cursor).toISOString(),
+            endTime: new Date(cursor + duration).toISOString(),
+          });
+          cursor += duration;
+        }
+      }
+
+      const seenSubAgents = new Set();
+
+      // user.message
+      const userText = this._extractUserText(req.message);
+      events.push({
+        type: 'user.message',
+        id: req.requestId,
+        timestamp: ts,
+        data: {
+          message: userText,
+          content: userText,
+        },
+      });
+
+      // assistant.turn_start
+      events.push({
+        type: 'assistant.turn_start',
+        id: `${req.requestId}-turn`,
+        timestamp: ts,
+        parentId: req.requestId,
+        data: {},
+      });
+
+      let assistantText = '';
+      let itemIndex = 0;
+      let currentSubAgentId = null;
+
+      const flushText = () => {
+        const trimmed = assistantText.trim().replace(/^`{3,}$/gm, '').trim();
+        assistantText = '';
+        if (!trimmed) return;
+        const sid = currentSubAgentId;
+        const _agentName = sid ? (subAgentNames[sid] || sid.slice(0, 8)) : null;
+        events.push({
+          type: 'assistant.message',
+          id: `${req.requestId}-text-${itemIndex}`,
+          timestamp: completedAt,
+          parentId: req.requestId,
+          data: {
+            message: trimmed,
+            content: trimmed,
+            tools: [],
+            subAgentId: null,
+            subAgentName: null,
+            parentToolCallId: null,
+          },
+        });
+      };
+
+      const emitSubAgentStart = (sid, _itemIdx) => {
+        if (!sid || seenSubAgents.has(sid)) return;
+        seenSubAgents.add(sid);
+        const agentName = subAgentNames[sid] || `subagent-${sid.slice(0, 8)}`;
+        const times = subAgentTimestamps.get(sid);
+        const startTs = times?.startTime || completedAt;
+        events.push({
+          type: 'subagent.started',
+          id: `${req.requestId}-subagent-${sid}`,
+          timestamp: startTs,
+          parentId: req.requestId,
+          data: {
+            subAgentId: sid,
+            subAgentName: agentName,
+            agentName: agentName,
+            agentDisplayName: agentName,
+            toolCallId: sid,
+            badgeLabel: agentName,
+            badgeClass: 'badge-subagent',
+          },
+        });
+      };
+
+      for (const item of responseItems) {
+        itemIndex++;
+        switch (item.kind) {
+          case 'thinking': {
+            const text = item.content?.value || item.content || '';
+            if (text) assistantText += text + '\n';
+            break;
+          }
+
+          case 'markdownContent': {
+            const text = item.content?.value || item.content || '';
+            if (text) assistantText += text + '\n';
+            break;
+          }
+
+          case undefined:
+          case null: {
+            // Plain markdown text item (no kind field, has 'value')
+            const text = item.value || '';
+            if (text) assistantText += text + '\n';
+            break;
+          }
+
+          case 'toolInvocationSerialized': {
+            flushText();
+            // Emit subagent.start on first appearance of this subagent
+            const sid = item.subAgentInvocationId;
+            emitSubAgentStart(sid, itemIndex);
+            if (sid) currentSubAgentId = sid;
+            const tool = this._normalizeTool(item);
+            if (tool) {
+              const agentName = sid ? (subAgentNames[sid] || sid.slice(0, 8)) : null;
+              events.push({
+                type: 'tool.invocation',
+                id: tool.id || `${req.requestId}-tool-${itemIndex}`,
+                timestamp: completedAt,
+                parentId: req.requestId,
+                data: {
+                  tool,
+                  subAgentId: sid || null,
+                  subAgentName: agentName,
+                  parentToolCallId: sid || null,
+                  badgeLabel: tool.name,
+                  badgeClass: tool.status === 'error' ? 'badge-error' : 'badge-tool',
+                },
+              });
+            }
+            break;
+          }
+
+          case 'textEditGroup': {
+            flushText();
+            const edits = item.edits || item.uri ? [item] : [];
+            events.push({
+              type: 'tool.invocation',
+              id: `${req.requestId}-edit-${itemIndex}`,
+              timestamp: completedAt,
+              parentId: req.requestId,
+              data: {
+                tool: {
+                  type: 'tool_use',
+                  id: `${req.requestId}-edit-${itemIndex}`,
+                  name: 'textEdit',
+                  startTime: ts,
+                  endTime: ts,
+                  status: 'completed',
+                  input: { uri: item.uri, edits },
+                  result: 'file edit',
+                  error: null,
+                },
+                badgeLabel: 'textEdit',
+                badgeClass: 'badge-tool',
+              },
+            });
+            break;
+          }
+
+          case 'prepareToolInvocation':
+          case 'inlineReference':
+          case 'undoStop':
+          case 'codeblockUri':
+          case 'mcpServersStarting':
+            // Skip non-visible items
+            break;
+
+          default:
+            break;
+        }
+      }
+
+      flushText(); // flush any trailing text
+
+      // Emit subagent.completed events (proportional estimated endTime) after all items
+      for (const sid of seenSubAgents) {
+        const agentName = subAgentNames[sid] || `subagent-${sid.slice(0, 8)}`;
+        const times = subAgentTimestamps.get(sid);
+        const endTs = times?.endTime || completedAt;
+        events.push({
+          type: 'subagent.completed',
+          id: `${req.requestId}-subagent-${sid}-end`,
+          timestamp: endTs,
+          parentId: req.requestId,
+          data: {
+            toolCallId: sid,
+            agentDisplayName: agentName,
+            agentName: agentName,
+          },
+        });
+      }
+    }
+
+    return events;
+  }
+
+  /**
+   * Extract agent name from the first toolInvocationSerialized item for a given subAgentInvocationId.
+   * Looks for .agent.md filename in invocationMessage or resultDetails URIs.
+   */
+  _buildSubAgentNameMap(items) {
+    const nameMap = {};
+    for (const item of items) {
+      if (!item || typeof item !== 'object') continue;
+      const sid = item.subAgentInvocationId;
+      if (!sid || nameMap[sid]) continue;
+      if (item.kind !== 'toolInvocationSerialized') continue;
+
+      // Try invocationMessage text for agent file path
+      const msgObj = item.invocationMessage;
+      const msg = (msgObj && typeof msgObj === 'object') ? (msgObj.value || '') : '';
+      let m = msg.match(/agents\/([^/\]]+?)\.agent\.md/);
+      if (m) { nameMap[sid] = m[1]; continue; }
+
+      // Try resultDetails
+      for (const rd of (item.resultDetails || [])) {
+        if (typeof rd !== 'object') continue;
+        const fp = rd.fsPath || rd.path || '';
+        m = fp.match(/agents\/([^/]+?)\.agent\.md/);
+        if (m) { nameMap[sid] = m[1]; break; }
+      }
+    }
+    return nameMap;
+  }
+
+  _extractUserText(message) {
+    if (!message) return '';
+    if (typeof message.text === 'string') return message.text;
+    // parts[] may contain text fragments
+    if (Array.isArray(message.parts)) {
+      return message.parts
+        .filter(p => p.kind === 'text')
+        .map(p => p.text || '')
+        .join('');
+    }
+    return '';
+  }
+
+  _normalizeTool(item) {
+    if (!item.toolCallId) return null;
+
+    // toolSpecificData may hold input/output depending on tool type
+    const tsd = item.toolSpecificData || {};
+    const input = tsd.input || tsd.parameters || tsd.request || {};
+    const result = tsd.output || tsd.result || item.resultDetails || null;
+    const isError = item.isConfirmed === false;
+
+    return {
+      type: 'tool_use',
+      id: item.toolCallId,
+      name: item.toolId || 'unknown',
+      startTime: null,
+      endTime: null,
+      status: isError ? 'error' : (item.isComplete ? 'completed' : 'pending'),
+      input,
+      result: typeof result === 'string' ? result : JSON.stringify(result),
+      error: isError ? (item.resultDetails || 'Tool invocation not confirmed') : null,
+    };
+  }
+
+  _extractTurns(events) {
+    const turns = [];
+    let current = null;
+
+    for (const event of events) {
+      if (event.type === 'user.message') {
+        if (current) turns.push(current);
+        current = { userMessage: event, assistantMessages: [], toolCalls: [] };
+      } else if (current) {
+        if (event.type === 'assistant.message') {
+          current.assistantMessages.push(event);
+        } else if (event.type === 'tool.invocation') {
+          current.toolCalls.push(event.data?.tool);
+        }
+      }
+    }
+    if (current) turns.push(current);
+    return turns;
+  }
+
+  _extractToolCalls(events) {
+    return events
+      .filter(e => e.type === 'tool.invocation' && e.data?.tool)
+      .map(e => e.data.tool);
+  }
+}
+
+module.exports = VsCodeParser;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qiaolei81/copilot-session-viewer",
-  "version": "0.2.1",
+  "version": "0.2.4",
   "description": "Web UI for viewing GitHub Copilot CLI session logs",
   "author": "Lei Qiao <qiaolei81@gmail.com>",
   "license": "MIT",

package/server.js

@@ -12,25 +12,8 @@ module.exports = app;
 if (require.main === module) {
   const server = app.listen(config.PORT, () => {
     console.log(`🚀 Copilot Session Viewer running at http://localhost:${config.PORT}`);
-    console.log('📂 Session directories (env vars):');
-    console.log(`   COPILOT_SESSION_DIR=${process.env.COPILOT_SESSION_DIR || 'not set'}`);
-    console.log(`   CLAUDE_SESSION_DIR=${process.env.CLAUDE_SESSION_DIR || 'not set'}`);
-    console.log(`   PI_MONO_SESSION_DIR=${process.env.PI_MONO_SESSION_DIR || 'not set'}`);
-    console.log(`   SESSION_DIR=${process.env.SESSION_DIR || 'not set'} (legacy)`);
     console.log(`🔧 Environment: ${config.NODE_ENV}`);
     console.log(`⚡ Active processes: ${processManager.getActiveCount()}`);
-    
-    // Log sessions found
-    const SessionRepository = require('./src/services/sessionRepository');
-    const repo = new SessionRepository();
-    repo.findAll().then(sessions => {
-      console.log(`📊 Sessions found: ${sessions.length}`);
-      if (sessions.length > 0) {
-        console.log(`   First 5: ${sessions.slice(0, 5).map(s => s.id + ' (' + s.source + ')').join(', ')}`);
-      }
-    }).catch(err => {
-      console.error('❌ Error loading sessions:', err.message);
-    });
   });
 
   // Graceful shutdown

package/src/app.js

@@ -50,12 +50,12 @@ function createApp(options = {}) {
   }));
 
   app.use(compression({
-    level: 9, // Maximum compression for local use (CPU is not a bottleneck)
+    level: 1, // Fast compression (speed > ratio for local use)
     threshold: 1024, // Compress responses > 1KB
     filter: (req, res) => {
-      // Always compress JSON responses
-      if (res.getHeader('Content-Type')?.includes('application/json')) {
-        return true;
+      // Skip compression for large JSON API responses (handled separately)
+      if (req.path.includes('/events') && res.getHeader('Content-Type')?.includes('application/json')) {
+        return false;
       }
       return compression.filter(req, res);
     }

package/src/controllers/sessionController.js

@@ -1,5 +1,5 @@
 const SessionService = require('../services/sessionService');
-const { isValidSessionId } = require('../utils/helpers');
+const { isValidSessionId, buildMetadata } = require('../utils/helpers');
 const AdmZip = require('adm-zip');
 const path = require('path');
 const fs = require('fs');
@@ -12,8 +12,8 @@ class SessionController {
   // Homepage with initial load (first batch)
   async getHomepage(req, res) {
     try {
-      const initialLimit = 100; // Load first 100 sessions to ensure Pi-Mono sessions are included
-      const paginationData = await this.sessionService.getPaginatedSessions(1, initialLimit);
+      // Only load default pill (copilot) first 20 sessions
+      const paginationData = await this.sessionService.getPaginatedSessions(1, 20, 'copilot');
 
       // Pass data for infinite scroll
       const templateData = {
@@ -34,19 +34,17 @@ class SessionController {
     try {
       const sessionId = req.params.id;
 
-      // Validate session ID format
       if (!isValidSessionId(sessionId)) {
         return res.status(400).json({ error: 'Invalid session ID' });
       }
 
-      const sessionData = await this.sessionService.getSessionWithEvents(sessionId);
-
-      if (!sessionData) {
+      const session = await this.sessionService.sessionRepository.findById(sessionId);
+      if (!session) {
         return res.status(404).json({ error: 'Session not found' });
       }
 
-      const { events, metadata } = sessionData;
-      res.render('session-vue', { sessionId, events, metadata });
+      const metadata = buildMetadata(session);
+      res.render('session-vue', { sessionId, events: [], metadata });
     } catch (err) {
       console.error('Error loading session:', err);
       res.status(500).json({ error: 'Error loading session' });
@@ -58,20 +56,17 @@ class SessionController {
     try {
       const sessionId = req.params.id;
 
-      // Validate session ID format
       if (!isValidSessionId(sessionId)) {
         return res.status(400).json({ error: 'Invalid session ID' });
       }
 
-      const sessionData = await this.sessionService.getSessionWithEvents(sessionId);
-
-      if (!sessionData) {
+      const session = await this.sessionService.sessionRepository.findById(sessionId);
+      if (!session) {
         return res.status(404).json({ error: 'Session not found' });
       }
 
-      const { events, metadata } = sessionData;
-      // Use original time-analyze view (supports all sources via normalized events)
-      res.render('time-analyze', { sessionId, events, metadata });
+      const metadata = buildMetadata(session);
+      res.render('time-analyze', { sessionId, events: [], metadata });
     } catch (err) {
       console.error('Error loading time analysis:', err);
       res.status(500).json({ error: 'Error loading analysis' });
@@ -83,33 +78,26 @@ class SessionController {
     try {
       const page = req.query.page ? parseInt(req.query.page) : null;
       const limit = req.query.limit ? parseInt(req.query.limit) : null;
+      const sourceFilter = req.query.source || null;
 
       if (page && limit) {
         // Return paginated response
         if (page < 1 || limit < 1 || limit > 100) {
           return res.status(400).json({ error: 'Invalid pagination parameters' });
         }
-        const paginationData = await this.sessionService.getPaginatedSessions(page, limit);
-
-        // Set cache headers for paginated data (shorter cache)
-        res.set({
-          'Cache-Control': 'public, max-age=60', // 1 minute cache
-          'ETag': `"sessions-page-${page}-${limit}-${Date.now()}"`,
-          'Vary': 'Accept-Encoding'
-        });
-
+        const paginationData = await this.sessionService.getPaginatedSessions(page, limit, sourceFilter);
+        res.set({ 'Cache-Control': 'public, max-age=60' });
         res.json(paginationData);
+      } else if (sourceFilter && limit) {
+        // Source-filtered first page (for pill switching)
+        const sessions = await this.sessionService.getAllSessions(sourceFilter);
+        const sliced = sessions.slice(0, limit);
+        res.set({ 'Cache-Control': 'public, max-age=60' });
+        res.json({ sessions: sliced, hasMore: sessions.length > limit, totalSessions: sessions.length });
       } else {
         // Return all sessions for backward compatibility
-        const sessions = await this.sessionService.getAllSessions();
-
-        // Set cache headers for full session list
-        res.set({
-          'Cache-Control': 'public, max-age=300', // 5 minute cache
-          'ETag': `"sessions-all-${Date.now()}"`,
-          'Vary': 'Accept-Encoding'
-        });
-
+        const sessions = await this.sessionService.getAllSessions(sourceFilter);
+        res.set({ 'Cache-Control': 'public, max-age=300' });
         res.json(sessions);
       }
     } catch (err) {
@@ -118,11 +106,12 @@ class SessionController {
     }
   }
 
-  // API: Load more sessions for infinite scroll
+    // API: Load more sessions for infinite scroll
   async loadMoreSessions(req, res) {
     try {
       const offset = parseInt(req.query.offset) || 0;
       const limit = parseInt(req.query.limit) || 20;
+      const sourceFilter = req.query.source || null;
 
       // Validate parameters
       if (offset < 0 || limit < 1 || limit > 50) {
@@ -131,7 +120,7 @@ class SessionController {
 
       // Calculate page number from offset
       const page = Math.floor(offset / limit) + 1;
-      const paginationData = await this.sessionService.getPaginatedSessions(page, limit);
+      const paginationData = await this.sessionService.getPaginatedSessions(page, limit, sourceFilter);
 
       res.json({
         sessions: paginationData.sessions,
@@ -174,7 +163,7 @@ class SessionController {
       }
 
       // Get session metadata for ETag generation
-      const session = await this.sessionService.getSessionById(sessionId);
+      const session = await this.sessionService.sessionRepository.findById(sessionId);
       if (!session) {
         return res.status(404).json({ error: 'Session not found' });
       }
@@ -182,8 +171,8 @@ class SessionController {
       // Generate ETag from session ID + timestamp + pagination params (if used)
       const crypto = require('crypto');
       const etagBase = isPaginationRequested 
-        ? `${sessionId}-${session.updated || session.created}-${limit}-${offset}`
-        : `${sessionId}-${session.updated || session.created}`;
+        ? `${sessionId}-${session.updatedAt || session.createdAt}-${limit}-${offset}`
+        : `${sessionId}-${session.updatedAt || session.createdAt}`;
       const etag = crypto.createHash('md5').update(etagBase).digest('hex');
 
       // Check If-None-Match header (client cache)
@@ -248,7 +237,7 @@ class SessionController {
 
       // Set caching headers
       const crypto = require('crypto');
-      const etagBase = `${sessionId}-timeline-${session.updated || session.created}`;
+      const etagBase = `${sessionId}-timeline-${session.updatedAt || session.createdAt}`;
       const etag = crypto.createHash('md5').update(etagBase).digest('hex');
 
       res.set({

package/src/models/Session.js

@@ -9,6 +9,7 @@ class Session {
     this.type = type; // 'directory' or 'file'
     this.source = options.source || 'copilot'; // 'copilot' or 'claude'
     this.directory = options.directory || null; // Full path to session directory
+    this.filePath = options.filePath || null; // Full path to session file (for file-based sessions)
     this.workspace = options.workspace || {};
     this.createdAt = options.createdAt;
     this.updatedAt = options.updatedAt;
@@ -124,7 +125,8 @@ class Session {
     const metadata = {
       'copilot': { name: 'Copilot', badgeClass: 'source-copilot' },
       'claude': { name: 'Claude', badgeClass: 'source-claude' },
-      'pi-mono': { name: 'Pi', badgeClass: 'source-pi-mono' }
+      'pi-mono': { name: 'Pi', badgeClass: 'source-pi-mono' },
+      'vscode': { name: 'VSCode', badgeClass: 'source-vscode' }
     };
     return metadata[source] || { name: source, badgeClass: 'source-unknown' };
   }

package/src/services/sessionRepository.js

@@ -38,6 +38,11 @@ class SessionRepository {
           type: 'pi-mono',
           dir: process.env.PI_MONO_SESSION_DIR || 
                path.join(os.homedir(), '.pi', 'agent', 'sessions')
+        },
+        {
+          type: 'vscode',
+          dir: process.env.VSCODE_WORKSPACE_STORAGE_DIR ||
+               path.join(os.homedir(), 'Library', 'Application Support', 'Code', 'User', 'workspaceStorage')
         }
       ];
     }
@@ -46,13 +51,18 @@ class SessionRepository {
   }
 
   /**
-   * Get all sessions from all sources
+   * Get all sessions from all sources (or a specific source)
+   * @param {string|null} sourceType - Optional source type filter ('copilot', 'claude', 'pi-mono', 'vscode')
    * @returns {Promise<Session[]>} Array of sessions sorted by updatedAt (newest first)
    */
-  async findAll() {
+  async findAll(sourceType = null) {
     const allSessions = [];
 
-    for (const source of this.sources) {
+    const sources = sourceType
+      ? this.sources.filter(s => s.type === sourceType)
+      : this.sources;
+
+    for (const source of sources) {
       try {
         const sessions = await this._scanSource(source);
         allSessions.push(...sessions);
@@ -100,6 +110,12 @@ class SessionRepository {
           if (stats.isDirectory()) {
             return this._scanPiMonoDir(fullPath, entry);
           }
+        } else if (source.type === 'vscode') {
+          // VSCode: workspaceStorage/<hash>/chatSessions/<uuid>.json
+          // Each top-level entry is a workspace hash directory
+          if (stats.isDirectory()) {
+            return this._scanVsCodeWorkspaceDir(fullPath);
+          }
         }
         return null;
       });
@@ -259,6 +275,8 @@ class SessionRepository {
         session = await this._findClaudeSession(sessionId, source.dir);
       } else if (source.type === 'pi-mono') {
         session = await this._findPiMonoSession(sessionId, source.dir);
+      } else if (source.type === 'vscode') {
+        session = await this._findVsCodeSession(sessionId, source.dir);
       }
 
       if (session) return session;
@@ -423,6 +441,66 @@ class SessionRepository {
     return null;
   }
 
+  /**
+   * Find VSCode session by ID in workspaceStorage
+   * @private
+   */
+  async _findVsCodeSession(sessionId, workspaceStorageDir) {
+    try {
+      const hashes = await fs.readdir(workspaceStorageDir);
+      for (const hash of hashes) {
+        const chatSessionsDir = path.join(workspaceStorageDir, hash, 'chatSessions');
+        try {
+          const files = await fs.readdir(chatSessionsDir);
+          const matchingFile = files.find(f => f === `${sessionId}.json` || f === `${sessionId}.jsonl` || f.replace(/\.jsonl?$/, '') === sessionId);
+          if (matchingFile) {
+            const fullPath = path.join(chatSessionsDir, matchingFile);
+            const stats = await fs.stat(fullPath);
+            const raw = await fs.readFile(fullPath, 'utf-8');
+            let sessionJson;
+            if (matchingFile.endsWith('.jsonl')) {
+              sessionJson = this._parseVsCodeJsonl(raw);
+              if (!sessionJson) continue;
+            } else {
+              sessionJson = JSON.parse(raw);
+            }
+            const requests = sessionJson.requests || [];
+            if (requests.length === 0) return null;
+
+            const firstReq = requests[0];
+            const createdAt = sessionJson.creationDate
+              ? new Date(sessionJson.creationDate)
+              : (firstReq.timestamp ? new Date(firstReq.timestamp) : stats.birthtime);
+            const updatedAt = sessionJson.lastMessageDate
+              ? new Date(sessionJson.lastMessageDate)
+              : stats.mtime;
+            const userText = this._extractVsCodeUserText(firstReq.message);
+
+            return new Session(sessionId, 'file', {
+              source: 'vscode',
+              filePath: fullPath,
+              createdAt,
+              updatedAt,
+              summary: userText ? userText.slice(0, 120) : `VSCode chat (${requests.length} requests)`,
+              hasEvents: true,
+              eventCount: requests.reduce((s, r) => s + (r.response || []).length, 0) + requests.length * 2 + 1,
+              duration: updatedAt - createdAt,
+              sessionStatus: 'completed',
+              model: firstReq.modelId || null,
+              workspace: { cwd: path.join(workspaceStorageDir, hash) },
+            });
+          }
+        } catch {
+          // No chatSessions dir or can't read — skip
+        }
+      }
+    } catch (err) {
+      console.error(`[VSCode findById] Error searching VSCode sessions: ${err.message}`, err.stack);
+    }
+    console.log(`[VSCode findById] Session ${sessionId} not found in vscode sessions`);
+    return null;
+  }
+
   /**
    * Create Claude session from subagents-only directory (no main events.jsonl)
    * @private
@@ -657,6 +735,200 @@ class SessionRepository {
     }
   }
 
+  /**
+   * Scan a VSCode workspaceStorage/<hash> directory for chatSessions/*.json files
+   * @private
+   */
+  /** Resolve the real project/workspace path from a VSCode workspaceStorage hash directory */
+  /** Parse a VSCode .jsonl file: read kind=0 for base state, merge kind=2 patches into response arrays */
+  _parseVsCodeJsonl(raw) {
+    const lines = raw.split('\n').filter(l => l.trim());
+    if (lines.length === 0) return null;
+
+    const first = JSON.parse(lines[0]);
+    const sessionJson = first.v || first; // kind=0 wraps in .v
+
+    // Apply kind=1 (field set) and kind=2 (array splice) patches
+    for (let idx = 1; idx < lines.length; idx++) {
+      try {
+        const patch = JSON.parse(lines[idx]);
+        const k = patch.k || [];
+        const v = patch.v;
+
+        if (patch.kind === 2 && Array.isArray(v)) {
+          // Navigate to parent object, then splice into the target array
+          let obj = sessionJson;
+          for (let ki = 0; ki < k.length - 1; ki++) {
+            const key = k[ki];
+            if (typeof key === 'number') {
+              obj = obj[key];
+            } else {
+              if (!obj[key]) obj[key] = {};
+              obj = obj[key];
+            }
+          }
+          const lastKey = k[k.length - 1];
+          if (lastKey !== undefined) {
+            if (!obj[lastKey]) obj[lastKey] = [];
+            const target = obj[lastKey];
+            const i = patch.i;
+            if (i === null || i === undefined) {
+              target.push(...v);
+            } else {
+              target.splice(i, 0, ...v);
+            }
+          } else {
+            // k is empty — splice into sessionJson itself (rare)
+            const i = patch.i;
+            if (i === null || i === undefined) sessionJson.push?.(...v);
+          }
+        } else if (patch.kind === 1 && k.length > 0) {
+          // Navigate to parent, set the final key
+          let obj = sessionJson;
+          for (let ki = 0; ki < k.length - 1; ki++) {
+            const key = k[ki];
+            if (typeof key === 'number') {
+              obj = obj[key];
+            } else {
+              if (!obj[key]) obj[key] = {};
+              obj = obj[key];
+            }
+          }
+          const lastKey = k[k.length - 1];
+          obj[lastKey] = v;
+        }
+      } catch {
+        // Skip malformed lines
+      }
+    }
+
+    return sessionJson;
+  }
+
+  async _resolveVsCodeWorkspacePath(workspaceHashDir) {
+    try {
+      const workspaceJsonPath = path.join(workspaceHashDir, 'workspace.json');
+      const raw = await fs.readFile(workspaceJsonPath, 'utf-8');
+      const meta = JSON.parse(raw);
+
+      if (meta.folder) {
+        // Single-folder workspace: file:///path/to/project
+        return decodeURIComponent(meta.folder.replace('file://', ''));
+      }
+
+      if (meta.workspace) {
+        // Multi-folder workspace: points to another .json with folders array
+        const wsFilePath = decodeURIComponent(meta.workspace.replace('file://', ''));
+        try {
+          const wsRaw = await fs.readFile(wsFilePath, 'utf-8');
+          const ws = JSON.parse(wsRaw);
+          if (Array.isArray(ws.folders) && ws.folders.length > 0) {
+            // Return first folder path
+            const wsDir = path.dirname(wsFilePath);
+            const resolved = path.resolve(wsDir, ws.folders[0].path);
+            return resolved;
+          }
+        } catch {
+          // Ignore nested read errors
+        }
+      }
+    } catch {
+      // No workspace.json or unreadable
+    }
+    return null;
+  }
+
+  async _scanVsCodeWorkspaceDir(workspaceHashDir) {
+    const chatSessionsDir = path.join(workspaceHashDir, 'chatSessions');
+    try {
+      await fs.access(chatSessionsDir);
+    } catch {
+      return []; // No chatSessions subfolder — skip silently
+    }
+
+    // Resolve the real project path from workspace.json
+    const realWorkspacePath = await this._resolveVsCodeWorkspacePath(workspaceHashDir);
+
+    const entries = await fs.readdir(chatSessionsDir);
+    const jsonFiles = entries.filter(e => (e.endsWith('.json') || e.endsWith('.jsonl')) && !shouldSkipEntry(e));
+    if (jsonFiles.length === 0) return [];
+
+    const sessions = [];
+    for (const file of jsonFiles) {
+      const fullPath = path.join(chatSessionsDir, file);
+      try {
+        const stats = await fs.stat(fullPath);
+        const raw = await fs.readFile(fullPath, 'utf-8');
+        // Support both .json (flat) and .jsonl (incremental patch: kind=0 + kind=2 patches)
+        let sessionJson;
+        if (file.endsWith('.jsonl')) {
+          sessionJson = this._parseVsCodeJsonl(raw);
+          if (!sessionJson) continue;
+        } else {
+          sessionJson = JSON.parse(raw);
+        }
+
+        const sessionId = sessionJson.sessionId || path.basename(file).replace(/\.jsonl?$/, '');
+        const requests = sessionJson.requests || [];
+        if (requests.length === 0) continue;
+
+        const firstReq = requests[0];
+        const lastReq = requests[requests.length - 1];
+        const createdAt = sessionJson.creationDate
+          ? new Date(sessionJson.creationDate)
+          : (firstReq.timestamp ? new Date(firstReq.timestamp) : stats.birthtime);
+        const updatedAt = sessionJson.lastMessageDate
+          ? new Date(sessionJson.lastMessageDate)
+          : (lastReq.timestamp ? new Date(lastReq.timestamp) : stats.mtime);
+
+        // Count tool invocations across all requests
+        let toolCount = 0;
+        for (const req of requests) {
+          toolCount += (req.response || []).filter(r => r.kind === 'toolInvocationSerialized').length;
+        }
+
+        const model = firstReq.modelId || null;
+        const agentId = firstReq.agent?.id || 'vscode-copilot';
+        const userText = this._extractVsCodeUserText(firstReq.message);
+
+        const session = new Session(
+          sessionId,
+          'file',
+          {
+            source: 'vscode',
+            filePath: fullPath,
+            createdAt,
+            updatedAt,
+            summary: userText ? userText.slice(0, 120) : `VSCode chat (${requests.length} requests)`,
+            hasEvents: true,
+            eventCount: requests.reduce((s, r) => s + (r.response || []).length, 0) + requests.length * 2 + 1,
+            duration: updatedAt - createdAt,
+            sessionStatus: 'completed',
+            model,
+            agentId,
+            toolCount,
+            workspace: { cwd: realWorkspacePath || workspaceHashDir },
+          }
+        );
+
+        sessions.push(session);
+      } catch (err) {
+        // Skip malformed files silently
+      }
+    }
+    return sessions;
+  }
+
+  /** Extract plain text from a VSCode message object */
+  _extractVsCodeUserText(message) {
+    if (!message) return '';
+    if (typeof message.text === 'string') return message.text;
+    if (Array.isArray(message.parts)) {
+      return message.parts.filter(p => p.kind === 'text').map(p => p.text || '').join('');
+    }
+    return '';
+  }
+
   /**
    * Read first line of a file
    * @private

package/src/services/sessionService.js

@@ -21,13 +21,13 @@ class SessionService {
     this.eventNormalizer = new EventNormalizer();
   }
 
-  async getAllSessions() {
-    const sessions = await this.sessionRepository.findAll();
+  async getAllSessions(sourceFilter = null) {
+    const sessions = await this.sessionRepository.findAll(sourceFilter);
     return sessions.map(s => s.toJSON());
   }
 
-  async getPaginatedSessions(page = 1, limit = 20) {
-    const allSessions = await this.sessionRepository.findAll();
+  async getPaginatedSessions(page = 1, limit = 20, sourceFilter = null) {
+    const allSessions = await this.sessionRepository.findAll(sourceFilter);
     const sessions = allSessions.map(s => s.toJSON());
 
     const startIndex = (page - 1) * limit;
@@ -151,6 +151,27 @@ class SessionService {
         console.error('Error searching Pi-Mono sessions:', err);
         return [];
       }
+    } else if (session.source === 'vscode') {
+      // VSCode format: read JSON file directly, convert to event array via VsCodeParser
+      const { VsCodeParser } = require('../../lib/parsers');
+      const vscodeParser = new VsCodeParser();
+      try {
+        const raw = await fs.promises.readFile(session.filePath, 'utf-8');
+        let sessionJson;
+        if (session.filePath.endsWith('.jsonl')) {
+          sessionJson = this.sessionRepository._parseVsCodeJsonl(raw);
+        } else {
+          sessionJson = JSON.parse(raw);
+        }
+        if (!sessionJson) return [];
+        const parsed = vscodeParser.parseVsCode(sessionJson);
+        // Convert tool.invocation events → assistant.message with data.tools
+        // so frontend can render them using the same tool-list component
+        return this._expandVsCodeEvents(parsed.allEvents);
+      } catch (err) {
+        console.error('Error reading VSCode session:', err);
+        return [];
+      }
     }
 
 
@@ -1434,6 +1455,54 @@ class SessionService {
   /**
    * Expand Copilot format (user/assistant) to timeline format with turn_start/complete
    * @private
+   /**
+   * Convert VSCode tool.invocation events into assistant.message events with data.tools,
+   * so they render using the same frontend tool-list component.
+   * Groups consecutive tool.invocation events under a single assistant.message when possible.
+   */
+  _expandVsCodeEvents(events) {
+    const result = [];
+    let pendingTools = [];
+    let pendingParentId = null;
+    let pendingTs = null;
+    let pendingIdx = 0;
+
+    const flushTools = () => {
+      if (pendingTools.length === 0) return;
+      result.push({
+        type: 'assistant.message',
+        id: `vscode-tools-${pendingIdx}`,
+        timestamp: pendingTs,
+        parentId: pendingParentId,
+        data: {
+          message: '',
+          content: '',
+          tools: pendingTools,
+        },
+        _synthetic: true,
+      });
+      pendingTools = [];
+    };
+
+    for (let i = 0; i < events.length; i++) {
+      const ev = events[i];
+      if (ev.type === 'tool.invocation') {
+        if (pendingTools.length === 0) {
+          pendingParentId = ev.parentId;
+          pendingTs = ev.timestamp;
+          pendingIdx = i;
+        }
+        if (ev.data?.tool) pendingTools.push(ev.data.tool);
+      } else {
+        flushTools();
+        result.push(ev);
+      }
+    }
+    flushTools();
+    return result;
+  }
+
+  /**
    * @param {Array} events - Normalized Copilot events
    * @returns {Array} Expanded events with turn_start/complete
    */

package/views/index.ejs

@@ -308,6 +308,15 @@
       font-weight: 600;
       font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
     }
+    .status-badge.source-vscode {
+      padding: 2px 8px;
+      background: rgba(0, 122, 204, 0.15);
+      color: #4fc3f7;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 600;
+      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    }
 
     /* Filter pills */
     .filter-pills {
@@ -474,6 +483,7 @@
           <button class="filter-pill active" data-source="copilot">Copilot</button>
           <button class="filter-pill" data-source="claude">Claude</button>
           <button class="filter-pill" data-source="pi-mono">Pi</button>
+          <!-- <button class="filter-pill" data-source="vscode">VSCode</button> -->
         </div>
         <input
           type="file"
@@ -485,10 +495,7 @@
         <div id="importStatus" class="import-status"></div>
         <div id="sessions-container"></div>
 
-        <!-- Load more button and loading indicator -->
-        <div id="load-more-section" style="text-align: center; margin-top: 20px; display: none;">
-          <button id="load-more-btn" class="load-more-btn">Load More Sessions</button>
-        </div>
+                <!-- Loading indicator for infinite scroll -->
         <div id="loading-indicator" style="text-align: center; margin-top: 20px; display: none;">
           <div class="loading-spinner">Loading more sessions...</div>
         </div>
@@ -507,57 +514,56 @@
     const totalSessionsFromServer = metaData.totalSessions;
     const hasMoreFromServer = metaData.hasMore;
 
-    // Infinite scroll state
+    // Infinite scroll state — per-source
     let allSessions = [...initialSessions];
-    let currentOffset = initialSessions.length;
-    let hasMore = hasMoreFromServer;
+    // Per-source pagination state
+    const sourceState = {};
+    // Initialize from initial server load (copilot is default active pill)
+    sourceState['copilot'] = { offset: initialSessions.length, hasMore: hasMoreFromServer };
+
     let isLoading = false;
 
     // Filter state
     let currentSourceFilter = 'copilot';
-    // Load more sessions
+
+    function currentState() {
+      if (!sourceState[currentSourceFilter]) {
+        sourceState[currentSourceFilter] = { offset: 0, hasMore: true };
+      }
+      return sourceState[currentSourceFilter];
+    }
+
+    // Load more sessions for current source
     async function loadMoreSessions() {
-      if (isLoading || !hasMore) return;
+      const state = currentState();
+      if (isLoading || !state.hasMore) return;
 
       isLoading = true;
-      const loadMoreBtn = document.getElementById('load-more-btn');
       const loadingIndicator = document.getElementById('loading-indicator');
-      const loadMoreSection = document.getElementById('load-more-section');
-
-      // Show loading, hide button
-      loadMoreSection.style.display = 'none';
       loadingIndicator.style.display = 'block';
 
       try {
-        const response = await fetch(`/api/sessions/load-more?offset=${currentOffset}&limit=20`);
-        if (!response.ok) {
-          throw new Error('Failed to load more sessions');
-        }
+        const response = await fetch(`/api/sessions/load-more?offset=${currentState().offset}&limit=20&source=${encodeURIComponent(currentSourceFilter)}`);
+        if (!response.ok) throw new Error('Failed to load more sessions');
 
         const data = await response.json();
-        allSessions.push(...data.sessions);
-        currentOffset += data.sessions.length;
-        hasMore = data.hasMore;
+        const existingIds = new Set(allSessions.map(s => s.id));
+        for (const s of data.sessions) {
+          if (!existingIds.has(s.id)) allSessions.push(s);
+        }
+        currentState().offset += data.sessions.length;
+        currentState().hasMore = data.hasMore;
 
-        // Re-render all sessions
         renderAllSessions();
-        updateLoadMoreButton();
-
       } catch (err) {
         console.error('Error loading more sessions:', err);
-        // Show button again on error
-        loadMoreSection.style.display = hasMore ? 'block' : 'none';
       } finally {
         isLoading = false;
         loadingIndicator.style.display = 'none';
       }
     }
 
-    // Update load more button visibility
-    function updateLoadMoreButton() {
-      const loadMoreSection = document.getElementById('load-more-section');
-      loadMoreSection.style.display = hasMore && !isLoading ? 'block' : 'none';
-    }
+    // (load more button removed — pure infinite scroll)
 
     // Get filtered sessions based on current filter
     function getFilteredSessions() {
@@ -601,7 +607,7 @@
       const docHeight = document.documentElement.scrollHeight;
 
       // Load more when user is within 500px of bottom
-      if (scrollTop + windowHeight >= docHeight - 500 && hasMore && !isLoading) {
+      if (scrollTop + windowHeight >= docHeight - 500 && currentState().hasMore && !isLoading) {
         loadMoreSessions();
       }
     }
@@ -847,16 +853,41 @@
     function setupFilterPills() {
       const filterPills = document.querySelectorAll('.filter-pill');
       filterPills.forEach(pill => {
-        pill.addEventListener('click', () => {
-          // Remove active class from all pills
+        pill.addEventListener('click', async () => {
           filterPills.forEach(p => p.classList.remove('active'));
-          // Add active class to clicked pill
           pill.classList.add('active');
-
-          // Update filter state
           currentSourceFilter = pill.getAttribute('data-source');
 
-          // Re-render sessions with filter
+          // Init per-source state if first visit
+          if (!sourceState[currentSourceFilter]) {
+            sourceState[currentSourceFilter] = { offset: 0, hasMore: true };
+          }
+
+          // Always fetch first batch when switching to a new source (backend-filtered)
+          if (sourceState[currentSourceFilter].offset === 0 && !isLoading) {
+            isLoading = true;
+            // Show loading state immediately (clear old results)
+            const container = document.getElementById('sessions-container');
+            container.innerHTML = '<div style="text-align: center; color: #6e7681; padding: 40px; font-size: 14px;">⏳ Loading...</div>';
+            document.getElementById('loading-indicator').style.display = 'none';
+            try {
+              const resp = await fetch(`/api/sessions/load-more?offset=0&limit=20&source=${encodeURIComponent(currentSourceFilter)}`);
+              if (resp.ok) {
+                const data = await resp.json();
+                const existingIds = new Set(allSessions.map(s => s.id));
+                for (const s of (data.sessions || [])) {
+                  if (!existingIds.has(s.id)) allSessions.push(s);
+                }
+                sourceState[currentSourceFilter].offset = (data.sessions || []).length;
+                sourceState[currentSourceFilter].hasMore = data.hasMore;
+              }
+            } catch (e) {
+              console.error('Failed to load sessions for source:', currentSourceFilter, e);
+            } finally {
+              isLoading = false;
+            }
+          }
+
           renderAllSessions();
         });
       });
@@ -864,16 +895,11 @@
 
     // Render grouped sessions
     document.addEventListener('DOMContentLoaded', function() {
-      // Initial render
       renderAllSessions();
-      updateLoadMoreButton();
 
-      // Add scroll listener for infinite scroll
+      // Infinite scroll
       window.addEventListener('scroll', throttledScroll);
 
-      // Add click listener for load more button
-      document.getElementById('load-more-btn').addEventListener('click', loadMoreSessions);
-
       // Setup filter pills
       setupFilterPills();
     });
@@ -887,7 +913,6 @@
       margin-top: 32px;
       margin-bottom: 16px;
       padding-bottom: 8px;
-      border-bottom: 2px solid #21262d;
     }
     .date-group-header:first-child {
       margin-top: 0;

package/views/session-vue.ejs

@@ -242,6 +242,11 @@
       color: #a78bdb;
       border: 1px solid rgba(138, 102, 204, 0.4);
     }
+    .source-vscode {
+      background: rgba(0, 122, 204, 0.2);
+      color: #4fc3f7;
+      border: 1px solid rgba(0, 122, 204, 0.4);
+    }
     
     /* Turn buttons */
     .turn-buttons {
@@ -1318,6 +1323,15 @@
             }
           }
 
+          // 6. Attribute tool.invocation events (VS Code format) via parentToolCallId
+          for (const ev of sorted) {
+            if (ev.type !== 'tool.invocation') continue;
+            const ptcid = ev.data?.parentToolCallId;
+            if (ptcid && subagentInfo.has(ptcid)) {
+              ownerMap.set(ev.stableId, ptcid);
+            }
+          }
+
           return { ownerMap, subagentInfo };
         });