npm - sandtable - Versions diffs - 0.3.1 → 1.0.1 - Mend

sandtable 0.3.1 → 1.0.1

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

Files changed (14) hide show

package/README.md +157 -22
package/dashboard/dashboard.html +1320 -834
package/harness/install-hooks.sh +40 -4
package/package.json +1 -1
package/server.js +54 -3
package/src/builder/build.js +121 -230
package/src/check/check.js +137 -0
package/src/cli/sandtable.js +202 -8
package/src/contract/default-contract.json +21 -0
package/src/contract/loader.js +203 -0
package/src/progress/parser.js +302 -0
package/src/scanner/scan.js +47 -251
package/src/scanner/scan.js.v0.4.bak +415 -0
package/templates/.sandtable.template.json +24 -26

package/dashboard/dashboard.html CHANGED Viewed

@@ -3,740 +3,955 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>沙盘 v0.3 · Sandtable</title>
+<title>Sandtable IDE · 沙盘 v0.3</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
+<script>
+tailwind.config = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        "on-primary-container": "#fefcff",
+        "on-primary": "#ffffff",
+        "primary": "#0058be",
+        "surface-container": "#eceef0",
+        "on-primary-fixed": "#001a42",
+        "on-secondary-fixed": "#002113",
+        "on-secondary-fixed-variant": "#005236",
+        "surface-bright": "#f7f9fb",
+        "inverse-on-surface": "#eff1f3",
+        "on-error": "#ffffff",
+        "primary-fixed-dim": "#adc6ff",
+        "surface-variant": "#e0e3e5",
+        "tertiary-container": "#a36700",
+        "on-surface": "#191c1e",
+        "on-tertiary-fixed-variant": "#653e00",
+        "secondary": "#006c49",
+        "secondary-fixed": "#6ffbbe",
+        "on-secondary": "#ffffff",
+        "background": "#f7f9fb",
+        "on-background": "#191c1e",
+        "on-error-container": "#93000a",
+        "surface-container-lowest": "#ffffff",
+        "surface-tint": "#005ac2",
+        "surface-dim": "#d8dadc",
+        "inverse-surface": "#2d3133",
+        "on-tertiary": "#ffffff",
+        "error": "#ba1a1a",
+        "surface-container-highest": "#e0e3e5",
+        "outline-design": "#727785",
+        "primary-fixed": "#d8e2ff",
+        "inverse-primary": "#adc6ff",
+        "surface": "#f7f9fb",
+        "secondary-container": "#6cf8bb",
+        "surface-container-high": "#e6e8ea",
+        "tertiary-fixed": "#ffddb8",
+        "surface-container-low": "#f2f4f6",
+        "on-surface-variant": "#424754",
+        "tertiary-fixed-dim": "#ffb95f",
+        "on-tertiary-container": "#fffbff",
+        "secondary-fixed-dim": "#4edea3",
+        "on-secondary-container": "#00714d",
+        "on-primary-fixed-variant": "#004395",
+        "error-container": "#ffdad6",
+        "primary-container": "#2170e4",
+        "outline-variant": "#c2c6d6",
+        "tertiary": "#825100",
+        "on-tertiary-fixed": "#2a1700"
+      },
+      borderRadius: {
+        "DEFAULT": "0.25rem",
+        "lg": "0.5rem",
+        "xl": "0.75rem",
+        "full": "9999px"
+      },
+      spacing: {
+        "base": "4px",
+        "xl": "32px",
+        "md": "16px",
+        "xs": "4px",
+        "container-margin": "24px",
+        "sm": "8px",
+        "lg": "24px",
+        "gutter": "16px"
+      },
+      fontFamily: {
+        "code-md": ["JetBrains Mono"],
+        "code-sm": ["JetBrains Mono"],
+        "display-lg": ["Inter"],
+        "headline-sm": ["Inter"],
+        "headline-md": ["Inter"],
+        "body-md": ["Inter"],
+        "title-md": ["Inter"],
+        "body-lg": ["Inter"],
+        "label-caps": ["Inter"]
+      },
+      fontSize: {
+        "code-md": ["14px", { lineHeight: "20px", fontWeight: "500" }],
+        "code-sm": ["12px", { lineHeight: "16px", fontWeight: "500" }],
+        "display-lg": ["32px", { lineHeight: "40px", letterSpacing: "-0.02em", fontWeight: "600" }],
+        "headline-sm": ["20px", { lineHeight: "28px", fontWeight: "600" }],
+        "headline-md": ["24px", { lineHeight: "32px", letterSpacing: "-0.01em", fontWeight: "600" }],
+        "body-md": ["14px", { lineHeight: "20px", fontWeight: "400" }],
+        "title-md": ["16px", { lineHeight: "24px", fontWeight: "600" }],
+        "body-lg": ["16px", { lineHeight: "26px", fontWeight: "400" }],
+        "label-caps": ["12px", { lineHeight: "16px", letterSpacing: "0.05em", fontWeight: "700" }]
+      }
+    }
+  }
+}
+</script>
 <style>
