dsh-conversation-navigator 0.1.2 → 0.1.3

package/lib/client.js

@@ -127,6 +127,7 @@ window.__ModuleLoader__.load({
   flex: none; color: var(--dsw-alias-label-secondary, #888); font-size: 10px; opacity: .8;
 }
 .cnvnav-empty { padding: 18px 10px; text-align: center; color: var(--dsw-alias-label-secondary, #888); }
+.cnvnav-topbar { display: flex; gap: 6px; margin: 6px 6px 0; }
 .cnvnav-footer { display: flex; gap: 6px; margin: 0 6px 6px; }
 .cnvnav-bottom {
   flex: 1; padding: 7px; border-radius: 8px;
@@ -135,12 +136,15 @@ window.__ModuleLoader__.load({
   color: var(--dsw-alias-label-primary, #222); cursor: pointer; font-size: 12px;
 }
 .cnvnav-bottom:hover { border-color: var(--dsw-alias-brand-primary, #4f46e5); color: var(--dsw-alias-brand-primary, #4f46e5); }
+.cnvnav-bottom:disabled { opacity: .45; cursor: default; border-color: var(--dsw-alias-border-l1, rgba(128,128,128,.35)); color: var(--dsw-alias-label-secondary, #888); }
+.cnvnav-bottom:disabled:hover { border-color: var(--dsw-alias-border-l1, rgba(128,128,128,.35)); color: var(--dsw-alias-label-secondary, #888); }
 `;
 
 		function apply(ctx) {
 			const slots = ctx.get("slots");
 			if (slots === undefined) return;
 			const timer = ctx.get("timer");
+			const sessions = ctx.get("sessions");
 
 			/* own stylesheet with fiber-scoped cleanup */
 			const styleEl = document.createElement("style");
@@ -150,7 +154,7 @@ window.__ModuleLoader__.load({
 			ctx.effect(() => () => styleEl.remove());
 
 			/* ---------- shared store (toggle button + overlay panel) ---------- */
-			let state = { open: true, sessionId: null, outline: null, activeKey: null, expanded: {} };
+			let state = { open: true, sessionId: null, outline: null, activeKey: null, expanded: {}, hasMore: false, loadingOlder: false, loadingAll: false };
 			const listeners = new Set();
 			function setState(patch) {
 				state = Object.assign({}, state, patch);
@@ -163,6 +167,38 @@ window.__ModuleLoader__.load({
 				return snap;
 			}
 
+			/* ---------- history paging ---------- */
+			let loadingAll = false;
+			function loadOlderPage() {
+				if (sessions === undefined) return;
+				const sid = state.sessionId;
+				if (sid === null) return;
+				const binding = sessions.binding(sid);
+				if (binding === undefined) return;
+				binding.session.loadOlder().catch((err) => console.error(err));
+			}
+			async function loadAllPages() {
+				if (sessions === undefined || loadingAll) return;
+				const sid = state.sessionId;
+				if (sid === null) return;
+				const binding = sessions.binding(sid);
+				if (binding === undefined) return;
+				loadingAll = true;
+				setState({ loadingAll: true });
+				try {
+					let guard = 0;
+					while (binding.session.getSnapshot().hasMore && guard < 500) {
+						await binding.session.loadOlder();
+						guard += 1;
+					}
+				} catch (err) {
+					console.error(err);
+				} finally {
+					loadingAll = false;
+					setState({ loadingAll: false });
+				}
+			}
+
 			/* ---------- outline derivation from ConversationSnapshot ---------- */
 			const KIND_META = {
 				"user": { label: "你", cls: "traj-user" },
@@ -382,9 +418,11 @@ window.__ModuleLoader__.load({
 			function ToggleButton(props) {
 				const snap = useStore();
 				const outline = props.useSession(selectOutline);
+				const hasMore = props.useSession((s) => s.hasMore);
+				const loadingOlder = props.useSession((s) => s.loadingOlder);
 				React.useEffect(() => {
-					setState({ sessionId: props.sessionId, outline: outline });
-				}, [outline, props.sessionId]);
+					setState({ sessionId: props.sessionId, outline: outline, hasMore: hasMore, loadingOlder: loadingOlder });
+				}, [outline, props.sessionId, hasMore, loadingOlder]);
 				React.useEffect(() => {
 					if (state.sessionId !== null && state.sessionId !== props.sessionId) {
 						lastActive = null;
@@ -542,6 +580,22 @@ window.__ModuleLoader__.load({
 							onClick: () => setState({ open: false }),
 						}, "×"),
 					),
+					React.createElement("div", { className: "cnvnav-topbar" },
+						React.createElement("button", {
+							type: "button",
+							className: "cnvnav-bottom",
+							disabled: !snap.hasMore || snap.loadingOlder,
+							title: "加载更早的一批轮次",
+							onClick: () => loadOlderPage(),
+						}, "△ 加载更早"),
+						React.createElement("button", {
+							type: "button",
+							className: "cnvnav-bottom",
+							disabled: !snap.hasMore || snap.loadingOlder || snap.loadingAll,
+							title: "加载全部历史轮次",
+							onClick: () => loadAllPages(),
+						}, "▴ 加载全部"),
+					),
 					React.createElement("div", {
 						ref: (el) => { listEl = el; },
 						className: "cnvnav-list",
@@ -583,7 +637,7 @@ window.__ModuleLoader__.load({
 			));
 		}
 
-		const inject = ["slots"];
+		const inject = ["slots", "sessions"];
 		exports.apply = apply;
 		exports.inject = inject;
 		return module.exports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-conversation-navigator",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Codex 风格的 DSH(DeepSeek Harness)会话导航插件:按轮折叠的对话大纲面板,支持节点点击跳转、滚动位置高亮与轨迹视图同款配色。",
   "keywords": [
     "dsh",