dsh-quick-toc 0.3.2 → 0.4.0

package/lib/client.js

@@ -7,7 +7,7 @@ window.__ModuleLoader__.load({
     let react = require("react");
     let react_jsx_runtime = require("react/jsx-runtime");
     let react_dom = require("react-dom"); // createPortal -> panel stays a top-level overlay (highest pointer priority)
-    // DSH 0.1.2-rc.1: the old @deepseek-ai/dsh-client-runtime package is gone.
+    // Recent DSH (0.1.5-rc.1): the old @deepseek-ai/dsh-client-runtime package is gone.
     // Runtime hooks (useChat etc.) now arrive as session-scope slot props —
     // no runtime package to require here anymore.
 
@@ -78,12 +78,28 @@ window.__ModuleLoader__.load({
       return first;
     }
 
+    // Headings are collected line by line so FENCED CODE BLOCKS can be skipped:
+    // a "```" block that documents markdown (or shows a shell comment like
+    // "# install") contains lines that look like headings but are code — they
+    // must not become outline entries (they have no element to jump to, and they
+    // shifted the index of the real headings).
     function parseHeadings(text) {
       var items = [];
-      var re = /^(#{1,6})\s+(.+?)\s*#*\s*$/gm;
-      var m;
-      while ((m = re.exec(text)) !== null) {
-        items.push({ level: m[1].length, title: cleanTitle(m[2].trim()) });
+      if (!text) return items;
+      var lines = text.split("\n");
+      var fence = null; // { char, len } while inside a fenced code block
+      for (var i = 0; i < lines.length; i++) {
+        var line = lines[i];
+        var fm = line.match(/^ {0,3}(`{3,}|~{3,})(.*)$/);
+        if (fence !== null) {
+          // a closing fence uses the same character, is at least as long and has
+          // no info string after it
+          if (fm && fm[1].charAt(0) === fence.char && fm[1].length >= fence.len && fm[2].trim() === "") fence = null;
+          continue;
+        }
+        if (fm) { fence = { char: fm[1].charAt(0), len: fm[1].length }; continue; }
+        var m = line.match(/^(#{1,6})\s+(.+?)\s*#*\s*$/);
+        if (m !== null) items.push({ level: m[1].length, title: cleanTitle(m[2].trim()) });
       }
       return items;
     }
@@ -101,6 +117,74 @@ window.__ModuleLoader__.load({
       return root.children;
     }
 
+    // ---- per-node extraction cache ----
+    // The conversation store keeps the same node objects for unchanged messages,
+    // so a streaming update only re-joins/re-parses the node that actually
+    // changed instead of every message in the history.
+    var EMPTY_HEADINGS = [];
+    var nodeInfoCache = new Map();
+    function nodeInfo(key, node) {
+      var isUser = node.kind === "user";
+      var blocks = node.data ? node.data.blocks : undefined;
+      var cached = nodeInfoCache.get(key);
+      if (cached !== undefined &&
+        (cached.node === node || (blocks !== undefined && cached.blocks === blocks && cached.user === isUser))) {
+        return cached;
+      }
+      var text = isUser ? extractUserText(node) : extractReplyText(node);
+      var info = {
+        node: node,
+        blocks: blocks,
+        user: isUser,
+        text: text,
+        headings: node.kind === "assistant-step" ? parseHeadings(text) : EMPTY_HEADINGS
+      };
+      nodeInfoCache.set(key, info);
+      return info;
+    }
+    // Drop cache records whose node left the conversation (bounded growth).
+    function pruneNodeInfo(seen) {
+      if (nodeInfoCache.size <= 200) return;
+      nodeInfoCache.forEach(function (value, key) {
+        if (!seen[key]) nodeInfoCache.delete(key);
+      });
+    }
+
+    // stable id for one heading occurrence (a message can hold several)
+    function headingId(h) {
+      return h.key + "#" + h.idx;
+    }
+
+    // Split `text` into runs around case-insensitive occurrences of `q`, so the
+    // caller can render the hits distinctly. Returns [{ text, hit }, ...].
+    function highlightParts(text, q) {
+      var parts = [];
+      if (!text) return parts;
+      if (!q) return [{ text: text, hit: false }];
+      var lower = text.toLowerCase();
+      var from = 0;
+      for (;;) {
+        var at = lower.indexOf(q, from);
+        if (at === -1) break;
+        if (at > from) parts.push({ text: text.slice(from, at), hit: false });
+        parts.push({ text: text.slice(at, at + q.length), hit: true });
+        from = at + q.length;
+      }
+      if (from < text.length) parts.push({ text: text.slice(from), hit: false });
+      return parts;
+    }
+
+    // A one-line window around the first hit of `q` in `text` (for search results).
+    function snippetAround(text, q, span) {
+      if (!text) return "";
+      var flat = text.replace(/\s+/g, " ").trim();
+      var at = flat.toLowerCase().indexOf(q);
+      if (at === -1) return previewText(flat, span * 2);
+      var start = Math.max(0, at - span);
+      var end = Math.min(flat.length, at + q.length + span);
+      return (start > 0 ? "…" : "") + flat.slice(start, end) + (end < flat.length ? "…" : "");
+    }
+
     // 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
@@ -145,6 +229,10 @@ window.__ModuleLoader__.load({
 
     // count every occurrence of q (case-insensitive) inside text
     function countOccurrences(text, q) {
+      // an empty needle would make indexOf return 0 forever and freeze the tab;
+      // every caller passes a trimmed non-empty query today, but the guard keeps
+      // a future call site from hanging the UI.
+      if (!text || !q) return 0;
       var lower = text.toLowerCase();
       var count = 0;
       var idx = 0;
@@ -168,6 +256,56 @@ window.__ModuleLoader__.load({
       return null;
     }
 
+    // ---- which view is the conversation area showing? ----
+    // The center column hosts ONE view at a time (chat / trajectory / context /
+    // any plugin view): DSH renders only the selected view entry, but the
+    // scrollport is shared, so our overlay would otherwise float over every view.
+    // The tab list (rendered when there is more than one view) marks the active
+    // view with aria-selected; ui-chat registers the chat view with order 0, so
+    // its tab comes first. Anything unknowable degrades to "chat" (visible).
+    var CHAT_VIEW_LABELS = ["对话", "chat"];
+    // Cached so the fast poll costs one isConnected check in the common case.
+    var _chatTablistCache = null;
+    function conversationTablist() {
+      var cached = _chatTablistCache;
+      if (cached && cached.isConnected) return cached;
+      var found = null;
+      // Scope the lookup to the conversation area: walk up from the shared
+      // scrollport and take the first tab list an ancestor owns, so an
+      // unrelated tab list (e.g. inside a settings dialog) can never match.
+      var sp = document.querySelector("[data-conversation-scroll]");
+      if (sp) {
+        var node = sp;
+        for (var d = 0; d < 6 && node && !found; d++) {
+          node = node.parentElement;
+          if (node) found = node.querySelector('[role="tablist"]');
+        }
+      }
+      if (!found) found = document.querySelector('[role="tablist"]');
+      _chatTablistCache = found;
+      return found;
+    }
+    function isChatViewActive() {
+      try {
+        var tablist = conversationTablist();
+        if (!tablist) return true; // a single view: no tab list, and it is chat
+        var tabs = tablist.querySelectorAll('button[role="tab"]');
+        if (tabs.length < 2) return true;
+        var activeIdx = -1;
+        var chatIdx = -1;
+        for (var i = 0; i < tabs.length; i++) {
+          var label = (tabs[i].textContent || "").trim().toLowerCase();
+          if (chatIdx === -1 && CHAT_VIEW_LABELS.indexOf(label) !== -1) chatIdx = i;
+          if (activeIdx === -1 && tabs[i].getAttribute("aria-selected") === "true") activeIdx = i;
+        }
+        if (activeIdx === -1) return true; // no explicit selection -> assume chat
+        if (chatIdx === -1) chatIdx = 0; // chat is order 0 -> the first tab
+        return activeIdx === chatIdx;
+      } catch (e) {
+        return true;
+      }
+    }
+
     // ---- search keyword highlight in the conversation ----
     var highlightSpans = [];
 
@@ -195,26 +333,36 @@ window.__ModuleLoader__.load({
         var text = node.nodeValue;
         if (!text) continue;
         var lower = text.toLowerCase();
-        var idx = lower.indexOf(q);
-        if (idx < 0) continue;
+        if (lower.indexOf(q) < 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)";
+        // EVERY occurrence inside this text node must be wrapped, in order: the
+        // caller addresses hits by their global index (`occ`), which is counted
+        // over the message text. Wrapping only the first one per text node made
+        // a second hit on the same line un-markable, so stepping to it found no
+        // `.dqt-current` and fell back to a plain scroll with no highlight.
+        var from = 0;
+        var idx = lower.indexOf(q, from);
+        while (idx !== -1) {
+          var before = text.slice(from, 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++;
+          from = idx + q.length;
+          idx = lower.indexOf(q, from);
         }
-        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);
+        var after = text.slice(from);
         if (after) frag.appendChild(document.createTextNode(after));
         node.parentNode.replaceChild(frag, node);
       }
@@ -306,13 +454,13 @@ window.__ModuleLoader__.load({
 
     // ---------- component ----------
     function OutlinePanel(props) {
-      // DSH 0.1.2-rc.1: the conversation moved out of the session snapshot —
+      // Recent DSH (0.1.5-rc.1): the conversation moved out of the session snapshot —
       // it is now the session-scope `chat` hook (ChatSnapshot: order + nodes
       // map + legacy projection), contributed by dsh-client-ui-chat. Same node
       // shape as before (kind user/assistant-step, location.turn, data.blocks).
       var useChat = props.useChat;
       if (!useChat) {
-        console.warn("[dsh-quick-toc] useChat prop missing (requires DSH >= 0.1.2-rc.1)");
+        console.warn("[dsh-quick-toc] useChat prop missing (requires DSH >= 0.1.5-rc.1)");
         return null;
       }
       var order = useChat(function (s) { return s.order; });
@@ -425,6 +573,72 @@ window.__ModuleLoader__.load({
       var panelH = _s8[0];
       var setPanelH = _s8[1];
 
+      // ---- heading level filter (persisted) ----
+      // An arbitrary SET of levels, not a "show up to N" prefix: every chip is an
+      // independent on/off switch, so H1 + H3 without H2 is a valid view. Turning
+      // the last remaining level off restores all six (the panel is never empty).
+      var LEVELS_KEY = "dsh-quick-toc.levels.v1";
+      var OLD_MAX_LEVEL_KEY = "dsh-quick-toc.maxLevel.v1";
+      var ALL_LEVELS = [1, 2, 3, 4, 5, 6];
+      var _sLv = react.useState(function () {
+        try {
+          var raw = localStorage.getItem(LEVELS_KEY);
+          if (raw !== null) {
+            var arr = JSON.parse(raw);
+            if (Array.isArray(arr)) {
+              var kept = ALL_LEVELS.filter(function (lv) { return arr.indexOf(lv) !== -1; });
+              if (kept.length > 0) return kept;
+            }
+          }
+          // migrate the "show up to N" value written by earlier builds
+          var v = Number(localStorage.getItem(OLD_MAX_LEVEL_KEY));
+          if (isFinite(v) && v >= 1 && v <= 6) {
+            return ALL_LEVELS.filter(function (lv) { return lv <= v; });
+          }
+        } catch (e) {}
+        return ALL_LEVELS.slice();
+      });
+      var levels = _sLv[0];
+      var setLevels = _sLv[1];
+      var levelSet = react.useMemo(function () {
+        var m = {};
+        for (var i = 0; i < levels.length; i++) m[levels[i]] = true;
+        return m;
+      }, [levels]);
+      var toggleLevel = function (lv) {
+        var next;
+        if (levelSet[lv]) {
+          next = levels.filter(function (x) { return x !== lv; });
+          if (next.length === 0) next = ALL_LEVELS.slice(); // never leave the panel empty
+        } else {
+          next = ALL_LEVELS.filter(function (x) { return x === lv || levelSet[x]; });
+        }
+        setLevels(next);
+        try { localStorage.setItem(LEVELS_KEY, JSON.stringify(next)); } catch (e) {}
+      };
+
+      // ---- level-filter row (the H1–H6 chips) can be collapsed away; the toggle
+      // sits next to the search button in the panel header and the choice is
+      // remembered. The filter itself keeps applying while the row is hidden.
+      var LEVELS_ROW_KEY = "dsh-quick-toc.levelsRow.v1";
+      var _sLr = react.useState(function () {
+        try { return localStorage.getItem(LEVELS_ROW_KEY) !== "0"; } catch (e) { return true; }
+      });
+      var showLevelsRow = _sLr[0];
+      var setShowLevelsRow = _sLr[1];
+      var toggleLevelsRow = function () {
+        var next = !showLevelsRow;
+        setShowLevelsRow(next);
+        try { localStorage.setItem(LEVELS_ROW_KEY, next ? "1" : "0"); } catch (e) {}
+      };
+
+      // ---- breadcrumb: the heading the reader is currently inside ----
+      var _sCrumb = react.useState(null);
+      var crumb = _sCrumb[0];
+      var setCrumb = _sCrumb[1];
+      var crumbRef = react.useRef(null);
+      var headingPathsRef = react.useRef({});
+
       // ---- pagination: show the latest N groups; scrolling to the top loads older ----
       var PAGE_SIZE = 6;
       var _s9 = react.useState(PAGE_SIZE);
@@ -434,6 +648,39 @@ window.__ModuleLoader__.load({
       var didInitScroll = react.useRef(false);
       var outlineTouchRef = react.useRef(0); // last time the user touched the outline
 
+      // ---- the outline belongs to the CHAT view only: when the center column
+      // switches to another view (trajectory / context / plugin views), fade the
+      // panel and its collapsed handle out. Polled lightly because view switches
+      // are user clicks and the tab DOM is remounted on session/view changes.
+      var _sView = react.useState(true);
+      var chatViewActive = _sView[0];
+      var setChatViewActive = _sView[1];
+      var chatViewRef = react.useRef(true);
+      // True briefly after a view switch: lets the fade use its own fast
+      // transition instead of the slower dock/collapse one.
+      var _sFade = react.useState(false);
+      var viewFading = _sFade[0];
+      var setViewFading = _sFade[1];
+      var viewFadeTimerRef = react.useRef(null);
+      react.useEffect(function () {
+        var detect = function () {
+          var v = isChatViewActive();
+          if (v !== chatViewRef.current) {
+            chatViewRef.current = v;
+            setChatViewActive(v);
+            setViewFading(true);
+            if (viewFadeTimerRef.current) clearTimeout(viewFadeTimerRef.current);
+            viewFadeTimerRef.current = setTimeout(function () { setViewFading(false); }, 380);
+          }
+        };
+        detect();
+        var timer = setInterval(detect, 120);
+        return function () {
+          clearInterval(timer);
+          if (viewFadeTimerRef.current) clearTimeout(viewFadeTimerRef.current);
+        };
+      }, []);
+
       // ---- search: header button opens a keyword box; Enter cycles through
       // matching headings and jumps to each ----
       var _s13 = react.useState(false);
@@ -510,13 +757,6 @@ window.__ModuleLoader__.load({
       var setActiveGroup = _s10[1];
       var activeSigRef = react.useRef("");
 
-      // first time content appears, scroll the list to the bottom (newest)
-      react.useEffect(function () {
-        if (didInitScroll.current || !listRef.current || !groups || groups.length === 0) return;
-        didInitScroll.current = true;
-        listRef.current.scrollTop = listRef.current.scrollHeight;
-      }, [groups ? groups.length : 0]);
-
       // 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) {
@@ -677,6 +917,7 @@ window.__ModuleLoader__.load({
         var turnUserText = {};
         var turnUserFull = {};
         if (!order || !nodes) return result;
+        var seen = {};
         // 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 + full text
         for (var i = 0; i < order.length; i++) {
@@ -686,10 +927,12 @@ 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;
+          seen[k0] = true;
+          var info0 = nodeInfo(k0, n0);
           if (n0.kind === "user" && turnUserKey[tid0] === undefined) {
             turnUserKey[tid0] = k0;
-            turnUserText[tid0] = previewText(extractUserText(n0), 30);
-            turnUserFull[tid0] = extractUserText(n0);
+            turnUserText[tid0] = previewText(info0.text, 30);
+            turnUserFull[tid0] = info0.text;
           }
           var t0 = getNodeTime(n0);
           if (t0) turnTimes[tid0] = t0;
@@ -714,22 +957,37 @@ window.__ModuleLoader__.load({
             };
             result.push(current);
           }
-          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 });
-            hIdx++;
+          seen[key] = true;
+          var info = nodeInfo(key, node);
+          current.msgs.push({ key: key, text: info.text });
+          for (var k = 0; k < info.headings.length; k++) {
+            current.headings.push({ level: info.headings[k].level, title: info.headings[k].title, key: key, idx: k });
           }
         }
+        pruneNodeInfo(seen);
         // 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]);
+      // first time content appears, scroll the list to the bottom (newest).
+      // NOTE: must stay BELOW the `groups` memo — a deps array is evaluated
+      // during render, so reading `groups` before that `var` is assigned would
+      // freeze the deps at 0 and the effect would only ever run on mount.
+      react.useEffect(function () {
+        if (didInitScroll.current || !listRef.current || groups.length === 0) return;
+        didInitScroll.current = true;
+        listRef.current.scrollTop = listRef.current.scrollHeight;
+      }, [groups.length]);
       var groupTrees = react.useMemo(function () {
-        return groups.map(function (g) { return buildTree(g.headings); });
-      }, [groups]);
+        return groups.map(function (g) {
+          if (levels.length === 6) return buildTree(g.headings);
+          var kept = [];
+          for (var i = 0; i < g.headings.length; i++) {
+            if (levelSet[g.headings[i].level]) kept.push(g.headings[i]);
+          }
+          return buildTree(kept);
+        });
+      }, [groups, levels, levelSet]);
       // pagination slice: the latest `visibleCount` groups
       var shownGroups = groups.slice(Math.max(0, groups.length - visibleCount));
       var shownTrees = groupTrees.slice(groupTrees.length - shownGroups.length);
@@ -745,6 +1003,80 @@ window.__ModuleLoader__.load({
         }
         return m;
       }, [groups]);
+
+      // ancestor path of every heading occurrence (breadcrumb + result rows):
+      // id -> { path, title, level, gi }
+      var headingPaths = react.useMemo(function () {
+        var byId = {};
+        var lastTitle = {};
+        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];
+            for (var deeper = h.level + 1; deeper <= 6; deeper++) lastTitle[deeper] = undefined;
+            var parts = [];
+            for (var up = 1; up < h.level; up++) {
+              if (lastTitle[up]) parts.push(lastTitle[up]);
+            }
+            parts.push(h.title);
+            byId[headingId(h)] = { path: parts.join(" › "), title: h.title, level: h.level, gi: gi };
+            lastTitle[h.level] = h.title;
+          }
+        }
+        return byId;
+      }, [groups]);
+
+      // search result rows: one row per matched heading/message (with an
+      // occurrence count), carrying its heading path, turn time and a snippet.
+      var resultRows = react.useMemo(function () {
+        var q = query.trim().toLowerCase();
+        if (!q) return [];
+        var rows = [];
+        var index = {};
+        var push = function (row, n) {
+          var id = row.key + "#" + (row.idx === undefined ? "-" : row.idx);
+          var known = index[id];
+          if (known !== undefined) { known.count += n; return; }
+          row.count = n;
+          index[id] = row;
+          rows.push(row);
+        };
+        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 nh = countOccurrences(h.title, q);
+            if (nh > 0) {
+              var hp = headingPaths[headingId(h)];
+              push({
+                gi: gi, key: h.key, idx: h.idx, title: h.title, level: h.level,
+                path: hp ? hp.path : "", time: g.time, snippet: ""
+              }, nh);
+            }
+          }
+          if (searchScope === "full") {
+            var nu = g.userKey && g.userFull ? countOccurrences(g.userFull, q) : 0;
+            if (nu > 0) {
+              push({
+                gi: gi, key: g.userKey, idx: undefined, title: previewText(g.userFull, 40),
+                level: 0, path: "", time: g.time, snippet: snippetAround(g.userFull, q, 36)
+              }, nu);
+            }
+            for (var m = 0; m < g.msgs.length; m++) {
+              var msg = g.msgs[m];
+              if (!msg.text) continue;
+              var nm = countOccurrences(msg.text, q);
+              if (nm === 0) continue;
+              push({
+                gi: gi, key: msg.key, idx: undefined, title: previewText(msg.text, 40),
+                level: 0, path: "", time: g.time, snippet: snippetAround(msg.text, q, 36)
+              }, nm);
+            }
+          }
+        }
+        return rows;
+      }, [groups, query, searchScope, headingPaths]);
+      headingPathsRef.current = headingPaths;
       react.useEffect(function () {
         var sp = document.querySelector("[data-conversation-scroll]");
         if (!sp) return;
@@ -791,6 +1123,43 @@ window.__ModuleLoader__.load({
               }
             }
           }
+          // breadcrumb: the heading of the section that occupies most of the
+          // viewport — i.e. the deepest heading above the viewport's MIDDLE line.
+          // Walking backwards lets a heading we cannot map (e.g. one inside a tool
+          // result) fall back to the nearest mapped ancestor heading.
+          //
+          // The middle line is what makes this consistent with every jump: a jump
+          // (outline click, breadcrumb click, match stepping) always lands its
+          // target ABOVE the middle, so clicking the breadcrumb never changes
+          // which heading the breadcrumb shows.
+          var crumbLine = vTop + lr.height * 0.5;
+          var heads = sp.querySelectorAll("h1,h2,h3,h4,h5,h6");
+          var nextCrumb = null;
+          var paths = headingPathsRef.current;
+          for (var hi = heads.length - 1; hi >= 0; hi--) {
+            var hr = heads[hi].getBoundingClientRect();
+            if (hr.top > crumbLine) continue;
+            var rowEl = heads[hi].closest ? heads[hi].closest("[data-chat-anchor-key]") : null;
+            if (!rowEl || !rowEl.dataset) continue;
+            var rowKey = rowEl.dataset.chatAnchorKey;
+            var rowHeads = rowEl.querySelectorAll("h1,h2,h3,h4,h5,h6");
+            var idxInRow = -1;
+            for (var rh = 0; rh < rowHeads.length; rh++) {
+              if (rowHeads[rh] === heads[hi]) { idxInRow = rh; break; }
+            }
+            var meta = idxInRow >= 0 ? paths[rowKey + "#" + idxInRow] : undefined;
+            if (meta !== undefined) {
+              nextCrumb = { path: meta.path, key: rowKey, idx: idxInRow };
+              break;
+            }
+          }
+          var prev = crumbRef.current;
+          var same = (prev === null && nextCrumb === null) ||
+            (prev !== null && nextCrumb !== null && prev.path === nextCrumb.path && prev.key === nextCrumb.key && prev.idx === nextCrumb.idx);
+          if (!same) {
+            crumbRef.current = nextCrumb;
+            setCrumb(nextCrumb);
+          }
         };
         update();
         sp.addEventListener("scroll", update, { passive: true });
@@ -835,6 +1204,46 @@ window.__ModuleLoader__.load({
         return out;
       }, [groups, query, searchScope]);
 
+      // which result row holds the current (n/N) occurrence (needs `matches`)
+      var activeResultRow = -1;
+      if (resultRows.length > 0 && matches.length > 0) {
+        var acc = 0;
+        var target = matchIdx % matches.length;
+        for (var ri = 0; ri < resultRows.length; ri++) {
+          acc += resultRows[ri].count;
+          if (target < acc) { activeResultRow = ri; break; }
+        }
+      }
+
+      // The result list follows the outline's convention: OLDEST hit at the top,
+      // NEWEST at the bottom, and a fresh search starts scrolled to the bottom —
+      // scroll UP from there to walk back through earlier hits. The newest hit is
+      // also made the current one, so the highlighted row is the one on screen
+      // (otherwise n/N points at a row that is off-view).
+      var searchPosRef = react.useRef("");
+      react.useEffect(function () {
+        var q = query.trim();
+        if (searchPosRef.current === q) return;
+        searchPosRef.current = q;
+        if (!q) return;
+        var el = listRef.current;
+        if (el) el.scrollTop = el.scrollHeight;
+        if (matches.length > 0) setMatchIdx(matches.length - 1);
+      }, [query, matches.length]);
+
+      // keep the current row in view while stepping with Enter
+      react.useEffect(function () {
+        if (!query.trim() || activeResultRow < 0) return;
+        var el = listRef.current;
+        if (!el || !el.querySelector) return;
+        var node = el.querySelector('[data-result-idx="' + activeResultRow + '"]');
+        if (!node) return;
+        var er = node.getBoundingClientRect();
+        var lr2 = el.getBoundingClientRect();
+        if (er.top < lr2.top + 2) el.scrollTop += er.top - lr2.top - 2;
+        else if (er.bottom > lr2.bottom - 2) el.scrollTop += er.bottom - lr2.bottom + 2;
+      }, [activeResultRow, query]);
+
       // ---- nothing to show without headings ----
       if (groups.length === 0) return null;
 
@@ -866,15 +1275,19 @@ window.__ModuleLoader__.load({
         if (e.button !== 0) return;
         var startY = e.clientY;
         var origY = panelY;
+        var lastY = panelY;
         var move = function (ev) {
           var next = origY + (ev.clientY - startY);
           next = Math.max(-(viewport ? viewport.top : 0), Math.min(window.innerHeight - 90, next));
+          lastY = next;
           setPanelY(next);
         };
         var up = function () {
           window.removeEventListener("pointermove", move);
           window.removeEventListener("pointerup", up);
-          try { localStorage.setItem(PANEL_Y_KEY, String(panelY)); } catch (e2) {}
+          // persist the DRAGGED value: `panelY` here is the value captured when
+          // the drag started (the state setter has not re-rendered this closure)
+          try { localStorage.setItem(PANEL_Y_KEY, String(lastY)); } catch (e2) {}
         };
         window.addEventListener("pointermove", move);
         window.addEventListener("pointerup", up);
@@ -950,6 +1363,15 @@ window.__ModuleLoader__.load({
         }, 150);
       };
 
+      // clicking result row `i` = make its FIRST occurrence the current match, so
+      // it highlights + scrolls exactly like Enter stepping does (rows are deduped
+      // one-per-message, so row i starts at the sum of the previous rows' counts)
+      var goToRow = function (i) {
+        var start = 0;
+        for (var k = 0; k < i && k < resultRows.length; k++) start += resultRows[k].count;
+        goToMatch(start);
+      };
+
       // ---- circular icon button (glyph optical offset: ox/oy px) ----
       var iconBtn = function (onClick, tip, glyph, fontSize, offset) {
         var ox = offset ? (offset.x || 0) : 0;
@@ -1018,7 +1440,8 @@ window.__ModuleLoader__.load({
           panelClip = "inset(0 0 0 " + (panelW + 8) + "px)";
         }
       }
-      var panelOpacity = open ? (hovered ? 0.95 : 0.45) : 0;
+      // faded out entirely while another center-column view is active
+      var panelOpacity = open && chatViewActive ? (hovered ? 0.95 : 0.45) : 0;
 
       var panelEl = react_jsx_runtime.jsx("div", {
         style: {
@@ -1042,8 +1465,10 @@ window.__ModuleLoader__.load({
           // soft shade in light) — outer shadow would be clipped by the collapse
           // clip-path and the panel edges.
           boxShadow: innerShadow(),
-          transition: panelTransition,
-          pointerEvents: "auto"
+          // A view switch swaps in a short, delay-free opacity fade; the dock and
+          // collapse animations keep their own (slower) timings.
+          transition: viewFading ? "opacity 0.3s ease" : panelTransition,
+          pointerEvents: chatViewActive ? "auto" : "none"
         },
         onMouseEnter: function () { setHovered(true); },
         onMouseLeave: function () { setHovered(false); },
@@ -1115,6 +1540,29 @@ window.__ModuleLoader__.load({
                   react_jsx_runtime.jsx("div", {
                     style: { display: "flex", alignItems: "center", gap: 6, flex: "none" },
                     children: [
+                      // collapse/expand the H1–H6 level-filter row (sits directly
+                      // left of the search button). Labelled, not a bare icon.
+                      react_jsx_runtime.jsx("button", {
+                        onClick: toggleLevelsRow,
+                        title: showLevelsRow ? "收起 H1–H6 层级筛选那一行" : "展开 H1–H6 层级筛选那一行",
+                        style: {
+                          height: 20,
+                          padding: "0 6px",
+                          border: "none",
+                          borderRadius: 5,
+                          cornerShape: "round",
+                          fontFamily: "inherit",
+                          fontSize: 11,
+                          lineHeight: "20px",
+                          cursor: "pointer",
+                          flex: "none",
+                          background: showLevelsRow
+                            ? "rgba(79,140,255,0.16)"
+                            : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+                          color: showLevelsRow ? "var(--dsw-alias-brand-primary, #4f8cff)" : C.muted
+                        },
+                        children: "层级"
+                      }),
                       // magnifier button (SVG, matches the other buttons' style)
                       react_jsx_runtime.jsx("button", {
                         onClick: function () { searchOpen ? closeSearch() : openSearch(); },
@@ -1206,6 +1654,67 @@ window.__ModuleLoader__.load({
               })
             ]
           }),
+          // level filter row (H1–H6): can be collapsed away with the 层级 button
+          // in the panel header
+          showLevelsRow ? react_jsx_runtime.jsx("div", {
+            style: {
+              flex: "none",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              flexWrap: "wrap",
+              rowGap: 2,
+              gap: 6,
+              padding: "3px 10px 3px",
+              borderBottom: crumb ? "none" : "1px solid " + C.panelBorder
+            },
+            children: [
+              react_jsx_runtime.jsx("div", {
+                style: { display: "flex", alignItems: "center", gap: 2, flex: "none" },
+                children: [1, 2, 3, 4, 5, 6].map(function (lv) {
+                  var active = !!levelSet[lv];
+                  return react_jsx_runtime.jsx("button", {
+                    onClick: function () { toggleLevel(lv); },
+                    title: active ? "隐藏 H" + lv : "显示 H" + lv,
+                    style: {
+                      width: 17,
+                      height: 17,
+                      padding: 0,
+                      border: "none",
+                      borderRadius: 4,
+                      cornerShape: "round",
+                      cursor: "pointer",
+                      fontSize: 10,
+                      lineHeight: "17px",
+                      background: active
+                        ? "rgba(79,140,255,0.22)"
+                        : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
+                      color: active ? "var(--dsw-alias-brand-primary, #4f8cff)" : C.muted,
+                      fontWeight: active ? 600 : 400
+                    },
+                    children: lv
+                  }, "lv" + lv);
+                })
+              })
+            ]
+          }) : null,
+          // breadcrumb: the heading path you are currently reading
+          crumb ? react_jsx_runtime.jsx("div", {
+            onClick: function () { jump(crumb.key, crumb.idx); },
+            title: crumb.path,
+            style: {
+              flex: "none",
+              padding: "0 10px 4px",
+              borderBottom: "1px solid " + C.panelBorder,
+              fontSize: 10,
+              color: C.muted,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              cursor: "pointer"
+            },
+            children: crumb.path
+          }) : null,
           // 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
@@ -1364,7 +1873,11 @@ window.__ModuleLoader__.load({
             className: "dqt-list",
             style: {
               overflowY: "auto",
-              padding: "6px 8px",
+              // NO top padding: a sticky child is confined to its containing
+              // block, so a padded scroll container would hold the pinned group
+              // header that many pixels below the toolbar (a visible gap). Spacing
+              // between groups comes from the per-group divider instead.
+              padding: "0 8px 6px",
               flex: "1 1 auto",
               minHeight: 0,
               direction: dockRight ? "ltr" : "rtl"
@@ -1373,7 +1886,9 @@ window.__ModuleLoader__.load({
             onWheel: onListWheel,
             children: react_jsx_runtime.jsx("div", {
               style: { direction: "ltr" },
-              children: renderGroups(shownGroups, shownTrees, jump, C, Math.max(0, groups.length - visibleCount), activeGroup)
+              children: query.trim()
+                ? renderResults(resultRows, query.trim().toLowerCase(), C, goToRow, activeResultRow)
+                : renderGroups(shownGroups, shownTrees, jump, C, Math.max(0, groups.length - visibleCount), activeGroup)
             })
           }),
           // resize handles (right edge: width, bottom edge: height)
@@ -1436,7 +1951,9 @@ window.__ModuleLoader__.load({
           zIndex: Z_BASE,
           top: (viewport ? viewport.top + viewport.height / 2 - 46 : "50%"),
           transform: handleShown ? "translateX(0)" : (dockRight ? "translateX(16px)" : "translateX(-16px)"),
-          transition: "transform 0.4s " + EASE,
+          opacity: chatViewActive ? 1 : 0,
+          pointerEvents: chatViewActive ? "auto" : "none",
+          transition: "transform 0.4s " + EASE + ", opacity 0.26s ease",
           ...(dockRight
             ? { right: viewport ? viewport.right + 52 : 60 }   // clear of the milestone rail
             : { left: viewport ? viewport.left : 0 })
@@ -1483,6 +2000,12 @@ window.__ModuleLoader__.load({
     }
 
     function renderItem(n, depth, jump, C, uid) {
+      var hasChildren = !!(n.children && n.children.length);
+      var parts = [];
+      parts.push(react_jsx_runtime.jsx("span", {
+        style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" },
+        children: n.title
+      }, uid + "-l"));
       return react_jsx_runtime.jsx(
         "div",
         {
@@ -1490,8 +2013,11 @@ window.__ModuleLoader__.load({
           "data-jump-key": n.key,
           "data-jump-idx": n.idx !== undefined ? String(n.idx) : "0",
           style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 2,
             padding: "2px 6px",
-            paddingLeft: 8 + (n.level - 1) * 12,
+            paddingLeft: (hasChildren ? 2 : 6) + (n.level - 1) * 12,
             margin: "1px 0",
             borderRadius: 6,
             cursor: "pointer",
@@ -1501,13 +2027,12 @@ window.__ModuleLoader__.load({
             lineHeight: "18px",
             height: 22,
             whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis"
+            overflow: "hidden"
           },
           onMouseEnter: function (e) { e.currentTarget.style.background = C.hover; },
           onMouseLeave: function (e) { e.currentTarget.style.background = "transparent"; },
           title: n.title,
-          children: n.title
+          children: parts
         },
         uid + "-" + n.level + "-" + (n.key || "")
       );
@@ -1525,23 +2050,130 @@ window.__ModuleLoader__.load({
       return out;
     }
 
-    // a group's header: clicking the time jumps to that turn's start.
+    // ---- search results view ----
+    // While a query is present the list shows every matched heading/message
+    // (grouped per message, with an occurrence count) instead of the outline, so
+    // search is "see them all, then jump" rather than stepping blindly.
+    function hitSpans(text, q) {
+      var parts = highlightParts(text, q);
+      return parts.map(function (p, i) {
+        return p.hit
+          ? react_jsx_runtime.jsx("span", {
+            style: { background: "rgba(255,196,0,0.32)", borderRadius: 2, color: "inherit" },
+            children: p.text
+          }, "hp" + i)
+          : p.text;
+      });
+    }
+
+    function renderResultRow(r, i, q, C, onRow, isActive) {
+      var meta = [];
+      if (r.time) meta.push(r.time);
+      if (r.path) meta.push(r.path);
+      if (r.count > 1) meta.push("×" + r.count);
+      var children = [
+        react_jsx_runtime.jsx("div", {
+          style: {
+            fontSize: 12,
+            fontWeight: r.level > 0 && r.level <= 2 ? 600 : 400,
+            color: r.level > 0 ? C.text : C.muted,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: hitSpans(r.title, q)
+        }, "t" + i)
+      ];
+      if (r.snippet) {
+        children.push(react_jsx_runtime.jsx("div", {
+          style: {
+            fontSize: 11,
+            color: C.muted,
+            marginTop: 1,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: hitSpans(r.snippet, q)
+        }, "s" + i));
+      }
+      if (meta.length) {
+        children.push(react_jsx_runtime.jsx("div", {
+          style: { fontSize: 10, color: C.muted, opacity: 0.8, marginTop: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+          children: meta.join("  ·  ")
+        }, "m" + i));
+      }
+      return react_jsx_runtime.jsx("div", {
+        // clicking a row makes that hit the CURRENT one: it highlights the
+        // keyword in the conversation and scrolls there, exactly like Enter
+        // stepping — a row that only scrolled (no highlight) was the old bug
+        onClick: function () { onRow(i); },
+        "data-result-idx": i,
+        onMouseEnter: function (e) { e.currentTarget.style.background = C.hover; },
+        onMouseLeave: function (e) { e.currentTarget.style.background = isActive ? "rgba(79,140,255,0.16)" : "transparent"; },
+        title: r.path || r.title,
+        style: {
+          padding: "4px 6px",
+          margin: "1px 0",
+          borderRadius: 6,
+          cursor: "pointer",
+          minWidth: 0,
+          background: isActive ? "rgba(79,140,255,0.16)" : "transparent",
+          transition: "background 0.15s ease"
+        },
+        children: children
+      }, "res-" + i);
+    }
+
+    function renderResults(rows, q, C, onRow, activeRow) {
+      if (!rows || rows.length === 0) {
+        return react_jsx_runtime.jsx("div", {
+          style: { padding: "12px 8px", fontSize: 12, color: C.muted, textAlign: "center" },
+          children: "没有匹配"
+        });
+      }
+      var out = [];
+      for (var i = 0; i < rows.length; i++) {
+        out.push(renderResultRow(rows[i], i, q, C, onRow, i === activeRow));
+      }
+      return out;
+    }
+
+    // a group's header (the time row): clicking it jumps to the TOP OF THE
+    // MODEL'S REPLY for that turn — the first assistant step — which also makes
+    // heading-less turns jumpable, since they only have this row.
     // 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 replyKey = (g.msgs && g.msgs.length > 0) ? g.msgs[0].key : "";
+      var targetKey = replyKey || g.userKey;
       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);
+        // prefer the model's reply; fall back to the user message, then to the
+        // turn's first heading, so the row always does something useful
+        if (replyKey && findRow(replyKey)) { jump(replyKey); return; }
+        if (g.userKey && findRow(g.userKey)) { jump(g.userKey); return; }
+        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 },
+        style: {
+          padding: "1px 4px 2px",
+          height: 18,
+          display: "flex",
+          alignItems: "center",
+          minWidth: 0,
+          // sticky: while you scroll the outline, the header of the group you are
+          // inside stays pinned at the top (background must be opaque to cover
+          // the rows scrolling underneath).
+          position: "sticky",
+          top: 0,
+          zIndex: 2,
+          background: C.panelBg
+        },
         children: react_jsx_runtime.jsx("span", {
           onClick: jumpToTurn,
-          title: g.userKey ? "跳转到该回合开头" : "",
+          title: replyKey ? "跳转到该回合的模型回答开头" : "跳转到该回合开头",
           onMouseEnter: function (e) { e.currentTarget.style.background = C.hover; },
           onMouseLeave: function (e) { e.currentTarget.style.background = "transparent"; },
           style: {
@@ -1611,7 +2243,7 @@ window.__ModuleLoader__.load({
       ctx.effect(function () {
         return ctx.locale.register("dsh-quick-toc", { zh: zh, en: en });
       }, "dsh-quick-toc: dictionaries");
-      // DSH 0.1.2-rc.1: session-scoped hooks (useChat/useSession/sessionId) only arrive
+      // Recent DSH (0.1.5-rc.1): session-scoped hooks (useChat/useSession/sessionId) only arrive
       // inside a declared session slot. Register the panel into the session-scoped
       // conversation.input.overlay (list/additive) so it receives useChat; the panel
       // itself renders a fixed, frame-floating dock, so the overlay seat is just the