dsh-quick-toc 0.4.0 → 0.5.0

package/lib/client.js

@@ -21,6 +21,57 @@ window.__ModuleLoader__.load({
     var Z_BASE = 500;
     var EASE = "cubic-bezier(0.22, 0.9, 0.3, 1)"; // smooth non-linear slide
 
+    // ---------- UI strings ----------
+    // Every string the panel renders goes through T(). 0.5.0 ships the Chinese
+    // column only — the visible text is byte-identical to 0.4.1 — so 0.6.0 can
+    // add English (or feed the same keys into the host locale table) without
+    // hunting for hard-coded literals a second time.
+    var DICTS = {
+      zh: {
+        "panel.title": "对话大纲",
+        "error.panel": "dsh-quick-toc 面板出错: ",
+        "handle.dragY": "按住拖动调整位置",
+        "handle.dockLeft": "移到左侧",
+        "handle.dockRight": "移到右侧",
+        "handle.collapse": "收起",
+        "handle.expand": "展开大纲",
+        "levels.tip": "标题层级筛选",
+        "levels.show": "显示 H",
+        "levels.hide": "隐藏 H",
+        "search.open": "搜索标题",
+        "search.word": "搜索",
+        "search.tail": "，回车定位…",
+        "search.scope.title": "标题",
+        "search.scope.full": "全文",
+        "search.scope.tipTitle": "当前：仅搜索标题。点击切换为全文搜索",
+        "search.scope.tipFull": "当前：全文搜索。点击切换为仅标题",
+        "search.fuzzy": "模糊",
+        "search.fuzzy.tipOn": "模糊匹配已开启：允许关键字中间夹少量其他文字，命中更多",
+        "search.fuzzy.tipOff": "模糊匹配已关闭：只匹配连续的文字。点击开启",
+        "search.empty": "没有匹配",
+        "search.hintMore": "向上滚动可加载更早的消息",
+        "search.hintOldest": "已经是最早的消息",
+        "hint.bottom": "已经到底了",
+        "turn.jumpReply": "跳转到该回合的模型回答开头",
+        "turn.jumpTurn": "跳转到该回合开头",
+        "turn.loading": "正在加载这个回合…",
+        "turn.unloaded": "未加载",
+        "turn.loadTip": "点击加载这个回合并跳转过去",
+        "preview.truncated": "预览由宿主提供，可能被截断",
+        "resize.w": "拖拽调整宽度",
+        "resize.h": "拖拽调整高度",
+        "resize.wh": "拖拽同时调整宽高"
+      }
+    };
+    // The dictionary the current render reads. Kept as a module-level binding so
+    // the module-scope render helpers (renderItem/renderResultRow/...) can localise
+    // without threading a `t` argument through every call.
+    var activeDict = DICTS.zh;
+    function T(key) {
+      var s = activeDict[key];
+      return s === undefined ? key : s;
+    }
+
     // ---------- markdown helpers ----------
     function extractReplyText(node) {
       var blocks = node && node.data && node.data.blocks;
@@ -78,6 +129,153 @@ window.__ModuleLoader__.load({
       return first;
     }
 
+    // ---------- normalized matching (fold, plus an optional fuzzy pass) ----------
+    // Folding ignores differences that never change meaning: letter case,
+    // full-width vs half-width forms (ＡＢ１２，), and runs of whitespace. `map`
+    // keeps every folded character's ORIGINAL index, so a match found in folded
+    // space still highlights the untouched DOM text. Folding is ALWAYS on — it is
+    // correctness, not fuzziness: pasting "全角" text must find "全角" content.
+    function foldWithMap(text) {
+      var src = String(text === undefined || text === null ? "" : text);
+      var out = "";
+      var map = [];
+      var prevSpace = false;
+      for (var i = 0; i < src.length; i++) {
+        var ch = src.charAt(i);
+        var code = src.charCodeAt(i);
+        if (code >= 0xFF01 && code <= 0xFF5E) ch = String.fromCharCode(code - 0xFEE0); // full-width ASCII
+        else if (code === 0x3000) ch = " "; // ideographic space
+        var lower = ch.toLowerCase();
+        if (/\s/.test(lower)) {
+          if (prevSpace) continue; // collapse a whitespace run to one space
+          prevSpace = true;
+          out += " ";
+          map.push(i);
+          continue;
+        }
+        prevSpace = false;
+        out += lower;
+        map.push(i);
+      }
+      map.push(src.length); // end sentinel: source index just past the last character
+      return { text: out, map: map };
+    }
+
+    function foldQuery(q) {
+      return foldWithMap(q).text.trim();
+    }
+
+    // Contiguous occurrences of the folded query — the panel's original
+    // behaviour (case-insensitive, non-overlapping), now fold-aware.
+    function exactMatches(folded, fq) {
+      var hits = [];
+      if (!fq) return hits;
+      var at = 0;
+      while ((at = folded.text.indexOf(fq, at)) !== -1) {
+        hits.push({ ranges: [[folded.map[at], folded.map[at + fq.length]]] });
+        at += fq.length;
+      }
+      return hits;
+    }
+
+    // How far apart the matched characters of one fuzzy hit may sit. Without a
+    // bound, "提交" would match any text that happens to contain 提…交 somewhere,
+    // which buries the real hits; the span keeps fuzzy useful for "关键字中间夹
+    // 了别的字" without turning the list into noise.
+    function fuzzySpan(fq) {
+      return Math.max(12, fq.length * 2 + 8);
+    }
+
+    // Subsequence occurrences (fuzzy mode): the query's characters must appear in
+    // order, each hit is the shortest window found from the current position, and
+    // hits never overlap. Adjacent matched characters are merged into one range so
+    // a contiguous hit still highlights as a whole word.
+    function fuzzyMatches(folded, fq) {
+      var hits = [];
+      if (!fq) return hits;
+      var span = fuzzySpan(fq);
+      var from = 0;
+      for (;;) {
+        var start = -1;
+        var at = from;
+        var ranges = [];
+        var ok = true;
+        for (var i = 0; i < fq.length; i++) {
+          var hit = folded.text.indexOf(fq.charAt(i), at);
+          if (hit === -1 || (start !== -1 && hit - start > span)) { ok = false; break; }
+          if (start === -1) start = hit;
+          var raw = [folded.map[hit], folded.map[hit + 1]];
+          var last = ranges.length > 0 ? ranges[ranges.length - 1] : null;
+          if (last !== null && last[1] === raw[0] && folded.text.charAt(hit - 1) !== " ") last[1] = raw[1];
+          else ranges.push(raw);
+          at = hit + 1;
+        }
+        if (!ok) break;
+        hits.push({ ranges: ranges });
+        from = at;
+        if (from >= folded.text.length) break;
+      }
+      return hits;
+    }
+
+    function findMatches(folded, fq, fuzzy) {
+      if (!fq) return [];
+      return fuzzy ? fuzzyMatches(folded, fq) : exactMatches(folded, fq);
+    }
+
+    // Number of hits of the folded query in `text` (used for ×N and n/N counts).
+    function countOccurrences(text, q, fuzzy) {
+      var fq = q && q.folded !== undefined ? q.folded : foldQuery(q);
+      if (!text || !fq) return 0;
+      return findMatches(foldWithMap(text), fq, !!fuzzy).length;
+    }
+
+    // ---------- section bodies: subtitle + hover preview ----------
+    // Body lines of one heading: everything after it up to the next heading in
+    // the same message.
+    function sectionPreview(lines, from, to, max) {
+      if (!lines || from >= to) return "";
+      var out = "";
+      var fence = null;
+      for (var i = from; i < to; i++) {
+        var line = lines[i];
+        var fm = line.match(/^ {0,3}(`{3,}|~{3,})(.*)$/);
+        if (fence !== null) {
+          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 t = line.trim();
+        if (t === "") continue;
+        out += (out === "" ? "" : " ") + t;
+        if (out.length >= max) return out.slice(0, max).trim() + "…";
+      }
+      return out;
+    }
+
+    // First readable sentence of a section — the outline row's subtitle. Skips
+    // blank lines, code fences, table rules and bare bullet/emphasis markers so a
+    // "###" block that opens with a table still gets a meaningful line.
+    function firstSentence(lines, from, to, max) {
+      if (!lines || from >= to) return "";
+      var fence = null;
+      for (var i = from; i < to; i++) {
+        var line = lines[i];
+        var fm = line.match(/^ {0,3}(`{3,}|~{3,})(.*)$/);
+        if (fence !== null) {
+          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 t = line.trim().replace(/^[>+\-*]\s+/, "").replace(/^\d+[.)]\s+/, "");
+        if (t === "" || /^[|\-=*_\s]+$/.test(t)) continue;
+        t = cleanTitle(t);
+        if (t === "") continue;
+        return t.length > max ? t.slice(0, max).trim() + "…" : t;
+      }
+      return "";
+    }
+
     // 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
@@ -99,18 +297,18 @@ window.__ModuleLoader__.load({
         }
         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()) });
+        if (m !== null) items.push({ level: m[1].length, title: cleanTitle(m[2].trim()), line: i });
       }
       return items;
     }
 
