dsh-conversation-navigator 0.1.3 → 0.1.5

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, IconPanelLeftOutline16, IconChevronUpOutline14, IconRefreshOutline14, IconChevronDownOutline14, IconTriangleRightFill14, IconCloseOutline16 } = 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;
@@ -129,15 +105,7 @@ window.__ModuleLoader__.load({
 .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-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); }
+.cnvnav-bar-btn { flex: 1; }
 `;
 
 		function apply(ctx) {
@@ -404,17 +372,6 @@ window.__ModuleLoader__.load({
 			const groupEls = {};
 
 			/* ---------- header toggle button ---------- */
-			function ToggleIcon() {
-				return React.createElement("svg", {
-					viewBox: "0 0 16 16", width: 14, height: 14, fill: "none",
-					stroke: "currentColor", strokeWidth: 1.4, "aria-hidden": true,
-				},
-					React.createElement("circle", { cx: 3, cy: 3.5, r: 1.1, fill: "currentColor", stroke: "none" }),
-					React.createElement("path", { d: "M6.2 3.5h7.8M6.2 8h7.8M6.2 12.5h7.8", strokeLinecap: "round" }),
-					React.createElement("circle", { cx: 3, cy: 8, r: 1.1, fill: "currentColor", stroke: "none" }),
-					React.createElement("circle", { cx: 3, cy: 12.5, r: 1.1, fill: "currentColor", stroke: "none" }),
-				);
-			}
 			function ToggleButton(props) {
 				const snap = useStore();
 				const outline = props.useSession(selectOutline);
@@ -429,13 +386,14 @@ window.__ModuleLoader__.load({
 						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(IconPanelLeftOutline16),
 					"aria-pressed": snap.open,
 					title: snap.open ? "收起会话导航" : "打开会话导航",
 					onClick: () => setState({ open: !snap.open }),
-				}, React.createElement(ToggleIcon), "导航");
+				}, "导航");
 			}
 
 			/* ---------- floating navigator panel ---------- */
@@ -573,28 +531,34 @@ 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",
+							icon: React.createElement(IconCloseOutline16, { size: 14 }),
 							title: "收起",
 							onClick: () => setState({ open: false }),
-						}, "×"),
+						}),
 					),
 					React.createElement("div", { className: "cnvnav-topbar" },
-						React.createElement("button", {
-							type: "button",
-							className: "cnvnav-bottom",
+						React.createElement(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "cnvnav-bar-btn",
+							icon: React.createElement(IconChevronUpOutline14),
 							disabled: !snap.hasMore || snap.loadingOlder,
 							title: "加载更早的一批轮次",
 							onClick: () => loadOlderPage(),
-						}, "△ 加载更早"),
-						React.createElement("button", {
-							type: "button",
-							className: "cnvnav-bottom",
+						}, "加载更早"),
+						React.createElement(Button, {
+							variant: "ghost",
+							size: "sm",
+							className: "cnvnav-bar-btn",
+							icon: React.createElement(IconRefreshOutline14),
 							disabled: !snap.hasMore || snap.loadingOlder || snap.loadingAll,
 							title: "加载全部历史轮次",
 							onClick: () => loadAllPages(),
-						}, "▴ 加载全部"),
+						}, "加载全部"),
 					),
 					React.createElement("div", {
 						ref: (el) => { listEl = el; },
@@ -605,9 +569,11 @@ 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",
+							icon: React.createElement(IconChevronDownOutline14),
 							onClick: () => {
 								const gs = snap.outline !== null ? snap.outline.groups : [];
 								if (gs.length === 0) return;
@@ -615,13 +581,15 @@ window.__ModuleLoader__.load({
 								const lastItem = lastGroup.items[lastGroup.items.length - 1];
 								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",
+							icon: React.createElement(IconTriangleRightFill14),
 							title: "折叠所有已展开的轮次",
 							onClick: () => setState({ expanded: {} }),
-						}, "▼ 全部折叠"),
+						}, "全部折叠"),
 					),
 				);
 			}

package/package.json

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