@qiaolei81/copilot-session-viewer 0.1.9 → 0.2.1

package/views/session-vue.ejs

@@ -8,13 +8,16 @@
   <!-- Vue 3 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@3.5.28/dist/vue.global.prod.js" integrity="sha384-EyKhbIJoP1t1fKIFRNEfYKy4uy8qxs7UNS4Cab53xyXqCTUB1PCoxeFsD0G/NX9W" crossorigin="anonymous"></script>
 
-  <!-- vue-virtual-scroller -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-virtual-scroller@2.0.0-beta.8/dist/vue-virtual-scroller.css" integrity="sha384-PIWxQLH13FE3yKn8YrBWCcBRMkCKr2xW0XcqY9sNVhmihrqyXrdsWrcjZdqlnaWg" crossorigin="anonymous">
-  <script src="https://cdn.jsdelivr.net/npm/vue-virtual-scroller@2.0.0-beta.8/dist/vue-virtual-scroller.min.js" integrity="sha384-asaCxaI3GxogQlKm59ynOPR3hwB7hNOTYipFrlNUHdRM0BOQs5BRO8ix8clxlj6p" crossorigin="anonymous"></script>
+  <!-- vue-virtual-scroller Vue 3 -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-virtual-scroller@next/dist/vue-virtual-scroller.css" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/vue-virtual-scroller@next/dist/vue-virtual-scroller.min.js" crossorigin="anonymous"></script>
 
   <!-- Markdown rendering -->
   <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js" integrity="sha384-zbcZAIxlvJtNE3Dp5nxLXdXtXyxwOdnILY1TDPVmKFhl4r4nSUG1r8bcFXGVa4Te" crossorigin="anonymous"></script>
   
+  <!-- DOMPurify for XSS protection -->
+  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js" crossorigin="anonymous"></script>
+  
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     body { 
@@ -224,6 +227,21 @@
       color: #58a6ff;
       border: 1px solid rgba(31, 111, 235, 0.4);
     }
