@cowwo/dsh-icon-custom 0.10.0 → 0.10.2

package/client/client.js

@@ -60,6 +60,14 @@ window.__ModuleLoader__.load({
 			unreadWaiting: "在等你",
 			unreadEnded: "刚结束,还没看",
 			unreadPanelOther: "其他",
+			unreadMarkAllRead: "全部标记已读",
+			/** 与官方侧栏同一形状("13小时"),方便和列表里的时间戳逐字对上。 */
+			ageNow: "刚刚",
+			ageMinutes: "{n}分钟",
+			ageHours: "{n}小时",
+			ageDays: "{n}天",
+			ageMonths: "{n}个月",
+			ageYears: "{n}年",
 			workspaceDotLabel: "在工作区和会话行上显示红点(实验)",
 			workspaceDotHint: "在侧栏工作区那一行的文件夹图标上点一个小红点。这一项是贴着页面结构做的,DSH 升级后可能失效;失效时只会变成\"不显示\",不会影响红点数字、清单、跳转这些功能,随时可以关掉它。",
 			badgeTestHint: "真实未读 = 有会话发生了上面勾选的情况、而且你还没看过它(打开该会话即视为已读)。你正开着的会话也算——窗口可能被最小化、页面可能切到后台,这里无从判断你在不在看,所以不做这个区分。只有子代理不计。手动模式:自己填数字试看效果。刷新页面后回到真实未读。",
@@ -118,6 +126,14 @@ window.__ModuleLoader__.load({
 			unreadWaiting: "waiting for you",
 			unreadEnded: "ended, not seen yet",
 			unreadPanelOther: "Other",
+			unreadMarkAllRead: "Mark all read",
+			/** Same shape as the shipped sidebar ("13h"), so the two can be read side by side. */
+			ageNow: "now",
+			ageMinutes: "{n}min",
+			ageHours: "{n}h",
+			ageDays: "{n}d",
+			ageMonths: "{n}mo",
+			ageYears: "{n}y",
 			workspaceDotLabel: "Dots on workspace and session rows (experimental)",
 			workspaceDotHint: "Adds a small red dot to the folder icon of each workspace row. This one reads the page structure, so a DSH upgrade may break it; when it does it simply stops showing, never affecting the counts, the list, or navigation. Turn it off any time.",
 			badgeTestHint: "Real unread = a session ended for one of the checked reasons and you have not looked at it yet (opening a session marks it read). The session you are viewing counts too — the window may be minimised or the page in the background, so this half cannot tell whether you are looking, and does not pretend to. Only sub-agents never count. Manual = type a number to preview. Resets to Real on reload.",
@@ -272,21 +288,67 @@ window.__ModuleLoader__.load({
 			return () => { unreadConfigListeners.delete(fn); };
 		}
 
-		const SEEN_STORE_KEY = "dsh-icon-custom.unread-seen.v1";
+		/**
+		 * The seen watermark lives in the HOST's clock domain.
+		 *
+		 * A turn end arrives stamped with the Host's `turn/end.time`; a mark written
+		 * from the browser's `Date.now()` only lines up while both clocks agree. A
+		 * browser a few seconds behind the Host therefore wrote marks that never
+		 * reached `endAt`, so the dot could not be cleared by entering the session at
+		 * all — the one failure users report as "点进去也不消". Marks now store the
+		 * `endAt` they acknowledge, and `lastActiveAt` stores a host-domain time, so
+		 * every comparison in `collectUnread` stays inside one clock.
+		 */
+		const SEEN_STORE_KEY = "dsh-icon-custom.unread-seen.v2";
+		/** 0.10.1 and earlier wrote browser timestamps here; migrated once. */
+		const LEGACY_SEEN_STORE_KEY = "dsh-icon-custom.unread-seen.v1";
 		const SEEN_MAX = 400;
+		/** Host clock minus browser clock, from the last Host sample; null until known. */
+		let hostClockOffset = null;
+		/** This browser's clock expressed in the Host's domain (best effort). */
+		function hostNow() {
+			return Date.now() + (hostClockOffset === null ? 0 : hostClockOffset);
+		}
 		function loadSeenState() {
 			try {
 				const raw = JSON.parse(window.localStorage.getItem(SEEN_STORE_KEY) || "null");
-				if (raw === null || typeof raw !== "object") return { lastActiveAt: 0, seen: {} };
-				const seen = raw.seen !== null && typeof raw.seen === "object" ? raw.seen : {};
-				return { lastActiveAt: typeof raw.lastActiveAt === "number" ? raw.lastActiveAt : 0, seen };
-			} catch { return { lastActiveAt: 0, seen: {} }; }
+				if (raw !== null && typeof raw === "object" && raw.domain === "host") {
+					const seen = raw.seen !== null && typeof raw.seen === "object" ? raw.seen : {};
+					return { domain: "host", lastActiveAt: typeof raw.lastActiveAt === "number" ? raw.lastActiveAt : 0, seen };
+				}
+				const legacy = JSON.parse(window.localStorage.getItem(LEGACY_SEEN_STORE_KEY) || "null");
+				if (legacy !== null && typeof legacy === "object") {
+					const seen = legacy.seen !== null && typeof legacy.seen === "object" ? legacy.seen : {};
+					return { domain: "browser", lastActiveAt: typeof legacy.lastActiveAt === "number" ? legacy.lastActiveAt : 0, seen };
+				}
+			} catch { /* fall through to an empty store */ }
+			return { domain: "host", lastActiveAt: 0, seen: {} };
 		}
 		const seenState = loadSeenState();
-		/** When this browser last had the app open before this page load. */
+		/** When this browser last had the app open before this page load (host domain). */
 		const seenBootAt = seenState.lastActiveAt > 0 ? seenState.lastActiveAt : 0;
 		function saveSeenState() {
-			try { window.localStorage.setItem(SEEN_STORE_KEY, JSON.stringify(seenState)); } catch {}
+			try {
+				window.localStorage.setItem(SEEN_STORE_KEY, JSON.stringify({ domain: "host", lastActiveAt: seenState.lastActiveAt, seen: seenState.seen }));
+			} catch {}
+		}
+		/**
+		 * Learn the Host↔browser clock offset from a Host timestamp, and fold a
+		 * legacy browser-domain store into the host domain. Idempotent: the fold
+		 * happens once, on the first sample that carries a usable `hostNow`.
+		 * @param hostAt - the Host's `Date.now()`, or anything else (ignored).
+		 */
+		function noteHostClock(hostAt) {
+			if (typeof hostAt !== "number" || !Number.isFinite(hostAt) || hostAt <= 0) return;
+			const offset = hostAt - Date.now();
+			hostClockOffset = offset;
+			if (seenState.domain === "host") return;
+			seenState.domain = "host";
+			if (seenState.lastActiveAt > 0) seenState.lastActiveAt += offset;
+			for (const id of Object.keys(seenState.seen)) {
+				if (typeof seenState.seen[id] === "number") seenState.seen[id] += offset;
+			}
+			saveSeenState();
 		}
 		function pruneSeenState() {
 			const ids = Object.keys(seenState.seen);
@@ -294,10 +356,20 @@ window.__ModuleLoader__.load({
 			ids.sort((a, b) => seenState.seen[b] - seenState.seen[a]);
 			for (const id of ids.slice(SEEN_MAX)) delete seenState.seen[id];
 		}
-		/** Record that this browser is looking at a session right now. */
-		function noteSeen(sessionId) {
+		/**
+		 * Record that this browser has seen a session up to `seenAt` — the
+		 * host-domain `endAt` being acknowledged. Marks never move backwards, so a
+		 * late attempt cannot undo a newer one.
+		 * @param sessionId - the session that was looked at.
+		 * @param seenAt - host-domain watermark to store; defaults to the Host's now.
+		 * @returns whether the mark actually advanced.
+		 */
+		function noteSeen(sessionId, seenAt) {
 			if (typeof sessionId !== "string" || sessionId === "") return false;
-			seenState.seen[sessionId] = Date.now();
+			const mark = typeof seenAt === "number" && Number.isFinite(seenAt) ? seenAt : hostNow();
+			const previous = seenState.seen[sessionId];
+			if (typeof previous === "number" && previous >= mark) return false;
+			seenState.seen[sessionId] = mark;
 			return true;
 		}
 		/**
@@ -307,7 +379,7 @@ window.__ModuleLoader__.load({
 		 * @returns whether anything was learned (callers persist only then).
 		 */
 		function ensureSeenBaseline(ids) {
-			const fallback = seenBootAt > 0 ? seenBootAt : Date.now();
+			const fallback = seenBootAt > 0 ? seenBootAt : hostNow();
 			let changed = false;
 			for (const id of ids) {
 				if (typeof id !== "string" || id === "") continue;
@@ -318,30 +390,46 @@ window.__ModuleLoader__.load({
 			return changed;
 		}
 		/**
-		 * The session the main view is showing.
+		 * Every session the main view is showing.
+		 *
+		 * The official signal is the row's `retainedBy.mainView` retention count, the
+		 * same one ui-layout's DocumentTitle, ui-cordis, ui-open-in-app and ui-session
+		 * read (`list.current` is honoured first for runtimes that expose it).
 		 *
-		 * DSH 0.2.x carries NO `current` field in the session-list snapshot — it is
-		 * written with exactly `ids` / `byId` / `phase` / `projectionsBySession`. The
-		 * official signal is the row's `retainedBy.mainView` retention count, the same
-		 * one ui-layout's DocumentTitle, ui-cordis, ui-open-in-app and ui-session read.
-		 * Reading `list.current` here made `noteSeen()` a no-op, so the seen watermark
-		 * never advanced and an unread dot could never be cleared by opening the
-		 * session. Runtimes that do expose `current` are still honoured first.
+		 * It returns ALL of them, not one. The pane retains the incoming session
+		 * BEFORE it releases the outgoing one, and a retention that outlives its pane
+		 * can leave an old session looking "current" for good — and picking a single
+		 * id then meant the session you were actually reading was never marked read:
+		 * the dot stayed red however long you stayed in it. Each retained session
+		 * gets its own stay clock instead.
 		 * @param list - the session list snapshot (may be absent).
-		 * @returns the id being viewed, or undefined.
+		 * @returns the ids being viewed, in list order; `[]` when there are none.
 		 */
-		function currentSessionId(list) {
-			if (list === null || typeof list !== "object") return undefined;
-			if (typeof list.current === "string" && list.current !== "") return list.current;
+		function currentSessionIds(list) {
+			if (list === null || typeof list !== "object") return [];
+			if (typeof list.current === "string" && list.current !== "") return [list.current];
 			const byId = list.byId;
-			if (byId === null || typeof byId !== "object") return undefined;
+			if (byId === null || typeof byId !== "object") return [];
+			const ids = [];
 			for (const session of Object.values(byId)) {
 				if (session === null || typeof session !== "object") continue;
 				const retainedBy = session.retainedBy;
 				const count = retainedBy !== null && typeof retainedBy === "object" ? retainedBy.mainView : undefined;
-				if (typeof count === "number" && count > 0) return session.id;
+				if (typeof count === "number" && count > 0 && typeof session.id === "string" && session.id !== "") ids.push(session.id);
 			}
-			return undefined;
+			return ids;
+		}
+		/**
+		 * One session's last `turn/end` timestamp (host domain), or 0 when it has
+		 * none. The projection is what the Host folded; an unknown reason still
+		 * carries the time.
+		 * @param entry - the session-list row (may be absent).
+		 * @returns the epoch milliseconds, or 0.
+		 */
+		function lastTurnEndAt(entry) {
+			const values = entry !== null && typeof entry === "object" ? entry.projectionValues : undefined;
+			const value = values !== null && typeof values === "object" ? values[LAST_TURN_END_KEY] : undefined;
+			return value !== null && typeof value === "object" && typeof value.endAt === "number" ? value.endAt : 0;
 		}
 		/**
 		 * What the "stay here long enough" timer is armed for, or "" when nothing
@@ -360,11 +448,7 @@ window.__ModuleLoader__.load({
 		function stayKeyFor(sessionId, list) {
 			if (typeof sessionId !== "string" || sessionId === "") return "";
 			const byId = list !== null && typeof list === "object" && list.byId !== null && typeof list.byId === "object" ? list.byId : {};
-			const entry = byId[sessionId];
-			const values = entry !== null && typeof entry === "object" ? entry.projectionValues : undefined;
-			const value = values !== null && typeof values === "object" ? values[LAST_TURN_END_KEY] : undefined;
-			const endAt = value !== null && typeof value === "object" && typeof value.endAt === "number" ? value.endAt : 0;
-			return `${sessionId}\u0000${endAt}`;
+			return `${sessionId}\u0000${lastTurnEndAt(byId[sessionId])}`;
 		}
 		/**
 		 * How many sessions deserve the badge right now: endings whose reason is
@@ -724,6 +808,19 @@ window.__ModuleLoader__.load({
 			unreadPanelListeners.add(fn);
 			return () => { unreadPanelListeners.delete(fn); };
 		}
+		/**
+		 * Tells the badge source that the marks moved somewhere it did not touch —
+		 * the panel's "mark all read". It must re-render to re-emit the number (which
+		 * also repaints the row dots and rebuilds the tab badge).
+		 */
+		const unreadPokeListeners = new Set();
+		function emitUnreadPoke() {
+			unreadPokeListeners.forEach((fn) => { try { fn(); } catch {} });
+		}
+		function subscribeUnreadPoke(fn) {
+			unreadPokeListeners.add(fn);
+			return () => { unreadPokeListeners.delete(fn); };
+		}
 		function toggleUnreadPanel(anchor) {
 			emitUnreadPanel(!unreadPanelOpen, anchor === undefined ? null : anchor);
 		}
@@ -773,6 +870,97 @@ window.__ModuleLoader__.load({
 			}
 			return groups;
 		}
+		/**
+		 * Age buckets, in the shipped sidebar's own units.
+		 *
+		 * Same thresholds as the official `relativeTime`: under a minute "now", then
+		 * minutes / hours / days / months / years. Deliberately copied instead of
+		 * imported — a display plugin must not depend on a Harness Client package —
+		 * but the SHAPE has to match the sidebar's, because the whole point of
+		 * showing it here is that a reader can line the panel's "13小时" up with the
+		 * timestamp on the row itself.
+		 * @param at - host-domain epoch milliseconds.
+		 * @param now - host-domain now.
+		 * @returns `{ unit, n }`, `unit` in `now|minutes|hours|days|months|years`.
+		 */
+		function relativeAgeParts(at, now) {
+			const MINUTE = 60000, HOUR = 3600000, DAY = 86400000;
+			const diff = Math.max(0, now - at);
+			if (diff < MINUTE) return { unit: "now", n: 0 };
+			if (diff < HOUR) return { unit: "minutes", n: Math.floor(diff / MINUTE) };
+			if (diff < DAY) return { unit: "hours", n: Math.floor(diff / HOUR) };
+			if (diff < 30 * DAY) return { unit: "days", n: Math.floor(diff / DAY) };
+			if (diff < 365 * DAY) return { unit: "months", n: Math.floor(diff / (30 * DAY)) };
+			return { unit: "years", n: Math.floor(diff / (365 * DAY)) };
+		}
+		/**
+		 * One ending's age as text ("13小时" / "13h"), or "" when there is no time.
+		 * @param at - host-domain epoch milliseconds, 0/absent for "unknown".
+		 * @param now - host-domain now.
+		 * @param t - locale binder.
+		 * @returns the label.
+		 */
+		function unreadAgeLabel(at, now, t) {
+			if (typeof at !== "number" || !Number.isFinite(at) || at <= 0) return "";
+			const { unit, n } = relativeAgeParts(at, now);
+			// Same shape as the shipped sidebar's own label: the "now" bucket carries
+			// no number.
+			return unit === "now" ? t("ageNow") : t(`age${unit[0].toUpperCase()}${unit.slice(1)}`, { n });
+		}
+		/**
+		 * A short, unambiguous handle for a session: the first 8 characters of its id.
+		 *
+		 * Two sessions can share a title — that is precisely what made one red dot look
+		 * unclearable, because the row could not be told apart from its namesake — and
+		 * this is what distinguishes them when the titles do not.
+		 * @param id - the session id.
+		 * @returns the short form, or "".
+		 */
+		function shortSessionId(id) {
+			if (typeof id !== "string" || id === "") return "";
+			const bare = id.startsWith("session-") ? id.slice("session-".length) : id;
+			return bare.slice(0, 8);
+		}
+		/**
+		 * The dim second line of one panel row: why it is listed, how long ago that
+		 * was, and which session it is.
+		 * @param item - a row from `collectUnread`.
+		 * @param now - host-domain now.
+		 * @param t - locale binder.
+		 * @returns the line, already joined.
+		 */
+		function unreadRowSubtitle(item, now, t) {
+			const parts = [item.waiting === true ? t("unreadWaiting") : t("unreadEnded")];
+			// A "waiting" row's `at` is Date.now() (it has no ending of its own), so only
+			// turn-end rows carry a readable age.
+			if (item.waiting !== true) {
+				const age = unreadAgeLabel(item.at, now, t);
+				if (age !== "") parts.push(age);
+			}
+			const short = shortSessionId(item.id);
+			if (short !== "") parts.push(short);
+			return parts.join(" · ");
+		}
+		/**
+		 * What "mark all read" may actually acknowledge: the turn-end rows.
+		 *
+		 * A "waiting for you" row is not watermark-based at all — it is listed while
+		 * that interaction is live, and no mark can clear it — so the caller must
+		 * leave it alone.
+		 * @param items - rows from `collectUnread`.
+		 * @returns `[{ id, seenAt }]`, each carrying the `endAt` it acknowledges.
+		 */
+		function unreadAckTargets(items) {
+			const targets = [];
+			for (const item of Array.isArray(items) ? items : []) {
+				if (item === null || typeof item !== "object") continue;
+				if (item.waiting === true) continue;
+				if (typeof item.id !== "string" || item.id === "") continue;
+				if (typeof item.at !== "number" || !Number.isFinite(item.at) || item.at <= 0) continue;
+				targets.push({ id: item.id, seenAt: item.at });
+			}
+			return targets;
+		}
 		//#endregion
 
 		//#region workspace dots
@@ -834,6 +1022,11 @@ window.__ModuleLoader__.load({
 			if (workspaceDotFailures < WS_MAX_FAILURES || workspaceDotGivenUp) return;
 			workspaceDotGivenUp = true;
 			try { console.warn("dsh-icon-custom: 工作区红点连续失败,本次会话内已自动关闭,可在设置里关掉这一项。"); } catch {}
+			// Take the markers OUT rather than leaving them frozen: a stale red dot
+			// that no longer reflects the rule (or that can never be cleared) is worse
+			// than no marker at all, and "breaks down to not showing" is this feature's
+			// stated posture.
+			clearWorkspaceDots();
 		}
 		/** The marker already sitting in this host for that key, or null. */
 		function existingMarker(host, attribute, key) {
@@ -898,6 +1091,38 @@ window.__ModuleLoader__.load({
 			if (rect.height < WS_ROW_MIN_H || rect.height > WS_ROW_MAX_H || rect.width < WS_ROW_MIN_W) return null;
 			return { title: label, row };
 		}
+		/**
+		 * The DOM row of one session, by the official row key.
+		 *
+		 * ui-workspace stamps every row with `data-row-key` (`session:<id>`,
+		 * `workspace:<id>`, `overflow:<id>`), which is the only stable, unambiguous
+		 * handle on a row: titles are neither unique (two sessions can share one) nor
+		 * stable (a generated title lands later). Matching by title text used to find
+		 * two rows and refuse, so a session whose title collided with another's could
+		 * never be marked at all.
+		 * @param container - the browsing region root.
+		 * @param id - the session id.
+		 * @returns the row element, or null.
+		 */
+		function sessionRowElement(container, id) {
+			if (typeof id !== "string" || id === "") return null;
+			try { return container.querySelector(`[data-row-key="session:${id}"]`); } catch { return null; }
+		}
+		/**
+		 * Where one session's marker goes: the tight title holder INSIDE that
+		 * session's own row. The row is found by `data-row-key`; the title inside it
+		 * is still matched by text, because that is the element the marker hangs off.
+		 * Falls back to the old whole-region title match on a build without row keys.
+		 * @returns `{ title, row }`, or null when this row cannot be trusted.
+		 */
+		function sessionRowTarget(container, id, title) {
+			const row = sessionRowElement(container, id);
+			if (row !== null) {
+				const inside = labelElementFor(row, title);
+				return inside === null ? null : titleTargetFor(inside, title);
+			}
+			return titleTargetFor(labelElementFor(container, title), title);
+		}
 		function paintWorkspaceDots() {
 			if (workspaceDotGivenUp) return;
 			const enabled = unreadConfig.workspaceDot !== false;
@@ -950,8 +1175,7 @@ window.__ModuleLoader__.load({
 				// Session rows: the marker rides inline right after the title, so it stays
 				// beside the name whatever the timestamp happens to say.
 				for (const entry of wantedRows) {
-					const label = labelElementFor(container, entry.title);
-					const target = titleTargetFor(label, entry.title);
+					const target = sessionRowTarget(container, entry.id, entry.title);
 					if (target === null) { missed++; continue; }
 					if (existingMarker(target.row, ROW_DOT_ATTR, entry.id) !== null) { placed++; continue; }
 					const dot = document.createElement("span");
@@ -1031,26 +1255,67 @@ window.__ModuleLoader__.load({
 				pruneSeenState();
 				saveSeenState();
 			}, [list]);
-			const currentId = currentSessionId(list);
+			const currentIds = currentSessionIds(list);
 			const items = collectUnread(list, pending, config, seenState.seen);
 			const count = items.length;
 			// Being in a session is what marks it read — but only once you have STAYED
 			// `clearDelaySec` seconds (0 = the moment you enter, the original
-			// behaviour). The timer is torn down whenever you leave, or whenever that
+			// behaviour). A clock is torn down whenever you leave, or whenever that
 			// session becomes unread again from a fresh ending, so the clock restarts;
 			// that teardown IS the "continuous stay, leaving resets it" rule. A reload
-			// restarts it too, since the timer only lives in this page.
-			const currentUnread = items.some((item) => item.id === currentId);
-			const stayKey = currentUnread ? stayKeyFor(currentId, list) : "";
+			// restarts it too, since the timers only live in this page.
+			//
+			// One clock per session the main view shows: with two retained sessions,
+			// marking only the first left the session you were reading unread forever.
+			const unreadIds = new Set(items.map((item) => item.id));
+			const staySignature = currentIds
+				.filter((id) => unreadIds.has(id))
+				.map((id) => stayKeyFor(id, list))
+				.join("|");
 			const delayMs = config.clearDelaySec * 1000;
 			const [, bumpStay] = React.useState(0);
+			// The panel can move the marks without going through this component
+			// ("mark all read"); re-render so the number, the row dots and the tab
+			// badge all follow immediately.
+			const [, bumpPoke] = React.useState(0);
+			React.useEffect(() => subscribeUnreadPoke(() => bumpPoke((n) => n + 1)), []);
+			// The timer chain below is keyed on the signature, but every attempt reads
+			// the CURRENT list and marks; a ref is how the chain sees them.
+			const stayLive = React.useRef({ list });
+			stayLive.current = { list };
 			React.useEffect(() => {
-				if (stayKey === "") return undefined;
-				const markRead = () => { if (noteSeen(currentId)) { saveSeenState(); bumpStay((n) => n + 1); } };
-				if (delayMs <= 0) { markRead(); return undefined; }
-				const timer = window.setTimeout(markRead, delayMs);
-				return () => window.clearTimeout(timer);
-			}, [stayKey, currentId, delayMs]);
+				if (staySignature === "") return undefined;
+				const ids = staySignature.split("|").map((key) => key.slice(0, key.indexOf("\u0000")));
+				let cancelled = false;
+				let timer = 0;
+				const attempt = () => {
+					if (cancelled) return;
+					const byId = stayLive.current.list !== null && typeof stayLive.current.list === "object" && stayLive.current.list.byId !== null && typeof stayLive.current.list.byId === "object" ? stayLive.current.list.byId : {};
+					let changed = false;
+					let stillUnread = false;
+					for (const id of ids) {
+						const endAt = lastTurnEndAt(byId[id]);
+						if (endAt <= 0) continue;
+						const seenAt = seenState.seen[id];
+						if (typeof seenAt === "number" && endAt <= seenAt) continue;
+						stillUnread = true;
+						if (noteSeen(id, endAt)) changed = true;
+					}
+					if (changed) { saveSeenState(); bumpStay((n) => n + 1); }
+					// Watchdog. With the mark in the Host's own domain it should always
+					// land, so this normally stops after the first attempt; it exists for
+					// the case the mark DID land and the item is still unread (a fresh
+					// ending raced the timer), instead of leaving the dot red for good.
+					// A "waiting for you" item has no turn end to acknowledge: stop there.
+					timer = stillUnread ? window.setTimeout(attempt, 2000) : 0;
+				};
+				if (delayMs <= 0) attempt();
+				else timer = window.setTimeout(attempt, delayMs);
+				return () => {
+					cancelled = true;
+					if (timer !== 0) window.clearTimeout(timer);
+				};
+			}, [staySignature, delayMs]);
 			React.useEffect(() => { emitRealBadge(count, items); }, [count, items]);
 			// The workspace rows are labelled with the workspace TITLE, which is not
 			// always the cwd basename, so map session → title from the official snapshot.
@@ -1187,6 +1452,9 @@ window.__ModuleLoader__.load({
 			if (headerBadgeFailures < HEAD_BADGE_MAX_FAILURES || headerBadgeGivenUp) return;
 			headerBadgeGivenUp = true;
 			try { console.warn("dsh-icon-custom: 工作区标题红点连续失败,本次会话内已自动关闭。"); } catch {}
+			// Same posture as the row dots: give up by disappearing, never by freezing a
+			// number that has stopped following the rule.
+			clearHeaderBadge();
 		}
 
 		/**
@@ -1229,7 +1497,8 @@ window.__ModuleLoader__.load({
 					event.preventDefault();
 					event.stopPropagation();
 					const rect = node.getBoundingClientRect();
-					toggleUnreadPanel({ left: rect.left, top: rect.top });
+					// `bottom` is what the panel drops below; see unreadPanelPlacement.
+					toggleUnreadPanel({ left: rect.left, top: rect.top, bottom: rect.bottom });
 				});
 			}
 			const count = effectiveCount();
@@ -1284,6 +1553,52 @@ window.__ModuleLoader__.load({
 			headerBadgeHost = null;
 			headerBadgeHostPosition = "";
 		}
+		/** Gap between the panel and whatever it is anchored to. */
+		const UNREAD_PANEL_GAP = 6;
+		/** Breathing room from the window edges. */
+		const UNREAD_PANEL_MARGIN = 8;
+		/** The panel's practical width (between its minWidth and maxWidth below). */
+		const UNREAD_PANEL_WIDTH = 300;
+		/** How tall the scrolling session list may get before it scrolls. */
+		const UNREAD_PANEL_LIST_MAX = 320;
+
+		/**
+		 * Where the unread panel goes, in viewport coordinates.
+		 *
+		 * It opens DOWNWARD from the badge. The original math pinned the panel's
+		 * BOTTOM edge just above the anchor — correct while the trigger sat in the
+		 * sidebar footer, and wrong the moment that trigger moved to the section
+		 * header: the same formula then parked the panel's bottom near the top of the
+		 * window and grew the panel upward, off the top of the screen (the title and
+		 * the first workspace heading were what got cut off). Anchoring on the
+		 * anchor's `bottom` is what drops it below the badge instead.
+		 *
+		 * Horizontally it stays clear of the sidebar: the panel is a frame-wide
+		 * overlay, and covering the sidebar — and the very badge that opened it — was
+		 * the other half of the complaint.
+		 * @param anchor - the badge's viewport rect (`{left, top, bottom}`), or null.
+		 * @param sidebarRight - the browsing region's right edge, or null.
+		 * @param viewportWidth - window width.
+		 * @param viewportHeight - window height.
+		 * @returns `{ left, top, listMaxHeight }` in viewport pixels.
+		 */
+		function unreadPanelPlacement(anchor, sidebarRight, viewportWidth, viewportHeight) {
+			let left = UNREAD_PANEL_MARGIN;
+			let top = UNREAD_PANEL_MARGIN;
+			if (anchor !== null && typeof anchor === "object") {
+				if (typeof anchor.left === "number") left = anchor.left;
+				const below = typeof anchor.bottom === "number" ? anchor.bottom : anchor.top;
+				if (typeof below === "number") top = below + UNREAD_PANEL_GAP;
+			}
+			if (typeof sidebarRight === "number" && sidebarRight > 0) left = Math.max(left, sidebarRight + UNREAD_PANEL_GAP);
+			left = Math.max(UNREAD_PANEL_MARGIN, Math.min(left, viewportWidth - UNREAD_PANEL_WIDTH - UNREAD_PANEL_MARGIN));
+			top = Math.max(UNREAD_PANEL_MARGIN, top);
+			// Never taller than what is left below the panel's own top, so a long list
+			// scrolls inside the panel instead of pushing it off the bottom edge.
+			const listMaxHeight = Math.max(120, Math.min(UNREAD_PANEL_LIST_MAX, viewportHeight - top - 72));
+			return { left: Math.round(left), top: Math.round(top), listMaxHeight: Math.round(listMaxHeight) };
+		}
+
 		/**
 		 * The list behind that number, in the frame-wide overlay layer so it escapes
 		 * the sidebar's clipping and scroll container. Clicking a row opens that
@@ -1292,8 +1607,16 @@ window.__ModuleLoader__.load({
 		function UnreadPopup(props) {
 			const [snapshot, setSnapshot] = React.useState(badgeSnapshot);
 			const [open, setOpen] = React.useState(unreadPanelOpen);
+			// Ages are computed against the HOST's clock (the endings are host
+			// timestamps); re-tick while open so "刚刚" does not stay stale.
+			const [, tick] = React.useState(0);
 			React.useEffect(() => subscribeBadge(setSnapshot), []);
 			React.useEffect(() => subscribeUnreadPanel(() => setOpen(unreadPanelOpen)), []);
+			React.useEffect(() => {
+				if (!open) return undefined;
+				const interval = window.setInterval(() => tick((n) => n + 1), 30000);
+				return () => window.clearInterval(interval);
+			}, [open]);
 			React.useEffect(() => {
 				if (!open) return undefined;
 				const onKey = (event) => { if (event.key === "Escape") emitUnreadPanel(false); };
@@ -1312,22 +1635,42 @@ window.__ModuleLoader__.load({
 			if (!open) return null;
 			const t = props.t;
 			const anchor = unreadPanelAnchor;
+			// Measured, not assumed: the panel has to clear whatever width the sidebar
+			// currently has (it is resizable and collapsible).
+			let sidebarRight = null;
+			try {
+				const region = workspaceDotContainer();
+				if (region !== null) sidebarRight = region.getBoundingClientRect().right;
+			} catch { /* measurement is best effort; the margin fallback still applies */ }
+			const place = unreadPanelPlacement(anchor, sidebarRight, window.innerWidth, window.innerHeight);
 			const style = {
-				position: "fixed", left: "12px", bottom: "52px", zIndex: 60, pointerEvents: "auto",
+				position: "fixed", left: place.left + "px", top: place.top + "px", zIndex: 60, pointerEvents: "auto",
 				minWidth: "240px", maxWidth: "340px", padding: "8px", borderRadius: "12px",
 				border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-1)",
 				boxShadow: "0 10px 30px rgba(0,0,0,.18)", color: "var(--dsw-alias-label-primary)", fontSize: "12px"
 			};
-			if (anchor !== null && typeof anchor === "object") {
-				style.left = Math.max(8, Math.round(anchor.left)) + "px";
-				style.bottom = Math.max(8, Math.round(window.innerHeight - anchor.top + 6)) + "px";
-			}
 			const items = Array.isArray(snapshot.items) ? snapshot.items : [];
+			const ackTargets = unreadAckTargets(items);
+			/**
+			 * Acknowledge every turn-end row at once.
+			 *
+			 * "Waiting for you" rows cannot be acknowledged (they are not watermark
+			 * based), so the panel stays open while any of them remain — closing it
+			 * would hide the one thing that still needs the reader.
+			 */
+			const markAllRead = () => {
+				let changed = false;
+				for (const target of ackTargets) if (noteSeen(target.id, target.seenAt)) changed = true;
+				if (!changed) return;
+				saveSeenState();
+				emitUnreadPoke();
+				if (ackTargets.length === items.length) emitUnreadPanel(false);
+			};
 			return React.createElement("div", { "data-icon-custom-unread": "1", style },
 				React.createElement("div", { style: { fontWeight: 600, padding: "2px 6px 8px" } }, t("unreadPanelTitle")),
 				items.length === 0
 					? React.createElement("div", { style: { padding: "2px 6px 8px", opacity: 0.7 } }, t("unreadPanelEmpty"))
-					: React.createElement("div", { style: { display: "flex", flexDirection: "column", maxHeight: "320px", overflowY: "auto" } },
+					: React.createElement("div", { style: { display: "flex", flexDirection: "column", maxHeight: place.listMaxHeight + "px", overflowY: "auto" } },
 						groupUnreadByWorkspace(items).map((group) => React.createElement("div", { key: group.where === "" ? "\u0000none" : group.where },
 							React.createElement("div", { style: { padding: "7px 8px 3px", fontSize: "11px", fontWeight: 600, opacity: 0.55, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } },
 								group.where === "" ? t("unreadPanelOther") : group.where
@@ -1338,10 +1681,17 @@ window.__ModuleLoader__.load({
 								style: { display: "block", width: "100%", textAlign: "left", padding: "6px 8px", border: "0", borderRadius: "8px", background: "transparent", color: "inherit", font: "inherit", cursor: "pointer" }
 							},
 								React.createElement("span", { style: { display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, item.title),
-								React.createElement("span", { style: { display: "block", opacity: 0.6, fontSize: "11px" } }, item.waiting === true ? t("unreadWaiting") : t("unreadEnded"))
+								React.createElement("span", { style: { display: "block", opacity: 0.6, fontSize: "11px" } }, unreadRowSubtitle(item, hostNow(), t))
 							))
 						))
-					)
+					),
+				ackTargets.length > 0 && React.createElement("div", { style: { marginTop: "6px", paddingTop: "6px", borderTop: "1px solid var(--dsw-alias-border-l2)" } },
+					React.createElement("button", {
+						type: "button",
+						onClick: markAllRead,
+						style: { display: "block", width: "100%", padding: "5px 8px", border: "0", borderRadius: "8px", background: "transparent", color: "inherit", font: "inherit", cursor: "pointer", opacity: 0.85 }
+					}, t("unreadMarkAllRead"))
+				)
 			);
 		}
 
@@ -1802,12 +2152,21 @@ window.__ModuleLoader__.load({
 				.then((resp) => { if (resp && resp.ok === true) syncStatus(resp.value); })
 				.catch(() => {});
 			rpc.call("/api", "iconCustom/getUnreadRule", { args: {} })
-				.then((resp) => { if (resp && resp.ok === true) emitUnreadConfig(resp.value); })
+				.then((resp) => {
+					if (resp === null || typeof resp !== "object" || resp.ok !== true) return;
+					// The rule response carries the Host's clock; it is what puts the seen
+					// watermark (and a legacy browser-domain store) into the Host's domain.
+					if (resp.value !== null && typeof resp.value === "object") noteHostClock(resp.value.hostNow);
+					emitUnreadConfig(resp.value);
+				})
 				.catch(() => {});
 			// Keep "the last moment this browser was here" fresh, so an ending that
 			// happens while the app is closed still counts as unread when you return.
 			ctx.effect(() => {
-				const touch = () => { seenState.lastActiveAt = Date.now(); saveSeenState(); };
+				// Host domain (see the seen store): "the last moment this browser was
+				// here" must be comparable with `turn/end.time`, not with the browser's
+				// own clock.
+				const touch = () => { seenState.lastActiveAt = hostNow(); saveSeenState(); };
 				const interval = window.setInterval(touch, 20000);
 				window.addEventListener("visibilitychange", touch);
 				window.addEventListener("beforeunload", touch);
@@ -1818,6 +2177,22 @@ window.__ModuleLoader__.load({
 					touch();
 				};
 			}, "dsh-icon-custom: unread watermark");
+			// Re-sample the Host↔browser clock offset after a sleep/resume, which is the
+			// one moment the two can drift apart mid-page. Throttled: it is one small
+			// RPC per visible-again, and never on beforeunload (nothing would come back).
+			ctx.effect(() => {
+				let sampledAt = 0;
+				const sample = () => {
+					if (document.visibilityState === "hidden") return;
+					if (Date.now() - sampledAt < 60000) return;
+					sampledAt = Date.now();
+					rpc.call("/api", "iconCustom/getUnreadRule", { args: {} })
+						.then((resp) => { if (resp && resp.ok === true && resp.value !== null && typeof resp.value === "object") noteHostClock(resp.value.hostNow); })
+						.catch(() => {});
+				};
+				window.addEventListener("visibilitychange", sample);
+				return () => window.removeEventListener("visibilitychange", sample);
+			}, "dsh-icon-custom: host clock sample");
 			// Brand-mark seat: replaces only the whale mark (verified: a
 			// third-party registration wins over the official occupant and the
 			// official package's mark steps aside). The brand NAME text is a

package/lib/index.js

@@ -459,10 +459,10 @@ export class FaviconCustomService extends TypertRemoteService {
 	 * icon RPCs (`getStatus` / `setIcon` / `setPwa` / `setLogo` / `resetIcon`)
 	 * keep their EXACT pre-badge response shape, so a problem in this feature
 	 * can never break the icon itself.
-	 * @returns `{ reasons, pending }`.
+	 * @returns `{ reasons, pending, workspaceDot, clearDelaySec, hostNow }`.
 	 */
 	async getUnreadRule() {
-		return { reasons: this.unread.reasons, pending: this.unread.pending, workspaceDot: this.unread.workspaceDot, clearDelaySec: this.unread.clearDelaySec }
+		return this._unreadRuleView()
 	}
 
 	/**
@@ -478,7 +478,27 @@ export class FaviconCustomService extends TypertRemoteService {
 		}
 		this.unread = normalizeUnreadConfig(request)
 		await this._saveUnread().catch(() => {}) // rule file is advisory
-		return { reasons: this.unread.reasons, pending: this.unread.pending, workspaceDot: this.unread.workspaceDot, clearDelaySec: this.unread.clearDelaySec }
+		return this._unreadRuleView()
+	}
+
+	/**
+	 * The rule as the client reads it, plus the Host's clock.
+	 *
+	 * `hostNow` is here because the badge compares the Host's `turn/end.time`
+	 * against a watermark this browser keeps: without a Host time sample the
+	 * browser has to guess that domain from its own clock, and a browser a few
+	 * seconds behind the Host then clears nothing. It rides this existing
+	 * response instead of a new endpoint, so an older client simply ignores it.
+	 * @returns the stored rule with `hostNow`.
+	 */
+	_unreadRuleView() {
+		return {
+			reasons: this.unread.reasons,
+			pending: this.unread.pending,
+			workspaceDot: this.unread.workspaceDot,
+			clearDelaySec: this.unread.clearDelaySec,
+			hostNow: Date.now()
+		}
 	}
 
 	/** typert endpoint: store a new icon uploaded as a data URL and make it active. */

package/lib/typert.host.js

@@ -54,7 +54,13 @@ const unreadRuleSchema = z.object({
 	/** 实验项:工作区图标上的红点(贴产品 DOM,可一键关闭)。 */
 	workspaceDot: z.boolean(),
 	/** 进入会话后要连续待满多少秒才算"看过";0 = 进入即已读。上限 10 分钟。 */
-	clearDelaySec: z.number().int().nonnegative().max(600)
+	clearDelaySec: z.number().int().nonnegative().max(600),
+	/**
+	 * 宿主此刻的 `Date.now()`。
+	 * 客户端用它把"看过"水位换算进宿主时钟域(`turn/end.time` 也是宿主时钟):
+	 * 浏览器与宿主差几秒,红点就会永远清不掉。
+	 */
+	hostNow: z.number()
 })
 
 const setUnreadRuleRequestSchema = z.object({
@@ -272,7 +278,7 @@ export const TYPERT = {
 					{
 						kind: 'method',
 						name: 'getUnreadRule',
-						signature: 'async getUnreadRule(): Promise<{ reasons: Record<string, boolean>; pending: boolean; workspaceDot: boolean; clearDelaySec: number }>',
+						signature: 'async getUnreadRule(): Promise<{ reasons: Record<string, boolean>; pending: boolean; workspaceDot: boolean; clearDelaySec: number; hostNow: number }>',
 						description: "Read the unread-badge rule.",
 						summary: "Read the unread-badge rule.",
 						jsDoc: "/** Read the unread-badge rule. */",
@@ -281,7 +287,7 @@ export const TYPERT = {
 					{
 						kind: 'method',
 						name: 'setUnreadRule',
-						signature: 'async setUnreadRule(request: { reasons: Record<string, boolean>; pending?: boolean; workspaceDot?: boolean; clearDelaySec?: number }): Promise<{ reasons: Record<string, boolean>; pending: boolean; workspaceDot: boolean; clearDelaySec: number }>',
+						signature: 'async setUnreadRule(request: { reasons: Record<string, boolean>; pending?: boolean; workspaceDot?: boolean; clearDelaySec?: number }): Promise<{ reasons: Record<string, boolean>; pending: boolean; workspaceDot: boolean; clearDelaySec: number; hostNow: number }>',
 						description: "Replace the unread-badge rule: which turn-end reasons light the red dot.",
 						summary: "Set the unread-badge rule.",
 						jsDoc: "/** Set the unread-badge rule. */",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowwo/dsh-icon-custom",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "自定义浏览器标签页图标:在设置页上传 SVG/PNG/ICO,立即生效并持久保存,自动适配安卓/iOS/平板 PWA 图标。· Custom browser tab favicon: upload SVG/PNG/ICO from the settings page, applies instantly and persists, auto-sizes PWA icons for Android/iOS/tablets.",
   "type": "module",
   "main": "lib/index.js",