dsh-quick-toc 0.1.0 → 0.1.1

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,7 @@ 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
 
       // the group currently being read (under the list viewport middle):
       // it stays at full opacity, every other group is dimmed
@@ -272,20 +336,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 +492,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 +504,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 +520,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 +536,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 +580,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) {
@@ -502,7 +621,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;
@@ -599,8 +730,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 +770,8 @@ window.__ModuleLoader__.load({
           overflow: "hidden",
           color: C.text,
           opacity: panelOpacity,
+          clipPath: panelClip,
+          boxShadow: "none",
           transition: panelTransition,
           pointerEvents: "auto"
         },
@@ -709,12 +860,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 +1018,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 +1079,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));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-quick-toc",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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"
   }
 }