+    .source-copilot {
+      background: rgba(88, 166, 255, 0.2);
+      color: #58a6ff;
+      border: 1px solid rgba(88, 166, 255, 0.4);
+    }
+    .source-claude {
+      background: rgba(210, 153, 34, 0.2);
+      color: #d29922;
+      border: 1px solid rgba(210, 153, 34, 0.4);
+    }
+    .source-pi-mono {
+      background: rgba(138, 102, 204, 0.2);
+      color: #a78bdb;
+      border: 1px solid rgba(138, 102, 204, 0.4);
+    }
     
     /* Turn buttons */
     .turn-buttons {
@@ -904,14 +922,30 @@
   
   <!-- Vue App -->
   <script>
-    const { createApp, ref, computed, onMounted, onBeforeUnmount, reactive, watch } = Vue;
-    const { DynamicScroller, DynamicScrollerItem } = window.VueVirtualScroller;
-    
-    const app = createApp({
-      components: {
-        DynamicScroller,
-        DynamicScrollerItem
-      },
+    // Immediate initialization (script is at bottom, DOM is ready)
+    (function() {
+      // Verify Vue is loaded
+      if (typeof Vue === 'undefined') {
+        console.error('Vue is not loaded');
+        return;
+      }
+
+      // Verify VueVirtualScroller is loaded
+      if (typeof window.VueVirtualScroller === 'undefined') {
+        console.error('VueVirtualScroller is not loaded');
+        return;
+      }
+
+      console.log('Initializing Vue app...');
+
+      const { createApp, ref, computed, onMounted, onBeforeUnmount, reactive, watch } = Vue;
+      const { DynamicScroller, DynamicScrollerItem } = window.VueVirtualScroller;
+
+      const app = createApp({
+        components: {
+          DynamicScroller,
+          DynamicScrollerItem
+        },
       
       setup() {
         const sessionId = ref(window.sessionData.sessionId);
@@ -930,6 +964,24 @@
         
         const expandedTools = ref({});
         const expandedContent = ref({});
+        const MAX_EXPANDED_ITEMS = 50; // Memory leak fix: Limit expanded items
+        
+        // Clean up old expansion state to prevent memory leak
+        const cleanupExpansionState = () => {
+          const toolKeys = Object.keys(expandedTools.value);
+          if (toolKeys.length > MAX_EXPANDED_ITEMS) {
+            // Keep only recent 50 expanded items
+            const toRemove = toolKeys.slice(0, toolKeys.length - MAX_EXPANDED_ITEMS);
+            toRemove.forEach(key => delete expandedTools.value[key]);
+          }
+          
+          const contentKeys = Object.keys(expandedContent.value);
+          if (contentKeys.length > MAX_EXPANDED_ITEMS) {
+            const toRemove = contentKeys.slice(0, contentKeys.length - MAX_EXPANDED_ITEMS);
+            toRemove.forEach(key => delete expandedContent.value[key]);
+          }
+        };
+        
         const currentFilter = ref('all');
         const searchText = ref('');
         const debouncedSearchText = ref('');
@@ -946,6 +998,15 @@
           }, 300);
         });
         
+        // Memory leak fix: Clean up expansion state when filter/search changes
+        watch(currentFilter, () => {
+          cleanupExpansionState();
+        });
+        
+        watch(debouncedSearchText, () => {
+          cleanupExpansionState();
+        });
+        
         // Async loading state
         const loadedEvents = ref([]);
         const eventsLoading = ref(true);
@@ -1168,43 +1229,6 @@
         };
         
         // Tool call map
-        const toolCallMap = computed(() => {
-          const map = new Map();
-          const toolGroups = new Map();
-          
-          flatEvents.value.forEach(event => {
-            if (event.type === 'tool.execution_start') {
-              const toolId = event.data?.toolCallId;
-              if (toolId) {
-                if (!toolGroups.has(toolId)) {
-                  toolGroups.set(toolId, { tool: event.data.tool, start: event });
-                }
-              }
-            } else if (event.type === 'tool.execution_complete') {
-              const toolId = event.data?.toolCallId;
-              if (toolId && toolGroups.has(toolId)) {
-                toolGroups.get(toolId).complete = event;
-              }
-            }
-          });
-          
-          flatEvents.value.forEach(event => {
-            if (event.type === 'assistant.message') {
-              const groups = [];
-              toolGroups.forEach((group, toolId) => {
-                if (group.start?.parentId === event.id) {
-                  groups.push(group);
-                }
-              });
-              if (groups.length > 0) {
-                map.set(event.id || event.virtualIndex, groups);
-              }
-            }
-          });
-          
-          return map;
-        });
-
         // Subagent ownership: attribute events to their owning subagent
         const subagentOwnership = computed(() => {
           const sorted = flatEvents.value;
@@ -1307,8 +1331,18 @@
           return `${hours}:${minutes}:${seconds}`;
         };
         
+        // Performance fix: Cache markdown rendering results
+        const markdownCache = new Map();
+        const MAX_CACHE_SIZE = 200;
+        
         const renderMarkdown = (text) => {
           if (!text) return '';
+          
+          // Check cache first
+          if (markdownCache.has(text)) {
+            return markdownCache.get(text);
+          }
+          
           try {
             // 处理转义序列：将 \r\n、\n、\t 等转换为实际字符
             let processedText = text
@@ -1318,6 +1352,14 @@
               .replace(/\\"/g, '"')       // \" → 引号
               .replace(/\\\\/g, '\\');    // \\ → 反斜杠
             
+            // DOMPurify configuration for markdown content
+            const purifyConfig = {
+              ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'code', 'pre', 'a', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'hr', 'del', 'span', 'div', 'mark'],
+              ALLOWED_ATTR: ['href', 'style', 'class'],
+              ALLOW_DATA_ATTR: false,
+              ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+            };
+            
             // Parse YAML frontmatter
             const frontmatterMatch = processedText.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/);
             if (frontmatterMatch) {
@@ -1332,18 +1374,42 @@
                 return { key, value };
               });
               
-              // Render frontmatter as table
+              // Render frontmatter as table (sanitize key/value)
               let tableHTML = '<table style="margin-bottom: 16px; border-collapse: collapse;"><tbody>';
               pairs.forEach(pair => {
-                tableHTML += `<tr><td style="padding: 4px 12px; border: 1px solid #30363d; font-weight: 600; color: #7d8590;">${pair.key}</td><td style="padding: 4px 12px; border: 1px solid #30363d;">${pair.value}</td></tr>`;
+                const sanitizedKey = DOMPurify.sanitize(pair.key, { ALLOWED_TAGS: [] });
+                const sanitizedValue = DOMPurify.sanitize(pair.value, { ALLOWED_TAGS: [] });
+                tableHTML += `<tr><td style="padding: 4px 12px; border: 1px solid #30363d; font-weight: 600; color: #7d8590;">${sanitizedKey}</td><td style="padding: 4px 12px; border: 1px solid #30363d;">${sanitizedValue}</td></tr>`;
               });
               tableHTML += '</tbody></table>';
               
-              // Render remaining content
-              return tableHTML + marked.parse(content);
+              // Render remaining content with sanitization
+              const markdownHTML = marked.parse(content);
+              const sanitizedMarkdown = DOMPurify.sanitize(markdownHTML, purifyConfig);
+              const result = tableHTML + sanitizedMarkdown;
+              
+              // Cache the result
+              if (markdownCache.size >= MAX_CACHE_SIZE) {
+                const firstKey = markdownCache.keys().next().value;
+                markdownCache.delete(firstKey);
+              }
+              markdownCache.set(text, result);
+              
+              return result;
             }
             
-            return marked.parse(processedText);
+            // Regular markdown rendering with sanitization
+            const markdownHTML = marked.parse(processedText);
+            const result = DOMPurify.sanitize(markdownHTML, purifyConfig);
+            
+            // Cache the result (with size limit to prevent memory leak)
+            if (markdownCache.size >= MAX_CACHE_SIZE) {
+              const firstKey = markdownCache.keys().next().value;
+              markdownCache.delete(firstKey);
+            }
+            markdownCache.set(text, result);
+            
+            return result;
           } catch (e) {
             return text;
           }
@@ -1414,7 +1480,18 @@
           return lines.slice(0, 20).join('\n') + '\n\n...';
         };
         
-        const getBadgeInfo = (type) => {
+        const getBadgeInfo = (type, item) => {
+          // Prefer backend-generated badge info (Violation #4 fix)
+          if (item?.data?.badgeLabel && item?.data?.badgeClass) {
+            return { label: item.data.badgeLabel, class: item.data.badgeClass };
+          }
+          
+          // Fallback: frontend logic for backward compatibility
+          // Pi-Mono toolResult events: still use type='message' with role='toolResult'
+          if (type === 'message' && item?.data?.role === 'toolResult') {
+            return { label: 'TOOL RESULT', class: 'badge-tool' };
+          }
+          
           // Special case for specific event types
           if (type === 'session.model_change') {
             return { label: 'MODEL CHANGE', class: 'badge-session' };
@@ -1535,11 +1612,37 @@
         };
         
         const hasTools = (event) => {
-          return event.type === 'assistant.message' && toolCallMap.value.has(event.id || event.virtualIndex);
+          // Unified format: check data.tools (works for both Copilot and Claude)
+          return event.data?.tools && event.data.tools.length > 0;
         };
         
         const getToolGroups = (event) => {
-          return toolCallMap.value.get(event.id || event.virtualIndex) || [];
+          // Unified format from server (both Copilot and Claude normalized to data.tools)
+          if (event.data?.tools && Array.isArray(event.data.tools)) {
+            return event.data.tools
+              .filter(tool => tool && typeof tool === 'object' && tool.name) // Any tool object with a name
+              .map(tool => {
+                // Check if tool has result (works for all formats)
+                const hasResult = tool.result !== undefined || tool.status === 'completed' || tool.status === 'error';
+                return {
+                  tool: tool.name,
+                  start: {
+                    data: {
+                      toolName: tool.name,
+                      arguments: tool.input || tool.arguments || {}
+                    }
+                  },
+                  complete: hasResult ? {
+                    data: {
+                      result: tool.result,
+                      error: tool.status === 'error' ? tool.error : null
+                    }
+                  } : null
+                };
+              });
+          }
+          
+          return [];
         };
 
         // Subagent color palette for parallel subagent distinction
@@ -1554,6 +1657,17 @@
           '#56d4dd'  // teal
         ];
 
+        // Hash function for generating consistent color indices
+        const hashCode = (str) => {
+          let hash = 0;
+          for (let i = 0; i < str.length; i++) {
+            const char = str.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash = hash & hash; // Convert to 32bit integer
+          }
+          return hash;
+        };
+
         const getSubagentInfo = (event) => {
           const { ownerMap, subagentInfo } = subagentOwnership.value;
           // For subagent dividers, use their own toolCallId
@@ -1565,7 +1679,19 @@
             }
             return null;
           }
-          // For regular events, look up ownership
+          // For regular events, first check _subagent metadata (Claude format)
+          if (event._subagent) {
+            const subagentId = event._subagent.id;
+            const subagentName = event._subagent.name;
+            // Use subagentId as toolCallId for consistency
+            if (subagentInfo.has(subagentId)) {
+              const info = subagentInfo.get(subagentId);
+              return { name: info.name, toolCallId: subagentId, colorIndex: info.colorIndex };
+            }
+            // If not in subagentInfo, create a default entry
+            return { name: subagentName, toolCallId: subagentId, colorIndex: Math.abs(hashCode(subagentId)) };
+          }
+          // For regular events, look up ownership (Copilot format)
           const tcid = ownerMap.get(event.stableId);
           if (!tcid) return null;
           const info = subagentInfo.get(tcid);
@@ -1649,28 +1775,53 @@
         };
         
         const exportSession = async () => {
+          console.log('[Export] exportSession called');
           exporting.value = true;
           try {
+            console.log('[Export] Fetching:', `/session/${sessionId.value}/export`);
             const response = await fetch(`/session/${sessionId.value}/export`);
+            console.log('[Export] Response received:', response.status, response.ok);
+            console.log('[Export] Response received:', response.status, response.ok);
             if (!response.ok) {
               throw new Error('Share failed');
             }
             
             // Download the file
+            console.log('[Export] Creating blob...');
             const blob = await response.blob();
+            console.log('[Export] Blob size:', blob.size, 'type:', blob.type);
             const url = window.URL.createObjectURL(blob);
+            console.log('[Export] Creating download link...');
             const a = document.createElement('a');
             a.href = url;
             a.download = `session-${sessionId.value}.zip`;
             document.body.appendChild(a);
             a.click();
+            console.log('[Export] Download triggered');
             window.URL.revokeObjectURL(url);
             document.body.removeChild(a);
+            
+            // Show success feedback
+            console.log('[Export] Showing success feedback...');
+            const originalText = '📤 Share Session';
+            const successText = '✓ Downloaded!';
+            const btn = document.querySelector('.export-btn');
+            if (btn) {
+              btn.textContent = successText;
+              btn.style.background = '#238636';
+              console.log('[Export] Button text updated to:', btn.textContent);
+              setTimeout(() => {
+                btn.textContent = originalText;
+                btn.style.background = '';
+                console.log('[Export] Button text restored');
+              }, 2000);
+            }
           } catch (err) {
-            console.error('Share session error:', err);
+            console.error('[Export] Share session error:', err);
             alert('Failed to share session: ' + err.message);
           } finally {
             exporting.value = false;
+            console.log('[Export] Export complete');
           }
         };
         
