npm - @qiaolei81/copilot-session-viewer - Versions diffs - 0.1.8 → 0.2.0 - Mend

@qiaolei81/copilot-session-viewer 0.1.8 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/views/session-vue.ejs CHANGED Viewed

@@ -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 {
@@ -867,7 +885,7 @@
       content: '';
       flex: 1;
       height: 1px;
-      background: #58a6ff;
+      background: var(--sa-color, #58a6ff);
     }
     .subagent-divider-text {
       font-size: 12px;
@@ -886,6 +904,8 @@
     .subagent-divider-line-right {
       display: none;
     }
+    .event.event-in-subagent { border-left-color: var(--subagent-border-color, #58a6ff); }
+    .subagent-owner-tag { font-size: 11px; padding: 1px 6px; border-radius: 8px; border: 1px solid; white-space: nowrap; opacity: 0.85; }
   </style>
 </head>
 <body>
@@ -902,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);
@@ -928,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('');
@@ -944,19 +998,33 @@
           }, 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);
         const eventsError = ref(null);
-        // Flatten and sort events
+        // Flatten and sort events (stable sort using _fileIndex tiebreaker)
         const flatEvents = computed(() => {
           const events = loadedEvents.value
-            .filter(e =>
-              e.type !== 'assistant.turn_end' &&
+            .filter(e =>
+              e.type !== 'assistant.turn_end' &&
               e.type !== 'assistant.turn_complete'
             )
-            .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
+            .sort((a, b) => {
+              const timeA = a.timestamp ? new Date(a.timestamp).getTime() : 0;
+              const timeB = b.timestamp ? new Date(b.timestamp).getTime() : 0;
+              if (timeA !== timeB) return timeA - timeB;
+              return (a._fileIndex ?? 0) - (b._fileIndex ?? 0);
+            })
             .map((e, index) => ({
               ...e,
               virtualIndex: index,
@@ -1004,12 +1072,12 @@
         // Final filtered events (search + type filter)
         const filteredEvents = computed(() => {
           let events = searchFilteredEvents.value;
           // Apply type filter
           if (currentFilter.value !== 'all') {
             events = events.filter(e => e.type === currentFilter.value);
           }
           // Divider types (no separator before these)
           const dividerTypes = ['assistant.turn_start', 'subagent.started', 'subagent.completed', 'subagent.failed'];
@@ -1161,43 +1229,98 @@
         };
         // 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 });
-                }
+        // Subagent ownership: attribute events to their owning subagent
+        const subagentOwnership = computed(() => {
+          const sorted = flatEvents.value;
+          const ownerMap = new Map();       // stableId → toolCallId
+          const subagentInfo = new Map();   // toolCallId → { name, colorIndex }
+          // 1. Collect all subagent.started toolCallIds + assign colorIndex
+          let colorIdx = 0;
+          for (const ev of sorted) {
+            if (ev.type === 'subagent.started') {
+              const tcid = ev.data?.toolCallId;
+              if (tcid) {
+                subagentInfo.set(tcid, {
+                  name: ev.data?.agentDisplayName || ev.data?.agentName || 'SubAgent',
+                  colorIndex: colorIdx++
+                });
               }
-            } else if (event.type === 'tool.execution_complete') {
-              const toolId = event.data?.toolCallId;
-              if (toolId && toolGroups.has(toolId)) {
-                toolGroups.get(toolId).complete = event;
+            }
+          }
+          if (subagentInfo.size === 0) return { ownerMap, subagentInfo };
+          // 2. Build id → event lookup for parentId chain walking
+          const idMap = new Map();
+          for (const ev of sorted) {
+            if (ev.id) idMap.set(ev.id, ev);
+          }
+          // 3. Attribute assistant.message events via data.parentToolCallId
+          for (const ev of sorted) {
+            if (ev.type === 'assistant.message') {
+              const ptcid = ev.data?.parentToolCallId;
+              if (ptcid && subagentInfo.has(ptcid)) {
+                ownerMap.set(ev.stableId, ptcid);
               }
             }
-          });
-          flatEvents.value.forEach(event => {
-            if (event.type === 'assistant.message') {
-              const groups = [];
-              toolGroups.forEach((group, toolId) => {
-                if (group.start?.parentId === event.id) {
-                  groups.push(group);
+          }
+          // 4. Attribute reasoning events by walking parentId → assistant.message
+          for (const ev of sorted) {
+            if (ev.type !== 'reasoning') continue;
+            let current = ev.parentId;
+            let depth = 0;
+            while (current && depth < 10) {
+              const parent = idMap.get(current);
+              if (!parent) break;
+              if (parent.type === 'assistant.message') {
+                const ptcid = parent.data?.parentToolCallId;
+                if (ptcid && subagentInfo.has(ptcid)) {
+                  ownerMap.set(ev.stableId, ptcid);
                 }
-              });
-              if (groups.length > 0) {
-                map.set(event.id || event.virtualIndex, groups);
+                break;
               }
+              current = parent.parentId;
+              depth++;
             }
-          });
-          return map;
+          }
+          // 5. Attribute tool.execution_start/complete by walking parentId chain
+          const startIdByToolCallId = new Map();
+          for (const ev of sorted) {
+            if (ev.type !== 'tool.execution_start') continue;
+            let current = ev.parentId;
+            let depth = 0;
+            while (current && depth < 10) {
+              const parent = idMap.get(current);
+              if (!parent) break;
+              if (parent.type === 'assistant.message') {
+                const ptcid = parent.data?.parentToolCallId;
+                if (ptcid && subagentInfo.has(ptcid)) {
+                  ownerMap.set(ev.stableId, ptcid);
+                  const tcid = ev.data?.toolCallId;
+                  if (tcid) startIdByToolCallId.set(tcid, ptcid);
+                }
+                break;
+              }
+              current = parent.parentId;
+              depth++;
+            }
+          }
+          for (const ev of sorted) {
+            if (ev.type !== 'tool.execution_complete') continue;
+            const tcid = ev.data?.toolCallId;
+            if (tcid && startIdByToolCallId.has(tcid)) {
+              ownerMap.set(ev.stableId, startIdByToolCallId.get(tcid));
+            }
+          }
+          return { ownerMap, subagentInfo };
         });
         // Methods
         const formatTime = (timestamp) => {
           if (!timestamp) return '';
@@ -1208,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
@@ -1219,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) {
@@ -1233,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;
           }
@@ -1315,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' };
@@ -1436,13 +1612,99 @@
         };
         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
+        const SUBAGENT_COLORS = [
+          '#58a6ff', // blue
+          '#f0883e', // orange
+          '#a371f7', // purple
+          '#3fb950', // green
+          '#f778ba', // pink
+          '#79c0ff', // light blue
+          '#d29922', // amber
+          '#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
+          if (event.type === 'subagent.started' || event.type === 'subagent.completed' || event.type === 'subagent.failed') {
+            const tcid = event.data?.toolCallId;
+            if (tcid && subagentInfo.has(tcid)) {
+              const info = subagentInfo.get(tcid);
+              return { name: info.name, toolCallId: tcid, colorIndex: info.colorIndex };
+            }
+            return null;
+          }
+          // 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);
+          if (!info) return null;
+          return { name: info.name, toolCallId: tcid, colorIndex: info.colorIndex };
+        };
+        const getSubagentColor = (event) => {
+          const info = getSubagentInfo(event);
+          if (!info) return null;
+          return SUBAGENT_COLORS[info.colorIndex % SUBAGENT_COLORS.length];
+        };
         const setFilter = (type) => {
           currentFilter.value = type;
         };
@@ -1513,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');
           }
         };
@@ -1548,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
@@ -1699,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();
           });
         });
@@ -1728,7 +2042,6 @@
           turns,
           userReqs,
           truncateText,
-          toolCallMap,
           formatTime,
           formatDateTime,
           renderMarkdown,
@@ -1744,6 +2057,8 @@
           getToolCommand,
           hasTools,
           getToolGroups,
+          getSubagentInfo,
+          getSubagentColor,
           setFilter,
           scrollToTurn,
           jumpToTurn,
@@ -1776,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>
@@ -1913,32 +2237,41 @@
                     </div>
                     <!-- Subagent Divider -->
-                    <div
+                    <div
                       v-else-if="item.type === 'subagent.started' || item.type === 'subagent.completed' || item.type === 'subagent.failed'"
                       :data-type="item.type"
                       :data-index="item.virtualIndex"
                       :class="['subagent-divider', item.type.split('.')[1]]"
+                      :style="{
+                        '--sa-color': getSubagentColor(item) || '#58a6ff'
+                      }"
                     >
-                      <div class="subagent-divider-line-left"></div>
-                      <span class="subagent-divider-text">
+                      <div class="subagent-divider-line-left" :style="{ background: getSubagentColor(item) || '#58a6ff' }"></div>
+                      <span class="subagent-divider-text" :style="{ color: getSubagentColor(item) || '#58a6ff', borderColor: getSubagentColor(item) || '#58a6ff', background: (getSubagentColor(item) || '#58a6ff') + '1a' }">
                         🤖 {{ item.data?.agentDisplayName || item.data?.agentName || 'SubAgent' }}
                         {{ item.type === 'subagent.started' ? 'Start ▶' : item.type === 'subagent.completed' ? 'Complete ✓' : 'Failed ✗' }}
                       </span>
-                      <div class="subagent-divider-line-right"></div>
+                      <div class="subagent-divider-line-right" :style="{ background: getSubagentColor(item) || '#58a6ff' }"></div>
                       <div class="divider-separator"></div>
                     </div>
                     <!-- Regular Event -->
-                    <div
+                    <div
                       v-else
-                      :class="['event']"
+                      :class="['event', getSubagentInfo(item) ? 'event-in-subagent' : '']"
                       :data-type="item.type"
                       :data-index="item.virtualIndex"
+                      :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)"
+                          class="subagent-owner-tag"
+                          :style="{ color: getSubagentColor(item), borderColor: getSubagentColor(item) }"
+                        >🤖 {{ getSubagentInfo(item).name }}</span>
                         <span class="event-timestamp">{{ formatTime(item.timestamp) }}</span>
                       </div>
@@ -2023,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"
@@ -2050,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)"
@@ -2103,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>