dsh-quick-toc 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LyaxZ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,50 @@
+# dsh-quick-toc
+
+> **English** | [中文](README.md)
+
+A quick conversation TOC plugin for [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) (DSH): extracts Markdown headings (H1–H6) from AI replies into a navigable outline panel, grouped by conversation turn, with auto-follow highlighting.
+
+## Features
+
+- **Turn-grouped outline** — each user message + its AI replies form one group, with the group's end time as the header
+- **Auto-follow highlight** — as you scroll the conversation, the turns visible in the viewport light up in the outline (multiple at once); the outline auto-loads and scrolls to keep them visible
+- **Smooth jump** — click a heading to glide to the exact heading position in the conversation
+- **Dockable & resizable** — dock left or right (drag the top bar), resize from the edges/corner, collapse to a draggable edge handle; panel size/position remembered
+- **Scrollbar follows the dock** — scrollbar sits on the left when docked left, right when docked right
+- **Paged rendering** — shows the latest groups first; scrolling to the top of the outline loads older ones
+- **Markdown-aware titles** — inline `**bold**`, *italic*, `` `code` ``, `[links](url)`, `~~strike~~` are stripped from heading text
+- Auto-hides when the conversation has no headings; works in light/dark themes
+
+## Install
+
+With the DSH CLI:
+
+```
+dsh plugin --profile web add github:LyaxZ/dsh-quick-toc
+```
+
+or, for a local checkout:
+
+```
+dsh plugin --profile web add <path-to-this-folder>
+```
+
+Restart DSH (double-click `restart-dsh.bat` on Windows) and open the Web UI. The outline is collapsed by default — click the small edge handle on the left side of the conversation to expand it.
+
+## Usage
+
+- Click a heading in the outline to jump to that heading in the conversation
+- Drag the top bar to move the panel; use the **◀ / ▶** button to dock left/right
+- Drag the right edge (width), bottom edge (height) or the bottom-right corner (both) to resize
+- Scroll the outline to the top to load older groups
+
+## Development
+
+- `lib/client.js` — all UI logic (browser side)
+- `lib/index.js` — host-side no-op entry
+- `cordis.patch.yml` — loader patch (official DSH bundle format)
+- Client changes hot-load after a browser hard refresh; loader/patch changes need a DSH restart
+
+## License
+
+MIT © 2026 LyaxZ

package/README.md

@@ -0,0 +1,50 @@
+# dsh-quick-toc
+
+> [English](README.en.md) | **中文**
+
+**DeepSeek Harness（DSH）对话大纲插件**：把 AI 回复中的 Markdown 标题（H1–H6）提取成可导航的大纲面板，按对话回合分组，自动跟随阅读位置。
+
+## 功能
+
+- **按回合分组** —— 每条用户消息 + 其后续 AI 回复为一组，组头显示该组最后一条消息的结束时间
+- **自动跟随高亮** —— 滚动对话框时，视口内可见的回合在大纲中自动点亮（多组可同时点亮）；大纲自动加载并滚动，保证正在读的组始终可见
+- **平滑跳转** —— 点击标题平滑滚动到对话中该标题的准确位置
+- **可停靠、可缩放** —— 左右停靠（拖顶部横条移动）、边缘/角部拖拽调整大小、收起成可拖动的边缘把手；大小与位置自动记忆
+- **滚动条跟随停靠方向** —— 停靠左侧时滚动条在左，停靠右侧时在右
+- **分页渲染** —— 默认显示最近几组，大纲滚动到顶部自动加载更早的组
+- **Markdown 清理** —— 标题中的 `**加粗**`、*斜体*、`` `代码` ``、`[链接](url)`、`~~删除线~~` 等行内标记自动剥离
+- 对话无标题时自动隐藏；适配深色 / 浅色主题
+
+## 安装
+
+通过 DSH CLI 安装（仓库路径替换为实际值）：
+
+```
+dsh plugin --profile web add github:LyaxZ/dsh-quick-toc
+```
+
+或本地目录安装：
+
+```
+dsh plugin --profile web add <本目录路径>
+```
+
+重启 DSH（Windows 上双击 `restart-dsh.bat`）后打开 Web UI。大纲默认收起——点击对话区左侧边缘的小把手展开。
+
+## 使用
+
+- 点击大纲标题跳转到对话中对应位置
+- 拖动顶部横条移动面板；点 **◀ / ▶** 按钮切换左右停靠
+- 拖右边缘调宽度、下边缘调高度、右下角同时调
+- 大纲滚动到顶部可加载更早的组
+
+## 开发
+
+- `lib/client.js` —— 全部 UI 逻辑（浏览器端）
+- `lib/index.js` —— 宿主端空入口
+- `cordis.patch.yml` —— loader patch（符合官方 bundle 规范）
+- 改 client.js 后浏览器硬刷新即可生效；改 loader / patch 需重启 DSH
+
+## License
+
+MIT © 2026 LyaxZ