@@ -1684,7 +1835,20 @@
             if (!response.ok) {
               throw new Error(`Failed to load events: ${response.statusText}`);
             }
-            loadedEvents.value = await response.json();
+            const data = await response.json();
+            
+            // Handle both old (array) and new (object with pagination) response formats
+            if (Array.isArray(data)) {
+              // Old format: direct array
+              loadedEvents.value = data;
+            } else if (data.events && Array.isArray(data.events)) {
+              // New format: { events, pagination }
+              loadedEvents.value = data.events;
+              console.log('[Navigation] Pagination:', data.pagination);
+            } else {
+              throw new Error('Invalid response format');
+            }
+            
             console.log('[Navigation] Events loaded:', loadedEvents.value.length);
             
             // Check for URL query parameters and jump to event AFTER events are loaded
@@ -1835,9 +1999,23 @@
           
           // Cleanup on unmount
           onBeforeUnmount(() => {
+            // Clear search timeout (memory leak fix)
+            if (searchTimeout) {
+              clearTimeout(searchTimeout);
+              searchTimeout = null;
+            }
+            
+            // Clean scroll listeners
             if (scrollCleanup) {
               scrollCleanup();
             }
+            
+            // Clear expansion state (memory leak fix)
+            expandedTools.value = {};
+            expandedContent.value = {};
+            
+            // Clear markdown cache (memory leak fix)
+            markdownCache.clear();
           });
         });
         
