dsh-activity-pane 0.3.0 → 0.6.0

package/src/client.mjs

@@ -467,23 +467,41 @@ const CSS = `
 /* 复审修复（C-040、C-043）：状态点光晕三类同强度、仅换色相——阻塞金、完成绿与错误红光晕一致。 */
 /* 工作区徽标「图标+文本」双段：文件夹图标与左边栏工作区条目同源（R-01-003/AC-06）；
    名称字号不低于 10.5px（AC-07），行高保持 14px 以维持胶囊与卡片高度。
-   着色（AC-08～AC-11）：核心映射提供 OKLCH hue；深色主题文字取高明度中高彩度，
-   浅色主题文字取低明度中高彩度。文字直接使用调色板色，底色与描边在 OKLCH
-   空间按透明度混合；前景与背景始终同色相、明度对比拉开。 */
+   着色（AC-08～AC-12）：核心映射提供 12 个前景身份槽与每槽 3 个背景变体；
+   深色/浅色主题分别使用前景与背景槽位的 L/C 参数，文字使用前景调色板色，
+   底色使用独立背景源色、描边使用前景调色板色，分别在 OKLCH 空间按变体混合强度呈现；前景与背景保持同色相族。 */
 [data-dsh-activity-pane] .dap-workspace {
   width: fit-content; max-width: 100%; display: flex; align-items: center; gap: 3px;
   overflow: hidden;
   font-size: 10.5px; line-height: 14px;
-  --dap-workspace-color: oklch(0.78 0.16 var(--dap-workspace-hue, 235));
+  --dap-workspace-color: oklch(
+     var(--dap-workspace-dark-l, 0.78)
+     var(--dap-workspace-dark-c, 0.16)
+     var(--dap-workspace-hue, 235)
+   );
+  --dap-workspace-background-color: oklch(
+     var(--dap-workspace-bg-dark-l, 0.38)
+     var(--dap-workspace-bg-dark-c, 0.06)
+     var(--dap-workspace-hue, 235)
+   );
   color: var(--dap-workspace-color);
-  background: color-mix(in oklch, var(--dap-workspace-color) 14%, transparent);
-  border: 1px solid color-mix(in oklch, var(--dap-workspace-color) 34%, transparent);
+  background: color-mix(in oklch, var(--dap-workspace-background-color) var(--dap-workspace-bg-dark-mix, 31%), transparent);
+  border: 1px solid color-mix(in oklch, var(--dap-workspace-color) var(--dap-workspace-bg-dark-border-mix, 52%), transparent);
   border-radius: 999px; padding: 0 7px;
 }
 body:not([data-ds-dark-theme]) [data-dsh-activity-pane] .dap-workspace {
-  --dap-workspace-color: oklch(0.48 0.15 var(--dap-workspace-hue, 235));
-  background: color-mix(in oklch, var(--dap-workspace-color) 10%, transparent);
-  border-color: color-mix(in oklch, var(--dap-workspace-color) 28%, transparent);
+  --dap-workspace-color: oklch(
+     var(--dap-workspace-light-l, 0.48)
+     var(--dap-workspace-light-c, 0.15)
+     var(--dap-workspace-hue, 235)
+   );
+  --dap-workspace-background-color: oklch(
+     var(--dap-workspace-bg-light-l, 0.84)
+     var(--dap-workspace-bg-light-c, 0.06)
+     var(--dap-workspace-hue, 235)
+   );
+  background: color-mix(in oklch, var(--dap-workspace-background-color) var(--dap-workspace-bg-light-mix, 27%), transparent);
+  border-color: color-mix(in oklch, var(--dap-workspace-color) var(--dap-workspace-bg-light-border-mix, 42%), transparent);
 }
 [data-dsh-activity-pane] .dap-workspace-icon { flex: none; display: inline-flex; }
 [data-dsh-activity-pane] .dap-workspace-icon svg { display: block; }
@@ -521,14 +539,10 @@ body:not([data-ds-dark-theme]) [data-dsh-activity-pane] .dap-workspace {
   display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
   min-width: 0; margin: 2px 0 0;
 }
-/* 等待类型胶囊与上一轮耗时同行：时长沿用运行统计行的右缘位置，不参与等待脉冲。 */
+/* 等待类型胶囊独立同行：耗时回到统计行最右侧，不参与等待脉冲。 */
 [data-dsh-activity-pane] .dap-await-head {
   display: flex; align-items: center; gap: 8px; align-self: stretch; min-width: 0;
 }
-[data-dsh-activity-pane] .dap-await-head .dap-token-time {
-  margin-left: auto; flex: none; font-size: 10px; line-height: 14px;
-  color: #8f9aaa; font-variant-numeric: tabular-nums;
-}
 [data-dsh-activity-pane] .dap-note-row {
   display: flex; align-items: center; gap: 6px; min-width: 0; align-self: stretch;
 }
@@ -547,7 +561,7 @@ body:not([data-ds-dark-theme]) [data-dsh-activity-pane] .dap-workspace {
   color: color-mix(in srgb, currentColor 82%, transparent);
   background: color-mix(in srgb, currentColor 14%, transparent);
 }
-/* 运行卡富化（对齐 answer-pet 卡片；MIT 参考，见 README）。 */
+/* 运行卡与最近卡统计（对齐 answer-pet 卡片；MIT 参考，见 README）。 */
 [data-dsh-activity-pane] .dap-progress {
   display: flex; align-items: center; gap: 7px; min-width: 0;
 }
@@ -1030,16 +1044,18 @@ function apply(ctx) {
 	/** 等待条目 id/类别队列签名：变化时统一重启数量胶囊与等待卡末行动画对相（R-01-002/AC-07、AC-08）。 */
 	let pulseSignature = "";
 	// E2E-only deterministic seams（T-089/T-090）：显式 URL fragment 最多把本页首次列表 ready 呈现
-	// 或正式 models RPC 延后 1s；默认路径为 0，不伪造服务响应、快照或生产时序。
+	// 或正式 models RPC 延后 1s；列表延迟从首个窗格 render 开始计时，避免宿主启动耗时
+	// 把 pending 观察窗口提前消耗；默认路径为 0，不伪造服务响应、快照或生产时序。
 	const e2eParams = new URLSearchParams(window.location.hash.slice(1));
 	const requestedListDelay = Number(e2eParams.get("dap-e2e-list-delay"));
-	const e2eListReadyAt = Number.isFinite(requestedListDelay) && requestedListDelay > 0
-		? Date.now() + Math.min(requestedListDelay, 1_000)
+	const e2eListDelayMs = Number.isFinite(requestedListDelay) && requestedListDelay > 0
+		? Math.min(requestedListDelay, 1_000)
 		: 0;
 	const requestedModelDelay = Number(e2eParams.get("dap-e2e-model-delay"));
 	const e2eModelDelayMs = Number.isFinite(requestedModelDelay) && requestedModelDelay > 0
 		? Math.min(requestedModelDelay, 1_000)
 		: 0;
+	let e2eListReadyAt = 0;
 	let e2eListReleaseTimer = null;
 	const e2eModelDelayWaiters = new Map();
 	function delayedModelCall(call) {
@@ -1060,6 +1076,9 @@ function apply(ctx) {
 	let paneWidth = readStoredPaneWidth();
 	/** 用户最近一次激活的卡片 id；打开重试链被更新的激活意图取代即取消。 */
 	let lastActivatedId = null;
+	/** 最近一次已处理的当前卡片；同一卡片的运行时重绘不反复打断用户手动滚动。 */
+	let autoScrolledCurrentId = null;
+	let autoScrolledCurrentCard = null;
 	/** 完成确认状态（R-01-002/AC-03、AC-10～AC-12）：id → { lastTurnEnd, ackedAt }，
 	 *  来自宿主侧 ack 通道（SSE 全量快照），随每次推送整体替换。 */
 	const completeAcksById = new Map();
@@ -1086,7 +1105,7 @@ function apply(ctx) {
 	const livenessById = new Map();
 	/** 委托周期进度锚点记账：id → progressAnchor 状态（R-01-009/AC-06）。 */
 	const progressAnchorById = new Map();
-	/** 订阅停止后保留最近快照，供 awaiting/recent 卡继续显示上下文。 */
+	/** 订阅停止后保留最近快照与最后已知运行统计，供 awaiting/recent 卡继续显示上下文。 */
 	const sessionDetailsById = new Map();
 	/** 会话跳转的单一重试链；避免重复点击叠加 refresh/timer。 */
 	const openRetryStates = new Map();
@@ -1761,7 +1780,10 @@ function apply(ctx) {
 			const agentLabel = makeEl("span", "dap-history-label");
 			agentLabel.textContent = "助手";
 			agentLine.append(agentIcon, agentLabel, makeEl("span", "dap-history-separator"), makeEl("span", "dap-history-text"));
-			return [head, row, userLine, agentLine, makeEl("div", "dap-note")];
+			const statsRow = makeEl("div", "dap-token-stats");
+			statsRow.append(makeEl("span", "dap-token-main"), makeEl("span", "dap-token-time"));
+			statsRow.hidden = true;
+			return [head, row, userLine, agentLine, statsRow, makeEl("div", "dap-note")];
 		}
 		if (kind === "awaiting") {
 			const row = makeEl("div", "dap-row");
@@ -1775,10 +1797,13 @@ function apply(ctx) {
 			const noteRow = makeEl("div", "dap-note-row");
 			noteRow.append(makeEl("div", "dap-note"), makeConfirmButton());
 			const awaitHead = makeEl("div", "dap-await-head");
-			awaitHead.append(capsule, makeEl("span", "dap-token-time"));
+			awaitHead.append(capsule);
+			const statsRow = makeEl("div", "dap-token-stats");
+			statsRow.append(makeEl("span", "dap-token-main"), makeEl("span", "dap-token-time"));
+			statsRow.hidden = true;
 			const foot = makeEl("div", "dap-foot");
 			foot.append(awaitHead, noteRow);
-			return [head, row, makeEl("div", "dap-trace"), foot];
+			return [head, row, makeEl("div", "dap-trace"), statsRow, foot];
 		}
 		const row = makeEl("div", "dap-row");
 		row.append(makeEl("span", "dap-dot"), makeEl("span", "dap-title"));
@@ -2139,14 +2164,19 @@ function apply(ctx) {
 		}
 	}
 
-	/** 统计行渲染：运行卡写入速率、token 与耗时，旧骨架缺节点时就地补齐。 */
+	/** 统计行渲染：运行卡、等待卡与最近卡写入速率、token 与耗时，旧骨架缺节点时就地补齐。 */
 	function renderTokenStats(el, entry) {
 		let stats = el.querySelector(".dap-token-stats");
 		if (stats === null) {
 			stats = makeEl("div", "dap-token-stats");
 			stats.append(makeEl("span", "dap-token-main"), makeEl("span", "dap-token-time"));
 			stats.hidden = true;
-			el.append(stats);
+			const foot = entry.kind === "awaiting" ? el.querySelector(".dap-foot") : null;
+			if (foot !== null) el.insertBefore(stats, foot);
+			else el.append(stats);
+		} else if (entry.kind === "awaiting") {
+			const foot = el.querySelector(".dap-foot");
+			if (foot !== null && stats.nextElementSibling !== foot) el.insertBefore(stats, foot);
 		}
 		let mainTextEl = stats.querySelector(".dap-token-main");
 		let timeEl = stats.querySelector(".dap-token-time");
@@ -2168,25 +2198,9 @@ function apply(ctx) {
 		if (stats.hidden !== statsHidden) stats.hidden = statsHidden;
 	}
 
-	/** 等待卡耗时写入：与等待类型胶囊同一行靠右，旧骨架缺该行时就地补齐。 */
-	function renderAwaitingDuration(el, entry) {
-		const foot = el.querySelector(".dap-foot");
-		if (foot === null) return;
-		let head = foot.querySelector(".dap-await-head");
-		if (head === null) {
-			const capsule = foot.querySelector(".dap-capsule");
-			if (capsule === null) return;
-			head = makeEl("div", "dap-await-head");
-			capsule.replaceWith(head);
-			head.append(capsule);
-		}
-		let time = head.querySelector(".dap-token-time");
-		if (time === null) {
-			time = makeEl("span", "dap-token-time");
-			head.append(time);
-		}
-		const text = Number.isFinite(entry.elapsedMs) && entry.elapsedMs >= 0 ? fmtElapsedMs(entry.elapsedMs) : "";
-		if (time.textContent !== text) time.textContent = text;
+	/** 旧热装等待骨架清理：耗时已迁回统计行，去掉胶囊同行残留的时长节点。 */
+	function removeAwaitingHeadDuration(el) {
+		el.querySelector(".dap-await-head .dap-token-time")?.remove();
 	}
 
 	/** 时间线区加载指示：数据在途且尚无工作项时显示活动图标行（R-01-014/AC-02）。 */
@@ -2213,22 +2227,40 @@ function apply(ctx) {
 		renderTrace(container, entry.timeline, { lastOnly });
 	}
 
-	function renderCardInto(el, entry, hueByWorkspace) {
+	function renderCardInto(el, entry, colorByWorkspace) {
 		const workspaceLabel = el.querySelector(".dap-workspace");
 		if (workspaceLabel !== null) {
 			const workspaceText = workspaceLabel.querySelector(".dap-workspace-text");
-			if (entry.workspaceTitle !== "") {
+			const color = colorByWorkspace.get(entry.workspaceKey);
+			const foreground = color?.foreground;
+			const background = color?.background;
+			const colorVariables = {
+				"--dap-workspace-hue": foreground?.hue,
+				"--dap-workspace-dark-l": foreground?.darkL,
+				"--dap-workspace-dark-c": foreground?.darkC,
+				"--dap-workspace-light-l": foreground?.lightL,
+				"--dap-workspace-light-c": foreground?.lightC,
+				"--dap-workspace-bg-dark-l": background?.dark?.l,
+				"--dap-workspace-bg-dark-c": background?.dark?.c,
+				"--dap-workspace-bg-dark-mix": background?.dark?.mix,
+				"--dap-workspace-bg-dark-border-mix": background?.dark?.borderMix,
+				"--dap-workspace-bg-light-l": background?.light?.l,
+				"--dap-workspace-bg-light-c": background?.light?.c,
+				"--dap-workspace-bg-light-mix": background?.light?.mix,
+				"--dap-workspace-bg-light-border-mix": background?.light?.borderMix,
+			};
+			if (entry.workspaceTitle !== "" && foreground !== undefined && background !== undefined) {
 				if (workspaceText !== null) restoreTextField(workspaceText, entry.workspaceTitle);
-				const hue = hueByWorkspace.get(entry.workspaceKey) ?? workspaceHue(entry.workspaceKey);
-				const hueText = hue === null ? "" : String(hue);
-				if (workspaceLabel.style.getPropertyValue("--dap-workspace-hue") !== hueText) {
-					if (hue === null) workspaceLabel.style.removeProperty("--dap-workspace-hue");
-					else workspaceLabel.style.setProperty("--dap-workspace-hue", hueText);
+				for (const [property, value] of Object.entries(colorVariables)) {
+					const next = value === undefined ? "" : String(value);
+					if (workspaceLabel.style.getPropertyValue(property) === next) continue;
+					if (next === "") workspaceLabel.style.removeProperty(property);
+					else workspaceLabel.style.setProperty(property, next);
 				}
 				workspaceLabel.removeAttribute("hidden");
 			} else {
 				if (workspaceText !== null) restoreTextField(workspaceText, "");
-				workspaceLabel.style.removeProperty("--dap-workspace-hue");
+				for (const property of Object.keys(colorVariables)) workspaceLabel.style.removeProperty(property);
 				workspaceLabel.setAttribute("hidden", "");
 			}
 		}
@@ -2321,12 +2353,14 @@ function apply(ctx) {
 					restoreTextField(text, previews[i]);
 				}
 			}
+			renderTokenStats(el, entry);
 		}
 
 		if (entry.kind === "awaiting") {
 			const traceContainer = el.querySelector(".dap-trace");
 			if (traceContainer !== null) renderTimelineArea(traceContainer, entry);
-			renderAwaitingDuration(el, entry);
+			removeAwaitingHeadDuration(el);
+			renderTokenStats(el, entry);
 			const confirm = el.querySelector(".dap-confirm");
 			if (confirm !== null) {
 				// 激活锚点：只在结构重建时绑一次（卡片按 id 复用，kind 变化会重建骨架）。
@@ -2605,7 +2639,7 @@ function apply(ctx) {
 
 	/** 渲染某一张卡片进指定列表容器（活动/历史通用）。index 是条目在卡片序列中的
 	 * 序号，offset 是容器内首个卡片前的非卡片子节点数（活动区有轨道层、历史区有段头）。 */
-	function renderCardIntoList(list, entry, reuseMap, index, offset, hueByWorkspace) {
+	function renderCardIntoList(list, entry, reuseMap, index, offset, colorByWorkspace) {
 		let rec = reuseMap.get(entry.id);
 		if (rec === undefined) {
 			const el = document.createElement("div");
@@ -2662,7 +2696,7 @@ function apply(ctx) {
 				recentTimeText ? "，" + recentTimeText : ""
 			}`,
 		);
