@qiaolei81/copilot-session-viewer 0.1.9 → 0.2.0

package/.nyc_output/coverage-core-functionality-spec-js-Core-Functionality-Tests-should-be-responsive-on-mobile-viewport-1771605454041.json

@@ -0,0 +1,435 @@
+[
+  {
+    "url": "http://localhost:3838/",
+    "scriptId": "4",
+    "source": "\n    // Parse JSON data safely from script tags\n    const initialSessions = JSON.parse(document.getElementById('sessions-data').textContent);\n    const metaData = JSON.parse(document.getElementById('meta-data').textContent);\n    const totalSessionsFromServer = metaData.totalSessions;\n    const hasMoreFromServer = metaData.hasMore;\n\n    // Infinite scroll state\n    let allSessions = [...initialSessions];\n    let currentOffset = initialSessions.length;\n    let hasMore = hasMoreFromServer;\n    let isLoading = false;\n\n    // Filter state\n    let currentSourceFilter = 'all';\n    // Load more sessions\n    async function loadMoreSessions() {\n      if (isLoading || !hasMore) return;\n\n      isLoading = true;\n      const loadMoreBtn = document.getElementById('load-more-btn');\n      const loadingIndicator = document.getElementById('loading-indicator');\n      const loadMoreSection = document.getElementById('load-more-section');\n\n      // Show loading, hide button\n      loadMoreSection.style.display = 'none';\n      loadingIndicator.style.display = 'block';\n\n      try {\n        const response = await fetch(`/api/sessions/load-more?offset=${currentOffset}&limit=20`);\n        if (!response.ok) {\n          throw new Error('Failed to load more sessions');\n        }\n\n        const data = await response.json();\n        allSessions.push(...data.sessions);\n        currentOffset += data.sessions.length;\n        hasMore = data.hasMore;\n\n        // Re-render all sessions\n        renderAllSessions();\n        updateLoadMoreButton();\n\n      } catch (err) {\n        console.error('Error loading more sessions:', err);\n        // Show button again on error\n        loadMoreSection.style.display = hasMore ? 'block' : 'none';\n      } finally {\n        isLoading = false;\n        loadingIndicator.style.display = 'none';\n      }\n    }\n\n    // Update load more button visibility\n    function updateLoadMoreButton() {\n      const loadMoreSection = document.getElementById('load-more-section');\n      loadMoreSection.style.display = hasMore && !isLoading ? 'block' : 'none';\n    }\n\n    // Get filtered sessions based on current filter\n    function getFilteredSessions() {\n      if (currentSourceFilter === 'all') {\n        return allSessions;\n      }\n      return allSessions.filter(session => session.source === currentSourceFilter);\n    }\n\n    // Render all sessions (grouped by date)\n    function renderAllSessions() {\n      const container = document.getElementById('sessions-container');\n      container.innerHTML = ''; // Clear existing\n\n      const filteredSessions = getFilteredSessions();\n\n      if (filteredSessions.length === 0) {\n        container.innerHTML = '<div style=\"text-align: center; color: #6e7681; padding: 40px; font-size: 14px;\">No sessions found for this filter.</div>';\n        return;\n      }\n\n      const grouped = groupSessionsByDate(filteredSessions);\n      const sortedDates = Object.keys(grouped).sort((a, b) => b.localeCompare(a)); // Descending\n\n      sortedDates.forEach(dateKey => {\n        const dateHeader = document.createElement('div');\n        dateHeader.className = 'date-group-header';\n        dateHeader.textContent = formatDateHeader(grouped[dateKey][0].createdAt);\n        container.appendChild(dateHeader);\n\n        const grid = document.createElement('div');\n        grid.className = 'recent-list';\n        grouped[dateKey].forEach(session => {\n          grid.innerHTML += renderSessionCard(session);\n        });\n        container.appendChild(grid);\n      });\n    }\n\n    // Check if user has scrolled near bottom\n    function checkScrollPosition() {\n      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n      const windowHeight = window.innerHeight;\n      const docHeight = document.documentElement.scrollHeight;\n\n      // Load more when user is within 500px of bottom\n      if (scrollTop + windowHeight >= docHeight - 500 && hasMore && !isLoading) {\n        loadMoreSessions();\n      }\n    }\n\n    // Throttle scroll events for performance\n    let scrollTimeout;\n    function throttledScroll() {\n      if (scrollTimeout) return;\n      scrollTimeout = setTimeout(() => {\n        checkScrollPosition();\n        scrollTimeout = null;\n      }, 100);\n    }\n\n    function viewSession(e) {\n      e.preventDefault();\n      const sessionId = document.getElementById('sessionInput').value.trim();\n      if (sessionId) {\n        window.location.href = `/session/${sessionId}`;\n      }\n    }\n\n    // File import handling\n    const fileInput = document.getElementById('fileInput');\n    const importLink = document.getElementById('importLink');\n    const importStatus = document.getElementById('importStatus');\n    \n    // Click import link to select file\n    importLink.addEventListener('click', (e) => {\n      e.preventDefault();\n      fileInput.click();\n    });\n    \n    // Auto-upload when file is selected\n    fileInput.addEventListener('change', async (e) => {\n      const file = e.target.files[0];\n      if (!file) return;\n      \n      if (!file.name.endsWith('.zip')) {\n        showStatus('error', '❌ Please select a .zip file');\n        return;\n      }\n      \n      importLink.style.pointerEvents = 'none';\n      importLink.style.opacity = '0.5';\n      importLink.textContent = 'Importing...';\n      showStatus('loading', 'Uploading and extracting session...');\n      \n      try {\n        const formData = new FormData();\n        formData.append('sessionZip', file);\n        \n        const response = await fetch('/session/import', {\n          method: 'POST',\n          body: formData\n        });\n        \n        const result = await response.json();\n        \n        if (response.ok) {\n          showStatus('success', `✅ Session ${result.sessionId} imported successfully!`);\n          \n          // Reload page after 1.5 seconds to show new session\n          setTimeout(() => {\n            window.location.reload();\n          }, 1500);\n        } else {\n          showStatus('error', `❌ Import failed: ${result.error}`);\n          importLink.style.pointerEvents = 'auto';\n          importLink.style.opacity = '1';\n          importLink.textContent = 'Import session from zip';\n        }\n      } catch (err) {\n        showStatus('error', `❌ Import failed: ${err.message}`);\n        importLink.style.pointerEvents = 'auto';\n        importLink.style.opacity = '1';\n        importLink.textContent = 'Import session from zip';\n      } finally {\n        // Reset file input\n        fileInput.value = '';\n      }\n    });\n    \n    function showStatus(type, message) {\n      importStatus.className = `import-status ${type}`;\n      importStatus.textContent = message;\n    }\n\n    // Format duration from milliseconds to human-readable format\n    function formatDuration(ms) {\n      if (!ms || ms < 0) return '—';\n      \n      const seconds = Math.floor(ms / 1000);\n      const minutes = Math.floor(seconds / 60);\n      const hours = Math.floor(minutes / 60);\n      \n      if (hours > 0) {\n        const remainingMinutes = minutes % 60;\n        return `${hours}h ${remainingMinutes}m`;\n      } else if (minutes > 0) {\n        const remainingSeconds = seconds % 60;\n        return `${minutes}m ${remainingSeconds}s`;\n      } else {\n        return `${seconds}s`;\n      }\n    }\n    \n    // Format date to YYYY/MM/DD\n    function formatDateHeader(dateStr) {\n      const date = new Date(dateStr);\n      const year = date.getFullYear();\n      const month = String(date.getMonth() + 1).padStart(2, '0');\n      const day = String(date.getDate()).padStart(2, '0');\n      return `${year}/${month}/${day}`;\n    }\n    \n    // Get date key from timestamp (YYYY-MM-DD for grouping)\n    function getDateKey(timestamp) {\n      if (!timestamp) return 'Unknown';\n      const date = new Date(timestamp);\n      const year = date.getFullYear();\n      const month = String(date.getMonth() + 1).padStart(2, '0');\n      const day = String(date.getDate()).padStart(2, '0');\n      return `${year}-${month}-${day}`;\n    }\n    \n    // Group sessions by date\n    function groupSessionsByDate(sessions) {\n      const groups = {};\n      sessions.forEach(session => {\n        const dateKey = getDateKey(session.createdAt);\n        if (!groups[dateKey]) {\n          groups[dateKey] = [];\n        }\n        groups[dateKey].push(session);\n      });\n      return groups;\n    }\n    \n    // Render session card HTML\n    function renderSessionCard(session) {\n      // Add status badges\n      let badges = '';\n\n      // Add source badge (at the beginning)\n      const sourceClass = session.source === 'claude' ? 'source-claude' : 'source-copilot';\n      const sourceLabel = session.source === 'claude' ? 'Claude' : 'Copilot';\n      badges += `<span class=\"status-badge ${sourceClass}\" title=\"${sourceLabel} CLI\">${sourceLabel}</span>`;\n\n      if (session.sessionStatus === 'wip') {\n        badges += '<span class=\"status-badge wip\" title=\"Session in progress\">🔄 WIP</span>';\n      }\n      if (session.isImported) {\n        badges += '<span class=\"status-badge imported\" title=\"Imported session\">📥</span>';\n      }\n      if (session.hasInsight) {\n        badges += '<span class=\"status-badge insight\" title=\"Has Copilot Insight\">💡</span>';\n      }\n      // Add model and version badges\n      if (session.selectedModel) {\n        const modelShort = session.selectedModel.replace('claude-', '').replace('gpt-', '').replace('gemini-', '');\n        let modelClass = 'model-other';\n        if (session.selectedModel.includes('claude')) {\n          modelClass = 'model-claude';\n        } else if (session.selectedModel.includes('gpt')) {\n          modelClass = 'model-gpt';\n        } else if (session.selectedModel.includes('gemini')) {\n          modelClass = 'model-gemini';\n        }\n        badges += `<span class=\"status-badge model ${modelClass}\" title=\"Model: ${escapeHtml(session.selectedModel)}\">${escapeHtml(modelShort)}</span>`;\n      }\n      if (session.copilotVersion) {\n        badges += `<span class=\"status-badge version\" title=\"Copilot CLI version\">${escapeHtml(session.copilotVersion)}</span>`;\n      }\n      \n      let summaryHtml = '';\n      if (session.summary && session.summary !== 'No summary' && session.summary !== 'Legacy session') {\n        summaryHtml = `<div class=\"session-summary\">${escapeHtml(session.summary)}</div>`;\n      } else {\n        summaryHtml = '<div class=\"session-summary\" style=\"color: #6e7681; font-style: italic;\">No summary available</div>';\n      }\n      \n      let workspaceHtml = '';\n      if (session.workspace && session.workspace.cwd) {\n        workspaceHtml = `\n          <div class=\"session-info-item workspace\" title=\"${escapeHtml(session.workspace.cwd)}\">\n            <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3H7.5a.25.25 0 01-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z\"></path></svg>\n            <span class=\"session-info-value\">${escapeHtml(session.workspace.cwd)}</span>\n          </div>\n        `;\n      }\n      \n      const createdAtStr = session.createdAt \n        ? new Date(session.createdAt).toLocaleString('en-US', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })\n        : 'unknown';\n      \n      let durationHtml = '';\n      if (session.duration) {\n        durationHtml = `\n          <div class=\"session-info-item\">\n            <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM7.25 12.5v-5A.75.75 0 0 1 8 6.75h2.5a.75.75 0 0 1 0 1.5H8.75v4.25a.75.75 0 0 1-1.5 0Z\"></path></svg>\n            <span class=\"session-info-value\">${formatDuration(session.duration)}</span>\n          </div>\n        `;\n      }\n      \n      const wipClass = session.sessionStatus === 'wip' ? ' recent-item-wip' : '';\n\n      return `\n        <a href=\"/session/${session.id}\" class=\"recent-item${wipClass}\">\n          <div class=\"session-id\">\n            <span class=\"session-id-text\" title=\"${escapeHtml(session.id)}\">${escapeHtml(session.id)}</span>\n            <div class=\"session-badges\">${badges}</div>\n          </div>\n          ${summaryHtml}\n          <div class=\"session-divider\"></div>\n          <div class=\"session-info\">\n            ${workspaceHtml}\n            <div class=\"session-info-item\">\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z\"></path></svg>\n              <span class=\"session-info-value\">${createdAtStr}</span>\n            </div>\n            ${durationHtml}\n            <div class=\"session-info-item\">\n              <svg viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M7.72.72a.75.75 0 0 1 1.06 0l1.5 1.5a.75.75 0 0 1-1.06 1.06l-.22-.22v1.69a.75.75 0 0 1-1.5 0V3.06l-.22.22a.75.75 0 0 1-1.06-1.06ZM2 7a.75.75 0 0 0 0 1.5h3.69l-.22.22a.75.75 0 1 0 1.06 1.06l1.5-1.5a.75.75 0 0 0 0-1.06l-1.5-1.5a.75.75 0 0 0-1.06 1.06l.22.22Zm8.53-.28a.75.75 0 0 0 0 1.06l1.5 1.5a.75.75 0 1 0 1.06-1.06l-.22-.22H16a.75.75 0 0 0 0-1.5h-3.13l.22-.22a.75.75 0 0 0-1.06-1.06ZM7.72 12.22a.75.75 0 0 1 1.06 0l1.5 1.5a.75.75 0 1 1-1.06 1.06l-.22-.22v1.69a.75.75 0 0 1-1.5 0v-1.69l-.22.22a.75.75 0 0 1-1.06-1.06Z\"></path></svg>\n              <span class=\"session-info-value\">${session.eventCount || 0} events</span>\n            </div>\n          </div>\n        </a>\n      `;\n    }\n    \n    function escapeHtml(text) {\n      const div = document.createElement('div');\n      div.textContent = text;\n      return div.innerHTML;\n    }\n\n    // Filter pill click handler\n    function setupFilterPills() {\n      const filterPills = document.querySelectorAll('.filter-pill');\n      filterPills.forEach(pill => {\n        pill.addEventListener('click', () => {\n          // Remove active class from all pills\n          filterPills.forEach(p => p.classList.remove('active'));\n          // Add active class to clicked pill\n          pill.classList.add('active');\n\n          // Update filter state\n          currentSourceFilter = pill.getAttribute('data-source');\n\n          // Re-render sessions with filter\n          renderAllSessions();\n        });\n      });\n    }\n\n    // Render grouped sessions\n    document.addEventListener('DOMContentLoaded', function() {\n      // Initial render\n      renderAllSessions();\n      updateLoadMoreButton();\n\n      // Add scroll listener for infinite scroll\n      window.addEventListener('scroll', throttledScroll);\n\n      // Add click listener for load more button\n      document.getElementById('load-more-btn').addEventListener('click', loadMoreSessions);\n\n      // Setup filter pills\n      setupFilterPills();\n    });\n  ",
+    "functions": [
+      {
+        "functionName": "",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 0,
+            "endOffset": 14748,
+            "count": 1
+          }
+        ]
+      },
+      {
+        "functionName": "loadMoreSessions",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 607,
+            "endOffset": 1828,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "updateLoadMoreButton",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 1876,
+            "endOffset": 2071,
+            "count": 1
+          },
+          {
+            "startOffset": 2056,
+            "endOffset": 2064,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "getFilteredSessions",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 2130,
+            "endOffset": 2331,
+            "count": 1
+          },
+          {
+            "startOffset": 2241,
+            "endOffset": 2330,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 2274,
+            "endOffset": 2323,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "renderAllSessions",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 2382,
+            "endOffset": 3505,
+            "count": 1
+          },
+          {
+            "startOffset": 2631,
+            "endOffset": 2811,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 2926,
+            "endOffset": 2954,
+            "count": 2
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 2998,
+            "endOffset": 3497,
+            "count": 3
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 3372,
+            "endOffset": 3450,
+            "count": 20
+          }
+        ]
+      },
+      {
+        "functionName": "checkScrollPosition",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 3557,
+            "endOffset": 3961,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "throttledScroll",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 4036,
+            "endOffset": 4220,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "viewSession",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 4226,
+            "endOffset": 4448,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 4752,
+            "endOffset": 4817,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 4907,
+            "endOffset": 6475,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "showStatus",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 6487,
+            "endOffset": 6627,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "formatDuration",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 6699,
+            "endOffset": 7226,
+            "count": 4
+          },
+          {
+            "startOffset": 6754,
+            "endOffset": 6765,
+            "count": 0
+          },
+          {
+            "startOffset": 6940,
+            "endOffset": 7045,
+            "count": 0
+          },
+          {
+            "startOffset": 7068,
+            "endOffset": 7220,
+            "count": 2
+          }
+        ]
+      },
+      {
+        "functionName": "formatDateHeader",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 7269,
+            "endOffset": 7553,
+            "count": 3
+          }
+        ]
+      },
+      {
+        "functionName": "getDateKey",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 7624,
+            "endOffset": 7946,
+            "count": 20
+          },
+          {
+            "startOffset": 7679,
+            "endOffset": 7696,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "groupSessionsByDate",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 7986,
+            "endOffset": 8292,
+            "count": 1
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 8075,
+            "endOffset": 8263,
+            "count": 20
+          },
+          {
+            "startOffset": 8173,
+            "endOffset": 8216,
+            "count": 3
+          }
+        ]
+      },
+      {
+        "functionName": "renderSessionCard",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 8334,
+            "endOffset": 13482,
+            "count": 20
+          },
+          {
+            "startOffset": 8522,
+            "endOffset": 8539,
+            "count": 16
+          },
+          {
+            "startOffset": 8540,
+            "endOffset": 8558,
+            "count": 4
+          },
+          {
+            "startOffset": 8614,
+            "endOffset": 8624,
+            "count": 16
+          },
+          {
+            "startOffset": 8625,
+            "endOffset": 8636,
+            "count": 4
+          },
+          {
+            "startOffset": 8792,
+            "endOffset": 8895,
+            "count": 0
+          },
+          {
+            "startOffset": 8926,
+            "endOffset": 9027,
+            "count": 0
+          },
+          {
+            "startOffset": 9058,
+            "endOffset": 9161,
+            "count": 0
+          },
+          {
+            "startOffset": 9233,
+            "endOffset": 9854,
+            "count": 14
+          },
+          {
+            "startOffset": 9445,
+            "endOffset": 9495,
+            "count": 9
+          },
+          {
+            "startOffset": 9495,
+            "endOffset": 9693,
+            "count": 5
+          },
+          {
+            "startOffset": 9544,
+            "endOffset": 9591,
+            "count": 0
+          },
+          {
+            "startOffset": 9643,
+            "endOffset": 9693,
+            "count": 0
+          },
+          {
+            "startOffset": 9889,
+            "endOffset": 10027,
+            "count": 16
+          },
+          {
+            "startOffset": 10166,
+            "endOffset": 10266,
+            "count": 19
+          },
+          {
+            "startOffset": 10266,
+            "endOffset": 10406,
+            "count": 1
+          },
+          {
+            "startOffset": 10498,
+            "endOffset": 10998,
+            "count": 16
+          },
+          {
+            "startOffset": 11211,
+            "endOffset": 11222,
+            "count": 0
+          },
+          {
+            "startOffset": 11288,
+            "endOffset": 11727,
+            "count": 4
+          },
+          {
+            "startOffset": 11790,
+            "endOffset": 11810,
+            "count": 0
+          },
+          {
+            "startOffset": 13399,
+            "endOffset": 13403,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "escapeHtml",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 13492,
+            "endOffset": 13632,
+            "count": 135
+          }
+        ]
+      },
+      {
+        "functionName": "setupFilterPills",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 13671,
+            "endOffset": 14256,
+            "count": 1
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 13796,
+            "endOffset": 14248,
+            "count": 3
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": false,
+        "ranges": [
+          {
+            "startOffset": 13845,
+            "endOffset": 14238,
+            "count": 0
+          }
+        ]
+      },
+      {
+        "functionName": "",
+        "isBlockCoverage": true,
+        "ranges": [
+          {
+            "startOffset": 14339,
+            "endOffset": 14743,
+            "count": 1
+          }
+        ]
+      }
+    ]
+  }
+]