npm - @qiaolei81/copilot-session-viewer - Versions diffs - 0.3.9 → 0.4.0 - Mend

@qiaolei81/copilot-session-viewer 0.3.9 → 0.4.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 (21) hide show

package/README.md +4 -4
package/dist/client/assets/index-DQ7OTJ0v.css +2 -0
package/dist/client/assets/index-maVEluks.js +77 -0
package/dist/client/assets/sessionStore-CW_Vbbsn.js +1 -0
package/dist/client/index.html +16 -0
package/dist/server.min.js +40 -41
package/dist/server.min.js.map +7 -0
package/package.json +22 -18
package/public/js/homepage.min.js +0 -35
package/public/js/session-detail.min.js +0 -751
package/public/js/telemetry-browser.min.js +0 -1
package/public/js/time-analyze.min.js +0 -496
package/public/vendor/marked.umd.min.js +0 -8
package/public/vendor/purify.min.js +0 -3
package/public/vendor/vue-virtual-scroller.css +0 -1
package/public/vendor/vue-virtual-scroller.min.js +0 -2
package/public/vendor/vue.global.prod.min.js +0 -19
package/views/index.ejs +0 -827
package/views/session-vue.ejs +0 -1705
package/views/telemetry-snippet.ejs +0 -26
package/views/time-analyze.ejs +0 -783

package/views/session-vue.ejs DELETED Viewed