-:root {
-  --bg: #f0f2f5; --card: #fff; --border: #e2e6ea;
-  --text: #1a1d23; --muted: #8b919b; --light: #5a6072;
-  --header-bg: #111827; --brief-bg: #16213e;
-  --past-bg: #e9edf2; --past-border: #c5cdd8;
-  --current-bg: #fff9e6; --current-border: #f0c000;
-  --future-bg: #f4f4f5; --future-border: #dcdce0;
-  --accent: #00b894; --accent2: #0984e3;
-  --completed: #00b894; --in_progress: #f0a000; --pending: #a0a7b4; --blocked: #e17055;
-  --secondary: #6c5ce7; --link: #0984e3;
-  --priority-must: #e17055; --priority-should: #f0a000; --priority-can: #a0a7b4;
-  --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 12px rgba(0,0,0,.08);
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined', sans-serif;
+  font-weight: normal; font-style: normal;
+  font-size: 20px; line-height: 1;
+  letter-spacing: normal; text-transform: none;
+  display: inline-block; white-space: nowrap;
+  word-wrap: normal; direction: ltr;
+  -webkit-font-smoothing: antialiased;
+}
+.pulse-border {
+  animation: pulse-border 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@keyframes pulse-border {
+  0%, 100% { border-color: rgba(59, 130, 246, 1); box-shadow: 0 0 0px rgba(59, 130, 246, 0); }
+  50% { border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 0 8px rgba(59, 130, 246, 0.4); }
+}
+.accordion-content {
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  max-height: 2000px; opacity: 1; overflow: hidden;
+}
+.accordion-content.collapsed {
+  max-height: 0; opacity: 0;
 }
-*{margin:0;padding:0;box-sizing:border-box}
-body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans SC',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
-/* Header */
-#header{background:linear-gradient(135deg,#0f1419,#1a2332);color:#e8eaed;padding:10px 24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.2);z-index:10}
-#header h1{font-size:15px;font-weight:700;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
-#header h1::before{content:'◆';color:var(--accent);font-size:10px}
-.badge{background:rgba(255,255,255,.1);padding:2px 10px;border-radius:10px;font-size:10px;font-weight:500;letter-spacing:.3px}
-#header .right{font-size:11px;display:flex;align-items:center;gap:12px;color:#9aa0ab;position:relative}
-.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;box-shadow:0 0 6px rgba(0,184,148,.4);animation:pulse 2s infinite}
-@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
-/* Brief */
-#brief{background:linear-gradient(135deg,#16213e,#0f3460);color:#b0bec5;padding:10px 24px;font-size:12px;line-height:1.6;border-bottom:2px solid rgba(0,184,148,.2)}
-#brief strong{color:var(--accent);font-size:11px;margin-right:10px;text-transform:uppercase;letter-spacing:.5px}
-#brief a{color:#64b5f6;text-decoration:none;cursor:pointer;transition:color .15s}
-#brief a:hover{color:#90caf9;text-decoration:underline}
-/* Tree tab bar — inside left panel */
-#tree-tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap;align-items:center}
-#tree-tabs button{padding:4px 10px;border:1px solid #d5dce6;background:#fff;border-radius:7px;font-size:10.5px;cursor:pointer;color:var(--muted);transition:all .15s;white-space:nowrap;font-weight:500}
-#tree-tabs button:hover{border-color:var(--accent);color:var(--accent);background:#f0fdf9}
-#tree-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
-/* Main dual layout */
-#main{display:flex;flex:1;min-height:0}
-#left{width:40%;border-right:1px solid var(--border);overflow-y:auto;padding:20px 24px;background:#fafbfc;transition:background .5s ease}
-#right{width:60%;overflow-y:auto;padding:20px 24px;background:#f8f9fb;transition:background .5s ease}
-#left::-webkit-scrollbar,#right::-webkit-scrollbar{width:5px}
-#left::-webkit-scrollbar-thumb,#right::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}
-/* Filter-connected: unified panel tint when doc filter is active */
-body.filter-active #left, body.filter-active #right{background:#eef2f7}
-body.filter-active #left{border-right-color:#d5dce6}
-.tree-card.filter-match{border-color:#4a90d9!important;box-shadow:0 0 0 3px rgba(74,144,217,.2)!important;background:#fff!important}
-.tree-card.filter-match .tc-head{background:rgba(74,144,217,.06)}
-.rp-card.filter-match{border-color:#4a90d9!important;box-shadow:0 0 0 3px rgba(74,144,217,.2)!important}
-.panel-title{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;color:var(--text);letter-spacing:-.2px}
-.panel-title .count{font-size:11px;color:var(--muted);font-weight:500}
-/* Category section */
-.cat-section{margin-bottom:16px}
-.cat-header{font-size:11px;font-weight:600;padding:5px 10px;border-radius:5px;margin-bottom:8px;display:flex;justify-content:space-between;letter-spacing:.2px}
-.cat-header.primary{background:linear-gradient(135deg,#e6f9f1,#d4f5e8);color:#00855a}
-.cat-header.secondary{background:#f1f2f5;color:var(--muted)}
-/* Element card */
-.card{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .15s;cursor:default}
-.card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
-.card.active-filter{border-color:var(--link);box-shadow:0 0 0 2px rgba(9,132,227,.25)}
-.card[data-tg="past"]{background:var(--past-bg);border-color:var(--past-border)}
-.card[data-tg="current"]{background:var(--current-bg);border-color:var(--current-border);box-shadow:0 2px 8px rgba(240,192,0,.12)}
-.card[data-tg="future"]{background:var(--future-bg);border-color:var(--future-border)}
-.card.secondary{border-left:3px solid var(--secondary)}
-.card-head{padding:8px 14px;font-size:12.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px}
-.card-head.completed{background:linear-gradient(135deg,#e6f9f1,#d4f5e8);color:#00855a}
-.card-head.in_progress{background:linear-gradient(135deg,#fff8e6,#fff3d4);color:#b06d00}
-.card-head.pending{background:#f8f9fb;color:var(--muted)}
-.card-head.blocked{background:linear-gradient(135deg,#fff0ed,#ffe8e3);color:#c04030}
-.card-head > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.card-meta{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:400;flex-shrink:0}
-.card-type{background:rgba(0,0,0,.06);padding:2px 6px;border-radius:4px;font-size:9px;color:var(--muted);font-weight:500}
-.card-src{font-size:9px;background:#e8f1fd;padding:2px 7px;border-radius:4px;color:var(--link);cursor:pointer;text-decoration:none;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;transition:all .15s}
-.card-src:hover{background:var(--link);color:#fff}
-.card-summary{padding:6px 14px;font-size:11.5px;color:var(--light);line-height:1.5}
-.card-tags{padding:3px 14px 8px}
-.tag{display:inline-block;background:rgba(0,0,0,.05);padding:2px 7px;border-radius:4px;font-size:9.5px;color:var(--light);margin-right:4px;margin-bottom:2px;font-weight:500}
-.card-children{border-top:1px solid rgba(0,0,0,.06);padding:4px 12px 8px}
-.sub{font-size:11.5px;padding:4px 0;display:flex;align-items:center;gap:6px;color:var(--light);transition:background .15s;border-radius:4px;cursor:default}
-.sub:hover{background:rgba(0,0,0,.03)}
-/* Time badge */
-.tbadge{font-size:9px;padding:1px 7px;border-radius:4px;font-weight:600;letter-spacing:.2px}
-.tb-past{background:rgba(96,125,139,.12);color:#546e7a}
-.tb-current{background:rgba(240,160,0,.12);color:#b06d00}
-.tb-future{background:rgba(0,0,0,.06);color:var(--muted)}
-/* Event stream */
-.ev-item{padding:10px 12px;border-left:4px solid var(--border);margin-bottom:6px;border-radius:0 6px 6px 0;background:#fff;font-size:11.5px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .15s}
-.ev-item:hover{box-shadow:var(--shadow-md)}
-.ev-item.must{border-left-width:6px;background:#fffef7;box-shadow:0 2px 8px rgba(225,112,85,.1)}
-.ev-item.t1{border-left-color:#e17055} .ev-item.t2{border-left-color:#6c5ce7}
-.ev-item.t3{border-left-color:#0984e3} .ev-item.t4{border-left-color:#00b894}
-.ev-item.t5{border-left-color:#f0a000} .ev-item.t6{border-left-color:#795548}
-.ev-item.t7{border-left-color:#e84393}
-.ev-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
-.ev-title{font-weight:600;flex:1;line-height:1.4;font-size:12px}
-.ev-type{font-size:9.5px;padding:2px 7px;border-radius:4px;color:#fff;font-weight:600;white-space:nowrap;letter-spacing:.3px}
-.ev-t1{background:#e17055} .ev-t2{background:#6c5ce7} .ev-t3{background:#0984e3}
-.ev-t4{background:#00b894} .ev-t5{background:#f0a000} .ev-t6{background:#795548} .ev-t7{background:#e84393}
-.ev-meta{font-size:10px;color:var(--muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
-.ev-time{font-family:'SF Mono',Consolas,monospace;font-size:11px;color:var(--text);font-weight:600;background:rgba(0,0,0,.04);padding:1px 6px;border-radius:3px}
-.ev-ref{color:var(--link);cursor:pointer;text-decoration:none;font-weight:500}
-.ev-ref:hover{text-decoration:underline;color:#0066cc}
-.ev-actor{font-style:italic;color:var(--light)}
-.ev-tag{background:rgba(0,0,0,.05);padding:1px 5px;border-radius:3px;font-size:9px;color:var(--light)}
-.ev-pdot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:3px;flex-shrink:0}
-.ev-p1{background:var(--priority-must);box-shadow:0 0 4px rgba(225,112,85,.4)}
-.ev-p2{background:var(--priority-should)} .ev-p3{background:var(--priority-can)}
-.ev-day{font-size:11px;font-weight:700;padding:12px 0 6px;border-bottom:1.5px solid var(--border);margin-bottom:6px;color:var(--light);letter-spacing:.3px}
-.ev-day:first-child{padding-top:0}
-.ev-item.hl{animation:flash .8s ease-in-out 3;background:#fff9c4!important}
-@keyframes flash{0%,100%{background:#fff9c4}50%{background:#ffe082}}
-/* Footer — removed conventions bar */
+.hover-scale {
+  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
+}
+.hover-scale:hover { transform: scale(1.02); }
+.hide-scrollbar::-webkit-scrollbar { display: none; }
+.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
-/* Floating panel */
-#float{position:fixed;top:0;left:0;width:480px;max-width:94vw;height:100vh;background:#fff;box-shadow:8px 0 30px rgba(0,0,0,.18);z-index:1000;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1)}
-#float.hide{transform:translateX(-110vw)}
-#float.fr{left:auto;right:0;box-shadow:-8px 0 30px rgba(0,0,0,.18)}
-#float.fr.hide{transform:translateX(110vw)}
-#float-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--header-bg);color:#fff;font-size:13px;font-weight:600}
-#float-body{flex:1;overflow-y:auto;padding:16px 20px;font-size:12.5px;line-height:1.8;white-space:pre-wrap;word-break:break-word;font-family:'SF Mono',Consolas,monospace;color:var(--text)}
-#float-body::-webkit-scrollbar{width:5px}
-#float-body::-webkit-scrollbar-thumb{background:#d0d5dd;border-radius:3px}
-#float-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;opacity:.8;transition:opacity .15s;padding:0 4px}
-#float-close:hover{opacity:1}
-#overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.25);z-index:999;backdrop-filter:blur(2px)}
-#overlay.hide{display:none}
-/* Milestone tooltip */
-.mtip{display:none;position:absolute;background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:10.5px;box-shadow:var(--shadow-md);z-index:50;max-width:260px;line-height:1.5;left:100%;top:0;margin-left:10px}
-.sub:hover .mtip{display:block}
-.empty{text-align:center;padding:50px 20px;color:var(--muted)}
-.empty h3{font-size:15px;margin-bottom:8px;font-weight:600}
-.empty p{font-size:12px;color:var(--muted)}
-/* Filter bar */
-#filter-bar{display:none;padding:8px 12px;background:#e8f1fd;border:1px solid #b8d4f7;border-radius:8px;margin-bottom:12px;font-size:11px;align-items:center;gap:8px}
-#filter-bar.show{display:flex}
-#filter-bar .ftext{flex:1;color:var(--link);font-weight:500}
-#filter-bar .fclear{cursor:pointer;background:var(--link);color:#fff;border:none;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:600;transition:opacity .15s}
-#filter-bar .fclear:hover{opacity:.85}
+/* Scrollbar */
+#left::-webkit-scrollbar, #right::-webkit-scrollbar { width: 5px; }
+#left::-webkit-scrollbar-thumb, #right::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 3px; }
-/* Thread card */
-.th-card{border:1.5px solid #d5dce6;border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:box-shadow .2s}
-.th-card:hover{box-shadow:var(--shadow-md)}.th-card.th-active{border-color:#4a90d9;box-shadow:0 0 0 2px rgba(74,144,217,.3)}
-.th-head{padding:10px 14px;background:#f4f6f9;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;user-select:none;transition:background .15s}
-.th-head:hover{background:#edf0f4}
-.th-head .th-title{font-weight:600;font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.th-head .th-count{font-size:10px;color:var(--muted);white-space:nowrap;background:rgba(0,0,0,.06);padding:2px 8px;border-radius:10px}
-.th-head .th-arrow{font-size:10px;color:var(--muted);transition:transform .2s}
-.th-card.open .th-arrow{transform:rotate(90deg)}
-.th-body{display:none;border-top:1px solid var(--border)}
-.th-card.open .th-body{display:block}
-.th-body .ev-item{margin:0;border-radius:0;border-left-width:3px;box-shadow:none}
-.th-body .ev-item:last-child{border-radius:0 0 8px 0}
-/* Tag filter bar */
-#tag-bar{padding:8px 0;margin-bottom:10px;border-bottom:1px solid var(--border)}
-.tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:2px 0}
-.tag-row .tag-cat{font-size:9px;color:var(--muted);font-weight:600;white-space:nowrap;padding:2px 6px 2px 0;min-width:32px;text-align:right}
-.tag-row .tag-btn{font-size:10px;padding:2px 8px;border-radius:10px;border:1px solid #e0e3e8;background:#fff;cursor:pointer;color:var(--light);transition:all .15s;white-space:nowrap;font-weight:500}
-.tag-row .tag-btn em{font-style:normal;font-size:8px;color:var(--muted);margin-left:2px}
-.tag-row .tag-btn:hover{border-color:var(--accent);color:var(--accent);background:#f0fdf9}
-.tag-row .tag-btn.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}
-.tag-row .tag-btn.on em{color:rgba(255,255,255,.7)}
-.tag-row .tag-more{font-size:9px;color:var(--link);padding:2px 4px;cursor:pointer;text-decoration:underline}
-.tag-row .tag-more:hover{color:#0066cc}
-/* Semi-expanded thread card */
-.th-card.semi .th-body{display:block}
-/* semi mode: JS renders only latest event + view-more button, no CSS hiding needed */
-.th-more{cursor:pointer;padding:8px 12px;text-align:center;font-size:11px;color:var(--link);font-weight:500;background:#f8f9fb;border-top:1px dashed var(--border);transition:background .15s}
-.th-more:hover{background:#edf0f4;color:#0066cc}
-.th-collapse{cursor:pointer;padding:8px 12px;text-align:center;font-size:11px;color:var(--muted);font-weight:500;background:#f8f9fb;border-top:1px solid var(--border);transition:all .15s}
-.th-collapse:hover{background:#edf0f4;color:var(--light)}
-.th-typebar{font-size:10px;color:var(--muted);padding:4px 12px;background:#f8f9fb;border-bottom:1px solid var(--border)}
-/* Sort + filter toolbar */
-#toolbar{display:flex;align-items:center;gap:8px;padding:6px 0;margin-bottom:6px;flex-wrap:wrap}
-#toolbar .sort-group{display:flex;gap:0;border:1px solid #d5dce6;border-radius:6px;overflow:hidden}
-#toolbar .sort-btn{padding:3px 10px;font-size:10px;border:none;background:#fff;color:var(--muted);cursor:pointer;font-weight:500;transition:all .15s}
-#toolbar .sort-btn.on{background:var(--accent);color:#fff}
-#toolbar .sort-btn+.sort-btn{border-left:1px solid #d5dce6}
-#toolbar .sort-label{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
-#toolbar .fclear{display:none;cursor:pointer;background:var(--link);color:#fff;border:none;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:600}
-#toolbar .fclear.show{display:inline-block}
-#toolbar .fclear:hover{opacity:.85}
-#toolbar .ftext{font-size:10px;color:var(--link);font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+/* Floating panel */
+#float { position: fixed; top: 0; left: 0; width: 480px; max-width: 94vw; height: 100vh;
+  background: #fff; box-shadow: 8px 0 30px rgba(0,0,0,.18); z-index: 1000;
+  display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.4,0,.2,1); }
+#float.hide { transform: translateX(-110vw); }
+#float.fr { left: auto; right: 0; box-shadow: -8px 0 30px rgba(0,0,0,.18); }
+#float.fr.hide { transform: translateX(110vw); }
+#float-head { display: flex; justify-content: space-between; align-items: center;
+  padding: 12px 16px; background: #111827; color: #fff; font-size: 13px; font-weight: 600; }
+#float-body { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 12.5px;
+  line-height: 1.8; white-space: pre-wrap; word-break: break-word;
+  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; color: #191c1e; }
+#float-body::-webkit-scrollbar { width: 5px; }
+#float-body::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 3px; }
+#float-close { background: none; border: none; color: #fff; font-size: 22px;
+  cursor: pointer; opacity: .8; transition: opacity .15s; padding: 0 4px; }
+#float-close:hover { opacity: 1; }
+#overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+  background: rgba(0,0,0,.25); z-index: 999; backdrop-filter: blur(2px); }
+#overlay.hide { display: none; }
+/* Token tooltip */
+#token-tip { display: none; position: absolute; top: 100%; right: 0; margin-top: 8px;
+  background: #1a2332; color: #e8eaed; padding: 10px 14px; border-radius: 8px;
+  font-size: 11px; line-height: 1.6; z-index: 100;
+  box-shadow: 0 4px 20px rgba(0,0,0,.35); min-width: 200px; white-space: nowrap; }
+#token-tip.show { display: block; }
+#token-tip .tip-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
+#token-tip .tip-row .tip-name { color: #b0bec5; }
+#token-tip .tip-row .tip-val { color: #fff; font-weight: 600; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; }
+#token-tip .tip-divider { border-top: 1px solid rgba(255,255,255,.1); margin: 4px 0; }
+/* Filter-connected panels */
+body.filter-active #left, body.filter-active #right { background: #eef2f7; }
+body.filter-active #left { border-right-color: #d5dce6; }
 /* Event tag clickable */
-.ev-tag{cursor:pointer;transition:all .15s}
-.ev-tag:hover{background:var(--accent);color:#fff}
-/* Roadmap version card */
-.rp-card{border:1.5px solid #d5dce6;border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:box-shadow .2s,border-color .3s}
-.rp-card:hover{box-shadow:var(--shadow-md)}
-.rp-card.rp-done{background:#f0fdf6;border-color:#b7e4cf}
-.rp-card.rp-mixed{background:#fffef7;border-color:#f0d000}
-.rp-head{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;user-select:none;transition:background .15s;border-bottom:1px solid transparent}
-.rp-card.open .rp-head{border-bottom-color:var(--border)}
-.rp-head:hover{background:rgba(0,0,0,.02)}
-.rp-head .rp-title{font-weight:600;font-size:12.5px;flex:1;min-width:0}
-.rp-head .rp-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
-.rp-head .rp-ratio{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px}
-.rp-head .rp-ratio.all-done{background:#d4f5e8;color:#00855a}
-.rp-head .rp-ratio.partial{background:#fff3d4;color:#b06d00}
-.rp-head .rp-arrow{font-size:10px;color:var(--muted);transition:transform .2s}
-.rp-card.open .rp-arrow{transform:rotate(90deg)}
-.rp-body{display:none}
-.rp-card.open .rp-body{display:block}
-.rp-card.semi .rp-body{display:block}
-.rp-child{padding:7px 14px;border-bottom:1px dotted #eef0f4;font-size:11px;display:flex;align-items:center;gap:8px;transition:background .1s}
-.rp-child:hover{background:rgba(0,0,0,.015)}
-.rp-child:last-child{border-bottom:none}
-.rp-child .rp-cicon{font-size:11px;flex-shrink:0}
-.rp-child .rp-cname{flex:1;font-weight:500;color:var(--text)}
-.rp-child .rp-ctime{font-size:9.5px;color:var(--muted);font-family:'SF Mono',Consolas,monospace;white-space:nowrap}
-.rp-child .rp-clabel{font-size:9px;padding:1px 6px;border-radius:3px;font-weight:500;white-space:nowrap}
-.rp-child .rp-clabel.done{background:#e6f9f1;color:#00855a}
-.rp-child .rp-clabel.progress{background:#fff8e6;color:#b06d00}
-.rp-child .rp-clabel.pending-label{background:#f1f2f5;color:var(--muted)}
-.rp-more{cursor:pointer;padding:8px 12px;text-align:center;font-size:11px;color:var(--link);font-weight:500;border-top:1px dashed var(--border);transition:background .15s}
-.rp-more:hover{background:#edf0f4;color:#0066cc}
-/* Enhanced tree card */
-.tree-card{border:1px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .15s,border-color .3s;cursor:pointer}
-.tree-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
-.tree-card.secondary{border-left:3px solid var(--secondary)}
-.tree-card[data-tg="past"]{background:var(--past-bg);border-color:var(--past-border)}
-.tree-card[data-tg="current"]{background:var(--current-bg);border-color:var(--current-border)}
-.tree-card[data-tg="future"]{background:var(--future-bg);border-color:var(--future-border)}
-.tree-card .tc-head{padding:10px 14px;font-size:12px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:8px}
-.tree-card .tc-head > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.tree-card .tc-meta{display:flex;align-items:center;gap:6px;font-size:9.5px;flex-shrink:0;color:var(--muted)}
-.tree-card .tc-time{font-family:'SF Mono',Consolas,monospace;font-size:9.5px;color:var(--muted)}
-.tc-head .tc-time{font-size:10px}
-.tree-card .tc-summary{padding:4px 12px 8px;font-size:11px;color:var(--light);line-height:1.5}
-.tree-card .tc-tags{padding:2px 12px 6px}
-.tree-card .tc-src{padding:2px 12px 6px}
-.tree-card .tc-src a{font-size:9.5px;background:#e8f1fd;padding:2px 7px;border-radius:4px;color:var(--link);cursor:pointer;text-decoration:none;transition:all .15s}
-.tree-card .tc-src a:hover{background:var(--link);color:#fff}
-.tree-card .tc-type{font-size:9px;padding:1px 6px;border-radius:4px;font-weight:500}
-.tree-card .tc-type.status-done{background:#e6f9f1;color:#00855a}
-.tree-card .tc-type.status-progress{background:#fff8e6;color:#b06d00}
-.tree-card .tc-type.status-pending{background:#f1f2f5;color:var(--muted)}
-/* Token display in header */
-#token-today{font-size:10px;color:#9aa0ab;cursor:default;position:relative;white-space:nowrap}
-#token-today:hover{color:#b8c0c8}
-#token-tip{display:none;position:absolute;top:100%;right:0;margin-top:8px;background:#1a2332;color:#e8eaed;padding:10px 14px;border-radius:8px;font-size:11px;line-height:1.6;z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.35);min-width:200px;white-space:nowrap}
-#token-tip.show{display:block}
-#token-tip .tip-row{display:flex;justify-content:space-between;gap:16px;padding:2px 0}
-#token-tip .tip-row .tip-name{color:#b0bec5}
-#token-tip .tip-row .tip-val{color:#fff;font-weight:600;font-family:'SF Mono',Consolas,monospace}
-#token-tip .tip-divider{border-top:1px solid rgba(255,255,255,.1);margin:4px 0}
+.ev-tag { cursor: pointer; transition: all .15s; }
+.ev-tag:hover { background: #10B981; color: #fff; }
+/* Thread card */
+.th-card { border: 1.5px solid #c2c6d6; border-radius: 10px; margin-bottom: 10px;
+  overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06);
+  transition: box-shadow .2s; }
+.th-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
+.th-card.th-active { border-color: #4a90d9; box-shadow: 0 0 0 2px rgba(74,144,217,.3); }
+.th-head { padding: 10px 14px; background: #f2f4f6; cursor: pointer;
+  display: flex; justify-content: space-between; align-items: center; gap: 8px;
+  user-select: none; transition: background .15s; }
+.th-head:hover { background: #eceef0; }
+.th-head .th-title { font-weight: 600; font-size: 12px; flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.th-head .th-count { font-size: 10px; color: #727785; white-space: nowrap;
+  background: rgba(0,0,0,.06); padding: 2px 8px; border-radius: 10px; }
+.th-body { display: none; border-top: 1px solid #c2c6d6; }
+.th-card.open .th-body { display: block; }
+.th-card.semi .th-body { display: block; }
+.th-body .ev-item { margin: 0; border-radius: 0; border-left-width: 3px; box-shadow: none; }
+.th-body .ev-item:last-child { border-radius: 0 0 8px 0; }
+/* Event items (non-threaded) */
+.ev-item { padding: 10px 12px; border-left: 4px solid #c2c6d6; margin-bottom: 6px;
+  border-radius: 0 6px 6px 0; background: #fff; font-size: 11.5px;
+  box-shadow: 0 1px 3px rgba(0,0,0,.06); transition: box-shadow .2s, transform .15s; }
+.ev-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
+.ev-item.t1 { border-left-color: #e17055; } .ev-item.t2 { border-left-color: #6c5ce7; }
+.ev-item.t3 { border-left-color: #0984e3; } .ev-item.t4 { border-left-color: #00b894; }
+.ev-item.t5 { border-left-color: #f0a000; } .ev-item.t6 { border-left-color: #795548; }
+.ev-item.t7 { border-left-color: #e84393; }
+.ev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
+.ev-title { font-weight: 600; flex: 1; line-height: 1.4; font-size: 12px; }
+.ev-type { font-size: 9.5px; padding: 2px 7px; border-radius: 4px; color: #fff;
+  font-weight: 600; white-space: nowrap; letter-spacing: .3px; }
+.ev-t1 { background: #e17055; } .ev-t2 { background: #6c5ce7; }
+.ev-t3 { background: #0984e3; } .ev-t4 { background: #00b894; }
+.ev-t5 { background: #f0a000; } .ev-t6 { background: #795548; } .ev-t7 { background: #e84393; }
+.ev-meta { font-size: 10px; color: #727785; margin-top: 4px; display: flex;
+  gap: 8px; flex-wrap: wrap; align-items: center; }
+.ev-time { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 11px;
+  color: #191c1e; font-weight: 600; background: rgba(0,0,0,.04);
+  padding: 1px 6px; border-radius: 3px; }
+.ev-ref { color: #0984e3; cursor: pointer; text-decoration: none; font-weight: 500; }
+.ev-ref:hover { text-decoration: underline; color: #0066cc; }
+.ev-actor { font-style: italic; color: #5a6072; }
+.ev-tag { background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 3px;
+  font-size: 9px; color: #5a6072; }
+.ev-day { font-size: 12px; font-weight: 700; padding: 12px 0 6px;
+  border-bottom: 1.5px solid #c2c6d6; margin-bottom: 6px;
+  color: #5a6072; letter-spacing: .3px; }
+.ev-day:first-child { padding-top: 0; }
+/* Thread more/collapse buttons */
+.th-more { cursor: pointer; padding: 8px 12px; text-align: center; font-size: 11px;
+  color: #0984e3; font-weight: 500; background: #f8f9fb;
+  border-top: 1px dashed #c2c6d6; transition: background .15s; }
+.th-more:hover { background: #edf0f4; color: #0066cc; }
+.th-collapse { cursor: pointer; padding: 8px 12px; text-align: center; font-size: 11px;
+  color: #727785; font-weight: 500; background: #f8f9fb;
+  border-top: 1px solid #c2c6d6; transition: all .15s; }
+.th-collapse:hover { background: #edf0f4; color: #5a6072; }
+.th-typebar { font-size: 10px; color: #727785; padding: 4px 12px;
+  background: #f8f9fb; border-bottom: 1px solid #c2c6d6; }
+/* Roadmap version cards (old format fallback) */
+.rp-card { border: 1.5px solid #c2c6d6; border-radius: 10px; margin-bottom: 10px;
+  overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06);
+  transition: box-shadow .2s, border-color .3s; }
+.rp-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
+.rp-card.rp-done { background: #f0fdf6; border-color: #b7e4cf; }
+.rp-card.rp-mixed { background: #fffef7; border-color: #f0d000; }
+.rp-head { padding: 10px 14px; cursor: pointer; display: flex;
+  justify-content: space-between; align-items: center; gap: 8px;
+  user-select: none; transition: background .15s; border-bottom: 1px solid transparent; }
+.rp-card.open .rp-head { border-bottom-color: #c2c6d6; }
+.rp-head:hover { background: rgba(0,0,0,.02); }
+.rp-head .rp-title { font-weight: 600; font-size: 12.5px; flex: 1; min-width: 0; }
+.rp-body { display: none; }
+.rp-card.open .rp-body { display: block; }
+.rp-card.semi .rp-body { display: block; }
+.rp-child { padding: 7px 14px; border-bottom: 1px dotted #eef0f4; font-size: 11px;
+  display: flex; align-items: center; gap: 8px; transition: background .1s; }
+.rp-child:hover { background: rgba(0,0,0,.015); }
+.rp-child:last-child { border-bottom: none; }
+.rp-more { cursor: pointer; padding: 8px 12px; text-align: center; font-size: 11px;
+  color: #0984e3; font-weight: 500; border-top: 1px dashed #c2c6d6; transition: background .15s; }
+.rp-more:hover { background: #edf0f4; color: #0066cc; }
+/* Tree cards */
+.tree-card { border: 1px solid #c2c6d6; border-radius: 8px; margin-bottom: 8px;
+  overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06);
+  transition: box-shadow .2s, transform .15s, border-color .3s; cursor: pointer; }
+.tree-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); }
+.tree-card.filter-match { border-color: #4a90d9 !important;
+  box-shadow: 0 0 0 3px rgba(74,144,217,.2) !important; background: #fff !important; }
+.tc-head { padding: 10px 14px; font-size: 12px; font-weight: 600;
+  display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.tc-head > span:first-child { flex: 1; min-width: 0; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.tc-meta { display: flex; align-items: center; gap: 6px; font-size: 9.5px;
+  flex-shrink: 0; color: #727785; }
+.tc-time { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 9.5px; color: #727785; }
+.tc-summary { padding: 4px 12px 8px; font-size: 11px; color: #5a6072; line-height: 1.5; }
+.tc-tags { padding: 2px 12px 6px; }
+.tc-src { padding: 2px 12px 6px; }
+.tc-src a { font-size: 9.5px; background: #e8f1fd; padding: 2px 7px; border-radius: 4px;
+  color: #0984e3; cursor: pointer; text-decoration: none; transition: all .15s; }
+.tc-src a:hover { background: #0984e3; color: #fff; }
+.tc-type { font-size: 9px; padding: 1px 6px; border-radius: 4px; font-weight: 500; }
+.tc-type.status-done { background: #e6f9f1; color: #00855a; }
+.tc-type.status-progress { background: #fff8e6; color: #b06d00; }
+.tc-type.status-pending { background: #f1f2f5; color: #727785; }
+.tree-card.secondary { border-left: 3px solid #6c5ce7; }
+/* Tag bar */
+#tag-bar { padding: 8px 0; margin-bottom: 10px; border-bottom: 1px solid #c2c6d6; }
+.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 2px 0; }
+.tag-row .tag-cat { font-size: 9px; color: #727785; font-weight: 600; white-space: nowrap;
+  padding: 2px 6px 2px 0; min-width: 32px; text-align: right; }
+.tag-row .tag-btn { font-size: 10px; padding: 2px 8px; border-radius: 10px;
+  border: 1px solid #e0e3e8; background: #fff; cursor: pointer; color: #5a6072;
+  transition: all .15s; white-space: nowrap; font-weight: 500; }
+.tag-row .tag-btn em { font-style: normal; font-size: 8px; color: #727785; margin-left: 2px; }
+.tag-row .tag-btn:hover { border-color: #10B981; color: #10B981; background: #f0fdf9; }
+.tag-row .tag-btn.on { background: #10B981; color: #fff; border-color: #10B981; font-weight: 600; }
+.tag-row .tag-btn.on em { color: rgba(255,255,255,.7); }
+.tag-row .tag-more { font-size: 9px; color: #0984e3; padding: 2px 4px; cursor: pointer; text-decoration: underline; }
+.tag-row .tag-more:hover { color: #0066cc; }
+/* Category header */
+.cat-header { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 5px;
+  margin-bottom: 8px; display: flex; justify-content: space-between; letter-spacing: .2px; }
+.cat-header.primary { background: linear-gradient(135deg,#e6f9f1,#d4f5e8); color: #00855a; }
+.cat-header.secondary { background: #f1f2f5; color: #727785; }
+.cat-section { margin-bottom: 16px; }
+/* Tag chip */
+.tag { display: inline-block; background: rgba(0,0,0,.05); padding: 2px 7px; border-radius: 4px;
+  font-size: 9.5px; color: #5a6072; margin-right: 4px; margin-bottom: 2px; font-weight: 500; }
+/* Empty state */
+.empty { text-align: center; padding: 50px 20px; color: #727785; }
+/* Filter bar (inside toolbar area) */
+#toolbar .fclear { display: none; cursor: pointer; background: #0984e3; color: #fff;
+  border: none; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; }
+#toolbar .fclear.show { display: inline-block; }
+#toolbar .fclear:hover { opacity: .85; }
+#toolbar .sort-btn.on { background: #10B981; color: #fff; border-color: #10B981; }
+#toolbar .ftext { font-size: 10px; color: #0984e3; font-weight: 500;
+  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rp-head .rp-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #727785; }
+.rp-head .rp-ratio { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
+.rp-head .rp-ratio.all-done { background: #d4f5e8; color: #00855a; }
+.rp-head .rp-ratio.partial { background: #fff3d4; color: #b06d00; }
+.rp-head .rp-arrow { font-size: 10px; color: #727785; transition: transform .2s; }
+.rp-card.open .rp-arrow { transform: rotate(90deg); }
+.rp-child .rp-cicon { font-size: 11px; flex-shrink: 0; }
+.rp-child .rp-cname { flex: 1; font-weight: 500; color: #191c1e; }
+.rp-child .rp-ctime { font-size: 9.5px; color: #727785;
+  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; white-space: nowrap; }
+.rp-child .rp-clabel { font-size: 9px; padding: 1px 6px; border-radius: 3px; font-weight: 500; white-space: nowrap; }
+.rp-child .rp-clabel.done { background: #e6f9f1; color: #00855a; }
+.rp-child .rp-clabel.progress { background: #fff8e6; color: #b06d00; }
+.rp-child .rp-clabel.pending-label { background: #f1f2f5; color: #727785; }
+/* Responsive stacking */
+@media (max-width: 768px) {
+  #main { flex-direction: column; }
+  #left { width: 100%; border-right: none; border-bottom: 1px solid #c2c6d6; flex: none; max-height: 50vh; }
+  #right { width: 100%; flex: 1; }
+}
 </style>
 </head>
-<body>
-<header id="header">
-  <div><h1>沙盘 · Sandtable</h1><span class="badge">v0.3</span></div>
-  <div class="right"><span id="token-today">工具token：--<span id="token-tip"></span></span><span id="upd">加载中...</span><span class="dot"></span></div>
-</header>
-<div id="brief"><strong>简报</strong><span id="btext">加载中...</span></div>
-<div id="main">
-  <section id="left">
-    <div class="panel-title">节点树 <span class="count" id="cnt">0 项</span></div>
-    <div id="tree-tabs">
-      <button class="on" data-c="all">全部</button>
-      <button data-c="roadmap">路线图</button>
-      <button data-c="decision">决策</button>
-      <button data-c="spec">规格</button>
-      <button data-c="convention">纪律</button>
-      <button data-c="ops">运维</button>
-      <button data-c="archive">档案</button>
+<body class="bg-surface text-on-surface font-body-md h-screen overflow-hidden flex flex-col relative">
+<!-- TopNavBar -->
+<nav class="bg-surface border-b border-outline-variant flex justify-between items-center w-full px-lg h-16 shrink-0 relative z-10">
+  <div class="flex items-center gap-xl h-full">
+    <div class="font-headline-md text-headline-md font-extrabold text-primary shrink-0">Sandtable IDE</div>
+    <div class="flex overflow-x-auto hide-scrollbar h-full items-end" id="nav-tabs">
+      <button class="px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale" data-c="all">All</button>
+      <button class="px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale" data-c="roadmap">Roadmap</button>
+      <button class="px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale" data-c="decision">Decisions</button>
+      <button class="px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale" data-c="spec">Specs</button>
+      <button class="px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale" data-c="convention">Conventions</button>
+      <button class="px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale" data-c="ops">Ops</button>
+      <button class="px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale" data-c="archive">Archive</button>
+    </div>
+  </div>
+  <div class="flex items-center gap-md shrink-0">
+    <span class="font-label-caps text-label-caps text-on-surface-variant relative" id="token-today">
+      Usage: --<span id="token-tip"></span>
+    </span>
+    <span class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_6px_rgba(16,185,129,.4)] animate-pulse"></span>
+  </div>
+</nav>
+<!-- Briefing Bar -->
+<div class="bg-surface-container-low border-b border-outline-variant px-lg py-sm flex items-center shrink-0 relative z-10">
+  <div class="flex items-center gap-sm">
+    <span class="material-symbols-outlined text-on-surface-variant text-[18px]">info</span>
+    <span class="font-code-md text-code-md text-on-surface-variant" id="btext">Loading...</span>
+  </div>
+</div>
+<!-- Main Split -->
+<main class="flex-1 flex overflow-hidden relative z-10" id="main">
+  <!-- Left Column (40%) -->
+  <section class="w-[40%] max-md:w-full flex flex-col border-r border-outline-variant bg-surface-container-lowest overflow-y-auto" id="left">
+    <!-- Track Switcher (hidden when no tracks) -->
+    <div class="px-lg py-md flex gap-sm bg-surface-bright border-b border-outline-variant shrink-0 hidden" id="track-switcher">
+      <!-- dynamically filled -->
+    </div>
+    <!-- Category Tabs (secondary nav inside left panel) -->
+    <div class="px-lg py-md flex gap-sm bg-surface-bright border-b border-outline-variant shrink-0 hidden" id="tree-tabs-inline">
+      <!-- dynamically filled -->
+    </div>
+    <!-- Tree Content -->
+    <div class="flex-1 overflow-y-auto p-lg" id="tree">
+      <div class="empty"><h3 class="font-headline-sm text-headline-sm mb-sm">Loading...</h3><p class="font-body-md text-body-md text-on-surface-variant">Fetching data...</p></div>
     </div>
-    <div id="tree"></div>
   </section>
-  <section id="right">
-    <div class="panel-title">事件流 <span class="count" id="evcnt"></span></div>
-    <div id="toolbar"><span class="sort-label">排列</span><span class="sort-group"><button class="sort-btn on" data-mode="grouped">按事件分类</button><button class="sort-btn" data-mode="flat">按触发时间</button></span><span class="ftext"></span><button class="fclear">✕ 清除</button></div>
-    <div id="tag-bar"></div>
-	    <div id="events"></div>
+  <!-- Right Column (60%) -->
+  <section class="w-[60%] max-md:w-full flex flex-col bg-surface-bright overflow-y-auto" id="right">
+    <!-- Filter Bar -->
+    <div class="h-14 border-b border-outline-variant flex items-center justify-between px-lg bg-surface-container-lowest shrink-0">
+      <div class="flex items-center gap-md">
+        <span class="material-symbols-outlined text-on-surface-variant">filter_list</span>
+        <span class="font-title-md text-title-md text-on-surface">Event Stream</span>
+        <span class="font-code-sm text-code-sm text-on-surface-variant" id="evcnt"></span>
+      </div>
+      <div class="flex gap-sm" id="toolbar">
+        <span class="font-code-sm text-code-sm text-on-surface-variant flex items-center gap-xs">
+          <span class="material-symbols-outlined text-[16px]">sort</span>
+        </span>
+        <button class="text-on-surface-variant hover:text-on-surface font-code-sm text-code-sm border border-outline-variant px-sm py-xs rounded hover:bg-surface-container-low transition-colors hover-scale sort-btn on" data-mode="grouped">By Category</button>
+        <button class="text-on-surface-variant hover:text-on-surface font-code-sm text-code-sm border border-outline-variant px-sm py-xs rounded hover:bg-surface-container-low transition-colors hover-scale sort-btn" data-mode="track">By Track</button>
+        <button class="text-on-surface-variant hover:text-on-surface font-code-sm text-code-sm border border-outline-variant px-sm py-xs rounded hover:bg-surface-container-low transition-colors hover-scale sort-btn" data-mode="flat">By Time</button>
+        <span class="ftext"></span>
+        <button class="fclear">Clear</button>
+      </div>
+    </div>
+    <!-- Tag Bar -->
+    <div class="px-lg" id="tag-bar"></div>
+    <!-- Events Content -->
+    <div class="flex-1 overflow-y-auto px-lg pb-lg" id="events"></div>
   </section>
-</div>
+</main>
+<!-- Floating Preview Panel -->
 <div id="overlay" class="hide"></div>
 <div id="float" class="hide">
-  <div id="float-head"><span id="ftitle">预览</span><button id="float-close">&times;</button></div>
-  <div id="float-body">加载中...</div>
+  <div id="float-head"><span id="ftitle">Preview</span><button id="float-close">&times;</button></div>
+  <div id="float-body">Loading...</div>
 </div>
 <script>
 // ====== DATA ======
 var T = null; // timeline data
+var R = null; // roadmap data (tracks + phases)
 var activeCat = 'all';
-var activeDocFilter = null; // current doc filter (null = show all)
-var activeTagFilter = null; // current tag filter (null = show all)
-var expandedThreads = {}; // threads user has manually expanded
-var expandedRpCards = {}; // roadmap version cards user has manually expanded
-var sortMode = 'grouped'; // 'grouped' | 'flat'
+var activeTrack = null; // current track filter (null = All)
+var activeDocFilter = null;
+var activeTagFilter = null;
+var expandedThreads = {};
+var expandedRpCards = {};
+var expandedMilestones = {}; // track milestone accordion state
+var sortMode = 'grouped'; // 'grouped' | 'track' | 'flat'
 var TAG_CATS = {
-  "模块":["CLI","dashboard","builder","server","skill","npm","扫描器"],
-  "主题":["事件流","token","UX","安装方案","安全","编码","配置","IDE适配","双视图","设计原则","libero"],
-  "阶段":["v0.3","MVP","里程碑","集成","方向决策"],
-  "动作":["架构","设计","实现","调研","文档","流程","教训","命令","IDE","init","uninstall","summarize","scan"]
+  "模块": ["CLI","dashboard","builder","server","skill","npm","扫描器"],
+  "主题": ["事件流","token","UX","安装方案","安全","编码","配置","IDE适配","双视图","设计原则","libero"],
+  "阶段": ["v0.3","MVP","里程碑","集成","方向决策"],
+  "动作": ["架构","设计","实现","调研","文档","流程","教训","命令","IDE","init","uninstall","summarize","scan"]
 };
-function catOfTag(tag){for(var c in TAG_CATS){if(TAG_CATS[c].indexOf(tag)!==-1)return c}return "其他"}
-function evHasTag(ev,tag){return ev.tags&&ev.tags.indexOf(tag)!==-1}
-function setTagFilter(tag){if(activeTagFilter===tag){activeTagFilter=null}else{activeTagFilter=tag};renderTagBar();renderEvents()}
-function renderTagBar(){
-  var bar=document.getElementById("tag-bar");
-  if(!T||!T.events){bar.innerHTML="";return}
-  var allEvs=T.events||[],tagCount={};
-  for(var i=0;i<allEvs.length;i++){var tags=allEvs[i].tags||[];for(var j=0;j<tags.length;j++)tagCount[tags[j]]=(tagCount[tags[j]]||0)+1}
-  var catTags={};
-  for(var tag in tagCount){var c=catOfTag(tag);if(!catTags[c])catTags[c]=[];catTags[c].push({tag:tag,count:tagCount[tag]})}
-  var catOrder=["模块","主题","阶段","动作","其他"];
-  var h="";
-  for(var ci=0;ci<catOrder.length;ci++){
-    var cn=catOrder[ci],items=catTags[cn];
-    if(!items||!items.length)continue;
-    items.sort(function(a,b){return b.count-a.count});
-    var expand=!!expandedTagCats[cn];
-    var limit=expand?items.length:Math.min(3,items.length);
-    h+="<div class=\"tag-row\"><span class=\"tag-cat\">"+cn+"</span>";
-    for(var ii=0;ii<limit;ii++){
-      var item=items[ii],isOn=activeTagFilter===item.tag;
-      h+="<span class=\"tag-btn"+(isOn?" on":"")+"\" data-tag=\""+esc(item.tag)+"\" onclick=\"setTagFilter('"+esc(item.tag)+"');event.stopPropagation()\">"+esc(item.tag)+" <em>"+item.count+"</em></span>";
-    }
-    if(items.length>3&&!expand)h+="<span class=\"tag-more\" onclick=\"toggleTagCat('"+esc(cn)+"');event.stopPropagation()\">+"+(items.length-3)+"</span>";
-    if(expand)h+="<span class=\"tag-more\" onclick=\"toggleTagCat('"+esc(cn)+"');event.stopPropagation()\">收起</span>";
-    h+="</div>";
-  }
-  bar.innerHTML=h;
-}
+var ETYPES = {'对齐与拍板':['ev-t1','t1'],'规格演进':['ev-t2','t2'],'代码变更':['ev-t3','t3'],'测试与质量':['ev-t4','t4'],'审批与交接':['ev-t5','t5'],'运维与基建':['ev-t6','t6'],'教训沉淀':['ev-t7','t7']};
-var expandedTagCats = {};
-function toggleTagCat(cn){
-  if(expandedTagCats[cn]){expandedTagCats[cn]=false}else{expandedTagCats[cn]=true}
-  renderTagBar();
+var CLABEL = {roadmap:'路线图与进度',todo:'待办清单',decision:'决策记录',spec:'业务规格',convention:'协作纪律',ops:'运维与基建',archive:'历史档案',template:'工具模板',unknown:'未分类'};
+var PRIMARY = {roadmap:1,decision:1,todo:1};
+var ETYPE = {phase:'roadmap',milestone:'roadmap',task:'roadmap',subtask:'roadmap',roadmap:'roadmap',backlog:'todo',todo:'todo',conclusion:'roadmap',decision:'decision',refactor:'decision',spec:'spec',intent:'spec',prompt:'spec',convention:'convention',agent:'ops',runbook:'ops',optimization:'roadmap',journal:'archive',handover:'archive',plan_doc:'archive',template:'template'};
+function normCat(c) { if(!c) return 'unknown'; var m = {conventions:'convention',specs:'spec',decisions:'decision',plans:'roadmap',journals:'archive',journal:'archive'}; return m[c]||c; }
+function normTg(tg) { if(!tg||tg==='archived') return 'past'; return tg; }
+function esc(s) { if(!s) return ''; var d = document.createElement('div'); d.textContent = String(s); return d.innerHTML; }
+function catOf(el) { return normCat(el.category || ETYPE[el.elementType] || "unknown"); }
+function catOfTag(tag) { for(var c in TAG_CATS) { if(TAG_CATS[c].indexOf(tag)!==-1) return c; } return "其他"; }
+function evHasTag(ev, tag) { return ev.tags && ev.tags.indexOf(tag)!==-1; }
+function extractVersion(name) {
+  var m = name.match(/\(v\d+\.\d+\)/);
+  if(m) return m[0].replace(/[()]/g,"");
+  m = name.match(/\(([A-D])\)/);
+  if(m) return "v0.3";
+  return "其他";
 }
-var CLABEL = {roadmap:'路线图与进度',decision:'决策记录',spec:'业务规格',convention:'协作纪律',ops:'运维与基建',archive:'历史档案',template:'工具模板',unknown:'未分类'};
-var PRIMARY = {roadmap:1,decision:1};
-var ETYPE = {phase:'roadmap',milestone:'roadmap',task:'roadmap',subtask:'roadmap',roadmap:'roadmap',backlog:'roadmap',conclusion:'roadmap',decision:'decision',refactor:'decision',spec:'spec',intent:'spec',prompt:'spec',convention:'convention',agent:'ops',runbook:'ops',journal:'archive',handover:'archive',plan_doc:'archive',template:'template'};
-function normCat(c){if(!c)return'unknown';var m={conventions:'convention',specs:'spec',decisions:'decision',plans:'roadmap',journals:'archive',journal:'archive'};return m[c]||c}
-function normTg(tg){if(!tg||tg==='archived')return'past';return tg}
-var SICON = {completed:'✅',in_progress:'⏳',pending:'⬜',blocked:'🚫',cancelled:'❌'};
-function sicon(s){return SICON[s]||'⬜'}
-function esc(s){if(!s)return'';var d=document.createElement('div');d.textContent=String(s);return d.innerHTML}
-function generateBrief(){
-  var els=T.elements||[];
-  var allMilestones=[];
-  for(var i=0;i<els.length;i++){
-    var children=els[i].children||[];
-    for(var j=0;j<children.length;j++){
-      if(children[j].elementType==="milestone")allMilestones.push(children[j]);
-    }
-  }
-  var verStats={};
-  for(var i=0;i<allMilestones.length;i++){
-    var ch=allMilestones[i],ver=extractVersion(ch.name);
-    if(!verStats[ver])verStats[ver]={total:0,done:0,inProgress:[]};
-    verStats[ver].total++;
-    if(ch.status==="completed"||ch.status==="cancelled")verStats[ver].done++;
-    else if(ch.status==="in_progress")verStats[ver].inProgress.push(ch.name.replace(/\s*\([^)]*\)\s*/g,'').replace(/^M\d+:\s*/,''));
-    else verStats[ver].inProgress.push(ch.name.replace(/\s*\([^)]*\)\s*/g,'').replace(/^M\d+:\s*/,''));
-  }
-  var versions=Object.keys(verStats).sort(function(a,b){return versionOrder(b)-versionOrder(a)});
-  // Describe each version's milestone completion
-  var parts=[];
-  for(var i=0;i<versions.length;i++){
-    var v=versions[i],vs=verStats[v];
-    if(vs.done===vs.total){
-      parts.push(v+' '+vs.done+'/'+vs.total+' 里程碑全部完成');
-    }else{
-      var names=vs.inProgress.slice(0,3).join('、');
-      parts.push(v+' '+vs.done+'/'+vs.total+' 完成'+(names?'，'+names+'等推进中':''));
-    }
-  }
-  return parts.join('；')+'。'||'暂无简报';
+function versionOrder(v) {
+  if(v==="v0.1") return 1;
+  if(v==="v0.2") return 2;
+  if(v==="v0.3") return 3;
+  return 99;
+}
+function fmtTime(ts) {
+  if(!ts) return "";
+  var d = new Date(ts);
+  var mm = String(d.getMonth()+1).padStart(2,'0');
+  var dd = String(d.getDate()).padStart(2,'0');
+  var hh = String(d.getHours()).padStart(2,'0');
+  var mi = String(d.getMinutes()).padStart(2,'0');
+  return mm+'-'+dd+' '+hh+':'+mi;
+}
+function hasChildCat(el, cat) {
+  if(catOf(el)===cat) return true;
+  if(el.children) for(var i=0;i<el.children.length;i++) { if(hasChildCat(el.children[i],cat)) return true; }
+  return false;
 }
 // ====== LOAD ======
-fetch('../data/timeline.json').then(function(r){return r.json()}).then(function(t){
-  T = t;
-  document.getElementById('upd').textContent = '更新：'+fmtTime(t.updated||'');
-  document.getElementById('btext').innerHTML = generateBrief();
-  renderTree();
-  renderEvents();
-  setupTabs();
+Promise.all([
+  fetch('../data/timeline.json').then(function(r){ return r.json(); }),
+  fetch('../data/roadmap.json').then(function(r){ return r.json(); }).catch(function(){ return null; })
+]).then(function(results) {
+  T = results[0];
+  R = results[1];
+  document.getElementById('btext').textContent = generateBrief();
+  renderAll();
+  setupNavTabs();
   setupToolbar();
   loadTokenToday();
-}).catch(function(e){
-  document.getElementById('btext').textContent = '加载失败：'+e.message;
+}).catch(function(e) {
+  document.getElementById('btext').textContent = 'Load failed: ' + e.message;
   console.error(e);
 });
-// ====== TABS ======
-function setupTabs(){
-  var btns = document.querySelectorAll("#tree-tabs button[data-c]");
-  for(var i=0;i<btns.length;i++){
-    btns[i].addEventListener("click",function(){
-      for(var j=0;j<btns.length;j++)btns[j].classList.remove("on");
-      this.classList.add("on");
-      activeCat = this.getAttribute("data-c");
-      renderTree();
-    });
-  }
+function renderAll() {
+  renderTrackSwitcher();
+  renderInlineTabs();
+  renderTree();
+  renderEvents();
 }
-// ====== TOOLBAR ======
-function setupToolbar(){
-  var sortBtns=document.querySelectorAll("#toolbar .sort-btn");
-  for(var i=0;i<sortBtns.length;i++){
-    sortBtns[i].addEventListener("click",function(){
-      for(var j=0;j<sortBtns.length;j++)sortBtns[j].classList.remove("on");
-      this.classList.add("on");
-      sortMode=this.getAttribute("data-mode");
-      renderEvents();
-    });
+function generateBrief() {
+  // Use roadmap.json brief if available
+  if(R && R.brief) return R.brief;
+  // Fallback: generate from timeline elements
+  if(!T || !T.elements) return 'Loading...';
+  var els = T.elements||[];
+  var allMilestones = [];
+  for(var i=0;i<els.length;i++) {
+    var children = els[i].children||[];
+    for(var j=0;j<children.length;j++) {
+      if(children[j].elementType==="milestone") allMilestones.push(children[j]);
+    }
   }
-  var fclear=document.querySelector("#toolbar .fclear");
-  if(fclear){
-    fclear.addEventListener("click",function(){
-      activeDocFilter=null;
-      activeTagFilter=null;
-      this.classList.remove("show");
-      document.querySelector("#toolbar .ftext").textContent="";
-      document.body.classList.remove("filter-active");
-      renderTree();
-      renderTagBar();
-      renderEvents();
-    });
+  var verStats = {};
+  for(var i=0;i<allMilestones.length;i++) {
+    var ch=allMilestones[i], ver=extractVersion(ch.name);
+    if(!verStats[ver]) verStats[ver]={total:0,done:0,inProgress:[]};
+    verStats[ver].total++;
+    if(ch.status==="completed"||ch.status==="cancelled") verStats[ver].done++;
+    else verStats[ver].inProgress.push(ch.name.replace(/\s*\([^)]*\)\s*/g,'').replace(/^M\d+:\s*/,''));
   }
+  var versions = Object.keys(verStats).sort(function(a,b){ return versionOrder(b)-versionOrder(a); });
+  var parts = [];
+  for(var i=0;i<versions.length;i++) {
+    var v=versions[i], vs=verStats[v];
+    if(vs.done===vs.total) parts.push(v+' '+vs.done+'/'+vs.total+' done');
+    else { var names=vs.inProgress.slice(0,3).join(', '); parts.push(v+' '+vs.done+'/'+vs.total+(names?' ('+names+')':'')); }
+  }
+  var brief = parts.join(' | ') || 'No data';
+  if(R && R.currentNode) brief += ' | Current: '+R.currentNode;
+  return brief;
 }
-// ====== TREE ======
-function catOf(el){return normCat(el.category || ETYPE[el.elementType] || "unknown")}
-function hasChildCat(el,cat){
-  if(catOf(el)===cat)return true;
-  if(el.children)for(var i=0;i<el.children.length;i++){if(hasChildCat(el.children[i],cat))return true}
-  return false
-}
-function extractVersion(name){
-  var m=name.match(/\(v\d+\.\d+\)/);
-  if(m)return m[0].replace(/[()]/g,"");
-  m=name.match(/\(([A-D])\)/);
-  if(m)return "v0.3";
-  return "其他";
-}
-function versionOrder(v){
-  if(v==="v0.1")return 1;
-  if(v==="v0.2")return 2;
-  if(v==="v0.3")return 3;
-  return 99;
-}
-function fmtTime(ts){
-  if(!ts)return"";
-  var d=new Date(ts);
-  var mm=String(d.getMonth()+1).padStart(2,'0');
-  var dd=String(d.getDate()).padStart(2,'0');
-  var hh=String(d.getHours()).padStart(2,'0');
-  var mi=String(d.getMinutes()).padStart(2,'0');
-  return mm+'-'+dd+' '+hh+':'+mi;
+// ====== TRACK SWITCHER ======
+function renderTrackSwitcher() {
+  var container = document.getElementById('track-switcher');
+  var tracks = (R && R.tracks) ? R.tracks : [];
+  if(!tracks.length) { container.classList.add('hidden'); return; }
+  container.classList.remove('hidden');
+  var h = '';
+  // "All" button
+  h += '<button class="px-md py-sm rounded font-title-md text-title-md hover-scale ' +
+    (activeTrack===null
+      ? 'bg-primary-container text-on-primary-container'
+      : 'border border-outline-variant text-on-surface-variant hover:bg-surface-container-low') +
+    '" data-track="">All</button>';
+  // Track buttons
+  for(var i=0;i<tracks.length;i++) {
+    var t = tracks[i];
+    var isActive = activeTrack===t.id;
+    h += '<button class="px-md py-sm rounded font-title-md text-title-md hover-scale ' +
+      (isActive
+        ? 'bg-primary-container text-on-primary-container'
+        : 'border border-outline-variant text-on-surface-variant hover:bg-surface-container-low') +
+      '" data-track="'+esc(t.id)+'">'+esc(t.label||t.id)+'</button>';
+  }
+  container.innerHTML = h;
+  // Bind clicks
+  var btns = container.querySelectorAll('button[data-track]');
+  for(var i=0;i<btns.length;i++) {
+    btns[i].addEventListener('click', function() {
+      var tid = this.getAttribute('data-track');
+      activeTrack = tid || null;
+      renderAll();
+    });
+  }
 }
-function getVersionTitle(ver,children,phaseName){
-  if(phaseName){
-    var parts=phaseName.split(/[·；;]/);
-    for(var i=0;i<parts.length;i++){
-      if(parts[i].indexOf(ver)!==-1)return parts[i].trim();
-    }
+// ====== INLINE CATEGORY TABS ======
+function renderInlineTabs() {
+  var container = document.getElementById('tree-tabs-inline');
+  var categories = ['all','roadmap','todo','decision','spec','convention','ops','archive'];
+  var labels = {all:'All',roadmap:'Roadmap',todo:'Todo',decision:'Decisions',spec:'Specs',convention:'Conventions',ops:'Ops',archive:'Archive'};
+  container.classList.remove('hidden');
+  var h = '';
+  for(var i=0;i<categories.length;i++) {
+    var c = categories[i];
+    var isOn = activeCat===c;
+    h += '<button class="px-md py-sm rounded font-title-md text-title-md hover-scale ' +
+      (isOn
+        ? 'bg-primary-container text-on-primary-container'
+        : 'border border-outline-variant text-on-surface-variant hover:bg-surface-container-low') +
+      '" data-c="'+c+'">'+labels[c]+'</button>';
   }
-  var first=children[0];
-  if(first){
-    var nm=first.name.replace(/\s*\([^)]*\)\s*/g,"").replace(/^M\d+:\s*/,"");
-    return ver+" · "+nm;
+  container.innerHTML = h;
+  // Bind clicks
+  var btns = container.querySelectorAll('button[data-c]');
+  for(var i=0;i<btns.length;i++) {
+    btns[i].addEventListener('click', function() {
+      activeCat = this.getAttribute('data-c');
+      renderAll();
+    });
   }
-  return ver;
 }
-function getVersionUpdateTime(ver,children){
-  var latest="";
-  if(T&&T.events){
-    for(var i=0;i<T.events.length;i++){
-      var ev=T.events[i];
-      if(ev.tags&&ev.tags.indexOf(ver)!==-1){
-        if(!latest||ev.timestamp>latest)latest=ev.timestamp;
-      }
+// ====== NAV TABS (top bar — mirror and sync) ======
+function setupNavTabs() {
+  var btns = document.querySelectorAll('#nav-tabs button[data-c]');
+  for(var i=0;i<btns.length;i++) {
+    btns[i].addEventListener('click', function() {
+      activeCat = this.getAttribute('data-c');
+      renderAll();
+    });
+  }
+  syncNavTabs();
+}
+function syncNavTabs() {
+  var navBtns = document.querySelectorAll('#nav-tabs button[data-c]');
+  for(var i=0;i<navBtns.length;i++) {
+    var btn = navBtns[i];
+    if(btn.getAttribute('data-c')===activeCat) {
+      btn.className = 'px-md pb-md pt-sm font-title-md text-title-md text-primary border-b-2 border-primary whitespace-nowrap hover-scale';
+    } else {
+      btn.className = 'px-md pb-md pt-sm font-title-md text-title-md text-on-surface-variant whitespace-nowrap hover:text-on-surface border-b-2 border-transparent hover-scale';
     }
   }
-  if(!latest){
-    for(var i=0;i<children.length;i++){
-      var d=children[i].date;
-      if(d&&(!latest||d>latest))latest=d;
+  // Also refresh inline tabs
+  var inlineBtns = document.querySelectorAll('#tree-tabs-inline button[data-c]');
+  for(var i=0;i<inlineBtns.length;i++) {
+    var ib = inlineBtns[i];
+    if(ib.getAttribute('data-c')===activeCat) {
+      ib.className = 'px-md py-sm rounded font-title-md text-title-md hover-scale bg-primary-container text-on-primary-container';
+    } else {
+      ib.className = 'px-md py-sm rounded font-title-md text-title-md hover-scale border border-outline-variant text-on-surface-variant hover:bg-surface-container-low';
     }
   }
-  return fmtTime(latest);
 }
-function renderTree(){
+// ====== TREE ======
+function renderTree() {
+  syncNavTabs();
   var els = T.elements||[];
-  var roadmapEls=[], otherEls=[];
-  for(var i=0;i<els.length;i++){
-    var el=els[i];
-    if(el.category==="roadmap" || el.elementType==="phase" || el.elementType==="milestone"){
+  var roadmapEls = [], otherEls = [];
+  // Check if we have tracks data from roadmap.json
+  var hasTracks = R && R.tracks && R.tracks.length > 0;
+  for(var i=0;i<els.length;i++) {
+    var el = els[i];
+    if(el.category==="roadmap" || el.elementType==="phase" || el.elementType==="milestone") {
       roadmapEls.push(el);
-    }else{
-      if(activeCat!=="all" && catOf(el)!==activeCat && !hasChildCat(el,activeCat))continue;
+    } else {
+      if(activeCat!=="all" && catOf(el)!==activeCat && !hasChildCat(el,activeCat)) continue;
       otherEls.push(el);
     }
   }
-  var total=otherEls.length;
-  var h="";
-  // ===== Roadmap section (路线图与进度) =====
-  if((activeCat==="all" || activeCat==="roadmap") && roadmapEls.length>0){
-    h+=renderRoadmap(roadmapEls);
-    for(var ri=0;ri<roadmapEls.length;ri++){
-      if(roadmapEls[ri].children)total+=roadmapEls[ri].children.length;
-      else total+=1;
+  var total = otherEls.length;
+  var h = '';
+  // ===== Roadmap section =====
+  if((activeCat==="all" || activeCat==="roadmap")) {
+    if(hasTracks) {
+      // NEW: Render from tracks data
+      h += renderTracks();
+      for(var ti=0;ti<R.tracks.length;ti++) {
+        var phases = R.tracks[ti].phases||[];
+        total += phases.length;
+      }
+    } else if(roadmapEls.length>0) {
+      // OLD: Render from timeline elements (fallback)
+      h += renderRoadmapLegacy(roadmapEls);
+      for(var ri=0;ri<roadmapEls.length;ri++) {
+        if(roadmapEls[ri].children) total += roadmapEls[ri].children.length;
+        else total += 1;
+      }
     }
-    // 分支优化 — 归入 roadmap 板块，收纳所有未关联路线图的事件
-    var unmatchedCount=countUnmatchedEvents();
-    var branchNode={
-      id:"virtual-branch-optimizations",
-      kind:"primary",elementType:"catch-all",category:"roadmap",
-      name:"分支优化",status:"in_progress",timeGroup:"current",
-      timeLabel:"Bug修复 / 功能微调 / 零散优化",
-      source:{file:"__unmatched__",title:"分支优化"},
-      summary:"兜底节点：收纳所有未关联到具体路线图里程碑的事件（Bug修复、功能微调、零散优化等）",
-      tags:["兜底"],children:[],order:999,
-      date:new Date().toISOString().substring(0,10)
-    };
-    h+='<div class="cat-section"><div class="cat-header primary"><span>分支优化</span><span>'+unmatchedCount+' 条事件</span></div>';
-    h+=renderTreeCard(branchNode);
-    h+="</div>";
-    total+=1;
-  }
-  // ===== 待办清单 section — 路线图之后、决策记录之前 =====
-  if(activeCat==="all"){
-    var todoNode={
-      id:"virtual-todo-list",
-      kind:"primary",elementType:"todo",category:"todo",
-      name:"待办清单",status:"pending",timeGroup:"future",
-      timeLabel:"发现但未解决的优化点 / 待办项",
-      source:{file:"__todo__",title:"待办清单"},
-      summary:"记录所有已发现但尚未解决的优化点、待办项，避免遗漏",
-      tags:["待办"],children:[],order:998,
-      date:new Date().toISOString().substring(0,10)
+    // Branch optimizations catch-all
+    var unmatchedCount = countUnmatchedEvents();
+    var branchNode = {
+      id:"virtual-branch-optimizations", kind:"primary", elementType:"catch-all", category:"roadmap",
+      name:"Branch Optimizations", status:"in_progress", timeGroup:"current",
+      timeLabel:"Bug fixes / micro-tweaks / scattered opts",
+      source:{file:"__unmatched__",title:"Branch Optimizations"},
+      summary:"Catch-all node: collects all events not linked to a specific roadmap milestone",
+      tags:["catch-all"], children:[], order:999,
+      date: new Date().toISOString().substring(0,10)
     };
-    h+='<div class="cat-section"><div class="cat-header primary"><span>待办清单</span><span>待整理</span></div>';
-    h+=renderTreeCard(todoNode);
-    h+="</div>";
-    total+=1;
+    h += '<div class="cat-section"><div class="cat-header primary"><span>Branch Optimizations</span><span>'+unmatchedCount+' events</span></div>';
+    h += renderTreeCard(branchNode);
+    h += '</div>';
+    total += 1;
+    // Todo section
+    if(activeCat==="all") {
+      var todoNode = {
+        id:"virtual-todo-list", kind:"primary", elementType:"todo", category:"todo",
+        name:"Todo List", status:"pending", timeGroup:"future",
+        timeLabel:"Discovered but unresolved optimization points",
+        source:{file:"__todo__",title:"Todo List"},
+        summary:"Records all discovered but unresolved optimization points and todo items",
+        tags:["todo"], children:[], order:998,
+        date: new Date().toISOString().substring(0,10)
+      };
+      h += '<div class="cat-section"><div class="cat-header primary"><span>Todo List</span><span>Pending</span></div>';
+      h += renderTreeCard(todoNode);
+      h += '</div>';
+      total += 1;
+    }
   }
-  if(activeCat==="all" || activeCat!=="roadmap"){
-    var groups={},order=[];
-    for(var i=0;i<otherEls.length;i++){
-      var c=catOf(otherEls[i]);
-      if(!groups[c]){groups[c]=[];order.push(c)}
+  // ===== Other categories =====
+  if(activeCat==="all" || activeCat!=="roadmap") {
+    var groups = {}, order = [];
+    for(var i=0;i<otherEls.length;i++) {
+      var c = catOf(otherEls[i]);
+      if(!groups[c]) { groups[c]=[]; order.push(c); }
       groups[c].push(otherEls[i]);
     }
-    for(var k in groups){
-      groups[k].sort(function(a,b){
-        if(a.date&&b.date)return b.date.localeCompare(a.date);
-        return(b.order||0)-(a.order||0)
-      });
+    for(var k in groups) {
+      groups[k].sort(function(a,b) { if(a.date&&b.date) return b.date.localeCompare(a.date); return (b.order||0)-(a.order||0); });
     }
-    order.sort(function(a,b){
-      var pa=PRIMARY[a]?0:1,pb=PRIMARY[b]?0:1;
-      if(pa!==pb)return pa-pb;
-      if(a==="unknown")return 1;if(b==="unknown")return -1;
+    order.sort(function(a,b) {
+      var pa=PRIMARY[a]?0:1, pb=PRIMARY[b]?0:1;
+      if(pa!==pb) return pa-pb;
+      if(a==="unknown") return 1; if(b==="unknown") return -1;
       return 0;
     });
-    for(var i=0;i<order.length;i++){
-      var g=order[i],items=groups[g],label=CLABEL[g]||g,isP=PRIMARY[g];
-      h+='<div class="cat-section"><div class="cat-header '+(isP?"primary":"secondary")+'"><span>'+esc(label)+'</span><span>'+items.length+' 项</span></div>';
-      for(var j=0;j<items.length;j++){
-        h+=renderTreeCard(items[j]);
-      }
-      h+="</div>";
+    for(var i=0;i<order.length;i++) {
+      var g=order[i], items=groups[g], label=CLABEL[g]||g, isP=PRIMARY[g];
+      h += '<div class="cat-section"><div class="cat-header '+(isP?"primary":"secondary")+'"><span>'+esc(label)+'</span><span>'+items.length+' items</span></div>';
+      for(var j=0;j<items.length;j++) { h += renderTreeCard(items[j]); }
+      h += '</div>';
     }
   }
-  if(total===0){document.getElementById("tree").innerHTML='<div class="empty"><h3>暂无内容</h3><p>选择其他分类或运行 build 刷新</p></div>';return}
-  document.getElementById("cnt").textContent=total+" 项";
-  document.getElementById("tree").innerHTML=h;
+  if(total===0 && h==='') {
+    document.getElementById('tree').innerHTML = '<div class="empty"><h3 class="font-headline-sm text-headline-sm mb-sm">No content</h3><p class="font-body-md text-body-md text-on-surface-variant">Select another category or run build to refresh</p></div>';
+    return;
+  }
+  document.getElementById('tree').innerHTML = h;
   bindDocClicks();
-  (function(){
-    var mores=document.querySelectorAll(".rp-more");
-    for(var i=0;i<mores.length;i++){
-      mores[i].onclick=function(e){
+  // Bind rp-more buttons for legacy roadmap
+  (function() {
+    var mores = document.querySelectorAll('.rp-more');
+    for(var i=0;i<mores.length;i++) {
+      mores[i].onclick = function(e) {
         e.stopPropagation();
-        var card=this.parentNode.parentNode;
-        var ver=card.getAttribute("data-ver");
-        if(ver)expandedRpCards[ver]=true;
+        var card = this.parentNode.parentNode;
+        var ver = card.getAttribute('data-ver');
+        if(ver) expandedRpCards[ver]=true;
         renderTree();
       };
     }
   })();
 }
-function renderRoadmap(roadmapEls){
-  var verGroups={},verOrder=[];
-  for(var i=0;i<roadmapEls.length;i++){
+// ====== NEW: Render tracks from roadmap.json ======
+function renderTracks() {
+  var tracks = R.tracks;
+  var h = '';
+  for(var ti=0;ti<tracks.length;ti++) {
+    var track = tracks[ti];
+    // Filter by activeTrack
+    if(activeTrack && track.id !== activeTrack) continue;
+    h += '<div class="mb-lg">';
+    h += '<h4 class="font-label-caps text-label-caps text-on-surface-variant mb-md tracking-wider">'+esc(track.label||track.id)+'</h4>';
+    var phases = track.phases||[];
+    for(var pi=0;pi<phases.length;pi++) {
+      h += renderTrackPhase(track, phases[pi]);
+    }
+    h += '</div>';
+  }
+  return h;
+}
+function renderTrackPhase(track, phase) {
+  var tasks = phase.tasks||[];
+  var completed = 0;
+  for(var i=0;i<tasks.length;i++) {
+    if(tasks[i].status==='completed') completed++;
+  }
+  var allDone = completed===tasks.length;
+  var milId = 'ms-'+esc(phase.id);
+  var isOpen = !!expandedMilestones[phase.id];
+  // Status color
+  var statusColor = allDone ? 'text-emerald-500' : (completed>0 ? 'text-amber-500' : 'text-slate-400');
+  var statusDot = allDone ? 'bg-emerald-500' : (completed>0 ? 'bg-amber-500' : 'bg-slate-400');
+  var statusText = allDone ? 'Completed' : (phase.status==='in_progress' ? 'In Progress' : 'Pending');
+  var borderLeft = allDone ? 'border-l-emerald-500' : (phase.status==='in_progress' ? 'border-l-amber-500' : 'border-l-slate-300');
+  var h = '<div class="bg-surface-container-lowest border border-outline-variant rounded-lg overflow-hidden border-l-4 '+borderLeft+' relative shadow-sm hover:shadow-md transition-shadow mb-md cursor-pointer" onclick="toggleMilestone(\''+esc(phase.id)+'\')">';
+  // Header
+  h += '<div class="p-md border-b border-outline-variant bg-surface-bright flex justify-between items-center hover:bg-surface-container-low transition-colors">';
+  h += '<div>';
+  h += '<h3 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-sm">';
+  h += '<span class="material-symbols-outlined '+statusColor+'">flag</span>';
+  h += esc(phase.id)+' · '+esc(phase.name);
+  h += '</h3>';
+  h += '</div>';
+  h += '<div class="flex items-center gap-sm">';
+  h += '<span class="w-2 h-2 rounded-full '+statusDot+'"></span>';
+  h += '<span class="font-code-sm text-code-sm text-on-surface-variant">'+statusText+', '+completed+'/'+tasks.length+'</span>';
+  h += '<span class="material-symbols-outlined text-on-surface-variant transition-transform duration-300" id="icon-'+milId+'">'+(isOpen?'expand_less':'expand_more')+'</span>';
+  h += '</div>';
+  h += '</div>';
+  // Body (tasks)
+  h += '<div class="p-md flex flex-col gap-sm accordion-content'+(isOpen?'':' collapsed')+'" id="'+milId+'">';
+  for(var i=0;i<tasks.length;i++) {
+    h += renderTrackSubtask(tasks[i], phase);
+  }
+  h += '</div>';
+  h += '</div>';
+  return h;
+}
+function renderTrackSubtask(task, phase) {
+  var isDone = task.status==='completed';
+  var isNext = task.status==='in_progress';
+  var iconName = isDone ? 'check_circle' : 'radio_button_unchecked';
+  var iconColor = isDone ? 'text-emerald-500' : (isNext ? 'text-primary' : 'text-outline-design');
+  var textStyle = isDone ? 'line-through text-on-surface-variant' : (isNext ? 'font-semibold text-on-surface' : 'text-on-surface');
+  var rowExtra = isNext ? 'bg-primary-fixed border border-primary pulse-border shadow-sm' : 'hover:bg-surface-container-low';
+  var h = '<div class="flex items-center justify-between p-sm rounded group transition-colors hover-scale '+rowExtra+'">';
+  h += '<div class="flex items-center gap-md">';
+  h += '<span class="material-symbols-outlined '+iconColor+'">'+iconName+'</span>';
+  h += '<span class="font-body-md text-body-md '+textStyle+'">'+esc(task.id)+' '+esc(task.title)+'</span>';
+  h += '</div>';
+  h += '<div class="flex items-center gap-sm">';
+  if(isNext) {
+    h += '<span class="font-label-caps text-label-caps bg-primary text-on-primary px-xs rounded animate-pulse shadow-inner">NEXT</span>';
+  }
+  if(task.actor) {
+    h += '<span class="font-code-sm text-code-sm bg-surface-variant text-on-surface-variant px-sm py-xs rounded">'+esc(task.actor)+'</span>';
+  }
+  h += '</div>';
+  h += '</div>';
+  return h;
+}
+function toggleMilestone(id) {
+  if(expandedMilestones[id]) {
+    expandedMilestones[id] = false;
+  } else {
+    expandedMilestones[id] = true;
+  }
+  renderTree();
+}
+// ====== LEGACY: Render roadmap from timeline elements (fallback) ======
+function renderRoadmapLegacy(roadmapEls) {
+  var verGroups={}, verOrder=[];
+  for(var i=0;i<roadmapEls.length;i++) {
     var el=roadmapEls[i];
     var children=el.children||[];
-    for(var j=0;j<children.length;j++){
+    for(var j=0;j<children.length;j++) {
       var ch=children[j];
       var ver=extractVersion(ch.name);
-      if(!verGroups[ver]){verGroups[ver]=[];verOrder.push(ver)}
+      if(!verGroups[ver]){verGroups[ver]=[];verOrder.push(ver);}
       verGroups[ver].push(ch);
     }
   }
   verOrder.sort(function(a,b){return versionOrder(a)-versionOrder(b)});
-  for(var v in verGroups){
-    verGroups[v].sort(function(a,b){
-      var da=a.date||"",db=b.date||"";
-      return db.localeCompare(da);
-    });
+  for(var v in verGroups) {
+    verGroups[v].sort(function(a,b){var da=a.date||"",db=b.date||"";return db.localeCompare(da);});
   }
   var vgList=[];
-  for(var vi=0;vi<verOrder.length;vi++){
+  for(var vi=0;vi<verOrder.length;vi++) {
     var v=verOrder[vi],g=verGroups[v];
     vgList.push({ver:v,children:g});
   }
-  // Sort by version descending (v0.3 → v0.2 → v0.1)
   vgList.sort(function(a,b){return versionOrder(b.ver)-versionOrder(a.ver)});
   var top3={};
-  for(var i=0;i<Math.min(3,vgList.length);i++){top3[vgList[i].ver]=true}
+  for(var i=0;i<Math.min(3,vgList.length);i++){top3[vgList[i].ver]=true;}
-  // Derive title parts from phase element name
   var phaseName="";
-  for(var i=0;i<roadmapEls.length;i++){
-    if(roadmapEls[i].elementType==="phase"){phaseName=roadmapEls[i].name;break}
+  for(var i=0;i<roadmapEls.length;i++) {
+    if(roadmapEls[i].elementType==="phase"){phaseName=roadmapEls[i].name;break;}
   }
   var h="";
-  for(var i=0;i<vgList.length;i++){
+  for(var i=0;i<vgList.length;i++) {
     var vg=vgList[i],children=vg.children,ver=vg.ver;
     var done=0,total=children.length;
     for(var j=0;j<children.length;j++){
       if(children[j].status==="completed"||children[j].status==="cancelled")done++;
     }
     var allDone=(done===total);
-    var ratio=Math.round(done/total*100);
     var stateCls=allDone?"rp-done":(done>0?"rp-mixed":"");
     var ratioCls=allDone?"all-done":(done>0?"partial":"");
     var ratioText=done+"/"+total;
     var isTop3=!!top3[ver];
     var manualOpen=!!expandedRpCards[ver];
     var isSemi=isTop3 && !allDone && !manualOpen;
     var isOpen=manualOpen;
     var title=getVersionTitle(ver,children,phaseName);
     var upTime=getVersionUpdateTime(ver,children);
-    var isFilterMatch=activeDocFilter && ver===activeDocFilter;
-    h+='<div class="rp-card '+stateCls+(isSemi?" semi":"")+(isOpen?" open":"")+(isFilterMatch?" filter-match":"")+'" data-ver="'+esc(ver)+'">';
+    h+='<div class="rp-card '+stateCls+(isSemi?" semi":"")+(isOpen?" open":"")+'" data-ver="'+esc(ver)+'">';
     h+='<div class="rp-head">';
-    h+='<span class="rp-arrow" onclick="toggleRpCard(this);event.stopPropagation()">\u25b6</span>';
-    h+='<span class="rp-title" onclick="setDocFilter(\''+esc(ver)+'\');event.stopPropagation()" title="筛选此版本事件">'+esc(title)+'</span>';
+    h+='<span class="rp-arrow" onclick="toggleRpCard(this);event.stopPropagation()">&#9654;</span>';
+    h+='<span class="rp-title" onclick="setDocFilter(\''+esc(ver)+'\');event.stopPropagation()" title="Filter events for this version">'+esc(title)+'</span>';
     h+='<span class="rp-meta"><span class="rp-ratio '+ratioCls+'">'+ratioText+'</span><span class="tc-time">'+esc(upTime)+'</span></span>';
     h+='</div><div class="rp-body">';
-    if(isSemi){
+    if(isSemi) {
       var incChildren=[],comChildren=[];
-      for(var j=0;j<children.length;j++){
-        if(children[j].status==="completed"||children[j].status==="cancelled"){
-          comChildren.push(children[j]);
-        }else{
-          incChildren.push(children[j]);
-        }
-      }
-      for(var j=0;j<incChildren.length;j++){
-        h+=renderRoadmapChild(incChildren[j]);
-      }
-      if(comChildren.length>0){
-        h+='<div class="rp-more">\u25bc 查看全部 '+total+' 里程碑（含 '+comChildren.length+' 已完成）</div>';
-      }
-    }else{
-      for(var j=0;j<children.length;j++){
-        h+=renderRoadmapChild(children[j]);
+      for(var j=0;j<children.length;j++) {
+        if(children[j].status==="completed"||children[j].status==="cancelled") comChildren.push(children[j]);
+        else incChildren.push(children[j]);
       }
+      for(var j=0;j<incChildren.length;j++) h+=renderRoadmapChild(incChildren[j]);
+      if(comChildren.length>0) h+='<div class="rp-more">&#9660; View all '+total+' milestones ('+comChildren.length+' completed)</div>';
+    } else {
+      for(var j=0;j<children.length;j++) h+=renderRoadmapChild(children[j]);
     }
-    h+="</div></div>";
+    h+='</div></div>';
   }
   return h;
 }
-function toggleRpCard(el){
+function toggleRpCard(el) {
   var card=el.parentNode.parentNode;
   var ver=card.getAttribute("data-ver");
-  if(expandedRpCards[ver]){expandedRpCards[ver]=false}
-  else{expandedRpCards[ver]=true}
+  if(expandedRpCards[ver]){expandedRpCards[ver]=false;}
+  else{expandedRpCards[ver]=true;}
   renderTree();
 }
-function renderRoadmapChild(ch){
+function renderRoadmapChild(ch) {
   var done=ch.status==="completed"||ch.status==="cancelled";
-  var icon=done?"\u2705":(ch.status==="in_progress"?"\u23f3":"\u2b1c");
+  var icon=done?"&#x2705;":(ch.status==="in_progress"?"&#x23f3;":"&#x2b1c;");
   var labelCls=done?"done":(ch.status==="in_progress"?"progress":"pending-label");
-  var labelText=done?"完成":(ch.status==="in_progress"?"进行中":"待开始");
+  var labelText=done?"Done":(ch.status==="in_progress"?"In Progress":"Pending");
   var time=fmtTime(ch.date)||ch.timeLabel||"";
   var ver=extractVersion(ch.name);
   var h='<div class="rp-child" data-ver="'+esc(ver)+'" data-doc="'+(ch.source&&ch.source.file?esc(ch.source.file):"")+'">';
@@ -744,342 +959,613 @@ function renderRoadmapChild(ch){
   h+='<span class="rp-cname">'+esc(ch.name||ch.id)+'</span>';
   h+='<span class="rp-ctime">'+esc(time)+'</span>';
   h+='<span class="rp-clabel '+labelCls+'">'+labelText+'</span>';
-  h+="</div>";
+  h+='</div>';
   return h;
 }
-function renderTreeCard(el){
+function getVersionTitle(ver,children,phaseName) {
+  if(phaseName) {
+    var parts=phaseName.split(/[·；;]/);
+    for(var i=0;i<parts.length;i++) {
+      if(parts[i].indexOf(ver)!==-1) return parts[i].trim();
+    }
+  }
+  var first=children[0];
+  if(first) {
+    var nm=first.name.replace(/\s*\([^)]*\)\s*/g,"").replace(/^M\d+:\s*/,"");
+    return ver+" · "+nm;
+  }
+  return ver;
+}
+function getVersionUpdateTime(ver,children) {
+  var latest="";
+  if(T&&T.events) {
+    for(var i=0;i<T.events.length;i++) {
+      var ev=T.events[i];
+      if(ev.tags&&ev.tags.indexOf(ver)!==-1) {
+        if(!latest||ev.timestamp>latest) latest=ev.timestamp;
+      }
+    }
+  }
+  if(!latest) {
+    for(var i=0;i<children.length;i++) {
+      var d=children[i].date;
+      if(d&&(!latest||d>latest)) latest=d;
+    }
+  }
+  return fmtTime(latest);
+}
+// ====== TREE CARDS (for non-roadmap elements) ======
+function renderTreeCard(el) {
   var isDoc=!!(el.source&&el.source.file);
   var tg=normTg(el.timeGroup);
   var time=fmtTime(el.date)||el.timeLabel||"";
-  var unk=catOf(el)==="unknown"?'<span style="background:#fff3e0;color:#e65100;font-size:9px;padding:1px 5px;border-radius:3px">未分类</span>':"";
+  var unk=catOf(el)==="unknown"?'<span style="background:#fff3e0;color:#e65100;font-size:9px;padding:1px 5px;border-radius:3px">unclassified</span>':"";
-  // "新建"/"更新" badge for doc-type cards without status
   var docBadge="";
-  if(isDoc || !el.status){
+  if(isDoc || !el.status) {
     var elDate=el.date||"",updDate=T&&T.updated?T.updated:"";
     var daysOld=99;
-    if(elDate&&updDate){daysOld=(new Date(updDate)-new Date(elDate))/(86400000)}
-    if(daysOld<=1)docBadge='<span class="tc-type status-done">新建</span>';
-    else if(daysOld<=3)docBadge='<span class="tc-type status-progress">更新</span>';
+    if(elDate&&updDate){daysOld=(new Date(updDate)-new Date(elDate))/(86400000);}
+    if(daysOld<=1) docBadge='<span class="tc-type status-done">New</span>';
+    else if(daysOld<=3) docBadge='<span class="tc-type status-progress">Updated</span>';
   }
-  var isFilterMatch=activeDocFilter && (isDoc&&el.source.file===activeDocFilter || (el.tags&&el.tags.indexOf(activeDocFilter)!==-1));
+  var isFilterMatch = activeDocFilter && (isDoc&&el.source.file===activeDocFilter || (el.tags&&el.tags.indexOf(activeDocFilter)!==-1));
   var h='<div class="tree-card'+(isFilterMatch?" filter-match":"")+'" data-tg="'+esc(tg)+'" data-doc="'+(isDoc?esc(el.source.file):"")+'" onclick="onTreeCardClick(event,\''+esc(isDoc?el.source.file:"")+'\')">';
   h+='<div class="tc-head">';
-  if(!isDoc && el.status){
-    h+="<span>"+sicon(el.status)+" "+esc(el.name)+"</span>";
+  if(!isDoc && el.status) {
+    h+='<span>'+sicon(el.status)+' '+esc(el.name)+'</span>';
     var stCls=el.status==="completed"?"status-done":(el.status==="in_progress"?"status-progress":"status-pending");
-    h+='<span class="tc-type '+stCls+'">'+(el.status==="completed"?"完成":(el.status==="in_progress"?"进行中":el.status))+'</span>';
-  }else{
-    h+="<span>"+esc(el.name)+"</span>";
+    h+='<span class="tc-type '+stCls+'">'+(el.status==="completed"?"Done":(el.status==="in_progress"?"In Progress":el.status))+'</span>';
+  } else {
+    h+='<span>'+esc(el.name)+'</span>';
     h+='<span class="tc-meta">'+unk+docBadge+'<span class="tc-time">'+esc(time)+'</span></span>';
   }
-  h+="</div>";
+  h+='</div>';
   h+='<div class="tc-meta" style="padding:0 12px 4px">';
-  if(el.status)h+='<span class="tc-time">'+esc(time)+'</span>';
-  if(el.tags&&el.tags.length){
-    for(var i=0;i<el.tags.length;i++){
-      h+='<span class="tag">'+esc(el.tags[i])+'</span>';
-    }
+  if(el.status) h+='<span class="tc-time">'+esc(time)+'</span>';
+  if(el.tags&&el.tags.length) {
+    for(var i=0;i<el.tags.length;i++) h+='<span class="tag">'+esc(el.tags[i])+'</span>';
   }
-  h+="</div>";
-  if(el.summary)h+='<div class="tc-summary">'+esc(el.summary)+'</div>';
+  h+='</div>';
-  if(isDoc){
+  if(el.summary) h+='<div class="tc-summary">'+esc(el.summary)+'</div>';
+  if(isDoc) {
     h+='<div class="tc-src"><a href="/'+esc(el.source.file)+'" onclick="preview(event,\''+esc(el.source.file)+'\',\'left\');event.stopPropagation()" title="'+esc(el.source.file)+'">'+esc(el.source.file.substring(0,45))+'</a></div>';
   }
-  h+="</div>";
+  h+='</div>';
   return h;
 }
-function setDocFilter(doc){
-  if(activeDocFilter===doc){activeDocFilter=null}
-  else{activeDocFilter=doc}
-  var ft=document.querySelector("#toolbar .ftext");
-  var fc=document.querySelector("#toolbar .fclear");
-  if(activeDocFilter){
-    var label=activeDocFilter==='__unmatched__'?'分支优化（未归类事件）':activeDocFilter==='__todo__'?'待办清单':activeDocFilter;
-    ft.textContent="筛选: "+label;fc.classList.add("show");
-    document.body.classList.add("filter-active");
-  }else{
-    ft.textContent="";fc.classList.remove("show");
-    document.body.classList.remove("filter-active");
+function sicon(s) {
+  var map = {completed:'&#x2705;',in_progress:'&#x23f3;',pending:'&#x2b1c;',blocked:'&#x1f6ab;',cancelled:'&#x274c;'};
+  return map[s]||'&#x2b1c;';
+}
+// ====== DOC FILTER ======
+function setDocFilter(doc) {
+  if(activeDocFilter===doc) { activeDocFilter=null; }
+  else { activeDocFilter=doc; }
+  var ft = document.querySelector('#toolbar .ftext');
+  var fc = document.querySelector('#toolbar .fclear');
+  if(activeDocFilter) {
+    var label = activeDocFilter==='__unmatched__'?'Branch Opts (unclassified)':activeDocFilter==='__todo__'?'Todo List':activeDocFilter;
+    ft.textContent = 'Filter: '+label; fc.classList.add('show');
+    document.body.classList.add('filter-active');
+  } else {
+    ft.textContent = ''; fc.classList.remove('show');
+    document.body.classList.remove('filter-active');
   }
   renderTree();
   renderEvents();
 }
-function onTreeCardClick(e,doc){
-  if(e.target.closest("a"))return;
-  if(doc){setDocFilter(doc)}
+function onTreeCardClick(e, doc) {
+  if(e.target.closest('a')) return;
+  if(doc) { setDocFilter(doc); }
 }
-function bindDocClicks(){
-  var rpChildren=document.querySelectorAll(".rp-child");
-  for(var i=0;i<rpChildren.length;i++){
-    rpChildren[i].addEventListener("click",function(e){
+function bindDocClicks() {
+  var rpChildren = document.querySelectorAll('.rp-child');
+  for(var i=0;i<rpChildren.length;i++) {
+    rpChildren[i].addEventListener('click', function(e) {
       e.stopPropagation();
-      var ver=this.getAttribute("data-ver");
-      if(ver){setDocFilter(ver);return}
-      var doc=this.getAttribute("data-doc");
-      if(doc)setDocFilter(doc);
+      var ver = this.getAttribute('data-ver');
+      if(ver) { setDocFilter(ver); return; }
+      var doc = this.getAttribute('data-doc');
+      if(doc) setDocFilter(doc);
     });
   }
 }
-// ====== EVENTS ======
-var ETYPES = {'对齐与拍板':['ev-t1','t1'],'规格演进':['ev-t2','t2'],'代码变更':['ev-t3','t3'],'测试与质量':['ev-t4','t4'],'审批与交接':['ev-t5','t5'],'运维与基建':['ev-t6','t6'],'教训沉淀':['ev-t7','t7']};
-var PCLASS = {'必记':'ev-p1','应记':'ev-p2','可记':'ev-p3'};
-function evMatchesDoc(ev, doc){
-  if(!doc)return true;
-  if(doc==='__unmatched__')return !evHasAnyElementMatch(ev);
-  if(doc==='__todo__')return ev.tags&&ev.tags.indexOf('待办')!==-1;
-  if(ev.ref&&ev.ref.doc===doc)return true;
-  if(ev.tags&&ev.tags.indexOf(doc)!==-1)return true;
-  if(ev.title&&ev.title.indexOf(doc)!==-1)return true;
-  return false;
-}
-function evHasAnyElementMatch(ev){
-  if(!T||!T.elements)return false;
-  for(var i=0;i<T.elements.length;i++){
-    var el=T.elements[i];
-    if(el.source&&el.source.file){
-      if(ev.ref&&ev.ref.doc===el.source.file)return true;
-    }
-    var elVer=extractVersion(el.name||'');
-    if(elVer&&ev.tags&&ev.tags.indexOf(elVer)!==-1)return true;
-    if(elVer&&ev.title&&ev.title.indexOf(elVer)!==-1)return true;
-    if(el.children){
-      for(var j=0;j<el.children.length;j++){
-        var ch=el.children[j];
-        if(ch.source&&ch.source.file){
-          if(ev.ref&&ev.ref.doc===ch.source.file)return true;
-        }
-        var chVer=extractVersion(ch.name||'');
-        if(chVer&&ev.tags&&ev.tags.indexOf(chVer)!==-1)return true;
-        if(chVer&&ev.title&&ev.title.indexOf(chVer)!==-1)return true;
-      }
-    }
+// ====== TOOLBAR ======
+function setupToolbar() {
+  var sortBtns = document.querySelectorAll('#toolbar .sort-btn');
+  for(var i=0;i<sortBtns.length;i++) {
+    sortBtns[i].addEventListener('click', function() {
+      for(var j=0;j<sortBtns.length;j++) sortBtns[j].classList.remove('on');
+      this.classList.add('on');
+      sortMode = this.getAttribute('data-mode');
+      renderEvents();
+    });
   }
-  return false;
-}
-function countUnmatchedEvents(){
-  if(!T||!T.events)return 0;
-  var c=0;
-  for(var i=0;i<T.events.length;i++){
-    if(!evHasAnyElementMatch(T.events[i]))c++;
+  var fclear = document.querySelector('#toolbar .fclear');
+  if(fclear) {
+    fclear.addEventListener('click', function() {
+      activeDocFilter = null;
+      activeTagFilter = null;
+      this.classList.remove('show');
+      document.querySelector('#toolbar .ftext').textContent = '';
+      document.body.classList.remove('filter-active');
+      renderTree();
+      renderTagBar();
+      renderEvents();
+    });
   }
-  return c;
 }
-function renderSingleEv(ev){
-  var tinfo=ETYPES[ev.type]||['ev-t3','t3'];
-  var refs='';
-  if(ev.ref){
-    if(ev.ref.commit)refs+='<code style="font-size:10px;background:#f5f5f5;padding:0 3px;border-radius:2px">'+esc(ev.ref.commit)+'</code> ';
-    if(ev.ref.doc)refs+='<a class="ev-ref" data-d="'+esc(ev.ref.doc)+'" href="/'+esc(ev.ref.doc)+'" onclick="preview(event,\''+esc(ev.ref.doc)+'\',\'right\')">'+esc(ev.ref.doc.substring(0,35))+'</a> ';
+// ====== EVENTS ======
+function renderSingleEv(ev) {
+  var tinfo = ETYPES[ev.type]||['ev-t3','t3'];
+  var refs = '';
+  if(ev.ref) {
+    if(ev.ref.commit) refs += '<code style="font-size:10px;background:#f5f5f5;padding:0 3px;border-radius:2px">'+esc(ev.ref.commit)+'</code> ';
+    if(ev.ref.doc) refs += '<a class="ev-ref" data-d="'+esc(ev.ref.doc)+'" href="/'+esc(ev.ref.doc)+'" onclick="preview(event,\''+esc(ev.ref.doc)+'\',\'right\')">'+esc(ev.ref.doc.substring(0,35))+'</a> ';
   }
-  var tags='';
-  if(ev.tags&&ev.tags.length)for(var ti=0;ti<ev.tags.length;ti++)tags+='<span class="ev-tag" data-tag="'+esc(ev.tags[ti])+'" onclick="setTagFilter(\''+esc(ev.tags[ti])+'\');event.stopPropagation()">'+esc(ev.tags[ti])+'</span>';
-  var time=fmtTime(ev.timestamp||'');
+  var tags = '';
+  if(ev.tags&&ev.tags.length) {
+    for(var ti=0;ti<ev.tags.length;ti++) {
+      tags += '<span class="ev-tag" data-tag="'+esc(ev.tags[ti])+'" onclick="setTagFilter(\''+esc(ev.tags[ti])+'\');event.stopPropagation()">'+esc(ev.tags[ti])+'</span>';
+    }
+  }
+  var time = fmtTime(ev.timestamp||'');
   return '<div class="ev-item '+tinfo[1]+'">'+
     '<div class="ev-head"><span class="ev-title">'+esc(ev.title)+'</span><span class="ev-type '+tinfo[0]+'">'+esc(ev.type||'')+'</span></div>'+
     '<div class="ev-meta">'+(time?'<span class="ev-time">'+esc(time)+'</span>':'')+refs+tags+'</div>'+
     '</div>';
 }
-function renderEvents(){
-  var container=document.getElementById("events");
-  var evs=T?T.events||[]:[];
-  if(!evs.length){container.innerHTML="<div class=\"empty\"><h3>暂无事件</h3><p>运行 build 后 git log 事件将显示在这里</p></div>";renderTagBar();return}
-  // Apply doc filter (matches ref.doc OR tags)
-  if(activeDocFilter){var f=[];for(var i=0;i<evs.length;i++){if(evMatchesDoc(evs[i],activeDocFilter))f.push(evs[i])}evs=f}
+// Assign track to an event based on tags/ref
+function guessEventTrack(ev) {
+  if(!R||!R.tracks||!R.tracks.length) return null;
+  var tracks = R.tracks;
+  for(var i=0;i<tracks.length;i++) {
+    var t = tracks[i];
+    if(ev.tags && ev.tags.indexOf(t.id)!==-1) return t.id;
+    if(ev.title && ev.title.indexOf(t.id+' ')!==-1) return t.id;
+    if(ev.title && ev.title.indexOf(t.id+'.')!==-1) return t.id;
+    // Check phases
+    var phases = t.phases||[];
+    for(var j=0;j<phases.length;j++) {
+      if(ev.tags && ev.tags.indexOf(phases[j].id)!==-1) return t.id;
+      if(ev.title && ev.title.indexOf(phases[j].id)!==-1) return t.id;
+      // Check tasks
+      var tasks = phases[j].tasks||[];
+      for(var k=0;k<tasks.length;k++) {
+        if(ev.tags && ev.tags.indexOf(tasks[k].id)!==-1) return t.id;
+        if(ev.title && ev.title.indexOf(tasks[k].id)!==-1) return t.id;
+      }
+    }
+  }
+  return null;
+}
+function renderEvents() {
+  var container = document.getElementById('events');
+  var evs = T ? T.events||[] : [];
+  if(!evs.length) {
+    container.innerHTML = '<div class="empty"><h3 class="font-headline-sm text-headline-sm mb-sm">No events</h3><p class="font-body-md text-body-md text-on-surface-variant">Run build to refresh event log</p></div>';
+    renderTagBar();
+    return;
+  }
+  // Apply doc filter
+  if(activeDocFilter) {
+    var f=[];
+    for(var i=0;i<evs.length;i++) { if(evMatchesDoc(evs[i],activeDocFilter)) f.push(evs[i]); }
+    evs=f;
+  }
   // Apply tag filter
-  if(activeTagFilter){var f=[];for(var i=0;i<evs.length;i++){if(evHasTag(evs[i],activeTagFilter))f.push(evs[i])}evs=f}
-  if(evs.length===0){container.innerHTML="<div class=\"empty\"><h3>没有匹配的事件</h3><p>尝试清除筛选或运行 build 刷新</p></div>";renderTagBar();return}
+  if(activeTagFilter) {
+    var f=[];
+    for(var i=0;i<evs.length;i++) { if(evHasTag(evs[i],activeTagFilter)) f.push(evs[i]); }
+    evs=f;
+  }
+  if(evs.length===0) {
+    container.innerHTML = '<div class="empty"><h3 class="font-headline-sm text-headline-sm mb-sm">No matching events</h3><p class="font-body-md text-body-md text-on-surface-variant">Try clearing filters or run build to refresh</p></div>';
+    renderTagBar();
+    return;
+  }
   // Build doc name map
   var docNameMap={};
-  if(T&&T.elements){for(var ei=0;ei<T.elements.length;ei++){var el=T.elements[ei];if(el.source&&el.source.file&&el.name)docNameMap[el.source.file]=el.name}}
-  // Flat mode: all events sorted by timestamp, no grouping
-  if(sortMode==='flat'){
-    evs.sort(function(a,b){return (b.timestamp||"").localeCompare(a.timestamp||"")});
-    var h="",curDay="";
-    for(var i=0;i<evs.length;i++){
+  if(T&&T.elements) {
+    for(var ei=0;ei<T.elements.length;ei++) {
+      var el=T.elements[ei];
+      if(el.source&&el.source.file&&el.name) docNameMap[el.source.file]=el.name;
+    }
+  }
+  // FLAT mode: all events by time
+  if(sortMode==='flat') {
+    evs.sort(function(a,b){ return (b.timestamp||"").localeCompare(a.timestamp||""); });
+    var h='', curDay='';
+    for(var i=0;i<evs.length;i++) {
       var dk3=(evs[i].timestamp||"").substring(0,10);
-      if(dk3!==curDay){curDay=dk3;h+="<div class=\"ev-day\">"+esc(curDay)+"</div>"}
+      if(dk3!==curDay){ curDay=dk3; h+='<div class="ev-day">'+esc(curDay)+'</div>'; }
       h+=renderSingleEv(evs[i]);
     }
-    container.innerHTML=h;
+    container.innerHTML = h;
+    renderTagBar();
+    document.getElementById('evcnt').textContent = evs.length+' events';
+    return;
+  }
+  // TRACK mode: group events by guessed track, then within track by thread
+  if(sortMode==='track' && R && R.tracks && R.tracks.length) {
+    var trackGroups = {};
+    var untracked = [];
+    for(var i=0;i<evs.length;i++) {
+      var tk = guessEventTrack(evs[i]);
+      if(tk) {
+        if(!trackGroups[tk]) trackGroups[tk] = [];
+        trackGroups[tk].push(evs[i]);
+      } else {
+        untracked.push(evs[i]);
+      }
+    }
+    var h = '';
+    var trackOrder = [];
+    for(var i=0;i<R.tracks.length;i++) { trackOrder.push(R.tracks[i].id); }
+    for(var ti=0;ti<trackOrder.length;ti++) {
+      var tid = trackOrder[ti];
+      var tevs = trackGroups[tid]||[];
+      if(!tevs.length) continue;
+      h += renderTrackEventGroup(tid, tevs, docNameMap);
+    }
+    if(untracked.length) {
+      h += renderTrackEventGroup('Other', untracked, docNameMap);
+    }
+    container.innerHTML = h;
     renderTagBar();
-    document.getElementById("evcnt").textContent=evs.length+" 条";
+    document.getElementById('evcnt').textContent = evs.length+' events';
     return;
   }
-  // Grouped mode: merge all events by thread/doc across ALL dates (no daily headers)
-  var docThreads={},orphanThreads={},singles=[];
-  for(var i=0;i<evs.length;i++){var ev=evs[i];if(ev.ref&&ev.ref.doc){if(!docThreads[ev.ref.doc])docThreads[ev.ref.doc]=[];docThreads[ev.ref.doc].push(ev)}else if(ev.threadId){if(!orphanThreads[ev.threadId])orphanThreads[ev.threadId]=[];orphanThreads[ev.threadId].push(ev)}else{singles.push(ev)}}
-  for(var d in docThreads){docThreads[d].sort(function(a,b){return (b.timestamp||"").localeCompare(a.timestamp||"")})}
-  for(var t in orphanThreads){orphanThreads[t].sort(function(a,b){return (b.timestamp||"").localeCompare(a.timestamp||"")})}
-  singles.sort(function(a,b){return (b.timestamp||"").localeCompare(a.timestamp||"")});
-  // Merge doc + orphan threads into one list sorted by latest event timestamp
+  // GROUPED mode (default): merge events by thread/doc
+  var docThreads={}, orphanThreads={}, singles=[];
+  for(var i=0;i<evs.length;i++) {
+    var ev=evs[i];
+    if(ev.ref&&ev.ref.doc) {
+      if(!docThreads[ev.ref.doc]) docThreads[ev.ref.doc]=[];
+      docThreads[ev.ref.doc].push(ev);
+    } else if(ev.threadId) {
+      if(!orphanThreads[ev.threadId]) orphanThreads[ev.threadId]=[];
+      orphanThreads[ev.threadId].push(ev);
+    } else {
+      singles.push(ev);
+    }
+  }
+  for(var d in docThreads) { docThreads[d].sort(function(a,b){ return (b.timestamp||"").localeCompare(a.timestamp||""); }); }
+  for(var t in orphanThreads) { orphanThreads[t].sort(function(a,b){ return (b.timestamp||"").localeCompare(a.timestamp||""); }); }
+  singles.sort(function(a,b){ return (b.timestamp||"").localeCompare(a.timestamp||""); });
   var merged=[];
-  for(var doc in docThreads){merged.push({tk:"doc:"+doc,te:docThreads[doc],title:docNameMap[doc]||doc.replace(/^.*[\\\/]/,"").replace(/\.md$/i,""),dataDoc:doc,ts:docThreads[doc][0].timestamp})}
-  for(var tid in orphanThreads){merged.push({tk:"tid:"+tid,te:orphanThreads[tid],title:"线程: "+tid,dataDoc:null,ts:orphanThreads[tid][0].timestamp})}
-  merged.sort(function(a,b){return (b.ts||"").localeCompare(a.ts||"")});
-  // Top 3 threads semi-collapsed
+  for(var doc in docThreads) {
+    merged.push({tk:"doc:"+doc, te:docThreads[doc], title:docNameMap[doc]||doc.replace(/^.*[\\\/]/,"").replace(/\.md$/i,""), dataDoc:doc, ts:docThreads[doc][0].timestamp});
+  }
+  for(var tid in orphanThreads) {
+    merged.push({tk:"tid:"+tid, te:orphanThreads[tid], title:"Thread: "+tid, dataDoc:null, ts:orphanThreads[tid][0].timestamp});
+  }
+  merged.sort(function(a,b){ return (b.ts||"").localeCompare(a.ts||""); });
   var top3={};
-  for(var ti=0;ti<Math.min(3,merged.length);ti++){top3[merged[ti].tk]=true}
-  // Render thread card helper
-  function rtc(tk,te,title,dataDoc,isSemi){
-    var tc2={};for(var i=0;i<te.length;i++){var tt=te[i].type;tc2[tt]=(tc2[tt]||0)+1}
-    var ts=[];for(var tk2 in tc2){ts.push(tk2+"\u00d7"+tc2[tk2])}
-    var manualOpen=!!expandedThreads[tk];var cls=(isSemi&&!manualOpen)?"semi":(manualOpen?"open":"");if(manualOpen)expandedThreads[tk]=true;
-    var r="<div class=\"th-card "+cls+"\" data-thread=\""+esc(tk)+"\""+(dataDoc?" data-doc=\""+esc(dataDoc)+"\"":"")+">";
-    r+="<div class=\"th-head\" onclick=\"toggleThread(this)\">";
-    r+="<span class=\"th-arrow\">\u25b6</span>";
-    r+="<span class=\"th-title\">"+esc(title)+"</span>";
-    r+="<span class=\"th-count\">"+te.length+" \u6761</span>";
-    r+="</div><div class=\"th-body\">";
-    r+="<div class=\"th-typebar\">"+esc(ts.join(" \u00b7 "))+"</div>";
-    if(isSemi&&!manualOpen){
+  for(var ti=0;ti<Math.min(3,merged.length);ti++) { top3[merged[ti].tk]=true; }
+  function rtc(tk, te, title, dataDoc, isSemi) {
+    var tc2={};
+    for(var i=0;i<te.length;i++) { var tt=te[i].type; tc2[tt]=(tc2[tt]||0)+1; }
+    var ts=[]; for(var tk2 in tc2) { ts.push(tk2+"\u00d7"+tc2[tk2]); }
+    var manualOpen=!!expandedThreads[tk];
+    var cls=(isSemi&&!manualOpen)?"semi":(manualOpen?"open":"");
+    if(manualOpen) expandedThreads[tk]=true;
+    var r='<div class="th-card '+cls+'" data-thread="'+esc(tk)+'"'+(dataDoc?' data-doc="'+esc(dataDoc)+'"':'')+'>';
+    r+='<div class="th-head" onclick="toggleThread(this)">';
+    r+='<span style="font-size:10px;color:#727785;transition:transform .2s;display:inline-block">&#9654;</span>';
+    r+='<span class="th-title">'+esc(title)+'</span>';
+    r+='<span class="th-count">'+te.length+' events</span>';
+    r+='</div><div class="th-body">';
+    r+='<div class="th-typebar">'+esc(ts.join(" · "))+'</div>';
+    if(isSemi&&!manualOpen) {
       r+=renderSingleEv(te[0]);
-      if(te.length>1)r+="<div class=\"th-more\" onclick=\"expandSemi(this);event.stopPropagation()\">\u25bc \u67e5\u770b\u5168\u90e8 "+te.length+" \u6761\u4e8b\u4ef6</div>";
-    }else{
-      for(var i=0;i<te.length;i++)r+=renderSingleEv(te[i]);
-      r+="<div class=\"th-collapse\" onclick=\"collapseThread(this);event.stopPropagation()\">\u25b2 \u6536\u8d77</div>";
+      if(te.length>1) r+='<div class="th-more" onclick="expandSemi(this);event.stopPropagation()">&#9660; View all '+te.length+' events</div>';
+    } else {
+      for(var i=0;i<te.length;i++) r+=renderSingleEv(te[i]);
+      r+='<div class="th-collapse" onclick="collapseThread(this);event.stopPropagation()">&#9650; Collapse</div>';
     }
-    r+="</div></div>";return r;
+    r+='</div></div>';
+    return r;
   }
-  // Render: threads first, then orphan singles
-  var h="";
-  for(var mi=0;mi<merged.length;mi++){var m=merged[mi];h+=rtc(m.tk,m.te,m.title,m.dataDoc,!!top3[m.tk])}
-  for(var ui=0;ui<singles.length;ui++)h+=renderSingleEv(singles[ui]);
-  container.innerHTML=h;
-  if(activeDocFilter){
-    var mc=container.querySelector(".th-card[data-doc=\""+CSS.escape(activeDocFilter)+"\"]");
-    if(mc){mc.classList.add("th-active");mc.scrollIntoView({behavior:"smooth",block:"center"})}
+  var h='';
+  for(var mi=0;mi<merged.length;mi++) { var m=merged[mi]; h+=rtc(m.tk,m.te,m.title,m.dataDoc,!!top3[m.tk]); }
+  for(var ui=0;ui<singles.length;ui++) h+=renderSingleEv(singles[ui]);
+  container.innerHTML = h;
+  if(activeDocFilter) {
+    var mc = container.querySelector('.th-card[data-doc="'+CSS.escape(activeDocFilter)+'"]');
+    if(mc) { mc.classList.add('th-active'); mc.scrollIntoView({behavior:'smooth',block:'center'}); }
   }
   renderTagBar();
-  document.getElementById("evcnt").textContent=evs.length+" 条";
+  document.getElementById('evcnt').textContent = evs.length+' events';
 }
+function renderTrackEventGroup(trackId, tevs, docNameMap) {
+  // Within a track, group by thread/doc
+  var docThreads={}, singles=[];
+  for(var i=0;i<tevs.length;i++) {
+    var ev=tevs[i];
+    if(ev.ref&&ev.ref.doc) {
+      if(!docThreads[ev.ref.doc]) docThreads[ev.ref.doc]=[];
+      docThreads[ev.ref.doc].push(ev);
+    } else {
+      singles.push(ev);
+    }
+  }
+  for(var d in docThreads) { docThreads[d].sort(function(a,b){ return (b.timestamp||"").localeCompare(a.timestamp||""); }); }
+  singles.sort(function(a,b){ return (b.timestamp||"").localeCompare(a.timestamp||""); });
+  // Get track label
+  var trackLabel = trackId;
+  if(R&&R.tracks) {
+    for(var i=0;i<R.tracks.length;i++) {
+      if(R.tracks[i].id===trackId) { trackLabel = R.tracks[i].label||trackId; break; }
+    }
+  }
-function toggleThread(headEl){
-  var card=headEl.parentNode;
-  if(card.classList.contains('open')){
-    card.classList.remove('open');
-  }else{
-    card.classList.add('open');
+  var h = '<div class="mb-lg">';
+  h += '<h4 class="font-label-caps text-label-caps text-on-surface-variant mb-md tracking-wider">'+esc(trackLabel)+' ('+tevs.length+' events)</h4>';
+  h += '<div class="flex flex-col gap-sm border-l border-outline-variant ml-sm pl-lg relative">';
+  for(var d in docThreads) {
+    var te = docThreads[d];
+    var title = docNameMap[d]||d.replace(/^.*[\\\/]/,"").replace(/\.md$/i,"");
+    for(var i=0;i<te.length;i++) {
+      h += '<div class="relative py-xs">';
+      h += '<span class="absolute -left-[25px] top-2 w-2 h-2 rounded-full bg-outline-design outline outline-4 outline-surface-bright"></span>';
+      h += '<div class="bg-surface-container-lowest border border-outline-variant p-md rounded hover:shadow-md transition-all hover-scale">';
+      h += '<div class="flex justify-between items-start mb-xs">';
+      h += '<span class="font-code-md text-code-md text-on-surface flex items-center gap-xs">';
+      if(te[i].ref&&te[i].ref.commit) h += '<span class="material-symbols-outlined text-tertiary-container text-[16px]">commit</span>';
+      h += esc(te[i].title)+'</span>';
+      h += '<span class="font-code-sm text-code-sm text-on-surface-variant">'+esc(fmtTime(te[i].timestamp||''))+'</span>';
+      h += '</div>';
+      if(te[i].type) {
+        h += '<div class="flex flex-wrap gap-xs mt-sm">';
+        h += '<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider font-code-sm bg-surface-container-low text-on-surface-variant border border-outline-variant">'+esc(te[i].type)+'</span>';
+        if(te[i].tags) for(var j=0;j<Math.min(3,te[i].tags.length);j++) {
+          h += '<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider font-code-sm bg-surface-container-low text-on-surface-variant border border-outline-variant">'+esc(te[i].tags[j])+'</span>';
+        }
+        h += '</div>';
+      }
+      h += '</div></div>';
+    }
+  }
+  for(var i=0;i<singles.length;i++) {
+    h += '<div class="relative py-xs">';
+    h += '<span class="absolute -left-[25px] top-2 w-2 h-2 rounded-full bg-outline-design outline outline-4 outline-surface-bright"></span>';
+    h += '<div class="bg-surface-container-lowest border border-outline-variant p-md rounded hover:shadow-md transition-all hover-scale">';
+    h += '<div class="flex justify-between items-start mb-xs">';
+    h += '<span class="font-code-md text-code-md text-on-surface">'+esc(singles[i].title)+'</span>';
+    h += '<span class="font-code-sm text-code-sm text-on-surface-variant">'+esc(fmtTime(singles[i].timestamp||''))+'</span>';
+    h += '</div>';
+    if(singles[i].type) {
+      h += '<div class="flex flex-wrap gap-xs mt-sm">';
+      h += '<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider font-code-sm bg-surface-container-low text-on-surface-variant border border-outline-variant">'+esc(singles[i].type)+'</span>';
+      if(singles[i].tags) for(var j=0;j<Math.min(3,singles[i].tags.length);j++) {
+        h += '<span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] uppercase tracking-wider font-code-sm bg-surface-container-low text-on-surface-variant border border-outline-variant">'+esc(singles[i].tags[j])+'</span>';
+      }
+      h += '</div>';
+    }
+    h += '</div></div>';
   }
+  h += '</div></div>';
+  return h;
 }
-function expandSemi(el){
-  var card=el.parentNode.parentNode;
-  var tk=card.getAttribute("data-thread");
-  if(tk)expandedThreads[tk]=true;
-  card.classList.remove("semi");
-  card.classList.add("open");
+// Thread controls
+function toggleThread(headEl) {
+  var card = headEl.parentNode;
+  if(card.classList.contains('open')) { card.classList.remove('open'); }
+  else { card.classList.add('open'); }
+}
+function expandSemi(el) {
+  var card = el.parentNode.parentNode;
+  var tk = card.getAttribute('data-thread');
+  if(tk) expandedThreads[tk]=true;
+  card.classList.remove('semi');
+  card.classList.add('open');
   renderEvents();
 }
+function collapseThread(el) {
+  var card = el.parentNode.parentNode;
+  card.classList.remove('open');
+}
-function collapseThread(el){
-  var card=el.parentNode.parentNode;
-  card.classList.remove("open");
+function evMatchesDoc(ev, doc) {
+  if(!doc) return true;
+  if(doc==='__unmatched__') return !evHasAnyElementMatch(ev);
+  if(doc==='__todo__') return ev.tags&&ev.tags.indexOf('todo')!==-1;
+  if(ev.ref&&ev.ref.doc===doc) return true;
+  if(ev.tags&&ev.tags.indexOf(doc)!==-1) return true;
+  if(ev.title&&ev.title.indexOf(doc)!==-1) return true;
+  return false;
+}
+function evHasAnyElementMatch(ev) {
+  if(!T||!T.elements) return false;
+  for(var i=0;i<T.elements.length;i++) {
+    var el=T.elements[i];
+    if(el.source&&el.source.file) { if(ev.ref&&ev.ref.doc===el.source.file) return true; }
+    var elVer=extractVersion(el.name||'');
+    if(elVer&&ev.tags&&ev.tags.indexOf(elVer)!==-1) return true;
+    if(elVer&&ev.title&&ev.title.indexOf(elVer)!==-1) return true;
+    if(el.children) {
+      for(var j=0;j<el.children.length;j++) {
+        var ch=el.children[j];
+        if(ch.source&&ch.source.file) { if(ev.ref&&ev.ref.doc===ch.source.file) return true; }
+        var chVer=extractVersion(ch.name||'');
+        if(chVer&&ev.tags&&ev.tags.indexOf(chVer)!==-1) return true;
+        if(chVer&&ev.title&&ev.title.indexOf(chVer)!==-1) return true;
+      }
+    }
+  }
+  return false;
+}
+function countUnmatchedEvents() {
+  if(!T||!T.events) return 0;
+  var c=0;
+  for(var i=0;i<T.events.length;i++) { if(!evHasAnyElementMatch(T.events[i])) c++; }
+  return c;
+}
+// ====== TAG FILTER ======
+function setTagFilter(tag) {
+  if(activeTagFilter===tag) { activeTagFilter=null; }
+  else { activeTagFilter=tag; }
+  renderTagBar();
+  renderEvents();
+}
+var expandedTagCats = {};
+function toggleTagCat(cn) {
+  if(expandedTagCats[cn]) { expandedTagCats[cn]=false; }
+  else { expandedTagCats[cn]=true; }
+  renderTagBar();
+}
+function renderTagBar() {
+  var bar = document.getElementById('tag-bar');
+  if(!T||!T.events) { bar.innerHTML=''; return; }
+  var allEvs=T.events||[], tagCount={};
+  for(var i=0;i<allEvs.length;i++) {
+    var tags=allEvs[i].tags||[];
+    for(var j=0;j<tags.length;j++) tagCount[tags[j]]=(tagCount[tags[j]]||0)+1;
+  }
+  var catTags={};
+  for(var tag in tagCount) {
+    var c=catOfTag(tag);
+    if(!catTags[c]) catTags[c]=[];
+    catTags[c].push({tag:tag,count:tagCount[tag]});
+  }
+  var catOrder=["模块","主题","阶段","动作","其他"];
+  var h='';
+  for(var ci=0;ci<catOrder.length;ci++) {
+    var cn=catOrder[ci], items=catTags[cn];
+    if(!items||!items.length) continue;
+    items.sort(function(a,b){ return b.count-a.count; });
+    var expand=!!expandedTagCats[cn];
+    var limit=expand?items.length:Math.min(3,items.length);
+    h+='<div class="tag-row"><span class="tag-cat">'+cn+'</span>';
+    for(var ii=0;ii<limit;ii++) {
+      var item=items[ii], isOn=activeTagFilter===item.tag;
+      h+='<span class="tag-btn'+(isOn?' on':'')+'" data-tag="'+esc(item.tag)+'" onclick="setTagFilter(\''+esc(item.tag)+'\');event.stopPropagation()">'+esc(item.tag)+' <em>'+item.count+'</em></span>';
+    }
+    if(items.length>3&&!expand) h+='<span class="tag-more" onclick="toggleTagCat(\''+esc(cn)+'\');event.stopPropagation()">+'+(items.length-3)+'</span>';
+    if(expand) h+='<span class="tag-more" onclick="toggleTagCat(\''+esc(cn)+'\');event.stopPropagation()">Collapse</span>';
+    h+='</div>';
+  }
+  bar.innerHTML = h;
 }
 // ====== FLOATING PREVIEW ======
-function preview(e,path,from){
+function preview(e, path, from) {
   e.preventDefault();
-  var float=document.getElementById('float'),overlay=document.getElementById('overlay');
-  var needFr=(from==='left'); // tree → fr (right:0), events → no fr (left:0)
-  var hasFr=float.classList.contains('fr');
-  document.getElementById('ftitle').textContent=path;
-  document.getElementById('float-body').textContent='加载中...';
-  fetch('/'+encodeURI(path)).then(function(r){if(!r.ok)throw Error('HTTP '+r.status);return r.text()}).then(function(t){
-    t=t.replace(/<!--[\s\S]*?-->/g,'').trim();
-    document.getElementById('float-body').textContent=t||'(空文件)';
-  }).catch(function(err){document.getElementById('float-body').textContent='加载失败：'+err.message});
-  // If switching sides, hide first to avoid position jump
-  if(!float.classList.contains('hide') && needFr!==hasFr){
+  var float = document.getElementById('float'), overlay = document.getElementById('overlay');
+  var needFr = (from==='left');
+  var hasFr = float.classList.contains('fr');
+  document.getElementById('ftitle').textContent = path;
+  document.getElementById('float-body').textContent = 'Loading...';
+  fetch('/'+encodeURI(path)).then(function(r) {
+    if(!r.ok) throw Error('HTTP '+r.status);
+    return r.text();
+  }).then(function(t) {
+    t = t.replace(/<!--[\s\S]*?-->/g,'').trim();
+    document.getElementById('float-body').textContent = t||'(empty file)';
+  }).catch(function(err) {
+    document.getElementById('float-body').textContent = 'Load failed: '+err.message;
+  });
+  if(!float.classList.contains('hide') && needFr!==hasFr) {
     float.classList.add('hide');
-    setTimeout(function(){
-      if(needFr){float.classList.add('fr')}else{float.classList.remove('fr')}
+    setTimeout(function() {
+      if(needFr) { float.classList.add('fr'); } else { float.classList.remove('fr'); }
       float.classList.remove('hide');
-    },300);
-  }else{
-    if(needFr){float.classList.add('fr')}else{float.classList.remove('fr')}
+    }, 300);
+  } else {
+    if(needFr) { float.classList.add('fr'); } else { float.classList.remove('fr'); }
     float.classList.remove('hide');
   }
   overlay.classList.remove('hide');
 }
-document.getElementById('float-close').addEventListener('click',function(){
+document.getElementById('float-close').addEventListener('click', function() {
   document.getElementById('float').classList.add('hide');
   document.getElementById('overlay').classList.add('hide');
 });
-document.getElementById('overlay').addEventListener('click',function(){
+document.getElementById('overlay').addEventListener('click', function() {
   document.getElementById('float').classList.add('hide');
   document.getElementById('overlay').classList.add('hide');
 });
 // ====== TOKEN PANEL ======
-function loadTokenToday(){
-  fetch('../data/token-summary.json').then(function(r){return r.json()}).then(function(d){
+function loadTokenToday() {
+  fetch('../data/token-summary.json').then(function(r) { return r.json(); }).then(function(d) {
     renderTokenToday(d);
-  }).catch(function(){
-    document.getElementById('token-today').childNodes[0].textContent='工具token：--';
+  }).catch(function() {
+    document.getElementById('token-today').childNodes[0].textContent = 'Usage: --';
   });
 }
-function renderTokenToday(d){
-  var today=new Date().toISOString().substring(0,10);
-  var td=d&&d.byDate?d.byDate[today]:null;
-  var todayTokens=td?td.tokens:0;
-  var todayCost=0;
-  if(td&&d.bySkill){
-    // Estimate today's cost from skills if available
-    todayCost=d.totalCost||0;
-  }
-  var label=document.getElementById('token-today');
-  label.childNodes[0].textContent='工具token：'+(todayTokens?todayTokens.toLocaleString()+' tk':'--');
-  // Build tooltip content
-  var tip=document.getElementById('token-tip');
-  var h='';
-  if(d&&d.totalTokens>0){
-    h+='<div class="tip-row"><span class="tip-name">今日</span><span class="tip-val">'+(todayTokens?todayTokens.toLocaleString()+' tk':'--')+'</span></div>';
-    h+='<div class="tip-row"><span class="tip-name">累计</span><span class="tip-val">'+d.totalTokens.toLocaleString()+' tk</span></div>';
-    h+='<div class="tip-row"><span class="tip-name">估算费用</span><span class="tip-val">¥'+(d.totalCost||0).toFixed(3)+'</span></div>';
-    if(d.bySkill){
+function renderTokenToday(d) {
+  var today = new Date().toISOString().substring(0,10);
+  var td = d&&d.byDate ? d.byDate[today] : null;
+  var todayTokens = td ? td.tokens : 0;
+  var label = document.getElementById('token-today');
+  label.childNodes[0].textContent = 'Usage: '+(todayTokens ? todayTokens.toLocaleString()+' tk' : '--');
+  var tip = document.getElementById('token-tip');
+  var h = '';
+  if(d&&d.totalTokens>0) {
+    h += '<div class="tip-row"><span class="tip-name">Today</span><span class="tip-val">'+(todayTokens?todayTokens.toLocaleString()+' tk':'--')+'</span></div>';
+    h += '<div class="tip-row"><span class="tip-name">Total</span><span class="tip-val">'+d.totalTokens.toLocaleString()+' tk</span></div>';
+    h += '<div class="tip-row"><span class="tip-name">Est. Cost</span><span class="tip-val">$'+(d.totalCost||0).toFixed(3)+'</span></div>';
+    if(d.bySkill) {
       var skills=[];
-      for(var k in d.bySkill){skills.push({name:k,tokens:d.bySkill[k].tokens||0,calls:d.bySkill[k].calls||0})}
-      skills.sort(function(a,b){return b.tokens-a.tokens});
-      if(skills.length>0){
-        h+='<div class="tip-divider"></div>';
-        for(var i=0;i<skills.length;i++){
-          h+='<div class="tip-row"><span class="tip-name">'+esc(skills[i].name)+'</span><span class="tip-val">'+skills[i].tokens.toLocaleString()+' tk ×'+skills[i].calls+'</span></div>';
+      for(var k in d.bySkill) { skills.push({name:k,tokens:d.bySkill[k].tokens||0,calls:d.bySkill[k].calls||0}); }
+      skills.sort(function(a,b){ return b.tokens-a.tokens; });
+      if(skills.length>0) {
+        h += '<div class="tip-divider"></div>';
+        for(var i=0;i<skills.length;i++) {
+          h += '<div class="tip-row"><span class="tip-name">'+esc(skills[i].name)+'</span><span class="tip-val">'+skills[i].tokens.toLocaleString()+' tk x'+skills[i].calls+'</span></div>';
         }
       }
     }
-  }else{
-    h+='<div class="tip-row"><span class="tip-name">暂无数据</span></div>';
+  } else {
+    h += '<div class="tip-row"><span class="tip-name">No data</span></div>';
   }
-  tip.innerHTML=h;
+  tip.innerHTML = h;
-  // Hover toggling
-  label.onmouseenter=function(){tip.classList.add('show')};
-  label.onmouseleave=function(){tip.classList.remove('show')};
+  label.onmouseenter = function() { tip.classList.add('show'); };
+  label.onmouseleave = function() { tip.classList.remove('show'); };
 }
 </script>
 </body>