dsh-conversation-navigator 0.1.2 → 0.1.4

package/lib/client.js

@@ -5,26 +5,10 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		const React = require("react");
+		const { Button } = require("@deepseek-ai/dsh-client-ui-primitives");
 
 		/* ---------- own stylesheet (static packages have no styles builtin) ---------- */
 		const CSS = `
-.cnvnav-toggle {
-  display: inline-flex; align-items: center; gap: 6px;
-  height: 28px; padding: 0 10px; border-radius: 8px;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,.35));
-  background: transparent;
-  color: var(--dsw-alias-label-secondary, #666);
-  font-size: 12px; line-height: 1; cursor: pointer;
-}
-.cnvnav-toggle:hover {
-  background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12));
-  color: var(--dsw-alias-label-primary, #222);
-}
-.cnvnav-toggle-on {
-  color: var(--dsw-alias-brand-primary, #4f46e5);
-  border-color: var(--dsw-alias-brand-primary, #4f46e5);
-}
-.cnvnav-toggle svg { display: block; }
 .cnvnav-panel {
   position: fixed; z-index: 9999; width: 288px;
   display: flex; flex-direction: column;
@@ -45,15 +29,7 @@ window.__ModuleLoader__.load({
 }
 .cnvnav-title { font-weight: 600; font-size: 13px; }
 .cnvnav-count { color: var(--dsw-alias-label-secondary, #888); font-size: 11px; }
-.cnvnav-close {
-  margin-left: auto; border: none; background: transparent;
-  color: var(--dsw-alias-label-secondary, #888); cursor: pointer;
-  font-size: 16px; line-height: 1; padding: 2px 7px; border-radius: 6px;
-}
-.cnvnav-close:hover {
-  background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12));
-  color: var(--dsw-alias-label-primary, #222);
-}
+.cnvnav-close { margin-left: auto; }
 .cnvnav-list {
   overflow-y: auto; padding: 6px; min-height: 0;
   display: flex; flex-direction: column; gap: 2px;
@@ -127,20 +103,16 @@ 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;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,.35));
-  background: var(--dsw-alias-bg-layer-1, rgba(128,128,128,.06));
-  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-bar-btn { flex: 1; }
 `;
 
 		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 +122,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 +135,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,22 +386,25 @@ 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;
 						setState({ activeKey: null, expanded: {} });
 					}
 				}, [props.sessionId]);
-				return React.createElement("button", {
-					type: "button",
-					className: "cnvnav-toggle" + (snap.open ? " cnvnav-toggle-on" : ""),
+				return React.createElement(Button, {
+					variant: snap.open ? "primary" : "ghost",
+					size: "sm",
+					icon: React.createElement(ToggleIcon),
 					"aria-pressed": snap.open,
 					title: snap.open ? "收起会话导航" : "打开会话导航",
 					onClick: () => setState({ open: !snap.open }),
-				}, React.createElement(ToggleIcon), "导航");
+				}, "导航");
 			}
 
 			/* ---------- floating navigator panel ---------- */
@@ -535,13 +542,32 @@ window.__ModuleLoader__.load({
 					React.createElement("div", { className: "cnvnav-head" },
 						React.createElement("span", { className: "cnvnav-title" }, "会话导航"),
 						React.createElement("span", { className: "cnvnav-count" }, String(count) + " 条"),
-						React.createElement("button", {
-							type: "button",
+						React.createElement(Button, {
+							variant: "ghost",
+							size: "sm",
 							className: "cnvnav-close",
 							title: "收起",
 							onClick: () => setState({ open: false }),
 						}, "×"),
 					),
+					React.createElement("div", { className: "cnvnav-topbar" },
+						React.createElement(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "cnvnav-bar-btn",
+							disabled: !snap.hasMore || snap.loadingOlder,
+							title: "加载更早的一批轮次",
+							onClick: () => loadOlderPage(),
+						}, "△ 加载更早"),
+						React.createElement(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "cnvnav-bar-btn",
+							disabled: !snap.hasMore || snap.loadingOlder || snap.loadingAll,
+							title: "加载全部历史轮次",
+							onClick: () => loadAllPages(),
+						}, "▴ 加载全部"),
+					),
 					React.createElement("div", {
 						ref: (el) => { listEl = el; },
 						className: "cnvnav-list",
@@ -551,9 +577,10 @@ window.__ModuleLoader__.load({
 							: groupNodes,
 					),
 					React.createElement("div", { className: "cnvnav-footer" },
-						React.createElement("button", {
-							type: "button",
-							className: "cnvnav-bottom",
+						React.createElement(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "cnvnav-bar-btn",
 							onClick: () => {
 								const gs = snap.outline !== null ? snap.outline.groups : [];
 								if (gs.length === 0) return;
@@ -562,9 +589,10 @@ window.__ModuleLoader__.load({
 								if (lastItem !== undefined) jumpTo(lastItem.key);
 							},
 						}, "↓ 回到最新"),
-						React.createElement("button", {
-							type: "button",
-							className: "cnvnav-bottom",
+						React.createElement(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "cnvnav-bar-btn",
 							title: "折叠所有已展开的轮次",
 							onClick: () => setState({ expanded: {} }),
 						}, "▼ 全部折叠"),
@@ -583,7 +611,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.4",
   "description": "Codex 风格的 DSH(DeepSeek Harness)会话导航插件:按轮折叠的对话大纲面板,支持节点点击跳转、滚动位置高亮与轨迹视图同款配色。",
   "keywords": [
     "dsh",