cursor-usage-analyzer 0.2.1 → 0.3.1

package/html-template.js

@@ -6,6 +6,7 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
   const avgTokens = avg(stats.totalTokens, stats.totalConversations);
   const avgMessages = avg(stats.totalMessages, stats.totalConversations);
   const avgLines = avg(stats.totalLinesAdded + stats.totalLinesRemoved, stats.totalConversations);
+  const projectCount = Object.keys(stats.workspaceUsage).length;
   
   // Prepare chart data
   const isMultiDay = stats.isMultiDay;
@@ -17,7 +18,7 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
   
   const activityTitle = isMultiDay ? 'Activity Over Period' : 'Activity During Day';
   const activityLabels = isMultiDay 
-    ? Object.keys(stats.dailyDistribution).sort()
+    ? Object.keys(stats.dailyDistribution).sort((a, b) => new Date(a) - new Date(b))
     : Array.from({length: 24}, (_, i) => i + ':00');
   const activityData = isMultiDay
     ? activityLabels.map(k => stats.dailyDistribution[k])
@@ -38,7 +39,7 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       background: #f9fafb;
       color: #111827;
     }
-    .container { max-width: 1400px; margin: 0 auto; }
+    .container { max-width: 1600px; margin: 0 auto; }
     h1 { color: #2563eb; margin-bottom: 8px; }
     h2 { 
       color: #111827; 
@@ -65,10 +66,32 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     }
     
-    .stat { padding: 20px; }
-    .stat-value { font-size: 32px; font-weight: 700; color: #2563eb; margin-bottom: 4px; }
+    .stat { padding: 20px; overflow: hidden; }
+    .stat-value { font-size: 32px; font-weight: 700; color: #2563eb; margin-bottom: 4px; white-space: nowrap; }
     .stat-label { color: #6b7280; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
     .stat-sublabel { color: #9ca3af; font-size: 12px; margin-top: 4px; }
+    .stat-cost { border-left: 4px solid #dc2626; }
+    .stat-cost .stat-value { color: #dc2626; }
+    .cost-val { color: #dc2626; font-weight: 700; }
+    .cost-val-green { color: #16a34a; font-weight: 700; }
+    .cost-val-red { color: #dc2626; font-weight: 700; }
+
+    .warning-banner {
+      display: flex;
+      gap: 12px;
+      padding: 14px 18px;
+      background: #fffbeb;
+      border: 1px solid #fde68a;
+      border-left: 4px solid #f59e0b;
+      border-radius: 8px;
+      margin-bottom: 32px;
+      font-size: 13px;
+      line-height: 1.5;
+      color: #92400e;
+    }
+    .warning-banner-icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; }
+    .warning-banner-title { font-weight: 700; margin-bottom: 2px; color: #78350f; }
+    .warning-banner-text { color: #92400e; }
     
     .chart-container { padding: 24px; }
     .chart-title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 16px; }
@@ -81,6 +104,19 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       margin-bottom: 20px;
     }
     .filter-group { display: flex; flex-direction: column; gap: 4px; }
+    .filter-clear {
+      align-self: end;
+      padding: 8px 16px;
+      border: 1px solid #e5e7eb;
+      border-radius: 4px;
+      background: white;
+      font-size: 13px;
+      color: #6b7280;
+      cursor: pointer;
+      transition: all 0.15s;
+      white-space: nowrap;
+    }
+    .filter-clear:hover { background: #f3f4f6; color: #111827; border-color: #d1d5db; }
     .filter-group label {
       font-size: 11px;
       color: #6b7280;
@@ -101,32 +137,296 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
     }
     
-    table { width: 100%; border-collapse: collapse; overflow: hidden; }
-    th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5e7eb; }
+    .table-outer {
+      position: relative;
+    }
+    .table-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      background: white;
+      border-radius: 8px;
+      border: 1px solid #e5e7eb;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+    .scroll-hint {
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 56px;
+      pointer-events: none;
+      background: linear-gradient(to right, transparent, rgba(37, 99, 235, 0.18));
+      border-radius: 0 8px 8px 0;
+      transition: opacity 0.3s;
+      z-index: 2;
+    }
+    .scroll-hint.hidden { opacity: 0; }
+    table { width: 100%; border-collapse: collapse; min-width: 900px; }
+    table { background: none; border: none; box-shadow: none; border-radius: 0; }
+    th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
+    td.wrap { white-space: normal; min-width: 140px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
     th { 
       background: #f9fafb;
       font-weight: 600;
-      font-size: 13px;
+      font-size: 12px;
       color: #6b7280;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       cursor: pointer;
       user-select: none;
       position: relative;
-      padding-right: 28px;
+      padding-right: 22px;
+      position: sticky;
+      top: 0;
+      z-index: 1;
     }
     th:hover { background: #f3f4f6; }
-    th.sortable::after { content: '⇅'; position: absolute; right: 8px; opacity: 0.3; font-size: 14px; }
+    th.sortable::after { content: '⇅'; position: absolute; right: 4px; opacity: 0.3; font-size: 12px; }
     th.sortable.asc::after { content: '↑'; opacity: 1; }
     th.sortable.desc::after { content: '↓'; opacity: 1; }
-    td { font-size: 14px; }
+    td { font-size: 13px; }
     tr:last-child td { border-bottom: none; }
     tr:hover { background: #f9fafb; }
     small { font-size: 12px; color: #6b7280; }
+
+    /* View toggle */
+    .view-toggle {
+      display: inline-flex;
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      overflow: hidden;
+      margin-left: 16px;
+      vertical-align: middle;
+    }
+    .view-toggle button {
+      padding: 6px 14px;
+      border: none;
+      background: white;
+      font-size: 13px;
+      cursor: pointer;
+      color: #6b7280;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      transition: all 0.15s;
+    }
+    .view-toggle button:not(:last-child) { border-right: 1px solid #e5e7eb; }
+    .view-toggle button.active { background: #2563eb; color: white; }
+    .view-toggle button:hover:not(.active) { background: #f3f4f6; }
+
+    /* Card view */
+    #cardsContainer { display: none; flex-direction: column; gap: 8px; }
+    #cardsContainer.active { display: flex; }
+    .table-outer.active { display: block; }
+    .table-outer:not(.active) { display: none; }
+
+    .conv-card {
+      background: white;
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      padding: 14px 18px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+      transition: border-color 0.15s;
+    }
+    .conv-card:hover { border-color: #bfdbfe; }
+    .conv-card-header {
+      display: flex;
+      align-items: baseline;
+      gap: 10px;
+      margin-bottom: 8px;
+      flex-wrap: wrap;
+    }
+    .conv-card-name {
+      font-weight: 600;
+      font-size: 14px;
+      color: #111827;
+      flex-shrink: 1;
+      min-width: 0;
+    }
+    .conv-card-meta {
+      font-size: 12px;
+      color: #9ca3af;
+      white-space: nowrap;
+    }
+    .conv-card-badges {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      margin-left: auto;
+    }
+    .conv-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 4px;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+    .conv-badge-blue { background: #eff6ff; color: #2563eb; }
+    .conv-badge-green { background: #f0fdf4; color: #16a34a; }
+    .conv-badge-purple { background: #faf5ff; color: #7c3aed; }
+    .conv-badge-amber { background: #fffbeb; color: #d97706; }
+    .conv-badge-gray { background: #f3f4f6; color: #6b7280; }
+    .conv-badge-red { background: #fef2f2; color: #dc2626; }
+    .conv-card-stats {
+      display: flex;
+      gap: 16px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    .conv-card-stat {
+      font-size: 12px;
+      color: #6b7280;
+    }
+    .conv-card-stat b {
+      color: #374151;
+      font-weight: 600;
+    }
+    .conv-card-cost {
+      font-size: 13px;
+      font-weight: 700;
+      margin-left: auto;
+      padding: 2px 10px;
+      border-radius: 4px;
+    }
+    .conv-card-cost-low { color: #16a34a; background: #f0fdf4; }
+    .conv-card-cost-mid { color: #d97706; background: #fffbeb; }
+    .conv-card-cost-high { color: #dc2626; background: #fef2f2; }
     
+    /* Modal */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.45);
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+    }
+    .modal-overlay.open { display: flex; }
+    .modal {
+      background: white;
+      border-radius: 12px;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
+      width: 100%;
+      max-width: 720px;
+      max-height: 90vh;
+      overflow-y: auto;
+      animation: modalIn 0.15s ease-out;
+    }
+    @keyframes modalIn { from { opacity: 0; transform: scale(0.97) translateY(8px); } }
+    .modal-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 20px 24px 12px;
+      border-bottom: 1px solid #e5e7eb;
+      gap: 12px;
+    }
+    .modal-head h3 { font-size: 17px; font-weight: 700; color: #111827; word-break: break-word; }
+    .modal-close {
+      border: none;
+      background: #f3f4f6;
+      color: #6b7280;
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      font-size: 18px;
+      cursor: pointer;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s;
+    }
+    .modal-close:hover { background: #e5e7eb; color: #111827; }
+    .modal-body { padding: 16px 24px 24px; }
+    .modal-meta {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      margin-bottom: 16px;
+    }
+    .modal-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 10px;
+      margin-bottom: 18px;
+    }
+    .modal-stat {
+      background: #f9fafb;
+      border-radius: 6px;
+      padding: 10px 14px;
+    }
+    .modal-stat-val { font-size: 18px; font-weight: 700; color: #2563eb; }
+    .modal-stat-val.cost-val { color: #dc2626; }
+    .modal-stat-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
+    .modal-file-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      background: #2563eb;
+      color: white;
+      border-radius: 6px;
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 600;
+      transition: background 0.15s;
+    }
+    .modal-file-link:hover { background: #1d4ed8; }
+    .modal-preview {
+      margin-top: 14px;
+      padding: 12px 14px;
+      background: #f9fafb;
+      border-radius: 6px;
+      font-size: 13px;
+      color: #374151;
+      line-height: 1.5;
+      border-left: 3px solid #2563eb;
+    }
+    .modal-preview-label {
+      font-size: 11px;
+      color: #6b7280;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+      margin-bottom: 6px;
+      font-weight: 600;
+    }
+
+    /* Clickable rows/cards */
+    #conversationsBody tr { cursor: pointer; }
+    .conv-card { cursor: pointer; }
+
+    /* Unmatched rows */
+    tr.unmatched td { background: #fef2f2; }
+    tr.unmatched:hover td { background: #fee2e2; }
+    .conv-card.unmatched {
+      background: #fef2f2;
+      border-color: #fecaca;
+      border-left: 3px solid #dc2626;
+    }
+    .conv-card.unmatched:hover { border-color: #fca5a5; }
+    .unmatched-tag {
+      display: inline-block;
+      font-size: 10px;
+      font-weight: 700;
+      color: #dc2626;
+      background: #fee2e2;
+      padding: 1px 6px;
+      border-radius: 3px;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+
     @media (max-width: 768px) {
       .charts-grid { grid-template-columns: 1fr; }
       .stats-grid { grid-template-columns: repeat(2, 1fr); }
+      .modal { max-width: 100%; margin: 0; border-radius: 8px; }
+      .modal-grid { grid-template-columns: repeat(2, 1fr); }
     }
   </style>
 </head>
@@ -146,16 +446,29 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
         <div class="stat-label">Messages</div>
         <div class="stat-sublabel">Ø ${avgMessages} per conversation</div>
       </div>
+      <div class="stat">
+        <div class="stat-value">${projectCount}</div>
+        <div class="stat-label">Projects</div>
+      </div>
       <div class="stat">
         <div class="stat-value">${stats.totalTokens.toLocaleString()}</div>
         <div class="stat-label">Context Tokens</div>
         <div class="stat-sublabel">Ø ${avgTokens.toLocaleString()} per conversation</div>
       </div>
       ${stats.totalApiCalls > 0 ? `
+      <div class="stat stat-cost">
+        <div class="stat-value">$${(stats.csvTotals?.total || stats.totalApiTokens.cost).toFixed(2)}</div>
+        <div class="stat-label">Total Cost (CSV)</div>
+        <div class="stat-sublabel">On-Demand: $${(stats.csvTotals?.onDemand || 0).toFixed(2)} | Included: $${(stats.csvTotals?.included || 0).toFixed(2)}</div>
+      </div>
+      <div class="stat">
+        <div class="stat-value" style="color: #16a34a;">$${stats.totalApiTokens.cost.toFixed(2)}</div>
+        <div class="stat-label">Matched Cost</div>
+        <div class="stat-sublabel">${stats.totalApiCalls} of ${stats.csvTotals?.callCount || stats.totalApiCalls} calls matched</div>
+      </div>
       <div class="stat">
         <div class="stat-value">${stats.totalApiTokens.totalTokens.toLocaleString()}</div>
         <div class="stat-label">API Tokens (Total)</div>
-        <div class="stat-sublabel">$${stats.totalApiTokens.cost.toFixed(2)} total cost</div>
       </div>
       <div class="stat">
         <div class="stat-value">${stats.totalApiTokens.inputWithCache.toLocaleString()}</div>
@@ -170,8 +483,9 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
         <div class="stat-label">Output Tokens</div>
       </div>
       <div class="stat">
-        <div class="stat-value">${stats.totalApiCalls}</div>
+        <div class="stat-value">${stats.csvTotals?.callCount || stats.totalApiCalls}</div>
         <div class="stat-label">API Calls</div>
+        <div class="stat-sublabel">${stats.unmatchedApiCalls || 0} unmatched</div>
       </div>
       ` : ''}
       <div class="stat">
@@ -189,6 +503,20 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       </div>
     </div>
     
+    ${(stats.unmatchedApiCalls || 0) > 0 ? `
+    <div class="warning-banner">
+      <div class="warning-banner-icon">&#9888;</div>
+      <div>
+        <div class="warning-banner-title">${stats.unmatchedApiCalls} API calls ($${(stats.unmatchedCost || 0).toFixed(2)}) could not be matched to any conversation</div>
+        <div class="warning-banner-text">
+          These calls appear in the CSV export but have no matching conversation in the local Cursor database.
+          Possible causes: deleted conversations, tab completions / autocomplete, background indexing, or operations from other devices.
+          They are shown as <strong>Unmatched</strong> entries (grouped by day) in the conversation list below so the total cost is fully accounted for.
+        </div>
+      </div>
+    </div>
+    ` : ''}
+
     <h2>Usage Charts</h2>
     
     <div class="charts-grid">
@@ -214,7 +542,13 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       </div>
     </div>
     
-    <h2>Conversation Details</h2>
+    <h2 style="display: flex; align-items: center;">
+      Conversation Details
+      <div class="view-toggle">
+        <button id="viewTable" class="active" title="Table view">&#9776; Table</button>
+        <button id="viewCards" title="Card view">&#9638; Cards</button>
+      </div>
+    </h2>
     
     <div class="filters">
       <div class="filter-group">
@@ -247,8 +581,12 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
         <label>Date To</label>
         <input type="date" id="filterDateTo">
       </div>
+      <button class="filter-clear" id="filterClear">Clear filters</button>
     </div>
     
+    <div class="table-outer">
+    <div class="scroll-hint" id="scrollHint"></div>
+    <div class="table-wrapper" id="tableWrapper">
     <table id="conversationsTable">
       <thead>
         <tr>
@@ -259,7 +597,10 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
           <th class="sortable" data-column="messages" data-type="number">Messages</th>
           <th class="sortable" data-column="tokens" data-type="number">Context Tokens</th>
           ${stats.totalApiCalls > 0 ? `
-          <th class="sortable" data-column="apiTokens" data-type="number">API Tokens</th>
+          <th class="sortable" data-column="apiInputTokens" data-type="number">Input Tokens</th>
+          <th class="sortable" data-column="apiCacheRead" data-type="number">Cache Read</th>
+          <th class="sortable" data-column="apiOutputTokens" data-type="number">Output Tokens</th>
+          <th class="sortable" data-column="apiTokens" data-type="number">Total Tokens</th>
           <th class="sortable" data-column="apiCost" data-type="number">Cost</th>
           <th class="sortable" data-column="apiCalls" data-type="number">API Calls</th>
           ` : ''}
@@ -269,16 +610,19 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       </thead>
       <tbody id="conversationsBody">
          ${stats.conversations.map((c, idx) => `
-           <tr data-index="${idx}">
+           <tr data-index="${idx}"${c.isUnmatched ? ' class="unmatched"' : ''}>
              <td data-value="${c.timestamp}"><small>${c.datetime}</small></td>
-             <td data-value="${c.name}">${c.name}</td>
+             <td class="wrap" data-value="${c.name}" title="${c.name}">${c.isUnmatched ? '<span class="unmatched-tag">unmatched</span> ' : ''}${c.name}</td>
              <td data-value="${c.workspace}">${c.workspace}</td>
              <td data-value="${c.model}"><small>${c.model}</small></td>
              <td data-value="${c.messages}">${c.messages}</td>
              <td data-value="${c.tokens}"><small>${c.tokens.toLocaleString()} / ${c.contextLimit.toLocaleString()}</small></td>
              ${stats.totalApiCalls > 0 ? `
+             <td data-value="${c.apiTokens?.inputWithCache || 0}"><small>${(c.apiTokens?.inputWithCache || 0).toLocaleString()}</small></td>
+             <td data-value="${c.apiTokens?.cacheRead || 0}"><small>${(c.apiTokens?.cacheRead || 0).toLocaleString()}</small></td>
+             <td data-value="${c.apiTokens?.outputTokens || 0}"><small>${(c.apiTokens?.outputTokens || 0).toLocaleString()}</small></td>
              <td data-value="${c.apiTokens?.totalTokens || 0}"><small>${(c.apiTokens?.totalTokens || 0).toLocaleString()}</small></td>
-             <td data-value="${c.apiTokens?.cost || 0}"><small>$${(c.apiTokens?.cost || 0).toFixed(2)}</small></td>
+             <td data-value="${c.apiTokens?.cost || 0}"><small class="cost-val">$${(c.apiTokens?.cost || 0).toFixed(2)}</small></td>
              <td data-value="${c.apiCallCount || 0}">${c.apiCallCount || 0}</td>
              ` : ''}
              <td data-value="${c.linesChanged}">${c.linesChanged}</td>
@@ -287,6 +631,20 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
          `).join('')}
       </tbody>
     </table>
+    </div>
+    </div>
+
+    <div id="cardsContainer"></div>
+  </div>
+
+  <div class="modal-overlay" id="modalOverlay">
+    <div class="modal" id="modal">
+      <div class="modal-head">
+        <h3 id="modalTitle"></h3>
+        <button class="modal-close" id="modalClose">&times;</button>
+      </div>
+      <div class="modal-body" id="modalBody"></div>
+    </div>
   </div>
   
   <script>
@@ -301,7 +659,8 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       modelCounts: Object.values(stats.modelUsage),
       workspaceLabels: Object.keys(stats.workspaceUsage),
       workspaceCounts: Object.values(stats.workspaceUsage),
-      isMultiDay
+      isMultiDay,
+      hasApi: stats.totalApiCalls > 0
     })};
     
     // Chart defaults
@@ -477,6 +836,239 @@ export function generateHTMLReport(stats, dateStr, reportPath) {
       const el = document.getElementById(id);
       el.addEventListener(el.tagName === 'SELECT' ? 'change' : 'input', applyFilters);
     });
+
+    // --- Card view ---
+    const fmt = n => (n || 0).toLocaleString();
+    const cardsContainer = document.getElementById('cardsContainer');
+
+    function renderCards() {
+      cardsContainer.innerHTML = data.conversations.map((c, idx) => {
+        const api = c.apiTokens || {};
+        const apiSection = data.hasApi ? \`
+          <span class="conv-card-stat">In: <b>\${fmt(api.inputWithCache)}</b></span>
+          <span class="conv-card-stat">Cache: <b>\${fmt(api.cacheRead)}</b></span>
+          <span class="conv-card-stat">Out: <b>\${fmt(api.outputTokens)}</b></span>
+          <span class="conv-card-stat">Total: <b>\${fmt(api.totalTokens)}</b></span>
+          <span class="conv-card-stat">Calls: <b>\${c.apiCallCount || 0}</b></span>
+        \` : '';
+        const costClass = api.cost >= 3 ? 'conv-card-cost-high' : api.cost >= 1 ? 'conv-card-cost-mid' : 'conv-card-cost-low';
+        const costBadge = data.hasApi && api.cost > 0
+          ? \`<span class="conv-card-cost \${costClass}">$\${api.cost.toFixed(2)}</span>\`
+          : '';
+        return \`<div class="conv-card\${c.isUnmatched ? ' unmatched' : ''}" data-card-index="\${idx}">
+          <div class="conv-card-header">
+            <span class="conv-card-name">\${c.isUnmatched ? '<span class="unmatched-tag">unmatched</span> ' : ''}\${c.name}</span>
+            <span class="conv-card-meta">\${c.datetime}</span>
+            <div class="conv-card-badges">
+              <span class="conv-badge conv-badge-blue">\${c.workspace}</span>
+              <span class="conv-badge conv-badge-purple">\${c.model}</span>
+              <span class="conv-badge conv-badge-gray">\${c.messages} msgs</span>
+              \${c.linesChanged !== '+0/-0' ? \`<span class="conv-badge conv-badge-green">\${c.linesChanged}</span>\` : ''}
+              \${c.files > 0 ? \`<span class="conv-badge conv-badge-amber">\${c.files} files</span>\` : ''}
+            </div>
+          </div>
+          <div class="conv-card-stats">
+            <span class="conv-card-stat">Context: <b>\${fmt(c.tokens)}</b> / \${fmt(c.contextLimit)}</span>
+            \${apiSection}
+            \${costBadge}
+          </div>
+        </div>\`;
+      }).join('');
+    }
+    renderCards();
+
+    // Apply filters to cards too
+    const origApplyFilters = applyFilters;
+    const applyFiltersAll = () => {
+      const filters = {
+        name: document.getElementById('filterName').value.toLowerCase(),
+        workspace: document.getElementById('filterWorkspace').value,
+        model: document.getElementById('filterModel').value,
+        dateFrom: document.getElementById('filterDateFrom').value,
+        dateTo: document.getElementById('filterDateTo').value
+      };
+      const fromTs = filters.dateFrom ? new Date(filters.dateFrom).getTime() : 0;
+      const toTs = filters.dateTo ? new Date(filters.dateTo + 'T23:59:59').getTime() : Infinity;
+
+      // Filter table rows
+      document.querySelectorAll('#conversationsBody tr').forEach(row => {
+        const idx = parseInt(row.dataset.index);
+        const conv = data.conversations[idx];
+        const show = (!filters.name || conv.name.toLowerCase().includes(filters.name)) &&
+                     (!filters.workspace || conv.workspace === filters.workspace) &&
+                     (!filters.model || conv.model === filters.model) &&
+                     (conv.timestamp >= fromTs && conv.timestamp <= toTs);
+        row.style.display = show ? '' : 'none';
+      });
+
+      // Filter cards
+      document.querySelectorAll('.conv-card').forEach(card => {
+        const idx = parseInt(card.dataset.cardIndex);
+        const conv = data.conversations[idx];
+        const show = (!filters.name || conv.name.toLowerCase().includes(filters.name)) &&
+                     (!filters.workspace || conv.workspace === filters.workspace) &&
+                     (!filters.model || conv.model === filters.model) &&
+                     (conv.timestamp >= fromTs && conv.timestamp <= toTs);
+        card.style.display = show ? '' : 'none';
+      });
+    };
+
+    // Re-bind filters to unified handler
+    ['filterName', 'filterWorkspace', 'filterModel', 'filterDateFrom', 'filterDateTo'].forEach(id => {
+      const el = document.getElementById(id);
+      const evt = el.tagName === 'SELECT' ? 'change' : 'input';
+      el.removeEventListener(evt, applyFilters);
+      el.addEventListener(evt, applyFiltersAll);
+    });
+
+    // Clear all filters
+    document.getElementById('filterClear').addEventListener('click', () => {
+      document.getElementById('filterName').value = '';
+      document.getElementById('filterWorkspace').value = '';
+      document.getElementById('filterModel').value = '';
+      document.getElementById('filterDateFrom').value = '';
+      document.getElementById('filterDateTo').value = '';
+      applyFiltersAll();
+    });
+
+    // Sorting for cards: re-order card DOM elements after table sort
+    const origSortHandler = (th) => {
+      const col = th.dataset.column;
+      const type = th.dataset.type;
+      // After table sort, read the row order and reorder cards to match
+      setTimeout(() => {
+        const tbody = document.getElementById('conversationsBody');
+        const rowOrder = Array.from(tbody.querySelectorAll('tr')).map(r => r.dataset.index);
+        const cardParent = document.getElementById('cardsContainer');
+        rowOrder.forEach(idx => {
+          const card = cardParent.querySelector('[data-card-index="' + idx + '"]');
+          if (card) cardParent.appendChild(card);
+        });
+      }, 0);
+    };
+    document.querySelectorAll('th.sortable').forEach(th => {
+      th.addEventListener('click', () => origSortHandler(th));
+    });
+
+    // Scroll hint on table
+    const tableWrapper = document.getElementById('tableWrapper');
+    const scrollHint = document.getElementById('scrollHint');
+    const updateScrollHint = () => {
+      const maxScroll = tableWrapper.scrollWidth - tableWrapper.clientWidth;
+      if (maxScroll <= 2) {
+        scrollHint.classList.add('hidden');
+      } else {
+        scrollHint.classList.toggle('hidden', tableWrapper.scrollLeft >= maxScroll - 4);
+      }
+    };
+    tableWrapper.addEventListener('scroll', updateScrollHint, { passive: true });
+    window.addEventListener('resize', updateScrollHint);
+    // Run after layout is fully computed
+    updateScrollHint();
+    requestAnimationFrame(updateScrollHint);
+    window.addEventListener('load', updateScrollHint);
+
+    // View toggle
+    const btnTable = document.getElementById('viewTable');
+    const btnCards = document.getElementById('viewCards');
+    tableWrapper.classList.add('active');
+
+    const tableOuter = document.querySelector('.table-outer');
+    tableOuter.classList.add('active');
+
+    btnTable.addEventListener('click', () => {
+      btnTable.classList.add('active');
+      btnCards.classList.remove('active');
+      tableOuter.classList.add('active');
+      cardsContainer.classList.remove('active');
+      updateScrollHint();
+    });
+    btnCards.addEventListener('click', () => {
+      btnCards.classList.add('active');
+      btnTable.classList.remove('active');
+      cardsContainer.classList.add('active');
+      tableOuter.classList.remove('active');
+    });
+
+    // --- Modal ---
+    const overlay = document.getElementById('modalOverlay');
+    const modalTitle = document.getElementById('modalTitle');
+    const modalBody = document.getElementById('modalBody');
+
+    function openModal(idx) {
+      const c = data.conversations[idx];
+      if (!c) return;
+      const api = c.apiTokens || {};
+
+      modalTitle.textContent = c.name;
+
+      let apiStats = '';
+      if (data.hasApi) {
+        apiStats = \`
+          <div class="modal-stat"><div class="modal-stat-val">\${fmt(api.inputWithCache)}</div><div class="modal-stat-label">Input Tokens</div></div>
+          <div class="modal-stat"><div class="modal-stat-val">\${fmt(api.cacheRead)}</div><div class="modal-stat-label">Cache Read</div></div>
+          <div class="modal-stat"><div class="modal-stat-val">\${fmt(api.outputTokens)}</div><div class="modal-stat-label">Output Tokens</div></div>
+          <div class="modal-stat"><div class="modal-stat-val">\${fmt(api.totalTokens)}</div><div class="modal-stat-label">Total API Tokens</div></div>
+          <div class="modal-stat"><div class="modal-stat-val cost-val">$\${(api.cost || 0).toFixed(2)}</div><div class="modal-stat-label">Cost</div></div>
+          <div class="modal-stat"><div class="modal-stat-val">\${c.apiCallCount || 0}</div><div class="modal-stat-label">API Calls</div></div>
+        \`;
+      }
+
+      const fileLink = c.exportedFile
+        ? \`<a class="modal-file-link" href="chats/\${c.exportedFile}" target="_blank">&#128196; Open conversation log</a>\`
+        : '';
+
+      modalBody.innerHTML = \`
+        <div class="modal-meta">
+          <span class="conv-badge conv-badge-gray">\${c.datetime}</span>
+          <span class="conv-badge conv-badge-blue">\${c.workspace}</span>
+          <span class="conv-badge conv-badge-purple">\${c.model}</span>
+        </div>
+        <div class="modal-grid">
+          <div class="modal-stat"><div class="modal-stat-val">\${c.messages}</div><div class="modal-stat-label">Messages</div></div>
+          <div class="modal-stat"><div class="modal-stat-val">\${fmt(c.tokens)}</div><div class="modal-stat-label">Context Tokens</div></div>
+          <div class="modal-stat"><div class="modal-stat-val">\${c.linesChanged}</div><div class="modal-stat-label">Lines Changed</div></div>
+          <div class="modal-stat"><div class="modal-stat-val">\${c.files}</div><div class="modal-stat-label">Files</div></div>
+          \${apiStats}
+        </div>
+        \${fileLink}
+        <div class="modal-preview">
+          <div class="modal-preview-label">First message</div>
+          \${c.preview}
+        </div>
+      \`;
+
+      overlay.classList.add('open');
+    }
+
+    function closeModal() { overlay.classList.remove('open'); }
+
+    document.getElementById('modalClose').addEventListener('click', closeModal);
+    overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); });
+    document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });
+
+    // Click on table rows
+    document.getElementById('conversationsBody').addEventListener('click', (e) => {
+      const row = e.target.closest('tr');
+      if (row && row.dataset.index != null) openModal(parseInt(row.dataset.index));
+    });
+
+    // Click on cards
+    cardsContainer.addEventListener('click', (e) => {
+      const card = e.target.closest('.conv-card');
+      if (card && card.dataset.cardIndex != null) openModal(parseInt(card.dataset.cardIndex));
+    });
+
+    // Auto-shrink stat values that overflow their container
+    document.querySelectorAll('.stat-value').forEach(el => {
+      const parent = el.closest('.stat');
+      if (!parent) return;
+      let fontSize = 32;
+      while (el.scrollWidth > parent.clientWidth - 40 && fontSize > 16) {
+        fontSize -= 2;
+        el.style.fontSize = fontSize + 'px';
+      }
+    });
   </script>
 </body>
 </html>`;