@qiaolei81/copilot-session-viewer 0.3.7 → 0.3.8

package/views/session-vue.ejs

@@ -129,8 +129,6 @@
       overflow-y: auto;
       padding: 16px;
       transition: all 0.3s ease;
-      position: relative;
-      z-index: 10;
     }
     .sidebar.collapsed {
       width: 0;
@@ -172,18 +170,6 @@
     .session-info {
       font-size: 13px;
     }
-    .session-summary-block {
-      color: #e6edf3;
-      font-size: 13px;
-      line-height: 1.5;
-      margin-bottom: 12px;
-      word-break: break-word;
-      overflow-wrap: anywhere;
-      display: -webkit-box;
-      -webkit-line-clamp: 5;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
     
     /* Session info table */
     .session-info-table {
@@ -244,6 +230,11 @@
       color: #a78bdb;
       border: 1px solid rgba(138, 102, 204, 0.4);
     }
+    .source-modernize {
+      background: rgba(76, 175, 80, 0.2);
+      color: #66bb6a;
+      border: 1px solid rgba(76, 175, 80, 0.4);
+    }
     .source-vscode {
       background: rgba(0, 122, 204, 0.2);
       color: #4fc3f7;
@@ -300,38 +291,7 @@
       color: #fff;
     }
     
-    /* Event filters */
-    .event-filters {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-    .filter-btn {
-      padding: 6px 10px;
-      background: #21262d;
-      border: 1px solid #30363d;
-      border-radius: 4px;
-      color: #c9d1d9;
-      cursor: pointer;
-      font-size: 13px;
-      transition: all 0.2s;
-      text-align: left;
-      width: 100%;
-    }
-    .filter-btn:not(:disabled):hover { 
-      background: #30363d; 
-    }
-    .filter-btn.active {
-      background: #1f6feb;
-      border-color: #1f6feb;
-      color: #fff;
-    }
-    .filter-btn:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-      background: #161b22;
-      color: #6e7681;
-    }
+    /* Event filters — removed from sidebar, now in unified toolbar */
 
     /* Session Tags */
     .session-tags-container {
@@ -478,39 +438,71 @@
     /* Usage Section */
     .usage-container {
       font-size: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
     }
-    .usage-compact {
-      padding: 8px;
-      background: #21262d;
-      border: 1px solid #30363d;
-      border-radius: 4px;
+    .usage-summary {
+      padding: 14px;
+      background: linear-gradient(180deg, rgba(88, 166, 255, 0.16) 0%, rgba(22, 27, 34, 0.94) 100%);
+      border: 1px solid rgba(88, 166, 255, 0.22);
+      border-radius: 10px;
       color: #c9d1d9;
-      cursor: pointer;
-      transition: all 0.2s;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    }
+    .usage-summary-eyebrow {
+      font-size: 10px;
+      font-weight: 700;
+      color: #8b949e;
+      text-transform: uppercase;
+      letter-spacing: 0.7px;
+      margin-bottom: 6px;
+    }
+    .usage-summary-total {
+      font-size: 24px;
+      line-height: 1;
+      font-weight: 700;
+      color: #e6edf3;
       display: flex;
-      align-items: center;
-      justify-content: space-between;
+      align-items: baseline;
+      gap: 6px;
     }
-    .usage-compact:hover {
-      background: #30363d;
-      border-color: #58a6ff;
+    .usage-summary-total-unit {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: #8b949e;
     }
-    .usage-expand-icon {
+    .usage-summary-caption {
+      margin-top: 6px;
+      font-size: 12px;
       color: #8b949e;
-      font-size: 10px;
     }
-    .usage-expanded {
+    .usage-summary-metrics {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 8px;
       margin-top: 12px;
+    }
+    .usage-expanded {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .usage-section {
       padding: 12px;
       background: rgba(110, 118, 129, 0.05);
       border: 1px solid #30363d;
-      border-radius: 6px;
-    }
-    .usage-section {
-      margin-bottom: 12px;
+      border-radius: 10px;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
     }
-    .usage-section:last-child {
-      margin-bottom: 0;
+    .usage-section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin-bottom: 10px;
     }
     .usage-section-title {
       font-size: 11px;
@@ -518,74 +510,176 @@
       color: #8b949e;
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 8px;
+      margin: 0;
+    }
+    .usage-section-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 24px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: rgba(88, 166, 255, 0.12);
+      border: 1px solid rgba(88, 166, 255, 0.22);
+      color: #79c0ff;
+      font-size: 10px;
+      font-weight: 700;
+    }
+    .usage-model-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
     }
     .usage-model {
-      padding: 8px;
-      background: #161b22;
-      border-radius: 4px;
-      margin-bottom: 6px;
+      padding: 10px;
+      background: linear-gradient(180deg, rgba(13, 17, 23, 0.96) 0%, rgba(22, 27, 34, 0.96) 100%);
+      border: 1px solid rgba(48, 54, 61, 0.9);
+      border-radius: 8px;
     }
-    .usage-model:last-child {
-      margin-bottom: 0;
+    .usage-model-header {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      gap: 8px;
+      margin-bottom: 10px;
     }
     .usage-model-name {
+      display: block;
+      max-width: 100%;
       font-size: 11px;
       font-weight: 600;
-      color: #58a6ff;
-      margin-bottom: 4px;
+      line-height: 1.35;
+      color: #79c0ff;
       font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+      white-space: nowrap;
+      word-break: normal;
+      overflow-wrap: normal;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(110, 118, 129, 0.55) transparent;
+      padding-bottom: 2px;
     }
-    .usage-model-details {
-      font-size: 12px;
+    .usage-model-name::-webkit-scrollbar {
+      height: 4px;
+    }
+    .usage-model-name::-webkit-scrollbar-thumb {
+      background: rgba(110, 118, 129, 0.55);
+      border-radius: 999px;
+    }
+    .usage-model-name::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .usage-model-meta {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      gap: 6px;
+    }
+    .usage-meta-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: rgba(110, 118, 129, 0.12);
+      border: 1px solid rgba(110, 118, 129, 0.2);
       color: #c9d1d9;
+      font-size: 10px;
+      font-weight: 600;
+    }
+    .usage-meta-pill-premium {
+      color: #d29922;
+      border-color: rgba(210, 153, 34, 0.25);
+      background: rgba(210, 153, 34, 0.12);
+    }
+    .usage-meta-pill-cache {
+      color: #3fb950;
+      border-color: rgba(63, 185, 80, 0.25);
+      background: rgba(63, 185, 80, 0.12);
+    }
+    .usage-metric-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 8px;
+    }
+    .usage-metric-grid-compact {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .usage-metric-card {
       display: flex;
       flex-direction: column;
-      gap: 2px;
+      gap: 4px;
+      min-width: 0;
+      padding: 9px 10px;
+      border-radius: 8px;
+      border: 1px solid rgba(48, 54, 61, 0.8);
+      background: rgba(13, 17, 23, 0.5);
     }
-    .usage-model-details > div {
-      display: flex;
-      gap: 8px;
-      align-items: center;
+    .usage-metric-card-summary {
+      background: rgba(13, 17, 23, 0.42);
+      border-color: rgba(88, 166, 255, 0.14);
     }
-    .usage-token-label {
+    .usage-metric-label {
+      font-size: 10px;
+      font-weight: 700;
       color: #8b949e;
-      font-weight: 500;
-      min-width: 40px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
     }
-    .usage-cache-ratio {
+    .usage-metric-value {
+      font-size: 14px;
+      line-height: 1.2;
+      font-weight: 700;
+      color: #e6edf3;
+      overflow-wrap: anywhere;
+    }
+    .usage-metric-value-added {
       color: #3fb950;
-      font-weight: 600;
     }
-    .usage-context {
-      font-size: 12px;
-      color: #c9d1d9;
+    .usage-metric-value-removed {
+      color: #f85149;
+    }
+
+    /* Tool Calling Summary */
+    .tool-summary-list {
       display: flex;
       flex-direction: column;
       gap: 4px;
     }
-    .usage-context > div {
+    .tool-summary-item {
+      position: relative;
       display: flex;
-      gap: 8px;
+      justify-content: space-between;
       align-items: center;
-    }
-    .usage-code-changes {
+      padding: 3px 6px;
       font-size: 12px;
-      color: #c9d1d9;
-      display: flex;
-      gap: 8px;
-      align-items: center;
+      border-radius: 3px;
+      overflow: hidden;
     }
-    .usage-code-added {
-      color: #3fb950;
-      font-weight: 600;
+    .tool-summary-bar {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      background: rgba(158, 106, 3, 0.15);
+      border-radius: 3px;
+      transition: width 0.3s ease;
     }
-    .usage-code-removed {
-      color: #f85149;
-      font-weight: 600;
+    .tool-summary-name {
+      position: relative;
+      color: #c9d1d9;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      flex: 1;
     }
-    .usage-code-files {
-      color: #8b949e;
+    .tool-summary-count {
+      position: relative;
+      color: #d29922;
+      font-weight: 600;
+      margin-left: 8px;
+      flex-shrink: 0;
     }
 
     /* Content */
@@ -597,31 +691,186 @@
       position: relative;
     }
     
-    .scroll-indicator {
+    .unified-filter-bar {
+      background: #0d1117;
+      border-bottom: 1px solid #30363d;
+      flex-shrink: 0;
+    }
+    .filter-bar-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
       padding: 8px 12px;
+      flex-wrap: wrap;
+    }
+    .filter-bar-search {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex: 1;
+      min-width: 160px;
+    }
+    .filter-bar-divider {
+      width: 1px;
+      height: 20px;
+      background: #30363d;
+      flex-shrink: 0;
+    }
+    /* Event type dropdown wrapper */
+    .filter-type-wrapper {
+      position: relative;
+    }
+    .filter-type-toggle {
+      padding: 4px 10px;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      color: #c9d1d9;
+      font-size: 13px;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: all 0.2s;
+    }
+    .filter-type-toggle:hover {
+      border-color: #58a6ff;
       background: #0d1117;
+    }
+    .filter-type-toggle.active {
+      border-color: #58a6ff;
+      color: #58a6ff;
+      background: rgba(88, 166, 255, 0.1);
+    }
+    .filter-type-menu {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+      min-width: 250px;
+      z-index: 1000;
+    }
+    .filter-type-menu-header {
+      padding: 8px 12px;
       border-bottom: 1px solid #30363d;
       font-size: 12px;
+      font-weight: 600;
       color: #c9d1d9;
-      flex-shrink: 0;
+    }
+    .filter-type-menu-options {
+      max-height: 300px;
+      overflow-y: auto;
+      padding: 4px 0;
+    }
+    .filter-type-menu-item {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding: 6px 12px;
+      cursor: pointer;
+      transition: background 0.15s;
+      font-size: 13px;
+      color: #c9d1d9;
     }
-    
-    .content-toolbar-left {
+    .filter-type-menu-item:hover {
+      background: rgba(88, 166, 255, 0.1);
+    }
+    .filter-type-menu-item.active {
+      background: rgba(88, 166, 255, 0.2);
+      color: #58a6ff;
+    }
+    .filter-type-menu-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .filter-type-menu-count {
+      color: #7d8590;
+      font-size: 12px;
+      margin-left: 8px;
+      flex-shrink: 0;
+    }
+    /* Active filter chips bar */
+    .active-filters-bar {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 6px;
+      padding: 4px 12px 8px;
+      flex-wrap: wrap;
     }
-    
-    .content-toolbar-center {
-      flex: 1;
+    .filter-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      background: rgba(88, 166, 255, 0.15);
+      border: 1px solid rgba(88, 166, 255, 0.3);
+      border-radius: 12px;
+      font-size: 12px;
+      color: #58a6ff;
+      white-space: nowrap;
+    }
+    .filter-chip-remove {
+      background: none;
+      border: none;
+      color: #58a6ff;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 0 2px;
+      line-height: 1;
+      opacity: 0.7;
+      transition: opacity 0.15s;
+    }
+    .filter-chip-remove:hover {
+      opacity: 1;
+    }
+    .clear-all-filters-btn {
+      background: none;
+      border: none;
+      color: #f85149;
+      cursor: pointer;
+      font-size: 12px;
+      padding: 2px 6px;
+      border-radius: 3px;
+      transition: background 0.2s;
+    }
+    .clear-all-filters-btn:hover {
+      background: rgba(248, 81, 73, 0.1);
+    }
+
+    .subagent-selector {
       display: flex;
-      justify-content: center;
       align-items: center;
-      gap: 12px;
-      padding: 0 16px;
+      gap: 8px;
+    }
+
+    .subagent-dropdown {
+      padding: 4px 8px;
+      background: #161b22;
+      border: 1px solid #30363d;
+      border-radius: 6px;
+      color: #c9d1d9;
+      font-size: 13px;
+      cursor: pointer;
+      max-width: 220px;
+    }
+
+    .subagent-dropdown:hover {
+      border-color: #58a6ff;
+    }
+
+    .subagent-dropdown:focus {
+      outline: none;
+      border-color: #58a6ff;
+      box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.3);
+    }
+
+    .subagent-usage-badge {
+      font-size: 11px;
+      color: #7d8590;
+      white-space: nowrap;
     }
     
     .scroll-float-btns {
@@ -658,7 +907,8 @@
       opacity: 1;
     }
     .search-input {
-      width: 300px;
+      flex: 1;
+      min-width: 120px;
       padding: 6px 12px;
       background: #161b22;
       border: 1px solid #30363d;
@@ -689,7 +939,6 @@
     
     /* Search result counter */
     .search-result-count {
-      margin-left: 12px;
       font-size: 12px;
       color: #c9d1d9;
       padding: 4px 8px;
@@ -698,120 +947,6 @@
       white-space: nowrap;
     }
     
-    .filter-dropdown {
-      position: relative;
-    }
-    
-    .filter-dropdown-toggle {
-      padding: 12px 16px;
-      min-height: 44px;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      color: #c9d1d9;
-      font-size: 13px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      transition: all 0.2s;
-      white-space: nowrap;
-    }
-    
-    .filter-dropdown-toggle:hover {
-      border-color: #58a6ff;
-      background: #0d1117;
-    }
-    
-    .filter-count {
-      background: #58a6ff;
-      color: #0d1117;
-      padding: 2px 6px;
-      border-radius: 10px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    
-    .filter-dropdown-menu {
-      position: absolute;
-      top: calc(100% + 4px);
-      right: 0;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
-      min-width: 250px;
-      z-index: 1000;
-    }
-    
-    .filter-dropdown-header {
-      padding: 8px 12px;
-      border-bottom: 1px solid #30363d;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 12px;
-      font-weight: 600;
-      color: #c9d1d9;
-    }
-    
-    .clear-filters-btn {
-      background: none;
-      border: none;
-      color: #58a6ff;
-      cursor: pointer;
-      font-size: 12px;
-      padding: 2px 6px;
-      border-radius: 3px;
-      transition: background 0.2s;
-    }
-    
-    .clear-filters-btn:hover {
-      background: rgba(88, 166, 255, 0.1);
-    }
-    
-    .filter-options {
-      max-height: 300px;
-      overflow-y: auto;
-      padding: 4px 0;
-    }
-    
-    .filter-option {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 6px 12px;
-      cursor: pointer;
-      transition: background 0.2s;
-      font-size: 13px;
-    }
-    
-    .filter-option:hover {
-      background: rgba(88, 166, 255, 0.1);
-    }
-    
-    .filter-option input[type="checkbox"] {
-      cursor: pointer;
-      accent-color: #58a6ff;
-    }
-    
-    .filter-option-label {
-      flex: 1;
-      color: #c9d1d9;
-    }
-    
-    .filter-option-count {
-      color: #7d8590;
-      font-size: 12px;
-    }
-    
-    .content-toolbar-right {
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      gap: 8px;
-    }
-    
     /* Turn navigation in toolbar */
     .turn-dropdown {
       padding: 6px 12px;
@@ -1234,7 +1369,8 @@
       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; }
+    .subagent-owner-tag { font-size: 11px; padding: 1px 6px; border-radius: 8px; border: 1px solid; border-color: var(--subagent-color, #58a6ff); color: var(--subagent-color, #58a6ff); white-space: nowrap; opacity: 0.85; cursor: pointer; transition: opacity 0.15s; }
+    .subagent-owner-tag:hover { opacity: 1; background: var(--subagent-hover-bg, rgba(88, 166, 255, 0.15)); }
     .subagent-name-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid; white-space: nowrap; font-weight: 600; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
 
     /* Bottom spacer for last event visibility */
@@ -1248,6 +1384,23 @@
       display: none;
     }
 
+    /* ── Tablet responsive ─────────────────────────────────── */
+    @media (max-width: 768px) {
+      .filter-bar-search {
+        flex: 1 1 100%;
+        order: 1;
+      }
+      .filter-bar-row {
+        flex-wrap: wrap;
+      }
+      .filter-bar-divider {
+        display: none;
+      }
+      .subagent-usage-badge {
+        display: none;
+      }
+    }
+
     /* ── Mobile responsive ────────────────────────────────────── */
     @media (max-width: 640px) {
       /* Header: smaller, wrap if needed */
@@ -1306,25 +1459,64 @@
         width: 100%;
       }
 
-      /* Toolbar: stack if narrow */
-      .scroll-indicator {
+      /* Toolbar: unified responsive layout */
+      .filter-bar-row {
         flex-wrap: wrap;
         gap: 4px;
         padding: 6px 8px;
       }
-      .content-toolbar-left,
-      .content-toolbar-right {
-        gap: 4px;
+      .filter-bar-search {
+        flex: 1 1 100%;
+        order: 1;
+      }
+      .sidebar-toggle {
+        order: 0;
+      }
+      .filter-bar-divider {
+        display: none;
+      }
+      .turn-dropdown {
+        order: 2;
+        flex: 1;
+        min-width: 0;
+        max-width: 140px;
+        font-size: 12px;
+      }
+      .subagent-selector {
+        order: 3;
+      }
+      .filter-type-wrapper {
+        order: 4;
       }
       .search-input {
         flex: 1;
         min-width: 0;
         font-size: 12px;
       }
-      .turn-dropdown {
-        max-width: 140px;
+      .subagent-dropdown {
+        max-width: 130px;
         font-size: 12px;
       }
+      .subagent-usage-badge {
+        display: none;
+      }
+
+      .usage-summary {
+        padding: 12px;
+      }
+      .usage-summary-total {
+        font-size: 20px;
+      }
+      .usage-summary-metrics,
+      .usage-metric-grid-compact {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .usage-model-header {
+        gap: 6px;
+      }
+      .usage-model-meta {
+        justify-content: flex-start;
+      }
 
       /* Float buttons: slightly smaller, keep fixed */
       .scroll-float-btns {