npm - claude-code-watch - Versions diffs - 0.1.5 → 0.2.0 - Mend

claude-code-watch 0.1.5 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/public/index.html CHANGED Viewed

@@ -6,436 +6,7 @@
 <title>claude-watch</title>
 <link rel="icon" type="image/svg+xml" href="favicon.svg">
 <link rel="stylesheet" href="vendor/github-dark.min.css">
-<style>
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-:root {
-  --bg: #111827;
-  --bg2: #1f2937;
-  --bg3: #374151;
-  --border: #4b5563;
-  --text: #d1d5db;
-  --dim: #6b7280;
-  --white: #f9fafb;
-  --purple: #7c3aed;
-  --purple2: #5b21b6;
-  --blue: #3b82f6;
-  --magenta: #c084fc;
-  --yellow: #fbbf24;
-  --yellow2: #92400e;
-  --green: #34d399;
-  --cyan: #22d3ee;
-  --red: #f87171;
-  --red2: #dc2626;
-  --gray: #9ca3af;
-  --orange: #fb923c;
-}
-:root[data-theme="light"] {
-  --bg: #f8f9fa;
-  --bg2: #e9ecef;
-  --bg3: #ced4da;
-  --border: #adb5bd;
-  --text: #495057;
-  --dim: #868e96;
-  --white: #212529;
-  --purple: #6741d9;
-  --purple2: #5b21b6;
-  --blue: #2563eb;
-  --magenta: #9333ea;
-  --yellow: #d97706;
-  --yellow2: #92400e;
-  --green: #059669;
-  --cyan: #0891b2;
-  --red: #dc2626;
-  --red2: #b91c1c;
-  --gray: #6b7280;
-  --orange: #ea580c;
-}
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-/* ── Header ── */
-#header {
-  height: 32px;
-  background: var(--bg3);
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--white);
-  flex-shrink: 0;
-  user-select: none;
-}
-#header .sep { color: var(--dim); margin: 0 4px; }
-#header .auto { margin-left: auto; display: flex; gap: 4px; align-items: center; }
-.btn {
-  position: relative;
-  display: inline-flex; align-items: center; gap: 3px;
-  padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border);
-  background: var(--bg2); color: var(--text); cursor: pointer;
-  font-family: inherit; font-size: 11px; line-height: 1.5;
-  white-space: nowrap; user-select: none; transition: all 0.15s;
-}
-.btn[data-tooltip]:hover::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  top: calc(100% + 5px);
-  left: 0;
-  background: var(--bg2); color: var(--white);
-  padding: 2px 8px; border-radius: 4px;
-  font-size: 10px; white-space: nowrap; z-index: 9999;
-  pointer-events: none; border: 1px solid var(--border);
-  font-family: inherit; line-height: 1.4;
-}
-.btn:hover { background: var(--bg3); border-color: var(--dim); }
-.btn.on { background: var(--purple); border-color: var(--purple); color: var(--white); }
-.btn.on:hover { background: var(--purple2); }
-.btn.on:hover::after { background: var(--purple2); }
-.btn.danger { border-color: var(--red2); color: var(--red); }
-.btn.danger:hover { background: var(--red2); color: var(--white); }
-.btn.accent { border-color: var(--yellow2); color: var(--yellow); }
-.btn:disabled { opacity: 0.3; cursor: not-allowed; }
-.btn-icon { padding: 2px 6px; min-width: 28px; justify-content: center; }
-/* ── Main area ── */
-#main {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-/* ── Tree panel ── */
-#tree-panel {
-  width: 30%; min-width: 180px; max-width: 60%;
-  border-right: 1px solid var(--border);
-  background: var(--bg2);
-  overflow: hidden;
-  display: flex; flex-direction: column;
-  flex-shrink: 0;
-  position: relative;
-}
-#tree-panel.hidden { display: none; }
-#tree-resize-handle {
-  position: absolute; right: -3px; top: 0; bottom: 0;
-  width: 6px; cursor: col-resize; z-index: 10;
-}
-#tree-resize-handle:hover, #tree-resize-handle.active { background: var(--purple); }
-#tree-toolbar {
-  display: flex; gap: 4px; padding: 4px 6px;
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0; flex-wrap: wrap;
-}
-#tree-content {
-  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 0;
-}
-/* ── Tree node styles ── */
-.tree-row {
-  display: flex; align-items: flex-start;
-}
-.tree-row-session {
-  margin-top: 6px;
-}
-.tree-row-folder {
-  margin-top: 6px;
-}
-.folder-node {
-  font-size: 13px; font-weight: 500; color: var(--yellow);
-}
-.tree-content {
-  flex: 1; min-width: 0;
-}
-.tree-content:hover { background: rgba(255,255,255,0.05); }
-.tree-row.selected > .tree-content { background: rgba(124,58,237,0.3); }
-.tree-content.dim { opacity: 0.4; }
-.tree-node {
-  display: flex; align-items: center;
-  padding: 3px 2px 3px 0;
-  cursor: pointer; white-space: nowrap; gap: 4px;
-  overflow: hidden;
-}
-.tree-prefix { color: var(--dim); font-size: 12px; flex-shrink: 0; letter-spacing: 0; font-family: monospace; white-space: pre; }
-.tree-activity {
-  font-size: 10px; color: var(--dim); white-space: pre;
-  overflow: hidden; line-height: 1.2;
-  padding: 0 2px 2px; cursor: pointer;
-}
-.tree-activity .act-text {
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.tree-node .ctx-pct { font-size: 10px; margin-left: 4px; flex-shrink: 0; }
-.tree-node .ctx-pct.warn { color: var(--yellow); }
-.tree-node .ctx-pct.danger { color: var(--red); }
-.tree-node .active-dot { flex-shrink: 0; }
-.tree-node .active-dot.on { color: var(--green); text-shadow: 0 0 6px var(--green); }
-.tree-node .active-dot.off { color: #555; opacity: 1; }
-.tree-node .tree-agent-id { font-size: 10px; color: var(--dim); margin-left: 2px; font-family: monospace; }
-.tree-node .session-prefix {
-  background: rgba(255,255,255,0.08);
-  padding: 0 3px; border-radius: 3px; flex-shrink: 0; font-family: monospace;
-  letter-spacing: 0.5px; vertical-align: middle; font-weight: 600;
-  position: relative; cursor: pointer;
-}
-.session-id-tip {
-  position: fixed; z-index: 10000;
-  background: var(--bg2); border: 1px solid var(--border); border-radius: 4px;
-  padding: 4px 8px; font-size: 11px; white-space: nowrap; color: var(--text);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4); display: flex; align-items: center; gap: 6px;
-}
-.session-id-tip code { font-family: monospace; user-select: all; color: var(--white); }
-.session-id-tip .tip-copy-btn {
-  background: var(--bg3); border: 1px solid var(--border); border-radius: 3px;
-  color: var(--text); font-size: 10px; padding: 1px 5px; cursor: pointer;
-}
-.session-id-tip .tip-copy-btn:hover { background: var(--accent); color: #fff; }
-.tree-actions { display: none; gap: 2px; padding-right: 4px; }
-.tree-row:hover .tree-actions { display: flex; }
-.tree-row.selected>.tree-actions { display: flex; }
-/* ── Tokens page ── */
-#tokens-page { flex: 1; display: flex; flex-direction: column; overflow-y: auto; padding: 20px 24px; gap: 16px; background: var(--bg); }
-.tp-top { display: flex; gap: 16px; }
-.tp-left { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
-.tp-right { flex: 1; display: flex; flex-direction: column; gap: 12px; }
-.tp-box { background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
-.tp-total-label { font-size: 11px; color: var(--dim); text-transform: uppercase; margin-bottom: 2px; }
-.tp-total-value { font-size: 22px; font-weight: 700; color: var(--white); font-family: monospace; }
-.tp-total-sub { font-size: 10px; color: var(--dim); margin-top: 2px; }
-.tp-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
-.tp-stat { padding: 8px 10px; background: var(--bg3); border-radius: 6px; }
-.tp-stat .tp-s-l { font-size: 10px; color: var(--dim); }
-.tp-stat .tp-s-v { font-size: 13px; font-weight: 600; color: var(--white); font-family: monospace; }
-.tp-rank-title { font-size: 12px; color: var(--dim); font-weight: 600; margin-bottom: 8px; }
-.tp-rank-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
-.tp-rank-num { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg3); font-size: 10px; font-weight: 600; color: var(--dim); flex-shrink: 0; }
-.tp-rank-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-.tp-rank-name { font-size: 12px; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.tp-rank-pct { font-size: 12px; font-weight: 600; color: var(--white); font-family: monospace; flex-shrink: 0; }
-.tp-footer-stats { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--dim); }
-.tp-footer-stats .tp-fv { color: var(--text); font-family: monospace; }
-.tp-h3 { font-size: 12px; color: var(--dim); font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
-/* ── Heatmap ── */
-.tp-heatmap { overflow-x: auto; }
-.tp-heatmap-inner { display: inline-flex; flex-direction: column; gap: 2px; }
-.tp-hm-months { display: flex; gap: 0; font-size: 10px; color: var(--dim); margin-bottom: 2px; padding-left: 28px; }
-.tp-hm-row { display: flex; align-items: center; gap: 2px; }
-.tp-hm-day-label { width: 24px; font-size: 10px; color: var(--dim); text-align: right; flex-shrink: 0; }
-.tp-hm-cell { width: 12px; height: 12px; border-radius: 2px; transition: transform 0.15s; cursor: pointer; position: relative; }
-.tp-hm-cell:hover { transform: scale(1.6); z-index: 10; }
-.tp-hm-cell[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg2); color: var(--white); padding: 2px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 100; border: 1px solid var(--border); pointer-events: none; }
-.tp-hm-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--dim); margin-top: 6px; justify-content: flex-end; }
-.tp-hm-legend-cell { width: 12px; height: 12px; border-radius: 2px; }
-/* ── Trend bars ── */
-.tp-trend-bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; position: relative; padding-bottom: 20px; }
-.tp-trend-bar-wrap { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; }
-.tp-trend-bar { position: relative; border-radius: 3px 3px 0 0; transition: all 0.15s; cursor: pointer; min-height: 4px; }
-.tp-trend-bar:hover { filter: brightness(1.3); }
-.tp-trend-bar:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--bg2); color: var(--white); padding: 2px 8px; border-radius: 4px; font-size: 10px; white-space: nowrap; z-index: 100; border: 1px solid var(--border); pointer-events: none; }
-.tp-trend-label { font-size: 9px; color: var(--dim); text-align: center; position: absolute; bottom: 0; width: 100%; white-space: nowrap; overflow: hidden; }
-.tp-trend-grid-lines { position: absolute; inset: 0 0 20px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
-.tp-trend-grid-line { width: 100%; border-top: 1px dashed var(--border); opacity: 0.4; }
-/* ── Detail table ── */
-.tp-tabs { display: flex; gap: 2px; }
-.tp-tab { padding: 5px 12px; cursor: pointer; border-radius: 6px 6px 0 0; background: var(--bg3); color: var(--dim); border: 1px solid var(--border); border-bottom: none; font-size: 12px; font-weight: 500; }
-.tp-tab.active { background: var(--bg2); color: var(--white); font-weight: 600; }
-.tp-tc { display: none; }
-.tp-tc.active { display: block; }
-.tp-st { max-height: 480px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
-.tp-table { width: 100%; border-collapse: collapse; font-size: 11px; background: var(--bg2); }
-.tp-table th { background: var(--bg3); color: var(--white); padding: 7px 10px; text-align: left; font-weight: 600; white-space: nowrap; }
-.tp-table td { padding: 6px 10px; border-top: 1px solid var(--border); white-space: nowrap; font-family: monospace; color: var(--text); }
-.tp-table tr:hover td { background: var(--bg3); }
-.tp-table tfoot td { font-weight: 700; background: var(--bg3); }
-.tp-mtag { display: inline-block; padding: 1px 6px; border-radius: 3px; border: 1px solid; font-size: 10px; margin: 1px; font-weight: 500; }
-.tp-mbreak { white-space: normal; min-width: 200px; }
-/* ── Stream panel ── */
-#stream-panel-wrap {
-  flex: 1; display: flex; flex-direction: column; overflow: hidden;
-}
-#stream-toolbar {
-  display: flex; gap: 4px; padding: 4px 8px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg); flex-shrink: 0;
-}
-#stream-panel {
-  flex: 1; overflow-y: auto; padding: 8px 12px;
-  font-size: 12px;
-}
-/* ── Stream lines ── */
-.stream-line { white-space: pre-wrap; word-break: break-all; }
-.stream-line.thinking { color: var(--magenta); }
-.stream-line.tool-input { color: var(--yellow); }
-.stream-line.tool-output { color: var(--green); }
-.stream-line.text { color: var(--text); }
-.stream-line.hook { color: var(--cyan); }
-.stream-line .hook-label { color: var(--dim); }
-.stream-line.diag { color: var(--red); }
-.stream-line.debug { color: var(--gray); }
-.stream-line.marker { color: var(--dim); }
-.stream-line.agent-tag { font-weight: bold; display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; }
-.stream-line.agent-main { color: var(--blue); }
-.stream-line.agent-sub { color: var(--magenta); }
-.stream-line.agent-tag .tag-label { flex-shrink: 0; }
-.stream-line.agent-tag .timestamp { font-weight: normal; font-size: 0.85em; color: var(--dim); white-space: nowrap; }
-.stream-line.separator { color: var(--dim); }
-.stream-line.user-prompt-block {
-  background: rgba(59,130,246,0.08);
-  border-left: 8px solid var(--blue);
-  border-radius: 4px;
-  padding: 6px 10px;
-  margin: 4px 0;
-  color: var(--white);
-  line-height: 1.5;
-}
-/* ── Footer ── */
-#footer {
-  height: 28px; background: var(--bg2);
-  border-top: 1px solid var(--border);
-  display: flex; align-items: center;
-  padding: 0 8px; gap: 6px;
-  font-size: 11px; flex-shrink: 0; flex-wrap: wrap;
-}
-#footer .sep { color: var(--dim); margin: 0 2px; }
-/* ── Scrollbar ── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-/* ── Focus ring ── */
-#stream-panel:focus { outline: none; }
-/* ── Markdown & code blocks ── */
-.md-content { line-height: 1.6; color: var(--text); }
-.md-content p { margin: 4px 0; }
-.md-content ul, .md-content ol { padding-left: 20px; margin: 4px 0; }
-.md-content li { margin: 2px 0; }
-.md-content strong { color: var(--white); }
-.md-content a { color: var(--blue); text-decoration: underline; }
-.md-content h1, .md-content h2, .md-content h3, .md-content h4,
-.md-content h5, .md-content h6 { color: var(--white); margin: 8px 0 4px; font-size: inherit; font-weight: bold; }
-.md-content blockquote { border-left: 3px solid var(--purple); padding-left: 12px; color: var(--dim); margin: 4px 0; }
-.md-content hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
-.md-content table { border-collapse: collapse; margin: 4px 0; width: 100%; }
-.md-content th, .md-content td { border: 1px solid var(--border); padding: 4px 8px; text-align: left; }
-.md-content th { background: var(--bg3); color: var(--white); }
-.md-content img { max-width: 100%; }
-.code-block-wrapper { margin: 8px 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
-.code-block-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px; background: var(--bg3); font-size: 11px; color: var(--dim); }
-.code-block-header .lang-tag { color: var(--blue); font-weight: bold; }
-.code-block-header .copy-btn { cursor: pointer; opacity: 0.5; transition: opacity 0.2s; font-size: 11px; }
-.code-block-header .copy-btn:hover { opacity: 1; }
-.code-block-wrapper pre { margin: 0; padding: 12px; overflow-x: auto; font-size: 12px; line-height: 1.5; }
-.code-block-wrapper pre code { font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; font-size: 12px; }
-/* Override highlight.js background to match our theme */
-.hljs { background: #0d1117 !important; }
-/* Light theme overrides */
-:root[data-theme="light"] .btn.on { background: var(--purple); border-color: var(--purple); color: #fff; }
-:root[data-theme="light"] .btn.on:hover { background: var(--purple2); color: #fff; }
-:root[data-theme="light"] .btn.on:hover::after { background: var(--purple2); color: #fff; }
-:root[data-theme="light"] .hljs { background: #f0f0f0 !important; }
-:root[data-theme="light"] .tree-content:hover { background: rgba(0,0,0,0.06); }
-:root[data-theme="light"] .tree-row.selected > .tree-content { background: rgba(124,58,237,0.2); }
-:root[data-theme="light"] .tree-node .active-dot.off { color: #bbb; }
-:root[data-theme="light"] #tree-resize-handle:hover,
-:root[data-theme="light"] #tree-resize-handle.active { background: var(--purple); }
-:root[data-theme="light"] .stream-line.text { color: var(--text); }
-/* Theme toggle button */
-#btn-theme { font-size: 14px; }
-/* ── Export modal ── */
-.modal-overlay {
-  position: fixed; inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 10000;
-  display: flex; align-items: center; justify-content: center;
-}
-:root[data-theme="light"] .modal-overlay { background: rgba(0, 0, 0, 0.3); }
-:root[data-theme="light"] .modal-session-row.selected { background: rgba(124, 58, 237, 0.2); }
-.modal-box {
-  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
-  width: 480px; max-width: 90vw; max-height: 80vh;
-  display: flex; flex-direction: column; overflow: hidden;
-}
-.modal-header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg2); flex-shrink: 0;
-}
-.modal-title { font-size: 13px; font-weight: 600; color: var(--white); }
-.modal-toolbar {
-  display: flex; align-items: center; gap: 4px;
-  padding: 6px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
-}
-.modal-count { margin-left: auto; font-size: 11px; color: var(--dim); }
-.modal-body { flex: 1; overflow-y: auto; padding: 6px 0; }
-.modal-session-row {
-  display: flex; align-items: center; gap: 8px;
-  padding: 6px 12px; cursor: pointer; transition: background 0.1s; user-select: none;
-}
-.modal-session-row:hover { background: var(--bg2); }
-.modal-session-row.selected { background: rgba(124, 58, 237, 0.15); }
-.modal-checkbox {
-  appearance: none; width: 16px; height: 16px;
-  border: 1px solid var(--border); border-radius: 3px; background: var(--bg2);
-  cursor: pointer; position: relative; flex-shrink: 0; transition: all 0.15s;
-}
-.modal-checkbox:checked { background: var(--purple); border-color: var(--purple); }
-.modal-checkbox:checked::after {
-  content: '✓'; position: absolute; inset: 0;
-  display: flex; align-items: center; justify-content: center;
-  color: var(--white); font-size: 11px; font-weight: bold;
-}
-.modal-session-prefix {
-  font-family: monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; flex-shrink: 0;
-}
-.modal-session-info {
-  flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px; overflow: hidden;
-}
-.modal-session-project {
-  font-size: 12px; font-weight: 500; color: var(--text);
-  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-}
-.modal-session-model { font-size: 10px; color: var(--dim); flex-shrink: 0; }
-.modal-session-time { font-size: 10px; color: var(--dim); flex-shrink: 0; margin-left: auto; }
-.modal-footer {
-  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
-  padding: 8px 12px; border-top: 1px solid var(--border); background: var(--bg2); flex-shrink: 0;
-}
-</style>
+<link rel="stylesheet" href="css/app.css">
 </head>
 <body>
@@ -488,7 +59,10 @@ body {
 </div>
 <div id="tokens-page" style="display:none">
-  <!-- Top row: left sidebar + right content -->
+  <div class="tp-refresh-bar">
+    <span class="tp-refresh-info" id="tp-refresh-info">Token 统计不会自动刷新，点击按钮手动更新</span>
+    <button class="btn" id="btn-refresh-tokens" onclick="refreshTokenStats()">🔄 刷新数据</button>
+  </div>
   <div class="tp-top">
     <div class="tp-left">
       <div class="tp-box" id="tp-total-card"></div>
@@ -500,7 +74,12 @@ body {
       <div class="tp-box" id="tp-heatmap-card"></div>
     </div>
   </div>
-  <!-- Detail table -->
+  <div class="tp-charts-row" id="tp-charts-row">
+    <div class="tp-chart-box" id="tp-weekly-chart" role="img" aria-label="Weekly token consumption chart"></div>
+    <div class="tp-chart-box" id="tp-monthly-chart" role="img" aria-label="Monthly token consumption chart"></div>
+    <div class="tp-chart-box" id="tp-model-pie" role="img" aria-label="Model token proportion chart"></div>
+    <div class="tp-chart-box" id="tp-hourly-chart" role="img" aria-label="Active time distribution chart"></div>
+  </div>
   <div class="tp-box">
     <div class="tp-tabs" id="tp-detail-tabs"></div>
     <div id="tp-tc-daily" class="tp-tc"><div class="tp-st" id="tp-daily-table"></div></div>
@@ -515,7 +94,7 @@ body {
   <span id="item-count">0 items</span>
   <span class="sep">│</span>
   <span id="footer-version" style="margin-left:auto;font-size:10px;color:var(--dim)"></span>
-  </div>
+</div>
 <div id="export-modal" class="modal-overlay" style="display:none">
   <div class="modal-box">
@@ -539,2059 +118,9 @@ body {
 <script src="vendor/highlight.min.js"></script>
 <script src="vendor/marked.min.js"></script>
 <script src="vendor/purify.min.js"></script>
-<script>
-// ══════════════════════════════════════════════════════════════════════════════
-// DOM refs
-// ══════════════════════════════════════════════════════════════════════════════
-const streamEl = document.getElementById('stream-panel');
-const treeEl = document.getElementById('tree-content');
-const sessionInfo = document.getElementById('session-info');
-const tokenInfo = document.getElementById('token-info');
-const treeCursorInfo = document.getElementById('tree-cursor-info');
-// ══════════════════════════════════════════════════════════════════════════════
-// State
-// ══════════════════════════════════════════════════════════════════════════════
-let ws = null;
-let reconnectTimer = null;
-let reconnectDelay = 1000;
-const MaxReconnectDelay = 30000;
-const MaxReconnectAttempts = 20;
-let reconnectAttempts = 0;
-let showTree = true;
-let autoScroll = true;
-let lastMsgTime = 0;
-let staleCheckTimer = null;
-let sessions = [];
-let sessionsMap = new Map(); // id -> session, for O(1) lookups
-let treeNodes = [];
-let treeCursor = 0;
-let folderCollapsed = {}; // dateStr -> boolean, default collapsed
-let streamItems = [];
-let visibleItems = [];
-let visibleDirty = true;
-// LRU cache: recently accessed keys survive eviction, so a tool_input's ID
-// stays alive long enough for its matching tool_output to arrive and merge.
-class LRUCache {
-  constructor(max) { this.max = max; this.map = new Map(); }
-  has(key) { if (!this.map.has(key)) return false; const v = this.map.get(key); this.map.delete(key); this.map.set(key, v); return true; }
-  get(key) { if (!this.map.has(key)) return undefined; const v = this.map.get(key); this.map.delete(key); this.map.set(key, v); return v; }
-  set(key, val) { if (this.map.has(key)) this.map.delete(key); this.map.set(key, val); if (this.map.size > this.max) { const oldest = this.map.keys().next().value; this.map.delete(oldest); } }
-  delete(key) { return this.map.delete(key); }
-  keys() { return this.map.keys(); }
-}
-const seenToolIDs = new LRUCache(20000);
-const toolNameMap = new LRUCache(2000);
-const agentActivity = new LRUCache(500);  // "sessionID:agentID" → { toolName, content }
-const taskDescriptions = new LRUCache(2000); // toolID → description string
-const MAX_DESC_STORE = 200;
-let filters = new Map();
-let visibleFilterCount = 0;
-let showThinking = true;
-let showToolInput = true;
-let showToolOutput = true;
-let showText = true;
-let showHook = true;
-let showUserPrompt = true;
-let showActivity = true;
-let showTokenCount = true;
-let autoDiscovery = true;
-let appVersion = '';
-let currentTab = 'stream';
-let tokenStatsData = { totals: { messages: 0, input: 0, output: 0, cacheCreation: 0, cacheRead: 0, days: 0 }, modelTotals: {}, daily: {} };
-const HIDDEN_KEY = 'claude-watch-hidden';
-function loadHiddenSessions() {
-  try {
-    const data = JSON.parse(localStorage.getItem(HIDDEN_KEY) || '{}');
-    const now = Date.now();
-    for (const [id, ts] of Object.entries(data)) {
-      if (now - ts < 24 * 60 * 60 * 1000) hiddenSessionIDs.add(id);
-    }
-    _saveHiddenSessions();
-  } catch {}
-}
-function _saveHiddenSessions() {
-  const data = {};
-  for (const id of hiddenSessionIDs) data[id] = Date.now();
-  localStorage.setItem(HIDDEN_KEY, JSON.stringify(data));
-}
-const hiddenSessionIDs = new Set();
-loadHiddenSessions();
-let renderPending = false;
-let totalInput = 0, totalOutput = 0, totalCacheCreate = 0, totalCacheRead = 0;
-let contextData = {};
-function computeTokensFromContext() {
-  totalInput = 0; totalOutput = 0; totalCacheCreate = 0; totalCacheRead = 0;
-  for (const ctx of Object.values(contextData)) {
-    totalInput += ctx.inputTokens || 0;
-    totalOutput += ctx.outputTokens || 0;
-    totalCacheCreate += ctx.cacheCreation || 0;
-    totalCacheRead += ctx.cacheRead || 0;
-  }
-}
-let collapseAfter = 0;
-let collapseTimer = null;
-let activeRefreshTimer = null;
-const MAX_ITEMS = 9999;
-const MAX_LINES = 50;
-let renderedItemCount = 0;
-let needsFullRender = true;
-let treeDirty = true;
-let lastTreeCursor = -1;
-// Cache highlight.js CSS for HTML export
-let hljsDarkCSS = '', hljsLightCSS = '';
-fetch('vendor/github-dark.min.css').then(r => r.text()).then(t => { hljsDarkCSS = t; }).catch(() => {});
-fetch('vendor/github-light.min.css').then(r => r.text()).then(t => { hljsLightCSS = t; }).catch(() => {});
-// ══════════════════════════════════════════════════════════════════════════════
-// Markdown renderer (marked + highlight.js)
-// ══════════════════════════════════════════════════════════════════════════════
-const mdRenderer = new marked.Renderer();
-mdRenderer.code = function (codeOrObj, langOrEsc) {
-  // marked v4: code(text, lang, escaped) — marked v5+: code({ text, lang })
-  const text = typeof codeOrObj === 'object' ? codeOrObj.text : codeOrObj;
-  const lang = typeof codeOrObj === 'object' ? codeOrObj.lang : langOrEsc;
-  let highlighted;
-  if (lang && hljs.getLanguage(lang)) {
-    try {
-      highlighted = hljs.highlight(text, { language: lang }).value;
-    } catch {
-      highlighted = hljs.highlightAuto(text).value;
-    }
-  } else {
-    highlighted = hljs.highlightAuto(text).value;
-  }
-  const langTag = lang ? `<span class="lang-tag">${esc(lang)}</span>` : '';
-  return `<div class="code-block-wrapper">
-    <div class="code-block-header">${langTag}<span class="copy-btn" onclick="copyCode(this)">&#x2398;</span></div>
-    <pre><code>${highlighted}</code></pre>
-  </div>`;
-};
-marked.setOptions({ renderer: mdRenderer, breaks: true, gfm: true });
-function copyCode(btn) {
-  const wrapper = btn.closest('.code-block-wrapper');
-  const code = wrapper ? wrapper.querySelector('code') : null;
-  if (!code) return;
-  navigator.clipboard.writeText(code.textContent).then(() => {
-    btn.innerHTML = '&#x2713;';
-    setTimeout(() => { btn.innerHTML = '&#x2398;'; }, 1500);
-  });
-}
-function mdRender(text) {
-  try {
-    return DOMPurify.sanitize(marked.parse(text));
-  } catch {
-    return esc(text);
-  }
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// WebSocket
-// ══════════════════════════════════════════════════════════════════════════════
-function connect() {
-  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  ws = new WebSocket(`${proto}//${location.host}`);
-  ws.onopen = () => {
-    sessionInfo.textContent = 'Connected';
-    lastMsgTime = Date.now();
-    reconnectDelay = 1000;
-    reconnectAttempts = 0;
-    startStaleCheck();
-    startActiveRefresh();
-  };
-  ws.onclose = () => {
-    reconnectAttempts++;
-    if (reconnectAttempts >= MaxReconnectAttempts) {
-      sessionInfo.textContent = 'Disconnected. Please refresh to reconnect.';
-      return;
-    }
-    sessionInfo.textContent = 'Disconnected, reconnecting...';
-    stopStaleCheck();
-    if (activeRefreshTimer) { clearInterval(activeRefreshTimer); activeRefreshTimer = null; }
-    reconnectTimer = setTimeout(connect, reconnectDelay);
-    reconnectDelay = Math.min(reconnectDelay * 2, MaxReconnectDelay);
-  };
-  ws.onerror = (e) => { console.warn('[ws] connection error', e); };
-  ws.onmessage = (e) => {
-    lastMsgTime = Date.now();
-    let msg;
-    try { msg = JSON.parse(e.data); } catch { return; }
-    handleMessage(msg);
-  };
-}
-function startStaleCheck() {
-  if (staleCheckTimer) clearInterval(staleCheckTimer);
-  staleCheckTimer = setInterval(() => {
-    if (Date.now() - lastMsgTime > 45000) {
-      sessionInfo.textContent = 'Stale connection, reconnecting...';
-      stopStaleCheck();
-      try { ws.close(); } catch {}
-      // onclose handler will handle reconnect — no separate timer needed
-    }
-  }, 10000);
-}
-function stopStaleCheck() {
-  if (staleCheckTimer) { clearInterval(staleCheckTimer); staleCheckTimer = null; }
-}
-function handleMessage(msg) {
-  switch (msg.type) {
-    case 'snapshot': handleSnapshot(msg.payload); break;
-    case 'itemBatch': handleItemBatch(msg.payload); break;
-    case 'item': handleItem(msg.payload); break;
-    case 'newSession': handleNewSession(msg.payload); break;
-    case 'newAgent': handleNewAgent(msg.payload); break;
-    case 'newBackgroundTask': handleNewBgTask(msg.payload); break;
-    case 'sessionRemoved': handleSessionRemoved(msg.payload); break;
-    case 'autoDiscoveryChanged': autoDiscovery = msg.payload.enabled; scheduleRender(); break;
-    case 'context': contextData = msg.payload; updateTreeDots(); refreshButtons(); break;
-    case 'tokenStats': tokenStatsData = msg.payload; if (currentTab === 'tokens') renderTokenPage(); break;
-    case 'config':
-      if (msg.payload.version) appVersion = msg.payload.version;
-      if (msg.payload.collapseAfter > 0 && !collapseTimer) {
-        applyCollapsePolicy(msg.payload.collapseAfter);
-      }
-      break;
-    case 'heartbeat': break;
-  }
-}
-function sendCmd(action, extra = {}) {
-  if (ws && ws.readyState === 1) ws.send(JSON.stringify({ action, ...extra }));
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Snapshot / Session management
-// ══════════════════════════════════════════════════════════════════════════════
-function handleSnapshot(payload) {
-  autoDiscovery = payload.autoDiscovery;
-  const incomingIDs = new Set((payload.sessions || []).map(s => s.id));
-  for (let i = sessions.length - 1; i >= 0; i--) {
-    const s = sessions[i];
-    if (!incomingIDs.has(s.id) && !s.pinned) {
-      sessions.splice(i, 1);
-      sessionsMap.delete(s.id);
-    }
-  }
-  for (const s of (payload.sessions || [])) {
-    if (hiddenSessionIDs.has(s.id)) continue;
-    let session = sessionsMap.get(s.id);
-    if (!session) {
-      session = {
-        id: s.id, projectPath: s.projectPath, title: '',
-        folder: folderName(s.projectPath), model: '',
-        agents: [], tasks: [], collapsed: false, pinned: false,
-        lastActivity: s.birthtimeMs || 0,
-        birthtimeMs: s.birthtimeMs || 0,
-      };
-      sessions.push(session);
-      sessionsMap.set(session.id, session);
-      session.agents.push({ id: '', name: 'Main', type: 'main' });
-    }
-    for (const [aid, atype] of Object.entries(s.subagents || {})) {
-      if (!session.agents.find(a => a.id === aid)) {
-        session.agents.push({ id: aid, name: agentDisplayName(aid, atype), type: 'agent' });
-      }
-    }
-    for (const t of (s.backgroundTasks || [])) {
-      if (!session.tasks.find(ta => ta.id === t.id)) {
-        session.tasks.push({
-          id: t.id, parentAgentID: t.parentAgentID,
-          toolName: t.toolName, outputPath: t.outputPath,
-          isComplete: t.isComplete,
-        });
-      }
-    }
-  }
-  // Initialize agentActivity from server-computed lastActivities (survives history skip)
-  for (const [key, val] of Object.entries(payload.lastActivities || {})) {
-    agentActivity.set(key, val);
-  }
-  updateFilters();
-  rebuildNodes();
-  needsFullRender = true;
-  visibleDirty = true;
-  // Don't render tree yet — wait for itemBatch to fill title/model/taskDescriptions
-}
-function handleNewSession(payload) {
-  if (hiddenSessionIDs.has(payload.sessionID)) return;
-  if (sessionsMap.has(payload.sessionID)) return;
-  const session = {
-    id: payload.sessionID, projectPath: payload.projectPath,
-    title: '', folder: folderName(payload.projectPath), model: '',
-    agents: [{ id: '', name: 'Main', type: 'main' }],
-    tasks: [], collapsed: false, pinned: false,
-    lastActivity: payload.birthtimeMs || Date.now(),
-    birthtimeMs: payload.birthtimeMs || 0,
-  };
-  sessions.push(session);
-  sessionsMap.set(session.id, session);
-  updateFilters();
-  rebuildNodes();
-  needsFullRender = true;
-  visibleDirty = true;
-  scheduleRender();
-}
-function handleNewAgent(payload) {
-  const s = sessionsMap.get(payload.sessionID);
-  if (!s || s.agents.find(a => a.id === payload.agentID)) return;
-  s.agents.push({
-    id: payload.agentID,
-    name: agentDisplayName(payload.agentID, payload.agentType),
-    type: 'agent',
-  });
-  updateFilters();
-  rebuildNodes();
-  needsFullRender = true;
-  visibleDirty = true;
-  scheduleRender();
-}
-function handleNewBgTask(payload) {
-  const s = sessionsMap.get(payload.sessionID);
-  if (!s || s.tasks.find(t => t.id === payload.toolID)) return;
-  s.tasks.push({
-    id: payload.toolID, parentAgentID: payload.parentAgentID,
-    toolName: payload.toolName, outputPath: payload.outputPath,
-    isComplete: payload.isComplete,
-  });
-  rebuildNodes();
-  scheduleRender();
-}
-function handleSessionRemoved(payload) {
-  const sid = payload.sessionID;
-  const s = sessionsMap.get(sid);
-  if (s) {
-    for (const a of s.agents) agentActivity.delete(sid + ':' + a.id);
-    for (const t of s.tasks) taskDescriptions.delete(t.id);
-  }
-  const idx = sessions.findIndex(s => s.id === sid);
-  if (idx >= 0) {
-    sessions.splice(idx, 1);
-    sessionsMap.delete(sid);
-  }
-  updateFilters();
-  rebuildNodes();
-  needsFullRender = true;
-  visibleDirty = true;
-  scheduleRender();
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Stream items
-// ══════════════════════════════════════════════════════════════════════════════
-function handleItem(item) {
-  if (item.type === 'session_title') {
-    const s = sessionsMap.get(item.sessionID);
-    if (s) { s.title = item.content.slice(0, 30); }
-    scheduleRender();
-    return;
-  }
-  // Update activity
-  const s = sessionsMap.get(item.sessionID);
-  if (s) s.lastActivity = itemTime(item);
-  pushItem(item);
-  scheduleRender();
-}
-function handleItemBatch(items) {
-  for (const item of items) {
-    if (item.type === 'session_title') {
-      const s = sessionsMap.get(item.sessionID);
-      if (s) { s.title = item.content.slice(0, 30); }
-      continue;
-    }
-    const s = sessionsMap.get(item.sessionID);
-    if (s) s.lastActivity = itemTime(item);
-    pushItem(item);
-  }
-  rebuildNodes();
-  scheduleRender();
-}
-function pushItem(item) {
-  if (hiddenSessionIDs.has(item.sessionID)) return;
-  // Token counts are sourced exclusively from server context messages
-  // to avoid divergence between frontend accumulation and server tracking
-  if (item.model) {
-    const s = sessionsMap.get(item.sessionID);
-    if (s) s.model = item.model;
-  }
-  if (item.type === 'tool_input' && item.toolID && item.toolName) {
-    toolNameMap.set(item.toolID, item.toolName);
-  }
-  if (item.type === 'tool_input') {
-    if (item.agentID) {
-      agentActivity.set(item.sessionID + ':' + item.agentID, { toolName: item.toolName || '', content: (item.content || '').slice(0, MAX_DESC_STORE) });
-    }
-    if (item.toolID) {
-      taskDescriptions.set(item.toolID, (item.content || '').slice(0, MAX_DESC_STORE));
-    }
-  }
-  if (item.type === 'user_text') {
-    agentActivity.set(item.sessionID + ':' + (item.agentID || ''), { toolName: '', content: (item.content || '').slice(0, MAX_DESC_STORE) });
-  }
-  if (item.toolID) {
-    const key = `${item.toolID}:${item.type}`;
-    if (seenToolIDs.has(key)) return;
-    seenToolIDs.set(key, true);
-  }
-  streamItems.push(item);
-  if (streamItems.length > MAX_ITEMS) {
-    streamItems = streamItems.slice(-MAX_ITEMS);
-    visibleDirty = true;
-  }
-  // Incrementally update visibleItems — no need to re-filter on every item
-  if (!visibleDirty && isItemVisible(item)) {
-    visibleItems.push(item);
-  }
-}
-function isItemVisible(item) {
-  if (!filters.has(item.sessionID + ':' + (item.agentID || ''))) return false;
-  switch (item.type) {
-    case 'thinking': return showThinking;
-    case 'tool_input': return showToolInput;
-    case 'tool_output': return showToolOutput;
-    case 'text': return showText;
-    case 'hook_output': return showHook;
-    case 'user_text': return showUserPrompt;
-    default: return true;
-  }
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Tree
-// ══════════════════════════════════════════════════════════════════════════════
-function idColor(rank) {
-  const hue = (rank * 137.508) % 360;
-  return `hsl(${hue}, 75%, 60%)`;
-}
-function rebuildNodes() {
-  // Sort sessions by creation time, newest first
-  sessions.sort((a, b) => (b.birthtimeMs || 0) - (a.birthtimeMs || 0));
-  for (let i = 0; i < sessions.length; i++) sessions[i].colorRank = i;
-  computeAgentIdDisplayLengths();
-  const today = new Date();
-  const todayStr = `${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
-  const flatSessions = [];
-  const olderByDate = new Map(); // dateStr -> [sessions]
-  for (const s of sessions) {
-    const dateStr = s.birthtimeMs ? formatTime(s.birthtimeMs).split(' ')[0] : null;
-    if (!dateStr || dateStr === todayStr || isSessionActive(s)) {
-      flatSessions.push(s);
-    } else {
-      if (!olderByDate.has(dateStr)) olderByDate.set(dateStr, []);
-      olderByDate.get(dateStr).push(s);
-    }
-  }
-  treeNodes = [];
-  function addSessionWithChildren(s, inFolder) {
-    treeNodes.push({ type: 'session', level: 0, isLast: false, inFolder: !!inFolder, ...s });
-    if (s.collapsed) return;
-    const agents = s.agents || [];
-    const lastAgentIdx = agents.length - 1;
-    for (let ai = 0; ai < agents.length; ai++) {
-      const a = agents[ai];
-      const isLastAgent = ai === lastAgentIdx;
-      const tasks = s.tasks.filter(t =>
-        (a.id === '' && !t.parentAgentID) || t.parentAgentID === a.id
-      );
-      const lastTaskIdx = tasks.length - 1;
-      const hasTasks = tasks.length > 0;
-      const actKey = s.id + ':' + a.id;
-      const act = agentActivity.get(actKey);
-      treeNodes.push({
-        type: a.type, id: a.id, name: a.name, sessionID: s.id,
-        level: 1, isLast: isLastAgent,
-        activityTool: act ? act.toolName : '',
-        activityDesc: act ? act.content : '',
-      });
-      for (let ti = 0; ti < tasks.length; ti++) {
-        const t = tasks[ti];
-        const tDesc = taskDescriptions.get(t.id);
-        treeNodes.push({
-          type: 'task', id: t.id, name: t.toolName,
-          sessionID: s.id, parentAgentID: t.parentAgentID,
-          outputPath: t.outputPath, isComplete: t.isComplete,
-          level: 2, isLast: ti === lastTaskIdx,
-          parentIsLast: isLastAgent,
-          description: tDesc || '',
-        });
-      }
-    }
-  }
-  // Today's + active sessions (expanded, not in date folders)
-  for (const s of flatSessions) {
-    addSessionWithChildren(s, false);
-  }
-  // Date folders (older dates, collapsed by default)
-  const sortedDates = [...olderByDate.keys()].sort((a, b) => b.localeCompare(a));
-  for (let di = 0; di < sortedDates.length; di++) {
-    const dateStr = sortedDates[di];
-    const folderSessions = olderByDate.get(dateStr);
-    const collapsed = folderCollapsed[dateStr] !== false; // default collapsed
-    const isLastFolder = di === sortedDates.length - 1;
-    treeNodes.push({
-      type: 'date-folder', date: dateStr, level: 0, isLast: false,
-      collapsed, sessionCount: folderSessions.length,
-    });
-    if (!collapsed) {
-      for (const s of folderSessions) {
-        addSessionWithChildren(s, true);
-      }
-    }
-  }
-  // Mark last session among flat sessions
-  const flatSessionNodes = treeNodes.filter(n => n.type === 'session' && !n.inFolder);
-  if (flatSessionNodes.length > 0) flatSessionNodes[flatSessionNodes.length - 1].isLast = true;
-  // Mark last session inside each folder
-  for (const dateStr of sortedDates) {
-    if (folderCollapsed[dateStr] !== false) continue;
-    // Find sessions belonging to this folder
-    const thisFolder = [];
-    let inThisFolder = false;
-    for (const n of treeNodes) {
-      if (n.type === 'date-folder' && n.date === dateStr) { inThisFolder = true; continue; }
-      if (n.type === 'date-folder' && n.date !== dateStr) { inThisFolder = false; continue; }
-      if (inThisFolder && n.type === 'session') thisFolder.push(n);
-    }
-    if (thisFolder.length > 0) thisFolder[thisFolder.length - 1].isLast = true;
-  }
-  if (treeCursor >= treeNodes.length) treeCursor = Math.max(0, treeNodes.length - 1);
-  treeDirty = true;
-}
-function treePrefix(node) {
-  if (node.level === 0) {
-    return node.inFolder ? '    ' : '';
-  }
-  const branch = node.isLast ? '└──' : '├──';
-  if (node.level === 1) return '  ' + branch;
-  // Level 2: use pre-computed parentIsLast from rebuildNodes
-  const parentIsLast = node.parentIsLast !== undefined ? node.parentIsLast : true;
-  const stem = parentIsLast ? '    ' : '│  ';
-  return '  ' + stem + branch;
-}
-function getNodeHTML(node, idx) {
-  const isSelected = idx === treeCursor;
-  const selClass = isSelected ? ' selected' : '';
-  if (node.type === 'date-folder') {
-    const icon = node.collapsed ? '▸' : '▾';
-    return `<div class="tree-row tree-row-folder${selClass ? ' selected' : ''}">
-      <div class="tree-content" onclick="treeClick(${idx})" data-idx="${idx}">
-        <div class="tree-node folder-node">
-          ${icon} 📁 ${node.date} <span style="font-size:10px;color:var(--dim);margin-left:4px">(${node.sessionCount})</span>
-        </div>
-      </div>
-    </div>`;
-  }
-  if (node.type === 'session') {
-    const displayName = folderName(node.projectPath) || node.title || node.id.slice(0, 14);
-    const parts = [];
-    if (node.model) parts.push(`🧠 ${esc(node.model)}`);
-    const activeDot = isSessionActive(node) ? '<span class="active-dot on">🟢</span>' : '<span class="active-dot off">⚪</span>';
-    const subInfo = parts.length > 0 ? ` <span style="color:#6b7280;font-size:10px">${parts.join(' · ')}</span>` : '';
-    const agentCount = node.agents ? node.agents.filter(a => a.type === 'agent').length : 0;
-    const timeStr = formatTime(node.birthtimeMs);
-    const timeHtml = timeStr ? `<span style="margin-left:auto;font-size:10px;color:var(--dim);flex-shrink:0">${timeStr}</span>` : '';
-    return `<div class="tree-row tree-row-session${selClass ? ' selected' : ''}">
-      <div class="tree-content" onclick="treeClick(${idx})" data-idx="${idx}">
-        <div class="tree-node">
-          <span class="tree-prefix">${treePrefix(node)}</span>${activeDot} ${node.collapsed ? '▸' : '▾'} <span class="session-prefix" style="color:${idColor(node.colorRank)}" data-sid="${esc(node.id)}" onmouseenter="showSessionIdTip(this)" onmouseleave="hideSessionIdTip(this)">${esc(node.id.split('-')[0].toUpperCase())}</span> ${esc(displayName)}
-          ${node.collapsed && agentCount > 0 ? `(${esc(String(agentCount))})` : ''}
-          ${subInfo}
-          ${timeHtml}
-        </div>
-      </div>
-      <span class="tree-actions">
-        <button class="btn btn-icon accent" onclick="event.stopPropagation();selectIndex(${idx});soloSelected()" data-tooltip="Solo">⊙</button>
-        <button class="btn btn-icon danger" onclick="event.stopPropagation();selectIndex(${idx});removeSelectedSession()" data-tooltip="Remove">✕</button>
-      </span>
-    </div>`;
-  }
-  if (node.type === 'main' || node.type === 'agent') {
-    const icon = node.type === 'main' ? '💬' : '🤖';
-    const enabled = filters.get(node.sessionID + ':' + node.id);
-    const ctxKey = node.sessionID + ':' + node.id;
-    const ctx = contextData[ctxKey];
-    let ctxPct = '';
-    if (ctx && ctx.contextWindow > 0 && ctx.inputTokens > 0) {
-      const pct = Math.round(ctx.inputTokens / ctx.contextWindow * 100);
-      const cls = pct > 80 ? 'danger' : pct > 50 ? 'warn' : '';
-      if (showTokenCount) {
-        ctxPct = `<span class="ctx-pct ${cls}">${fmtTok(ctx.inputTokens)}</span>`;
-      } else {
-        ctxPct = `<span class="ctx-pct ${cls}">${pct}%</span>`;
-      }
-    }
-    const activeDot = ctx && (Date.now() - ctx.lastActivity < 120000) ? '<span class="active-dot on">🟢</span>' : '<span class="active-dot off">⚪</span>';
-    const actIcon = node.type === 'main' ? '🗣' : '⚡';
-    const actText = showActivity && (node.activityTool || node.activityDesc)
-      ? (node.activityTool && node.activityDesc ? `${node.activityTool}: ${node.activityDesc}` : (node.activityTool || node.activityDesc))
-      : '';
-    const indent = treePrefix(node).replace(/[├└]──/, '   ');
-    const actPrefix = `<span class="tree-prefix">${indent}</span>`;
-    const activityHTML = actText
-      ? `<div class="tree-activity">${actPrefix}<span class="act-text">${actIcon} ${esc(actText)}</span></div>`
-      : '';
-    return `<div class="tree-row${selClass ? ' selected' : ''}">
-      <div class="tree-content${enabled ? '' : ' dim'}" onclick="treeClick(${idx})" data-idx="${idx}">
-        <div class="tree-node">
-          <span class="tree-prefix">${treePrefix(node)}</span>${activeDot} ${icon} ${esc(node.name || '')}${node.type === 'agent' && node.id ? '<span class="tree-agent-id">(' + esc(node.id.slice(0, agentIdDisplayLen.get(node.sessionID + ':' + node.id) || 7)) + ')</span>' : ''}${ctxPct}
-        </div>
-        ${activityHTML}
-      </div>
-      <span class="tree-actions">
-        <button class="btn btn-icon accent" onclick="event.stopPropagation();selectIndex(${idx});soloSelected()" data-tooltip="Solo">⊙</button>
-        <button class="btn btn-icon" onclick="event.stopPropagation();selectIndex(${idx});toggleNodeVisibility(${idx})" data-tooltip="${enabled ? 'Hide' : 'Show'}">${enabled ? '👁' : '─'}</button>
-      </span>
-    </div>`;
-  }
-  if (node.type === 'task') {
-    const icon = node.isComplete ? '✓' : '⏳';
-    const taskIndent = treePrefix(node).replace(/[├└]──/, '   ');
-    const taskPrefix = `<span class="tree-prefix">${taskIndent}</span>`;
-    const descHTML = showActivity && node.description
-      ? `<div class="tree-activity">${taskPrefix}<span class="act-text">📋 ${esc(node.description)}</span></div>`
-      : '';
-    return `<div class="tree-row${selClass ? ' selected' : ''}">
-      <div class="tree-content dim" onclick="treeClick(${idx})" data-idx="${idx}">
-        <div class="tree-node">
-          <span class="tree-prefix">${treePrefix(node)}</span>${icon} ${esc(node.name || 'bg-task')}
-        </div>
-        ${descHTML}
-      </div>
-      <span class="tree-actions">
-        <button class="btn btn-icon" onclick="event.stopPropagation();selectIndex(${idx});loadBgTask(${idx})" data-tooltip="Load output">▶</button>
-      </span>
-    </div>`;
-  }
-  return '';
-}
-function renderTree() {
-  if (treeNodes.length === 0) {
-    treeEl.innerHTML = '<div class="tree-node" style="padding:8px;color:var(--dim)">Waiting for sessions...</div>';
-    treeCursorInfo.textContent = '';
-    return;
-  }
-  const cursorChanged = treeCursor !== lastTreeCursor;
-  if (treeDirty) {
-    let html = '';
-    for (let i = 0; i < treeNodes.length; i++) {
-      html += getNodeHTML(treeNodes[i], i);
-    }
-    treeEl.innerHTML = html;
-    treeDirty = false;
-  } else if (cursorChanged) {
-    const prevSel = treeEl.querySelector('.tree-row.selected');
-    if (prevSel) prevSel.classList.remove('selected');
-    const newContent = treeEl.querySelector('[data-idx="' + treeCursor + '"]');
-    if (newContent) {
-      const row = newContent.closest('.tree-row');
-      if (row) row.classList.add('selected');
-    }
-  }
-  lastTreeCursor = treeCursor;
-  // Scroll selected into view
-  const sel = treeEl.querySelector('.tree-row.selected');
-  if (sel) sel.scrollIntoView({ block: 'nearest' });
-  treeCursorInfo.textContent = `${treeCursor + 1}/${treeNodes.length}`;
-}
-function updateTreeDots() {
-  const dots = treeEl.querySelectorAll('.active-dot');
-  const now = Date.now();
-  for (const dot of dots) {
-    const content = dot.closest('.tree-content');
-    if (!content) continue;
-    const idx = parseInt(content.getAttribute('data-idx'));
-    if (isNaN(idx)) continue;
-    const node = treeNodes[idx];
-    if (!node) continue;
-    let active = false;
-    if (node.type === 'session') {
-      active = isSessionActive(node);
-    } else if (node.type === 'main' || node.type === 'agent') {
-      const ctxKey = node.sessionID + ':' + node.id;
-      const ctx = contextData[ctxKey];
-      const threshold = node.type === 'main' ? 600000 : 180000;
-      active = ctx && (now - ctx.lastActivity < threshold);
-    }
-    const newCls = active ? 'active-dot on' : 'active-dot off';
-    const newHTML = active ? '🟢' : '⚪';
-    if (dot.className !== newCls) {
-      dot.className = newCls;
-      dot.innerHTML = newHTML;
-    }
-  }
-}
-const ACTIVE_THRESHOLD = 600000; // 10 minutes
-function itemTime(item) {
-  if (item && item.timestamp) {
-    const ts = item.timestamp instanceof Date ? item.timestamp : new Date(item.timestamp);
-    if (!isNaN(ts.getTime())) return ts.getTime();
-  }
-  return Date.now();
-}
-function isSessionActive(session) {
-  if (!session) return false;
-  const now = Date.now();
-  // Main agent: 10 minutes
-  const mainCtx = contextData[session.id + ':'];
-  if (mainCtx && (now - mainCtx.lastActivity) < 600000) return true;
-  // Subagents: 3 minutes
-  for (const a of session.agents) {
-    if (a.id === '') continue;
-    const ctx = contextData[session.id + ':' + a.id];
-    if (ctx && (now - ctx.lastActivity) < 180000) return true;
-  }
-  // Session fallback: 10 minutes
-  return (now - session.lastActivity) < 600000;
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Stream rendering
-// ══════════════════════════════════════════════════════════════════════════════
-function renderStream() {
-  // Rebuild visibleItems from scratch only when filters/toggles changed
-  if (visibleDirty) {
-    visibleItems = streamItems.filter(isItemVisible);
-    visibleDirty = false;
-  }
-  const visible = visibleItems;
-  const wasAutoScroll = autoScroll;
-  if (needsFullRender || renderedItemCount > visible.length) {
-    // Full rebuild: filter changed, items trimmed, or initial render
-    const lines = [];
-    for (const item of visible) {
-      for (const l of renderItem(item)) lines.push(l);
-    }
-    let html;
-    if (lines.length > 0) {
-      html = lines.map(l => {
-      const sidAttr = l.sessionID ? ` data-session-id="${esc(l.sessionID)}"` : '';
-      if (l.html) return `<div class="${esc(l.cls)}"${sidAttr}>${l.text}</div>`;
-      return `<div class="${esc(l.cls)}"${sidAttr}>${esc(l.text)}</div>`;
-    }).join('\n');
-    } else if (streamItems.length > 0) {
-      html = `<div style="color:#fbbf24;padding:20px;text-align:center">${streamItems.length} items buffered, 0 visible — check toggles or tree selection</div>`;
-    } else {
-      html = '<div style="color:#6b7280;padding:20px;text-align:center">Waiting for output...</div>';
-    }
-    streamEl.innerHTML = html;
-    renderedItemCount = visible.length;
-    needsFullRender = false;
-    if (wasAutoScroll) requestAnimationFrame(() => { streamEl.scrollTop = streamEl.scrollHeight; });
-  } else {
-    // Incremental append: only add new items since last render
-    for (let i = renderedItemCount; i < visible.length; i++) {
-      for (const l of renderItem(visible[i])) {
-        const div = document.createElement('div');
-        div.className = l.cls;
-        if (l.sessionID) div.dataset.sessionId = l.sessionID;
-        div.innerHTML = l.html ? l.text : esc(l.text);
-        streamEl.appendChild(div);
-      }
-    }
-    renderedItemCount = visible.length;
-    if (autoScroll) requestAnimationFrame(() => { streamEl.scrollTop = streamEl.scrollHeight; });
-  }
-  const maxScroll = streamEl.scrollHeight - streamEl.clientHeight;
-  const pct = maxScroll > 0 ? Math.round(streamEl.scrollTop / maxScroll * 100) : 0;
-  document.getElementById('scroll-pos').textContent = Math.min(100, pct) + '%';
-  document.getElementById('item-count').textContent = streamItems.length + ' items';
-}
-function renderItem(item) {
-  const lines = [];
-  const isSub = !!item.agentID;
-  const agentTagCls = 'stream-line ' + (isSub ? 'agent-sub agent-tag' : 'agent-main agent-tag');
-  const sep = ' » ';
-  const sid = item.sessionID || '';
-  if (item.type === 'turn_marker') {
-    return [{ cls: 'stream-line marker', text: `── turn ended ${fmtDur(item.durationMs)} ──`, sessionID: sid }];
-  }
-  if (item.type === 'compact_marker') {
-    const label = item.content ? `compacted (${item.content})` : 'compacted';
-    return [{ cls: 'stream-line marker', text: `── ${label} ──`, sessionID: sid }];
-  }
-  if (item.type === 'pr_link') {
-    return [{ cls: 'stream-line marker', text: `── ${item.content} ──`, sessionID: sid }];
-  }
-  const agentName = item.agentName || 'Main';
-  const sForColor = sessionsMap.get(item.sessionID);
-  const prefixTag = `<span class="session-prefix" style="color:${idColor(sForColor ? sForColor.colorRank : 0)}">[${esc(item.sessionID.split('-')[0].toUpperCase())}]</span>`;
-  const agentIdTag = item.agentID ? `<span class="session-prefix" style="color:var(--dim)">(</span><span class="session-prefix" style="color:var(--magenta)">${esc(item.agentID.slice(0, agentIdDisplayLen.get(item.sessionID + ':' + item.agentID) || 7))}</span><span class="session-prefix" style="color:var(--dim)">)</span>` : '';
-  const agentLabel = prefixTag + agentIdTag + ' ' + esc(agentName);
-  const tsHtml = item.timestamp ? `<span class="timestamp">${fmtTimestamp(item.timestamp)}</span>` : '';
-  switch (item.type) {
-    case 'thinking':
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}🧠 Thinking</span>${tsHtml}`, html: true, sessionID: sid });
-      for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line thinking', text: l, sessionID: sid });
-      break;
-    case 'tool_input':
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}🔧 ${esc(item.toolName || '')}</span>${tsHtml}`, html: true, sessionID: sid });
-      for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line tool-input', text: l, sessionID: sid });
-      break;
-    case 'tool_output': {
-      let tn = '';
-      if (item.toolID) {
-        tn = toolNameMap.get(item.toolID) || '';
-      }
-      let label = tn ? `📤 ${tn} result` : '📤 Output';
-      if (item.durationMs > 0) label += ' ' + fmtDur(item.durationMs);
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}${esc(label)}</span>${tsHtml}`, html: true, sessionID: sid });
-      for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line tool-output', text: l, sessionID: sid });
-      break;
-    }
-    case 'text':
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}💬 Response</span>${tsHtml}`, html: true, sessionID: sid });
-      lines.push({ cls: 'stream-line text md-content', text: mdRender(item.content), html: true, sessionID: sid });
-      break;
-    case 'hook_output': {
-      let label = '🪝 Hook';
-      if (item.toolName) label += ' ' + item.toolName;
-      if (item.durationMs > 0) label += ' ' + fmtDur(item.durationMs);
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}${esc(label)}</span>${tsHtml}`, html: true, sessionID: sid });
-      if (item.hookCommand) lines.push({ cls: 'stream-line hook', text: `<span class="hook-label">command:</span> ${esc(item.hookCommand)}`, html: true, sessionID: sid });
-      if (item.hookContent) {
-        for (const l of truncContent(item.hookContent)) lines.push({ cls: 'stream-line hook', text: `<span class="hook-label">content:</span> ${esc(l)}`, html: true, sessionID: sid });
-      }
-      for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line hook', text: `<span class="hook-label">stdout:</span> ${esc(l)}`, html: true, sessionID: sid });
-      break;
-    }
-    case 'diagnostics': {
-      let label = '⚠ Diagnostics';
-      if (item.toolName) label += ' ' + item.toolName;
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}${esc(label)}</span>${tsHtml}`, html: true, sessionID: sid });
-      for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line diag', text: l, sessionID: sid });
-      break;
-    }
-    case 'debug': {
-      let label = '🔍 Debug';
-      if (item.toolName) label += ' ' + item.toolName;
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}${esc(label)}</span>${tsHtml}`, html: true, sessionID: sid });
-      for (const l of truncContent(item.content)) lines.push({ cls: 'stream-line debug', text: l, sessionID: sid });
-      break;
-    }
-    case 'user_text':
-      lines.push({ cls: agentTagCls, text: `<span class="tag-label">${agentLabel}${sep}👤 User Prompt</span>${tsHtml}`, html: true, sessionID: sid });
-      lines.push({ cls: 'stream-line user-prompt-block md-content', text: mdRender(item.content), html: true, sessionID: sid });
-      break;
-  }
-  lines.push({ cls: 'stream-line separator', text: '─'.repeat(60), sessionID: sid });
-  return lines;
-}
-function truncContent(content) {
-  const raw = content.split('\n');
-  return raw.length > MAX_LINES ? raw.slice(0, MAX_LINES).concat([`... (${raw.length - MAX_LINES} more lines)`]) : raw;
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Button / header refresh
-// ══════════════════════════════════════════════════════════════════════════════
-function refreshButtons() {
-  document.getElementById('btn-thinking').classList.toggle('on', showThinking);
-  document.getElementById('btn-tool-input').classList.toggle('on', showToolInput);
-  document.getElementById('btn-tool-output').classList.toggle('on', showToolOutput);
-  document.getElementById('btn-text').classList.toggle('on', showText);
-  document.getElementById('btn-hook').classList.toggle('on', showHook);
-  document.getElementById('btn-user-prompt').classList.toggle('on', showUserPrompt);
-  document.getElementById('btn-activity').classList.toggle('on', showActivity);
-  const btnTokenDisplay = document.getElementById('btn-token-display');
-  btnTokenDisplay.classList.toggle('on', true);
-  btnTokenDisplay.textContent = showTokenCount ? 'T' : '%';
-  btnTokenDisplay.setAttribute('data-tooltip', showTokenCount ? '上下文：Token数 ↔ 百分比切换' : '上下文：百分比 ↔ Token数切换');
-  document.getElementById('btn-autoscroll').classList.toggle('on', autoScroll);
-  document.getElementById('btn-tree-toggle').classList.toggle('on', showTree);
-  document.getElementById('btn-autodisco').classList.toggle('on', autoDiscovery);
-  // Session info
-  let info = '';
-  if (sessions.length === 0) info = 'Waiting...';
-  else if (sessions.length === 1) {
-    const s = sessions[0];
-    info = (folderName(s.projectPath) || s.title || s.id.slice(0, 14));
-  } else info = sessions.length + ' sessions';
-  if (!autoDiscovery) info += ' [paused]';
-  sessionInfo.textContent = info;
-  // Token info
-  computeTokensFromContext();
-  let tokStr = '';
-  if (totalInput > 0 || totalOutput > 0) {
-    tokStr = `${fmtTok(totalInput)} in / ${fmtTok(totalOutput)} out`;
-    if (totalCacheCreate > 0 || totalCacheRead > 0) {
-      tokStr += ` · cache ${fmtTok(totalCacheCreate)}+${fmtTok(totalCacheRead)}`;
-    }
-  }
-  tokenInfo.textContent = tokStr;
-  // Footer version
-  const vEl = document.getElementById('footer-version');
-  if (vEl) {
-    const v = appVersion ? `v${appVersion}` : '';
-    vEl.innerHTML = `${v ? v + ' · ' : ''}<a href="https://github.com/shuxuecode/claude-watch" target="_blank" rel="noopener" style="color:var(--dim);display:inline-flex;align-items:center;gap:3px"><svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" style="vertical-align:middle"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>claude-watch</a>`;
-  }
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Session ID tooltip
-// ══════════════════════════════════════════════════════════════════════════════
-let sessionIdTipTimer = null;
-let sessionIdTipEl = null;
-function showSessionIdTip(el) {
-  hideAllSessionIdTips();
-  const sid = el.getAttribute('data-sid');
-  if (!sid) return;
-  sessionIdTipTimer = setTimeout(() => {
-    const rect = el.getBoundingClientRect();
-    const tip = document.createElement('div');
-    tip.className = 'session-id-tip';
-    tip.style.top = (rect.bottom + 4) + 'px';
-    tip.style.left = rect.left + 'px';
-    tip.innerHTML = `<button class="tip-copy-btn" onclick="event.stopPropagation();copySessionId(this)">Copy</button><code>${esc(sid)}</code>`;
-    tip.onmouseenter = () => clearTimeout(sessionIdTipTimer);
-    tip.onmouseleave = () => { hideAllSessionIdTips(); };
-    document.body.appendChild(tip);
-    sessionIdTipEl = tip;
-    el._tip = tip;
-  }, 300);
-}
-function hideSessionIdTip(el) {
-  sessionIdTipTimer = setTimeout(() => {
-    if (el._tip) { el._tip.remove(); el._tip = null; }
-    sessionIdTipEl = null;
-  }, 200);
-}
-function hideAllSessionIdTips() {
-  clearTimeout(sessionIdTipTimer);
-  document.querySelectorAll('.session-id-tip').forEach(t => t.remove());
-  sessionIdTipEl = null;
-}
-function copySessionId(btn) {
-  const code = btn.parentElement.querySelector('code');
-  if (!code) return;
-  navigator.clipboard.writeText(code.textContent).then(() => {
-    btn.textContent = 'Copied!';
-    setTimeout(() => { btn.closest('.session-id-tip')?.remove(); }, 800);
-  });
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Actions
-// ══════════════════════════════════════════════════════════════════════════════
-function selectIndex(idx) {
-  if (idx >= 0 && idx < treeNodes.length) treeCursor = idx;
-}
-function treeClick(idx) {
-  selectIndex(idx);
-  const node = treeNodes[idx];
-  if (!node) return;
-  if (node.type === 'date-folder') {
-    node.collapsed = !node.collapsed;
-    folderCollapsed[node.date] = node.collapsed;
-    rebuildNodes();
-  } else if (node.type === 'session') {
-    const session = sessions.find(s => s.id === node.id);
-    if (session) {
-      session.collapsed = !session.collapsed;
-      if (!session.collapsed) session.pinned = true;
-    }
-    rebuildNodes();
-  } else if (node.type === 'main' || node.type === 'agent') {
-    toggleNodeVisibility(idx);
-    return;
-  } else if (node.type === 'task') {
-    loadBgTask(idx);
-    return;
-  }
-  renderAll();
-}
-function toggleNodeVisibility(idx) {
-  const node = treeNodes[idx];
-  if (!node) return;
-  const key = node.sessionID + ':' + node.id;
-  const wasEnabled = filters.get(key);
-  filters.set(key, !wasEnabled);
-  if (wasEnabled) visibleFilterCount--;
-  else visibleFilterCount++;
-  renderAll();
-}
-function loadBgTask(idx) {
-  const node = treeNodes[idx];
-  if (!node || node.type !== 'task') return;
-  if (!node.outputPath) return;
-  // Fetch the actual output file
-  fetch(`/api/task-output?path=${encodeURIComponent(node.outputPath)}`)
-    .then(r => r.json())
-    .then(data => {
-      const content = data.content || `[Error: ${data.error || 'unknown'}]`;
-      const statusIcon = node.isComplete ? '✓' : '⏳';
-      streamItems.push({
-        type: 'tool_output', sessionID: node.sessionID, agentID: node.parentAgentID || '',
-        agentName: '', toolName: `${statusIcon} ${node.name || 'bg-task'}`,
-        content: content,
-        timestamp: new Date(), toolID: '', durationMs: 0,
-        inputTokens: 0, outputTokens: 0, cacheCreationTokens: 0, cacheReadTokens: 0, model: '',
-      });
-      renderAll();
-    })
-    .catch(err => {
-      streamItems.push({
-        type: 'tool_output', sessionID: node.sessionID, agentID: node.parentAgentID || '',
-        agentName: '', toolName: `⏳ ${node.name || 'bg-task'}`,
-        content: `[Failed to load: ${err.message}]`,
-        timestamp: new Date(), toolID: '', durationMs: 0,
-        inputTokens: 0, outputTokens: 0, cacheCreationTokens: 0, cacheReadTokens: 0, model: '',
-      });
-      renderAll();
-    });
-}
-function soloSelected() {
-  const node = treeNodes[treeCursor];
-  if (!node || node.type === 'task') return;
-  if (isSoloed(node)) {
-    updateFilters();
-  } else {
-    filters.clear();
-    visibleFilterCount = 0;
-    if (node.type === 'session') {
-      const session = sessions.find(s => s.id === node.id);
-      if (session && session.collapsed) {
-        session.collapsed = false;
-        session.pinned = true;
-        rebuildNodes();
-      }
-      for (const a of node.agents) {
-        filters.set(node.id + ':' + a.id, true);
-        visibleFilterCount++;
-      }
-    } else if (node.type === 'main' || node.type === 'agent') {
-      filters.set(node.sessionID + ':' + node.id, true);
-      visibleFilterCount = 1;
-    }
-  }
-  renderAll();
-}
-function isSoloed(node) {
-  if (node.type === 'session') {
-    if (visibleFilterCount !== node.agents.length) return false;
-    for (const a of node.agents) {
-      if (!filters.get(node.id + ':' + a.id)) return false;
-    }
-    return true;
-  }
-  if (node.type === 'main' || node.type === 'agent') {
-    const key = node.sessionID + ':' + node.id;
-    return visibleFilterCount === 1 && filters.get(key);
-  }
-  return false;
-}
-function selectAll() {
-  updateFilters();
-  renderAll();
-}
-function removeSelectedSession() {
-  const node = treeNodes[treeCursor];
-  if (!node) return;
-  let sid;
-  if (node.type === 'session') sid = node.id;
-  else sid = node.sessionID;
-  if (!sid) return;
-  if (!confirm(`Remove session ${sid.slice(0, 12)}...?`)) return;
-  hiddenSessionIDs.add(sid);
-  _saveHiddenSessions();
-  const idx = sessions.findIndex(s => s.id === sid);
-  if (idx >= 0) {
-    sessions.splice(idx, 1);
-    sessionsMap.delete(sid);
-  }
-  sendCmd('removeSession', { sessionID: sid });
-  updateFilters();
-  rebuildNodes();
-  renderAll();
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Toggles
-// ══════════════════════════════════════════════════════════════════════════════
-function toggleThinking() { showThinking = !showThinking; needsFullRender = true;
-  visibleDirty = true; renderStream(); refreshButtons(); }
-function toggleToolInput() { showToolInput = !showToolInput; needsFullRender = true;
-  visibleDirty = true; renderStream(); refreshButtons(); }
-function toggleToolOutput() { showToolOutput = !showToolOutput; needsFullRender = true;
-  visibleDirty = true; renderStream(); refreshButtons(); }
-function toggleText() { showText = !showText; needsFullRender = true;
-  visibleDirty = true; renderStream(); refreshButtons(); }
-function toggleHook() { showHook = !showHook; needsFullRender = true;
-  visibleDirty = true; renderStream(); refreshButtons(); }
-function toggleUserPrompt() { showUserPrompt = !showUserPrompt; needsFullRender = true;
-  visibleDirty = true; renderStream(); refreshButtons(); }
-function toggleActivity() { showActivity = !showActivity; rebuildNodes(); scheduleRender(); refreshButtons(); }
-function toggleTokenDisplay() {
-  showTokenCount = !showTokenCount;
-  treeDirty = true;
-  scheduleRender();
-  refreshButtons();
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Tab switching & Token stats page
-// ══════════════════════════════════════════════════════════════════════════════
-// Token Statistics (completely independent from stream/context)
-// ══════════════════════════════════════════════════════════════════════════════
-const MODEL_COLORS = {
-  'claude-opus-4-7': '#e74c3c', 'claude-opus-4-6': '#c0392b', 'claude-opus-4-8': '#e67e22',
-  'claude-sonnet-4-6': '#3498db', 'claude-sonnet-4-5': '#2980b9',
-  'claude-haiku-4-5': '#5dade2', 'claude-haiku-4': '#1abc9c',
-  'glm-5.1': '#2980b9', 'glm-5': '#3498db', 'glm-4.7': '#5dade2',
-  'qwen3.7-max': '#55efc4', 'qwen3.6-plus': '#2ecc71', 'qwen3.5-plus': '#27ae60',
-  'qwen3-max': '#1abc9c',
-  'deepseek-v4-pro': '#9b59b6',
-  'kimi-k2.5': '#f39c12', 'kimi-k2.6': '#d35400', 'kimi-k2-thinking': '#d4a017',
-  'MiniMax-M2.5': '#1abc9c',
-};
-let _modelColorIdx = 0;
-function modelColor(name) {
-  if (MODEL_COLORS[name]) return MODEL_COLORS[name];
-  const fallback = ['#e74c3c','#3498db','#2ecc71','#9b59b6','#f39c12','#1abc9c','#e67e22','#c0392b','#5dade2','#d35400','#55efc4','#d4a017'];
-  return fallback[_modelColorIdx++ % fallback.length];
-}
-let tsDetailTab = 'daily';
-function switchTab(tab) {
-  currentTab = tab;
-  document.getElementById('main').style.display = tab === 'stream' ? 'flex' : 'none';
-  document.getElementById('tokens-page').style.display = tab === 'tokens' ? 'flex' : 'none';
-  document.getElementById('tab-stream').classList.toggle('on', tab === 'stream');
-  document.getElementById('tab-tokens').classList.toggle('on', tab === 'tokens');
-  document.getElementById('footer').style.display = tab === 'stream' ? 'flex' : 'none';
-  if (tab === 'tokens') renderTokenPage();
-}
-function tsSwitchDetail(n) {
-  tsDetailTab = n;
-  document.querySelectorAll('.tp-tab').forEach(t => t.classList.remove('active'));
-  document.querySelectorAll('.tp-tc').forEach(t => t.classList.remove('active'));
-  document.querySelector(`.tp-tab[data-tab="${n}"]`)?.classList.add('active');
-  document.getElementById('tp-tc-' + n)?.classList.add('active');
-}
-function fmtTS(n) {
-  if (!n) return '0';
-  return n.toLocaleString();
-}
-function fmtDateISO(d) {
-  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
-}
-// ── Heatmap: 52-week × 7-day GitHub-style grid ──
-function buildHeatmap(daily) {
-  const today = new Date();
-  const dailyTotalsMap = {};
-  for (const [k, d] of Object.entries(daily)) {
-    dailyTotalsMap[k] = d.input + d.output + d.cacheCreation + d.cacheRead;
-  }
-  // Start 52 weeks ago from Sunday
-  const startSunday = new Date(today);
-  startSunday.setDate(startSunday.getDate() - startSunday.getDay() - 52 * 7);
-  const startStr = fmtDateISO(startSunday);
-  // Compute maxVal only from dates within the heatmap window
-  let maxVal = 0;
-  for (const [k, v] of Object.entries(dailyTotalsMap)) {
-    if (k >= startStr && v > maxVal) maxVal = v;
-  }
-  const weeks = [];
-  const monthLabels = [];
-  let lastMonth = -1;
-  let currentSunday = new Date(startSunday);
-  for (let w = 0; w < 53; w++) {
-    const weekData = [];
-    for (let dow = 0; dow < 7; dow++) {
-      const d = new Date(currentSunday);
-      d.setDate(d.getDate() + dow);
-      const ds = fmtDateISO(d);
-      const val = dailyTotalsMap[ds] || 0;
-      weekData.push({ date: ds, val, future: d > today });
-      if (dow === 0) {
-        const m = d.getMonth();
-        if (m !== lastMonth) { monthLabels.push({ month: m, week: w }); lastMonth = m; }
-      }
-    }
-    weeks.push(weekData);
-    currentSunday.setDate(currentSunday.getDate() + 7);
-  }
-  function cellColor(val, future) {
-    if (future) return 'var(--bg3)';
-    if (val === 0) return '#0d423d';
-    const pct = maxVal > 0 ? val / maxVal : 0;
-    if (pct < 0.25) return '#0e6b5a';
-    if (pct < 0.5) return '#12b886';
-    if (pct < 0.75) return '#34d399';
-    return '#6ee7b7';
-  }
-  const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
-  let monthsHTML = '<div class="tp-hm-months">';
-  let prevWeek = 0;
-  for (const ml of monthLabels) {
-    const offset = ml.week - prevWeek;
-    if (offset > 0) monthsHTML += `<span style="width:${offset * 14}px"></span>`;
-    monthsHTML += `<span style="width:14px">${monthNames[ml.month]}</span>`;
-    prevWeek = ml.week + 1;
-  }
-  monthsHTML += '</div>';
-  const dayLabels = ['','Mon','','Wed','','Fri',''];
-  let gridHTML = '';
-  for (let dow = 0; dow < 7; dow++) {
-    gridHTML += `<div class="tp-hm-row"><span class="tp-hm-day-label">${dayLabels[dow]}</span>`;
-    for (let w = 0; w < weeks.length; w++) {
-      const cell = weeks[w][dow];
-      const bg = cellColor(cell.val, cell.future);
-      const tip = `${cell.date} · ${fmtTS(cell.val)} tokens`;
-      gridHTML += `<span class="tp-hm-cell" style="background:${bg}" title="${tip}"></span>`;
-    }
-    gridHTML += '</div>';
-  }
-  let legendHTML = '<div class="tp-hm-legend"><span>Less</span>';
-  legendHTML += '<span class="tp-hm-legend-cell" style="background:#0d423d"></span>';
-  legendHTML += '<span class="tp-hm-legend-cell" style="background:#0e6b5a"></span>';
-  legendHTML += '<span class="tp-hm-legend-cell" style="background:#12b886"></span>';
-  legendHTML += '<span class="tp-hm-legend-cell" style="background:#34d399"></span>';
-  legendHTML += '<span class="tp-hm-legend-cell" style="background:#6ee7b7"></span>';
-  legendHTML += '<span>More</span></div>';
-  return `<div class="tp-heatmap"><div class="tp-heatmap-inner">${monthsHTML}${gridHTML}</div>${legendHTML}</div>`;
-}
-// ── Trend: bar chart for last 30 days ──
-function buildTrend(daily) {
-  const keys = Object.keys(daily).sort();
-  const recentKeys = keys.slice(-30);
-  if (recentKeys.length === 0) return '<div style="color:var(--dim);padding:8px">暂无趋势数据</div>';
-  const values = recentKeys.map(k => {
-    const d = daily[k];
-    return d.input + d.output + d.cacheCreation + d.cacheRead;
-  });
-  const maxVal = Math.max(...values);
-  let barsHTML = '';
-  for (let i = 0; i < recentKeys.length; i++) {
-    const k = recentKeys[i];
-    const v = values[i];
-    const pct = maxVal > 0 ? (v / maxVal * 100) : 0;
-    const label = k.slice(5);
-    const tip = `${k}: ${fmtTS(v)}`;
-    const color = pct < 30 ? '#0e6b5a' : pct < 60 ? '#12b886' : pct < 80 ? '#34d399' : '#6ee7b7';
-    barsHTML += `<div class="tp-trend-bar-wrap"><div class="tp-trend-bar" style="height:${Math.max(pct, 3)}%;background:${color}" data-tip="${tip}"></div><span class="tp-trend-label">${label}</span></div>`;
-  }
-  const gridLines = `<div class="tp-trend-grid-lines">
-    <span style="font-size:9px;color:var(--dim);align-self:flex-start">${fmtTS(maxVal)}</span>
-    <div class="tp-trend-grid-line"></div>
-    <div class="tp-trend-grid-line"></div>
-    <span style="font-size:9px;color:var(--dim);align-self:center">${fmtTS(maxVal * 0.5)}</span>
-    <div class="tp-trend-grid-line"></div>
-    <span style="font-size:9px;color:var(--dim);align-self:flex-end">0</span>
-  </div>`;
-  return `<div class="tp-trend-bars">${gridLines}${barsHTML}</div>`;
-}
-// ── Model ranking sidebar ──
-function buildModelRank(mt, totalAll) {
-  const sorted = Object.entries(mt).sort((a, b) => {
-    const sA = a[1].input + a[1].output + a[1].cacheCreation + a[1].cacheRead;
-    const sB = b[1].input + b[1].output + b[1].cacheCreation + b[1].cacheRead;
-    return sB - sA;
-  });
-  let html = '<div class="tp-rank-title">🏆 Model Ranking</div>';
-  for (let i = 0; i < Math.min(sorted.length, 5); i++) {
-    const [name, m] = sorted[i];
-    const mTotal = m.input + m.output + m.cacheCreation + m.cacheRead;
-    const pct = totalAll > 0 ? (mTotal / totalAll * 100).toFixed(1) : '0';
-    const c = modelColor(name);
-    html += `<div class="tp-rank-item">
-      <span class="tp-rank-num">${i + 1}</span>
-      <span class="tp-rank-dot" style="background:${c}"></span>
-      <span class="tp-rank-name">${esc(name)}</span>
-      <span class="tp-rank-pct">${pct}%</span>
-    </div>`;
-  }
-  return html;
-}
-// ── Render entire token page ──
-function renderTokenPage() {
-  const t = tokenStatsData.totals;
-  const mt = tokenStatsData.modelTotals;
-  const daily = tokenStatsData.daily;
-  const totalAll = t.input + t.output + t.cacheCreation + t.cacheRead;
-  if (totalAll === 0) {
-    document.getElementById('tp-total-card').innerHTML = '<div style="color:var(--dim);padding:8px">暂无历史 Token 数据</div>';
-    document.getElementById('tp-stats-grid').innerHTML = '';
-    document.getElementById('tp-model-rank').innerHTML = '';
-    document.getElementById('tp-trend-card').innerHTML = '';
-    document.getElementById('tp-heatmap-card').innerHTML = '';
-    document.getElementById('tp-detail-tabs').innerHTML = '';
-    document.getElementById('tp-daily-table').innerHTML = '';
-    document.getElementById('tp-weekly-table').innerHTML = '';
-    document.getElementById('tp-monthly-table').innerHTML = '';
-    return;
-  }
-  const inputPct = totalAll > 0 ? (t.input / totalAll * 100).toFixed(1) : '0';
-  const outputPct = totalAll > 0 ? (t.output / totalAll * 100).toFixed(1) : '0';
-  const crPct = totalAll > 0 ? (t.cacheRead / totalAll * 100).toFixed(1) : '0';
-  const ccPct = totalAll > 0 ? (t.cacheCreation / totalAll * 100).toFixed(1) : '0';
-  const dailyAvg = t.days > 0 ? Math.round(totalAll / t.days).toLocaleString() : '—';
-  // 1. Total tokens card
-  document.getElementById('tp-total-card').innerHTML = `
-    <div class="tp-total-label">TOTAL TOKENS</div>
-    <div class="tp-total-value">${fmtTS(totalAll)}</div>
-    <div class="tp-footer-stats">
-      <span>Started <span class="tp-fv">${Object.keys(daily).sort()[0] || '—'}</span></span>
-      <span>Active <span class="tp-fv">${t.days} DAY</span></span>
-      <span>Models <span class="tp-fv">${Object.keys(mt).length}</span></span>
-    </div>`;
-  // 2. Stats grid
-  const stats = [
-    { l: 'Input', v: fmtTS(t.input), s: inputPct + '%' },
-    { l: 'Output', v: fmtTS(t.output), s: outputPct + '%' },
-    { l: 'Cache Read', v: fmtTS(t.cacheRead), s: crPct + '%' },
-    { l: 'Cache Create', v: fmtTS(t.cacheCreation), s: ccPct + '%' },
-    { l: 'Messages', v: fmtTS(t.messages), s: t.messages.toLocaleString() },
-    { l: 'Daily Avg', v: dailyAvg, s: 'tokens/day' },
-  ];
-  document.getElementById('tp-stats-grid').innerHTML = `<div class="tp-stat-grid">${stats.map(s => `<div class="tp-stat"><div class="tp-s-l">${s.l}</div><div class="tp-s-v">${s.v}</div><div style="font-size:9px;color:var(--dim)">${s.s}</div></div>`).join('')}</div>`;
-  // 3. Model ranking
-  document.getElementById('tp-model-rank').innerHTML = buildModelRank(mt, totalAll);
-  // 4. Usage Trend
-  document.getElementById('tp-trend-card').innerHTML = `<div class="tp-h3">📊 Usage Trend</div>${buildTrend(daily)}`;
-  // 5. Activity Heatmap
-  const tzOffset = -(new Date().getTimezoneOffset() / 60);
-  document.getElementById('tp-heatmap-card').innerHTML = `<div class="tp-h3">🗓 Activity Heatmap</div><span style="font-size:10px;color:var(--dim);float:right">UTC+${tzOffset.toFixed(0)}</span>${buildHeatmap(daily)}`;
-  // 6. Detail tabs
-  const dailyKeys = Object.keys(daily);
-  const weeklyCount = weeklyKeysFromDaily(dailyKeys).length;
-  const monthlyCount = monthlyKeysFromDaily(dailyKeys).length;
-  document.getElementById('tp-detail-tabs').innerHTML = `<div class="tp-tab ${tsDetailTab === 'daily' ? 'active' : ''}" data-tab="daily" onclick="tsSwitchDetail('daily')">Daily Breakdown (${dailyKeys.length})</div><div class="tp-tab ${tsDetailTab === 'weekly' ? 'active' : ''}" data-tab="weekly" onclick="tsSwitchDetail('weekly')">Weekly (${weeklyCount})</div><div class="tp-tab ${tsDetailTab === 'monthly' ? 'active' : ''}" data-tab="monthly" onclick="tsSwitchDetail('monthly')">Monthly (${monthlyCount})</div>`;
-  document.querySelectorAll('.tp-tc').forEach(tc => tc.classList.remove('active'));
-  document.getElementById('tp-tc-' + tsDetailTab)?.classList.add('active');
-  document.getElementById('tp-daily-table').innerHTML = renderPeriodTable(dailyKeys, daily, 'daily');
-  const weekly = aggregateWeekly(dailyKeys, daily);
-  document.getElementById('tp-weekly-table').innerHTML = renderPeriodTable(Object.keys(weekly), weekly, 'weekly');
-  const monthly = aggregateMonthly(dailyKeys, daily);
-  document.getElementById('tp-monthly-table').innerHTML = renderPeriodTable(Object.keys(monthly), monthly, 'monthly');
-}
-function weeklyKeysFromDaily(keys) {
-  const weeks = new Set();
-  for (const k of keys) { const d = new Date(k); const wk = getWeekKey(d); weeks.add(wk); }
-  return [...weeks];
-}
-function monthlyKeysFromDaily(keys) {
-  const months = new Set();
-  for (const k of keys) { months.add(k.slice(0, 7)); }
-  return [...months];
-}
-function getWeekKey(d) {
-  const dayNum = d.getDay() || 7; // Sunday (0) becomes 7 for ISO week calculation
-  const thursday = new Date(d);
-  thursday.setDate(d.getDate() + 4 - dayNum); // ISO Thursday offset
-  const year = thursday.getFullYear();
-  const jan1 = new Date(year, 0, 1);
-  const wk = Math.ceil(((thursday - jan1) / 86400000 + jan1.getDay() + 1) / 7);
-  return year + '-W' + String(wk).padStart(2, '0');
-}
-function aggregateWeekly(dailyKeys, daily) {
-  const result = {};
-  for (const k of dailyKeys) {
-    const d = new Date(k);
-    const wk = getWeekKey(d);
-    if (!result[wk]) result[wk] = { messages: 0, input: 0, output: 0, cacheCreation: 0, cacheRead: 0, models: {}, dateRange: k };
-    else result[wk].dateRange += ' ~ ' + k;
-    const day = daily[k];
-    result[wk].messages += day.messages;
-    result[wk].input += day.input;
-    result[wk].output += day.output;
-    result[wk].cacheCreation += day.cacheCreation;
-    result[wk].cacheRead += day.cacheRead;
-    for (const [mn, m] of Object.entries(day.models)) {
-      if (!result[wk].models[mn]) result[wk].models[mn] = { input: 0, output: 0, cacheCreation: 0, cacheRead: 0 };
-      result[wk].models[mn].input += m.input;
-      result[wk].models[mn].output += m.output;
-      result[wk].models[mn].cacheCreation += m.cacheCreation;
-      result[wk].models[mn].cacheRead += m.cacheRead;
-    }
-  }
-  return result;
-}
-function aggregateMonthly(dailyKeys, daily) {
-  const result = {};
-  for (const k of dailyKeys) {
-    const mk = k.slice(0, 7);
-    if (!result[mk]) result[mk] = { messages: 0, input: 0, output: 0, cacheCreation: 0, cacheRead: 0, models: {}, dateRange: k };
-    else result[mk].dateRange += ' ~ ' + k.slice(5);
-    const day = daily[k];
-    result[mk].messages += day.messages;
-    result[mk].input += day.input;
-    result[mk].output += day.output;
-    result[mk].cacheCreation += day.cacheCreation;
-    result[mk].cacheRead += day.cacheRead;
-    for (const [mn, m] of Object.entries(day.models)) {
-      if (!result[mk].models[mn]) result[mk].models[mn] = { input: 0, output: 0, cacheCreation: 0, cacheRead: 0 };
-      result[mk].models[mn].input += m.input;
-      result[mk].models[mn].output += m.output;
-      result[mk].models[mn].cacheCreation += m.cacheCreation;
-      result[mk].models[mn].cacheRead += m.cacheRead;
-    }
-  }
-  return result;
-}
-function renderPeriodTable(keys, data, type) {
-  const sorted = keys.sort((a, b) => b.localeCompare(a));
-  let html = '<table class="tp-table"><thead><tr><th>Date</th><th>Total</th><th>Input</th><th>Output</th><th>Cache Read</th><th>Cache Create</th><th>Messages</th><th>Models</th></tr></thead><tbody>';
-  for (const k of sorted) {
-    const d = data[k];
-    const total = d.input + d.output + d.cacheCreation + d.cacheRead;
-    const label = type === 'daily' ? k : k + '<br><small style="color:var(--dim)">' + esc(d.dateRange || '') + '</small>';
-    const modelsHtml = Object.entries(d.models).sort((a, b) => {
-      const sA = a[1].input + a[1].output + a[1].cacheCreation + a[1].cacheRead;
-      const sB = b[1].input + b[1].output + b[1].cacheCreation + b[1].cacheRead;
-      return sB - sA;
-    }).slice(0, 4).map(([mn, m]) => {
-      const mT = m.input + m.output + m.cacheCreation + m.cacheRead;
-      const c = modelColor(mn);
-      return `<span class="tp-mtag" style="background:${c}20;border-color:${c};color:${c}">${esc(mn)}: ${fmtTS(mT)}</span>`;
-    }).join(' ');
-    html += `<tr><td>${label}</td><td><b>${fmtTS(total)}</b></td><td>${fmtTS(d.input)}</td><td>${fmtTS(d.output)}</td><td>${fmtTS(d.cacheRead)}</td><td>${fmtTS(d.cacheCreation)}</td><td>${d.messages.toLocaleString()}</td><td class="tp-mbreak">${modelsHtml}</td></tr>`;
-  }
-  html += '</tbody></table>';
-  return html;
-}
-function toggleAutoScroll() { autoScroll = !autoScroll; if (autoScroll) streamEl.scrollTop = streamEl.scrollHeight; renderAll(); }
-function toggleTree() { showTree = !showTree; document.getElementById('tree-panel').classList.toggle('hidden', !showTree); }
-function toggleAutoDiscovery() { sendCmd('toggleAutoDiscovery'); }
-function scrollToTop() { streamEl.scrollTop = 0; autoScroll = false; renderAll(); }
-function scrollUp() { streamEl.scrollTop -= 80; autoScroll = false; renderAll(); }
-function scrollDown() { streamEl.scrollTop += 80; if (autoScroll) autoScroll = false; renderAll(); }
-function scrollToBottom() { streamEl.scrollTop = streamEl.scrollHeight; autoScroll = true; renderAll(); }
-// ══════════════════════════════════════════════════════════════════════════════
-// Tree panel resize
-// ══════════════════════════════════════════════════════════════════════════════
-(function setupResize() {
-  const panel = document.getElementById('tree-panel');
-  const handle = document.getElementById('tree-resize-handle');
-  let startX, startWidth;
-  handle.addEventListener('mousedown', (e) => {
-    e.preventDefault();
-    startX = e.clientX;
-    startWidth = panel.offsetWidth;
-    handle.classList.add('active');
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-  });
-  document.addEventListener('mousemove', (e) => {
-    if (!handle.classList.contains('active')) return;
-    const dx = e.clientX - startX;
-    const newWidth = startWidth + dx;
-    if (newWidth >= 180 && newWidth <= window.innerWidth * 0.6) {
-      panel.style.width = newWidth + 'px';
-    }
-  });
-  document.addEventListener('mouseup', () => {
-    handle.classList.remove('active');
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-  });
-})();
-// ══════════════════════════════════════════════════════════════════════════════
-// Auto-collapse
-// ══════════════════════════════════════════════════════════════════════════════
-function applyCollapsePolicy(duration) {
-  collapseAfter = duration;
-  if (collapseTimer) clearInterval(collapseTimer);
-  if (duration <= 0) return;
-  collapseTimer = setInterval(() => {
-    if (!collapseAfter) return;
-    const now = Date.now();
-    let changed = false;
-    for (const s of sessions) {
-      if (s.pinned || s.collapsed) continue;
-      if ((now - s.lastActivity) > collapseAfter) {
-        s.collapsed = true;
-        changed = true;
-      }
-    }
-    if (changed) {
-      rebuildNodes();
-      renderAll();
-    }
-  }, 5000);
-}
-function startActiveRefresh() {
-  if (activeRefreshTimer) clearInterval(activeRefreshTimer);
-  activeRefreshTimer = setInterval(() => {
-    updateTreeDots();
-    refreshButtons();
-  }, 15000);
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Scroll detection
-// ══════════════════════════════════════════════════════════════════════════════
-streamEl.addEventListener('scroll', () => {
-  const atBottom = streamEl.scrollHeight - streamEl.scrollTop - streamEl.clientHeight < 50;
-  if (atBottom && !autoScroll) autoScroll = true;
-  if (!atBottom && autoScroll) autoScroll = false;
-  refreshButtons();
-});
-// ══════════════════════════════════════════════════════════════════════════════
-// Helpers
-// ══════════════════════════════════════════════════════════════════════════════
-function updateFilters() {
-  filters.clear();
-  visibleFilterCount = 0;
-  for (const s of sessions) {
-    for (const a of s.agents) {
-      filters.set(s.id + ':' + a.id, true);
-      visibleFilterCount++;
-    }
-  }
-}
-function agentDisplayName(id, type) {
-  if (type) {
-    const idx = type.lastIndexOf(':');
-    if (idx >= 0 && idx < type.length - 1) return type.slice(idx + 1);
-    return type;
-  }
-  if (!id) return 'Main';
-  return 'Agent-' + id.slice(0, 7);
-}
-// Compute the minimum display length per agentID so that within each session,
-// no two agent IDs share the same truncated prefix. Minimum 7 chars.
-const agentIdDisplayLen = new Map();
-function computeAgentIdDisplayLengths() {
-  agentIdDisplayLen.clear();
-  for (const s of sessions) {
-    const agentIds = s.agents.filter(a => a.id).map(a => a.id);
-    if (agentIds.length === 0) continue;
-    // Find minimum length that makes all prefixes unique
-    let minLen = 7;
-    while (minLen < 21) {
-      const prefixes = agentIds.map(id => id.slice(0, minLen));
-      const unique = new Set(prefixes);
-      if (unique.size === agentIds.length) break;
-      minLen++;
-    }
-    for (const id of agentIds) {
-      agentIdDisplayLen.set(s.id + ':' + id, minLen);
-    }
-  }
-}
-function folderName(projectPath) {
-  if (!projectPath) return '';
-  const parts = projectPath.split('/');
-  return parts[parts.length - 1] || projectPath;
-}
-function esc(s) {
-  return (s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\\/g, '&#x5C;');
-}
-function fmtDur(ms) {
-  if (!ms || ms <= 0) return '';
-  if (ms < 1000) return `(${ms}ms)`;
-  if (ms < 60000) return `(${(ms / 1000).toFixed(1)}s)`;
-  return `(${(ms / 60000).toFixed(1)}m)`;
-}
-function formatTime(ms) {
-  if (!ms) return '';
-  const d = new Date(ms);
-  const pad = (n) => String(n).padStart(2, '0');
-  return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
-}
-function fmtTimestamp(ts) {
-  if (!ts) return '';
-  const d = ts instanceof Date ? ts : new Date(ts);
-  if (isNaN(d.getTime())) return '';
-  const pad = (n, len) => String(n).padStart(len, '0');
-  const ms = pad(d.getMilliseconds(), 3);
-  return `${pad(d.getFullYear(),4)}-${pad(d.getMonth()+1,2)}-${pad(d.getDate(),2)} ${pad(d.getHours(),2)}:${pad(d.getMinutes(),2)}:${pad(d.getSeconds(),2)}.${ms}`;
-}
-function fmtTok(n) {
-  if (!n) return '0';
-  if (n < 1000) return String(n);
-  if (n < 1000000) return (n / 1000).toFixed(2) + 'k';
-  return (n / 1000000).toFixed(2) + 'm';
-}
-function renderAll() {
-  needsFullRender = true;
-  visibleDirty = true;
-  renderTree();
-  renderStream();
-  refreshButtons();
-}
-function scheduleRender() {
-  if (!renderPending) {
-    renderPending = true;
-    requestAnimationFrame(() => {
-      renderPending = false;
-      renderTree();
-      renderStream();
-      refreshButtons();
-    });
-  }
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Export modal — session selection
-// ══════════════════════════════════════════════════════════════════════════════
-let exportModalSelected = new Set();
-function openExportModal() {
-  if (sessions.length === 0) {
-    const btn = document.getElementById('btn-export');
-    const orig = btn.textContent;
-    btn.textContent = '✕ 无会话';
-    setTimeout(() => { btn.textContent = orig; }, 2000);
-    return;
-  }
-  exportModalSelected = new Set(sessions.map(s => s.id));
-  renderModalSessionList();
-  updateModalCount();
-  document.getElementById('export-modal').style.display = 'flex';
-}
-function renderModalSessionList() {
-  const listEl = document.getElementById('modal-session-list');
-  const sorted = [...sessions].sort((a, b) => (a.colorRank || 0) - (b.colorRank || 0));
-  listEl.innerHTML = sorted.map(s => {
-    const color = idColor(s.colorRank || 0);
-    const project = folderName(s.projectPath) || s.projectPath || '';
-    const prefix = s.id.split('-')[0].toUpperCase();
-    const model = s.model || '';
-    const time = formatTime(s.birthtimeMs);
-    const checked = exportModalSelected.has(s.id) ? 'checked' : '';
-    const selectedClass = exportModalSelected.has(s.id) ? ' selected' : '';
-    return `<div class="modal-session-row${selectedClass}" data-sid="${esc(s.id)}" onclick="toggleModalSession('${esc(s.id)}', this)">
-      <input type="checkbox" class="modal-checkbox" data-sid="${esc(s.id)}" ${checked} onclick="event.stopPropagation(); toggleModalSession('${esc(s.id)}', this.parentElement)">
-      <span class="modal-session-prefix" style="color:${color}">${esc(prefix)}</span>
-      <div class="modal-session-info">
-        <span class="modal-session-project">${esc(project)}</span>
-        ${model ? `<span class="modal-session-model">${esc(model)}</span>` : ''}
-      </div>
-      ${time ? `<span class="modal-session-time">${esc(time)}</span>` : ''}
-    </div>`;
-  }).join('\n');
-}
-function toggleModalSession(sid, rowEl) {
-  if (exportModalSelected.has(sid)) {
-    exportModalSelected.delete(sid);
-  } else {
-    exportModalSelected.add(sid);
-  }
-  const checkbox = rowEl.querySelector('.modal-checkbox');
-  checkbox.checked = exportModalSelected.has(sid);
-  rowEl.classList.toggle('selected', exportModalSelected.has(sid));
-  updateModalCount();
-}
-function exportModalToggleAll(selectAll) {
-  if (selectAll) {
-    exportModalSelected = new Set(sessions.map(s => s.id));
-  } else {
-    exportModalSelected.clear();
-  }
-  document.querySelectorAll('#modal-session-list .modal-session-row').forEach(row => {
-    const sid = row.dataset.sid;
-    const checkbox = row.querySelector('.modal-checkbox');
-    checkbox.checked = exportModalSelected.has(sid);
-    row.classList.toggle('selected', exportModalSelected.has(sid));
-  });
-  updateModalCount();
-}
-function updateModalCount() {
-  const total = sessions.length;
-  const selected = exportModalSelected.size;
-  document.getElementById('modal-selected-count').textContent = `已选 ${selected} / ${total}`;
-  document.getElementById('modal-export-btn').disabled = selected === 0;
-}
-function closeExportModal() {
-  document.getElementById('export-modal').style.display = 'none';
-  exportModalSelected.clear();
-}
-// Esc key closes modal
-document.addEventListener('keydown', (e) => {
-  if (e.key === 'Escape') {
-    const modal = document.getElementById('export-modal');
-    if (modal.style.display !== 'none') {
-      closeExportModal();
-      e.stopPropagation();
-    }
-  }
-});
-function confirmExport() {
-  if (exportModalSelected.size === 0) return;
-  const selectedIds = new Set(exportModalSelected);
-  closeExportModal();
-  exportHTML(selectedIds);
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Export HTML
-// ══════════════════════════════════════════════════════════════════════════════
-function exportHTML(selectedIds = null) {
-  const theme = document.documentElement.getAttribute('data-theme') || 'dark';
-  // Collect sessions to export
-  let sidsInExport;
-  if (selectedIds) {
-    sidsInExport = selectedIds;
-  } else {
-    sidsInExport = new Set();
-    for (const item of visibleItems) {
-      if (item.sessionID) sidsInExport.add(item.sessionID);
-    }
-  }
-  const exportSessions = [];
-  for (const sid of sidsInExport) {
-    const s = sessionsMap.get(sid);
-    if (s) exportSessions.push(s);
-  }
-  // Sort by colorRank to match the order in the tree
-  exportSessions.sort((a, b) => (a.colorRank || 0) - (b.colorRank || 0));
-  // Build session list header
-  let sessionListHTML = '';
-  if (exportSessions.length > 0) {
-    const items = exportSessions.map(s => {
-      const color = idColor(s.colorRank || 0);
-      const project = folderName(s.projectPath) || s.projectPath || '';
-      const model = s.model || '';
-      return `<div class="export-session-item" data-sid="${esc(s.id)}" onclick="filterBySession('${esc(s.id)}')"><div class="export-item-top"><span class="export-project">${esc(project)}</span>${model ? ` <span class="export-model" style="color:var(--dim)">${esc(model)}</span>` : ''}</div><div class="export-item-sid" style="color:${color}">${esc(s.id)}</div></div>`;
-    }).join('\n');
-    sessionListHTML = `<div class="export-session-list">
-<div class="export-session-item export-all-btn active" onclick="filterBySession(null)">全部</div>
-${items}
-</div>`;
-  }
-  // Token info
-  computeTokensFromContext();
-  let tokenHTML = '';
-  if (totalInput > 0 || totalOutput > 0) {
-    let tokStr = `Input: ${fmtTok(totalInput)} · Output: ${fmtTok(totalOutput)}`;
-    if (totalCacheCreate > 0 || totalCacheRead > 0) tokStr += ` · Cache: ${fmtTok(totalCacheCreate)}+${fmtTok(totalCacheRead)}`;
-    tokenHTML = `<div class="export-meta-line" style="color:var(--dim)">Tokens: ${tokStr}</div>`;
-  }
-  // Filter state
-  const filterState = [];
-  if (!showThinking) filterState.push('thinking hidden');
-  if (!showToolInput) filterState.push('tools hidden');
-  if (!showToolOutput) filterState.push('output hidden');
-  if (!showText) filterState.push('text hidden');
-  if (!showHook) filterState.push('hook hidden');
-  let filterHTML = '';
-  if (filterState.length > 0) filterHTML = `<div class="export-meta-line" style="color:var(--dim)">Filters: ${filterState.join(', ')}</div>`;
-  // Export timestamp
-  const now = new Date();
-  const exportTime = fmtTimestamp(now);
-  const timeHTML = `<div class="export-meta-line" style="color:var(--dim)">Exported: ${exportTime}</div>`;
-  // Clone stream content and strip interactive elements
-  const clone = streamEl.cloneNode(true);
-  clone.querySelectorAll('.copy-btn').forEach(el => el.remove());
-  clone.querySelectorAll('[onclick]').forEach(el => el.removeAttribute('onclick'));
-  // Filter out stream lines from non-selected sessions
-  if (selectedIds) {
-    clone.querySelectorAll('[data-session-id]').forEach(el => {
-      if (!selectedIds.has(el.dataset.sessionId)) el.remove();
-    });
-  }
-  // Get the cleaned innerHTML
-  const streamHTML = clone.innerHTML;
-  // Get page CSS
-  const pageStyleEl = document.querySelector('style');
-  const appCSS = pageStyleEl ? pageStyleEl.textContent : '';
-  // Get highlight.js CSS from cache
-  const hlCSS = theme === 'dark' ? hljsDarkCSS : hljsLightCSS;
-  // Export-specific CSS
-  const exportCSS = `
-.export-session-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
-.export-session-item { cursor: pointer; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--border); opacity: 0.7; transition: all 0.15s; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
-.export-session-item:hover { opacity: 1; border-color: var(--dim); }
-.export-session-item.active { opacity: 1; border-color: var(--purple); background: var(--purple); color: var(--white); }
-.export-all-btn { font-weight: 600; align-items: center; }
-.export-item-top { display: flex; align-items: baseline; gap: 4px; }
-.export-item-sid { font-family: monospace; font-size: 10px; opacity: 0.8; }
-.export-session-item.active .export-item-sid { opacity: 1; color: var(--white); }
-.export-project { font-weight: 500; }
-.export-model { font-size: 11px; }
-.export-meta-line { padding: 2px 0; font-size: 11px; }
-.export-header { padding: 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 100; }
-.export-header h1 { margin: 0 0 4px 0; font-size: 16px; color: var(--white); }
-`;
-  // Export-specific JS for session filtering
-  const exportJS = `
-let _activeSid = null;
-function filterBySession(sid) {
-  _activeSid = sid;
-  const lines = document.querySelectorAll('#export-stream [data-session-id]');
-  lines.forEach(el => {
-    el.style.display = (sid === null || el.dataset.sessionId === sid) ? '' : 'none';
-  });
-  document.querySelectorAll('.export-session-item[data-sid]').forEach(el => {
-    el.classList.toggle('active', sid !== null && el.dataset.sid === sid);
-  });
-  document.querySelector('.export-all-btn').classList.toggle('active', sid === null);
-}
-`;
-  // Assemble complete HTML document
-  const htmlAttrs = theme === 'light' ? ' lang="en" data-theme="light"' : ' lang="en"';
-  const fullDoc = `<!DOCTYPE html>
-<html${htmlAttrs}>
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>claude-watch Export</title>
-<style>
-${appCSS}
-${hlCSS}
-${exportCSS}
-</style>
-</head>
-<body style="overflow-y:auto;height:auto">
-<div class="export-header">
-<h1>claude-watch Export</h1>
-${sessionListHTML}
-${tokenHTML}
-${filterHTML}
-${timeHTML}
-</div>
-<div id="export-stream" style="padding:8px 12px;font-size:12px">
-${streamHTML}
-</div>
-<script>${exportJS}<\/script>
-</body>
-</html>`;
-  // Blob download
-  const blob = new Blob([fullDoc], { type: 'text/html;charset=utf-8' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  let filePrefix;
-  if (sidsInExport.size === 1) {
-    filePrefix = [...sidsInExport][0].split('-')[0].toUpperCase();
-  } else {
-    filePrefix = 'multi';
-  }
-  const pad = (n, len) => String(n).padStart(len, '0');
-  const ts = `${pad(now.getFullYear(),4)}${pad(now.getMonth()+1,2)}${pad(now.getDate(),2)}-${pad(now.getHours(),2)}${pad(now.getMinutes(),2)}${pad(now.getSeconds(),2)}`;
-  a.download = `claude-watch-${filePrefix}-${ts}.html`;
-  a.href = url;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-  // Visual feedback
-  const btn = document.getElementById('btn-export');
-  const orig = btn.textContent;
-  btn.textContent = '✓';
-  setTimeout(() => { btn.textContent = orig; }, 2000);
-}
-// ══════════════════════════════════════════════════════════════════════════════
-// Theme toggle
-// ══════════════════════════════════════════════════════════════════════════════
-function applyTheme(theme) {
-  document.documentElement.setAttribute('data-theme', theme);
-  const btn = document.getElementById('btn-theme');
-  if (btn) {
-    btn.textContent = theme === 'dark' ? '🌙' : '☀️';
-    btn.setAttribute('data-tooltip', theme === 'dark' ? 'Switch to light' : 'Switch to dark');
-  }
-  // Swap highlight.js stylesheet for theme
-  const hlLink = document.querySelector('link[rel="stylesheet"][href*="github"]');
-  if (hlLink) {
-    hlLink.href = theme === 'dark' ? 'vendor/github-dark.min.css' : 'vendor/github-light.min.css';
-  }
-}
-function toggleTheme() {
-  const current = document.documentElement.getAttribute('data-theme') || 'dark';
-  const next = current === 'dark' ? 'light' : 'dark';
-  localStorage.setItem('theme', next);
-  applyTheme(next);
-}
-// Apply saved theme on load (default dark)
-(function() {
-  const saved = localStorage.getItem('theme');
-  applyTheme(saved || 'dark');
-})();
-// ══════════════════════════════════════════════════════════════════════════════
-// Init
-// ══════════════════════════════════════════════════════════════════════════════
-// Apply collapse-after from URL param
-const urlParams = new URLSearchParams(location.search);
-const ca = urlParams.get('collapseAfter');
-if (ca) {
-  applyCollapsePolicy(parseInt(ca) || 0);
-}
-connect();
-</script>
+<script src="js/shared.js"></script>
+<script src="js/stream.js"></script>
+<script src="js/token.js"></script>
+<script src="js/app.js"></script>
 </body>
 </html>