-    function buildTree(headings) {
+    function buildTree(headings, time) {
       var root = { level: 0, children: [] };
       var stack = [root];
       for (var i = 0; i < headings.length; i++) {
         var h = headings[i];
         while (stack.length > 1 && stack[stack.length - 1].level >= h.level) stack.pop();
-        var node = { level: h.level, title: h.title, key: h.key, idx: h.idx, children: [] };
+        var node = { level: h.level, title: h.title, key: h.key, idx: h.idx, sub: h.sub, preview: h.preview, time: time, children: [] };
         stack[stack.length - 1].children.push(node);
         stack.push(node);
       }
@@ -122,6 +320,7 @@ window.__ModuleLoader__.load({
     // 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 EMPTY_LINES = [];
     var nodeInfoCache = new Map();
     function nodeInfo(key, node) {
       var isUser = node.kind === "user";
@@ -132,12 +331,24 @@ window.__ModuleLoader__.load({
         return cached;
       }
       var text = isUser ? extractUserText(node) : extractReplyText(node);
+      var lines = text ? text.split("\n") : EMPTY_LINES;
+      var headings = node.kind === "assistant-step" ? parseHeadings(text) : EMPTY_HEADINGS;
+      // per-heading subtitle (first sentence) + hover preview (section opening) —
+      // computed here, with the parse, so streaming updates only pay for the node
+      // that actually changed. `line` marks where the heading sits in `lines`, and
+      // its section runs to the next heading of ANY level (or the message end).
+      for (var hi = 0; hi < headings.length; hi++) {
+        var toLine = hi + 1 < headings.length ? headings[hi + 1].line : lines.length;
+        headings[hi].sub = firstSentence(lines, headings[hi].line + 1, toLine, 44);
+        headings[hi].preview = sectionPreview(lines, headings[hi].line + 1, toLine, 260);
+      }
       var info = {
         node: node,
         blocks: blocks,
         user: isUser,
         text: text,
-        headings: node.kind === "assistant-step" ? parseHeadings(text) : EMPTY_HEADINGS
+        lines: lines,
+        headings: headings
       };
       nodeInfoCache.set(key, info);
       return info;
@@ -155,33 +366,44 @@ window.__ModuleLoader__.load({
       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) {
+    // Split `text` into runs around the hits of `q`, so the caller can render the
+    // hits distinctly. Returns [{ text, hit }, ...]. Runs on folded text, so a
+    // full-width or differently-cased match is highlighted where it really sits,
+    // and a fuzzy hit paints each matched character run.
+    function highlightParts(text, q, fuzzy) {
       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;
+      var fq = foldQuery(q);
+      if (!fq) return [{ text: text, hit: false }];
+      var hits = findMatches(foldWithMap(text), fq, !!fuzzy);
+      if (hits.length === 0) return [{ text: text, hit: false }];
+      var cursor = 0;
+      for (var i = 0; i < hits.length; i++) {
+        var ranges = hits[i].ranges;
+        for (var r = 0; r < ranges.length; r++) {
+          var from = ranges[r][0];
+          var to = ranges[r][1];
+          if (from < cursor || to <= from) continue;
+          if (from > cursor) parts.push({ text: text.slice(cursor, from), hit: false });
+          parts.push({ text: text.slice(from, to), hit: true });
+          cursor = to;
+        }
       }
-      if (from < text.length) parts.push({ text: text.slice(from), hit: false });
+      if (cursor < text.length) parts.push({ text: text.slice(cursor), hit: false });
       return parts;
     }
 
     // A one-line window around the first hit of `q` in `text` (for search results).
-    function snippetAround(text, q, span) {
+    function snippetAround(text, q, span, fuzzy) {
       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 fq = foldQuery(q);
+      var folded = fq ? foldWithMap(flat) : null;
+      var hits = folded ? findMatches(folded, fq, !!fuzzy) : [];
+      if (hits.length === 0) return previewText(flat, span * 2);
+      var at = folded.map[hits[0].ranges[0][0]];
       var start = Math.max(0, at - span);
-      var end = Math.min(flat.length, at + q.length + span);
+      var end = Math.min(flat.length, at + span * 2);
       return (start > 0 ? "…" : "") + flat.slice(start, end) + (end < flat.length ? "…" : "");
     }
 
@@ -228,21 +450,6 @@ 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;
-      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() {
@@ -320,10 +527,17 @@ window.__ModuleLoader__.load({
       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) {
+    // wrap every hit of q inside row's text nodes; the hit at `currentOcc` gets a
+    // distinct "current" highlight. Matching runs on FOLDED text (case/full-width/
+    // whitespace insensitive) and, in fuzzy mode, on subsequences — a hit is then a
+    // set of character ranges, so one fuzzy hit can paint several spans.
+    // NOTE: these fills sit ON TOP OF conversation text, so they stay deliberately
+    // stronger than the panel's UI tints (C.chip / C.groupTint); only the current
+    // hit's outline reuses the shared accent value.
+    function highlightRow(row, q, currentOcc, fuzzy) {
       if (!row || !q) return;
+      var fq = foldQuery(q);
+      if (!fq) return;
       var walker = document.createTreeWalker(row, NodeFilter.SHOW_TEXT, null);
       var textNodes = [];
       while (walker.nextNode()) textNodes.push(walker.currentNode);
@@ -332,38 +546,41 @@ window.__ModuleLoader__.load({
         var node = textNodes[i];
         var text = node.nodeValue;
         if (!text) continue;
-        var lower = text.toLowerCase();
-        if (lower.indexOf(q) < 0) continue;
+        var hits = findMatches(foldWithMap(text), fq, !!fuzzy);
+        if (hits.length === 0) continue;
         var frag = document.createDocumentFragment();
-        // 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
+        // EVERY hit 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);
+        var cursor = 0;
+        for (var h = 0; h < hits.length; h++) {
+          var isCurrent = occ === currentOcc;
           occ++;
-          from = idx + q.length;
-          idx = lower.indexOf(q, from);
+          var ranges = hits[h].ranges;
+          for (var r = 0; r < ranges.length; r++) {
+            var from = ranges[r][0];
+            var to = ranges[r][1];
+            if (from < cursor || to <= from) continue;
+            if (from > cursor) frag.appendChild(document.createTextNode(text.slice(cursor, from)));
+            var mark = document.createElement("span");
+            if (isCurrent) {
+              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(from, to);
+            frag.appendChild(mark);
+            highlightSpans.push(mark);
+            cursor = to;
+          }
         }
-        var after = text.slice(from);
-        if (after) frag.appendChild(document.createTextNode(after));
+        if (cursor < text.length) frag.appendChild(document.createTextNode(text.slice(cursor)));
         node.parentNode.replaceChild(frag, node);
       }
     }
@@ -376,7 +593,14 @@ window.__ModuleLoader__.load({
       muted: "var(--dsw-alias-label-secondary, #9aa0ab)",
       accent: "var(--dsw-alias-brand-primary, #4f8cff)",
       hover: "var(--dsw-alias-interactive-bg-hover, rgba(255, 255, 255, 0.08))",
-      chip: "rgba(79, 140, 255, 0.18)"
+      // ONE source for every "this control is on / this button is open / this match
+      // is current" tint, so the panel cannot drift into five near-identical blues.
+      chip: "rgba(79, 140, 255, 0.18)",
+      // the followed group is a LARGE surface: same hue, lighter fill, with a
+      // closing outline + accent bar so the block reads as a finished shape.
+      groupTint: "rgba(79, 140, 255, 0.10)",
+      groupEdge: "rgba(79, 140, 255, 0.85)",
+      groupEdgeSoft: "rgba(79, 140, 255, 0.35)"
     };
 
     // ---- theme scheme detection (for the panel's 3D inner shadow) ----
@@ -444,7 +668,7 @@ window.__ModuleLoader__.load({
               maxWidth: 340,
               wordBreak: "break-all"
             },
-            children: "dsh-quick-toc 面板出错: " + msg
+            children: T("error.panel") + msg
           });
         }
         return this.props.children;
@@ -466,6 +690,68 @@ window.__ModuleLoader__.load({
       var order = useChat(function (s) { return s.order; });
       var nodes = useChat(function (s) { return s.nodes; });
 
+      // Whole-log turn index: the host's `turnOutline` projection
+      // (@deepseek-ai/dsh-session-turn-outline) names EVERY turn of the session —
+      // including turns the paged event window has not loaded yet — with a bounded
+      // prompt/response preview and the `turn/start` seq that pages history to it.
+      // On a host without that projection the value is undefined and the panel
+      // behaves exactly like 0.4.1 (loaded turns only).
+      var useProjection = props.useProjection;
+      var rawOutline = useProjection ? useProjection("turnOutline") : null;
+      // { sessions() } bridge to the host session face, injected by apply().
+      // It is a LOOKUP (ctx.get), not a cached reference: the service may be
+      // registered after this package loads, and an unloaded provider must not
+      // leave a stale handle behind.
+      var tocHost = props.tocHost;
+      var sessionId = props.sessionId;
+      var hostSessions = function () {
+        if (!tocHost || typeof tocHost.sessions !== "function") return null;
+        try {
+          return tocHost.sessions();
+        } catch (e) {
+          return null;
+        }
+      };
+      // Which stage of the bridge is actually ready — reported once at mount so a
+      // missing jump loader can be diagnosed from the console instead of guessed.
+      var jumpLoaderState = function () {
+        var sessions = hostSessions();
+        if (!sessions) return "no-sessions-service";
+        if (typeof sessions.binding !== "function") return "no-binding-api";
+        var binding = null;
+        try {
+          binding = sessions.binding(sessionId);
+        } catch (e) {
+          return "binding-threw";
+        }
+        var face = binding && binding.session;
+        if (!face) return "no-binding-for-session";
+        return typeof face.loadThrough === "function" ? "ready" : "no-loadThrough";
+      };
+
+      // Structural narrowing of that projection (its value crosses the wire):
+      // `turn` and `seq` are load-bearing — an entry without them cannot be
+      // shown or jumped to — while the previews are decorative and degrade to "".
+      var outlineTurns = react.useMemo(function () {
+        var list = Array.isArray(rawOutline) ? rawOutline
+          : (rawOutline && Array.isArray(rawOutline.turns) ? rawOutline.turns : null);
+        if (!list) return null; // projection unavailable: loaded turns only
+        var out = [];
+        for (var i = 0; i < list.length; i++) {
+          var e = list[i];
+          if (!e || typeof e !== "object") continue;
+          if (typeof e.turn !== "number" || !isFinite(e.turn) || e.turn < 0) continue;
+          if (typeof e.seq !== "number" || !isFinite(e.seq) || e.seq < 0) continue;
+          out.push({
+            turn: e.turn,
+            seq: e.seq,
+            prompt: typeof e.prompt === "string" ? e.prompt : "",
+            response: typeof e.response === "string" ? e.response : ""
+          });
+        }
+        return out;
+      }, [rawOutline]);
+
       // ---- hooks (ALL before any conditional return) ----
       // collapsed by default; user expands via the edge handle (default dock: left)
       var _s1 = react.useState(false);
@@ -617,27 +903,43 @@ window.__ModuleLoader__.load({
         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) {}
+      // ---- heading-level picker popup (transient): opens from the round button
+      // next to the search button; closes on an outside pointerdown. Closing
+      // plays a short shrink-back animation before unmounting. ----
+      var _sLo = react.useState(false);
+      var levelsOpen = _sLo[0];
+      var setLevelsOpen = _sLo[1];
+      var _sLc = react.useState(false);
+      var levelsClosing = _sLc[0];
+      var setLevelsClosing = _sLc[1];
+      var closeLevels = function () {
+        if (!levelsOpen || levelsClosing) return;
+        setLevelsClosing(true);
+        // unmount when the exit animation actually finishes (fallback timer in
+        // case animationend never fires, e.g. display:none ancestors)
+        var popped = document.querySelector(".dqt-levels-pop");
+        var done = false;
+        var finish = function () {
+          if (done) return;
+          done = true;
+          if (popped && popped.removeEventListener) popped.removeEventListener("animationend", finish);
+          setLevelsOpen(false);
+          setLevelsClosing(false);
+        };
+        if (popped && popped.addEventListener) popped.addEventListener("animationend", finish);
+        setTimeout(finish, 220);
       };
+      react.useEffect(function () {
+        if (!levelsOpen) return;
+        var close = function (e) {
+          var t = e.target;
+          if (t && t.closest && (t.closest(".dqt-levels-pop") || t.closest(".dqt-levels-btn"))) return;
+          closeLevels();
+        };
+        document.addEventListener("pointerdown", close);
+        return function () { document.removeEventListener("pointerdown", close); };
+      }, [levelsOpen, levelsClosing]);
 
-      // ---- 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;
@@ -647,6 +949,79 @@ window.__ModuleLoader__.load({
       var listRef = react.useRef(null);
       var didInitScroll = react.useRef(false);
       var outlineTouchRef = react.useRef(0); // last time the user touched the outline
+      var lastScrollTopRef = react.useRef(0);
+      var lastHostClickRef = react.useRef(0); // throttle for the "load earlier" click
+
+      // ---- "scroll up to load earlier messages" hint (search mode) -----------
+      // Armed by a search when older history is still reachable; dismissed the
+      // moment the reader scrolls up (which is when the older page starts loading,
+      // so the hint has done its job). "" | "more" | "oldest"
+      var _sHint = react.useState("");
+      var hint = _sHint[0];
+      var setHint = _sHint[1];
+
+      // ---- transient edge banner (outline mode) ------------------------------
+      // Reaching either end of the outline flashes a short bar over the bottom of
+      // the list: fade in, hold a few seconds, fade out. Deliberately NOT the same
+      // element as the search hint above (which stays until the reader acts).
+      var _sToast = react.useState(null);
+      var toast = _sToast[0];
+      var setToast = _sToast[1];
+      var toastTimersRef = react.useRef({ hold: null, out: null });
+      var showBanner = function (text) {
+        if (toastTimersRef.current.hold) clearTimeout(toastTimersRef.current.hold);
+        if (toastTimersRef.current.out) clearTimeout(toastTimersRef.current.out);
+        setToast({ text: text, closing: false });
+        toastTimersRef.current.hold = setTimeout(function () {
+          setToast(function (cur) { return cur === null ? null : { text: cur.text, closing: true }; });
+          toastTimersRef.current.out = setTimeout(function () { setToast(null); }, 460);
+        }, 2600);
+      };
+
+      // ---- hover preview card -------------------------------------------------
+      // Hovering an outline/result row opens a card with the section's opening
+      // lines; it lives in the body portal so the scrolling list cannot clip it.
+      var _sHov = react.useState(null);
+      var hoverCard = _sHov[0];
+      var setHoverCard = _sHov[1];
+      var _sHovOut = react.useState(false);
+      var hoverClosing = _sHovOut[0];
+      var setHoverClosing = _sHovOut[1];
+      var hoverTimerRef = react.useRef(null);
+      var hoverCloseTimerRef = react.useRef(null);
+      var hoverStart = function (info, el) {
+        if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+        hoverTimerRef.current = setTimeout(function () {
+          var r = el && el.getBoundingClientRect ? el.getBoundingClientRect() : null;
+          if (!r || r.width <= 0) return;
+          if (hoverCloseTimerRef.current) {
+            clearTimeout(hoverCloseTimerRef.current);
+            hoverCloseTimerRef.current = null;
+          }
+          setHoverClosing(false);
+          setHoverCard({
+            title: info.title,
+            sub: info.sub,
+            preview: info.preview,
+            meta: info.meta,
+            ghost: info.ghost,
+            top: r.top,
+            left: r.left,
+            right: r.right
+          });
+        }, 260);
+      };
+      // leaving fades the card out instead of dropping it on the next frame
+      var hoverEnd = function () {
+        if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+        if (hoverCloseTimerRef.current) clearTimeout(hoverCloseTimerRef.current);
+        setHoverClosing(true);
+        hoverCloseTimerRef.current = setTimeout(function () {
+          hoverCloseTimerRef.current = null;
+          setHoverCard(null);
+          setHoverClosing(false);
+        }, 240);
+      };
 
       // ---- the outline belongs to the CHAT view only: when the center column
       // switches to another view (trajectory / context / plugin views), fade the
@@ -718,6 +1093,21 @@ window.__ModuleLoader__.load({
         if (scopeTimerRef.current) clearTimeout(scopeTimerRef.current);
         scopeTimerRef.current = setTimeout(function () { setPrevScope(null); }, 300);
       };
+      // ---- fuzzy matching: an independent switch beside the scope pill --------
+      // Off (default) = the folded CONTIGUOUS match. On = subsequence matching, so
+      // keywords tolerate text wedged in between ("模糊匹配" also finds "模糊的匹配").
+      var FUZZY_KEY = "dsh-quick-toc.fuzzy.v1";
+      var _sFz = react.useState(function () {
+        try { return localStorage.getItem(FUZZY_KEY) === "1"; } catch (e) { return false; }
+      });
+      var fuzzy = _sFz[0];
+      var setFuzzy = _sFz[1];
+      var toggleFuzzy = function () {
+        var next = !fuzzy;
+        setFuzzy(next);
+        setMatchIdx(0);
+        try { localStorage.setItem(FUZZY_KEY, next ? "1" : "0"); } catch (e) {}
+      };
       var openSearch = function () {
         setSearchOpen(true);
         setSearchAnim("enter");
@@ -773,9 +1163,9 @@ window.__ModuleLoader__.load({
           }
           return false;
         };
-        if (grow()) return;
-        var btn = findLoadOlderButton();
-        if (btn && !btn.disabled) {
+        var viaHost = function () {
+          var btn = findLoadOlderButton();
+          if (!btn || btn.disabled) return false;
           btn.click();
           // once the conversation loads more, expand the outline window too
           setTimeout(function () {
@@ -788,7 +1178,34 @@ window.__ModuleLoader__.load({
               });
             }
           }, 1200);
-        }
+          return true;
+        };
+        var viaHostThrottled = function () {
+          var now = Date.now();
+          if (now - lastHostClickRef.current < 900) return false;
+          if (!findLoadOlderButton()) return false;
+          lastHostClickRef.current = now;
+          return viaHost();
+        };
+        // In SEARCH mode the list shows matches, not the outline: paging the
+        // outline's own window would change nothing the reader can see, whereas
+        // loading the conversation's older messages extends what the search can
+        // cover at all (the whole-log index only carries bounded previews). So the
+        // host's own "load earlier" comes first while a query is active.
+        if (query.trim() !== "") return viaHost() || grow();
+        // Outline mode keeps the ORIGINAL contract: scrolling the outline up also
+        // pulls the conversation's older messages in (that is what makes the outline
+        // a substitute for scrolling the transcript), not merely more index entries.
+        // The host click is throttled so one continuous scroll cannot hammer the
+        // pager; grow() still runs first so the index never lags behind the window.
+        var grew = grow();
+        return viaHostThrottled() || grew;
+      };
+
+      // older history still reachable? the outline can always page its own window
+      // further, and beyond that the conversation's own "load older" button decides
+      var canLoadOlder = function () {
+        return visibleCount < groups.length || !!findLoadOlderButton();
       };
 
       // wheel up (toward older) loads more when the list is at its top or has
@@ -796,17 +1213,52 @@ window.__ModuleLoader__.load({
       // 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);
+        hoverEnd();
+        if (e.deltaY >= 0) {
+          // still scrolling down at the very end of the outline: say so. Outline
+          // mode only — the search list has its own persistent hint line.
+          var max = el.scrollHeight - el.clientHeight;
+          if (max > 4 && el.scrollTop >= max - 4 && query.trim() === "") showBanner(T("hint.bottom"));
+          return;
+        }
+        if (hint === "more") setHint(""); // scrolling up is what the hint asked for
+        if (el.scrollTop <= 1) {
+          var progressed = loadOlderOutline(el);
+          if (!progressed) {
+            if (query.trim() !== "") {
+              if (hint !== "oldest") setHint("oldest");
+            } else {
+              showBanner(T("search.hintOldest"));
+            }
+          }
+        }
       };
 
       // 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);
+        var upward = el.scrollTop < lastScrollTopRef.current - 2;
+        if (upward) {
+          if (hint === "more") setHint("");
+          if (hoverCard) hoverEnd();
+        }
+        lastScrollTopRef.current = el.scrollTop;
+        if (el.scrollTop <= 24) {
+          // Reaching the top is the ONLY place the exhausted case can be told
+          // apart from "keep scrolling": after a search the list is parked at the
+          // bottom, so the first wheel-up merely scrolls and never gets here.
+          var progressed = loadOlderOutline(el);
+          if (!progressed && upward) {
+            if (query.trim() !== "") {
+              if (hint !== "oldest") setHint("oldest");
+            } else {
+              showBanner(T("search.hintOldest"));
+            }
+          }
+        }
       };
 
       // ---- resize drags (right edge = width, bottom edge = height) ----
@@ -961,14 +1413,53 @@ window.__ModuleLoader__.load({
           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 });
+            current.headings.push({
+              level: info.headings[k].level,
+              title: info.headings[k].title,
+              key: key,
+              idx: k,
+              sub: info.headings[k].sub,
+              preview: info.headings[k].preview
+            });
           }
         }
         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]);
+        var ready = result.filter(function (g) { return g.headings.length > 0 || g.time !== ""; });
+        if (outlineTurns === null) return ready;
+        // ---- merge the whole-log turn index ---------------------------------
+        // Loaded groups keep their order (a group whose node carries no turn
+        // location stays where it was found); every turn the paged window has not
+        // loaded yet becomes an "unloaded" entry in the gap where it belongs, so
+        // the outline covers the whole session and heading-less turns stay
+        // reachable by number. Preview text comes from the projection and is
+        // bounded by it (host-side 50/120 character budgets).
+        var merged = [];
+        var li = 0;
+        for (var ei = 0; ei < outlineTurns.length; ei++) {
+          var entry = outlineTurns[ei];
+          while (li < ready.length && (ready[li].turn === null || ready[li].turn < entry.turn)) {
+            merged.push(ready[li]);
+            li++;
+          }
+          if (li < ready.length && ready[li].turn === entry.turn) continue; // emitted above
+          merged.push({
+            turn: entry.turn,
+            seq: entry.seq,
+            ghost: true,
+            time: "",
+            userKey: "",
+            userText: entry.prompt,
+            userFull: "",
+            msgs: [],
+            headings: [],
+            preview: entry.response
+          });
+        }
+        while (li < ready.length) { merged.push(ready[li]); li++; }
+        return merged;
+      }, [order, nodes, outlineTurns]);
       // 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
@@ -978,14 +1469,25 @@ window.__ModuleLoader__.load({
         didInitScroll.current = true;
         listRef.current.scrollTop = listRef.current.scrollHeight;
       }, [groups.length]);
+      // one-line diagnostic so the loaded build AND the host capabilities it can
+      // actually reach are identifiable from the browser console
+      var mountLogRef = react.useRef(false);
+      react.useEffect(function () {
+        if (mountLogRef.current) return;
+        mountLogRef.current = true;
+        console.log("[dsh-quick-toc] panel mounted · turnOutline=" +
+          (outlineTurns ? outlineTurns.length + " turns" : "unavailable") +
+          " · jumpLoader=" + jumpLoaderState());
+      }, [outlineTurns]);
+
       var groupTrees = react.useMemo(function () {
         return groups.map(function (g) {
-          if (levels.length === 6) return buildTree(g.headings);
+          if (levels.length === 6) return buildTree(g.headings, g.time);
           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);
+          return buildTree(kept, g.time);
         });
       }, [groups, levels, levelSet]);
       // pagination slice: the latest `visibleCount` groups
@@ -993,18 +1495,28 @@ window.__ModuleLoader__.load({
       var shownTrees = groupTrees.slice(groupTrees.length - shownGroups.length);
 
       // the group currently being read (the turn under the middle of the
-      // CONVERSATION viewport) stays bright in the outline; others are dimmed
+      // CONVERSATION viewport) stays bright in the outline; others are dimmed.
+      // Every node key of every loaded group -> its group index: mapping ONLY the
+      // heading-bearing messages meant a turn with no markdown headings had no
+      // entry at all, so a jump that landed on it (the host's own turn rail, for
+      // one) could never light up or follow in the outline.
       var keyToGroup = react.useMemo(function () {
         var m = {};
         for (var i = 0; i < groups.length; i++) {
-          for (var j = 0; j < groups[i].headings.length; j++) {
-            m[groups[i].headings[j].key] = i;
+          var g = groups[i];
+          if (g.ghost) continue; // no loaded rows to match
+          if (g.userKey) m[g.userKey] = i;
+          for (var j = 0; j < g.headings.length; j++) {
+            m[g.headings[j].key] = i;
+          }
+          for (var k = 0; k < g.msgs.length; k++) {
+            m[g.msgs[k].key] = i;
           }
         }
         return m;
       }, [groups]);
 
-      // ancestor path of every heading occurrence (breadcrumb + result rows):
+      // ancestor path of every heading occurrence (used by the search result rows):
       // id -> { path, title, level, gi }
       var headingPaths = react.useMemo(function () {
         var byId = {};
@@ -1029,8 +1541,9 @@ window.__ModuleLoader__.load({
       // 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 fq = foldQuery(query);
+        if (!fq) return [];
+        var needle = { folded: fq }; // one folded query, reused for every text
         var rows = [];
         var index = {};
         var push = function (row, n) {
@@ -1043,44 +1556,83 @@ window.__ModuleLoader__.load({
         };
         for (var gi = 0; gi < groups.length; gi++) {
           var g = groups[gi];
+          // a turn the paged window has not loaded: searchable through the host
+          // outline's bounded previews, and clicking it pages the turn in first
+          if (g.ghost) {
+            if (searchScope === "full") {
+              var gtext = (g.userText || "") + "\n" + (g.preview || "");
+              var ng = countOccurrences(gtext, needle, fuzzy);
+              if (ng > 0) {
+                push({
+                  gi: gi, key: "", idx: undefined,
+                  title: previewText(g.userText || g.preview || "", 40),
+                  level: 0, path: "", time: "",
+                  snippet: snippetAround(g.preview || g.userText || "", fq, 36, fuzzy),
+                  ghost: true, turn: g.turn, seq: g.seq
+                }, ng);
+              }
+            }
+            continue;
+          }
           for (var j = 0; j < g.headings.length; j++) {
             var h = g.headings[j];
-            var nh = countOccurrences(h.title, q);
+            var nh = countOccurrences(h.title, needle, fuzzy);
             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: ""
+                // the subtitle identifies same-titled headings ("which one?")
+                path: hp ? hp.path : "", time: g.time, snippet: h.sub || ""
               }, nh);
             }
           }
           if (searchScope === "full") {
-            var nu = g.userKey && g.userFull ? countOccurrences(g.userFull, q) : 0;
+            var nu = g.userKey && g.userFull ? countOccurrences(g.userFull, needle, fuzzy) : 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)
+                level: 0, path: "", time: g.time, snippet: snippetAround(g.userFull, fq, 36, fuzzy)
               }, 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);
+              var nm = countOccurrences(msg.text, needle, fuzzy);
               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)
+                level: 0, path: "", time: g.time, snippet: snippetAround(msg.text, fq, 36, fuzzy)
               }, nm);
             }
           }
         }
         return rows;
-      }, [groups, query, searchScope, headingPaths]);
-      headingPathsRef.current = headingPaths;
+      }, [groups, query, searchScope, headingPaths, fuzzy]);
+      // ---- auto-follow: which turn is the reader looking at -------------------
+      // This used to hang off ONE scroll listener bound to the scrollport element
+      // captured when the effect ran. DSH can replace that element (a jump that
+      // repages the window remounts the list), and the listener then stays on the
+      // detached node — the outline silently stops following. So it re-queries the
+      // scrollport on every run, listens on the DOCUMENT in the capture phase
+      // (scroll does not bubble; capture still sees every descendant), and keeps a
+      // slow poll for programmatic anchor adjustments that emit no scroll event.
+      //
+      // The outline's own scroll is INSTANT and starts on the next frame: a following
+      // rail that animates its way to the target reads as permanently one step behind.
       react.useEffect(function () {
-        var sp = document.querySelector("[data-conversation-scroll]");
-        if (!sp) return;
-        var update = function () {
+        var followFrame = null;
+        var followTimer = null;
+        var lastRun = 0;
+        var update = function (force) {
+          // scroll frames are hot and a document-level capture listener sees every
+          // scroll in the app; the rail only changes when a different turn crosses
+          // the viewport, so cap the row measurement at ~16/s
+          var now = Date.now();
+          if (!force && now - lastRun < 60) return;
+          lastRun = now;
+          if (!chatViewRef.current) return;
+          var sp = document.querySelector("[data-conversation-scroll]");
+          if (!sp) return;
           var lr = sp.getBoundingClientRect();
           var vTop = lr.top;
           var vBottom = lr.top + lr.height;
@@ -1096,74 +1648,43 @@ window.__ModuleLoader__.load({
             }
           }
           var sig = actives.slice().sort().join(",");
-          if (sig !== activeSigRef.current) {
-            activeSigRef.current = sig;
-            setActiveGroup(actives);
-            // 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) {
-                var need = groups.length - gi0 + 3;
-                return Math.max(prev, Math.min(groups.length, need));
-              });
-              var el = listRef.current;
-              if (el) {
-                setTimeout(function () {
-                  var node = el.querySelector('[data-group-idx="' + gi0 + '"]');
-                  if (!node) return;
-                  var er = node.getBoundingClientRect();
-                  var lr2 = el.getBoundingClientRect();
-                  if (er.top < lr2.top - 2 || er.bottom > lr2.bottom + 2) {
-                    el.scrollTo({ top: el.scrollTop + (er.top - lr2.top) - el.clientHeight / 2 + node.offsetHeight / 2, behavior: "smooth" });
-                  }
-                }, 120);
-              }
-            }
-          }
-          // 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;
+          if (sig === activeSigRef.current) return;
+          activeSigRef.current = sig;
+          setActiveGroup(actives);
+          if (actives.length === 0) return;
+          // pause right after the reader touched the outline themselves —
+          // otherwise paging older turns gets yanked back to the newest group
+          if (Date.now() - outlineTouchRef.current <= 1500) return;
+          var gi0 = actives[0];
+          setVisibleCount(function (prev) {
+            var need = groups.length - gi0 + 3;
+            return Math.max(prev, Math.min(groups.length, need));
+          });
+          if (followFrame) cancelAnimationFrame(followFrame);
+          if (followTimer) clearTimeout(followTimer);
+          var place = function () {
+            var el = listRef.current;
+            if (!el) return;
+            var node = el.querySelector('[data-group-idx="' + gi0 + '"]');
+            if (!node) return;
+            var er = node.getBoundingClientRect();
+            var lr2 = el.getBoundingClientRect();
+            if (er.top < lr2.top - 2 || er.bottom > lr2.bottom + 2) {
+              el.scrollTop = el.scrollTop + (er.top - lr2.top) - el.clientHeight / 2 + node.offsetHeight / 2;
             }
-          }
-          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);
-          }
+          };
+          followFrame = requestAnimationFrame(function () { followFrame = requestAnimationFrame(place); });
+          followTimer = setTimeout(place, 90); // the row may only exist after the expansion commits
+        };
+        update(true);
+        document.addEventListener("scroll", update, { passive: true, capture: true });
+        var poll = setInterval(function () { update(true); }, 250);
+        return function () {
+          document.removeEventListener("scroll", update, { capture: true });
+          clearInterval(poll);
+          if (followFrame) cancelAnimationFrame(followFrame);
+          if (followTimer) clearTimeout(followTimer);
         };
-        update();
-        sp.addEventListener("scroll", update, { passive: true });
-        return function () { sp.removeEventListener("scroll", update); };
       }, [keyToGroup]);
 
       // ---- search matches ----
@@ -1172,21 +1693,32 @@ window.__ModuleLoader__.load({
       // 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 fq = foldQuery(query);
+        if (!fq) return [];
+        var needle = { folded: fq };
         var out = [];
         for (var gi = 0; gi < groups.length; gi++) {
           var g = groups[gi];
+          if (g.ghost) {
+            if (searchScope === "full") {
+              var gtext = (g.userText || "") + "\n" + (g.preview || "");
+              var ng = countOccurrences(gtext, needle, fuzzy);
+              for (var cg = 0; cg < ng; cg++) {
+                out.push({ gi: gi, title: g.userText || "", key: "", idx: undefined, ghost: true, turn: g.turn, seq: g.seq });
+              }
+            }
+            continue;
+          }
           for (var j = 0; j < g.headings.length; j++) {
             var h = g.headings[j];
-            var n = countOccurrences(h.title, q);
+            var n = countOccurrences(h.title, needle, fuzzy);
             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);
+              var nu = countOccurrences(g.userFull, needle, fuzzy);
               for (var cu = 0; cu < nu; cu++) {
                 out.push({ gi: gi, title: previewText(g.userFull, 30), key: g.userKey, idx: undefined });
               }
@@ -1194,7 +1726,7 @@ window.__ModuleLoader__.load({
             for (var m = 0; m < g.msgs.length; m++) {
               var msg = g.msgs[m];
               if (!msg.text) continue;
-              var nm = countOccurrences(msg.text, q);
+              var nm = countOccurrences(msg.text, needle, fuzzy);
               for (var cm = 0; cm < nm; cm++) {
                 out.push({ gi: gi, title: previewText(msg.text, 30), key: msg.key, idx: undefined });
               }
@@ -1202,7 +1734,7 @@ window.__ModuleLoader__.load({
           }
         }
         return out;
-      }, [groups, query, searchScope]);
+      }, [groups, query, searchScope, fuzzy]);
 
       // which result row holds the current (n/N) occurrence (needs `matches`)
       var activeResultRow = -1;
@@ -1225,10 +1757,13 @@ window.__ModuleLoader__.load({
         var q = query.trim();
         if (searchPosRef.current === q) return;
         searchPosRef.current = q;
-        if (!q) return;
+        if (!q) { setHint(""); return; }
         var el = listRef.current;
         if (el) el.scrollTop = el.scrollHeight;
         if (matches.length > 0) setMatchIdx(matches.length - 1);
+        // arm the "scroll up for older messages" hint: the result list only covers
+        // what the window holds, and older turns are one upward scroll away
+        setHint(canLoadOlder() ? "more" : "");
       }, [query, matches.length]);
 
       // keep the current row in view while stepping with Enter
@@ -1299,15 +1834,8 @@ window.__ModuleLoader__.load({
       // ---- jump: smooth glide to the exact heading element. When glued to the
       // bottom, lift just past DSH's 25px stick-to-bottom threshold first so
       // the glide is not yanked back. ----
-      var jump = function (key, idx) {
-        var row = findRow(key);
-        if (!row) return;
-        var el = row;
-        if (idx !== undefined && idx !== null) {
-          var hs = row.querySelectorAll("h1, h2, h3, h4, h5, h6");
-          if (hs.length > 0) el = hs[Math.min(idx, hs.length - 1)] || row;
-        }
-        var sp = row.closest ? row.closest("[data-conversation-scroll]") : null;
+      var glideTo = function (el) {
+        var sp = el.closest ? el.closest("[data-conversation-scroll]") : null;
         if (!sp) {
           el.scrollIntoView({ behavior: "smooth", block: "start" });
           return;
@@ -1320,6 +1848,104 @@ window.__ModuleLoader__.load({
         sp.scrollTo({ top: t, behavior: "smooth" });
       };
 
+      var jump = function (key, idx) {
+        var row = findRow(key);
+        if (!row) return;
+        var el = row;
+        if (idx !== undefined && idx !== null) {
+          var hs = row.querySelectorAll("h1, h2, h3, h4, h5, h6");
+          if (hs.length > 0) el = hs[Math.min(idx, hs.length - 1)] || row;
+        }
+        glideTo(el);
+      };
+
+      // ---- unloaded turns: page history to the turn, then land on it ----------
+      // The host turn outline carries each turn's `turn/start` seq and the session
+      // face's loadThrough(seq) is the documented jump loader ("page history
+      // backwards until the window covers seq"). Once it resolves the turn's nodes
+      // exist, so we poll briefly for its row — the native turn rail waits for the
+      // same settle.
+      var turnRow = function (turn) {
+        try {
+          return document.querySelector('[data-chat-turn="' + String(turn) + '"]');
+        } catch (e) {
+          return null;
+        }
+      };
+
+      // Fallback locator for the poll below: once the paged window covers the
+      // turn, OUR OWN rebuilt outline has a loaded group for it, which carries the
+      // anchor keys of that turn's nodes. That path does not depend on the host
+      // keeping a `data-chat-turn` attribute on the row.
+      var groupsRef = react.useRef([]);
+      react.useEffect(function () { groupsRef.current = groups; }, [groups]);
+      var loadedGroupRow = function (turn) {
+        var list = groupsRef.current || [];
+        for (var i = 0; i < list.length; i++) {
+          var g = list[i];
+          if (g.ghost || g.turn !== turn) continue;
+          var key = (g.msgs && g.msgs.length > 0) ? g.msgs[0].key : g.userKey;
+          var row = key ? findRow(key) : null;
+          if (row) return row;
+        }
+        return null;
+      };
+
+      var landOnTurn = function (turn) {
+        var tries = 0;
+        var step = function () {
+          tries++;
+          var row = turnRow(turn) || loadedGroupRow(turn);
+          if (row) {
+            glideTo(row);
+            // a jump that started from a search hit keeps the hit highlighted
+            if (query.trim()) {
+              clearHighlights();
+              highlightRow(row, query.trim(), 0, fuzzy);
+            }
+            return;
+          }
+          if (tries < 25) setTimeout(step, 80);
+        };
+        setTimeout(step, 40);
+      };
+
+      // returns false when the host exposes no jump loader (older DSH builds)
+      var openTurn = function (turn, seq) {
+        var sessions = hostSessions();
+        if (!sessions) {
+          console.warn("[dsh-quick-toc] ctx.get(\"sessions\") returned nothing: this host has no session service, cannot open turn " + turn);
+          return false;
+        }
+        var binding = typeof sessions.binding === "function" ? sessions.binding(sessionId) : null;
+        var face = binding && binding.session;
+        if (!face || typeof face.loadThrough !== "function") {
+          console.warn("[dsh-quick-toc] session " + String(sessionId) + " exposes no loadThrough jump loader, cannot open turn " + turn);
+          return false;
+        }
+        setHoverCard(null);
+        Promise.resolve(face.loadThrough(seq)).then(function () {
+          landOnTurn(turn);
+        }, function (err) {
+          console.warn("[dsh-quick-toc] loadThrough failed:", err);
+        });
+        return true;
+      };
+
+      // reveal one group inside the outline list (shared by Enter-stepping and by
+      // jumps into a turn that had to be loaded first)
+      var revealGroupInOutline = function (gi) {
+        setVisibleCount(function (prev) {
+          return Math.max(prev, Math.min(groups.length, groups.length - gi));
+        });
+        setTimeout(function () {
+          var el = listRef.current;
+          if (!el) return;
+          var node = el.querySelector('[data-group-idx="' + gi + '"]');
+          if (node) node.scrollIntoView({ behavior: "smooth", block: "nearest" });
+        }, 150);
+      };
+
       // 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
@@ -1328,14 +1954,21 @@ window.__ModuleLoader__.load({
         var i = ((n % matches.length) + matches.length) % matches.length;
         setMatchIdx(i);
         var m = matches[i];
-        var q = query.trim().toLowerCase();
+        var q = query.trim();
         clearHighlights();
+        if (m.ghost) {
+          // the hit lives in a turn the paged window has not loaded: page it in
+          // and land on it (landOnTurn re-applies the highlight there)
+          openTurn(m.turn, m.seq);
+          revealGroupInOutline(m.gi);
+          return;
+        }
         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);
+          highlightRow(r, q, occ, fuzzy);
           var markEl = r.querySelector(".dqt-current");
           var sp = r.closest ? r.closest("[data-conversation-scroll]") : null;
           if (sp && markEl) {
@@ -1352,15 +1985,7 @@ window.__ModuleLoader__.load({
         } 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);
+        revealGroupInOutline(m.gi);
       };
 
       // clicking result row `i` = make its FIRST occurrence the current match, so
@@ -1417,6 +2042,47 @@ window.__ModuleLoader__.load({
       };
 
       // ---- panel ----
+      // what the module-scope render helpers need from this render
+      var renderExtra = {
+        paths: headingPaths,
+        fuzzy: fuzzy,
+        onOpenTurn: openTurn,
+        hoverStart: hoverStart,
+        hoverEnd: hoverEnd
+      };
+      // Transient banner pinned to the bottom of the panel (the panel is
+      // position:fixed, so this anchors to the list's lower edge without joining
+      // the list's scroll flow). pointerEvents:none keeps it from eating clicks.
+      var toastEl = toast ? react_jsx_runtime.jsx("div", {
+        className: "dqt-toast" + (toast.closing ? " dqt-toast-closing" : ""),
+        style: {
+          position: "absolute",
+          left: 8,
+          right: 8,
+          bottom: 8,
+          display: "flex",
+          justifyContent: "center",
+          pointerEvents: "none",
+          zIndex: 3
+        },
+        children: react_jsx_runtime.jsx("span", {
+          style: {
+            maxWidth: "100%",
+            padding: "3px 10px",
+            borderRadius: 999,
+            cornerShape: "round",
+            fontSize: 11,
+            color: C.text,
+            background: C.panelBg,
+            border: "1px solid " + C.panelBorder,
+            boxShadow: "0 2px 10px rgba(0,0,0,0.22)",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: toast.text
+        })
+      }) : null;
       // 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
@@ -1441,7 +2107,12 @@ window.__ModuleLoader__.load({
         }
       }
       // faded out entirely while another center-column view is active
-      var panelOpacity = open && chatViewActive ? (hovered ? 0.95 : 0.45) : 0;
+      // Idle transparency used to be 0.45, which stacked with the outline's own
+      // inactive-group dimming (0.6) into a wall of grey that left the panel barely
+      // readable whenever the pointer was elsewhere. Readability now comes from
+      // CONTRAST on the group being read (tinted row + accent bar, see
+      // renderGroups) instead of from fading everything else away.
+      var panelOpacity = open && chatViewActive ? (hovered ? 1 : 0.72) : 0;
 
       var panelEl = react_jsx_runtime.jsx("div", {
         style: {
@@ -1491,7 +2162,7 @@ window.__ModuleLoader__.load({
               cursor: "grab",
               userSelect: "none"
             },
-            title: "按住拖动调整位置",
+            title: T("handle.dragY"),
             onPointerDown: onHandleDown,
             onMouseEnter: function () { handleBright(true); },
             onMouseLeave: function () { handleBright(false); },
@@ -1524,7 +2195,7 @@ window.__ModuleLoader__.load({
                   // three-bar outline mark (long / medium / short) — no title text
                   react_jsx_runtime.jsx("div", {
                     style: { display: "flex", alignItems: "center", color: C.muted, flex: "none" },
-                    title: "对话大纲",
+                    title: T("panel.title"),
                     children: react_jsx_runtime.jsx("svg", {
                       width: 18,
                       height: 14,
@@ -1540,33 +2211,61 @@ 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.
+                      // heading-level filter: a round icon button (directly left
+                      // of the search button) that pops down the H1–H6 picker.
+                      // Icon: three lines of decreasing width = outline levels.
+                      // Hover behaviour matches the magnifier: background + icon
+                      // tint change; the resting look never shifts when open.
                       react_jsx_runtime.jsx("button", {
-                        onClick: toggleLevelsRow,
-                        title: showLevelsRow ? "收起 H1–H6 层级筛选那一行" : "展开 H1–H6 层级筛选那一行",
+                        className: "dqt-levels-btn",
+                        onClick: function () { levelsOpen ? closeLevels() : setLevelsOpen(true); },
+                        title: T("levels.tip"),
                         style: {
-                          height: 20,
-                          padding: "0 6px",
+                          width: 24,
+                          height: 24,
+                          padding: 0,
                           border: "none",
-                          borderRadius: 5,
+                          borderRadius: "50%",
                           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
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          // open (or still animating shut) uses the SAME tint as every
+                          // other "on" control, so the header reads consistently
+                          background: (levelsOpen || levelsClosing) ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+                          color: (levelsOpen || levelsClosing) ? C.accent : C.muted,
+                          transition: "background 0.15s ease, color 0.15s ease"
+                        },
+                        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 = (levelsOpen || levelsClosing) ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+                          e.currentTarget.style.color = (levelsOpen || levelsClosing) ? C.accent : C.muted;
                         },
-                        children: "层级"
+                        children: react_jsx_runtime.jsx("svg", {
+                          width: 14,
+                          height: 14,
+                          viewBox: "0 0 14 14",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 1.8,
+                          strokeLinecap: "round",
+                          style: { display: "block" },
+                          children: [
+                            react_jsx_runtime.jsx("line", { x1: 1.5, y1: 3, x2: 12.5, y2: 3 }),
+                            react_jsx_runtime.jsx("line", { x1: 1.5, y1: 7, x2: 9, y2: 7 }),
+                            react_jsx_runtime.jsx("line", { x1: 1.5, y1: 11, x2: 5.5, y2: 11 })
+                          ]
+                        })
                       }),
                       // magnifier button (SVG, matches the other buttons' style)
                       react_jsx_runtime.jsx("button", {
                         onClick: function () { searchOpen ? closeSearch() : openSearch(); },
-                        title: "搜索标题",
+                        title: T("search.open"),
                         style: {
                           width: 24,
                           height: 24,
@@ -1575,9 +2274,9 @@ window.__ModuleLoader__.load({
                           justifyContent: "center",
                           borderRadius: "50%",
                           cornerShape: "round",
-                          background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+                          background: searchOpen ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
                           border: "none",
-                          color: C.muted,
+                          color: searchOpen ? C.accent : C.muted,
                           cursor: "pointer"
                         },
                         onMouseEnter: function (e) {
@@ -1585,8 +2284,8 @@ window.__ModuleLoader__.load({
                           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;
+                          e.currentTarget.style.background = searchOpen ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+                          e.currentTarget.style.color = searchOpen ? C.accent : C.muted;
                         },
                         children: react_jsx_runtime.jsx("svg", {
                           width: 15,
@@ -1606,11 +2305,11 @@ window.__ModuleLoader__.load({
                         })
                       }),
                       // 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 }),
+                      iconBtn(toggleDock, dockRight ? T("handle.dockLeft") : T("handle.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: "收起",
+                        title: T("handle.collapse"),
                         style: {
                           width: 24,
                           height: 24,
@@ -1654,67 +2353,6 @@ 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
@@ -1783,23 +2421,23 @@ window.__ModuleLoader__.load({
                       color: "var(--dsw-alias-label-tertiary, rgba(128,128,128,0.7))"
                     },
                     children: [
-                      "搜索",
+                      T("search.word"),
                       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" ? "标题" : "全文"
+                            children: searchScope === "title" ? T("search.scope.title") : T("search.scope.full")
                           }),
                           (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" ? "标题" : "全文"
+                            children: prevScope === "title" ? T("search.scope.title") : T("search.scope.full")
                           }) : null
                         ]
                       }),
-                      "，回车定位…"
+                      T("search.tail")
                     ]
                   }) : null,
                 ]
@@ -1828,7 +2466,7 @@ window.__ModuleLoader__.load({
               // label text cross-fades old->new)
               react_jsx_runtime.jsx("button", {
                 onClick: toggleScope,
-                title: searchScope === "title" ? "当前：仅搜索标题。点击切换为全文搜索" : "当前：全文搜索。点击切换为仅标题",
+                title: searchScope === "title" ? T("search.scope.tipTitle") : T("search.scope.tipFull"),
                 style: {
                   flex: "none",
                   width: 34,
@@ -1840,7 +2478,7 @@ window.__ModuleLoader__.load({
                   cornerShape: "round",
                   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))",
+                  background: searchScope === "full" ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
                   border: "none",
                   cursor: "pointer",
                   whiteSpace: "nowrap",
@@ -1852,15 +2490,40 @@ window.__ModuleLoader__.load({
                     react_jsx_runtime.jsx("span", {
                       key: searchScope,
                       style: { animation: "dqt-fade-in 0.25s linear", display: "block" },
-                      children: searchScope === "title" ? "标题" : "全文"
+                      children: searchScope === "title" ? T("search.scope.title") : T("search.scope.full")
                     }),
                     (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" ? "标题" : "全文"
+                      children: prevScope === "title" ? T("search.scope.title") : T("search.scope.full")
                     }) : null
                   ]
                 })
+              }),
+              // fuzzy switch: an independent toggle beside the scope pill (its label
+              // is the same either way, so only the colour carries the state)
+              react_jsx_runtime.jsx("button", {
+                onClick: toggleFuzzy,
+                title: fuzzy ? T("search.fuzzy.tipOn") : T("search.fuzzy.tipOff"),
+                "data-fuzzy": fuzzy ? "on" : "off",
+                style: {
+                  flex: "none",
+                  width: 34,
+                  height: 34,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "50%",
+                  cornerShape: "round",
+                  fontSize: 11,
+                  color: fuzzy ? "var(--dsw-alias-brand-primary, #4f8cff)" : C.muted,
+                  background: fuzzy ? C.chip : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
+                  border: "none",
+                  cursor: "pointer",
+                  whiteSpace: "nowrap",
+                  transition: "background 0.25s ease, color 0.25s ease"
+                },
+                children: T("search.fuzzy")
               })
                 ]
               })
@@ -1887,10 +2550,32 @@ window.__ModuleLoader__.load({
             children: react_jsx_runtime.jsx("div", {
               style: { direction: "ltr" },
               children: query.trim()
-                ? renderResults(resultRows, query.trim().toLowerCase(), C, goToRow, activeResultRow)
-                : renderGroups(shownGroups, shownTrees, jump, C, Math.max(0, groups.length - visibleCount), activeGroup)
+                ? [
+                  react_jsx_runtime.jsx("div", {
+                    key: "results",
+                    children: renderResults(resultRows, query.trim(), C, goToRow, activeResultRow, renderExtra)
+                  }),
+                  // older history is one upward scroll away — say so until the
+                  // reader actually scrolls up (then the hint has done its job)
+                  hint ? react_jsx_runtime.jsx("div", {
+                    key: "hint",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: "10px 6px 4px",
+                      fontSize: 11,
+                      color: C.muted,
+                      opacity: 0.85,
+                      textAlign: "center"
+                    },
+                    children: hint === "oldest" ? T("search.hintOldest") : T("search.hintMore")
+                  }) : null
+                ]
+                : renderGroups(shownGroups, shownTrees, jump, C, Math.max(0, groups.length - visibleCount), activeGroup, renderExtra)
             })
           }),
+          toastEl,
           // resize handles (right edge: width, bottom edge: height)
           react_jsx_runtime.jsx("div", {
             style: {
@@ -1904,7 +2589,7 @@ window.__ModuleLoader__.load({
               zIndex: 2
             },
             onPointerDown: onResizeWDown,
-            title: "拖拽调整宽度"
+            title: T("resize.w")
           }),
           react_jsx_runtime.jsx("div", {
             style: {
@@ -1918,7 +2603,7 @@ window.__ModuleLoader__.load({
               zIndex: 2
             },
             onPointerDown: onResizeHDown,
-            title: "拖拽调整高度"
+            title: T("resize.h")
           }),
           // corner handle: resize width AND height at once
           react_jsx_runtime.jsx("div", {
@@ -1933,8 +2618,59 @@ window.__ModuleLoader__.load({
               zIndex: 3
             },
             onPointerDown: onResizeCornerDown,
-            title: "拖拽同时调整宽高"
-          })
+            title: T("resize.wh")
+          }),
+          // heading-level picker: pops down from the round header button,
+          // right-aligned, with an outer shadow so it reads as a floating layer.
+          // Open/close animate from the button's center: the animation lives in
+          // the injected stylesheet (classes, not inline animation) so React
+          // re-renders never restart or cancel it — an inline `animation` set on
+          // every render made the entrance invisible and the exit never play.
+          (levelsOpen || levelsClosing) ? react_jsx_runtime.jsx("div", {
+            className: "dqt-levels-pop" + (levelsClosing ? " dqt-levels-pop-closing" : ""),
+            style: {
+              position: "absolute",
+              top: 40,
+              right: 8,
+              zIndex: 30,
+              display: "flex",
+              alignItems: "center",
+              flexWrap: "wrap",
+              gap: 4,
+              padding: 8,
+              background: C.panelBg,
+              border: "1px solid " + C.panelBorder,
+              borderRadius: 10,
+              cornerShape: "round",
+              boxShadow: "0 6px 20px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.18)",
+              maxWidth: "calc(100% - 16px)",
+              transformOrigin: "calc(50% + 12px) top"
+            },
+            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 ? T("levels.hide") + lv : T("levels.show") + lv,
+                style: {
+                  height: 22,
+                  padding: "0 7px",
+                  border: "none",
+                  borderRadius: 6,
+                  cornerShape: "round",
+                  cursor: "pointer",
+                  fontSize: 11,
+                  lineHeight: "22px",
+                  fontFamily: "inherit",
+                  background: active
+                    ? C.chip
+                    : "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.14))",
+                  color: active ? C.accent : C.muted,
+                  fontWeight: active ? 600 : 400
+                },
+                children: "H" + lv
+              }, "lv" + lv);
+            })
+          }) : null
         ]
       });
 
@@ -1958,7 +2694,7 @@ window.__ModuleLoader__.load({
             ? { right: viewport ? viewport.right + 52 : 60 }   // clear of the milestone rail
             : { left: viewport ? viewport.left : 0 })
         },
-        title: "展开大纲",
+        title: T("handle.expand"),
         onClick: function () { setOpen(true); },
         onMouseEnter: function () { if (edgeRef.current) edgeRef.current.style.opacity = "1"; },
         onMouseLeave: function () { if (edgeRef.current) edgeRef.current.style.opacity = "0.5"; },
@@ -1993,29 +2729,119 @@ window.__ModuleLoader__.load({
         })
       }) : null;
 
+      // ---- hover preview card ------------------------------------------------
+      // Rendered INSIDE the body portal (position: fixed) so the outline's own
+      // scroll container can never clip it, and pointer-events: none so it can
+      // never steal the hover that opened it.
+      var hoverEl = null;
+      if (hoverCard && open) {
+        var cardW = 264;
+        var cardTop = Math.max(8, Math.min(hoverCard.top - 4, window.innerHeight - 210));
+        var cardLeft = dockRight
+          ? Math.max(8, hoverCard.left - cardW - 10)
+          : Math.min(window.innerWidth - cardW - 8, hoverCard.right + 10);
+        var cardBody = hoverCard.preview || hoverCard.sub || "";
+        var cardChildren = [
+          react_jsx_runtime.jsx("div", {
+            style: { fontSize: 12, fontWeight: 600, color: C.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+            children: hoverCard.title
+          }, "hc-t")
+        ];
+        if (hoverCard.meta) {
+          cardChildren.push(react_jsx_runtime.jsx("div", {
+            style: { fontSize: 10, color: C.muted, opacity: 0.8, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+            children: hoverCard.meta
+          }, "hc-m"));
+        }
+        cardChildren.push(react_jsx_runtime.jsx("div", {
+          style: { fontSize: 11, lineHeight: "16px", color: C.text, opacity: 0.9, marginTop: 4, maxHeight: 116, overflow: "hidden" },
+          children: cardBody || (hoverCard.ghost ? T("turn.loadTip") : "")
+        }, "hc-b"));
+        if (hoverCard.ghost) {
+          cardChildren.push(react_jsx_runtime.jsx("div", {
+            style: { fontSize: 10, color: C.muted, opacity: 0.7, marginTop: 4 },
+            children: T("preview.truncated")
+          }, "hc-n"));
+        }
+        hoverEl = react_jsx_runtime.jsx("div", {
+          className: "dqt-hover" + (hoverClosing ? " dqt-hover-closing" : ""),
+          style: {
+            position: "fixed",
+            top: cardTop,
+            left: cardLeft,
+            width: cardW,
+            padding: "8px 10px",
+            borderRadius: 8,
+            cornerShape: "round",
+            background: C.panelBg,
+            color: C.text,
+            border: "1px solid " + C.panelBorder,
+            boxShadow: "0 8px 24px rgba(0,0,0,0.28)",
+            zIndex: Z_BASE + 1,
+            pointerEvents: "none"
+          },
+          children: cardChildren
+        }, "hover-card");
+      }
+
       return react_dom.createPortal(
-        react_jsx_runtime.jsx(ErrorBoundary, { children: [panelEl, edgeEl] }),
+        react_jsx_runtime.jsx(ErrorBoundary, { children: [panelEl, edgeEl, hoverEl] }),
         document.body
       );
     }
 
-    function renderItem(n, depth, jump, C, uid) {
+    function renderItem(n, depth, jump, C, uid, extra) {
       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"));
+      var path = extra && extra.paths ? extra.paths[headingId(n)] : null;
+      var hoverInfo = {
+        title: n.title,
+        sub: n.sub || "",
+        preview: n.preview || "",
+        meta: [n.time, path ? path.path : ""].filter(Boolean).join("  ·  "),
+        ghost: false
+      };
+      var rows = [
+        react_jsx_runtime.jsx("div", {
+          style: { display: "flex", alignItems: "center", gap: 2, minWidth: 0 },
+          children: react_jsx_runtime.jsx("span", {
+            style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" },
+            children: n.title
+          })
+        }, uid + "-l")
+      ];
+      // Subtitle = the section's first sentence. This is what makes two headings
+      // with the SAME text distinguishable without hovering ("which one is this?").
+      if (n.sub) {
+        rows.push(react_jsx_runtime.jsx("div", {
+          style: {
+            fontSize: 10,
+            lineHeight: "13px",
+            color: C.muted,
+            opacity: 0.75,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          children: n.sub
+        }, uid + "-s"));
+      }
       return react_jsx_runtime.jsx(
         "div",
         {
           onClick: function () { jump(n.key, n.idx); },
+          onMouseEnter: function (e) {
+            e.currentTarget.style.background = C.hover;
+            if (extra && extra.hoverStart) extra.hoverStart(hoverInfo, e.currentTarget);
+          },
+          onMouseLeave: function (e) {
+            e.currentTarget.style.background = "transparent";
+            if (extra && extra.hoverEnd) extra.hoverEnd();
+          },
           "data-jump-key": n.key,
           "data-jump-idx": n.idx !== undefined ? String(n.idx) : "0",
           style: {
-            display: "flex",
-            alignItems: "center",
-            gap: 2,
+            // no fixed height: a row grows by one line when it has a subtitle
+            display: "block",
             padding: "2px 6px",
             paddingLeft: (hasChildren ? 2 : 6) + (n.level - 1) * 12,
             margin: "1px 0",
@@ -2025,26 +2851,23 @@ window.__ModuleLoader__.load({
             color: n.level <= 2 ? C.text : C.muted,
             fontWeight: n.level <= 2 ? 600 : 400,
             lineHeight: "18px",
-            height: 22,
             whiteSpace: "nowrap",
             overflow: "hidden"
           },
-          onMouseEnter: function (e) { e.currentTarget.style.background = C.hover; },
-          onMouseLeave: function (e) { e.currentTarget.style.background = "transparent"; },
           title: n.title,
-          children: parts
+          children: rows
         },
         uid + "-" + n.level + "-" + (n.key || "")
       );
     }
 
-    function renderNodes(nodes, depth, jump, C, uid) {
+    function renderNodes(nodes, depth, jump, C, uid, extra) {
       var out = [];
       for (var i = 0; i < nodes.length; i++) {
         var n = nodes[i];
-        out.push(renderItem(n, depth, jump, C, uid + "-" + i));
+        out.push(renderItem(n, depth, jump, C, uid + "-" + i, extra));
         if (n.children && n.children.length) {
-          out.push(react_jsx_runtime.jsx("div", { children: renderNodes(n.children, depth + 1, jump, C, uid + "-" + i) }, uid + "-c-" + i));
+          out.push(react_jsx_runtime.jsx("div", { children: renderNodes(n.children, depth + 1, jump, C, uid + "-" + i, extra) }, uid + "-c-" + i));
         }
       }
       return out;
@@ -2054,8 +2877,8 @@ window.__ModuleLoader__.load({
     // 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);
+    function hitSpans(text, q, fuzzy) {
+      var parts = highlightParts(text, q, fuzzy);
       return parts.map(function (p, i) {
         return p.hit
           ? react_jsx_runtime.jsx("span", {
@@ -2066,8 +2889,10 @@ window.__ModuleLoader__.load({
       });
     }
 
-    function renderResultRow(r, i, q, C, onRow, isActive) {
+    function renderResultRow(r, i, q, C, onRow, isActive, extra) {
+      var fuzzy = !!(extra && extra.fuzzy);
       var meta = [];
+      if (r.ghost) meta.push(T("turn.unloaded"));
       if (r.time) meta.push(r.time);
       if (r.path) meta.push(r.path);
       if (r.count > 1) meta.push("×" + r.count);
@@ -2081,7 +2906,7 @@ window.__ModuleLoader__.load({
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: hitSpans(r.title, q)
+          children: hitSpans(r.title, q, fuzzy)
         }, "t" + i)
       ];
       if (r.snippet) {
@@ -2094,7 +2919,7 @@ window.__ModuleLoader__.load({
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
-          children: hitSpans(r.snippet, q)
+          children: hitSpans(r.snippet, q, fuzzy)
         }, "s" + i));
       }
       if (meta.length) {
@@ -2108,9 +2933,23 @@ window.__ModuleLoader__.load({
         // 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); },
+        onMouseEnter: function (e) {
+          e.currentTarget.style.background = C.hover;
+          if (extra && extra.hoverStart) {
+            extra.hoverStart({
+              title: r.title,
+              sub: r.snippet || "",
+              preview: r.snippet || "",
+              meta: meta.join("  ·  "),
+              ghost: !!r.ghost
+            }, e.currentTarget);
+          }
+        },
+        onMouseLeave: function (e) {
+          e.currentTarget.style.background = isActive ? C.chip : "transparent";
+          if (extra && extra.hoverEnd) extra.hoverEnd();
+        },
         "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",
@@ -2118,23 +2957,23 @@ window.__ModuleLoader__.load({
           borderRadius: 6,
           cursor: "pointer",
           minWidth: 0,
-          background: isActive ? "rgba(79,140,255,0.16)" : "transparent",
+          background: isActive ? C.chip : "transparent",
           transition: "background 0.15s ease"
         },
         children: children
       }, "res-" + i);
     }
 
-    function renderResults(rows, q, C, onRow, activeRow) {
+    function renderResults(rows, q, C, onRow, activeRow, extra) {
       if (!rows || rows.length === 0) {
         return react_jsx_runtime.jsx("div", {
           style: { padding: "12px 8px", fontSize: 12, color: C.muted, textAlign: "center" },
-          children: "没有匹配"
-        });
+          children: T("search.empty")
+        }, "empty");
       }
       var out = [];
       for (var i = 0; i < rows.length; i++) {
-        out.push(renderResultRow(rows[i], i, q, C, onRow, i === activeRow));
+        out.push(renderResultRow(rows[i], i, q, C, onRow, i === activeRow, extra));
       }
       return out;
     }
@@ -2145,9 +2984,8 @@ window.__ModuleLoader__.load({
     // 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) {
+    function renderGroupHeader(g, gi, jump, C, isActive, headingless) {
       var replyKey = (g.msgs && g.msgs.length > 0) ? g.msgs[0].key : "";
-      var targetKey = replyKey || g.userKey;
       var jumpToTurn = function (e) {
         e.stopPropagation();
         // prefer the model's reply; fall back to the user message, then to the
@@ -2158,30 +2996,52 @@ window.__ModuleLoader__.load({
       };
       return react_jsx_runtime.jsx("div", {
         style: {
-          padding: "1px 4px 2px",
-          height: 18,
+          padding: headingless ? "3px 4px" : "1px 4px 2px",
+          height: headingless ? undefined : 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).
+          // inside stays pinned at the top. It must be opaque to cover the rows
+          // scrolling underneath, so its base colour is the panel background in both
+          // states — the "current group" tint rides on its own layer inside, which
+          // can FADE (a background-image gradient cannot be transitioned).
           position: "sticky",
           top: 0,
           zIndex: 2,
           background: C.panelBg
         },
-        children: react_jsx_runtime.jsx("span", {
+        children: [
+          react_jsx_runtime.jsx("div", {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: 0,
+              bottom: 0,
+              background: C.groupTint,
+              opacity: isActive ? 1 : 0,
+              transition: "opacity 0.18s ease",
+              pointerEvents: "none"
+            }
+          }, "g-h-tint-" + gi),
+          react_jsx_runtime.jsx("span", {
           onClick: jumpToTurn,
-          title: replyKey ? "跳转到该回合的模型回答开头" : "跳转到该回合开头",
+          title: replyKey ? T("turn.jumpReply") : T("turn.jumpTurn"),
           onMouseEnter: function (e) { e.currentTarget.style.background = C.hover; },
           onMouseLeave: function (e) { e.currentTarget.style.background = "transparent"; },
           style: {
-            fontSize: 11,
-            color: C.muted,
+            // A turn with no headings has ONLY this row, so it carries the whole
+            // entry: readable size, weight and colour. No extra pill background —
+            // the "current group" tint belongs to the group, so headed and
+            // heading-less turns look the same when they are being read.
+            fontSize: headingless ? 12 : 11,
+            fontWeight: headingless ? 600 : 400,
+            color: headingless ? C.text : C.muted,
             cursor: "pointer",
-            padding: "1px 5px",
+            padding: headingless ? "2px 6px" : "1px 5px",
             borderRadius: 4,
+            background: "transparent",
             transition: "background 0.15s ease",
             display: "inline-flex",
             alignItems: "center",
@@ -2193,18 +3053,81 @@ window.__ModuleLoader__.load({
           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 },
+              style: {
+                fontWeight: headingless ? 500 : 400,
+                opacity: headingless ? 0.95 : 0.75,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+                minWidth: 0
+              },
               children: g.userText
             }) : null
           ]
         })
+        ]
       }, "g-h-" + gi);
     }
 
+    // A turn the paged event window has not loaded yet: the host outline still
+    // names it (number + bounded previews), so the outline covers the whole
+    // session. Clicking pages that turn in through the session's jump loader.
+    function renderGhostGroup(g, gi, C, extra) {
+      extra = extra || {};
+      var children = [
+        react_jsx_runtime.jsx("div", {
+          style: { display: "flex", alignItems: "center", gap: 5, minWidth: 0 },
+          children: [
+            react_jsx_runtime.jsx("span", {
+              style: { fontSize: 10, fontWeight: 600, flex: "none", color: C.muted, opacity: 0.8, border: "1px solid " + C.panelBorder, borderRadius: 4, padding: "0 4px" },
+              children: T("turn.unloaded")
+            }),
+            react_jsx_runtime.jsx("span", {
+              style: { fontSize: 11, color: C.muted, fontWeight: 400, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 },
+              children: g.userText || "#" + g.turn
+            })
+          ]
+        })
+      ];
+      if (g.preview) {
+        children.push(react_jsx_runtime.jsx("div", {
+          style: { fontSize: 10, lineHeight: "13px", color: C.muted, opacity: 0.65, marginTop: 1, overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" },
+          children: g.preview
+        }));
+      }
+      return react_jsx_runtime.jsx("div", {
+        onClick: function () { extra.onOpenTurn(g.turn, g.seq); },
+        onMouseEnter: function (e) {
+          e.currentTarget.style.background = C.hover;
+          e.currentTarget.style.opacity = "1";
+          extra.hoverStart({ title: g.userText || "#" + g.turn, sub: "", preview: g.preview || "", meta: T("turn.unloaded"), ghost: true }, e.currentTarget);
+        },
+        onMouseLeave: function (e) {
+          e.currentTarget.style.background = "transparent";
+          e.currentTarget.style.opacity = "0.85";
+          extra.hoverEnd();
+        },
+        "data-group-idx": gi,
+        "data-ghost-turn": g.turn,
+        title: T("turn.loadTip"),
+        style: {
+          padding: "3px 6px",
+          margin: "1px 0",
+          borderRadius: 6,
+          cursor: "pointer",
+          minWidth: 0,
+          opacity: 0.85,
+          transition: "background 0.15s ease, opacity 0.15s ease"
+        },
+        children: children
+      }, "g-ghost-" + 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
-    function renderGroups(groups, trees, jump, C, offset, activeIdx) {
+    function renderGroups(groups, trees, jump, C, offset, activeIdx, extra) {
+      extra = extra || {};
       var base = offset || 0;
       var activeSet = {};
       if (Array.isArray(activeIdx)) {
@@ -2214,24 +3137,55 @@ window.__ModuleLoader__.load({
       for (var i = 0; i < groups.length; i++) {
         var g = groups[i];
         var gi = base + i;
-        var items = [];
-        items.push(react_jsx_runtime.jsx("div", {
+        var isActive = !!activeSet[gi];
+        var rows = g.ghost ? [] : trees[i];
+        // The divider between two groups stays OUTSIDE the highlight box: inside it
+        // would draw a rule straight across the tinted block.
+        out.push(react_jsx_runtime.jsx("div", {
           style: { borderTop: "1px solid " + C.panelBorder, margin: "7px 2px 3px", height: 0 }
         }, "g-sep-" + gi));
-        items.push(renderGroupHeader(g, gi, jump, C));
-        items.push(renderNodes(trees[i], 0, jump, C, "g" + gi));
-        var dim = !activeSet[gi];
+        var items = [];
+        if (g.ghost) {
+          items.push(renderGhostGroup(g, gi, C, extra));
+        } else {
+          items.push(renderGroupHeader(g, gi, jump, C, isActive, !rows || rows.length === 0));
+          items.push(renderNodes(rows, 0, jump, C, "g" + gi, extra));
+        }
+        // Inactive groups used to fade to 0.6, which — multiplied by the panel's own
+        // idle opacity — turned the whole list into grey. 0.85 keeps every row
+        // readable, and "the group being read" is marked by a CLOSED tinted box
+        // (fill + outline + accent bar) instead, which stays visible on top of any
+        // panel transparency and no longer looks cut off on the right.
+        var dim = !isActive && !g.ghost;
         out.push(react_jsx_runtime.jsx("div", {
           "data-group-idx": gi,
-          style: { opacity: dim ? 0.6 : 1, transition: "opacity 0.3s ease" },
+          "data-active-group": isActive ? "on" : "off",
+          style: {
+            opacity: dim ? 0.85 : 1,
+            // the box fades in AND out: colour transitions only, and the left accent
+            // keeps its 3px width in both states so activating a group never reflows
+            // (a width change would shift every row by 2px)
+            transition: "opacity 0.15s ease, background-color 0.18s ease, border-color 0.18s ease",
+            backgroundColor: isActive ? C.groupTint : "transparent",
+            borderTop: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
+            borderRight: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
+            borderBottom: "1px solid " + (isActive ? C.groupEdgeSoft : "transparent"),
+            borderLeft: "3px solid " + (isActive ? C.groupEdge : "transparent"),
+            borderRadius: 6,
+            margin: "2px -5px",
+            paddingLeft: 2
+          },
           children: items
         }, "g-" + gi));
       }
       return out;
     }
 
+    // Host-facing locale namespace: the slot declares `locale: "dsh-quick-toc"`,
+    // which is what hands the panel its `t` prop. The panel's own visible strings
+    // live in DICTS and are kept in sync with this table.
     var zh = {
-      "panel.title": "对话大纲"
+      "panel.title": DICTS.zh["panel.title"]
     };
     var en = {
       "panel.title": "Conversation Outline"
@@ -2243,6 +3197,29 @@ window.__ModuleLoader__.load({
       ctx.effect(function () {
         return ctx.locale.register("dsh-quick-toc", { zh: zh, en: en });
       }, "dsh-quick-toc: dictionaries");
+
+      // Bridge to the host session face, used to open a turn whose events the
+      // paged window has not loaded: ctx.sessions.binding(id).session.loadThrough(seq)
+      // is the host's documented "page history backwards until the window covers
+      // seq" jump loader.
+      //
+      // The client plugin facade offers two ways in: a direct `ctx.sessions`
+      // property read (which demands `inject: ["sessions"]` on the returned plugin
+      // object, and the runtime then PARKS the whole package whenever that provider
+      // is absent) and `ctx.get(name)`, the declaration-free lookup. This uses the
+      // lookup — deliberately optional, so a host without the session controller
+      // still gets a working outline, and callers report the missing loader
+      // instead of the panel disappearing.
+      var host = {
+        sessions: function () {
+          try {
+            return typeof ctx.get === "function" ? (ctx.get("sessions") || null) : null;
+          } catch (e) {
+            return null;
+          }
+        }
+      };
+
       // 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
@@ -2254,7 +3231,10 @@ window.__ModuleLoader__.load({
           id: "quick-toc",
           order: 90,
           locale: "dsh-quick-toc"
-        }, OutlinePanel);
+        }, function OutlinePanelWithHost(props) {
+          // the panel needs the host bridge plus the session id it was registered for
+          return OutlinePanel(Object.assign({}, props, { tocHost: host }));
+        });
       });
     }
 
@@ -2269,6 +3249,21 @@ window.__ModuleLoader__.load({
       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}}" +
+        "@keyframes dqt-pop-in{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:scale(1)}}@keyframes dqt-pop-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.7)}}" +
+        // the level picker's enter/exit animations live here as classes so React
+        // re-renders (which rewrite inline styles) cannot restart or cancel them
+        ".dqt-levels-pop{animation:dqt-pop-in 0.22s cubic-bezier(0.22, 0.9, 0.3, 1) both;will-change:transform,opacity}" +
+        // hover preview card: fades in place, and fades OUT when the pointer
+        // leaves (both as stylesheet classes so re-renders cannot cancel them)
+        ".dqt-hover{animation:dqt-fade-in 0.12s linear both}" +
+        ".dqt-hover-closing{animation:dqt-fade-out 0.16s cubic-bezier(0.2, 0.9, 0.3, 1) both}" +
+        // transient edge banner over the bottom of the outline list
+        "@keyframes dqt-toast-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}" +
+        "@keyframes dqt-toast-out{from{opacity:1;transform:none}to{opacity:0;transform:none}}" +
+        ".dqt-toast{animation:dqt-toast-in 0.2s cubic-bezier(0.22, 0.9, 0.3, 1) both}" +
+        ".dqt-toast-closing{animation:dqt-toast-out 0.42s linear both}" +
+        // exit: starts moving immediately (fast attack), so the dismiss feels snappy
+        ".dqt-levels-pop-closing{animation:dqt-pop-out 0.14s cubic-bezier(0.2, 0.9, 0.3, 1) both;will-change:transform,opacity}" +
         // Hide the native scrollbar entirely (no arrow buttons, no grey bar) —
         // custom webkit scrollbar styling was not reliably suppressing the
         // default arrows, so a hidden native bar + the panel's inner shadow gives