claude-code-watch 0.1.5 → 0.2.1

package/public/index.html

@@ -6,460 +6,31 @@
 <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>
 
 <div id="header">
   <button class="btn on" id="tab-stream" onclick="switchTab('stream')">📡 Stream</button>
   <button class="btn" id="tab-tokens" onclick="switchTab('tokens')">📊 Tokens</button>
-  <span class="sep">│</span>
-  <button class="btn on" id="btn-thinking" onclick="toggleThinking()" data-tooltip="Toggle thinking">🧠 Thinking</button>
-  <button class="btn on" id="btn-tool-input" onclick="toggleToolInput()" data-tooltip="Toggle tool input">🔧 Tools</button>
-  <button class="btn on" id="btn-tool-output" onclick="toggleToolOutput()" data-tooltip="Toggle tool output">📤 Output</button>
-  <button class="btn on" id="btn-text" onclick="toggleText()" data-tooltip="Toggle text responses">💬 Text</button>
-  <button class="btn on" id="btn-hook" onclick="toggleHook()" data-tooltip="Toggle hook output">🪝 Hook</button>
-  <button class="btn on" id="btn-user-prompt" onclick="toggleUserPrompt()" data-tooltip="Toggle user prompt">👤 Prompt</button>
-  <span class="sep">│</span>
-  <button class="btn on" id="btn-autoscroll" onclick="toggleAutoScroll()" data-tooltip="Auto-scroll">⇣ Auto</button>
-  <button class="btn" id="btn-tree-toggle" onclick="toggleTree()" data-tooltip="Toggle tree panel">📂 Tree</button>
-  <span class="sep">│</span>
-  <span id="session-info">Connecting...</span>
+  <span class="stream-only sep">│</span>
+  <button class="btn on stream-only" id="btn-thinking" onclick="toggleThinking()" data-tooltip="Toggle thinking">🧠 Thinking</button>
+  <button class="btn on stream-only" id="btn-tool-input" onclick="toggleToolInput()" data-tooltip="Toggle tool input">🔧 Tools</button>
+  <button class="btn on stream-only" id="btn-tool-output" onclick="toggleToolOutput()" data-tooltip="Toggle tool output">📤 Output</button>
+  <button class="btn on stream-only" id="btn-text" onclick="toggleText()" data-tooltip="Toggle text responses">💬 Text</button>
+  <button class="btn on stream-only" id="btn-hook" onclick="toggleHook()" data-tooltip="Toggle hook output">🪝 Hook</button>
+  <button class="btn on stream-only" id="btn-user-prompt" onclick="toggleUserPrompt()" data-tooltip="Toggle user prompt">👤 Prompt</button>
+  <span class="stream-only sep">│</span>
+  <button class="btn on stream-only" id="btn-autoscroll" onclick="toggleAutoScroll()" data-tooltip="Auto-scroll">⇣ Auto</button>
+  <button class="btn stream-only" id="btn-tree-toggle" onclick="toggleTree()" data-tooltip="Toggle tree panel">📂 Tree</button>
+  <span class="stream-only sep">│</span>
+  <span class="stream-only" id="session-info">Connecting...</span>
   <div class="auto">
-    <button class="btn btn-icon" id="btn-export" onclick="openExportModal()" data-tooltip="导出 HTML">💾</button>
+    <button class="btn btn-icon stream-only" id="btn-export" onclick="openExportModal()" data-tooltip="导出 HTML">💾</button>
     <button class="btn btn-icon" id="btn-theme" onclick="toggleTheme()" data-tooltip="Toggle theme">🌙</button>
-    <button class="btn on" id="btn-autodisco" onclick="toggleAutoDiscovery()" data-tooltip="Auto-discover">🔍 Auto</button>
-    <span class="sep">│</span>
-    <span id="token-info"></span>
+    <button class="btn on stream-only" id="btn-autodisco" onclick="toggleAutoDiscovery()" data-tooltip="Auto-discover">🔍 Auto</button>
+    <span class="stream-only sep">│</span>
+    <span class="stream-only" id="token-info"></span>
   </div>
 </div>
 
@@ -488,19 +59,25 @@ 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>
-      <div class="tp-box" id="tp-stats-grid"></div>
-      <div class="tp-box" id="tp-model-rank"></div>
-    </div>
-    <div class="tp-right">
-      <div class="tp-box" id="tp-trend-card"></div>
-      <div class="tp-box" id="tp-heatmap-card"></div>
-    </div>
+    <div class="tp-box" id="tp-total-card"></div>
+    <div class="tp-box" id="tp-stats-grid"></div>
+    <div class="tp-box" id="tp-model-rank"></div>
+  </div>
+  <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-row2">
+    <div class="tp-box" id="tp-trend-card"></div>
+    <div class="tp-box" id="tp-heatmap-card"></div>
   </div>
-  <!-- Detail table -->
   <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 +92,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 +116,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>