@@ -1,1705 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Session <%= sessionId %> - Vue Virtual Scroller</title>
-  <!-- Vue 3 -->
-  <script src="/public/vendor/vue.global.prod.min.js"></script>
-  <!-- vue-virtual-scroller Vue 3 -->
-  <link rel="stylesheet" href="/public/vendor/vue-virtual-scroller.css">
-  <script src="/public/vendor/vue-virtual-scroller.min.js"></script>
-  <!-- Markdown rendering -->
-  <script src="/public/vendor/marked.umd.min.js"></script>
-  <!-- DOMPurify for XSS protection -->
-  <script src="/public/vendor/purify.min.js"></script>
-  <%- include('telemetry-snippet') %>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
-      background: #0d1117;
-      color: #c9d1d9;
-      line-height: 1.5;
-      overflow: hidden;
-    }
-    .container {
-      max-width: 100%;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-      padding: 0;
-    }
-    /* Focus indicators for accessibility */
-    button:focus-visible,
-    input:focus-visible,
-    .turn-btn:focus-visible,
-    .filter-dropdown-toggle:focus-visible {
-      outline: 2px solid #58a6ff;
-      outline-offset: 2px;
-      box-shadow: 0 0 0 4px rgba(88, 166, 255, 0.2);
-    }
-    /* Header */
-    .header {
-      padding: 16px 20px;
-      border-bottom: 1px solid #30363d;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-    .home-btn {
-      padding: 6px 12px;
-      background: #21262d;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      color: #c9d1d9;
-      text-decoration: none;
-      font-size: 14px;
-      transition: all 0.2s;
-    }
-    .home-btn:hover {
-      background: #30363d;
-      border-color: #58a6ff;
-    }
-    .time-analyze-btn {
-      padding: 6px 12px;
-      background: #1f6feb;
-      border: 1px solid #388bfd;
-      border-radius: 6px;
-      color: #fff;
-      text-decoration: none;
-      font-size: 14px;
-      font-weight: 500;
-      transition: all 0.2s;
-      white-space: nowrap;
-    }
-    .time-analyze-btn:hover {
-      background: #388bfd;
-      border-color: #58a6ff;
-    }
-    .export-btn {
-      padding: 6px 12px;
-      background: #238636;
-      border: 1px solid #2ea043;
-      border-radius: 6px;
-      color: #fff;
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s;
-      white-space: nowrap;
-    }
-    .export-btn:hover:not(:disabled) {
-      background: #2ea043;
-      border-color: #3fb950;
-    }
-    .export-btn:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-    h1 {
-      color: #58a6ff;
-      font-size: 20px;
-      margin: 0;
-      flex: 1;
-    }
-    /* Main layout */
-    .main-layout {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-    }
-    /* Sidebar */
-    .sidebar {
-      width: 320px;
-      flex-shrink: 0;
-      background: #161b22;
-      border-right: 1px solid #30363d;
-      overflow-y: auto;
-      padding: 16px;
-      transition: all 0.3s ease;
-    }
-    .sidebar.collapsed {
-      width: 0;
-      padding: 0;
-      border-right: none;
-      overflow: hidden;
-    }
-    /* Sidebar toggle */
-    .sidebar-toggle {
-      background: #21262d;
-      border: 1px solid #30363d;
-      border-radius: 4px;
-      color: #c9d1d9;
-      cursor: pointer;
-      padding: 4px 8px;
-      font-size: 14px;
-      transition: all 0.2s;
-    }
-    .sidebar-toggle:hover {
-      background: #30363d;
-      color: #58a6ff;
-    }
-    /* Sidebar sections */
-    .sidebar-section {
-      margin-bottom: 20px;
-    }
-    .sidebar-section-title {
-      font-size: 12px;
-      font-weight: 600;
-      color: #c9d1d9;
-      margin-bottom: 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    /* Session Info */
-    .session-info {
-      font-size: 13px;
-    }
-    /* Session info table */
-    .session-info-table {
-      width: 100%;
-      font-size: 12px;
-    }
-    .session-info-table td {
-      padding: 6px 8px;
-      border-bottom: 1px solid rgba(110, 118, 129, 0.15);
-      vertical-align: top;
-    }
-    .session-info-table td:first-child {
-      color: #8b949e;
-      font-weight: 500;
-      white-space: nowrap;
-      width: 85px;
-    }
-    .session-info-table td:last-child {
-      color: #c9d1d9;
-      word-break: break-all;
-    }
-    .session-info-table tr:last-child td {
-      border-bottom: none;
-    }
-    /* Source badges */
-    .source-badge {
-      display: inline-block;
-      font-size: 11px;
-      font-weight: 600;
-      padding: 2px 8px;
-      border-radius: 3px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    .source-cli {
-      background: rgba(35, 134, 54, 0.2);
-      color: #3fb950;
-      border: 1px solid rgba(35, 134, 54, 0.4);
-    }
-    .source-vscode {
-      background: rgba(31, 111, 235, 0.2);
-      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);
-    }
-    .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;
-      border: 1px solid rgba(0, 122, 204, 0.4);
-    }
-    /* Turn buttons */
-    .turn-buttons {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-    .turn-btn {
-      padding: 12px 10px;
-      min-height: 44px;
-      background: #21262d;
-      border: 1px solid #30363d;
-      border-radius: 4px;
-      color: #c9d1d9;
-      font-size: 13px;
-      cursor: pointer;
-      transition: all 0.2s;
-      text-align: left;
-      width: 100%;
-      margin-bottom: 10px;
-    }
-    .turn-btn-id {
-      font-weight: 600;
-      color: #c9d1d9;
-      font-size: 12px;
-    }
-    .turn-btn-message {
-      font-size: 12px;
-      color: #6e7681;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin-top: 2px;
-    }
-    .turn-btn:hover {
-      background: #30363d;
-      border-color: #58a6ff;
-    }
-    .turn-btn:hover .turn-btn-id {
-      color: #58a6ff;
-    }
-    .turn-btn.active {
-      background: #1f6feb;
-      border-color: #1f6feb;
-      color: #fff;
-    }
-    .turn-btn.active .turn-btn-id,
-    .turn-btn.active .turn-btn-message {
-      color: #fff;
-    }
-    /* Event filters — removed from sidebar, now in unified toolbar */
-    /* Session Tags */
-    .session-tags-container {
-      margin-top: 16px;
-    }
-    .tags-display {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      min-height: 28px;
-      align-items: flex-start;
-    }
-    .tag-label {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 10px;
-      border-radius: 12px;
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      cursor: default;
-      transition: opacity 0.2s;
-    }
-    .tag-label:hover {
-      opacity: 0.8;
-    }
-    .tag-remove {
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.7);
-      cursor: pointer;
-      font-size: 14px;
-      line-height: 1;
-      padding: 0;
-      margin-left: 2px;
-      transition: color 0.2s;
-    }
-    .tag-remove:hover {
-      color: #fff;
-    }
-    .tags-edit-btn {
-      background: none;
-      border: 1px solid #30363d;
-      border-radius: 4px;
-      color: #8b949e;
-      cursor: pointer;
-      padding: 4px 8px;
-      font-size: 12px;
-      transition: all 0.2s;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-    }
-    .tags-edit-btn:hover {
-      border-color: #58a6ff;
-      color: #58a6ff;
-    }
-    .tags-dropdown {
-      position: relative;
-      margin-top: 8px;
-    }
-    .tags-input-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 6px;
-      padding: 8px;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      min-height: 38px;
-    }
-    .tags-input-container:focus-within {
-      border-color: #58a6ff;
-    }
-    .tag-input-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 8px;
-      border-radius: 12px;
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-    }
-    .tag-input-chip button {
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.7);
-      cursor: pointer;
-      font-size: 12px;
-      padding: 0;
-      margin-left: 2px;
-    }
-    .tag-input-chip button:hover {
-      color: #fff;
-    }
-    .tags-text-input {
-      flex: 1;
-      min-width: 120px;
-      background: transparent;
-      border: none;
-      outline: none;
-      color: #c9d1d9;
-      font-size: 13px;
-      padding: 4px;
-    }
-    .tags-text-input::placeholder {
-      color: #6e7681;
-    }
-    .tags-autocomplete {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      margin-top: 4px;
-      max-height: 200px;
-      overflow-y: auto;
-      z-index: 100;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    }
-    .tags-autocomplete-item {
-      padding: 8px 12px;
-      font-size: 13px;
-      color: #c9d1d9;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-    .tags-autocomplete-item:hover {
-      background: rgba(88, 166, 255, 0.15);
-    }
-    .tags-autocomplete-item.selected {
-      background: rgba(88, 166, 255, 0.25);
-    }
-    .tags-error {
-      margin-top: 6px;
-      font-size: 12px;
-      color: #f85149;
-    }
-    /* Usage Section */
-    .usage-container {
-      font-size: 12px;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    .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;
-      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: baseline;
-      gap: 6px;
-    }
-    .usage-summary-total-unit {
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      color: #8b949e;
-    }
-    .usage-summary-caption {
-      margin-top: 6px;
-      font-size: 12px;
-      color: #8b949e;
-    }
-    .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: 10px;
-      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
-    }
-    .usage-section-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      margin-bottom: 10px;
-    }
-    .usage-section-title {
-      font-size: 11px;
-      font-weight: 600;
-      color: #8b949e;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      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: 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-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;
-      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-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: 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-metric-card-summary {
-      background: rgba(13, 17, 23, 0.42);
-      border-color: rgba(88, 166, 255, 0.14);
-    }
-    .usage-metric-label {
-      font-size: 10px;
-      font-weight: 700;
-      color: #8b949e;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-    .usage-metric-value {
-      font-size: 14px;
-      line-height: 1.2;
-      font-weight: 700;
-      color: #e6edf3;
-      overflow-wrap: anywhere;
-    }
-    .usage-metric-value-added {
-      color: #3fb950;
-    }
-    .usage-metric-value-removed {
-      color: #f85149;
-    }
-    /* Tool Calling Summary */
-    .tool-summary-list {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-    .tool-summary-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 3px 6px;
-      font-size: 12px;
-      border-radius: 3px;
-      overflow: hidden;
-    }
-    .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;
-    }
-    .tool-summary-name {
-      position: relative;
-      color: #c9d1d9;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      min-width: 0;
-      flex: 1;
-    }
-    .tool-summary-count {
-      position: relative;
-      color: #d29922;
-      font-weight: 600;
-      margin-left: 8px;
-      flex-shrink: 0;
-    }
-    /* Content */
-    .content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      position: relative;
-    }
-    .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;
-    }
-    .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;
-    }
-    .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: 6px;
-      padding: 4px 12px 8px;
-      flex-wrap: wrap;
-    }
-    .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;
-      align-items: center;
-      gap: 8px;
-      position: relative;
-    }
-    .subagent-dropdown-trigger {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      padding: 4px 10px;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      color: #c9d1d9;
-      font-size: 13px;
-      cursor: pointer;
-      max-width: 280px;
-    }
-    .subagent-dropdown-trigger:hover { border-color: #58a6ff; }
-    .subagent-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .subagent-trigger-arrow { font-size: 10px; opacity: 0.6; }
-    .subagent-dropdown-panel {
-      position: absolute;
-      top: calc(100% + 4px);
-      right: 0;
-      z-index: 100;
-      min-width: 320px;
-      max-width: 420px;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 8px;
-      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-      overflow: hidden;
-    }
-    .subagent-search-input {
-      width: 100%;
-      padding: 8px 12px;
-      background: #0d1117;
-      border: none;
-      border-bottom: 1px solid #30363d;
-      color: #c9d1d9;
-      font-size: 13px;
-      outline: none;
-      box-sizing: border-box;
-    }
-    .subagent-search-input::placeholder { color: #484f58; }
-    .subagent-dropdown-list {
-      max-height: 320px;
-      overflow-y: auto;
-    }
-    .subagent-dropdown-item {
-      display: flex;
-      align-items: flex-start;
-      gap: 8px;
-      padding: 8px 12px;
-      cursor: pointer;
-      border-bottom: 1px solid #21262d;
-    }
-    .subagent-dropdown-item:last-child { border-bottom: none; }
-    .subagent-dropdown-item:hover { background: #1c2129; }
-    .subagent-dropdown-item.active { background: rgba(88, 166, 255, 0.1); }
-    .subagent-item-color {
-      width: 4px;
-      min-height: 20px;
-      border-radius: 2px;
-      flex-shrink: 0;
-      margin-top: 2px;
-    }
-    .subagent-item-body { flex: 1; min-width: 0; }
-    .subagent-item-name {
-      font-size: 13px;
-      color: #c9d1d9;
-      font-weight: 500;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .subagent-item-meta {
-      display: flex;
-      gap: 6px;
-      margin-top: 2px;
-      flex-wrap: wrap;
-    }
-    .subagent-meta-tag {
-      font-size: 11px;
-      color: #8b949e;
-      background: #21262d;
-      padding: 1px 6px;
-      border-radius: 4px;
-    }
-    .subagent-meta-tag.dim { opacity: 0.7; }
-    .subagent-item-desc {
-      font-size: 11px;
-      color: #6e7681;
-      margin-top: 3px;
-      line-height: 1.4;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    .subagent-dropdown-empty {
-      padding: 12px;
-      text-align: center;
-      color: #484f58;
-      font-size: 13px;
-    }
-    .subagent-usage-badge {
-      font-size: 11px;
-      color: #7d8590;
-      white-space: nowrap;
-    }
-    .scroll-float-btns {
-      position: fixed;
-      bottom: 24px;
-      right: 24px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      z-index: 9999;
-    }
-    .scroll-edge-btn {
-      background: #21262d;
-      color: #c9d1d9;
-      border: 1px solid #30363d;
-      border-radius: 50%;
-      width: 32px;
-      height: 32px;
-      font-size: 13px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.4);
-      transition: background 0.15s, transform 0.1s, opacity 0.15s;
-      padding: 0;
-      opacity: 0.3;
-    }
-    .scroll-edge-btn:hover {
-      background: #388bfd;
-      border-color: #388bfd;
-      color: #fff;
-      transform: scale(1.1);
-      opacity: 1;
-    }
-    .search-input {
-      flex: 1;
-      min-width: 120px;
-      padding: 6px 12px;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      color: #c9d1d9;
-      font-size: 13px;
-      outline: none;
-      transition: border-color 0.2s;
-    }
-    .search-input:focus {
-      border-color: #58a6ff;
-      background: #0d1117;
-    }
-    .search-input::placeholder {
-      color: #6e7681;
-    }
-    /* Search highlight */
-    .search-highlight {
-      background: #ffd33d;
-      color: #1f2328;
-      padding: 1px 2px;
-      border-radius: 2px;
-      font-weight: 500;
-    }
-    /* Search result counter */
-    .search-result-count {
-      font-size: 12px;
-      color: #c9d1d9;
-      padding: 4px 8px;
-      background: #21262d;
-      border-radius: 4px;
-      white-space: nowrap;
-    }
-    /* Turn navigation in toolbar */
-    .turn-dropdown {
-      padding: 6px 12px;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      color: #c9d1d9;
-      font-size: 13px;
-      cursor: pointer;
-      min-width: 260px;
-      transition: border-color 0.2s;
-    }
-    .turn-dropdown:hover {
-      border-color: #58a6ff;
-    }
-    .turn-dropdown:focus {
-      outline: none;
-      border-color: #58a6ff;
-    }
-    .turn-dropdown optgroup {
-      font-weight: 600;
-      font-style: normal;
-      color: #e6edf3;
-      background: #21262d;
-      padding: 4px 0;
-    }
-    .turn-dropdown option {
-      font-weight: 400;
-      color: #c9d1d9;
-      background: #161b22;
-      padding: 4px 8px;
-    }
-    /* Virtual Scroller */
-    .vue-recycle-scroller {
-      flex: 1;
-      overflow-x: hidden !important;
-      padding-bottom: env(safe-area-inset-bottom, 0px);
-    }
-    .vue-recycle-scroller__item-wrapper {
-      overflow: visible !important;
-    }
-    /* Events */
-    .event {
-      background: #161b22;
-      border-left: 3px solid #30363d;
-      padding: 6px 12px 6px 12px;
-      margin: 0;
-      border-radius: 0;
-      font-size: 13px;
-    }
-    .event:nth-child(even) {
-      background: #1c2128;
-    }
-    /* Separator inside event (properly measured by virtual scroller) */
-    .event-separator {
-      height: 1px;
-      background: #0d1117;
-      margin: 12px 0 0 0;
-    }
-    .event.turn-boundary {
-      background: #1c2128;
-      border-left: 4px solid #8250df;
-      padding: 8px 12px;
-      box-shadow: 0 0 8px rgba(130, 80, 223, 0.15);
-    }
-    .event-header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
-    }
-    .event-badge {
-      padding: 2px 8px;
-      border-radius: 3px;
-      font-size: 12px;
-      font-weight: 600;
-      white-space: nowrap;
-      min-width: 90px;
-      text-align: center;
-      display: inline-block;
-      line-height: 1.4;
-    }
-    .badge-user { background: #1f6feb; color: #fff; }
-    .badge-assistant { background: #238636; color: #fff; }
-    .badge-reasoning { background: #a371f7; color: #fff; }
-    .badge-turn { background: #8250df; color: #fff; }
-    .badge-tool { background: #9e6a03; color: #fff; }
-    .badge-hook { background: #484f58; color: #c9d1d9; }
-    .badge-subagent { background: #8957e5; color: #fff; }
-    .badge-skill { background: #bf3989; color: #fff; }
-    .badge-session { background: #6e7681; color: #fff; }
-    .badge-system { background: #444c56; color: #adbac7; font-style: italic; }
-    .badge-truncation { background: #e5534b; color: #fff; }
-    .badge-compaction { background: #c2442d; color: #fff; }
-    .badge-error { background: #da3633; color: #fff; }
-    .badge-warning { background: #d29922; color: #000; }
-    .badge-info { background: #58a6ff; color: #fff; }
-    .event-content {
-      color: #c9d1d9;
-      text-align: left;
-      font-size: 13px;
-    }
-    /* Model change styling */
-    .model-change-content {
-      margin-top: 6px;
-    }
-    .model-change-text {
-      font-size: 13px;
-      color: #e6edf3;
-    }
-    .model-name {
-      color: #58a6ff;
-      font-weight: 600;
-      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-      font-size: 13px;
-    }
-    .model-arrow {
-      color: #7d8590;
-      margin: 0 8px;
-    }
-    /* Markdown styling */
-    .event-content code {
-      background: #161b22;
-      padding: 2px 6px;
-      border-radius: 3px;
-      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-      font-size: 12px;
-      color: #f0883e;
-    }
-    .event-content pre {
-      background: #161b22;
-      padding: 12px;
-      border-radius: 6px;
-      overflow-x: auto;
-      margin: 8px 0;
-      border: 1px solid #30363d;
-      font-size: 13px;
-    }
-    .event-content pre code {
-      background: none;
-      padding: 0;
-      color: #e6edf3;
-    }
-    .event-content a {
-      color: #58a6ff;
-      text-decoration: none;
-    }
-    .event-content a:hover {
-      text-decoration: underline;
-    }
-    .event-content ul, .event-content ol {
-      padding-left: 24px;
-      margin: 8px 0;
-    }
-    .event-content li {
-      margin: 4px 0;
-    }
-    .event-content blockquote {
-      border-left: 3px solid #30363d;
-      padding-left: 12px;
-      margin: 8px 0;
-      color: #c9d1d9;
-    }
-    .event-content strong {
-      color: #e6edf3;
-      font-weight: 600;
-    }
-    .event-content em {
-      color: #e6edf3;
-      font-style: italic;
-    }
-    .event-content h1, .event-content h2, .event-content h3,
-    .event-content h4, .event-content h5, .event-content h6 {
-      color: #e6edf3;
-      margin: 12px 0 6px 0;
-      font-weight: 600;
-    }
-    .event-content h1 { font-size: 16px; }
-    .event-content h2 { font-size: 15px; }
-    .event-content h3 { font-size: 14px; }
-    .event-content h4 { font-size: 13px; }
-    .event-content p {
-      margin: 6px 0;
-    }
-    /* Reasoning text: muted color — placed after .event-content markdown rules
-       so the higher-specificity selectors (0,2,1) override .event-content strong etc. (0,1,1) */
-    .reasoning-text-content.event-content,
-    .reasoning-text-content.event-content strong,
-    .reasoning-text-content.event-content em,
-    .reasoning-text-content.event-content h1,
-    .reasoning-text-content.event-content h2,
-    .reasoning-text-content.event-content h3,
-    .reasoning-text-content.event-content h4,
-    .reasoning-text-content.event-content h5,
-    .reasoning-text-content.event-content h6,
-    .reasoning-text-content.event-content code,
-    .reasoning-text-content.event-content a {
-      color: #7d8590;
-    }
-    /* Markdown table styling */
-    .event-content table {
-      border-collapse: collapse;
-      width: 100%;
-      margin: 12px 0;
-      background: #161b22;
-      border: 1px solid #30363d;
-      border-radius: 6px;
-      overflow: hidden;
-    }
-    .event-content th {
-      background: #21262d;
-      padding: 8px 12px;
-      text-align: left;
-      font-weight: 600;
-      color: #e6edf3;
-      border-bottom: 1px solid #30363d;
-    }
-    .event-content td {
-      padding: 8px 12px;
-      border-bottom: 1px solid #30363d;
-    }
-    .event-content tr:last-child td {
-      border-bottom: none;
-    }
-    .event-content tbody tr:hover {
-      background: rgba(110, 118, 129, 0.1);
-    }
-    .event-timestamp {
-      font-size: 12px;
-      color: #c9d1d9;
-    }
-    /* Tool calls */
-    .tool-list {
-      margin-top: 6px;
-      padding-left: 0;
-    }
-    .tool-item {
-      padding: 2px 0;
-    }
-    .tool-header-line {
-      color: #c9d1d9;
-      font-size: 13px;
-      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
-      cursor: pointer;
-      user-select: none;
-      line-height: 1.4;
-      display: flex;
-      align-items: baseline;
-      gap: 0;
-      padding: 2px 0;
-      flex-wrap: wrap;
-    }
-    .tool-header-line:hover {
-      color: #c9d1d9;
-    }
-    .tool-connector {
-      color: #6e7681;
-      margin-right: 0;
-      flex-shrink: 0;
-      line-height: 1;
-    }
-    .tool-expand-icon {
-      color: #6e7681;
-      margin: 0 4px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 12px;
-      height: 12px;
-      flex-shrink: 0;
-      line-height: 1;
-      transform: translateY(-1px);
-    }
-    .tool-name {
-      color: #f0883e;
-      flex-shrink: 0;
-      margin-right: 4px;
-    }
-    .tool-status-success {
-      color: #238636;
-    }
-    .tool-status-error {
-      color: #da3633;
-    }
-    .tool-status-running {
-      color: #d29922;
-    }
-    .tool-detail {
-      margin-top: 4px;
-      padding: 8px;
-      background: rgba(110, 118, 129, 0.05);
-      border-radius: 3px;
-      border: 1px solid #30363d;
-      font-size: 12px;
-    }
-    .tool-detail-section {
-      margin-bottom: 6px;
-    }
-    .tool-detail-section:last-child {
-      margin-bottom: 0;
-    }
-    .tool-detail-title {
-      color: #7d8590;
-      margin-bottom: 2px;
-      font-weight: 600;
-      font-size: 12px;
-    }
-    .tool-detail-content pre {
-      margin: 0;
-      padding: 4px 6px;
-      background: #0d1117;
-      border-radius: 3px;
-      overflow-x: auto;
-      max-height: 200px;
-      font-size: 12px;
-      line-height: 1.3;
-      color: #e6edf3;
-    }
-    .tool-timing-line {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px 16px;
-    }
-    .tool-timing-label {
-      color: #8b949e;
-      font-weight: 500;
-      margin-right: 3px;
-    }
-    /* Hook event styles */
-    .hook-content { font-size: 13px; }
-    .hook-summary { color: #8b949e; }
-    .hook-section { margin-top: 4px; }
-    .hook-section-header {
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 2px 0;
-      user-select: none;
-    }
-    .hook-section-header:hover { color: #c9d1d9; }
-    .hook-section-body {
-      margin-top: 2px;
-      padding: 6px 10px;
-      background: #161b22;
-      border: 1px solid #21262d;
-      border-radius: 4px;
-      overflow-x: auto;
-    }
-    .hook-section-body pre {
-      margin: 0;
-      font-size: 12px;
-      color: #c9d1d9;
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-    /* Turn divider - Design 3: Slack Style (居中对称) */
-    .turn-divider {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 12px;
-      margin: 0;
-      background: transparent;
-    }
-    .turn-divider::before,
-    .turn-divider::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: #30363d;
-    }
-    .turn-divider-text {
-      color: #7d8590;
-      font-size: 12px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.8px;
-      white-space: nowrap;
-      padding: 2px 8px;
-      background: #0d1117;
-      border-radius: 10px;
-      border: 1px solid #21262d;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
-    .turn-time { color: #58a6ff; font-weight: 500; text-transform: none; letter-spacing: 0; }
-    .turn-duration { color: #3fb950; font-weight: 500; text-transform: none; letter-spacing: 0; }
-    .turn-duration::before { content: '⏱ '; }
-    .turn-divider-line-left,
-    .turn-divider-line-right {
-      display: none;
-    }
-    /* Divider separator (for turn and subagent dividers) - HIDDEN */
-    .divider-separator {
-      display: none;
-    }
-    /* Subagent divider - Slack Style (unified color) */
-    .subagent-divider {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 12px;
-      margin: 0;
-      background: transparent;
-    }
-    .subagent-divider::before,
-    .subagent-divider::after {
-      content: '';
-      flex: 1;
-      height: 1px;
-      background: var(--sa-color, #58a6ff);
-    }
-    .subagent-divider-text {
-      font-size: 12px;
-      font-weight: 600;
-      white-space: nowrap;
-      letter-spacing: 0.8px;
-      padding: 2px 8px;
-      border-radius: 10px;
-      border: 1px solid #58a6ff;
-      margin: 0;
-      text-transform: uppercase;
-      color: #58a6ff;
-      background: rgba(88, 166, 255, 0.1);
-    }
-    .subagent-divider-model {
-      font-weight: 400;
-      opacity: 0.8;
-      font-size: 11px;
-    }
-    .subagent-divider-line-left,
-    .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; 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 */
-    .scroller-bottom-spacer {
-      height: max(env(safe-area-inset-bottom, 0px), 16px);
-      flex-shrink: 0;
-    }
-    /* Sidebar backdrop — hidden by default, shown via mobile media query */
-    .sidebar-backdrop {
-      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 */
-      .header {
-        padding: 8px 12px;
-        flex-wrap: wrap;
-        gap: 8px;
-      }
-      .header-title {
-        font-size: 13px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        max-width: calc(100vw - 80px);
-      }
-      .time-analyze-btn,
-      .share-btn {
-        padding: 5px 8px;
-        font-size: 12px;
-      }
-      /* Sidebar backdrop (mobile only) */
-      .sidebar-backdrop {
-        display: block;
-        position: fixed;
-        inset: 0;
-        background: rgba(0,0,0,0.5);
-        z-index: 999;
-      }
-      /* Sidebar: hidden by default on mobile, overlay when open */
-      .sidebar {
-        position: fixed;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 280px !important;
-        z-index: 1000;
-        box-shadow: 4px 0 16px rgba(0,0,0,0.6);
-        transform: translateX(-100%);
-        transition: transform 0.3s ease;
-      }
-      .sidebar:not(.collapsed) {
-        transform: translateX(0);
-      }
-      .sidebar.collapsed {
-        transform: translateX(-100%);
-        width: 280px !important;
-        padding: 16px !important;
-        border-right: 1px solid #30363d !important;
-        overflow-y: auto !important;
-      }
-      /* Content: full width */
-      .content {
-        width: 100%;
-      }
-      /* Toolbar: unified responsive layout */
-      .filter-bar-row {
-        flex-wrap: wrap;
-        gap: 4px;
-        padding: 6px 8px;
-      }
-      .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;
-      }
-      .subagent-dropdown-trigger {
-        max-width: 160px;
-        font-size: 12px;
-      }
-      .subagent-dropdown-panel {
-        min-width: 260px;
-        max-width: calc(100vw - 32px);
-        right: 0;
-        left: auto;
-      }
-      .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 {
-        bottom: 16px;
-        right: 12px;
-      }
-      /* Prevent content from stretching wider than viewport */
-      .event-card {
-        max-width: 100%;
-        overflow-x: hidden;
-      }
-      .event-content pre {
-        max-width: calc(100vw - 32px);
-      }
-      .tool-command {
-        word-break: break-all;
-      }
-      /* Tool command text wraps on mobile */
-      .tool-header-line {
-        overflow-wrap: anywhere;
-        word-break: break-all;
-      }
-      /* Extra bottom padding for mobile browser nav bar */
-      .vue-recycle-scroller {
-        padding-bottom: max(env(safe-area-inset-bottom, 0px), 80px);
-      }
-      .scroller-bottom-spacer {
-        height: max(env(safe-area-inset-bottom, 0px), 100px);
-      }
-      .scroll-edge-btn {
-        width: 28px;
-        height: 28px;
-        font-size: 12px;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-  <script>
-    window.__PAGE_DATA = {
-      sessionId: "<%= sessionId %>",
-      events: <%- JSON.stringify(events) %>,
-      metadata: <%- JSON.stringify(metadata) %>
-    };
-  </script>
-  <script src="/public/js/session-detail.min.js"></script>
-</body>
-</html>