dsh-quick-toc 0.2.0-beta → 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))",
@@ -343,6 +407,22 @@ window.__ModuleLoader__.load({
       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");
@@ -350,6 +430,7 @@ window.__ModuleLoader__.load({
       var closeSearch = function () {
         setSearchAnim("out");
         setQuery("");
+        clearHighlights();
         setTimeout(function () {
           setSearchOpen(false);
           setSearchAnim("hidden");
@@ -369,6 +450,7 @@ window.__ModuleLoader__.load({
         setQuery(v);
         setMatchIdx(0);
         setSearching(true);
+        clearHighlights();
         if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
         searchTimerRef.current = setTimeout(function () { setSearching(false); }, 220);
       };
@@ -545,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);
@@ -558,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);
@@ -576,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 });
@@ -661,7 +749,11 @@ window.__ModuleLoader__.load({
         return function () { sp.removeEventListener("scroll", update); };
       }, [keyToGroup]);
 
-      // ---- search matches: headings whose title contains the query ----
+      // ---- 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 [];
@@ -670,13 +762,30 @@ window.__ModuleLoader__.load({
           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) {
+            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]);
+      }, [groups, query, searchScope]);
 
       // ---- nothing to show without headings ----
       if (groups.length === 0) return null;
@@ -754,13 +863,38 @@ window.__ModuleLoader__.load({
         sp.scrollTo({ top: t, behavior: "smooth" });
       };
 
-      // jump to the n-th match, cycling; also reveal the group in the outline
+      // 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];
-        jump(m.key, m.idx);
+        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));
         });
@@ -1043,26 +1177,69 @@ window.__ModuleLoader__.load({
                   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: "搜索标题，回车定位…",
+              // 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))",
-                  border: "none",
-                  borderRadius: 6,
-                  padding: "3px 8px",
-                  fontSize: 12,
-                  color: C.text,
-                  outline: "none"
-                }
+                  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" },
@@ -1083,6 +1260,43 @@ window.__ModuleLoader__.load({
               }) : 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
+                  ]
+                })
               })
                 ]
               })
@@ -1373,7 +1587,7 @@ window.__ModuleLoader__.load({
       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)}}";
+      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);
     })();
 

package/package.json

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