dsh-activity-pane 0.4.0 → 0.7.0

package/.dsh-plugin/client.js

@@ -9,7 +9,7 @@ window.__ModuleLoader__.load({
 //
 // 数据源约定（来自 @deepseek-ai/dsh-client-runtime 的 sessions.list 快照）：
 //   ids: SessionId[]                     —— 宿主列表顺序（祖先在前的 lineage 顺序）
-//   byId[id]: { id, displayTitle, title?, cwd?, parentId?, running, completed?,
+//   byId[id]: { id, displayTitle, title?, cwd?, parentId?, origin?, running, completed?,
 //              pendingInteraction?: 'approval'|'plan-review'|'question', blank, ... }
 //   current: SessionId | undefined
 //   subagentsByParent: { [parentId]: { entries: [{ id, label, ... }] } }
@@ -17,8 +17,8 @@ window.__ModuleLoader__.load({
 // 以及 workspaces.list 的 items: [{ title, path, sessionIds }]。
 //
 // 展示规则：
-//   主会话（无有效 parentId）：running || completed || pendingInteraction 都显示；
-//   子代理：仅 running || pendingInteraction 时显示（结束后即消失）；
+//   主会话（非有效子代理行）：running || completed || pendingInteraction 都显示；
+//   子代理（origin === 'subagent' 且 parentId 有效）：仅 running || pendingInteraction 时显示（结束后即消失）；
 //   pendingInteraction 总是优先视为"等待用户行动"（即使在 running 中）。
 
 const PENDING_LABELS = {
@@ -1281,11 +1281,11 @@ function workspaceInfoForSession(sessionId, workspaceItems, byId = {}) {
 }
 
 /**
- * 工作区徽标色相（R-01-003/AC-08、AC-09）：以工作区身份为唯一输入的纯函数——
+ * 工作区徽标基色色相（R-01-003/AC-08、AC-09）：以工作区身份为唯一输入的纯函数——
  * djb2 哈希经雪崩终混（异或右移 + 乘法，把高位熵折入低位，消除 djb2 低位分布
  * 聚集；每步 >>> 0 保持无符号，异或结果可能带符号位）后在避开红色警戒区的
  * 色相弧 [30°,320°] 上均匀取色（30 + hash % 291），输出 [30,320] 整数。
- * 同一身份恒得同一色相，与工作区列表顺序、会话状态及持久化存储无关，页面
+ * 同一身份恒得同一基色色相，与工作区列表顺序、会话状态及持久化存储无关，页面
  * 刷新后不变；空身份返回 null。
  */
 function workspaceHue(key) {
@@ -1304,34 +1304,99 @@ function workspaceHue(key) {
 	return 30 + (hash % 291);
 }
 
-const WORKSPACE_HUE_ANCHORS = [55, 100, 145, 190, 235, 280, 325];
+const WORKSPACE_COLOR_SLOTS = Object.freeze([
+	{ slot: 0, hue: 55, darkL: 0.78, darkC: 0.16, lightL: 0.48, lightC: 0.15 },
+	{ slot: 1, hue: 100, darkL: 0.78, darkC: 0.16, lightL: 0.48, lightC: 0.15 },
+	{ slot: 2, hue: 145, darkL: 0.78, darkC: 0.16, lightL: 0.48, lightC: 0.15 },
+	{ slot: 3, hue: 190, darkL: 0.78, darkC: 0.16, lightL: 0.48, lightC: 0.15 },
+	{ slot: 4, hue: 235, darkL: 0.78, darkC: 0.16, lightL: 0.48, lightC: 0.15 },
+	{ slot: 5, hue: 280, darkL: 0.78, darkC: 0.16, lightL: 0.48, lightC: 0.15 },
+	{ slot: 6, hue: 325, darkL: 0.78, darkC: 0.16, lightL: 0.48, lightC: 0.15 },
+	{ slot: 7, hue: 77, darkL: 0.64, darkC: 0.15, lightL: 0.36, lightC: 0.15 },
+	{ slot: 8, hue: 122, darkL: 0.64, darkC: 0.15, lightL: 0.36, lightC: 0.15 },
+	{ slot: 9, hue: 167, darkL: 0.64, darkC: 0.15, lightL: 0.36, lightC: 0.15 },
+	{ slot: 10, hue: 257, darkL: 0.64, darkC: 0.15, lightL: 0.36, lightC: 0.15 },
+	{ slot: 11, hue: 302, darkL: 0.64, darkC: 0.15, lightL: 0.36, lightC: 0.15 },
+].map(Object.freeze));
+
+const WORKSPACE_BACKGROUND_SLOTS = Object.freeze([
+	{
+		slot: 0,
+		dark: Object.freeze({ l: 0.30, c: 0.05, mix: "26%", borderMix: "46%" }),
+		light: Object.freeze({ l: 0.92, c: 0.05, mix: "20%", borderMix: "34%" }),
+	},
+	{
+		slot: 1,
+		dark: Object.freeze({ l: 0.38, c: 0.06, mix: "31%", borderMix: "52%" }),
+		light: Object.freeze({ l: 0.84, c: 0.06, mix: "27%", borderMix: "42%" }),
+	},
+	{
+		slot: 2,
+		dark: Object.freeze({ l: 0.46, c: 0.07, mix: "36%", borderMix: "58%" }),
+		light: Object.freeze({ l: 0.76, c: 0.07, mix: "34%", borderMix: "50%" }),
+	},
+].map(Object.freeze));
+
+const WORKSPACE_PRIMARY_SLOT_COUNT = 7;
+const WORKSPACE_SECONDARY_SLOT_COUNT = WORKSPACE_COLOR_SLOTS.length - WORKSPACE_PRIMARY_SLOT_COUNT;
+
+function workspaceSlotProbe(start, count, step) {
+	return Array.from({ length: count }, (_, offset) => (start + offset * step) % count);
+}
 
 /**
- * 同屏工作区色相消解（R-01-003/AC-08、AC-12）：身份去重排序后，以稳定基色
- * 确定七个 OKLCH 感知锚点的起始槽；撞槽时按步进 3 跨色区探测。超过七个
- * 工作区后选择当前使用次数最少的槽，使复用均衡且确定。
+ * 同屏工作区复合颜色槽位消解（R-01-003/AC-08、AC-12）：前七个身份沿原七色
+ * OKLCH 主槽位分配，主槽位占满后再使用五个受控明度/色相补充槽位；每个前景槽位
+ * 内优先使用未用的三个背景变体；超过三十六个复合身份后按槽位使用次数均衡复用。
  */
-function resolveWorkspaceHues(keys) {
+function resolveWorkspaceColors(keys) {
 	const identities = [...new Set((Array.isArray(keys) ? keys : []).map(cleanText).filter(Boolean))].sort();
-	const uses = WORKSPACE_HUE_ANCHORS.map(() => 0);
+	const uses = WORKSPACE_COLOR_SLOTS.map(() => 0);
+	const backgroundUses = WORKSPACE_COLOR_SLOTS.map(() => WORKSPACE_BACKGROUND_SLOTS.map(() => 0));
 	const resolved = new Map();
 	for (const identity of identities) {
-		const start = (workspaceHue(identity) - 30) % WORKSPACE_HUE_ANCHORS.length;
-		let chosen = start;
-		for (let offset = 0; offset < WORKSPACE_HUE_ANCHORS.length; offset += 1) {
-			const candidate = (start + offset * 3) % WORKSPACE_HUE_ANCHORS.length;
-			if (uses[candidate] < uses[chosen]) chosen = candidate;
-			if (uses[candidate] === 0) {
-				chosen = candidate;
-				break;
-			}
+		const baseHue = workspaceHue(identity);
+		const primaryOrder = workspaceSlotProbe(
+			(baseHue - 30) % WORKSPACE_PRIMARY_SLOT_COUNT,
+			WORKSPACE_PRIMARY_SLOT_COUNT,
+			3,
+		);
+		const secondaryOrder = workspaceSlotProbe(
+			(baseHue - 30) % WORKSPACE_SECONDARY_SLOT_COUNT,
+			WORKSPACE_SECONDARY_SLOT_COUNT,
+			2,
+		).map((index) => WORKSPACE_PRIMARY_SLOT_COUNT + index);
+		const order = [...primaryOrder, ...secondaryOrder];
+		const backgroundOrder = workspaceSlotProbe(
+			(baseHue - 30) % WORKSPACE_BACKGROUND_SLOTS.length,
+			WORKSPACE_BACKGROUND_SLOTS.length,
+			2,
+		);
+		const availableForegroundOrder = order.filter((index) => backgroundOrder.some((backgroundSlot) => backgroundUses[index][backgroundSlot] === 0));
+		const foregroundOrder = availableForegroundOrder.length > 0 ? availableForegroundOrder : order;
+		let foregroundSlot = foregroundOrder.find((index) => uses[index] === 0);
+		if (foregroundSlot === undefined) {
+			foregroundSlot = foregroundOrder.reduce(
+				(best, index) => (uses[index] < uses[best] ? index : best),
+				foregroundOrder[0],
+			);
 		}
-		uses[chosen] += 1;
-		resolved.set(identity, WORKSPACE_HUE_ANCHORS[chosen]);
+		uses[foregroundSlot] += 1;
+		const backgroundUsesForForeground = backgroundUses[foregroundSlot];
+		const backgroundSlot = backgroundOrder.reduce(
+			(best, index) => (backgroundUsesForForeground[index] < backgroundUsesForForeground[best] ? index : best),
+			backgroundOrder[0],
+		);
+		backgroundUsesForForeground[backgroundSlot] += 1;
+		resolved.set(identity, {
+			foreground: WORKSPACE_COLOR_SLOTS[foregroundSlot],
+			background: WORKSPACE_BACKGROUND_SLOTS[backgroundSlot],
+		});
 	}
 	return resolved;
 }
 
+
 /** 主会话按左侧工作区顺序排序的权重；不在任何 workspace 的排在最后保持 lineage 顺序。 */
 function workspaceRank(workspaceItems) {
 	const wsIndex = new Map();
@@ -1386,6 +1451,7 @@ function mainTitle(byId, id) {
  *   - 主会话 running（且无 pending）或处于委托周期（含后代耗尽空窗）→ 'running'
  *   - 主会话 pendingInteraction / completed / errorReminder → 'awaiting'（等待用户行动）
  *   - 子代理 running / pending 或存在活动后代 → 'subagent'，自身与后代均不活动则不显示
+ *   - 普通 fork 虽有 parentId，但 origin 缺失，仍按独立主会话处理
  * completions（完成确认与错误提醒，R-01-002/AC-05、AC-13、R-01-010/AC-06）：Map id →
  * { lastTurnEnd, lastTurnEndKind, lastTurnEndError, ackedAt }，由渲染层从宿主侧 ack 状态
  * 通道注入；其中完成提醒成立（completionReminder）或错误提醒成立（errorReminder）的
@@ -1393,21 +1459,38 @@ function mainTitle(byId, id) {
  * 记账派生）：集合内会话视同处于委托周期——后代耗尽至 settle 处理回合启动的
  * 空窗内仍保持运行呈现、完成/错误提醒不生效；条目的 descendantActive 字段
  * 始终为当帧原始后代活性（供进度锚点记账判定耗尽），不受 delegatingIds 影响。
+ * archivedIds（工作区服务的注册表全局归档集合）：归档会话及其有效子代理子树不产出活动条目，
+ * 普通 fork 仅因共享来源 parentId 不受影响；避免会话服务仍保留旧行或完成提醒时在窗格中滞留。
  */
-function buildEntries(snapshot, workspaceItems, detailsById = {}, completions = null, delegatingIds = null) {
+function buildEntries(snapshot, workspaceItems, detailsById = {}, completions = null, delegatingIds = null, archivedIds = []) {
 	const byId = isRecord(snapshot) && isRecord(snapshot.byId) ? snapshot.byId : {};
 	const ids = Array.isArray(snapshot?.ids) ? snapshot.ids : [];
 	const current = snapshot?.current ?? null;
 	const subagentsByParent = isRecord(snapshot?.subagentsByParent)
 		? snapshot.subagentsByParent
 		: {};
+	const archived = archivedIds instanceof Set
+		? new Set([...archivedIds].map((id) => String(id)))
+		: new Set((archivedIds ?? []).map((id) => String(id)));
+	const isArchived = (id) => {
+		const seen = new Set();
+		let currentId = id;
+		while (currentId !== undefined && currentId !== null) {
+			const key = String(currentId);
+			if (archived.has(key) || seen.has(key)) return archived.has(key);
+			seen.add(key);
+			currentId = subagentParentId(byId[key], byId);
+		}
+		return false;
+	};
 	const rank = workspaceRank(workspaceItems ?? []);
-	const descendantIds = descendantActiveIds(byId);
+	const descendantIds = descendantActiveIds(byId, isArchived);
 	// 第一遍：层级关系 + 显示判定（show = 自身活动 || 委托周期 || 完成提醒，单点实现避免漂移）。
 	const rootIds = [];
 	const childIds = new Map();
 	const meta = new Map();
 	for (const id of ids) {
+		if (isArchived(id)) continue;
 		const row = byId[id];
 		if (!isRecord(row)) continue;
 		const hasParent = isSubagentRow(row, byId);
@@ -1625,10 +1708,15 @@ function listLoadState(snapshot) {
 	return "ready";
 }
 
-/** 会话行是否为某主会话的直属子代理。 */
+/** 会话行是否为某主会话的直属子代理：需同时满足 origin 与有效父会话。 */
 function isSubagentRow(row, byId = {}) {
 	const id = row?.parentId;
-	return id !== undefined && id !== null && isRecord(byId[id]);
+	return row?.origin === "subagent" && id !== undefined && id !== null && isRecord(byId[id]);
+}
+
+/** 取实际子代理的直属母会话 id；普通 fork 的 parentId 只是来源关系，不参与子代理树。 */
+function subagentParentId(row, byId = {}) {
+	return isSubagentRow(row, byId) ? row.parentId : undefined;
 }
 
 /** 会话行是否满足自身状态的活动判定，不含后代活动继承。
@@ -1642,31 +1730,32 @@ function isOwnActiveRow(row, byId = {}) {
 	return running || pending;
 }
 
-/** 沿自身活动会话的有效 parentId 链上溯收集会话 id：includeSelf 含活动会话自身，
+/** 沿实际子代理关系的有效 parentId 链上溯收集会话 id：includeSelf 含活动会话自身，
  *  否则只收祖先（存在活动后代的母会话）。活动区与历史区显示判定的单点实现。 */
-function lineageActiveIds(byId, includeSelf) {
+function lineageActiveIds(byId, includeSelf, isExcluded = null) {
 	const ids = new Set();
 	for (const [id, row] of Object.entries(byId)) {
-		if (!isOwnActiveRow(row, byId)) continue;
+		if (isExcluded?.(id) || !isOwnActiveRow(row, byId)) continue;
 		const seen = new Set();
-		let currentId = includeSelf ? id : row?.parentId;
+		let currentId = includeSelf ? id : subagentParentId(row, byId);
 		while (currentId !== undefined && currentId !== null && isRecord(byId[currentId]) && !seen.has(String(currentId))) {
+			if (isExcluded?.(currentId)) break;
 			seen.add(String(currentId));
 			ids.add(String(currentId));
-			currentId = byId[currentId]?.parentId;
+			currentId = subagentParentId(byId[currentId], byId);
 		}
 	}
 	return ids;
 }
 
-/** 沿活动会话的有效 parentId 链补齐活动祖先（含活动会话自身），供历史区显示判定。 */
+/** 沿实际子代理关系补齐活动祖先（含活动会话自身），供历史区显示判定。 */
 function activeSessionIds(byId = {}) {
 	return lineageActiveIds(byId, true);
 }
 
 /** 「存在活动后代」的母会话集合（不含活动会话自身），供 buildEntries 判定委托周期（R-01-003/AC-05）。 */
-function descendantActiveIds(byId = {}) {
-	return lineageActiveIds(byId, false);
+function descendantActiveIds(byId = {}, isExcluded = null) {
+	return lineageActiveIds(byId, false, isExcluded);
 }
 
 /** 判断活动条目是否需要建立轮内状态订阅：以宿主 running 为准、与呈现 kind 解耦——
@@ -1904,12 +1993,14 @@ function buildRecent(snapshot, workspaceItems, now, detailsById = {}, archivedId
 	return entries;
 }
 
-/** 毫秒时长的人性化短格式，例如 "47s"、"3m12s"。 */
+/** 毫秒时长的人性化短格式，例如 "47s"、"3m12s"、"1h2m3s"。 */
 function fmtElapsedMs(ms) {
 	if (!Number.isFinite(ms) || ms < 0) return "";
 	const s = Math.round(ms / 1000);
 	if (s < 60) return `${s}s`;
-	return `${Math.floor(s / 60)}m${s % 60}s`;
+	const m = Math.floor(s / 60);
+	if (m < 60) return `${m}m${s % 60}s`;
+	return `${Math.floor(m / 60)}h${m % 60}m${s % 60}s`;
 }
 
 /** 历史卡相对活动时间：按分钟、小时、天、周、月、年分级；负值返回空。 */
@@ -2108,6 +2199,43 @@ function openSession(sessions, sessionId) {
 	}
 }
 
+/**
+ * 以最小必要距离把卡片滚入窗格滚动视口；不会居中，也不会滚动外层页面。
+ * 默认使用原生 smooth scroll，调用方可传 auto 适配降低动效偏好；缺少 scrollTo 或 options 不受支持时回退为同步滚动
+ * （R-01-006/AC-02）。
+ */
+function scrollCardIntoView(scroll, card, behavior = "smooth") {
+	if (typeof scroll?.getBoundingClientRect !== "function" || typeof card?.getBoundingClientRect !== "function")
+		return false;
+	const viewport = scroll.getBoundingClientRect();
+	const rect = card.getBoundingClientRect();
+	const delta = rect.top < viewport.top
+		? rect.top - viewport.top
+		: rect.bottom > viewport.bottom
+			? rect.bottom - viewport.bottom
+			: 0;
+	if (delta === 0) return false;
+	const currentTop = Number(scroll.scrollTop);
+	if (!Number.isFinite(currentTop)) return false;
+	const scrollHeight = Number(scroll.scrollHeight);
+	const clientHeight = Number(scroll.clientHeight);
+	const maxTop = Number.isFinite(scrollHeight) && Number.isFinite(clientHeight)
+		? Math.max(0, scrollHeight - clientHeight)
+		: Infinity;
+	const nextTop = Math.min(maxTop, Math.max(0, currentTop + delta));
+	if (!Number.isFinite(nextTop) || nextTop === currentTop) return false;
+	if (typeof scroll.scrollTo === "function") {
+		try {
+			scroll.scrollTo({ top: nextTop, behavior });
+			if (behavior !== "auto" || Number(scroll.scrollTop) !== currentTop) return true;
+		} catch (error) {
+			if (!(error instanceof TypeError)) throw error;
+		}
+	}
+	scroll.scrollTop = nextTop;
+	return Number(scroll.scrollTop) !== currentTop;
+}
+
 /** 原生会话输入框（dsh-client-ui-conversation composer 的 textarea）。 */
 const COMPOSER_SELECTOR = "textarea[data-phase]";
 
@@ -2620,23 +2748,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; }
@@ -3179,16 +3325,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) {
@@ -3209,6 +3357,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();
@@ -4357,22 +4508,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", "");
 			}
 		}
@@ -4751,7 +4920,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");
@@ -4808,7 +4977,7 @@ function apply(ctx) {
 				recentTimeText ? "，" + recentTimeText : ""
 			}`,
 		);
-		renderCardInto(rec.el, entry, hueByWorkspace);
+		renderCardInto(rec.el, entry, colorByWorkspace);
 		// 只有顺序/归属真正变化时才移动 DOM：每次渲染无条件 appendChild 会把所有
 		// 卡片瞬时移除再插回——按下/抬起之间经过的移动让浏览器取消 click；焦点卡
 		// 被瞬时断开而失焦；悬停卡的 :hover 也随之丢失且不再补发。会话活跃期间
@@ -4818,6 +4987,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;
@@ -5001,6 +5201,8 @@ function apply(ctx) {
 			recentTotal = 0;
 			recentHasMore = false;
 			recentAppendQueued = false;
+			autoScrolledCurrentId = null;
+			autoScrolledCurrentCard = null;
 			// 旧窗格已脱离文档：其在飞平移的 transitionend 不再触发，逐元素取消避免残留。
 			for (const el of [...shiftCleanups.keys()]) cancelShift(el);
 		}
@@ -5009,6 +5211,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" };
@@ -5033,7 +5236,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(
@@ -5231,12 +5434,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 量取整体跳过。
@@ -5250,7 +5473,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);
@@ -5267,7 +5490,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);
@@ -5286,6 +5509,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;

package/README.md

@@ -53,7 +53,7 @@ The npm package ships prebuilt, so no local build step is needed. If the pane do
 - [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.
 - [x] **Current work and run stats**: active cards show the latest instruction, thinking, and tool calls in a collapsed timeline of at most 4 rows; running cards also show round progress, output rate, cache hit rate, input/output tokens, and run duration, while completed, blocked, and error waits retain the previous round's duration at the end of the token stats row alongside last-known output stats; recent history cards retain the latest completed round's available stats between the reply preview and activity time.
-- [x] **Session navigation**: clicking or keyboard-activating a session card jumps to that session's page, and the current session stays highlighted.
+- [x] **Session navigation**: clicking or keyboard-activating a session card jumps to that session's page, the current session stays highlighted, and selecting a session from DSH's native sidebar brings its pane card fully into view without forced centering.
 - [x] **Session metadata**: session cards show the current model name and reasoning level.
 - [x] **Polished desktop & mobile interactions**: the desktop pane can collapse, be resized by dragging, and remember its width; mobile uses a fixed drawer that does not squeeze the main conversation layout; long lists get independent scrolling and a back-to-top button.
 

package/README.zh-CN.md

@@ -53,7 +53,7 @@ npm 包内置预构建产物，无需本地构建步骤。安装后如窗格未
 - [x] **显示子/孙会话层级**：子代理以连接线和紧凑卡片嵌套在母会话下；母会话自身回合结束但仍有活动后代时继续按运行中呈现，子代理结束且没有活动后代后从活动区消失；历史区只保留主会话。
 - [x] **显示工作区名称并参与排序**：会话卡片显示带稳定色彩的工作区徽标，会话排序与左侧边栏中的工作区顺序保持一致。
 - [x] **展示当前工作与运行统计**：活动卡以最多 4 行折叠时间线展示最近指令、思考与工具调用；运行中卡片还显示回合进度、输出速率、缓存命中率、输入/输出 token 与运行时长，进入完成、阻塞或错误等待后在统计行末尾与 tok/s 等内容并列保留上一轮耗时及最后已知统计；迁入最近历史后，历史卡在助手预览与活动时间之间继续保留最后一轮的可用统计。
-- [x] **加入会话导航跳转**：点击或键盘激活会话卡片可跳转到对应会话页面，当前会话保持高亮。
+- [x] **加入会话导航跳转**：点击或键盘激活会话卡片可跳转到对应会话页面，当前会话保持高亮；从 DSH 原生左侧栏选择会话时，对应窗格卡片会滚动到完整可见，不强制居中。
 - [x] **增加会话元信息**：会话卡片中显示当前使用的模型名称和推理级别。
 - [x] **完善桌面与移动交互**：桌面窗格可折叠、拖拽调宽并记忆宽度；移动端使用不挤压主会话布局的固定抽屉；长列表提供独立滚动与回到顶部按钮。
 

package/package.json

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

package/scripts/acceptance.mjs

@@ -17,7 +17,7 @@
 // - R-01-002/AC-05、AC-10、AC-11、AC-12 完成提醒路径 → e2e/specs/completion-sync.mjs
 // - R-01-002/AC-05、AC-06、AC-09、AC-10、AC-12、AC-13 错误提醒路径 → e2e/specs/error-reminder.mjs
 // T-084 起第二批：
-// - R-01-005/AC-01 点击/Enter/Space、R-01-006/AC-01 → e2e/specs/navigation.mjs
+// - R-01-005/AC-01 点击/Enter/Space、R-01-006/AC-01～AC-02 → e2e/specs/navigation.mjs、e2e/specs/long-list.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、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 结构断言已迁，多工作区感知区分与「标题随宿主更新」半句仍人工）
@@ -37,7 +37,9 @@ const steps = [
 	// R-01-003/AC-06、AC-07 工作区徽标图标与字号
 	"确认活动卡与最近卡上的工作区名称文字前都有文件夹图标，且与左边栏工作区条目的图标相同（一眼可辨为工作区归属）；名称字号明显可读（不低于 10.5px），深浅主题下图标颜色与文字协调；把窗格拖窄使名称超长，确认仍以省略号截断而图标完整不被挤压。",
 	// R-01-003/AC-08、AC-09、AC-10、AC-11、AC-12 工作区徽标色彩区分与协调
-	"同时保持归属不同工作区的多个会话卡片可见，确认同一工作区的所有徽标（图标、文字、底色与描边）为同一色系、不同工作区的徽标颜色分布在橙/黄绿/绿/青/蓝/紫/洋红等感官明显不同的色区，且任何徽标都不是红色警戒色；重点确认 docsim 为橙色、dsh-activity-pane 为青色、ops 为蓝紫色，三者一眼可区分；每枚徽标的前景（图标+文字）与背景为 OKLCH 同色相单色系，文字鲜明不发灰、明度对比拉开；同一可见工作区集合下刷新页面后各工作区颜色保持不变；切换深浅主题后徽标仍协调且文字可辨，胶囊尺寸与字号不变。",
+	// R-01-003/AC-10：深浅主题前景、底色与描边均可辨。
+	// R-01-003/AC-11：颜色槽位保持 OKLCH 同色相单色系。
+	"同时保持归属不同工作区的多个会话卡片可见，确认同一工作区的所有徽标（图标、文字、底色与描边）使用同一颜色槽位；当可见工作区达到 8～12 个时，主色相与明度/色相补充槽仍能一眼区分；当某个前景槽位发生复用时，3 档背景变体能拉开同前景色的底色/描边层次；颜色分布覆盖橙/黄绿/绿/青/蓝/紫/洋红等色区，且任何徽标都不是红色警戒色；重点确认 docsim、dsh-activity-pane、ops 与至少一个补充槽位工作区彼此可区分；每枚徽标的前景（图标+文字）与背景为 OKLCH 同色相单色系，文字鲜明不发灰、明度对比拉开；同一可见工作区集合下刷新页面后各工作区颜色槽位保持不变；切换深浅主题后徽标仍协调且文字可辨，胶囊尺寸与字号不变。",
 	// R-01-005/AC-01 活跃期连续点击（回归：渲染不得移动卡片 DOM 吃掉 click/焦点/悬停）
 	"在某会话持续流式运行期间，连续点击当前会话活动卡与各历史卡：每次 click 都应生效（当前卡获得并保持焦点、其它卡完成跳转），悬停高亮不丢失；运行结束后行为保持一致。",
 	// R-01-005/AC-01 移动端切换不弹软键盘（回归：抑制原生 composer 自动聚焦）