@@ -1864,7 +2042,6 @@
           turns,
           userReqs,
           truncateText,
-          toolCallMap,
           formatTime,
           formatDateTime,
           renderMarkdown,
@@ -1914,6 +2091,15 @@
                   <div v-if="metadata.summary" class="session-summary-block">{{ metadata.summary }}</div>
                   <table class="session-info-table">
                     <tbody>
+                      <tr v-if="metadata.source">
+                        <td>Source</td>
+                        <td>
+                          <!-- Use backend-provided source metadata (Violation #3 fix) -->
+                          <span :class="['source-badge', metadata.sourceBadgeClass || 'source-copilot']">
+                            {{ metadata.sourceName || 'GitHub Copilot' }}
+                          </span>
+                        </td>
+                      </tr>
                       <tr v-if="metadata.copilotVersion">
                         <td>CLI Version</td>
                         <td>{{ metadata.copilotVersion }}</td>
@@ -2078,8 +2264,8 @@
                       :style="getSubagentColor(item) ? { '--subagent-border-color': getSubagentColor(item) } : {}"
                     >
                       <div class="event-header">
-                        <span :class="['event-badge', getBadgeInfo(item.type).class]">
-                          {{ getBadgeInfo(item.type).label }}
+                        <span :class="['event-badge', getBadgeInfo(item.type, item).class]">
+                          {{ getBadgeInfo(item.type, item).label }}
                         </span>
                         <span
                           v-if="getSubagentInfo(item)"
@@ -2170,7 +2356,7 @@
                         </div>
                       </div>
 
-                      <!-- Regular content -->
+                      <!-- Regular content (unified format from server) -->
                       <div v-else-if="item.data?.message || item.data?.text || item.data?.content || item.data?.transformedContent">
                         <div
                           class="event-content"
@@ -2197,6 +2383,12 @@
                         </div>
                       </div>
                       
+                      <!-- No content at all (no message and no tools) -->
+                      <div v-else-if="!hasTools(item)" class="event-content" style="color: #7d8590; font-style: italic;">
+                        No available message
+                      </div>
+                      
+                      <!-- Tool calls section (independent of message content, but don't need "No available message" if tools exist) -->
                       <div v-if="hasTools(item)" class="tool-list">
                         <div
                           v-for="(group, idx) in getToolGroups(item)"
@@ -2250,8 +2442,23 @@
         </div>
       `
     });
-    
-    app.mount('#app');
+
+    // Mount the app
+    console.log('Mounting Vue app to #app...');
+    console.log('App config:', app.config);
+    console.log('Target element:', document.getElementById('app'));
+    try {
+      const vm = app.mount('#app');
+      console.log('Vue app mounted successfully!', vm ? 'Instance created' : 'No instance');
+      console.log('VM type:', typeof vm, 'Has exportSession:', typeof vm?.exportSession);
+      console.log('VM keys:', vm ? Object.keys(vm).slice(0, 10) : 'NO_VM');
+      console.log('#app innerHTML length:', document.getElementById('app').innerHTML.length);
+      console.log('#app first 100 chars:', document.getElementById('app').innerHTML.substring(0, 100));
+    } catch (error) {
+      console.error('Mount failed:', error);
+      console.error('Error stack:', error.stack);
+    }
+    })(); // End IIFE
   </script>
 </body>
 </html>