dsh-quick-toc 0.10.3 → 0.10.4

package/CHANGELOG.en.md

@@ -2,6 +2,23 @@
 
 All notable changes to **dsh-quick-toc** are documented here. Chinese version: [CHANGELOG.md](CHANGELOG.md).
 
+## [0.10.4] - 2026-11-04
+
+### Added
+- **Choice of views**: a new "Views" setting switches between panel + curtain, panel only and curtain only; with "curtain only" the docked panel is no longer built.
+- **Position indicator**: a column of ticks and a slider on the right of the outline shows how far into the conversation you are; the style is either a bar or a soft band, and clicking a tick jumps to that section.
+
+### Changed
+- **The declared host range now starts at 0.2.1-rc.2**: earlier prereleases are no longer listed as supported.
+- **In the curtain the outline and the position indicator travel as one column**: the column is centred and moves with the search and bookmark sidebars, so the indicator stays beside the outline.
+- **The "auto-load history" setting is gone**: history loads one page each time you reach the top, with no switch.
+- **Reaching the top loads one page per arrival**: the wheel and the slider follow the same rule, matching the host's own "load earlier".
+
+### Fixed
+- **Translucency stayed off for good on a slow device**: after it has been switched off automatically, turning the switch back on now takes effect.
+- **Dragging the slider to the top left it stuck there**: it can be dragged back down again.
+- **Unloaded rows appeared while scrolling up**: a page no longer leaves placeholder rows behind.
+
 ## [0.10.3] - 2026-10-28
 
 ### Changed

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 **dsh-quick-toc** 的重要变更都记录在这里。英文版见 [CHANGELOG.en.md](CHANGELOG.en.md)。
 
+## [0.10.4] - 2026-11-04
+
+### 新增
+- **视图选择**：设置里新增「视图」，可选「面板 + 幕布」「仅面板」「仅幕布」；选「仅幕布」时不再构建停靠面板。
+- **位置指示**：大纲右侧新增一列刻度与滑块，显示读到会话的哪个位置；样式可选「竖条」或「淡框」，点击刻度可跳到该节。
+
+### 变更
+- **兼容范围收窄到 0.2.1-rc.2 及以上**：更早的预发布版本不再声明为兼容。
+- **幕布里的大纲与位置指示成为一列**：整列居中，打开搜索或书签侧栏时一起移动，位置指示始终贴着大纲。
+- **「自动加载历史」设置已移除**：历史改为每次到达顶部时加载一页，不再有开关。
+- **到达顶部时一次只加载一页**：滚轮和拖动滑块同样按页加载，与宿主的「加载更早」一致。
+
+### 修复
+- **设备较慢时半透明被永久关闭**：自动关闭后，手动重新打开开关不再被此前记下的结果挡住。
+- **把滑块拖到顶部后无法再向下拖**：现在可以正常拖回。
+- **向上滚动时出现未加载的条目**：加载一页之后不再出现只占位的条目。
+
 ## [0.10.3] - 2026-10-28
 
 ### 变更

package/README.en.md

@@ -4,6 +4,16 @@
 
 A conversation TOC plugin for [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) (DSH): it turns the Markdown headings (H1–H6) of AI replies into a navigable outline — the same list as a side panel or as a full-width curtain — grouped by conversation turn and covering the whole session (including turns that are not loaded yet), with title/prompts/full-text/cross-session search, hover previews, a right-click menu for jumping and copying, bookmarks with a bookmarks-only view, six theme colours and a translucent material, and a reading position that both follows and is remembered.
 
