dsh-quick-toc 0.1.1 → 0.2.2

package/lib/client.js

@@ -135,6 +135,18 @@ window.__ModuleLoader__.load({
       return null;
     }
 
+    // count every occurrence of q (case-insensitive) inside text
+    function countOccurrences(text, q) {
+      var lower = text.toLowerCase();
+      var count = 0;
+      var idx = 0;
+      while ((idx = lower.indexOf(q, idx)) !== -1) {
+        count++;
+        idx += q.length;
+      }
+      return count;
+    }
+
     // find the conversation's "load older messages" button (scoped to the
     // conversation scrollport so panel buttons are never matched)
     function findLoadOlderButton() {
@@ -148,6 +160,58 @@ window.__ModuleLoader__.load({
       return null;
     }
 
+    // ---- search keyword highlight in the conversation ----
+    var highlightSpans = [];
+
+    function clearHighlights() {
+      for (var i = 0; i < highlightSpans.length; i++) {
+        var s = highlightSpans[i];
+        if (s.parentNode) {
+          var t = document.createTextNode(s.textContent);
+          s.parentNode.replaceChild(t, s);
+        }
+      }
+      highlightSpans = [];
+    }
+
+    // wrap every occurrence of q (case-insensitive) inside row's text nodes;
+    // the occurrence at `currentOcc` gets a distinct "current" highlight
+    function highlightRow(row, q, currentOcc) {
+      if (!row || !q) return;
+      var walker = document.createTreeWalker(row, NodeFilter.SHOW_TEXT, null);
+      var textNodes = [];
+      while (walker.nextNode()) textNodes.push(walker.currentNode);
+      var occ = 0;
+      for (var i = 0; i < textNodes.length; i++) {
+        var node = textNodes[i];
+        var text = node.nodeValue;
+        if (!text) continue;
+        var lower = text.toLowerCase();
+        var idx = lower.indexOf(q);
+        if (idx < 0) continue;
+        var frag = document.createDocumentFragment();
+        var before = text.slice(0, idx);
+        if (before) frag.appendChild(document.createTextNode(before));
+        var mark = document.createElement("span");
+        if (occ === currentOcc) {
+          mark.className = "dqt-current";
+          mark.style.background = "rgba(79,140,255,0.55)";
+          mark.style.boxShadow = "0 0 0 1px rgba(79,140,255,0.85)";
+        } else {
+          mark.style.background = "rgba(79,140,255,0.32)";
+        }
+        mark.style.borderRadius = "2px";
+        mark.style.color = "inherit";
+        mark.textContent = text.slice(idx, idx + q.length);
+        frag.appendChild(mark);
+        highlightSpans.push(mark);
+        occ++;
+        var after = text.slice(idx + q.length);
+        if (after) frag.appendChild(document.createTextNode(after));
+        node.parentNode.replaceChild(frag, node);
+      }
+    }
+
     // ---------- theme colors: DSH CSS variables (adapt to light/dark) ----------
     var C = {
       panelBg: "var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96))",
@@ -322,6 +386,75 @@ window.__ModuleLoader__.load({
       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);
+      // search scope: "title" (default) or "full" (user messages + AI replies)
+      var _s18 = react.useState("title");
+      var searchScope = _s18[0];
+      var setSearchScope = _s18[1];
+      // previous scope kept briefly so the old label cross-fades with the new one
+      var _s19 = react.useState(null);
+      var prevScope = _s19[0];
+      var setPrevScope = _s19[1];
+      var scopeTimerRef = react.useRef(null);
+      var toggleScope = function () {
+        setPrevScope(searchScope);
+        setSearchScope(searchScope === "title" ? "full" : "title");
+        setMatchIdx(0);
+        if (scopeTimerRef.current) clearTimeout(scopeTimerRef.current);
+        scopeTimerRef.current = setTimeout(function () { setPrevScope(null); }, 300);
+      };
+      var openSearch = function () {
+        setSearchOpen(true);
+        setSearchAnim("enter");
+      };
+      var closeSearch = function () {
+        setSearchAnim("out");
+        setQuery("");
+        clearHighlights();
+        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);
+        clearHighlights();
+        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
       var _s10 = react.useState([]);
@@ -494,9 +627,10 @@ window.__ModuleLoader__.load({
         var turnTimes = {};
         var turnUserKey = {};
         var turnUserText = {};
+        var turnUserFull = {};
         if (!order || !nodes) return result;
         // 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
+        // also remember each turn's user message key + first-line preview + full text
         for (var i = 0; i < order.length; i++) {
           var k0 = order[i];
           var n0 = nodes.get(k0);
@@ -507,11 +641,12 @@ window.__ModuleLoader__.load({
           if (n0.kind === "user" && turnUserKey[tid0] === undefined) {
             turnUserKey[tid0] = k0;
             turnUserText[tid0] = previewText(extractUserText(n0), 30);
+            turnUserFull[tid0] = extractUserText(n0);
           }
           var t0 = getNodeTime(n0);
           if (t0) turnTimes[tid0] = t0;
         }
-        // second pass: group assistant headings by turn
+        // second pass: group assistant headings + full reply texts by turn
         for (var j = 0; j < order.length; j++) {
           var key = order[j];
           var node = nodes.get(key);
@@ -525,11 +660,15 @@ window.__ModuleLoader__.load({
               time: turnId !== null ? (turnTimes[turnId] || "") : "",
               userKey: turnId !== null ? (turnUserKey[turnId] || "") : "",
               userText: turnId !== null ? (turnUserText[turnId] || "") : "",
+              userFull: turnId !== null ? (turnUserFull[turnId] || "") : "",
+              msgs: [],
               headings: []
             };
             result.push(current);
           }
-          var parsed = parseHeadings(extractReplyText(node));
+          var text = extractReplyText(node);
+          current.msgs.push({ key: key, text: text });
+          var parsed = parseHeadings(text);
           var hIdx = 0;
           for (var k = 0; k < parsed.length; k++) {
             current.headings.push({ level: parsed[k].level, title: parsed[k].title, key: key, idx: hIdx });
@@ -610,6 +749,44 @@ window.__ModuleLoader__.load({
         return function () { sp.removeEventListener("scroll", update); };
       }, [keyToGroup]);
 
+      // ---- search matches ----
+      // "title" scope: heading titles only; "full" scope: also the user
+      // message and every AI reply text of each turn.
+      // Every occurrence counts (multiple hits inside one message = multiple
+      // matches), so the n/N counter reflects the real total.
+      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];
+            var n = countOccurrences(h.title, q);
+            for (var c = 0; c < n; c++) {
+              out.push({ gi: gi, title: h.title, key: h.key, idx: h.idx });
+            }
+          }
+          if (searchScope === "full") {
+            if (g.userKey && g.userFull) {
+              var nu = countOccurrences(g.userFull, q);
+              for (var cu = 0; cu < nu; cu++) {
+                out.push({ gi: gi, title: previewText(g.userFull, 30), key: g.userKey, idx: undefined });
+              }
+            }
+            for (var m = 0; m < g.msgs.length; m++) {
+              var msg = g.msgs[m];
+              if (!msg.text) continue;
+              var nm = countOccurrences(msg.text, q);
+              for (var cm = 0; cm < nm; cm++) {
+                out.push({ gi: gi, title: previewText(msg.text, 30), key: msg.key, idx: undefined });
+              }
+            }
+          }
+        }
+        return out;
+      }, [groups, query, searchScope]);
+
       // ---- nothing to show without headings ----
       if (groups.length === 0) return null;
 
@@ -686,6 +863,49 @@ window.__ModuleLoader__.load({
         sp.scrollTo({ top: t, behavior: "smooth" });
       };
 
+      // jump to the n-th match, cycling; also reveal the group in the outline.
+      // ONE smooth scroll straight to the current occurrence (no competing
+      // scrolls): highlight first, then position the mark at the upper-middle
+      var goToMatch = function (n) {
+        if (matches.length === 0) return;
+        var i = ((n % matches.length) + matches.length) % matches.length;
+        setMatchIdx(i);
+        var m = matches[i];
+        var q = query.trim().toLowerCase();
+        clearHighlights();
+        var r = findRowStrict(m.key);
+        if (r && q) {
+          // occurrence index within the target message (consecutive in matches)
+          var occ = 0;
+          for (var p = i - 1; p >= 0 && matches[p].key === m.key; p--) occ++;
+          highlightRow(r, q, occ);
+          var markEl = r.querySelector(".dqt-current");
+          var sp = r.closest ? r.closest("[data-conversation-scroll]") : null;
+          if (sp && markEl) {
+            var target = markEl.getBoundingClientRect().top - sp.getBoundingClientRect().top + sp.scrollTop - sp.clientHeight * 0.35;
+            // stick-to-bottom nudge (same as jump): break the 25px floor hold
+            var floor = Math.max(0, sp.scrollHeight - sp.clientHeight);
+            if (floor - sp.scrollTop <= 25 && Math.abs(target - sp.scrollTop) > 60) {
+              sp.scrollTop = Math.max(0, floor - 26);
+            }
+            sp.scrollTo({ top: Math.max(0, target), behavior: "smooth" });
+          } else {
+            jump(m.key, m.idx);
+          }
+        } else {
+          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;
@@ -844,15 +1064,244 @@ 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: [
+              // input with a custom animated placeholder: the box stays static,
+              // only the placeholder text fades when the scope switches
+              react_jsx_runtime.jsx("div", {
+                style: {
+                  position: "relative",
+                  flex: 1,
+                  minWidth: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
+                  borderRadius: 999,
+                  padding: "6px 12px"
+                },
+                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(); }
+                    },
+                    style: {
+                      flex: 1,
+                      minWidth: 0,
+                      width: "100%",
+                      background: "transparent",
+                      border: "none",
+                      outline: "none",
+                      fontSize: 13,
+                      color: C.text,
+                      padding: 0
+                    }
+                  }),
+                  (!query) ? react_jsx_runtime.jsx("span", {
+                    style: {
+                      position: "absolute",
+                      left: 12,
+                      pointerEvents: "none",
+                      fontSize: 13,
+                      color: "var(--dsw-alias-label-tertiary, rgba(128,128,128,0.7))"
+                    },
+                    children: [
+                      "搜索",
+                      react_jsx_runtime.jsx("span", {
+                        style: { position: "relative", display: "inline-block" },
+                        children: [
+                          react_jsx_runtime.jsx("span", {
+                            key: searchScope,
+                            style: { display: "inline-block", animation: "dqt-fade-in 0.25s linear" },
+                            children: searchScope === "title" ? "标题" : "全文"
+                          }),
+                          (prevScope && prevScope !== searchScope) ? react_jsx_runtime.jsx("span", {
+                            key: "old-" + prevScope,
+                            style: { position: "absolute", left: 0, top: 0, opacity: 0, animation: "dqt-fade-out 0.25s linear forwards" },
+                            children: prevScope === "title" ? "标题" : "全文"
+                          }) : null
+                        ]
+                      }),
+                      "，回车定位…"
+                    ]
+                  }) : null,
+                ]
+              }),
+              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 : ""
+              }),
+              // scope toggle: 标题 <-> 全文 (round pill; background fades,
+              // label text cross-fades old->new)
+              react_jsx_runtime.jsx("button", {
+                onClick: toggleScope,
+                title: searchScope === "title" ? "当前：仅搜索标题。点击切换为全文搜索" : "当前：全文搜索。点击切换为仅标题",
+                style: {
+                  flex: "none",
+                  width: 34,
+                  height: 34,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "50%",
+                  fontSize: 11,
+                  color: searchScope === "full" ? "var(--dsw-alias-brand-primary, #4f8cff)" : C.muted,
+                  background: searchScope === "full" ? "rgba(79,140,255,0.18)" : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
+                  border: "none",
+                  cursor: "pointer",
+                  whiteSpace: "nowrap",
+                  transition: "background 0.25s ease"
+                },
+                children: react_jsx_runtime.jsx("span", {
+                  style: { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center" },
+                  children: [
+                    react_jsx_runtime.jsx("span", {
+                      key: searchScope,
+                      style: { animation: "dqt-fade-in 0.25s linear", display: "block" },
+                      children: searchScope === "title" ? "标题" : "全文"
+                    }),
+                    (prevScope && prevScope !== searchScope) ? react_jsx_runtime.jsx("span", {
+                      key: "old-" + prevScope,
+                      style: { position: "absolute", opacity: 0, animation: "dqt-fade-out 0.25s linear forwards", display: "block" },
+                      children: prevScope === "title" ? "标题" : "全文"
+                    }) : null
+                  ]
+                })
+              })
+                ]
+              })
+            })
+          }) : 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", {
@@ -1131,6 +1580,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)}}@keyframes dqt-fade-in{from{opacity:0}to{opacity:1}}@keyframes dqt-fade-out{from{opacity:1}to{opacity:0}}";
+      document.head.appendChild(s);
+    })();
+
     return module.exports;
   }
 });

package/package.json

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