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/src/utils/helpers.js CHANGED Viewed

@@ -10,6 +10,7 @@
 function buildMetadata(session) {
   return {
     type: session.type,
+    source: session.source, // 'copilot' or 'claude'
     summary: session.summary,
     model: session.model,
     repo: session.workspace?.repository,
@@ -28,7 +29,11 @@ function buildMetadata(session) {
  * @returns {boolean} True if valid
  */
 function isValidSessionId(sessionId) {
-  return typeof sessionId === 'string' && /^[a-zA-Z0-9_-]+$/.test(sessionId) && sessionId.length < 256;
+  // Allow alphanumeric, underscore, and hyphen (common in UUIDs and session IDs)
+  // Length limit prevents abuse
+  return typeof sessionId === 'string' &&
+         /^[a-zA-Z0-9_-]+$/.test(sessionId) &&
+         sessionId.length < 256;
 }
 module.exports = {

package/views/index.ejs CHANGED Viewed

@@ -280,6 +280,64 @@
       border-color: #e8b634;
       border-left-color: #e8b634;
     }
+    /* Source badges */
+    .status-badge.source-copilot {
+      padding: 2px 8px;
+      background: rgba(88, 166, 255, 0.15);
+      color: #58a6ff;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 600;
+      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    }
+    .status-badge.source-claude {
+      padding: 2px 8px;
+      background: rgba(204, 120, 92, 0.15);
+      color: #e8956f;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 600;
+      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    }
+    .status-badge.source-pi-mono {
+      padding: 2px 8px;
+      background: rgba(138, 102, 204, 0.15);
+      color: #a78bdb;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 600;
+      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+    }
+    /* Filter pills */
+    .filter-pills {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+      flex-wrap: wrap;
+    }
+    .filter-pill {
+      padding: 6px 16px;
+      background: #21262d;
+      border: 1px solid #30363d;
+      border-radius: 20px;
+      color: #8b949e;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+      min-height: 32px;
+    }
+    .filter-pill:hover {
+      background: #30363d;
+      border-color: #58a6ff;
+      color: #c9d1d9;
+    }
+    .filter-pill.active {
+      background: #58a6ff;
+      border-color: #58a6ff;
+      color: #fff;
+    }
     /* Sessions header with import link */
     .sessions-header {
@@ -384,9 +442,9 @@
 <body>
   <div class="container">
     <h1>🤖 Session Viewer</h1>
-    <p class="subtitle">View GitHub Copilot session logs</p>
+    <p class="subtitle">View session logs from Copilot, Claude Code, and Pi-Mono</p>
-    <form id="sessionForm" onsubmit="viewSession(event)">
+    <form id="sessionForm">
       <div class="input-group">
         <input
           type="text"
@@ -412,6 +470,11 @@
           </div>
           <a class="import-link" id="importLink">Import session from zip</a>
         </div>
+        <div class="filter-pills">
+          <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>
+        </div>
         <input
           type="file"
           id="fileInput"
@@ -449,6 +512,9 @@
     let currentOffset = initialSessions.length;
     let hasMore = hasMoreFromServer;
     let isLoading = false;
+    // Filter state
+    let currentSourceFilter = 'copilot';
     // Load more sessions
     async function loadMoreSessions() {
       if (isLoading || !hasMore) return;
@@ -493,14 +559,24 @@
       loadMoreSection.style.display = hasMore && !isLoading ? 'block' : 'none';
     }
+    // Get filtered sessions based on current filter
+    function getFilteredSessions() {
+      return allSessions.filter(session => session.source === currentSourceFilter);
+    }
     // Render all sessions (grouped by date)
     function renderAllSessions() {
       const container = document.getElementById('sessions-container');
       container.innerHTML = ''; // Clear existing
-      if (allSessions.length === 0) return;
+      const filteredSessions = getFilteredSessions();
+      if (filteredSessions.length === 0) {
+        container.innerHTML = '<div style="text-align: center; color: #6e7681; padding: 40px; font-size: 14px;">No sessions found for this filter.</div>';
+        return;
+      }
-      const grouped = groupSessionsByDate(allSessions);
+      const grouped = groupSessionsByDate(filteredSessions);
       const sortedDates = Object.keys(grouped).sort((a, b) => b.localeCompare(a)); // Descending
       sortedDates.forEach(dateKey => {
@@ -548,6 +624,9 @@
       }
     }
+    // Bind form submit event
+    document.getElementById('sessionForm').addEventListener('submit', viewSession);
     // File import handling
     const fileInput = document.getElementById('fileInput');
     const importLink = document.getElementById('importLink');
@@ -669,6 +748,12 @@
     function renderSessionCard(session) {
       // Add status badges
       let badges = '';
+      // Add source badge (use backend-provided metadata - Violation #3 & #5 fix)
+      const sourceClass = session.sourceBadgeClass || 'source-copilot';
+      const sourceLabel = session.sourceName || 'Copilot';
+      badges += `<span class="status-badge ${sourceClass}" title="${sourceLabel} CLI">${sourceLabel}</span>`;
       if (session.sessionStatus === 'wip') {
         badges += '<span class="status-badge wip" title="Session in progress">🔄 WIP</span>';
       }
@@ -758,6 +843,25 @@
       return div.innerHTML;
     }
+    // Filter pill click handler
+    function setupFilterPills() {
+      const filterPills = document.querySelectorAll('.filter-pill');
+      filterPills.forEach(pill => {
+        pill.addEventListener('click', () => {
+          // Remove active class from all pills
+          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
+          renderAllSessions();
+        });
+      });
+    }
     // Render grouped sessions
     document.addEventListener('DOMContentLoaded', function() {
       // Initial render
@@ -769,6 +873,9 @@
       // Add click listener for load more button
       document.getElementById('load-more-btn').addEventListener('click', loadMoreSessions);
+      // Setup filter pills
+      setupFilterPills();
     });
   </script>