dsh-quick-toc 0.1.0 → 0.2.0-beta

package/README.en.md

@@ -17,7 +17,13 @@ A quick conversation TOC plugin for [DeepSeek Harness](https://github.com/deepse
 
 ## Install
 
-With the DSH CLI:
+With the DSH CLI (published on npm — name only):
+
+```
+dsh plugin --profile web add dsh-quick-toc
+```
+
+or from GitHub:
 
 ```
 dsh plugin --profile web add github:LyaxZ/dsh-quick-toc

package/README.md

@@ -17,7 +17,13 @@
 
 ## 安装
 
-通过 DSH CLI 安装（仓库路径替换为实际值）：
+通过 DSH CLI 安装（已发布 npm，只要名字）：
+
+```
+dsh plugin --profile web add dsh-quick-toc
+```
+
+或从 GitHub 安装：
 
 ```
 dsh plugin --profile web add github:LyaxZ/dsh-quick-toc

package/lib/client.js

@@ -42,6 +42,34 @@ window.__ModuleLoader__.load({
         .trim();
     }
 
+    // user messages carry their text in data.content (assistant replies use
+    // data.blocks) — read whichever is present
+    function extractUserText(node) {
+      var d = node && node.data;
+      if (!d) return "";
+      var content = d.content;
+      if (typeof content === "string") return content;
+      if (Array.isArray(content)) {
+        var out = "";
+        for (var i = 0; i < content.length; i++) {
+          var b = content[i];
+          if (b && typeof b === "object" && (b.type === "text" || b.kind === "text") && typeof b.text === "string") {
+            out += b.text + "\n";
+          }
+        }
+        return out;
+      }
+      return extractReplyText(node);
+    }
+
+    // first non-empty line of a message, truncated for the outline header
+    function previewText(text, max) {
+      if (!text) return "";
+      var first = text.split("\n").map(function (s) { return s.trim(); }).filter(Boolean)[0] || "";
+      if (first.length > max) first = first.slice(0, max) + "…";
+      return first;
+    }
+
     function parseHeadings(text) {
       var items = [];
       var re = /^(#{1,6})\s+(.+?)\s*#*\s*$/gm;
@@ -65,6 +93,28 @@ window.__ModuleLoader__.load({
       return root.children;
     }
 
+    // strict lookup: exact dataset match or CSS-escaped selector only —
+    // no fuzzy contains matching (avoids landing on the wrong row);
+    // hidden rows (zero rect, e.g. duplicate/hidden copies) are skipped
+    function findRowStrict(key) {
+      if (!key) return null;
+      var rows = document.querySelectorAll("[data-chat-anchor-key]");
+      for (var i = 0; i < rows.length; i++) {
+        if (rows[i].dataset && rows[i].dataset.chatAnchorKey === key) {
+          var r = rows[i].getBoundingClientRect();
+          if (r.width > 0 && r.height > 0) return rows[i];
+        }
+      }
+      try {
+        var el = document.querySelector('[data-chat-anchor-key="' + window.CSS.escape(key) + '"]');
+        if (el) {
+          var r2 = el.getBoundingClientRect();
+          if (r2.width > 0 && r2.height > 0) return el;
+        }
+      } catch (e) {}
+      return null;
+    }
+
     function findRow(key) {
       if (!key) return null;
       var rows = document.querySelectorAll("[data-chat-anchor-key]");
@@ -85,6 +135,19 @@ window.__ModuleLoader__.load({
       return null;
     }
 
+    // find the conversation's "load older messages" button (scoped to the
+    // conversation scrollport so panel buttons are never matched)
+    function findLoadOlderButton() {
+      var sp = document.querySelector("[data-conversation-scroll]");
+      if (!sp) return null;
+      var buttons = sp.querySelectorAll("button");
+      for (var i = 0; i < buttons.length; i++) {
+        var t = (buttons[i].textContent || "").trim();
+        if (/加载|更早|loadOlder|older/i.test(t)) return buttons[i];
+      }
+      return null;
+    }
+
     // ---------- theme colors: DSH CSS variables (adapt to light/dark) ----------
     var C = {
       panelBg: "var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96))",
@@ -257,6 +320,58 @@ window.__ModuleLoader__.load({
       var setVisibleCount = _s9[1];
       var listRef = react.useRef(null);
       var didInitScroll = react.useRef(false);
+      var outlineTouchRef = react.useRef(0); // last time the user touched the outline
+
+      // ---- search: header button opens a keyword box; Enter cycles through
+      // matching headings and jumps to each ----
+      var _s13 = react.useState(false);
+      var searchOpen = _s13[0];
+      var setSearchOpen = _s13[1];
+      var _s14 = react.useState("");
+      var query = _s14[0];
+      var setQuery = _s14[1];
+      var _s15 = react.useState(0);
+      var matchIdx = _s15[0];
+      var setMatchIdx = _s15[1];
+      var searchRef = react.useRef(null);
+      // animation state: hidden | enter | shown | out; and a transient
+      // "searching" flag that drives the spinner
+      var _s16 = react.useState("hidden");
+      var searchAnim = _s16[0];
+      var setSearchAnim = _s16[1];
+      var _s17 = react.useState(false);
+      var searching = _s17[0];
+      var setSearching = _s17[1];
+      var searchTimerRef = react.useRef(null);
+      var openSearch = function () {
+        setSearchOpen(true);
+        setSearchAnim("enter");
+      };
+      var closeSearch = function () {
+        setSearchAnim("out");
+        setQuery("");
+        setTimeout(function () {
+          setSearchOpen(false);
+          setSearchAnim("hidden");
+        }, 240);
+      };
+      react.useEffect(function () {
+        if (searchAnim === "enter") {
+          var raf = requestAnimationFrame(function () { setSearchAnim("shown"); });
+          return function () { cancelAnimationFrame(raf); };
+        }
+        return undefined;
+      }, [searchAnim]);
+      react.useEffect(function () {
+        if (searchOpen && searchRef.current) searchRef.current.focus();
+      }, [searchOpen]);
+      var onQueryChange = function (v) {
+        setQuery(v);
+        setMatchIdx(0);
+        setSearching(true);
+        if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+        searchTimerRef.current = setTimeout(function () { setSearching(false); }, 220);
+      };
 
       // the group currently being read (under the list viewport middle):
       // it stays at full opacity, every other group is dimmed
@@ -272,20 +387,58 @@ window.__ModuleLoader__.load({
         listRef.current.scrollTop = listRef.current.scrollHeight;
       }, [groups ? groups.length : 0]);
 
-      // scroll to the top edge loads older groups (keeps the visual position)
-      var onListScroll = function (e) {
-        var el = e.currentTarget;
-        if (el.scrollTop <= 24 && visibleCount < groups.length) {
-          var prevH = el.scrollHeight;
-          setVisibleCount(Math.min(groups.length, visibleCount + PAGE_SIZE));
-          requestAnimationFrame(function () {
+      // load older outline groups; when everything is loaded, click the
+      // conversation's own "load older" button so older turns keep appearing
+      var loadOlderOutline = function (el) {
+        var grow = function () {
+          if (visibleCount < groups.length) {
+            var prevH = el.scrollHeight;
+            setVisibleCount(Math.min(groups.length, visibleCount + PAGE_SIZE));
             requestAnimationFrame(function () {
-              el.scrollTop += (el.scrollHeight - prevH);
+              requestAnimationFrame(function () {
+                el.scrollTop += (el.scrollHeight - prevH);
+              });
             });
-          });
+            return true;
+          }
+          return false;
+        };
+        if (grow()) return;
+        var btn = findLoadOlderButton();
+        if (btn && !btn.disabled) {
+          btn.click();
+          // once the conversation loads more, expand the outline window too
+          setTimeout(function () {
+            var prevH2 = el.scrollHeight;
+            if (grow()) {
+              requestAnimationFrame(function () {
+                requestAnimationFrame(function () {
+                  el.scrollTop += (el.scrollHeight - prevH2);
+                });
+              });
+            }
+          }, 1200);
         }
       };
 
+      // wheel up (toward older) loads more when the list is at its top or has
+      // nothing to scroll (content shorter than the panel) — so scrolling up
+      // always refreshes older turns, even without a visible scrollbar
+      var onListWheel = function (e) {
+        outlineTouchRef.current = Date.now();
+        if (e.deltaY >= 0) return;
+        var el = listRef.current;
+        if (!el) return;
+        if (el.scrollTop <= 1) loadOlderOutline(el);
+      };
+
+      // scroll to the top edge also loads older groups (keeps the visual position)
+      var onListScroll = function (e) {
+        outlineTouchRef.current = Date.now();
+        var el = e.currentTarget;
+        if (el.scrollTop <= 24) loadOlderOutline(el);
+      };
+
       // ---- resize drags (right edge = width, bottom edge = height) ----
       var onResizeWDown = function (e) {
         e.preventDefault();
@@ -390,8 +543,11 @@ window.__ModuleLoader__.load({
         var result = [];
         var current = null;
         var turnTimes = {};
+        var turnUserKey = {};
+        var turnUserText = {};
         if (!order || !nodes) return result;
-        // first pass: per-turn time — the LAST message of the turn wins (end time)
+        // first pass: per-turn time — the LAST message of the turn wins (end time);
+        // also remember each turn's user message key + first-line preview
         for (var i = 0; i < order.length; i++) {
           var k0 = order[i];
           var n0 = nodes.get(k0);
@@ -399,6 +555,10 @@ window.__ModuleLoader__.load({
           var l0 = n0.location;
           var tid0 = l0 && (l0.kind === "turn" || l0.kind === "step") && l0.turn ? l0.turn.turn : null;
           if (tid0 === null) continue;
+          if (n0.kind === "user" && turnUserKey[tid0] === undefined) {
+            turnUserKey[tid0] = k0;
+            turnUserText[tid0] = previewText(extractUserText(n0), 30);
+          }
           var t0 = getNodeTime(n0);
           if (t0) turnTimes[tid0] = t0;
         }
@@ -411,7 +571,13 @@ window.__ModuleLoader__.load({
           var turnId = loc && (loc.kind === "turn" || loc.kind === "step") && loc.turn ? loc.turn.turn : null;
           var sameGroup = current !== null && current.turn === turnId;
           if (!sameGroup) {
-            current = { turn: turnId, time: turnId !== null ? (turnTimes[turnId] || "") : "", headings: [] };
+            current = {
+              turn: turnId,
+              time: turnId !== null ? (turnTimes[turnId] || "") : "",
+              userKey: turnId !== null ? (turnUserKey[turnId] || "") : "",
+              userText: turnId !== null ? (turnUserText[turnId] || "") : "",
+              headings: []
+            };
             result.push(current);
           }
           var parsed = parseHeadings(extractReplyText(node));
@@ -421,7 +587,9 @@ window.__ModuleLoader__.load({
             hIdx++;
           }
         }
-        return result.filter(function (g) { return g.headings.length > 0; });
+        // keep a turn when it has headings OR a time — turns without headings
+        // still get a standalone time entry in the outline (click to jump)
+        return result.filter(function (g) { return g.headings.length > 0 || g.time !== ""; });
       }, [order, nodes]);
       var groupTrees = react.useMemo(function () {
         return groups.map(function (g) { return buildTree(g.headings); });
@@ -463,8 +631,10 @@ window.__ModuleLoader__.load({
           if (sig !== activeSigRef.current) {
             activeSigRef.current = sig;
             setActiveGroup(actives);
-            // auto-follow: keep the reading position visible in the outline
-            if (actives.length > 0) {
+            // auto-follow: keep the reading position visible in the outline —
+            // but pause for ~2s after the user touches the outline themselves,
+            // otherwise loading older turns gets yanked back to the bottom
+            if (actives.length > 0 && Date.now() - outlineTouchRef.current > 2000) {
               var gi0 = actives[0];
               // ensure the group's window is loaded (with a small buffer below)
               setVisibleCount(function (prev) {
@@ -491,6 +661,23 @@ window.__ModuleLoader__.load({
         return function () { sp.removeEventListener("scroll", update); };
       }, [keyToGroup]);
 
+      // ---- search matches: headings whose title contains the query ----
+      var matches = react.useMemo(function () {
+        var q = query.trim().toLowerCase();
+        if (!q) return [];
+        var out = [];
+        for (var gi = 0; gi < groups.length; gi++) {
+          var g = groups[gi];
+          for (var j = 0; j < g.headings.length; j++) {
+            var h = g.headings[j];
+            if (h.title.toLowerCase().indexOf(q) >= 0) {
+              out.push({ gi: gi, title: h.title, key: h.key, idx: h.idx });
+            }
+          }
+        }
+        return out;
+      }, [groups, query]);
+
       // ---- nothing to show without headings ----
       if (groups.length === 0) return null;
 
@@ -502,7 +689,19 @@ window.__ModuleLoader__.load({
           ? window.innerWidth - (viewport ? viewport.right + 48 : 60) - panelW
           : (viewport ? viewport.left + 8 : 8);
       } else {
-        panelLeft = dockRight ? window.innerWidth + 24 : -(panelW + 48);
+        // collapsed position:
+        //  left dock  -> slide just past the left sidebar edge (stop there)
+        //  right dock -> boundary is the right sidebar when it is open,
+        //                otherwise the screen's right edge
+        if (dockRight) {
+          // with the right sidebar open, slide INTO the sidebar area (covered
+          // by the cover wall); otherwise fly off the screen's right edge
+          panelLeft = (viewport && viewport.right > 80)
+            ? (window.innerWidth - viewport.right)
+            : window.innerWidth + 24;
+        } else {
+          panelLeft = (viewport ? viewport.left - panelW - 8 : -(panelW + 48));
+        }
       }
       var vMaxH = viewport ? Math.max(200, viewport.height - 28) : "72vh";
       var baseTopPx = (viewport ? viewport.top + 14 : window.innerHeight * 0.12) + panelY;
@@ -555,6 +754,24 @@ window.__ModuleLoader__.load({
         sp.scrollTo({ top: t, behavior: "smooth" });
       };
 
+      // jump to the n-th match, cycling; also reveal the group in the outline
+      var goToMatch = function (n) {
+        if (matches.length === 0) return;
+        var i = ((n % matches.length) + matches.length) % matches.length;
+        setMatchIdx(i);
+        var m = matches[i];
+        jump(m.key, m.idx);
+        setVisibleCount(function (prev) {
+          return Math.max(prev, Math.min(groups.length, groups.length - m.gi));
+        });
+        setTimeout(function () {
+          var el = listRef.current;
+          if (!el) return;
+          var node = el.querySelector('[data-group-idx="' + m.gi + '"]');
+          if (node) node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }, 150);
+      };
+
       // ---- circular icon button (glyph optical offset: ox/oy px) ----
       var iconBtn = function (onClick, tip, glyph, fontSize, offset) {
         var ox = offset ? (offset.x || 0) : 0;
@@ -599,8 +816,26 @@ window.__ModuleLoader__.load({
       };
 
       // ---- panel ----
-      // panel: non-linear slide with fade in/out, slightly slower for a smoother feel
-      var panelTransition = "left 0.6s " + EASE + ", opacity 0.45s ease";
+      // panel: opening slides in with a slow fade; closing slides quickly to
+      // the dock edge, clipped by the sidebar line (looks covered, not
+      // dissolving) and only fades at the very end. No box-shadow: a shadow
+      // would get cut in half by the clip-path, so the panel is flat.
+      var panelTransition = open
+        ? "left 0.6s " + EASE + ", clip-path 0.6s " + EASE + ", opacity 0.45s ease"
+        : "left 0.28s " + EASE + ", clip-path 0.28s " + EASE + ", opacity 0.14s ease 0.26s";
+
+      // clip the panel at the dock edge while collapsed, so sliding away looks
+      // like being covered by the sidebar (the sidebar stays untouched):
+      //  left dock  -> clipped from the left up to the sidebar line
+      //  right dock -> clipped from the right at the screen/sidebar line
+      var panelClip = "inset(0 0 0 0px)";
+      if (!open) {
+        if (dockRight) {
+          panelClip = "inset(0 " + panelW + "px 0 0)";
+        } else {
+          panelClip = "inset(0 0 0 " + (panelW + 8) + "px)";
+        }
+      }
       var panelOpacity = open ? (hovered ? 0.95 : 0.45) : 0;
 
       var panelEl = react_jsx_runtime.jsx("div", {
@@ -621,6 +856,8 @@ window.__ModuleLoader__.load({
           overflow: "hidden",
           color: C.text,
           opacity: panelOpacity,
+          clipPath: panelClip,
+          boxShadow: "none",
           transition: panelTransition,
           pointerEvents: "auto"
         },
@@ -693,15 +930,164 @@ window.__ModuleLoader__.load({
                   react_jsx_runtime.jsx("div", {
                     style: { display: "flex", alignItems: "center", gap: 6, flex: "none" },
                     children: [
-                      // triangle tips toward the side it will move TO: shift slightly down + toward the tip
-                      iconBtn(toggleDock, dockRight ? "移到左侧" : "移到右侧", dockRight ? "◀" : "▶", 12, dockRight ? { x: -1, y: 1 } : { x: 1, y: 1 }),
-                      iconBtn(function () { setOpen(false); }, "收起", "✕", 13, { x: 0, y: -1 })
+                      // magnifier button (SVG, matches the other buttons' style)
+                      react_jsx_runtime.jsx("button", {
+                        onClick: function () { searchOpen ? closeSearch() : openSearch(); },
+                        title: "搜索标题",
+                        style: {
+                          width: 24,
+                          height: 24,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "50%",
+                          background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+                          border: "none",
+                          color: C.muted,
+                          cursor: "pointer"
+                        },
+                        onMouseEnter: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-active, rgba(79,140,255,0.24))";
+                          e.currentTarget.style.color = "var(--dsw-alias-brand-primary, #4f8cff)";
+                        },
+                        onMouseLeave: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+                          e.currentTarget.style.color = C.muted;
+                        },
+                        children: react_jsx_runtime.jsx("svg", {
+                          width: 15,
+                          height: 15,
+                          viewBox: "0 0 24 24",
+                          // overflow visible: the stroke may extend past the
+                          // viewBox without being clipped at the svg boundary
+                          style: { display: "block", transform: "translate(-1px, -1px)", overflow: "visible" },
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 3.6,
+                          strokeLinecap: "round",
+                          children: [
+                            react_jsx_runtime.jsx("circle", { cx: 11, cy: 11, r: 7 }),
+                            react_jsx_runtime.jsx("line", { x1: 21, y1: 21, x2: 16, y2: 16 })
+                          ]
+                        })
+                      }),
+                      // triangle tips toward the side it will move TO: shift slightly up + toward the tip
+                      iconBtn(toggleDock, dockRight ? "移到左侧" : "移到右侧", dockRight ? "◀" : "▶", 12, dockRight ? { x: -1, y: -1 } : { x: 1, y: -1 }),
+                      // close: thick SVG cross, nudged slightly down
+                      react_jsx_runtime.jsx("button", {
+                        onClick: function () { setOpen(false); },
+                        title: "收起",
+                        style: {
+                          width: 24,
+                          height: 24,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "50%",
+                          background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+                          border: "none",
+                          color: C.muted,
+                          cursor: "pointer"
+                        },
+                        onMouseEnter: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-active, rgba(79,140,255,0.24))";
+                          e.currentTarget.style.color = "var(--dsw-alias-brand-primary, #4f8cff)";
+                        },
+                        onMouseLeave: function (e) {
+                          e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+                          e.currentTarget.style.color = C.muted;
+                        },
+                        children: react_jsx_runtime.jsx("svg", {
+                          width: 15,
+                          height: 15,
+                          viewBox: "0 0 24 24",
+                          style: { display: "block", transform: "translate(1px, 0px)", overflow: "visible" },
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 3.4,
+                          strokeLinecap: "round",
+                          children: [
+                            // cross lines span 5..19, intersection (12,12) centered
+                            react_jsx_runtime.jsx("line", { x1: 5, y1: 5, x2: 19, y2: 19 }),
+                            react_jsx_runtime.jsx("line", { x1: 19, y1: 5, x2: 5, y2: 19 })
+                          ]
+                        })
+                      })
                     ]
                   })
                 ]
               })
             ]
           }),
+          // search input row: outer grid row animates 0fr<->1fr so the row
+          // collapses/expands to its EXACT natural height (no max-height
+          // overshoot stutter); the outline below moves smoothly with it
+          (searchOpen || searchAnim === "out") ? react_jsx_runtime.jsx("div", {
+            style: {
+              display: "grid",
+              gridTemplateRows: (searchAnim === "enter" || searchAnim === "out") ? "0fr" : "1fr",
+              transition: "grid-template-rows 0.2s " + EASE,
+              flex: "none"
+            },
+            children: react_jsx_runtime.jsx("div", {
+              style: { overflow: "hidden", minHeight: 0 },
+              children: react_jsx_runtime.jsx("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  padding: "2px 8px 4px",
+                  borderBottom: "1px solid " + C.panelBorder,
+                  opacity: (searchAnim === "enter" || searchAnim === "out") ? 0 : 1,
+                  transform: (searchAnim === "enter" || searchAnim === "out") ? "translateY(-6px)" : "none",
+                  transition: "opacity 0.2s ease, transform 0.2s ease"
+                },
+                children: [
+              react_jsx_runtime.jsx("input", {
+                ref: searchRef,
+                value: query,
+                onChange: function (e) { onQueryChange(e.target.value); },
+                onKeyDown: function (e) {
+                  if (e.key === "Enter") { goToMatch(matchIdx + 1); e.preventDefault(); }
+                  if (e.key === "Escape") { closeSearch(); }
+                },
+                placeholder: "搜索标题，回车定位…",
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
+                  border: "none",
+                  borderRadius: 6,
+                  padding: "3px 8px",
+                  fontSize: 12,
+                  color: C.text,
+                  outline: "none"
+                }
+              }),
+              searching ? react_jsx_runtime.jsx("span", {
+                style: { width: 13, height: 13, flex: "none", display: "flex", alignItems: "center", justifyContent: "center" },
+                children: react_jsx_runtime.jsx("svg", {
+                  width: 12,
+                  height: 12,
+                  viewBox: "0 0 24 24",
+                  style: { display: "block", animation: "dqt-spin 0.8s linear infinite" },
+                  children: react_jsx_runtime.jsx("circle", {
+                    cx: 12, cy: 12, r: 9,
+                    fill: "none",
+                    stroke: C.muted,
+                    strokeWidth: 3,
+                    strokeDasharray: "42 22",
+                    strokeLinecap: "round"
+                  })
+                })
+              }) : react_jsx_runtime.jsx("span", {
+                style: { fontSize: 11, color: C.muted, flex: "none", minWidth: 30, textAlign: "center" },
+                children: matches.length > 0 ? ((matchIdx % matches.length) + 1) + "/" + matches.length : ""
+              })
+                ]
+              })
+            })
+          }) : null,
           // outline list (paged: newest first, scroll to the top loads older);
           // the scrollbar follows the dock side (rtl flips it to the left)
           react_jsx_runtime.jsx("div", {
@@ -709,12 +1095,12 @@ window.__ModuleLoader__.load({
             style: {
               overflowY: "auto",
               padding: "6px 8px",
-              maxHeight: "60vh",
               flex: "1 1 auto",
               minHeight: 0,
               direction: dockRight ? "ltr" : "rtl"
             },
             onScroll: onListScroll,
+            onWheel: onListWheel,
             children: react_jsx_runtime.jsx("div", {
               style: { direction: "ltr" },
               children: renderGroups(shownGroups, shownTrees, jump, C, Math.max(0, groups.length - visibleCount), activeGroup)
@@ -867,6 +1253,50 @@ window.__ModuleLoader__.load({
       return out;
     }
 
+    // a group's header: clicking the time jumps to that turn's start.
+    // Implemented as a function (not an inline closure in a loop) so each
+    // header captures its own (g, gi) — the var-in-loop closure bug would
+    // otherwise make every header jump to the last group.
+    function renderGroupHeader(g, gi, jump, C) {
+      var jumpToTurn = function (e) {
+        e.stopPropagation();
+        if (!g.userKey) return;
+        var r0 = findRowStrict(g.userKey);
+        if (r0) jump(g.userKey);
+        else if (g.headings.length > 0) jump(g.headings[0].key, g.headings[0].idx);
+      };
+      return react_jsx_runtime.jsx("div", {
+        style: { padding: "1px 4px 2px", height: 18, display: "flex", alignItems: "center", minWidth: 0 },
+        children: react_jsx_runtime.jsx("span", {
+          onClick: jumpToTurn,
+          title: g.userKey ? "跳转到该回合开头" : "",
+          onMouseEnter: function (e) { e.currentTarget.style.background = C.hover; },
+          onMouseLeave: function (e) { e.currentTarget.style.background = "transparent"; },
+          style: {
+            fontSize: 11,
+            color: C.muted,
+            cursor: "pointer",
+            padding: "1px 5px",
+            borderRadius: 4,
+            transition: "background 0.15s ease",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 5,
+            minWidth: 0,
+            maxWidth: "100%",
+            overflow: "hidden"
+          },
+          children: [
+            react_jsx_runtime.jsx("span", { style: { fontWeight: 600, flex: "none" }, children: g.time || " " }),
+            g.userText ? react_jsx_runtime.jsx("span", {
+              style: { fontWeight: 400, opacity: 0.75, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 },
+              children: g.userText
+            }) : null
+          ]
+        })
+      }, "g-h-" + gi);
+    }
+
     // render each conversation turn as its own block: solid divider + time header
     // offset = global group index of the first rendered group (stable React keys)
     // activeIdx = array of groups being read (full opacity); others are dimmed
@@ -884,19 +1314,12 @@ window.__ModuleLoader__.load({
         items.push(react_jsx_runtime.jsx("div", {
           style: { borderTop: "1px solid " + C.panelBorder, margin: "7px 2px 3px", height: 0 }
         }, "g-sep-" + gi));
-        if (g.time) {
-          items.push(react_jsx_runtime.jsx("div", {
-            style: { padding: "1px 4px 2px", fontSize: 11, color: C.muted, fontWeight: 600, lineHeight: "15px", height: 18 },
-            children: g.time
-          }, "g-h-" + gi));
-        } else {
-          items.push(react_jsx_runtime.jsx("div", { style: { height: 18 }, children: null }, "g-h-" + gi));
-        }
+        items.push(renderGroupHeader(g, gi, jump, C));
         items.push(renderNodes(trees[i], 0, jump, C, "g" + gi));
         var dim = !activeSet[gi];
         out.push(react_jsx_runtime.jsx("div", {
           "data-group-idx": gi,
-          style: { opacity: dim ? 0.55 : 1, transition: "opacity 0.3s ease" },
+          style: { opacity: dim ? 0.6 : 1, transition: "opacity 0.3s ease" },
           children: items
         }, "g-" + gi));
       }
@@ -943,6 +1366,17 @@ window.__ModuleLoader__.load({
 
     exports.apply = apply;
     exports.inject = inject;
+
+    // inject the small keyframe stylesheet once (spinner rotation)
+    (function () {
+      if (typeof document === "undefined") return;
+      if (document.getElementById("dsh-quick-toc-css")) return;
+      var s = document.createElement("style");
+      s.id = "dsh-quick-toc-css";
+      s.textContent = "@keyframes dqt-spin{to{transform:rotate(360deg)}}";
+      document.head.appendChild(s);
+    })();
+
     return module.exports;
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-quick-toc",
-  "version": "0.1.0",
+  "version": "0.2.0-beta",
   "description": "Quick conversation TOC for DeepSeek Harness: markdown heading outline grouped by turn, with auto-follow highlight and smooth jump navigation",
   "type": "module",
   "main": "lib/index.js",
@@ -39,6 +39,6 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/LyaxZ/dsh-quick-toc.git"
+    "url": "git+https://github.com/LyaxZ/dsh-quick-toc.git"
   }
 }