dsh-activity-pane 0.2.1 → 0.3.0

package/.dsh-plugin/client.js

@@ -1600,11 +1600,6 @@ function listLoadState(snapshot) {
 	return "ready";
 }
 
-/** 历史窗口：会话最后一次活动距现在不超过该毫秒数则视为"最近使用过"。 */
-const HISTORY_WINDOW_MS = 24 * 60 * 60 * 1000;
-/** 历史区最多展示的最近会话条数。 */
-const HISTORY_MAX = 20;
-
 /** 会话行是否为某主会话的直属子代理。 */
 function isSubagentRow(row, byId = {}) {
 	const id = row?.parentId;
@@ -1708,7 +1703,7 @@ function entryErrorNote(completion) {
 
 /**
  * 活动区→历史区迁移检测（R-01-010/AC-07）：上一帧活动区 id 在本帧离开活动区且出现于
- * 历史区即判定为一次迁移；彻底消失（归档、滑出历史窗口）不判定。prevActiveIds 为上一帧
+ * 历史区即判定为一次迁移；彻底消失（归档、不再被会话服务列出）不判定。prevActiveIds 为上一帧
  * 已渲染的活动区 id 集合，active/recent 为本帧派生条目。
  */
 function movedToRecentIds(prevActiveIds, active, recent) {
@@ -1724,7 +1719,7 @@ function movedToRecentIds(prevActiveIds, active, recent) {
 
 /**
  * 历史区→活动区迁移检测（R-01-010/AC-07）：上一帧历史区 id 在本帧离开历史区且出现于
- * 活动区即判定为一次反向迁移；彻底消失（归档、滑出历史窗口）不判定。prevRecentIds 为上一帧
+ * 活动区即判定为一次反向迁移；彻底消失（归档、不再被会话服务列出）不判定。prevRecentIds 为上一帧
  * 已渲染的历史区 id 集合，active/recent 为本帧派生条目。与 movedToRecentIds 镜像对称。
  */
 function movedToActiveIds(prevRecentIds, active, recent) {
@@ -1824,16 +1819,12 @@ function lastTurnDuration({ turnTimings = null, history = [] } = {}) {
 }
 
 /**
- * 构建最近历史区条目：当前非活动、且在历史窗口内最后一次活动过的**主会话**
- * （子代理是临时工作单元，不入最近历史；故需同时排除表白会话与已结束子代理），
- * 按最后活动时间从新到旧，最多 HISTORY_MAX 条。blank 会话不出现（从未用过）；
- * 归档会话不出现——原生 runtime 会立即清空对归档会话的选中，列出它只会得到
- * 一张点了回落到新会话界面的死卡。完成确认中的会话留在活动区，不入历史区；
- * 委托周期（含耗尽空窗）中的会话同样留在活动区（delegatingIds，分区不变量）。
- * 窗口候选判定用宿主列表时间（下界）；turnEnds（id → 已知回合结束时刻）驱动
- * 时间精化：条目 activityAt 取宿主列表时间与回合结束时刻的较新者（R-01-010/AC-08、AC-09）。
+ * 构建历史区条目：当前非活动的**主会话**，按最后活动时间从新到旧返回完整候选集合。
+ * 子代理是临时工作单元，不入历史区；归档、空会话、完成/错误提醒与委托周期中的会话
+ * 也不入历史区。历史区不再按时间窗口或条数截断；turnEnds（id → 已知回合结束时刻）驱动
+ * activityAt 精化（R-01-010、R-01-019）。
  */
-function buildRecent(snapshot, workspaceItems, now, windowMs = HISTORY_WINDOW_MS, detailsById = {}, archivedIds = [], completions = null, delegatingIds = null, turnEnds = null) {
+function buildRecent(snapshot, workspaceItems, now, detailsById = {}, archivedIds = [], completions = null, delegatingIds = null, turnEnds = null) {
 	const byId = isRecord(snapshot) && isRecord(snapshot.byId) ? snapshot.byId : {};
 	const ids = Array.isArray(snapshot?.ids) ? snapshot.ids : [];
 	const current = snapshot?.current ?? null;
@@ -1854,7 +1845,7 @@ function buildRecent(snapshot, workspaceItems, now, windowMs = HISTORY_WINDOW_MS
 		if (isActiveRow(row, byId, activeIds)) continue;
 		const updatedAt = Number(row.updatedAt);
 		if (!Number.isFinite(updatedAt)) continue;
-		if (updatedAt > now || now - updatedAt > windowMs) continue;
+		if (Number.isFinite(now) && updatedAt > now) continue;
 		const turnEnd = Number(mapValue(turnEnds, id));
 		const activityAt = Number.isFinite(turnEnd) ? Math.max(updatedAt, turnEnd) : updatedAt;
 		const details = mapValue(detailsById, id) ?? {};
@@ -1878,8 +1869,14 @@ function buildRecent(snapshot, workspaceItems, now, windowMs = HISTORY_WINDOW_MS
 		});
 	}
 
-	entries.sort((a, b) => b.activityAt - a.activityAt);
-	return entries.slice(0, HISTORY_MAX);
+	entries.sort((a, b) => {
+		const byActivity = b.activityAt - a.activityAt;
+		if (byActivity !== 0) return byActivity;
+		const aId = String(a.id);
+		const bId = String(b.id);
+		return aId < bId ? -1 : aId > bId ? 1 : 0;
+	});
+	return entries;
 }
 
 /** 毫秒时长的人性化短格式，例如 "47s"、"3m12s"。 */
@@ -1890,6 +1887,41 @@ function fmtElapsedMs(ms) {
 	return `${Math.floor(s / 60)}m${s % 60}s`;
 }
 
+/** 历史卡相对活动时间：按分钟、小时、天、周、月、年分级；负值返回空。 */
+function fmtRelativeAge(ageMs) {
+	if (!Number.isFinite(ageMs) || ageMs < 0) return "";
+	const minute = 60_000;
+	const hour = 60 * minute;
+	const day = 24 * hour;
+	if (ageMs < minute) return "刚刚";
+	if (ageMs < hour) return `${Math.floor(ageMs / minute)}分钟前`;
+	if (ageMs < day) return `${Math.floor(ageMs / hour)}小时前`;
+	if (ageMs < 7 * day) return `${Math.floor(ageMs / day)}天前`;
+	if (ageMs < 30 * day) return `${Math.floor(ageMs / (7 * day))}周前`;
+	if (ageMs < 365 * day) return `${Math.floor(ageMs / (30 * day))}个月前`;
+	return `${Math.floor(ageMs / (365 * day))}年前`;
+}
+
+/** 历史卡绝对活动时间：使用浏览器/宿主本地时区，当前年份省略年份，跨年补年份。 */
+function fmtAbsoluteDateTime(ts, now = Date.now()) {
+	if (ts === null || ts === undefined || now === null || now === undefined) return "";
+	try {
+		const value = Number(ts);
+		const current = Number(now);
+		const date = new Date(value);
+		const today = new Date(current);
+		if (!Number.isFinite(value) || !Number.isFinite(current) || !Number.isFinite(date.getTime()) || !Number.isFinite(today.getTime())) return "";
+		const dateOptions = { month: "2-digit", day: "2-digit" };
+		if (date.getFullYear() !== today.getFullYear()) dateOptions.year = "numeric";
+		return `${date.toLocaleDateString([], dateOptions)} ${date.toLocaleTimeString([], {
+			hour: "2-digit",
+			minute: "2-digit",
+		})}`;
+	} catch {
+		return "";
+	}
+}
+
 /** token 计数的人性化短格式，例如 "847"、"1.2k"；非有限非负时返回 null。 */
 /** token 计数紧凑缩写，镜像原生统计行 formatTokens：847 / 12.2K / 517K / 2.8M——
  *  千以下原样；K/M 档缩写值百位以上取整、不足百位保留一位小数；非法输入返回 null 不展示。 */
@@ -2128,8 +2160,12 @@ const INDENT_PX = 16;
 const MOBILE_BREAKPOINT = "767px";
 /** 运行卡时钟：只要存在运行中会话，就以该周期刷新时长显示。 */
 const CLOCK_MS = 1000;
+/** 历史卡相对时间刷新周期；无需每秒重绘整列。 */
+const RECENT_TIME_REFRESH_MS = 60_000;
 /** 冷数据读取并发池上限：慢网下避免几十张卡片的 models/history 一次性挤占通道。 */
 const LOAD_CONCURRENCY = 3;
+/** 历史分页每批数量；后续批次只由底部按钮显式加载。 */
+const RECENT_PAGE_SIZE = 10;
 /** 「回到顶部」悬浮按钮显隐阈值：scrollTop 超过该值（px）时显示（R-01-018/AC-01）。 */
 const TOP_THRESHOLD = 200;
 
@@ -2213,21 +2249,34 @@ const CSS = `
   touch-action: pan-y;
   -webkit-overflow-scrolling: touch;
   padding: 0 0 10px;
-}
-/* 滚动条仅在滚动时显示（R-01-004/AC-03，与外壳侧栏一致）：thumb 默认透明，滚动中
-   经 data-scrolling 显示。Firefox 路径必须在 @supports 门内——非 auto 的
-   scrollbar-color 会让 Chromium 丢弃该元素的 ::-webkit-scrollbar 规则。 */
+  /* Keep the native scrollbar just left of the edge handle, as in the host
+     sidebar; stable keeps the list geometry unchanged when overflow appears. */
+  margin-right: var(--dsh-scrollbar-width, 8px);
+  scrollbar-gutter: stable;
+}
+/* 滚动条在滚动或鼠标进入窗格时显示（R-01-004/AC-03，与外壳侧栏一致）：thumb 默认透明，
+   经 data-scrolling/data-pointer-inside 显示，悬停时读取主题 hover token。Firefox 路径必须在
+   @supports 门内——非 auto 的 scrollbar-color 会让 Chromium 丢弃该元素的 ::-webkit-scrollbar 规则。 */
 [data-dsh-activity-pane] .dap-scroll::-webkit-scrollbar-thumb {
   background: transparent;
 }
 [data-dsh-activity-pane] .dap-scroll[data-scrolling]::-webkit-scrollbar-thumb {
   background: var(--dsh-scrollbar-thumb, color-mix(in srgb, currentColor 25%, transparent));
 }
+[data-dsh-activity-pane][data-pointer-inside] .dap-scroll::-webkit-scrollbar-thumb {
+  background: var(--dsh-scrollbar-thumb, color-mix(in srgb, currentColor 25%, transparent));
+}
+[data-dsh-activity-pane][data-pointer-inside] .dap-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--dsh-scrollbar-thumb-hover, color-mix(in srgb, currentColor 40%, transparent));
+}
 @supports not selector(::-webkit-scrollbar) {
   [data-dsh-activity-pane] .dap-scroll { scrollbar-color: transparent transparent; }
   [data-dsh-activity-pane] .dap-scroll[data-scrolling] {
     scrollbar-color: var(--dsh-scrollbar-thumb, color-mix(in srgb, currentColor 25%, transparent)) transparent;
   }
+  [data-dsh-activity-pane][data-pointer-inside] .dap-scroll {
+    scrollbar-color: var(--dsh-scrollbar-thumb, color-mix(in srgb, currentColor 25%, transparent)) transparent;
+  }
 }
 /* 「回到顶部」悬浮图标按钮（R-01-018）：窗格内右下角圆形按钮，纯图标无文字、不透明底色；
    默认 hidden，scrollTop 超阈值时由滚动监听揭隐。基类 display:flex 会压过 UA 的
@@ -2284,6 +2333,29 @@ const CSS = `
   color: color-mix(in srgb, currentColor 52%, transparent);
   text-transform: uppercase;
 }
+/* 历史分页只在用户明确激活底部按钮后追加（R-01-019/AC-02）。 */
+[data-dsh-activity-pane] .dap-recent-more {
+  align-self: center;
+  flex: none;
+  min-width: 132px;
+  padding: 5px 10px;
+  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
+  border-radius: 6px;
+  background: color-mix(in srgb, currentColor 7%, transparent);
+  color: color-mix(in srgb, currentColor 70%, transparent);
+  font: inherit;
+  font-size: 11px;
+  line-height: 16px;
+  cursor: pointer;
+}
+[data-dsh-activity-pane] .dap-recent-more:hover,
+[data-dsh-activity-pane] .dap-recent-more:focus-visible {
+  background: color-mix(in srgb, currentColor 13%, transparent);
+  color: inherit;
+}
+[data-dsh-activity-pane] .dap-recent-more:focus-visible { outline: 2px solid color-mix(in srgb, currentColor 45%, transparent); outline-offset: 1px; }
+[data-dsh-activity-pane] .dap-recent-more[disabled] { cursor: wait; opacity: 0.6; }
+[data-dsh-activity-pane] .dap-recent-more[hidden] { display: none; }
 /* 折叠：仅桌面生效；窄条 + 竖排标题与计数（R-01-011/AC-04）。 */
 [data-dsh-activity-pane] .dap-rail {
   display: none;
@@ -2322,7 +2394,8 @@ const CSS = `
   background: rgba(46, 42, 26, 0.97);
   animation: dap-await-pulse 1.2s ease-in-out infinite;
 }
-/* 桌面拖拽调宽手柄（R-01-015）：右缘 6px 命中区，拖拽实时写入 --dap-width；
+/* 桌面拖拽调宽手柄（R-01-015）：右缘 6px 透明命中区，拖拽实时写入 --dap-width；
+   滚动区在其左侧留出 native scrollbar 命中带，手柄只改变光标、不绘制 hover 高亮；
    折叠窄条与移动端抽屉不提供拖拽（下方两处媒体查询隐藏）。 */
 [data-dsh-activity-pane] .dap-resize {
   position: absolute;
@@ -2332,10 +2405,6 @@ const CSS = `
   touch-action: none;
   z-index: 6;
 }
-[data-dsh-activity-pane] .dap-resize:hover,
-[data-dsh-activity-pane] .dap-resize[data-dragging] {
-  background: color-mix(in srgb, currentColor 18%, transparent);
-}
 /* 桌面：窗格作为中间列内的真实 flex 行元素参与布局——中间列被置为行方向，
    窗格固定宽、会话区弹性收缩，整个会话内容被真实挤到右边；折叠时收窄为窄条。 */
 @media (min-width: 768px) {
@@ -2799,7 +2868,8 @@ body:not([data-ds-dark-theme]) [data-dsh-activity-pane] .dap-workspace {
   display: flex; align-items: center; justify-content: center; gap: 6px;
 }
 /* 加载指示：列表/卡片字段在途时的活动图标（R-01-014）。 */
-[data-dsh-activity-pane] .dap-spinner {
+[data-dsh-activity-pane] .dap-spinner,
+.dap-toggle .dap-toggle-count .dap-spinner {
   width: 10px; height: 10px; flex: none; border-radius: 50%;
   border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
   border-top-color: color-mix(in srgb, currentColor 85%, transparent);
@@ -3040,12 +3110,15 @@ function livenessFromSnapshot(snap) {
 	return { startTime };
 }
 
-function fmtRecentTime(ts) {
+/** 历史卡时间同时给出本地绝对日期时分与相对年龄；跨年份的绝对日期带年份。 */
+function fmtRecentTime(ts, now = Date.now()) {
 	try {
-		return `最近 ${new Date(ts).toLocaleTimeString([], {
-			hour: "2-digit",
-			minute: "2-digit",
-		})}`;
+		const value = Number(ts);
+		const current = Number(now);
+		const absolute = fmtAbsoluteDateTime(ts, now);
+		if (!absolute) return "";
+		const relative = fmtRelativeAge(current - value);
+		return relative ? `最后活动 · ${absolute} · ${relative}` : `最后活动 · ${absolute}`;
 	} catch {
 		return "";
 	}
@@ -3079,6 +3152,7 @@ function apply(ctx) {
 	let sessionUnsubscribe = null;
 	let workspaceUnsubscribe = null;
 	let clockTimer = null;
+	let recentTimeTimer = null;
 	let syncScheduled = false;
 	let lastSig = "";
 	/** 等待条目 id/类别队列签名：变化时统一重启数量胶囊与等待卡末行动画对相（R-01-002/AC-07、AC-08）。 */
@@ -3131,6 +3205,11 @@ function apply(ctx) {
 	const cardsById = new Map();
 	/** 历史区卡片 id → { el } 复用表。 */
 	const recentCardsById = new Map();
+	/** 历史区渐进呈现状态：候选由核心完整派生，DOM 与详情读取只覆盖当前前缀。 */
+	let recentVisibleCount = RECENT_PAGE_SIZE;
+	let recentTotal = 0;
+	let recentHasMore = false;
+	let recentAppendQueued = false;
 	/** 运行中会话原生快照订阅：id → { unsubscribe, liveness, snapshot }。 */
 	const livenessById = new Map();
 	/** 委托周期进度锚点记账：id → progressAnchor 状态（R-01-009/AC-06）。 */
@@ -3544,12 +3623,25 @@ function apply(ctx) {
 			window.dispatchEvent(new Event("resize"));
 		} catch {}
 	}
+	function loadMoreRecent() {
+		if (disposed || !recentHasMore || recentAppendQueued) return false;
+		const nextCount = Math.min(recentVisibleCount + RECENT_PAGE_SIZE, recentTotal);
+		if (nextCount <= recentVisibleCount) return false;
+		recentAppendQueued = true;
+		recentVisibleCount = nextCount;
+		queueSync();
+		return true;
+	}
 	function bindPaneControls(pane) {
 		const header = pane.querySelector(".dap-header");
 		const rail = pane.querySelector(".dap-rail");
 		const resize = pane.querySelector(".dap-resize");
 		const scroll = pane.querySelector(".dap-scroll");
 		const topBtn = pane.querySelector(".dap-top");
+		const recentMore = pane.querySelector(".dap-recent-more");
+		const onRecentMoreClick = () => {
+			if (loadMoreRecent() && recentMore !== null) recentMore.disabled = true;
+		};
 		// 标题行整体即收起控件，两端断点一致：桌面折叠为窄条（R-01-011/AC-03）；
 		// 移动端断点解释为收起抽屉，而非折叠窄条（R-01-008/AC-02、R-01-011/AC-06）。
 		const onHeaderActivate = () => {
@@ -3572,6 +3664,15 @@ function apply(ctx) {
 		const syncTopBtn = () => {
 			if (topBtn !== null && scroll !== null) topBtn.hidden = scroll.scrollTop <= TOP_THRESHOLD;
 		};
+		// 鼠标进入窗格即显示 scrollbar（R-01-004/AC-03）；触摸指针不改变桌面滚动条可见状态。
+		const onPanePointerEnter = (event) => {
+			if (event.pointerType !== "mouse") return;
+			pane.setAttribute("data-pointer-inside", "");
+		};
+		const onPanePointerLeave = (event) => {
+			if (event.pointerType !== "mouse") return;
+			pane.removeAttribute("data-pointer-inside");
+		};
 		const onRailClick = () => {
 			collapsed = false;
 			pane.setAttribute("data-collapsed", "false");
@@ -3614,8 +3715,9 @@ function apply(ctx) {
 			resize.addEventListener("pointercancel", onResizeUp);
 			resize.setPointerCapture(event.pointerId);
 		};
-		// 滚动条仅滚动时显示（R-01-004/AC-03）：滚动即置位，停滚 600ms 后隐藏。
-		// 同一监听承载「回到顶部」按钮显隐（R-01-018/AC-01、AC-03）：回顶后的收口不经额外事件，
+		// 滚动条随滚动或窗格内鼠标指针显示（R-01-004/AC-03）：滚动即置位，停滚 600ms 后收口；
+		// 指针离开后若仍在滚动拖尾内则保持显示，拖尾结束后隐藏。同一监听承载「回到顶部」按钮显隐
+		//（R-01-018/AC-01、AC-03）：回顶后的收口不经额外事件，
 		// 由平滑滚动触发的 scroll 事件自然完成。
 		let scrollHideTimer = null;
 		const onScroll = () => {
@@ -3636,14 +3738,21 @@ function apply(ctx) {
 		header?.addEventListener("click", onHeaderActivate);
 		header?.addEventListener("keydown", onHeaderKeydown);
 		rail?.addEventListener("click", onRailClick);
+		pane.addEventListener("pointerenter", onPanePointerEnter);
+		pane.addEventListener("pointerleave", onPanePointerLeave);
 		scroll?.addEventListener("scroll", onScroll, { passive: true });
+		recentMore?.addEventListener("click", onRecentMoreClick);
 		topBtn?.addEventListener("click", onTopClick);
 		resize?.addEventListener("pointerdown", onResizeDown);
 		return () => {
 			header?.removeEventListener("click", onHeaderActivate);
 			header?.removeEventListener("keydown", onHeaderKeydown);
 			rail?.removeEventListener("click", onRailClick);
+			pane.removeEventListener("pointerenter", onPanePointerEnter);
+			pane.removeEventListener("pointerleave", onPanePointerLeave);
+			pane.removeAttribute("data-pointer-inside");
 			scroll?.removeEventListener("scroll", onScroll);
+			recentMore?.removeEventListener("click", onRecentMoreClick);
 			if (scrollHideTimer !== null) clearTimeout(scrollHideTimer);
 			topBtn?.removeEventListener("click", onTopClick);
 			resize?.removeEventListener("pointerdown", onResizeDown);
@@ -3673,7 +3782,8 @@ function apply(ctx) {
 				<div class="dap-scroll">
 					<div class="dap-list" tabindex="-1"><div class="dap-tracks" aria-hidden="true"></div></div>
 					<div class="dap-recent">
-						<div class="dap-recent-head"><span>最近历史 · 24h</span></div>
+						<div class="dap-recent-head"><span>最近历史</span></div>
+						<button class="dap-recent-more" type="button" hidden>加载更多...</button>
 					</div>
 				</div>
 				<button class="dap-top" type="button" aria-label="回到顶部" title="回到顶部" hidden></button>
@@ -4453,6 +4563,16 @@ function apply(ctx) {
 		}
 	}
 
+	/** 历史卡相对时间只需分钟级刷新；无历史卡时停止定时器，避免空窗格常驻唤醒。 */
+	function syncRecentTimeClock(wanted) {
+		if (wanted && recentTimeTimer === null) {
+			recentTimeTimer = setInterval(() => queueSync(), RECENT_TIME_REFRESH_MS);
+		} else if (!wanted && recentTimeTimer !== null) {
+			clearInterval(recentTimeTimer);
+			recentTimeTimer = null;
+		}
+	}
+
 	function getSessionSnapshot(session) {
 		try {
 			return session?.getSnapshot?.() ?? null;
@@ -4661,11 +4781,14 @@ function apply(ctx) {
 		if (entry.waitClass === "blocked" || entry.waitClass === "done" || entry.waitClass === "error")
 			rec.el.setAttribute("data-wait", entry.waitClass);
 		else rec.el.removeAttribute("data-wait");
+		const recentTimeText = entry.kind === "recent" ? fmtRecentTime(entry.activityAt) : "";
 		rec.el.setAttribute(
 			"aria-label",
 			`${entry.workspaceTitle ? entry.workspaceTitle + " - " : ""}${entry.title}${
 				entry.pendingText ? "，" + entry.pendingText : ""
-			}${(entry.waitClass === "done" || entry.waitClass === "error") && entry.noteText ? "，" + entry.noteText : ""}`,
+			}${(entry.waitClass === "done" || entry.waitClass === "error") && entry.noteText ? "，" + entry.noteText : ""}${
+				recentTimeText ? "，" + recentTimeText : ""
+			}`,
 		);
 		renderCardInto(rec.el, entry, hueByWorkspace);
 		// 只有顺序/归属真正变化时才移动 DOM：每次渲染无条件 appendChild 会把所有
@@ -4856,6 +4979,10 @@ function apply(ctx) {
 			pulseSignature = "";
 			prevRenderedActiveIds = new Set();
 			prevRenderedRecentIds = new Set();
+			recentVisibleCount = RECENT_PAGE_SIZE;
+			recentTotal = 0;
+			recentHasMore = false;
+			recentAppendQueued = false;
 			// 旧窗格已脱离文档：其在飞平移的 transitionend 不再触发，逐元素取消避免残留。
 			for (const el of [...shiftCleanups.keys()]) cancelShift(el);
 		}
@@ -4875,6 +5002,8 @@ function apply(ctx) {
 			}
 		}
 		const listState = listLoadState(snapshot);
+		// 只消费上一轮追加请求；列表短暂 pending 时保留已展开页，ready 后继续从同一前缀呈现。
+		recentAppendQueued = false;
 		const workspaceSnapshot = getSnapshot(workspaces, "list");
 		const workspaceItems = workspaceSnapshot?.items ?? [];
 		const archivedSessionIds = workspaceSnapshot?.archivedSessionIds ?? [];
@@ -5013,8 +5142,12 @@ function apply(ctx) {
 			}
 			if (detail.memoTurnEnd != null) turnEnds[id] = detail.memoTurnEnd;
 		}
-		const recent = buildRecent(snapshot, workspaceItems, now, undefined, sessionDetailsById, archivedSessionIds, completeAcksById, delegatingIds, turnEnds);
-		// 预览只对 recent 卡计算（活动卡不显示预览）；快照/历史引用不变时命中缓存。
+		const recentCandidates = buildRecent(snapshot, workspaceItems, now, sessionDetailsById, archivedSessionIds, completeAcksById, delegatingIds, turnEnds);
+		recentTotal = recentCandidates.length;
+		const recent = recentCandidates.slice(0, recentVisibleCount);
+		recentHasMore = recent.length < recentTotal;
+		syncRecentTimeClock(recent.length > 0);
+		// 预览只对当前显示的 recent 卡计算（活动卡不显示预览）；快照/历史引用不变时命中缓存。
 		// 完成瞬间的窗口快照可能先有用户消息、后到 agent reply；缺任一预览时补读一次 history。
 		const previewFallbackIds = new Set();
 		for (const entry of recent) {
@@ -5032,7 +5165,7 @@ function apply(ctx) {
 			if (!entry.userPreview || !entry.agentPreview) previewFallbackIds.add(entry.id);
 			entry.loadingPreviews = (!entry.userPreview || !entry.agentPreview) && historyLoads.has(entry.id);
 		}
-		// 补充数据读取优先级：当前会话最优先，活动区先于历史区（区内按显示顺序）。
+		// 补充数据读取优先级：当前会话最优先，活动区先于当前已显示历史页（区内按显示顺序）。
 		const durationFallbackIds = new Set(active.filter((entry) => entry.kind === "awaiting").map((entry) => entry.id));
 		const detailIds = [...active, ...recent].map((entry) => entry.id);
 		detailIds.sort((a, b) => Number(String(b) === String(snapshot?.current)) - Number(String(a) === String(snapshot?.current)));
@@ -5054,7 +5187,9 @@ function apply(ctx) {
 		// listState 参与签名：空列表从 pending/error → ready 时卡集合不变，若只比较卡片
 		// 会被提前返回冻结在「加载中」/「列表加载失败」；数量胶囊可见面变化同样需要
 		// 进入渲染，以便与当前可见等待卡末行重新对相（R-01-002/AC-07）。
-		const sig = JSON.stringify([listState, cardSignature(visibleEntries), pulseSurface]);
+		// 历史卡的相对活动时间随分钟级时钟变化，纳入签名后只在文案实际变化时重绘。
+		const recentTimeSignature = recent.map((entry) => fmtRecentTime(entry.activityAt));
+		const sig = JSON.stringify([listState, cardSignature(visibleEntries), pulseSurface, recentTimeSignature]);
 		if (sig === lastSig) return;
 		const hueByWorkspace = resolveWorkspaceHues(visibleEntries.map((entry) => entry.workspaceKey));
 		// 跨区迁移（双向，R-01-010/AC-07）：DOM 写入前量取旧卡矩形并克隆 ghost。
@@ -5103,6 +5238,11 @@ function apply(ctx) {
 		if (recentSection !== null) {
 			recentSection.hidden = listState === "ready" && recent.length === 0;
 			ensureListStatus(recentSection, listState !== "ready" && recent.length === 0, listState === "loading" ? "加载中…" : "列表加载失败", { loading: listState === "loading" });
+			const recentMore = recentSection.querySelector(".dap-recent-more");
+			if (recentMore !== null) {
+				recentMore.hidden = !recentHasMore;
+				recentMore.disabled = recentAppendQueued;
+			}
 		}
 		runMoveGhosts(movePlans);
 		if (shiftRects !== null) runShiftAnimations(shiftRects);
@@ -5163,6 +5303,8 @@ function apply(ctx) {
 		const headerExpanded = collapsed ? "false" : "true";
 		if (headerEl !== null && headerEl.getAttribute("aria-expanded") !== headerExpanded)
 			headerEl.setAttribute("aria-expanded", headerExpanded);
+		// 历史分页只由底部按钮显式触发；追加只排队一帧，避免重复点击造成重复增长
+		//（R-01-019/AC-01～AC-03）。
 
 		// 渲染签名在整轮 DOM 写入全部成功后提交：任何一步失败都保留下一轮
 		// 同步重试的机会，避免故障被签名吞掉后卡片永久滞留（R-01-013/AC-02）。
@@ -5347,6 +5489,7 @@ function apply(ctx) {
 		window.removeEventListener("pageshow", onPageShow);
 		completeAcksById.clear();
 		if (clockTimer !== null) clearInterval(clockTimer);
+		if (recentTimeTimer !== null) clearInterval(recentTimeTimer);
 		if (e2eListReleaseTimer !== null) clearTimeout(e2eListReleaseTimer);
 		for (const [timer, resolve] of e2eModelDelayWaiters) {
 			clearTimeout(timer);

package/README.md

@@ -48,7 +48,7 @@ The npm package ships prebuilt, so no local build step is needed. If the pane do
 - [x] **From floating overlay to docked pane**: on desktop, a persistent edge-docked column is added to the right of the left-sidebar workspaces; on mobile, a fixed drawer hidden by default is expanded via the "Activity" button in the session header, without squeezing the main conversation layout.
 - [x] **No pet icon features**: pet-related features are not supported; the UI focuses on session activity itself.
 - [x] **Native data-source subscription**: directly subscribes to the push snapshots of DSH's native `sessions` / `workspaces` services; the timeline shows at most 4 collapsed work-item rows, keeping the latest user instruction and the work item actually being executed.
-- [x] **Recent session list**: the pane is split into "Active sessions" and "Recent history" areas; main sessions that are inactive but were active within the last 24 hours can be quickly found again.
+- [x] **Recent session list**: the pane is split into "Active sessions" and "Recent history" areas; inactive main sessions are shown in activity-time batches, and a "Load more..." button at the bottom lets users explicitly reveal older sessions.
 - [x] **Stronger waiting-for-action reminders**: blocked waits, completion reminders, and error reminders are marked with gold, green, and red cards respectively; questions are previewed directly as a question list, and completion reminders are explicitly acknowledged via the "Move to history" button on the card; the state is persisted on the host side and synced across all clients, so refreshing the page or opening another window never loses unacknowledged completion reminders or error reminders not yet overwritten by a new round.
 - [x] **Sub/grandchild session hierarchy**: sub-agents are nested under their parent session with connector lines and compact cards; a parent whose own round has ended but that still has active descendants keeps rendering as running, and disappears from the active area once its sub-agents have ended and no active descendants remain; the history area keeps main sessions only.
 - [x] **Workspace names displayed and factored into ordering**: session cards show a workspace badge with a stable color, and session ordering follows the workspace order in the left sidebar.

package/README.zh-CN.md

@@ -48,7 +48,7 @@ npm 包内置预构建产物，无需本地构建步骤。安装后如窗格未
 - [x] **从浮层改为固定窗格**：桌面端在左边栏工作区的右侧增加常驻贴边列；移动端使用默认隐藏的固定抽屉，通过会话头部的「活动」按钮展开，不挤压主会话布局。
 - [x] **去除宠物图标功能**：不支持宠物相关功能，界面聚焦于会话活动本身。
 - [x] **原生数据源订阅**：直接订阅 DSH 原生 `sessions` / `workspaces` 服务的推送式快照；时间线最多显示 4 个折叠工作项行，保留最近用户指令与真实执行中的工作项。
-- [x] **增加历史会话列表**：窗格分为「活动会话」和「最近历史」两个区域，非活动主会话在最近 24 小时内仍可快速找回。
+- [x] **增加历史会话列表**：窗格分为「活动会话」和「最近历史」两个区域，非活动主会话按最近活动时间分批呈现；历史区底部提供「加载更多...」按钮，点击后才继续找回更早会话；卡片同时显示绝对日期时间与相对活动时间。
 - [x] **强化等待行动提醒**：阻塞等待、完成提醒与错误提醒分别以金色、绿色和红色卡片标识；提问直接预览问题列表，完成提醒经卡片上的「移入历史」按钮显式确认；状态由宿主侧持久化并在所有客户端间同步，刷新页面或另开窗口不会丢失未确认的完成提醒和尚未被新回合覆盖的错误提醒。
 - [x] **显示子/孙会话层级**：子代理以连接线和紧凑卡片嵌套在母会话下；母会话自身回合结束但仍有活动后代时继续按运行中呈现，子代理结束且没有活动后代后从活动区消失；历史区只保留主会话。
 - [x] **显示工作区名称并参与排序**：会话卡片显示带稳定色彩的工作区徽标，会话排序与左侧边栏中的工作区顺序保持一致。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-activity-pane",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "packageManager": "pnpm@11.5.0",
   "engines": {
     "node": ">=20"

package/scripts/acceptance.mjs

@@ -9,6 +9,7 @@
 // 真实设备与复杂编排类条目。迁移映射：
 // - R-01-001/AC-03～AC-06、R-01-002/AC-06～AC-07（空态/完成/阻塞及三处徽标）、R-01-017/AC-01、R-02-002/AC-01、AC-02 → e2e/specs/auto-update.mjs
 // - R-01-004/AC-01、AC-02 → e2e/specs/long-list.mjs
+// - R-01-019/AC-01～AC-04 → e2e/specs/recent-infinite-scroll.mjs（首批/手动追加/末尾停止/互斥与独立滚动）
 // - R-01-007/AC-01、AC-02、R-01-011/AC-05 → e2e/specs/desktop-layout.mjs
 // - R-01-008/AC-01、AC-02 点击/键盘、AC-03 鼠标、AC-04 文案/相对位置、AC-05、AC-06 点击/键盘 → e2e/specs/mobile-drawer.mjs（AC-03 真触摸、AC-04 精确位置与遮挡观感残留人工）
 // - R-01-010/AC-04 → e2e/specs/auto-update.mjs 与 e2e/specs/session-lifecycle.mjs
@@ -19,7 +20,7 @@
 // - R-01-005/AC-01 点击/Enter/Space、R-01-006/AC-01 → e2e/specs/navigation.mjs
 // - R-01-015/AC-01、AC-02、AC-04、AC-03 桌面折叠态 → e2e/specs/resize.mjs；AC-03 移动端无手柄 → e2e/specs/mobile-drawer.mjs
 // - R-01-018/AC-01、AC-03、AC-04、AC-05、AC-02 点击/键盘/reduced-motion → e2e/specs/back-to-top.mjs（AC-02 平滑观感残留人工）
-// - R-01-003/AC-03、AC-08～AC-12 浏览器着色、R-01-012/AC-01、AC-05、R-01-013/AC-01、AC-03..05、AC-07、AC-08、AC-10、AC-11 → e2e/specs/card-content.mjs（AC-02 结构断言已迁，多工作区感知区分与「标题随宿主更新」半句仍人工）
+// - R-01-003/AC-03、AC-08～AC-12 浏览器着色、R-01-012/AC-01、AC-05、R-01-013/AC-01、R-01-013/AC-03、R-01-013/AC-04、AC-07、AC-08、AC-10、AC-11 → e2e/specs/card-content.mjs（AC-02 结构断言已迁，多工作区感知区分与「标题随宿主更新」半句仍人工）
 // T-089 起：
 // - R-01-009/AC-02、AC-03 的 tool→等待→stream 实时更新 → e2e/specs/auto-update.mjs（AC-01 进行中 tool partial 仍由 unit/人工承接）。
 // - R-01-014/AC-01、AC-03、AC-06 的列表 pending→ready、detail 渐进补齐与计数切换 → e2e/specs/loading-ready.mjs。
@@ -125,9 +126,10 @@ const steps = [
 	// R-01-013/AC-02 标题随宿主更新（回归：单卡渲染异常不得冻结其余卡片）
 	"重命名一个历史会话后，确认窗格历史卡标题与左边栏同步变为新标题；对之后获得自动生成标题的会话，确认卡片不停留在首条消息形态的旧标题。",
 	// R-01-010/AC-01 归档会话不入最近历史
-	"在左边栏归档一个 24h 内有活动的会话后，确认其卡片从最近历史区消失（不再出现点了回落到新会话界面的死卡）；其余历史卡不受影响。",
+	"在左边栏归档一个历史会话后，确认其卡片从最近历史区消失（不再出现点了回落到新会话界面的死卡）；其余历史卡不受影响。",
 	// R-01-010/AC-08、R-01-010/AC-09 历史区时间口径为最后活动时间
-	"找一个发指令后 agent 运行了较久才结束的会话，待其落入最近历史区后，确认卡片「最近 xx:xx」显示的是最后回复结束时刻（而非发指令时刻），且历史区按该时刻从新到旧排序；刷新页面（冷会话）后确认时间先按宿主列表时间显示、数据到达后精化为回复结束时刻。",
+	// R-01-013/AC-05 历史卡同时显示绝对日期时间与相对活动时间
+	"找一个发指令后 agent 运行了较久才结束的会话，待其落入最近历史区后，确认卡片第五行同时显示本地绝对日期时间（跨年份带年份）与相对活动时间，且绝对时间对应最后回复结束时刻（而非发指令时刻）；历史区仍按该时刻从新到旧排序。刷新页面（冷会话）后确认时间先按宿主列表时间显示、数据到达后精化为回复结束时刻，相对时间会按分钟级推进。",
 	// R-01-013/AC-09 最近卡标题常规字重
 	"确认最近历史卡的会话标题为常规字重（不加粗），与活动卡的加粗标题形成明显区分。",
 	// R-01-013/AC-10 最近卡整体淡化
@@ -177,8 +179,10 @@ const steps = [
 	"重复上述两个方向的迁移并观察迁移卡以外的卡片：确认所有位置受影响的卡片（活动区剩余卡片、历史区其余卡片）与「最近历史」段头均以平滑滑动过渡到新位置，无任何卡片或段头瞬间跳变。",
 	// R-01-010/AC-05 分隔线留白
 	"确认活动区与最近历史区之间的分隔线上下各有约 10px 留白，两区呼吸感明确。",
-	// R-01-004/AC-03 滚动条仅滚动时显示
-	"在窗格内滚动时确认滚动条出现，停止滚动约 0.6s 后自动隐藏；不滚动时滚动条不可见，主会话区域滚动行为不受影响。",
+	// R-01-004/AC-03 滚动条指针显隐与 thumb hover 高亮
+	"将鼠标移入窗格（包括右缘调宽命中区）确认滚动条出现；调宽命中区只改变光标、不绘制高亮；将鼠标悬停在 scrollbar thumb 上，确认 thumb 变为更醒目的主题 hover 色；再向左移出调宽区后拖动 native scrollbar 确认列表滚动而 pane 宽度不变；鼠标离开且停止滚动约 0.6s 后滚动条隐藏，主会话区域滚动行为不受影响。",
+	// R-01-019/AC-01、R-01-019/AC-02、R-01-019/AC-03、R-01-019/AC-04 历史会话手动分页
+	"准备至少 21 个已完成且已移入历史的主会话：首次打开历史区只显示按最近活动时间排序的 10 张卡，并在列表底部显示「加载更多...」按钮；将窗格滚动到底部，确认不会自动追加，点击按钮后才追加后 10 张且前 10 张保留、无重复；再次点击按钮确认只追加最后 1 张、按钮随后隐藏，继续滚动不再增加；追加过程中活动区仍与历史区互斥，窗格滚动不带动主会话页面，桌面与移动端抽屉均可正常继续浏览。另以少于 10 张历史会话确认首屏全部显示、不显示加载按钮且不会自动补页。",
 	// R-01-018/AC-02、AC-04、AC-05 观感残留（键盘/显隐/回顶/窄条/抽屉行为断言已迁 e2e/specs/back-to-top.mjs）
 	"确认平滑滚动动画流畅自然；切到 <=767px 移动视口打开抽屉，确认抽屉内按钮不遮挡标题行；深浅主题各验一次不透明底色与图标可辨。",
 	// R-01-011/AC-03 标题行整体收起

package/scripts/bench.mjs

@@ -75,7 +75,7 @@ function renderPass() {
 			entry.timeline = detail.memoTimeline;
 		}
 	}
-	const recent = buildRecent(listSnapshot, [], Date.now(), undefined, detailsById);
+	const recent = buildRecent(listSnapshot, [], Date.now(), detailsById);
 	for (const entry of recent) {
 		const detail = detailsById.get(entry.id);
 		if (!detail) continue;
@@ -115,7 +115,7 @@ function legacyRenderPass() {
 		legacyScanAll(detail.snapshot); // 旧渲染循环 timeline 重算
 		legacyScanAll(detail.snapshot); // 旧渲染循环 previews 重算
 	}
-	const recent = buildRecent(listSnapshot, [], Date.now(), undefined, detailsById);
+	const recent = buildRecent(listSnapshot, [], Date.now(), detailsById);
 	for (const entry of recent) {
 		const detail = detailsById.get(entry.id);
 		if (!detail?.snapshot) continue;