-		renderCardInto(rec.el, entry, hueByWorkspace);
+		renderCardInto(rec.el, entry, colorByWorkspace);
 		// 只有顺序/归属真正变化时才移动 DOM：每次渲染无条件 appendChild 会把所有
 		// 卡片瞬时移除再插回——按下/抬起之间经过的移动让浏览器取消 click；焦点卡
 		// 被瞬时断开而失焦；悬停卡的 :hover 也随之丢失且不再补发。会话活跃期间
@@ -2672,6 +2706,37 @@ function apply(ctx) {
 		return true;
 	}
 
+	/** 原生侧栏切换当前会话后，只把已呈现且未完整可见的当前卡片滚入窗格；降低动效偏好时不平滑。 */
+	function ensureCurrentCardVisible(scroll, currentId) {
+		const id = currentId === null || currentId === undefined ? null : String(currentId);
+		if (id === null || id === "") {
+			autoScrolledCurrentId = null;
+			autoScrolledCurrentCard = null;
+			return;
+		}
+		// 当前会话卡片只有在活动列表中才参与自动定位；完成确认后同一 current
+		// 会话会进入历史区，不能因仍带 data-current 把窗格滚到历史卡片。
+		const card = scroll?.querySelector?.(`.${LIST_CLASS} .${CARD_CLASS}[data-current]`) ?? null;
+		if (
+			card === null ||
+			card.dataset.sessionId !== id ||
+			scroll.clientHeight <= 0 ||
+			card.getBoundingClientRect().height <= 0
+		)
+			return;
+		if (autoScrolledCurrentId === id && autoScrolledCurrentCard === card) return;
+		if (scrollCardIntoView(scroll, card, prefersReducedMotion() ? "auto" : "smooth")) {
+			autoScrolledCurrentId = id;
+			autoScrolledCurrentCard = card;
+			return;
+		}
+		const viewport = scroll.getBoundingClientRect();
+		const rect = card.getBoundingClientRect();
+		if (rect.height <= viewport.height && (rect.top < viewport.top || rect.bottom > viewport.bottom)) return;
+		autoScrolledCurrentId = id;
+		autoScrolledCurrentCard = card;
+	}
+
 	function pruneCards(reuseMap, alive) {
 		for (const [id, rec] of reuseMap) {
 			if (alive.has(id)) continue;
@@ -2855,6 +2920,8 @@ function apply(ctx) {
 			recentTotal = 0;
 			recentHasMore = false;
 			recentAppendQueued = false;
+			autoScrolledCurrentId = null;
+			autoScrolledCurrentCard = null;
 			// 旧窗格已脱离文档：其在飞平移的 transitionend 不再触发，逐元素取消避免残留。
 			for (const el of [...shiftCleanups.keys()]) cancelShift(el);
 		}
@@ -2863,6 +2930,7 @@ function apply(ctx) {
 		const recentSection = pane.querySelector(`.${RECENT_CLASS}`);
 		if (activeList === null || recentSection === null) return;
 
+		if (e2eListReadyAt === 0 && e2eListDelayMs > 0) e2eListReadyAt = Date.now() + e2eListDelayMs;
 		let snapshot = getSnapshot(sessions, "list");
 		if (e2eListReadyAt > Date.now() && snapshot?.phase !== "error") {
 			snapshot = { phase: "pending" };
@@ -2887,7 +2955,7 @@ function apply(ctx) {
 		for (const [id, state] of progressAnchorById) {
 			if (delegationActive(state, now)) delegatingIds.add(id);
 		}
-		const active = buildEntries(snapshot, workspaceItems, sessionDetailsById, completeAcksById, delegatingIds);
+		const active = buildEntries(snapshot, workspaceItems, sessionDetailsById, completeAcksById, delegatingIds, archivedSessionIds);
 		// 轮内订阅仅对"运行中"会话建立（主会话 + 运行中的子代理），保持在运行中的订阅
 		// 数量 == 运行中会话数量（R-02-004/AC-01）；暂停等待的子代理只显示标题。
 		const runLikeIds = new Set(
@@ -2971,11 +3039,11 @@ function apply(ctx) {
 			// token/速率取自 sessions.list 条目的投影（tokenUsage/sessionStats），
 			// 复用既有列表订阅，无新增轮询（R-01-009/AC-05、R-02-004/AC-02）。
 			const projection = snapshot?.byId?.[entry.id]?.projectionValues;
-			const stats = projection?.sessionStats;
-			const rateTokS =
-				stats && Number.isFinite(stats.decodeMs) && stats.decodeMs > 0
-					? stats.decodeTokens / (stats.decodeMs / 1000)
-					: null;
+			const projectionStats = statsFromProjection(projection);
+			if (entry.kind === "awaiting") {
+				// 等待期间冻结运行停止前的最后已知统计；刷新/无留存时回退当前列表投影。
+				Object.assign(entry, mergeRuntimeStats(detail?.lastRuntimeStats, projectionStats));
+			}
 			// 委托周期锚点（R-01-009/AC-06）：全部活动条目逐帧记账——锚点不因呈现翻转
 			// （委托期与 awaiting 互转）或瞬时不可见而丢失，仅 dispose 时整体清除；周期内
 			// 进度连续（含 settle 处理回合），周期外由宿主回合起点驱动（新回合归零）。
@@ -2991,13 +3059,15 @@ function apply(ctx) {
 			progressAnchorById.set(entry.id, anchor);
 			if (entry.kind === "running") {
 				const elapsedMs = Number.isFinite(anchor.anchor) ? Math.max(0, now - anchor.anchor) : null;
-				const outputTokens = projection?.tokenUsage?.outputTokens ?? null;
-				Object.assign(entry, runtimeStats({ elapsedMs, outputTokens, rateTokS }));
-				Object.assign(entry, usageSummary(projection?.tokenUsage ?? {}));
+				Object.assign(entry, projectionStats, { elapsedMs });
+				if (detail) {
+					// 列表投影短暂缺字段时，不覆盖此前已知的有效统计。
+					detail.lastRuntimeStats = mergeRuntimeStats(projectionStats, detail.lastRuntimeStats);
+				}
 				// 回合进度：纯时间驱动 y = t/(t+k)，半衰期每帧按最新实测速率现算，固定
 				// k 下单调性由函数本身保证；k 变化时允许进度随速率回落而回退（委托周期
 				// 连续、周期外回合切换归零，R-01-009/AC-06，C-014、C-044）。
-				entry.progress = progressOf({ elapsedMs: elapsedMs ?? 0, halfLifeSec: progressHalfLifeSec({ rateTokS }) });
+				entry.progress = progressOf({ elapsedMs: elapsedMs ?? 0, halfLifeSec: progressHalfLifeSec({ rateTokS: projectionStats.rateTokS }) });
 			}
 		}
 		// 历史区时间精化（R-01-010/AC-08、AC-09）：从保留快照的 turnTimings 与已拉取的
@@ -3018,6 +3088,23 @@ function apply(ctx) {
 		recentTotal = recentCandidates.length;
 		const recent = recentCandidates.slice(0, recentVisibleCount);
 		recentHasMore = recent.length < recentTotal;
+		// 最近卡统计复用运行卡的列表投影口径；耗时从保留快照或已读 history 取最近完整回合，
+		// 缺边界时仅为当前可见历史卡安排一次既有 history 补读（R-01-013/AC-12）。
+		const recentDurationFallbackIds = new Set();
+		for (const entry of recent) {
+			const detail = sessionDetailsById.get(entry.id);
+			const detailSnapshot = livenessById.get(entry.id)?.snapshot ?? detail?.snapshot ?? null;
+			const elapsedMs = lastTurnDuration({ turnTimings: detailSnapshot?.turnTimings, history: detail?.history });
+			const stats = statsFromProjection(snapshot?.byId?.[entry.id]?.projectionValues, elapsedMs);
+			const retained = detail?.lastRuntimeStats;
+			Object.assign(entry, stats, retained ? {
+				outputTokens: retained.outputTokens ?? stats.outputTokens,
+				inputTokens: retained.inputTokens ?? stats.inputTokens,
+				cacheHitPct: retained.cacheHitPct ?? stats.cacheHitPct,
+				rateTokS: retained.rateTokS ?? stats.rateTokS,
+			} : null);
+			if (elapsedMs === null) recentDurationFallbackIds.add(entry.id);
+		}
 		syncRecentTimeClock(recent.length > 0);
 		// 预览只对当前显示的 recent 卡计算（活动卡不显示预览）；快照/历史引用不变时命中缓存。
 		// 完成瞬间的窗口快照可能先有用户消息、后到 agent reply；缺任一预览时补读一次 history。
@@ -3038,7 +3125,10 @@ function apply(ctx) {
 			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 durationFallbackIds = new Set([
+			...active.filter((entry) => entry.kind === "awaiting").map((entry) => entry.id),
+			...recentDurationFallbackIds,
+		]);
 		const detailIds = [...active, ...recent].map((entry) => entry.id);
 		detailIds.sort((a, b) => Number(String(b) === String(snapshot?.current)) - Number(String(a) === String(snapshot?.current)));
 		loadNativeDetails(detailIds, previewFallbackIds, durationFallbackIds);
@@ -3063,12 +3153,32 @@ function apply(ctx) {
 		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));
+		const colorByWorkspace = resolveWorkspaceColors(visibleEntries.map((entry) => entry.workspaceKey));
 		// 跨区迁移（双向，R-01-010/AC-07）：DOM 写入前量取旧卡矩形并克隆 ghost。
 		const migrations = [
 			...movedToRecentIds(prevRenderedActiveIds, active, recent).map((id) => ({ id, from: cardsById, to: recentCardsById })),
 			...movedToActiveIds(prevRenderedRecentIds, active, recent).map((id) => ({ id, from: recentCardsById, to: cardsById })),
 		];
+		// 活动卡带焦点迁入历史时，把键盘焦点交给其上一个仍在活动区的卡片；
+		// 若迁移卡已在活动区首位，则退到下一张，避免焦点落到历史区或 body。
+		let focusAfterMigrationId = null;
+		const focusedElement = document.activeElement;
+		const activeIds = new Set(active.map((entry) => String(entry.id)));
+		for (const { id, from } of migrations) {
+			if (from !== cardsById) continue;
+			const source = from.get(id)?.el;
+			if (source === undefined || !source.contains(focusedElement)) continue;
+			const activeCards = [...activeList.querySelectorAll(`.${CARD_CLASS}`)];
+			const sourceIndex = activeCards.indexOf(source);
+			if (sourceIndex < 0) continue;
+			const target = activeCards
+				.slice(0, sourceIndex)
+				.reverse()
+				.find((card) => activeIds.has(String(card.dataset.sessionId)))
+				?? activeCards.slice(sourceIndex + 1).find((card) => activeIds.has(String(card.dataset.sessionId)));
+			focusAfterMigrationId = target?.dataset.sessionId ?? null;
+			break;
+		}
 		const movePlans = prepareMoveGhosts(migrations);
 		// 迁移帧内位置受影响的其它卡片与历史区段头：DOM 写入前量取当前视觉矩形
 		// （R-01-010/AC-10）；reduced-motion 下 movePlans 为空，FLIP 量取整体跳过。
@@ -3082,7 +3192,7 @@ function apply(ctx) {
 		const aliveActive = new Set();
 		for (const [index, entry] of active.entries()) {
 			try {
-				renderCardIntoList(activeList, entry, cardsById, index, 1, hueByWorkspace);
+				renderCardIntoList(activeList, entry, cardsById, index, 1, colorByWorkspace);
 			} catch (error) {
 				renderOk = false;
 				logCardRenderError(entry.id, error);
@@ -3099,7 +3209,7 @@ function apply(ctx) {
 		// 历史区容器首个子节点是段头（.dap-recent-head），卡片从 offset 1 开始。
 		for (const [index, entry] of recent.entries()) {
 			try {
-				renderCardIntoList(recentSection, entry, recentCardsById, index, 1, hueByWorkspace);
+				renderCardIntoList(recentSection, entry, recentCardsById, index, 1, colorByWorkspace);
 			} catch (error) {
 				renderOk = false;
 				logCardRenderError(entry.id, error);
@@ -3118,6 +3228,8 @@ function apply(ctx) {
 		}
 		runMoveGhosts(movePlans);
 		if (shiftRects !== null) runShiftAnimations(shiftRects);
+		ensureCurrentCardVisible(pane.querySelector(".dap-scroll"), snapshot?.current ?? null);
+		if (focusAfterMigrationId !== null) cardsById.get(focusAfterMigrationId)?.el.focus();
 		// 区域已有条目但列表仍在途时，在区头部显示行内加载指示（R-01-014/AC-01）。
 		const headerEl = pane.querySelector(".dap-header");
 		const recentHeadEl = recentSection?.querySelector(".dap-recent-head") ?? null;