package/cordis.patch.yml

@@ -0,0 +1,4 @@
+# dsh-quick-toc bundle patch: one loader row.
+- insert:
+    - id: quick-toc
+      name: dsh-quick-toc

package/lib/client.js

@@ -0,0 +1,948 @@
+window.__ModuleLoader__.load({
+  id: "dsh-quick-toc",
+  factory: (require) => {
+    var module = { exports: {} };
+    var exports = module.exports;
+    Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+    let react = require("react");
+    let react_jsx_runtime = require("react/jsx-runtime");
+    require("@deepseek-ai/dsh-client-runtime/client");
+
+    // ---------- constants ----------
+    var PANEL_WIDTH = 288;
+    var Z_BASE = 950;
+    var EASE = "cubic-bezier(0.22, 0.9, 0.3, 1)"; // smooth non-linear slide
+
+    // ---------- markdown helpers ----------
+    function extractReplyText(node) {
+      var blocks = node && node.data && node.data.blocks;
+      if (!Array.isArray(blocks)) return "";
+      var out = "";
+      for (var i = 0; i < blocks.length; i++) {
+        var b = blocks[i];
+        if (b && typeof b === "object" && (b.kind === "text" || b.type === "text") && typeof b.text === "string") {
+          out += b.text + "\n";
+        }
+      }
+      return out;
+    }
+
+    // strip inline markdown from a heading title: **bold**, *italic*,
+    // `code`, ~~strike~~, [link](url) -> link text
+    function cleanTitle(t) {
+      return t
+        .replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
+        .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+        .replace(/\*\*([^*]+)\*\*/g, "$1")
+        .replace(/__([^_]+)__/g, "$1")
+        .replace(/\*([^*]+)\*/g, "$1")
+        .replace(/_([^_]+)_/g, "$1")
+        .replace(/`([^`]+)`/g, "$1")
+        .replace(/~~([^~]+)~~/g, "$1")
+        .trim();
+    }
+
+    function parseHeadings(text) {
+      var items = [];
+      var re = /^(#{1,6})\s+(.+?)\s*#*\s*$/gm;
+      var m;
+      while ((m = re.exec(text)) !== null) {
+        items.push({ level: m[1].length, title: cleanTitle(m[2].trim()) });
+      }
+      return items;
+    }
+
+    function buildTree(headings) {
+      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: [] };
+        stack[stack.length - 1].children.push(node);
+        stack.push(node);
+      }
+      return root.children;
+    }
+
+    function findRow(key) {
+      if (!key) return null;
+      var rows = document.querySelectorAll("[data-chat-anchor-key]");
+      // 1) exact dataset match
+      for (var i = 0; i < rows.length; i++) {
+        if (rows[i].dataset && rows[i].dataset.chatAnchorKey === key) return rows[i];
+      }
+      // 2) CSS attribute selector (keys may contain special chars)
+      try {
+        var el = document.querySelector('[data-chat-anchor-key="' + window.CSS.escape(key) + '"]');
+        if (el) return el;
+      } catch (e) {}
+      // 3) contains match (one side may be prefixed/suffixed)
+      for (var j = 0; j < rows.length; j++) {
+        var k = rows[j].dataset && rows[j].dataset.chatAnchorKey;
+        if (k && (k.indexOf(key) >= 0 || key.indexOf(k) >= 0)) return rows[j];
+      }
+      return null;
+    }
+
+    // ---------- theme colors: DSH CSS variables (adapt to light/dark) ----------
+    var C = {
+      panelBg: "var(--dsw-alias-bg-base, rgba(24, 28, 36, 0.96))",
+      panelBorder: "var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.25))",
+      text: "var(--dsw-alias-label-primary, #e8eaee)",
+      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)"
+    };
+
+    // ---------- error boundary ----------
+    var ErrorBoundary = (function () {
+      if (!react.Component) return function (p) { return p.children; };
+      function EB(props) {
+        this.props = props;
+        this.state = { err: null };
+      }
+      EB.prototype = Object.create(react.Component.prototype);
+      EB.prototype.constructor = EB;
+      EB.getDerivedStateFromError = function (e) { return { err: e }; };
+      EB.prototype.componentDidCatch = function (e) { console.error("[dsh-quick-toc] render error:", e); };
+      EB.prototype.render = function () {
+        if (this.state.err) {
+          var msg = this.state.err && this.state.err.message ? this.state.err.message : String(this.state.err);
+          return react_jsx_runtime.jsx("div", {
+            style: {
+              position: "fixed",
+              top: 80,
+              right: 16,
+              zIndex: Z_BASE + 1,
+              background: "rgba(120,30,30,0.95)",
+              border: "1px solid rgba(255,120,120,0.4)",
+              color: "#ffdada",
+              borderRadius: 8,
+              padding: "10px 14px",
+              fontSize: 12,
+              maxWidth: 340,
+              wordBreak: "break-all"
+            },
+            children: "dsh-quick-toc 面板出错: " + msg
+          });
+        }
+        return this.props.children;
+      };
+      return EB;
+    })();
+
+    // ---------- component ----------
+    function OutlinePanel(props) {
+      var useSession = props.useSession;
+      if (!useSession) {
+        console.warn("[dsh-quick-toc] useSession prop missing");
+        return null;
+      }
+      var order = useSession(function (s) { return s.chat.order; });
+      var nodes = useSession(function (s) { return s.chat.nodes; });
+
+      // ---- hooks (ALL before any conditional return) ----
+      // collapsed by default; user expands via the edge handle (default dock: left)
+      var _s1 = react.useState(false);
+      var open = _s1[0];
+      var setOpen = _s1[1];
+
+      // conversation area measurement
+      var _s2 = react.useState(null);
+      var viewport = _s2[0];
+      var setViewport = _s2[1];
+      react.useEffect(function () {
+        var compute = function () {
+          var sp = document.querySelector("[data-conversation-scroll]");
+          if (sp) {
+            var r = sp.getBoundingClientRect();
+            setViewport({ left: r.left, right: window.innerWidth - r.right, top: r.top, height: r.height });
+          }
+        };
+        compute();
+        window.addEventListener("resize", compute);
+        var sp = document.querySelector("[data-conversation-scroll]");
+        var obs = null;
+        if (typeof ResizeObserver !== "undefined" && sp) {
+          obs = new ResizeObserver(compute);
+          obs.observe(sp);
+        }
+        return function () {
+          window.removeEventListener("resize", compute);
+          if (obs) obs.disconnect();
+        };
+      }, []);
+
+      // dock side: 'left' | 'right' (persisted; migrates old dsh-contents /
+      // dsh-dagang keys, default left)
+      var DOCK_KEY = "dsh-quick-toc.dock.v2";
+      var OLD_DOCK_KEYS = ["dsh-contents.dock.v2", "dsh-dagang.dock.v2"];
+      var _s3 = react.useState(function () {
+        try {
+          var d = localStorage.getItem(DOCK_KEY);
+          if (d === "left" || d === "right") return d;
+          for (var oi = 0; oi < OLD_DOCK_KEYS.length; oi++) {
+            var old = localStorage.getItem(OLD_DOCK_KEYS[oi]);
+            if (old === "left" || old === "right") { localStorage.setItem(DOCK_KEY, old); return old; }
+          }
+        } catch (e) {}
+        return "left";
+      });
+      var dock = _s3[0];
+      var setDock = _s3[1];
+      var toggleDock = function () {
+        var next = dock === "right" ? "left" : "right";
+        setDock(next);
+        try { localStorage.setItem(DOCK_KEY, next); } catch (e) {}
+      };
+
+      // vertical drag offset (persisted; migrates old dsh-contents / dsh-dagang keys)
+      var PANEL_Y_KEY = "dsh-quick-toc.panelY.v1";
+      var OLD_PANEL_Y_KEYS = ["dsh-contents.panelY.v1", "dsh-dagang.panelY.v1"];
+      var _s4 = react.useState(function () {
+        try {
+          var v = localStorage.getItem(PANEL_Y_KEY);
+          if (v !== null && isFinite(Number(v))) return Number(v);
+          for (var oi = 0; oi < OLD_PANEL_Y_KEYS.length; oi++) {
+            var old = localStorage.getItem(OLD_PANEL_Y_KEYS[oi]);
+            if (old !== null && isFinite(Number(old))) { localStorage.setItem(PANEL_Y_KEY, old); return Number(old); }
+          }
+        } catch (e) {}
+        return 0;
+      });
+      var panelY = _s4[0];
+      var setPanelY = _s4[1];
+      var handleRef = react.useRef(null);      // panel top drag bar
+      var edgeRef = react.useRef(null);        // edge collapse handle
+
+      // handle reveal: after the panel fully slides away, the handle fades+pops in
+      var _s5 = react.useState(false);
+      var handleShown = _s5[0];
+      var setHandleShown = _s5[1];
+      react.useEffect(function () {
+        if (!open) {
+          setHandleShown(false);
+          var t = setTimeout(function () { setHandleShown(true); }, 300); // right after the panel slides away
+          return function () { clearTimeout(t); };
+        }
+        setHandleShown(false);
+      }, [open]);
+      // panel hover: clear when mouse inside, transparent when outside
+      var _s6 = react.useState(false);
+      var hovered = _s6[0];
+      var setHovered = _s6[1];
+
+      // panel size (persisted; width default 288, height 0 = auto)
+      var PANEL_W_KEY = "dsh-quick-toc.panelW.v1";
+      var PANEL_H_KEY = "dsh-quick-toc.panelH.v1";
+      var _s7 = react.useState(function () {
+        try { var w = Number(localStorage.getItem(PANEL_W_KEY)); if (isFinite(w) && w >= 180) return w; } catch (e) {}
+        return PANEL_WIDTH;
+      });
+      var panelW = _s7[0];
+      var setPanelW = _s7[1];
+      var _s8 = react.useState(function () {
+        try { var h = Number(localStorage.getItem(PANEL_H_KEY)); if (isFinite(h) && h >= 160) return h; } catch (e) {}
+        return 0;
+      });
+      var panelH = _s8[0];
+      var setPanelH = _s8[1];
+
+      // ---- pagination: show the latest N groups; scrolling to the top loads older ----
+      var PAGE_SIZE = 6;
+      var _s9 = react.useState(PAGE_SIZE);
+      var visibleCount = _s9[0];
+      var setVisibleCount = _s9[1];
+      var listRef = react.useRef(null);
+      var didInitScroll = react.useRef(false);
+
+      // the group currently being read (under the list viewport middle):
+      // it stays at full opacity, every other group is dimmed
+      var _s10 = react.useState([]);
+      var activeGroup = _s10[0];
+      var setActiveGroup = _s10[1];
+      var activeSigRef = react.useRef("");
+
+      // first time content appears, scroll the list to the bottom (newest)
+      react.useEffect(function () {
+        if (didInitScroll.current || !listRef.current || !groups || groups.length === 0) return;
+        didInitScroll.current = true;
+        listRef.current.scrollTop = listRef.current.scrollHeight;
+      }, [groups ? groups.length : 0]);
+
+      // scroll to the top edge loads older groups (keeps the visual position)
+      var onListScroll = function (e) {
+        var el = e.currentTarget;
+        if (el.scrollTop <= 24 && visibleCount < groups.length) {
+          var prevH = el.scrollHeight;
+          setVisibleCount(Math.min(groups.length, visibleCount + PAGE_SIZE));
+          requestAnimationFrame(function () {
+            requestAnimationFrame(function () {
+              el.scrollTop += (el.scrollHeight - prevH);
+            });
+          });
+        }
+      };
+
+      // ---- resize drags (right edge = width, bottom edge = height) ----
+      var onResizeWDown = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.button !== 0) return;
+        var startX = e.clientX;
+        var startW = panelW;
+        var lastW = panelW;
+        var move = function (ev) {
+          var next = Math.max(180, Math.min(560, startW + (ev.clientX - startX)));
+          lastW = next;
+          setPanelW(next);
+        };
+        var up = function () {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          try { localStorage.setItem(PANEL_W_KEY, String(lastW)); } catch (e2) {}
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      };
+      var onResizeHDown = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.button !== 0) return;
+        var startY = e.clientY;
+        var startH = panelH > 0 ? panelH : 400;
+        var lastH = startH;
+        var move = function (ev) {
+          var next = Math.max(160, Math.min(window.innerHeight - 60, startH + (ev.clientY - startY)));
+          lastH = next;
+          setPanelH(next);
+        };
+        var up = function () {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          try { localStorage.setItem(PANEL_H_KEY, String(lastH)); } catch (e2) {}
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      };
+      var onResizeCornerDown = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.button !== 0) return;
+        var startX = e.clientX;
+        var startY = e.clientY;
+        var startW = panelW;
+        var startH = panelH > 0 ? panelH : 400;
+        var lastW = startW;
+        var lastH = startH;
+        var move = function (ev) {
+          var w = Math.max(180, Math.min(560, startW + (ev.clientX - startX)));
+          var h = Math.max(160, Math.min(window.innerHeight - 60, startH + (ev.clientY - startY)));
+          lastW = w;
+          lastH = h;
+          setPanelW(w);
+          setPanelH(h);
+        };
+        var up = function () {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          try {
+            localStorage.setItem(PANEL_W_KEY, String(lastW));
+            localStorage.setItem(PANEL_H_KEY, String(lastH));
+          } catch (e2) {}
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      };
+
+      // ---- node timestamp -> HH:MM (handles ms / s epochs / ISO strings) ----
+      var fmtTime = function (t) {
+        if (t === undefined || t === null) return "";
+        if (typeof t === "string") {
+          var d0 = new Date(t);
+          if (isNaN(d0.getTime())) return "";
+          var hh0 = ("0" + d0.getHours()).slice(-2);
+          var mm0 = ("0" + d0.getMinutes()).slice(-2);
+          return hh0 + ":" + mm0;
+        }
+        var n = Number(t);
+        if (!isFinite(n) || n <= 0) return "";
+        if (n < 1e12) n = n * 1000; // epoch seconds -> ms
+        var d = new Date(n);
+        if (isNaN(d.getTime())) return "";
+        var hh = ("0" + d.getHours()).slice(-2);
+        var mm = ("0" + d.getMinutes()).slice(-2);
+        return hh + ":" + mm;
+      };
+
+      // ---- best-effort node time across common field names ----
+      var getNodeTime = function (node) {
+        var d = node && node.data;
+        if (!d) return "";
+        var t = d.time !== undefined ? d.time : (d.createdAt !== undefined ? d.createdAt : d.timestamp);
+        return fmtTime(t);
+      };
+
+      // ---- group headings by conversation turn (node.location.turn) ----
+      var groups = react.useMemo(function () {
+        var result = [];
+        var current = null;
+        var turnTimes = {};
+        if (!order || !nodes) return result;
+        // first pass: per-turn time — the LAST message of the turn wins (end time)
+        for (var i = 0; i < order.length; i++) {
+          var k0 = order[i];
+          var n0 = nodes.get(k0);
+          if (!n0 || (n0.kind !== "user" && n0.kind !== "assistant-step")) continue;
+          var l0 = n0.location;
+          var tid0 = l0 && (l0.kind === "turn" || l0.kind === "step") && l0.turn ? l0.turn.turn : null;
+          if (tid0 === null) continue;
+          var t0 = getNodeTime(n0);
+          if (t0) turnTimes[tid0] = t0;
+        }
+        // second pass: group assistant headings by turn
+        for (var j = 0; j < order.length; j++) {
+          var key = order[j];
+          var node = nodes.get(key);
+          if (!node || node.kind !== "assistant-step") continue;
+          var loc = node.location;
+          var turnId = loc && (loc.kind === "turn" || loc.kind === "step") && loc.turn ? loc.turn.turn : null;
+          var sameGroup = current !== null && current.turn === turnId;
+          if (!sameGroup) {
+            current = { turn: turnId, time: turnId !== null ? (turnTimes[turnId] || "") : "", headings: [] };
+            result.push(current);
+          }
+          var parsed = parseHeadings(extractReplyText(node));
+          var hIdx = 0;
+          for (var k = 0; k < parsed.length; k++) {
+            current.headings.push({ level: parsed[k].level, title: parsed[k].title, key: key, idx: hIdx });
+            hIdx++;
+          }
+        }
+        return result.filter(function (g) { return g.headings.length > 0; });
+      }, [order, nodes]);
+      var groupTrees = react.useMemo(function () {
+        return groups.map(function (g) { return buildTree(g.headings); });
+      }, [groups]);
+      // pagination slice: the latest `visibleCount` groups
+      var shownGroups = groups.slice(Math.max(0, groups.length - visibleCount));
+      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
+      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;
+          }
+        }
+        return m;
+      }, [groups]);
+      react.useEffect(function () {
+        var sp = document.querySelector("[data-conversation-scroll]");
+        if (!sp) return;
+        var update = function () {
+          var lr = sp.getBoundingClientRect();
+          var vTop = lr.top;
+          var vBottom = lr.top + lr.height;
+          var rows = sp.querySelectorAll("[data-chat-anchor-key]");
+          var actives = [];
+          var seen = {};
+          for (var i = 0; i < rows.length; i++) {
+            var r = rows[i].getBoundingClientRect();
+            if (r.top < vBottom && r.bottom > vTop) {
+              var k = rows[i].dataset.chatAnchorKey;
+              var gi = keyToGroup[k];
+              if (gi !== undefined && !seen[gi]) { seen[gi] = true; actives.push(gi); }
+            }
+          }
+          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
+            if (actives.length > 0) {
+              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);
+              }
+            }
+          }
+        };
+        update();
+        sp.addEventListener("scroll", update, { passive: true });
+        return function () { sp.removeEventListener("scroll", update); };
+      }, [keyToGroup]);
+
+      // ---- nothing to show without headings ----
+      if (groups.length === 0) return null;
+
+      // ---- geometry: always position by `left` (px) so dock-switch & slide share one animated transition
+      var dockRight = dock === "right";
+      var panelLeft;
+      if (open) {
+        panelLeft = dockRight
+          ? window.innerWidth - (viewport ? viewport.right + 48 : 60) - panelW
+          : (viewport ? viewport.left + 8 : 8);
+      } else {
+        panelLeft = dockRight ? window.innerWidth + 24 : -(panelW + 48);
+      }
+      var vMaxH = viewport ? Math.max(200, viewport.height - 28) : "72vh";
+      var baseTopPx = (viewport ? viewport.top + 14 : window.innerHeight * 0.12) + panelY;
+
+      // ---- panel top drag bar ----
+      var onHandleDown = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.button !== 0) return;
+        var startY = e.clientY;
+        var origY = panelY;
+        var move = function (ev) {
+          var next = origY + (ev.clientY - startY);
+          next = Math.max(-(viewport ? viewport.top : 0), Math.min(window.innerHeight - 90, next));
+          setPanelY(next);
+        };
+        var up = function () {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          try { localStorage.setItem(PANEL_Y_KEY, String(panelY)); } catch (e2) {}
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      };
+      var handleBright = function (on) {
+        if (handleRef.current) handleRef.current.style.opacity = on ? "1" : "0.35";
+      };
+
+      // ---- 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;
+        if (!sp) {
+          el.scrollIntoView({ behavior: "smooth", block: "start" });
+          return;
+        }
+        var t = el.getBoundingClientRect().top - sp.getBoundingClientRect().top + sp.scrollTop - 20;
+        var floor = Math.max(0, sp.scrollHeight - sp.clientHeight);
+        if (floor - sp.scrollTop <= 25 && Math.abs(t - sp.scrollTop) > 60) {
+          sp.scrollTop = Math.max(0, floor - 26);
+        }
+        sp.scrollTo({ top: t, behavior: "smooth" });
+      };
+
+      // ---- circular icon button (glyph optical offset: ox/oy px) ----
+      var iconBtn = function (onClick, tip, glyph, fontSize, offset) {
+        var ox = offset ? (offset.x || 0) : 0;
+        var oy = offset ? (offset.y || 0) : 0;
+        return react_jsx_runtime.jsx("button", {
+          onClick: onClick,
+          style: {
+            width: 24,
+            height: 24,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "50%",
+            background: "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))",
+            border: "none",
+            color: C.muted,
+            cursor: "pointer",
+            fontSize: fontSize || 13,
+            lineHeight: "1",
+            padding: 0,
+            flex: "none",
+            transition: "background 0.18s ease, color 0.18s ease"
+          },
+          title: tip,
+          onMouseEnter: function (e) {
+            e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-active, rgba(79,140,255,0.24))";
+            e.currentTarget.style.color = "var(--dsw-alias-brand-primary, #4f8cff)";
+          },
+          onMouseLeave: function (e) {
+            e.currentTarget.style.background = "var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,0.16))";
+            e.currentTarget.style.color = C.muted;
+          },
+          children: react_jsx_runtime.jsx("span", {
+            style: {
+              display: "inline-block",
+              lineHeight: 1,
+              transform: "translate(" + ox + "px," + oy + "px)"
+            },
+            children: glyph
+          })
+        });
+      };
+
+      // ---- panel ----
+      // panel: non-linear slide with fade in/out, slightly slower for a smoother feel
+      var panelTransition = "left 0.6s " + EASE + ", opacity 0.45s ease";
+      var panelOpacity = open ? (hovered ? 0.95 : 0.45) : 0;
+
+      var panelEl = react_jsx_runtime.jsx("div", {
+        style: {
+          position: "fixed",
+          top: baseTopPx + "px",
+          left: panelLeft + "px",
+          width: panelW + "px",
+          maxHeight: vMaxH,
+          height: panelH > 0 ? panelH + "px" : undefined,
+          display: "flex",
+          flexDirection: "column",
+          background: C.panelBg,
+          border: "none",
+          borderRadius: 12,
+          boxShadow: "0 2px 10px rgba(0,0,0,0.18)",
+          zIndex: Z_BASE,
+          overflow: "hidden",
+          color: C.text,
+          opacity: panelOpacity,
+          transition: panelTransition,
+          pointerEvents: "auto"
+        },
+        onMouseEnter: function () { setHovered(true); },
+        onMouseLeave: function () { setHovered(false); },
+        onClickCapture: function (e) {
+          // jump handled in the capture phase (bubble-phase handlers are unreliable here)
+          var t = e.target;
+          var item = (t && t.closest) ? t.closest("[data-jump-key]") : null;
+          if (item && item.dataset && item.dataset.jumpKey) {
+            e.preventDefault();
+            e.stopPropagation();
+            var idx = item.dataset.jumpIdx !== undefined ? Number(item.dataset.jumpIdx) : 0;
+            jump(item.dataset.jumpKey, idx);
+          }
+        },
+        children: [
+          // top block: small grip bar on top + header row below (whole block draggable)
+          react_jsx_runtime.jsx("div", {
+            style: {
+              flex: "none",
+              cursor: "grab",
+              userSelect: "none"
+            },
+            title: "按住拖动调整位置",
+            onPointerDown: onHandleDown,
+            onMouseEnter: function () { handleBright(true); },
+            onMouseLeave: function () { handleBright(false); },
+            children: [
+              react_jsx_runtime.jsx("div", {
+                ref: handleRef,
+                style: {
+                  width: 56,
+                  height: 5,
+                  borderRadius: 999,
+                  background: "var(--dsw-alias-border-l2, rgba(128,128,128,0.55))",
+                  opacity: 0.35,
+                  transition: "opacity 0.2s ease",
+                  margin: "5px auto 2px"
+                }
+              }),
+              react_jsx_runtime.jsx("div", {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  padding: "1px 10px 5px",
+                  borderBottom: "1px solid " + C.panelBorder,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  gap: 6
+                },
+                children: [
+                  // 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: "对话大纲",
+                    children: react_jsx_runtime.jsx("svg", {
+                      width: 18,
+                      height: 14,
+                      viewBox: "0 0 18 14",
+                      style: { display: "block" },
+                      children: [
+                        react_jsx_runtime.jsx("line", { x1: 0, y1: 2, x2: 18, y2: 2, stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }),
+                        react_jsx_runtime.jsx("line", { x1: 0, y1: 7, x2: 12, y2: 7, stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" }),
+                        react_jsx_runtime.jsx("line", { x1: 0, y1: 12, x2: 6, y2: 12, stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" })
+                      ]
+                    })
+                  }),
+                  react_jsx_runtime.jsx("div", {
+                    style: { display: "flex", alignItems: "center", gap: 6, flex: "none" },
+                    children: [
+                      // triangle tips toward the side it will move TO: shift slightly down + toward the tip
+                      iconBtn(toggleDock, dockRight ? "移到左侧" : "移到右侧", dockRight ? "◀" : "▶", 12, dockRight ? { x: -1, y: 1 } : { x: 1, y: 1 }),
+                      iconBtn(function () { setOpen(false); }, "收起", "✕", 13, { x: 0, y: -1 })
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          // outline list (paged: newest first, scroll to the top loads older);
+          // the scrollbar follows the dock side (rtl flips it to the left)
+          react_jsx_runtime.jsx("div", {
+            ref: listRef,
+            style: {
+              overflowY: "auto",
+              padding: "6px 8px",
+              maxHeight: "60vh",
+              flex: "1 1 auto",
+              minHeight: 0,
+              direction: dockRight ? "ltr" : "rtl"
+            },
+            onScroll: onListScroll,
+            children: react_jsx_runtime.jsx("div", {
+              style: { direction: "ltr" },
+              children: renderGroups(shownGroups, shownTrees, jump, C, Math.max(0, groups.length - visibleCount), activeGroup)
+            })
+          }),
+          // resize handles (right edge: width, bottom edge: height)
+          react_jsx_runtime.jsx("div", {
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              right: 0,
+              width: 8,
+              cursor: "col-resize",
+              touchAction: "none",
+              zIndex: 2
+            },
+            onPointerDown: onResizeWDown,
+            title: "拖拽调整宽度"
+          }),
+          react_jsx_runtime.jsx("div", {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              height: 8,
+              cursor: "row-resize",
+              touchAction: "none",
+              zIndex: 2
+            },
+            onPointerDown: onResizeHDown,
+            title: "拖拽调整高度"
+          }),
+          // corner handle: resize width AND height at once
+          react_jsx_runtime.jsx("div", {
+            style: {
+              position: "absolute",
+              right: 0,
+              bottom: 0,
+              width: 16,
+              height: 16,
+              cursor: "nwse-resize",
+              touchAction: "none",
+              zIndex: 3
+            },
+            onPointerDown: onResizeCornerDown,
+            title: "拖拽同时调整宽高"
+          })
+        ]
+      });
+
+      // ---- edge collapse handle: fades+pops in after the panel fully slides away ----
+      var edgeEl = !open ? react_jsx_runtime.jsx("div", {
+        style: {
+          position: "fixed",
+          width: 26,
+          height: 92,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          zIndex: Z_BASE,
+          top: (viewport ? viewport.top + viewport.height / 2 - 46 : "50%"),
+          transform: handleShown ? "translateX(0)" : (dockRight ? "translateX(16px)" : "translateX(-16px)"),
+          transition: "transform 0.4s " + EASE,
+          ...(dockRight
+            ? { right: viewport ? viewport.right + 52 : 60 }   // clear of the milestone rail
+            : { left: viewport ? viewport.left : 0 })
+        },
+        title: "展开大纲",
+        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"; },
+        children: react_jsx_runtime.jsx("div", {
+          ref: edgeRef,
+          style: {
+            width: 12,
+            height: 80,
+            borderRadius: 999,
+            background: "var(--dsw-alias-border-l2, rgba(160,160,160,0.55))",
+            opacity: handleShown ? 0.5 : 0,
+            transition: "opacity 0.35s ease, background 0.25s ease",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "var(--dsw-alias-label-secondary, #9aa0ab)",
+            cursor: "pointer"
+          },
+          children: react_jsx_runtime.jsx("svg", {
+            width: 9,
+            height: 24,
+            viewBox: "0 0 9 24",
+            style: { display: "block" },
+            children: react_jsx_runtime.jsx("path", {
+              // tip points OUTWARD (toward where the panel will pop out):
+              // docked left -> points right; docked right -> points left
+              d: dockRight ? "M7 4 L1.5 12 L7 20 Z" : "M2 4 L7.5 12 L2 20 Z",
+              fill: "currentColor"
+            })
+          })
+        })
+      }) : null;
+
+      return react_jsx_runtime.jsx(ErrorBoundary, {
+        children: [panelEl, edgeEl]
+      });
+    }
+
+    function renderItem(n, depth, jump, C, uid) {
+      return react_jsx_runtime.jsx(
+        "div",
+        {
+          onClick: function () { jump(n.key, n.idx); },
+          "data-jump-key": n.key,
+          "data-jump-idx": n.idx !== undefined ? String(n.idx) : "0",
+          style: {
+            padding: "2px 6px",
+            paddingLeft: 8 + (n.level - 1) * 12,
+            margin: "1px 0",
+            borderRadius: 6,
+            cursor: "pointer",
+            fontSize: n.level <= 2 ? 13 : 12,
+            color: n.level <= 2 ? C.text : C.muted,
+            fontWeight: n.level <= 2 ? 600 : 400,
+            lineHeight: "18px",
+            height: 22,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          },
+          onMouseEnter: function (e) { e.currentTarget.style.background = C.hover; },
+          onMouseLeave: function (e) { e.currentTarget.style.background = "transparent"; },
+          title: n.title,
+          children: n.title
+        },
+        uid + "-" + n.level + "-" + (n.key || "")
+      );
+    }
+
+    function renderNodes(nodes, depth, jump, C, uid) {
+      var out = [];
+      for (var i = 0; i < nodes.length; i++) {
+        var n = nodes[i];
+        out.push(renderItem(n, depth, jump, C, uid + "-" + i));
+        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));
+        }
+      }
+      return out;
+    }
+
+    // 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) {
+      var base = offset || 0;
+      var activeSet = {};
+      if (Array.isArray(activeIdx)) {
+        for (var a = 0; a < activeIdx.length; a++) activeSet[activeIdx[a]] = true;
+      }
+      var out = [];
+      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", {
+          style: { borderTop: "1px solid " + C.panelBorder, margin: "7px 2px 3px", height: 0 }
+        }, "g-sep-" + gi));
+        if (g.time) {
+          items.push(react_jsx_runtime.jsx("div", {
+            style: { padding: "1px 4px 2px", fontSize: 11, color: C.muted, fontWeight: 600, lineHeight: "15px", height: 18 },
+            children: g.time
+          }, "g-h-" + gi));
+        } else {
+          items.push(react_jsx_runtime.jsx("div", { style: { height: 18 }, children: null }, "g-h-" + gi));
+        }
+        items.push(renderNodes(trees[i], 0, jump, C, "g" + gi));
+        var dim = !activeSet[gi];
+        out.push(react_jsx_runtime.jsx("div", {
+          "data-group-idx": gi,
+          style: { opacity: dim ? 0.55 : 1, transition: "opacity 0.3s ease" },
+          children: items
+        }, "g-" + gi));
+      }
+      return out;
+    }
+
+    function OutlineOverlay(props) {
+      var SessionProvider = props.SessionProvider;
+      var renderSlot = props.renderSlot;
+      return react_jsx_runtime.jsx(SessionProvider, {
+        empty: function () { return null; },
+        children: function () { return renderSlot("quick-toc.panel", {}); }
+      });
+    }
+
+    var zh = {
+      "panel.title": "对话大纲"
+    };
+    var en = {
+      "panel.title": "Conversation Outline"
+    };
+
+    var inject = ["slots", "sessions", "locale"];
+
+    function apply(ctx) {
+      ctx.effect(function () {
+        return ctx.locale.register("dsh-quick-toc", { zh: zh, en: en });
+      }, "dsh-quick-toc: dictionaries");
+      ctx.slots.inject("shell.overlay", function () {
+        return ctx.slots.register({
+          name: "shell.overlay",
+          id: "quick-toc",
+          order: 90,
+          children: { "quick-toc.panel": { kind: "single", scope: "session" } }
+        }, OutlineOverlay);
+      });
+      ctx.slots.inject("quick-toc.panel", function () {
+        return ctx.slots.register({
+          name: "quick-toc.panel",
+          locale: "dsh-quick-toc"
+        }, OutlinePanel);
+      });
+    }
+
+    exports.apply = apply;
+    exports.inject = inject;
+    return module.exports;
+  }
+});

package/lib/index.js

@@ -0,0 +1,8 @@
+/**
+ * dsh-outline node half. Pure UI plugin: the empty apply exists so the
+ * plugin appears in the host loader (load and lifecycle follow the host);
+ * the browser half ships via exports["./client"], discovered through the
+ * package.json dsh.client declaration.
+ */
+function apply() {}
+export { apply };

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "dsh-quick-toc",
+  "version": "0.1.0",
+  "description": "Quick conversation TOC for DeepSeek Harness: markdown heading outline grouped by turn, with auto-follow highlight and smooth jump navigation",
+  "type": "module",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "cordis.patch.yml",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-layout"
+      ],
+      "platform": "web"
+    }
+  },
+  "license": "MIT",
+  "keywords": [
+    "dsh",
+    "deepseek-harness",
+    "plugin",
+    "toc",
+    "outline",
+    "markdown"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LyaxZ/dsh-quick-toc.git"
+  }
+}