+## Screenshots
+
+![The side panel with a hover preview](https://raw.githubusercontent.com/LyaxZ/dsh-quick-toc/main/assets/preview.png)
+
+| The curtain (full-width view) | Its bookmarks drawer |
+| --- | --- |
+| ![The curtain](https://raw.githubusercontent.com/LyaxZ/dsh-quick-toc/main/assets/curtain.png) | ![The bookmarks drawer](https://raw.githubusercontent.com/LyaxZ/dsh-quick-toc/main/assets/bookmarks.png) |
+
+> Captured from an isolated instance against a demo conversation.
+
 ## Features
 
 - **Turn-grouped outline** — each user message plus its following AI replies form one group; the group header shows the turn's time and a first-line preview, and clicking it jumps to the start of that turn's model reply
@@ -44,7 +54,7 @@ A conversation TOC plugin for [DeepSeek Harness](https://github.com/deepseek-ai/
 
 | Plugin | Supported DSH |
 | --- | --- |
-| **0.10.x** (latest, 0.10.3) | 0.1.5-rc.3, 0.1.7-alpha.1, 0.1.7-alpha.2, 0.1.7-rc.1, 0.1.7-rc.2, 0.2.0-rc.1, 0.2.0-rc.2, 0.2.1-alpha.1, 0.2.1-alpha.2, 0.2.1-alpha.3, 0.2.1-alpha.4, 0.2.1-alpha.5, 0.2.1-rc.1, 0.2.1-rc.2, 0.2.1-rc.3, 0.2.1-rc.4, 0.2.2-alpha.2 |
+| **0.10.x** (latest, 0.10.4) | 0.2.1-rc.2, 0.2.1-rc.3, 0.2.1-rc.4, 0.2.1-rc.5, 0.2.2-alpha.2 |
 | **0.9.x** (0.9.5) | 0.1.5-rc.3, 0.1.7-alpha.1, 0.1.7-alpha.2, 0.1.7-rc.1, 0.1.7-rc.2, 0.2.0-rc.1, 0.2.0-rc.2, 0.2.1-alpha.1, 0.2.1-alpha.2, 0.2.1-alpha.3, 0.2.1-alpha.4, 0.2.1-alpha.5 |
 | 0.8.x (0.8.2) | 0.1.5-rc.3, 0.1.7-alpha.1, 0.1.7-alpha.2, 0.1.7-rc.1, 0.1.7-rc.2, 0.2.0-rc.1, 0.2.0-rc.2 |
 | 0.7.x (0.7.14) | 0.1.5-rc.3, 0.1.7-alpha.1, 0.1.7-alpha.2, 0.1.7-rc.1, 0.1.7-rc.2, 0.2.0-rc.1, 0.2.0-rc.2 |
@@ -56,6 +66,8 @@ A conversation TOC plugin for [DeepSeek Harness](https://github.com/deepseek-ai/
 
 Each major line lists only its newest patch (the defects a new feature introduces are fixed in the patches that follow, so within one major line the newest patch is the one to use; older patches keep working — the plugin does not break existing interfaces).
 
+From 0.10.4 the declared floor is 0.2.1-rc.2: earlier pre-releases are no longer supported — they can no longer open a session written by the current line, so the plugin's behaviour there cannot be verified.
+
 ## Install
 
 With the DSH CLI:

package/README.md

@@ -4,6 +4,16 @@
 
 **DeepSeek Harness（DSH）对话大纲插件**：把 AI 回复中的 Markdown 标题（H1–H6）提取成可导航的大纲——侧边面板与全屏幕布两种视图，按对话回合分组、覆盖整段会话（含尚未加载进窗口的回合）。支持标题/提问/全文/跨会话四档检索、悬停预览、右键跳转与复制、书签与「只看书签」视图，六种主题色与半透明材质，阅读位置自动跟随并可记住。
 
+## 效果
+
+![侧边面板与悬停预览](https://raw.githubusercontent.com/LyaxZ/dsh-quick-toc/main/assets/preview.png)
+
+| 幕布（全宽视图） | 幕布右侧的书签栏 |
+| --- | --- |
+| ![幕布](https://raw.githubusercontent.com/LyaxZ/dsh-quick-toc/main/assets/curtain.png) | ![书签栏](https://raw.githubusercontent.com/LyaxZ/dsh-quick-toc/main/assets/bookmarks.png) |
+
+> 截图取自隔离环境里的实例，会话内容是用作演示的示例文案。
+
 ## 功能
 
 - **按回合分组** —— 每条用户消息 + 其后续 AI 回复为一组，组头显示回合时间与首行预览，点击跳到该回合模型回答的开头
@@ -44,7 +54,7 @@
 
 | 插件版本 | 支持的 DSH 版本 |
 | --- | --- |
-| **0.10.x**（最新，0.10.3） | 0.1.5-rc.3、0.1.7-alpha.1、0.1.7-alpha.2、0.1.7-rc.1、0.1.7-rc.2、0.2.0-rc.1、0.2.0-rc.2、0.2.1-alpha.1、0.2.1-alpha.2、0.2.1-alpha.3、0.2.1-alpha.4、0.2.1-alpha.5、0.2.1-rc.1、0.2.1-rc.2、0.2.1-rc.3、0.2.1-rc.4、0.2.2-alpha.2 |
+| **0.10.x**（最新，0.10.4） | 0.2.1-rc.2、0.2.1-rc.3、0.2.1-rc.4、0.2.1-rc.5、0.2.2-alpha.2 |
 | **0.9.x**（0.9.5） | 0.1.5-rc.3、0.1.7-alpha.1、0.1.7-alpha.2、0.1.7-rc.1、0.1.7-rc.2、0.2.0-rc.1、0.2.0-rc.2、0.2.1-alpha.1、0.2.1-alpha.2、0.2.1-alpha.3、0.2.1-alpha.4、0.2.1-alpha.5 |
 | 0.8.x（0.8.2） | 0.1.5-rc.3、0.1.7-alpha.1、0.1.7-alpha.2、0.1.7-rc.1、0.1.7-rc.2、0.2.0-rc.1、0.2.0-rc.2 |
 | 0.7.x（0.7.14） | 0.1.5-rc.3、0.1.7-alpha.1、0.1.7-alpha.2、0.1.7-rc.1、0.1.7-rc.2、0.2.0-rc.1、0.2.0-rc.2 |
@@ -56,6 +66,8 @@
 
 每个大版本只列该系列最新的一个补丁版本（新功能引入的缺陷都在其后的补丁里修掉了，所以同一个大版本内直接用最新补丁即可；旧补丁仍可继续用，插件不破坏既有接口）。
 
+0.10.4 起只声明 0.2.1-rc.2 及以上：更早的预发布版本不再支持，它们已无法打开当前版本写下的会话，插件在那里的行为无从验证。
+
 ## 安装
 
 通过 DSH CLI 安装：

package/icon.svg

@@ -1,10 +1,10 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="2.5" y="2.5" width="31" height="31" rx="9" fill="url(#tocbg)" />
-  <rect x="6" y="14.5" width="24" height="7" rx="3.5" fill="#ffffff" fill-opacity="0.22" />
-  <rect x="6" y="14.5" width="3" height="7" rx="1.5" fill="#1D4ED8" />
-  <rect x="11" y="10.5" width="15" height="3.2" rx="1.6" fill="#FF7AB8" />
+  <rect x="6" y="14" width="24" height="8" rx="4" fill="#ffffff" fill-opacity="0.22" />
+  <rect x="6" y="14" width="3" height="8" rx="1.5" fill="#1D4ED8" />
+  <rect x="11" y="8.7" width="15" height="3.2" rx="1.6" fill="#FF7AB8" />
   <rect x="11" y="16.4" width="11.5" height="3.2" rx="1.6" fill="#FFB020" />
-  <rect x="11" y="22.3" width="7.5" height="3.2" rx="1.6" fill="#2DD4BF" />
+  <rect x="11" y="24.1" width="7.5" height="3.2" rx="1.6" fill="#2DD4BF" />
   <defs>
     <linearGradient id="tocbg" x1="2.5" y1="2.5" x2="33.5" y2="33.5" gradientUnits="userSpaceOnUse">
       <stop stop-color="#6EA5FF" />

package/lib/client.js

@@ -202,6 +202,13 @@ window.__ModuleLoader__.load({
         "settings.dock": "默认停靠边缘",
         "settings.dock.left": "左侧",
         "settings.dock.right": "右侧",
+        "settings.surface": "视图",
+        "settings.surface.both": "面板 + 幕布",
+        "settings.surface.panel": "仅面板",
+        "settings.surface.curtain": "仅幕布",
+        "settings.scrollbar": "位置指示",
+        "settings.scrollbar.bar": "竖条",
+        "settings.scrollbar.band": "淡框",
         "settings.levels": "显示的标题层级",
         "settings.density": "大纲密度",
         "settings.density.comfy": "标准",
@@ -230,7 +237,6 @@ window.__ModuleLoader__.load({
         "settings.fuzzy": "模糊搜索",
         "settings.hover": "悬停预览卡片",
         "settings.remember": "记住阅读位置",
-        "settings.autoLoad": "自动加载历史",
         "settings.debug": "在控制台打印诊断日志",
         "settings.debug.tip": "开启后控制台会打印一行挂载诊断（宿主能力与跳转加载器状态）",
         "settings.overridden": "已自定义",
@@ -334,6 +340,13 @@ window.__ModuleLoader__.load({
         "settings.dock": "Default docked edge",
         "settings.dock.left": "Left",
         "settings.dock.right": "Right",
+        "settings.surface": "Views",
+        "settings.surface.both": "Panel + curtain",
+        "settings.surface.panel": "Panel only",
+        "settings.surface.curtain": "Curtain only",
+        "settings.scrollbar": "Position marker",
+        "settings.scrollbar.bar": "Bar",
+        "settings.scrollbar.band": "Band",
         "settings.levels": "Heading levels shown",
         "settings.density": "Outline density",
         "settings.density.comfy": "Comfy",
@@ -362,7 +375,6 @@ window.__ModuleLoader__.load({
         "settings.fuzzy": "Fuzzy search",
         "settings.hover": "Hover preview card",
         "settings.remember": "Remember the reading position",
-        "settings.autoLoad": "Load history automatically",
         "settings.debug": "Print the mount diagnostic to the console",
         "settings.debug.tip": "The console then prints one mount line (host capabilities and jump-loader state)",
         "settings.overridden": "Customized",
@@ -435,11 +447,11 @@ window.__ModuleLoader__.load({
     // purpose — they describe THIS screen, not the account.
     var NAMESPACE = "dsh-quick-toc";
     // Fields backed by the Host settings document; everything else is localStorage.
-    var HOST_FIELDS = { dock: 1, lang: 1, levels: 1, density: 1, accent: 1, glass: 1, glassStrength: 1, sheetHeight: 1, zoom: 1, sheetZoom: 1, handle: 1, fuzzy: 1, hover: 1, debug: 1, remember: 1, autoLoad: 1 };
+    var HOST_FIELDS = { dock: 1, surface: 1, scrollbar: 1, lang: 1, levels: 1, density: 1, accent: 1, glass: 1, glassStrength: 1, sheetHeight: 1, zoom: 1, sheetZoom: 1, handle: 1, fuzzy: 1, hover: 1, debug: 1, remember: 1, autoLoad: 1 };
     // The schema defaults (mirrored here for the card's per-field reset and for the
     // one-time import of a 0.5.x install's stored values).
     var DEFAULTS = {
-      dock: "left", y: 0, w: 0, h: 0,
+      dock: "left", surface: "both", scrollbar: "bar", y: 0, w: 0, h: 0,
       // "share" of see-through: 0 = nearly solid, 100 = the lightest material
       levels: [1, 2, 3, 4, 5, 6], density: "comfy", accent: "blue",
       glass: true, glassStrength: 60, sheetHeight: 1,
@@ -558,10 +570,24 @@ window.__ModuleLoader__.load({
     // colour, and the blur strings become undefined rather than empty.
     // A device that cannot hold the frame rate loses the blur by itself. The
     // verdict is remembered, so a slow machine pays for the probe once.
-    var AUTO_OFF_KEY = "dsh-quick-toc.glassAutoOff.v1";
+    //
+    // v2: the v1 key was decided while the curtain's 0.5s ENTRANCE was being sampled,
+    // and the entrance composites the blurred sheet every frame by design. Measured in
+    // a sandbox profile with a clean store: the v1 verdict appeared after a curtain
+    // opening and never went away, which silently removed the blur from BOTH surfaces
+    // for good (the palette is shared). The material is now judged on the settled
+    // surface (see the probe), and the switch is a real way back (see the card):
+    // turning it on clears an automatic verdict. A new key lets a browser that already
+    // carries the old one start clean.
+    var AUTO_OFF_KEY = "dsh-quick-toc.glassAutoOff.v2";
     var autoGlassOff = (function () {
       try { return localStorage.getItem(AUTO_OFF_KEY) === "1"; } catch (e) { return false; }
     })();
+    // The reader asking for the material again outranks a measurement made for them.
+    var clearAutoGlassOff = function () {
+      autoGlassOff = false;
+      try { localStorage.removeItem(AUTO_OFF_KEY); } catch (e) {}
+    };
     var glassC = function (base, prefs) {
       var on = !!(prefs && prefs.glass) && !autoGlassOff && GLASS_OK;
       var s = prefs && prefs.glassStrength !== undefined ? prefs.glassStrength : 60;
@@ -587,6 +613,37 @@ window.__ModuleLoader__.load({
       out.sheetBlur = on ? "blur(5px) saturate(1.1)" : undefined;
       return out;
     };
+    // The ruler is a TAPE: every heading gets a slot at least `minGap` apart, and when
+    // the slots no longer fit the track the tape is TALLER than its window and slides
+    // with the scroll. This is the behaviour the reader asked for over a static map:
+    // the bars have to move as the outline scrolls, and a dense stretch has to look
+    // dense. A slot therefore does NOT claim the row's place in the content any more —
+    // the highlight is the slice of the tape the viewport mark covers, so the bars that
+    // light up always sit inside the mark and travel through it as the list scrolls.
+    //   count  headings on the tape;  track  usable lane height
+    //   scrollTop/view/total  the outline's viewport and content
+    function rulerLayout(count, total, track, scrollTop, view, minGap) {
+      var gap = count > 1 ? Math.max(minGap, track / (count - 1)) : 0;
+      var tapeH = Math.max(track, Math.round((count - 1) * gap) + 10);
+      var shift = Math.max(0, tapeH - track);
+      var room = Math.max(1, total - view);
+      var pos = Math.max(0, Math.min(1, scrollTop / room));
+      var share = total > 0 ? Math.min(1, view / total) : 1;
+      var markH = Math.max(28, Math.round(track * share));
+      var markTop = Math.max(0, Math.min(track - markH, Math.round((track - markH) * pos)));
+      var offset = shift * pos;
+      var canScroll = total - view > 4;
+      var ticks = [];
+      for (var i = 0; i < count; i++) {
+        var y = Math.round(i * gap) - offset;
+        ticks.push({
+          top: Math.round(i * gap),
+          // a 10px box: a bar whose centre is inside the mark counts as inside it
+          inView: canScroll && y >= markTop - 5 && y <= markTop + markH + 5
+        });
+      }
+      return { ticks: ticks, gap: gap, tapeH: tapeH, shift: shift, offset: offset };
+    }
     // Writing a field's schema default through the card IS its reset — a value that
     // equals the default carries no customization, so it must not pin an entry (and
     // the "customized" badge with it) into the user layer.
@@ -854,6 +911,9 @@ window.__ModuleLoader__.load({
         var handleNum = Number(v.handle);
         return {
           dock: v.dock === "right" ? "right" : "left",
+          // which views exist; anything unknown falls back to the historical "both"
+          surface: v.surface === "panel" || v.surface === "curtain" ? v.surface : "both",
+          scrollbar: v.scrollbar === "band" ? "band" : "bar",
           lang: v.lang === "zh" || v.lang === "en" ? v.lang : "auto",
           levels: levels || LEVELS_ALL.slice(),
           density: v.density === "compact" ? "compact" : "comfy",
@@ -876,7 +936,7 @@ window.__ModuleLoader__.load({
         var over = hostOverlay(hostSnap);
         if (!over) return local;
         return {
-          dock: over.dock, y: local.y, w: local.w, h: local.h,
+          dock: over.dock, surface: over.surface, scrollbar: over.scrollbar, y: local.y, w: local.w, h: local.h,
           levels: over.levels, density: over.density, accent: over.accent,
           glass: over.glass, glassStrength: over.glassStrength, sheetHeight: over.sheetHeight,
           zoom: over.zoom, sheetZoom: over.sheetZoom, handle: over.handle, fuzzy: over.fuzzy, hover: over.hover,
@@ -2653,6 +2713,14 @@ window.__ModuleLoader__.load({
         programScrollRef.current = Date.now() + (ms || 250);
       };
       var lastScrollTopRef = react.useRef(0);
+      // One page per ARRIVAL at the top: set when that page was asked for (by the
+      // scroll's rising edge or by a wheel tick) and cleared once the list leaves the
+      // top. Sitting at the top used to ask again on every wheel tick.
+      var topLoadRef = react.useRef(false);
+      // Set when the top asked the host for a page: the reveal waits for that page to
+      // land instead of showing rows whose history is not here yet (see the effect
+      // below the `groups` memo).
+      var pendingRevealRef = react.useRef(false);
       var lastHostClickRef = react.useRef(0); // throttle for the "load earlier" click
       // Auto-load bookkeeping (see the paging block): at most one pull in flight, a beat
       // between pulls, and a per-gesture budget so a runaway loop can never swallow the
@@ -3488,6 +3556,20 @@ window.__ModuleLoader__.load({
       // two comparisons disagree forever — the panel then republishes its default on
       // every pass and stomps a fresh change with the value it had just read back.
       var prefs = usePrefs();
+      // ---- which surfaces exist ------------------------------------------------
+      // 'both' is the historical behaviour. The other two do not merely prefer one
+      // surface: they REMOVE the other, which is what was asked for (readers who only
+      // ever use the curtain kept getting the docked panel's edge pill over the
+      // transcript, and readers who only use the panel never wanted the droplet).
+      var surface = prefs.surface === "curtain" ? "curtain" : (prefs.surface === "panel" ? "panel" : "both");
+      var panelMode = surface !== "curtain";
+      var curtainMode = surface !== "panel";
+      // A preference change (or a document written elsewhere) must not leave the
+      // removed surface on screen: close what is no longer offered.
+      react.useEffect(function () {
+        if (!curtainMode && sheetOpen) closeSheet();
+        if (!panelMode && open) setOpen(false);
+      }, [surface, sheetOpen, open]);
       // ---- the day strip (see its call site) -----------------------------------
       // Declared up here with the other hooks: an early "nothing to show yet"
       // return must not skip them, or the first empty render and every real one
@@ -3544,9 +3626,11 @@ window.__ModuleLoader__.load({
         measure();
         return undefined;
       }, [open, sheetOpen]);
-      var _sAutoGlass = react.useState(autoGlassOff);
-      var autoGlassState = _sAutoGlass[0];
-      var setAutoGlassOff = _sAutoGlass[1];
+      // A revision, not a value: the probe's verdict must re-render the panel, while
+      // the palette itself reads the module flag (so the card can clear it and the
+      // next render — any preference write — picks the material back up).
+      var _sGlassRev = react.useState(0);
+      var bumpGlassRev = _sGlassRev[1];
       var _sSheetFrac = react.useState(null);
       var sheetDragFrac = _sSheetFrac[0];
       var setSheetDragFrac = _sSheetFrac[1];
@@ -3571,10 +3655,12 @@ window.__ModuleLoader__.load({
         setSheetDragFrac(null);
       };
       // ---- slow-device probe (see AUTO_OFF_KEY) --------------------------------
-      // Sampled once per curtain opening, and only while the material is on: the
-      // first 700ms of animated curtain is the heaviest thing this plugin does, so
-      // a p90 frame time over ~26ms there means the blur is costing more than the
-      // look is worth on this machine.
+      // Sampled once per curtain opening, and only while the material is on. The
+      // entrance is deliberately EXCLUDED: the 0.5s drop composites a blurred sheet
+      // every frame by design, and sampling it is what switched the blur off in a
+      // sandbox profile whose page then held the frame rate perfectly well. The
+      // settled surface is what the reader actually lives with, so that is what gets
+      // judged: 40 frames starting after the drop has landed.
       react.useEffect(function () {
         if (!sheetOpen || !prefs.glass || autoGlassOff) return undefined;
         if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") return undefined;
@@ -3596,19 +3682,24 @@ window.__ModuleLoader__.load({
           if (p90 > 26) {
             autoGlassOff = true;
             try { localStorage.setItem(AUTO_OFF_KEY, "1"); } catch (e) {}
-            setAutoGlassOff(true);
+            bumpGlassRev(function (n) { return n + 1; });
           }
         };
-        var id = window.requestAnimationFrame(tick);
-        var guard = setTimeout(finish, 1200);
-        return function () { stop = true; clearTimeout(guard); try { window.cancelAnimationFrame(id); } catch (e) {} };
-      }, [sheetOpen]);
+        // 620ms = the 500ms entrance plus a margin for its own landing frame
+        var start = setTimeout(function () {
+          if (stop) return;
+          last = 0;
+          window.requestAnimationFrame(tick);
+        }, 620);
+        var guard = setTimeout(finish, 620 + 1200);
+        return function () { stop = true; clearTimeout(start); clearTimeout(guard); };
+      }, [sheetOpen, prefs.glass]);
       // The render's own palette: blue shares the module object itself (default
       // path: zero behaviour change), any other theme merges the same keys.
       // Every C.* use below this line — rows, chips, the accent bar, hit marks —
       // follows the preference without touching a single call site.
       var C = glassC(themeC(prefs.accent), {
-        glass: prefs.glass && !autoGlassState,
+        glass: prefs.glass && !autoGlassOff,
         glassStrength: prefs.glassStrength
       });
       // the once-injected stylesheet cannot see per-render values: repaint its
@@ -4119,8 +4210,8 @@ window.__ModuleLoader__.load({
           autoLoadStep(el);
         }, fast ? AUTO_WAIT_MS : AUTO_PACE_MS);
       };
-      var autoLoadStep = function (el) {
-        if (!autoLoadRef.current || !el || !el.isConnected) return false;
+      var autoLoadStep = function (el, force) {
+        if ((!autoLoadRef.current && !force) || !el || !el.isConnected) return false;
         if (pullBusyRef.current) return true;   // a pull is in flight: still progressing
         var now = Date.now();
         if (now - autoStampRef.current > AUTO_BURST_IDLE_MS) autoBurstRef.current = 0;
@@ -4180,19 +4271,24 @@ window.__ModuleLoader__.load({
       };
       var loadOlderOutline = function (el) {
         var grow = function () {
-          if (visibleCount < groups.length) {
-            // Revealing older rows prepends them, so the reader's content is pushed down.
-            // Sample first and let the layout effect take the push out again in the same
-            // frame: correcting two frames later (the old double-rAF) IS the bounce the
-            // reader saw when they reached the unloaded part of the list.
-            holdPlace(el);
-            setVisibleCount(Math.min(groups.length, visibleCount + PAGE_SIZE));
-            // the revealed rows are not in the DOM yet, so re-check once after the render:
-            // if the reveal uncovered unloaded turns, they load within the same gesture
-            autoRetry();
-            return true;
-          }
-          return false;
+          if (visibleCount >= groups.length) return false;
+          // Reveal only rows that are already LOADED. A placeholder would render as
+          // 未加载, and the reader's rule for this gesture is "one page, like the host's
+          // own 加载更早" — the index must not run ahead of the history behind it.
+          var top = groups.length - visibleCount;
+          var run = 0;
+          while (run < PAGE_SIZE && top - 1 - run >= 0 && groups[top - 1 - run] && !groups[top - 1 - run].ghost) run++;
+          if (!run) return false;
+          // Revealing older rows prepends them, so the reader's content is pushed down.
+          // Sample first and let the layout effect take the push out again in the same
+          // frame: correcting two frames later (the old double-rAF) IS the bounce the
+          // reader saw when they reached the unloaded part of the list.
+          holdPlace(el);
+          setVisibleCount(Math.min(groups.length, visibleCount + run));
+          // the revealed rows are not in the DOM yet, so re-check once after the render:
+          // if the reveal uncovered unloaded turns, they load within the same gesture
+          autoRetry();
+          return true;
         };
         var viaHostButton = function () { return viaHostButtonRef.current(); };
         // In SEARCH mode the list shows matches, not the outline: paging the outline's
@@ -4206,10 +4302,17 @@ window.__ModuleLoader__.load({
           if (pulled) confirmPlace(el);
           return pulled || grow();
         }
-        // Outline mode: reveal more of the index, and let the auto-loader fetch the
-        // history behind the gap the reader has scrolled into (see autoLoadStep).
+        // Outline mode: reveal the next slice of the index and pull exactly ONE host
+        // page — the same `loadOlder()` the host's own 加载更早 button calls. This used
+        // to run the auto-loader here, whose "cover the ghost you reached" path pages up
+        // to 200 messages a hop: one wheel arrival could therefore load several times
+        // what the button loads and leave the outline full of 未加载 rows.
         var grew = grow();
-        var fetched = autoLoadStep(el);
+        var fetched = pullPage() || viaHostButton();
+        // Nothing loaded above the window (the frontier): wait for the page to land and
+        // reveal its turns then. When the index COULD advance, the jump above already
+        // moved the reader off the top, which re-arms the gesture by itself.
+        if (fetched && !grew) pendingRevealRef.current = true;
         return grew || fetched;
       };
 
@@ -4249,7 +4352,13 @@ window.__ModuleLoader__.load({
         }
         if (hint === "more") setHint(""); // scrolling up is what the hint asked for
         if (el.scrollTop <= 1) {
-          var progressed = loadOlderOutline(el);
+          // ONE page per arrival, exactly like the host's own 加载更多: a spin used to
+          // reveal another PAGE_SIZE of index rows on EVERY tick, so one gesture could
+          // uncover far more turns than were loaded and leave 未加载 rows behind. The
+          // flag is cleared when the list leaves the top (see onListScroll).
+          var alreadyLoaded = topLoadRef.current;
+          topLoadRef.current = true;
+          var progressed = alreadyLoaded ? false : loadOlderOutline(el);
           if (!progressed) {
             if (query.trim() !== "") {
               if (hint !== "oldest") setHint("oldest");
@@ -4267,6 +4376,165 @@ window.__ModuleLoader__.load({
       };
 
       // scroll to the top edge also loads older groups (keeps the visual position)
+      // ---- the scroll-position indicator ---------------------------------------
+      // A density ruler plus a viewport marker on the list's right edge.
+      //   * the TICKS are a TAPE: one slot per H1/H2, at least 7px apart, and when the
+      //     slots overflow the window the tape slides with the scroll (see
+      //     rulerLayout). Clicking one jumps to its heading.
+      //   * the MARKER is where the reader is: a short vertical bar ("bar") or a soft
+      //     band ("band"). Its height is the viewport's share of the content; the bars
+      //     under it are the ones painted in the theme colour.
+      // It must live OUTSIDE the scroller: the list carries a top/bottom fade mask,
+      // and anything drawn inside it is eaten at the ends (the "clipped, odd" look).
+      var barHostRef = react.useRef(null);
+      var barThumbRef = react.useRef(null);
+      var barTapeRef = react.useRef(null);
+      var barDragRef = react.useRef(null);
+      var _sBarHot = react.useState(false);
+      var barHot = _sBarHot[0];
+      var setBarHot = _sBarHot[1];
+      // The bottom needs room for the panel's 12px corner AND the marker's 5px glow,
+      // or the end of the mark gets shaved off exactly when it reaches the bottom.
+      var BAR_BOTTOM_GAP = 20;
+      var BAR_INSET_TOP = 10;
+      var TICK_MIN_GAP = 7;        // the ruler stops getting denser than this
+      var barMode = prefs.scrollbar === "band" ? "band" : "bar";
+      // the marker lives in its own lane, never on top of the rows: the list keeps
+      // this much padding on its right so text and the current-group box stop short
+      // The curtain has room, so the whole ruler scales up with the marker: the lane
+      // widens, the ticks get longer and the frame grows with them.
+      var barScale = sheetOpen ? 1.6 : 1;
+      var barTickW = Math.round(10 * barScale);
+      var barLane = (barMode === "band" ? 22 : 24) + (sheetOpen ? 8 : 0);
+      // The air between the list's content edge and the lane. The current-group box
+      // bleeds 5px into it (its own -5px side margin), so the box the reader sees sits
+      // ~13px from the band — two tinted frames needed room, they were nearly touching.
+      var BAR_TEXT_GAP = 18;
+      // where the marker currently sits, written straight to the DOM: a re-render per
+      // scroll frame would rebuild the whole outline
+      // One pass over the scroll position: the tape (the ruler) slides, and the marker
+      // (a rounded bar, or the band that wraps the ruler) follows.
+      var layoutScrollBar = function (el) {
+        if (typeof layoutBarLane === "function") layoutBarLane();
+        var host = barHostRef.current;
+        var thumb = barThumbRef.current;
+        var tape = barTapeRef.current;
+        if (!host || !el) return;
+        var view = el.clientHeight || 0;
+        var total = el.scrollHeight || 0;
+        var laneH = host.clientHeight || 0;
+        var track = Math.max(40, laneH - BAR_INSET_TOP - BAR_BOTTOM_GAP);
+        var share = total > 0 ? Math.min(1, view / total) : 1;
+        var scrollTop = el.scrollTop || 0;
+        var room = Math.max(1, total - view);
+        var pos = Math.max(0, Math.min(1, scrollTop / room));
+        var canScroll = total - view > 4;
+        // The ruler: one slot per heading, at least TICK_MIN_GAP apart. When the slots
+        // overflow the window the tape is taller and slides with the scroll — the bars
+        // move as the outline moves, and a dense stretch stays dense.
+        if (tape && tape.style) {
+          var kids = tape.children || [];
+          var laid = rulerLayout(kids.length, total, track, scrollTop, view, TICK_MIN_GAP);
+          for (var ti = 0; ti < kids.length; ti++) {
+            var kid = kids[ti];
+            var g = laid.ticks[ti];
+            if (!kid || !kid.style || !g) continue;
+            kid.style.display = "";
+            kid.style.top = g.top + "px";   // the slot; the 10px box centres its bar 5px in
+            var bar = kid.firstElementChild || (kid.children && kid.children[0]);
+            if (bar && bar.style) {
+              bar.style.background = g.inView ? C.accent : "rgba(128,128,128,0.32)";
+              bar.style.opacity = g.inView ? "0.95" : "0.8";
+            }
+          }
+          tape.style.height = laid.tapeH + "px";
+          tape.style.transform = "translateY(" + Math.round(-laid.offset) + "px)";
+        }
+        if (!thumb || track <= 8) return;
+        // The mark is the viewport's share of the content: its height is that share and
+        // its travel is the scroll's. (With share*track < the 28px grab floor the mark
+        // keeps its grab size and the bottom end gives way.)
+        var markHeight = Math.max(28, Math.round(track * share));
+        var markTop = Math.max(0, Math.min(track - markHeight, Math.round((track - markHeight) * pos)));
+        thumb.style.height = markHeight + "px";
+        // the element's own top already carries BAR_INSET_TOP (see its style), so the
+        // transform adds only the travel — one inset, or the mark sits 10px low
+        thumb.style.transform = "translateY(" + markTop + "px)";
+        thumb.style.opacity = canScroll ? "1" : "0.3";
+        thumb.style.pointerEvents = canScroll ? "auto" : "none";
+      };
+      // The lane is an in-flow flex column beside the list, so there is nothing to
+      // position by hand: this stays as a no-op because layoutScrollBar calls it.
+      var layoutBarLane = function () {};
+      var onBarDown = function (e) {
+        var el = listRef.current;
+        if (!el) return;
+        e.preventDefault();
+        e.stopPropagation();
+        // A drag is measured in CONTENT space, fixed at the moment it starts: the
+        // pointer's travel maps to the content that existed then, so history arriving
+        // underneath can never accelerate the reader towards the top.
+        var host0 = barHostRef.current;
+        var track0 = Math.max(1, (host0 ? host0.clientHeight : 0) - BAR_INSET_TOP - BAR_BOTTOM_GAP);
+        var thumbH0 = barThumbRef.current ? barThumbRef.current.offsetHeight || 22 : 22;
+        barDragRef.current = {
+          moved: false,
+          startY: e.clientY,
+          startTop: el.scrollTop || 0,
+          room0: Math.max(1, el.scrollHeight - el.clientHeight),
+          travel0: Math.max(1, track0 - thumbH0)
+        };
+        setBarHot(true);
+        if (e.currentTarget && e.pointerId !== undefined && e.currentTarget.setPointerCapture) {
+          try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) { /* no capture: fine */ }
+        }
+      };
+      var onBarMove = function (e) {
+        var d = barDragRef.current;
+        var el = listRef.current;
+        if (!d || !el) return;
+        var dy = e.clientY - d.startY;
+        if (Math.abs(dy) > 2) d.moved = true;
+        // Reached the top: stand still until the page that arrival asked for lands.
+        // The pointer turning back DOWN is an ordinary drag, though — keeping the hold
+        // there latched the mark at the top until the button was released.
+        if (d.hold) {
+          if (e.clientY > d.holdY + 1) d.hold = false;
+          else if (el.scrollHeight <= d.holdHeight) return;
+          else d.hold = false;
+        }
+        var want = d.startTop + (dy / d.travel0) * d.room0;
+        var room = Math.max(1, el.scrollHeight - el.clientHeight);
+        var next = Math.max(0, Math.min(room, want));
+        if (next <= 0 && dy < 0) {
+          if (!d.hold) { d.hold = true; d.holdY = e.clientY; d.holdHeight = el.scrollHeight; }
+        }
+        el.scrollTop = Math.round(next);
+      };
+      var onBarUp = function (e) {
+        var d = barDragRef.current;
+        barDragRef.current = null;
+        setBarHot(false);
+        if (e && e.currentTarget && e.currentTarget.releasePointerCapture && e.pointerId !== undefined) {
+          try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (err) { /* ignore */ }
+        }
+        // a press that did not drag centres the view on the pointer instead
+        if (d && !d.moved) {
+          var el = listRef.current;
+          var host = barHostRef.current;
+          var thumb = barThumbRef.current;
+          if (el && host && thumb) {
+            var rect = host.getBoundingClientRect();
+            // the same band the mark travels in (see layoutScrollBar): the lane's top
+            // inset belongs to both ends, or a press lands the view a hair off
+            var track = Math.max(1, (host.clientHeight || 0) - BAR_INSET_TOP - BAR_BOTTOM_GAP);
+            var thumbH = thumb.offsetHeight || 22;
+            var y = Math.max(0, Math.min(track - thumbH, e.clientY - rect.top - BAR_INSET_TOP - thumbH / 2));
+            var room = Math.max(1, el.scrollHeight - el.clientHeight);
+            el.scrollTop = Math.round((y / Math.max(1, track - thumbH)) * room);
+          }
+        }
+      };
       var onListScroll = function (e) {
         // A scroll the panel caused itself (see markProgramScroll) carries no
         // reader intent: it still updates the bottom state and the paging anchor,
@@ -4283,7 +4551,12 @@ window.__ModuleLoader__.load({
           if (hint === "more") setHint("");
           if (hoverCard) hoverEnd(true);
         }
+        var wasAbove24 = lastScrollTopRef.current > 24;
         lastScrollTopRef.current = el.scrollTop;
+        // leaving the top re-arms the one-page gate (see onListWheel): a later
+        // arrival is a new request, staying here is not
+        if (el.scrollTop > 24) topLoadRef.current = false;
+        layoutScrollBar(el);
         if (!programmatic) syncBackBtn(el);   // reached the remembered place by hand? the button is done
         // Remember what the reader is looking at. Sampling on every scroll event is what
         // lets a change the reader did NOT start — the host extending the window by itself
@@ -4294,22 +4567,21 @@ window.__ModuleLoader__.load({
         // trigger any more: on any upward movement, ask the auto-loader whether the
         // unloaded stretch is coming into range (it decides, see frontierApproaching).
         // Throttled, because that probe reads geometry.
-        if (upward && el.scrollTop > 24 && Date.now() - autoProbeRef.current > 120) {
-          autoProbeRef.current = Date.now();
-          autoLoadStep(el);
-        }
+        // no automatic paging any more: the reader asks by reaching the top
         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);
+          var atTopFresh = wasAbove24 && !barDragRef.current && (!programmatic || query.trim() !== "");
+          // the outline window grows only on that fresh arrival too: sitting at the top used
+          // to keep revealing ghost pages, which looked like a flood of 未加载 rows
+          if (atTopFresh) topLoadRef.current = true;
+          var progressed = atTopFresh ? loadOlderOutline(el) : false;
           if (!progressed && upward) {
             if (query.trim() !== "") {
               if (hint !== "oldest") setHint("oldest");
             } else if (atHistoryStart()) {
               showBanner(T("search.hintOldest"));
-            } else if (!prefs.autoLoad) {
-              showBanner(T("hint.autoOff"));
             }
           }
         }
@@ -4570,6 +4842,20 @@ window.__ModuleLoader__.load({
       // render (the "did that turn actually page in?" verdict below).
       var groupsLiveRef = react.useRef(groups);
       groupsLiveRef.current = groups;
+      // A top arrival asked the host for one page: when that page LANDs, extend the
+      // window over the turns that just became real (never over a placeholder). The
+      // reader sees exactly what loaded, and the wheel does not run ahead of the data.
+      react.useEffect(function () {
+        if (!pendingRevealRef.current) return;
+        var top = groups.length - visibleCount;
+        var run = 0;
+        while (run < PAGE_SIZE && top - 1 - run >= 0 && groups[top - 1 - run] && !groups[top - 1 - run].ghost) run++;
+        if (!run) return;                 // the page has not landed yet
+        pendingRevealRef.current = false;
+        var el = listRef.current;
+        if (el) holdPlace(el);
+        setVisibleCount(Math.min(groups.length, visibleCount + run));
+      }, [groups, visibleCount]);
       react.useEffect(function () {
         return function () {
           if (keepPlaceRafRef.current) cancelAnimationFrame(keepPlaceRafRef.current);
@@ -4636,6 +4922,189 @@ window.__ModuleLoader__.load({
       var shownGroups = groups.slice(Math.max(0, groups.length - visibleCount));
       var shownTrees = groupTrees.slice(groupTrees.length - shownGroups.length);
 
+      // the ticks: one per H1/H2/H3 entry the list actually renders. The window
+      // starts at the first shown group, so the ruler never claims a place for a
+      // row that is not in the DOM (the reader can see every tick it draws).
+      var barFirstGi = Math.max(0, groups.length - visibleCount);
+      var barTicks = react.useMemo(function () {
+        var all = [];
+        for (var k = 0; k < shownGroups.length; k++) {
+          var gi = barFirstGi + k;
+          var g = shownGroups[k];
+          if (!g || g.ghost || !g.headings) continue;
+          var added = 0;
+          for (var hi = 0; hi < g.headings.length; hi++) {
+            var h = g.headings[hi];
+            var lv = Math.min(6, Math.max(1, h.level || 1));
+            if (lv > 3) continue;   // H4 and deeper stay out of the ruler
+            all.push({ key: h.key, idx: h.idx, gi: gi, level: lv, title: h.title || "" });
+            added++;
+          }
+          // keep at least one tick per turn that has any H1/H2
+          if (!added && g.headings.length) {
+            var first = g.headings[0];
+            all.push({ key: first.key, idx: first.idx, gi: gi, level: Math.min(6, Math.max(1, first.level || 1)), title: first.title || "" });
+          }
+        }
+        return all;
+      }, [shownGroups, barFirstGi]);
+      // A very long window can hold thousands of headings. Up to BAR_CAP every heading
+      // gets its own slot (the tape grows instead of dropping any); beyond it the set is
+      // sampled evenly by index, because a DOM node per heading rewritten on every
+      // scroll frame is what makes the lane expensive.
+      var BAR_CAP = 400;
+      var barSlice = barTicks;
+      if (barTicks.length > BAR_CAP) {
+        var thinStep = barTicks.length / BAR_CAP;
+        var keptTicks = [];
+        for (var ck = 0; ck < BAR_CAP; ck++) keptTicks.push(barTicks[Math.min(barTicks.length - 1, Math.round(ck * thinStep))]);
+        barSlice = keptTicks;
+      }
+      // The tape is laid out from the rendered window only (barSlice, capped above): the
+      // layout pass gives every heading a slot at least TICK_MIN_GAP apart, and the tape
+      // slides inside its clipped window when the slots do not all fit. Nothing here
+      // reads row geometry any more, so a scroll never forces a layout read.
+      react.useLayoutEffect(function () {
+        layoutScrollBar(listRef.current);
+      }, [open, sheetOpen, barMode, groups.length, visibleCount, shownGroups.length, activeGroup,
+        sheetColW, marksCol, panelW, panelH, prefs.density, levels, barTicks]);
+      var scrollBarEl = groups.length ? react_jsx_runtime.jsx("div", {
+        ref: barHostRef,
+        className: "dqt-bar",
+        "data-dqt-bar": barMode,
+        style: {
+          // An in-flow column immediately right of the list: when the search or
+          // bookmarks column is pushed in, the list gives up width and the lane
+          // follows by ordinary layout — no percentages, no stray overlap.
+          position: "relative",
+          flex: "0 0 " + barLane + "px",
+          alignSelf: "stretch",
+          width: barLane,
+          // The lane sits right beside the outline and nearly on the panel's own rim:
+          // the reader asked for the mark to hug both sides, in the panel and across
+          // the curtain alike (this is the ONE gap constant for the lane).
+          marginRight: Math.round(4 * barScale),
+          boxSizing: "border-box",
+          zIndex: 3,
+          pointerEvents: "none"
+        },
+        children: [
+          // the ruler: a clipped window over the sliding tape
+          react_jsx_runtime.jsx("div", {
+            key: "tapewrap",
+            style: {
+              position: "absolute",
+              top: BAR_INSET_TOP,
+              bottom: BAR_BOTTOM_GAP,
+              left: barMode === "band" ? 5 : 0,
+              width: barTickW,
+              // the slots are laid out inside this window; a tape taller than it slides
+              // behind this clip, exactly like a scrollbar's track
+              overflow: "hidden"
+            },
+            children: react_jsx_runtime.jsx("div", {
+              ref: barTapeRef,
+              "data-dqt-tape": "on",
+              "data-dqt-ticks": String(barSlice.length),
+              style: { position: "absolute", left: 0, top: 0, width: barTickW, height: "100%" },
+              children: barSlice.map(function (t, ti) {
+                var w = Math.round((t.level === 1 ? 10 : (t.level === 2 ? 6 : 3)) * barScale);   // H1 long, H2 medium, H3 a dot
+                return react_jsx_runtime.jsx("div", {
+                  "data-dqt-tick": String(t.level),
+                  "data-dqt-tick-pos": String(ti),
+                  title: t.title,
+                  onClick: function () { jump(t.key, t.idx); },
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,          // placed by layoutScrollBar: one slot per heading
+                    height: 10,
+                    width: barTickW,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "flex-start",
+                    pointerEvents: "auto",
+                    cursor: "pointer"
+                  },
+                  children: react_jsx_runtime.jsx("span", {
+                    style: {
+                      display: "block",
+                      width: w,
+                      height: 2,
+                      borderRadius: 1,
+                      // neutral until layoutScrollBar knows which rows are in view
+                      background: "rgba(128,128,128,0.32)",
+                      opacity: 0.8
+                    }
+                  })
+                }, "tick-" + ti);
+              })
+            })
+          }),
+          // the marker: a rounded bar (wider in the curtain) or a frame around the ruler
+          react_jsx_runtime.jsx("div", {
+            key: "thumb",
+            ref: barThumbRef,
+            "data-dqt-barthumb": barMode,
+            onPointerDown: onBarDown,
+            onPointerMove: onBarMove,
+            onPointerUp: onBarUp,
+            onPointerCancel: onBarUp,
+            onMouseEnter: function () { setBarHot(true); },
+            onMouseLeave: function () { if (!barDragRef.current) setBarHot(false); },
+            style: barMode === "band"
+              ? {
+                position: "absolute",
+                left: 0,
+                // a 2px gap to the panel's own rim: the band hugs the right edge, as
+                // close as its 1px outline allows
+                right: 2,
+                top: BAR_INSET_TOP,
+                height: 60,
+                borderRadius: 7,
+                // the same material as the current-turn box on the left, so the two
+                // read as one family
+                background: barHot ? "rgba(79,140,255,0.16)" : "rgba(79,140,255,0.10)",
+                boxShadow: barHot ? "inset 0 0 0 1px rgba(79,140,255,0.65)" : "inset 0 0 0 1px rgba(79,140,255,0.40)",
+                // the frame does not grow on hover: it becomes more solid instead
+                transition: "background-color 0.14s ease, box-shadow 0.14s ease",
+                pointerEvents: "auto",
+                cursor: "pointer",
+                touchAction: "none"
+              }
+              : {
+                position: "absolute",
+                right: 4,
+                top: BAR_INSET_TOP,
+                width: 12,
+                height: 24,
+                display: "flex",
+                alignItems: "stretch",
+                justifyContent: "flex-end",
+                pointerEvents: "auto",
+                cursor: "pointer",
+                touchAction: "none"
+              },
+            children: barMode === "band" ? null : react_jsx_runtime.jsx("span", {
+              "data-dqt-barvis": "bar",
+              style: {
+                display: "block",
+                // wide enough that the rounded caps are actually visible, and the
+                // curtain gets a thicker one; hovering makes it thicker still
+                width: (sheetOpen ? 6 : 4) + (barHot ? 2 : 0),
+                height: "100%",
+                borderRadius: 999,
+                background: C.accent,
+                opacity: 0.95,
+                boxShadow: barHot ? "0 0 0 5px rgba(79,140,255,0.10)" : "none",
+                transition: "width 0.14s ease, box-shadow 0.14s ease"
+              }
+            })
+          })
+        ]
+      }) : null;
+
+
       // the group currently being read (the turn under the middle of the
       // CONVERSATION viewport) stays bright in the outline; others are dimmed.
       // Every node key of every loaded group -> its group index: mapping ONLY the
@@ -5234,7 +5703,7 @@ window.__ModuleLoader__.load({
       rememberRef.current = !!prefs.remember;
       // the auto-loader's switch, mirrored for the same reason: its retry fires from an
       // older render's closure, and turning the setting off must stop it immediately
-      autoLoadRef.current = !!prefs.autoLoad;
+      autoLoadRef.current = false;   // manual only
       // Is any of the outline actually on screen? The follow scan is cheap now, but while
       // the panel sits collapsed there is no point measuring at scroll-frame rate.
       panelVisibleRef.current = !!(open || sheetOpen);
@@ -7165,14 +7634,16 @@ window.__ModuleLoader__.load({
           style: {
             position: "absolute",
             left: 0,
-            // the curtain's search column keeps its own strip: the overlay covers the
-            // outline, not the hits
-            right: sheetOpen && sheetColW > 0 ? sheetColW : 0,
+            // the overlay lives INSIDE the pane now, so its right edge must step over
+            // the lane: the bookmarks stop where the outline's rows stop
+            right: barLane + Math.round(4 * barScale),
             top: 0,
             bottom: 0,
             overflowY: "auto",
             overflowAnchor: "none",
-            padding: sheetOpen ? "0 20px 8px" : "0 8px 6px",
+            // the gap between those rows and the lane (BAR_TEXT_GAP), never the whole
+            // lane width — the lane is a real flex column
+            padding: sheetOpen ? ("0 " + BAR_TEXT_GAP + "px 8px 8px") : ("0 " + BAR_TEXT_GAP + "px 6px 6px"),
             direction: (sheetOpen || dockRight) ? "ltr" : "rtl"
           },
           children: react_jsx_runtime.jsx("div", { style: { direction: "ltr" }, children: markRowsEl })
@@ -7207,7 +7678,11 @@ window.__ModuleLoader__.load({
           // block, so a padded scroll container would hold the pinned group
           // header that many pixels below the toolbar (a visible gap). Spacing
           // between groups comes from the per-group divider instead.
-          padding: sheetOpen ? "0 20px 8px" : "0 8px 6px",
+          // the right padding is the indicator's lane (see barLane above): rows and the
+        // current-group box stop short of it, in the outline and in the marks overlay
+        // the lane is a real flex column now, so the list only needs the air between
+        // its text and that column (BAR_TEXT_GAP), not the whole lane width
+        padding: sheetOpen ? ("0 " + BAR_TEXT_GAP + "px 8px 8px") : ("0 " + BAR_TEXT_GAP + "px 6px 6px"),
           // the rows dissolve at BOTH edges instead of being cut by a hard line. The
           // top fade is safe now that the day strip lives outside the scroller: it
           // thins the rows approaching the strip, never the label itself.
@@ -7215,15 +7690,9 @@ window.__ModuleLoader__.load({
           WebkitMaskImage: "linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 22px), transparent 100%)",
           flex: "1 1 auto",
           minHeight: 0,
-          // across the curtain the list does not touch the edges: it is a centred
-          // column with room at both sides, which is also what makes it slide left
-          // when the search column is pushed in
-          width: sheetOpen ? "100%" : undefined,
-          maxWidth: sheetOpen ? "90%" : undefined,
-          margin: sheetOpen ? "0 auto" : undefined,
-          // the 20px side padding sits INSIDE the 90% (content-box would make the
-          // rendered column 90% + 40px, i.e. ~93% of the curtain)
-          boxSizing: sheetOpen ? "border-box" : undefined,
+          // across the curtain the WIDTH and centring belong to the pane that holds
+          // this list AND its lane (see bodyRowEl): the lane has to travel with the
+          // outline, or it sits way off at the sheet's edge instead of beside the rows
           // the scrollbar follows the dock side in the narrow panel; across the
           // curtain it sits on the list's right edge
           direction: (sheetOpen || dockRight) ? "ltr" : "rtl"
@@ -7334,12 +7803,35 @@ window.__ModuleLoader__.load({
         // would go on showing the last day the outline was scrolled to
         children: onlyMarks ? "" : dayStripText
       });
-      var bodyRowEl = react_jsx_runtime.jsx("div", {
-        className: "dqt-body-row",
+      // The outline AND its lane travel together. Across the curtain the pair is one
+      // centred column (90% of the sheet at most): centring the LIST alone used to
+      // leave the lane parked at the sheet's edge, nowhere near the rows it describes,
+      // and opening the search column only looked closer because everything shrank.
+      // In the docked panel the pane is simply the full row, so the lane sits right
+      // beside the outline there too.
+      var outlinePaneEl = react_jsx_runtime.jsx("div", {
+        className: "dqt-outline-pane",
         // `position: relative` is what lets the bookmark overlay cover the list
         // without becoming part of its scrolled content
+        style: {
+          position: "relative",
+          flex: "1 1 auto",
+          minWidth: 0,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "stretch",
+          width: sheetOpen ? "100%" : undefined,
+          maxWidth: sheetOpen ? "90%" : undefined,
+          margin: sheetOpen ? "0 auto" : undefined,
+          boxSizing: sheetOpen ? "border-box" : undefined
+        },
+        children: [listEl, marksOverlayEl, scrollBarEl]
+      });
+      var bodyRowEl = react_jsx_runtime.jsx("div", {
+        className: "dqt-body-row",
         style: { position: "relative", flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "row", alignItems: "stretch" },
-        children: [listEl, marksOverlayEl, sheetSearchColEl]
+        children: [outlinePaneEl, sheetSearchColEl]
       });
       // one geometry for the panel and its shadow twin, merged (never duplicated)
       var mergeStyle = function (base, extra) {
@@ -7777,7 +8269,7 @@ window.__ModuleLoader__.load({
       // a narrow conversation column leaves no room for a handle floating over the text:
       // below the threshold it slides back into the divider (its usual motion), while the
       // droplet above the conversation stays put as the way in
-      var edgeShown = !open && handleShown && chatViewActive && !narrowWindow;
+      var edgeShown = !open && panelMode && handleShown && chatViewActive && !narrowWindow;
       // The pill is 12px centred in the 26px box, so its edge sits 7px inside the box
       // edge. Left dock: the panel opens at `area + 8`, so parking the box 1px out puts
       // the pill's left edge exactly on the panel's own left edge — one line.
@@ -7789,7 +8281,7 @@ window.__ModuleLoader__.load({
       // than two lines nobody sees at the same time.
       var edgeLineLeft = (viewport ? viewport.left : 0) + 1;
       var edgeLineRight = (viewport ? viewport.right + 52 : 60);   // clear of the milestone rail
-      var edgeEl = (!open || !edgeGone) ? react_jsx_runtime.jsx("div", {
+      var edgeEl = panelMode && (!open || !edgeGone) ? react_jsx_runtime.jsx("div", {
         style: {
           position: "fixed",
           width: EDGE_W,
@@ -7893,7 +8385,7 @@ window.__ModuleLoader__.load({
       // 140 wide and only 13.5 tall: the reader asked for a wider, flatter droplet
       // (it started at 92, then 120).
       var DROP_W = 140;
-      var topHandleEl = (!sheetOpen || !sheetHandleGone) && chatViewActive ? react_jsx_runtime.jsx("div", {
+      var topHandleEl = curtainMode && (!sheetOpen || !sheetHandleGone) && chatViewActive ? react_jsx_runtime.jsx("div", {
         className: "dqt-sheet-handle",
         "data-sheet-handle": "on",
         style: {
@@ -8450,7 +8942,10 @@ window.__ModuleLoader__.load({
           // inside the curtain the SHEET is the glass (it has no opacity of its own,
           // so its backdrop-filter samples the page): no second twin here.
           // The grip is the curtain's own bottom edge: drag it to set the height.
-          children: sheetOpen ? [panelEl, sheetGripEl] : [panelShadowEl, panelEl]
+          // the docked panel is not BUILT at all when the reader chose the curtain only:
+        // a parked, clipped box still costs a layer and a shadow twin, and there is no
+        // way to open it once its edge pill is gone
+        children: sheetOpen ? [panelEl, sheetGripEl] : (panelMode ? [panelShadowEl, panelEl] : [])
         })]
       });
 
@@ -9681,6 +10176,16 @@ window.__ModuleLoader__.load({
         field("dock", T("settings.dock"), "",
           seg([["left", T("settings.dock.left")], ["right", T("settings.dock.right")]], prefs.dock,
             function (v) { commit({ dock: v }); }), true),
+        // one joined frame, three options: the reader chooses which views EXIST, not
+        // which one happens to be in front
+        field("surface", T("settings.surface"), "",
+          seg([["both", T("settings.surface.both")], ["panel", T("settings.surface.panel")], ["curtain", T("settings.surface.curtain")]],
+            prefs.surface || "both", function (v) { commit({ surface: v }); }), true),
+        // how the scroll position is drawn: a short thumb, or a band that also shows
+        // how much of the list is on screen. The ticks are there either way.
+        field("scrollbar", T("settings.scrollbar"), "",
+          seg([["bar", T("settings.scrollbar.bar")], ["band", T("settings.scrollbar.band")]],
+            prefs.scrollbar || "bar", function (v) { commit({ scrollbar: v }); }), true),
         field("levels", T("settings.levels"), "", levelsControl(true), true),
         field("density", T("settings.density"), "",
           seg([["comfy", T("settings.density.comfy")], ["compact", T("settings.density.compact")]], prefs.density,
@@ -9689,7 +10194,13 @@ window.__ModuleLoader__.load({
           accentDots(prefs.accent, function (v) { commit({ accent: v }); }), true),
         field("glass", T("settings.glass"),
           T("settings.glass.tip") + (autoGlassOff ? " " + T("settings.glass.autoOff") : ""),
-          onoff(prefs.glass, function (v) { commit({ glass: v }); }), true),
+          // Turning the material ON is also the reader's answer to an automatic
+          // verdict: the tip already promises "you can turn it back on", so honour it
+          // (the flag lives in localStorage, and the next render reads it again).
+          onoff(prefs.glass, function (v) {
+            if (v) clearAutoGlassOff();
+            commit({ glass: v });
+          }), true),
         field("glassStrength", T("settings.glassStrength"), T("settings.glassStrength.tip"), glassStrengthControl, false),
         field("zoom", T("settings.zoom"), T("settings.zoom.tip"), zoomControl, false),
         field("sheetZoom", T("settings.sheetZoom"), T("settings.sheetZoom.tip"), sheetZoomControl, false),
@@ -9697,7 +10208,6 @@ window.__ModuleLoader__.load({
         field("fuzzy", T("settings.fuzzy"), "", onoff(prefs.fuzzy, function (v) { commit({ fuzzy: v }); }), true),
         field("hover", T("settings.hover"), "", onoff(prefs.hover, function (v) { commit({ hover: v }); }), true),
         field("remember", T("settings.remember"), "", onoff(prefs.remember, function (v) { commit({ remember: v }); }), true),
-        field("autoLoad", T("settings.autoLoad"), "", onoff(prefs.autoLoad, function (v) { commit({ autoLoad: v }); }), true),
         field("debug", T("settings.debug"), T("settings.debug.tip"), onoff(prefs.debug, function (v) { commit({ debug: v }); }), true, true)
       ];
       return react_jsx_runtime.jsxs("li", {

package/lib/index.js

@@ -41,6 +41,11 @@ export const Config = z.object({
     .pattern(/^(left|right)$/)
     .default("left")
     .description("Which edge the panel docks to by default")),
+  surface: volatileSchema(z
+    .string()
+    .pattern(/^(both|panel|curtain)$/)
+    .default("both")
+    .description("Which views the plugin offers: both keeps the docked panel and the curtain, panel removes the curtain, curtain removes the docked panel")),
   levels: volatileSchema(z
     .array(z.number().min(1).max(6))
     .default([1, 2, 3, 4, 5, 6])
@@ -71,6 +76,11 @@ export const Config = z.object({
     .max(1)
     .default(1)
     .description("Height of the curtain as a fraction of the conversation area; drag its bottom edge to change it")),
+  scrollbar: volatileSchema(z
+    .string()
+    .pattern(/^(bar|band)$/)
+    .default("bar")
+    .description("How the outline draws its scroll position on the right edge: bar is a short vertical thumb, band marks how much of the list is visible")),
   zoom: volatileSchema(z
     .number()
     .min(0.5)
@@ -101,10 +111,7 @@ export const Config = z.object({
     .boolean()
     .default(true)
     .description("Remember where you were reading in each session and return there when it is reopened")),
-  autoLoad: volatileSchema(z
-    .boolean()
-    .default(true)
-    .description("Load history automatically when the outline is scrolled into turns that are not loaded yet; off means nothing loads until a row is clicked")),
+
   debug: volatileSchema(z
     .boolean()
     .default(false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-quick-toc",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "Conversation TOC for DeepSeek Harness (DSH): a whole-session, turn-grouped Markdown outline with hover previews, heading-level preferences, a full-width curtain, jump-to-end buttons, title/prompts/full-text/cross-session search and a Chinese/English interface.",
   "icon": "./icon.svg",
   "type": "module",
@@ -17,7 +17,7 @@
     "LICENSE"
   ],
   "engines": {
-    "dsh": ">=0.1.5-rc.3 <0.1.7-0 || >=0.1.7-alpha.1 <0.3.0-0"
+    "dsh": ">=0.2.1-rc.2 <0.3.0-0"
   },
   "scripts": {
     "test": "node test/render.mjs"
@@ -42,22 +42,10 @@
     },
     "compatibility": {
       "dshReleases": {
-        "0.1.5-rc.3": "compatible",
-        "0.1.7-alpha.1": "compatible",
-        "0.1.7-alpha.2": "compatible",
-        "0.1.7-rc.1": "compatible",
-        "0.1.7-rc.2": "compatible",
-        "0.2.0-rc.1": "compatible",
-        "0.2.0-rc.2": "compatible",
-        "0.2.1-alpha.1": "compatible",
-        "0.2.1-alpha.2": "compatible",
-        "0.2.1-alpha.3": "compatible",
-        "0.2.1-alpha.4": "compatible",
-        "0.2.1-alpha.5": "compatible",
-        "0.2.1-rc.1": "compatible",
         "0.2.1-rc.2": "compatible",
         "0.2.1-rc.3": "compatible",
         "0.2.1-rc.4": "compatible",
+        "0.2.1-rc.5": "compatible",
         "0.2.2-alpha.2": "compatible"
       }
     }
@@ -65,8 +53,8 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "@deepseek-ai/schemastery": "^3.18.0",
-    "@deepseek-ai/dsh-client-ui-chat": ">=0.1.5-rc.3 <0.1.7-0 || >=0.1.7-alpha.1 <0.3.0-0",
-    "@deepseek-ai/dsh-client-ui-conversation": ">=0.1.5-rc.3 <0.1.7-0 || >=0.1.7-alpha.1 <0.3.0-0"
+    "@deepseek-ai/dsh-client-ui-chat": ">=0.2.1-rc.2 <0.3.0-0",
+    "@deepseek-ai/dsh-client-ui-conversation": ">=0.2.1-rc.2 <0.3.0-0"
   },
   "peerDependenciesMeta": {
     "@deepseek-ai/schemastery": {