@cowwo/dsh-icon-custom 0.16.0 → 0.19.0

package/client/client.js

@@ -40,6 +40,7 @@ window.__ModuleLoader__.load({
 			badgeSourceManual: "手动测试",
 			badgeTestUnit: "0 = 不显示",
 			badgeSizeLabel: "红点大小:",
+			badgeSizeHint: "单独出现时按这三档决定大小;红黄两颗数字同时出现时(未读 + 进行中),它们会一起缩到能塞下的最大尺寸 —— 这时三档画出来是一样的,因为画布就这么大。",
 			badgeSizeSmall: "小",
 			badgeSizeMedium: "中",
 			badgeSizeLarge: "大",
@@ -61,6 +62,11 @@ window.__ModuleLoader__.load({
 			unreadEnded: "刚结束,还没看",
 			unreadPanelOther: "其他",
 			unreadMarkAllRead: "全部标记已读",
+			/** 进行中清单(点黄字打开):和那个黄数字是同一个事实,不落盘、不推断。 */
+			runningPanelTitle: "进行中的会话",
+			runningPanelEmpty: "现在没有会话在运行",
+			runningPanelTrigger: "{n} 个进行中,点击查看",
+			runningPanelRow: "回合正在跑",
 			/** 与官方侧栏同一形状("13小时"),方便和列表里的时间戳逐字对上。 */
 			ageNow: "刚刚",
 			ageMinutes: "{n}分钟",
@@ -70,17 +76,31 @@ window.__ModuleLoader__.load({
 			ageYears: "{n}年",
 			workspaceDotLabel: "在工作区和会话行上显示红点(实验)",
 			workspaceDotHint: "在侧栏工作区那一行的文件夹图标上点一个小红点(收起的工作区里有多少未读,就看它),有未读的会话在其标题右边也跟一个小红点。会话行上的点只在那一行真的显示着时才画:折叠起来的会话由工作区那一行的点和「待处理」清单代表。这一项是贴着页面结构做的,DSH 升级后可能失效;失效时只会变成\"不显示\",不会影响红点数字、清单、跳转这些功能,随时可以关掉它。",
+			revealLabel: "点清单里的会话时,在侧栏定位到它(实验)",
+			revealHint: "点「待处理」或「进行中」清单里的一条时,除了打开那个会话,还会在侧栏把它所在的工作区展开、滚到那一行、并闪一下。这是贴着页面结构做的:官方只把\"展开 + 滚动\"留给了它自己的搜索框,没有给插件留接口,所以这里只能模拟点击官方的工作区行和「显示更多」。DSH 升级后可能失效,失效的表现只是\"侧栏不动\",打开会话完全不受影响。**展开状态是官方自己记住的**(存在浏览器里),所以它不会自己收回去——不想要就手动收起那个工作区,或者关掉这个开关。",
 			appBadgeLabel: "在系统应用图标上显示红点",
-			appBadgeHint: "安装为应用后,把同一个数字也放到系统图标上:Windows 是任务栏图标上的角标,macOS 是 Dock 角标,iOS 是主屏图标上的数字。样子由系统决定——Windows 上 Chrome 画深色圆+白字,Edge 走 Windows 系统徽章通道(是否显示数字由 Edge/Windows 决定);插件会周期重设数字,但只在应用窗口开着时更新。",
+			appBadgeHint: "安装为应用后,把同一个数字也放到系统图标上:Windows 是任务栏图标上的角标,macOS 是 Dock 角标,iOS 是主屏图标上的数字。样子由系统决定——Windows 上 Chrome 画深色圆+白字,Edge 走 Windows 系统徽章通道(是否显示数字由 Edge/Windows 决定);插件会周期重设数字,但只在应用窗口开着时更新。Safari 的程序坞网页应用 / 主屏应用还要先允许通知(见下面的「通知权限」),否则角标不会出现。",
 			appBadgeFootnote: "角标只在应用窗口开着时由本插件更新;数字超过 99 时由系统显示为 99+。",
 			appBadgeProbeInstalled: "当前环境:已安装为应用,本机可以设置角标。是否真正显示由系统决定。",
 			appBadgeProbeTab: "当前环境:浏览器标签页(不是安装的应用)——安装为应用后才会显示角标。",
 			appBadgeProbeUnsupported: "当前环境:本机没有这个能力(当前浏览器不支持应用角标)。",
 			appBadgeProbeInsecure: "当前环境:不是安全上下文(请用 localhost 或 https 访问),系统角标不可用。",
+			notificationPermissionLabel: "通知权限:",
+			notificationPermissionGranted: "已授予",
+			notificationPermissionDefault: "未授予",
+			notificationPermissionDenied: "已被拒绝(要去系统设置的「通知」里打开)",
+			notificationPermissionUnsupported: "本机浏览器没有通知能力",
+			notificationPermissionButton: "允许通知",
+			notificationPermissionHint: "Chrome / Edge 的角标不需要这一步;Safari 不一样——macOS 的「添加到程序坞」网页应用和 iOS 的主屏应用,只有在你允许通知之后才会画出角标(Apple 把角标权限绑在通知权限上)。这里只申请权限,本插件目前不会给你发通知。",
 			badgeTestHint: "真实未读 = 有会话发生了上面勾选的情况、而且你还没看过它(打开该会话即视为已读)。你正开着的会话也算——窗口可能被最小化、页面可能切到后台,这里无从判断你在不在看,所以不做这个区分。只有子代理不计。手动模式:自己填数字试看效果。刷新页面后回到真实未读。",
 			clearDelayLabel: "进入会话后多久算已读:",
 			clearDelayUnit: "秒",
-			clearDelayHint: "填 0 = 进去就算已读(红点立即消失)。大于 0 时,你要在那个会话里连续待满这么多秒它才算看过:中途切走会清零重数,刷新页面也重新数。**计时只认\"你进入会话时已经存在的结束\"**——你人已经在里面的时候又跑完一轮,那一轮不算数:它会一直亮着,等你切走再进来才会清。上限 600 秒。**切到「插件/设置」页、或把标签页切到后台,都只是暂停计时,不会因此清掉红点**(它们不算离开);真正算离开的只有一件事:**去别的会话**。已读记在宿主($DSH_HOME/custom-favicon/unread-seen.json):任何一台设备上看过,所有设备都不再提醒;浏览器那份只是缓存,清站点数据不会把已读丢回去。"
+			clearDelayHint: "填 0 = 进去就算已读(红点立即消失)。大于 0 时,你要在那个会话里连续待满这么多秒它才算看过:中途切走会清零重数,刷新页面也重新数。**计时只认\"你进入会话时已经存在的结束\"**——你人已经在里面的时候又跑完一轮,那一轮不算数:它会一直亮着,等你切走再进来才会清。上限 600 秒。**切到「插件/设置」页、或把标签页切到后台,都只是暂停计时,不会因此清掉红点**(它们不算离开);真正算离开的只有一件事:**去别的会话**。已读记在宿主($DSH_HOME/custom-favicon/unread-seen.json):任何一台设备上看过,所有设备都不再提醒;浏览器那份只是缓存,清站点数据不会把已读丢回去。",
+			/** 进行中黄点(0.18.0):官方 running 的第二次投影,与红点互不牵连。 */
+			runningMarkSection: "进行中黄点",
+			runningMarkLabel: "显示进行中标记(标题数字 / 文件夹与会话行 / 左上角 / 标签页)",
+			runningMarkCount: "{n} 个进行中",
+			runningMarkHint: "黄点就是官方的「进行中」:会话有回合正在跑、而且没有停下来等你(停下等你的时候,官方那一行显示琥珀色的「等待审批 / 等待回答」,黄点也就不亮)。它和未读红点完全独立、各画各的:侧栏「工作区」标题后面是黄色数字——此刻全局有几个会话在跑(和红数字上下排:右上红、右下黄);工作区文件夹图标上是黄点,有未读时红点在左、黄点在右;会话行上同样是红点在左、黄点在右;左上角 Logo 与标签页图标右下角也是同一个数字,红数字仍占右上角。事实全部来自官方(会话列表里每个会话的 `running`)——插件不落盘、不推断,所以刷新页面立刻是对的,进程重启也不会留下一个永远亮着的黄点。关掉这个开关,红点完全不受影响。"
 		};
 		const en = {
 			nav: "Favicon",
@@ -113,6 +133,7 @@ window.__ModuleLoader__.load({
 			badgeSourceManual: "Manual",
 			badgeTestUnit: "0 = hidden",
 			badgeSizeLabel: "Badge size:",
+			badgeSizeHint: "A number shown on its own uses this size; when the red and the yellow number share the icon (unread + running) they shrink together to the largest pair that fits — the three sizes then draw the same, because the canvas is the constraint.",
 			badgeSizeSmall: "Small",
 			badgeSizeMedium: "Medium",
 			badgeSizeLarge: "Large",
@@ -134,6 +155,11 @@ window.__ModuleLoader__.load({
 			unreadEnded: "ended, not seen yet",
 			unreadPanelOther: "Other",
 			unreadMarkAllRead: "Mark all read",
+			/** The running list (opened by the yellow number): the very fact that number counts. */
+			runningPanelTitle: "Sessions running",
+			runningPanelEmpty: "Nothing is running right now",
+			runningPanelTrigger: "{n} running — click for the list",
+			runningPanelRow: "turn in flight",
 			/** Same shape as the shipped sidebar ("13h"), so the two can be read side by side. */
 			ageNow: "now",
 			ageMinutes: "{n}min",
@@ -143,17 +169,31 @@ window.__ModuleLoader__.load({
 			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 (a collapsed workspace shows how many of its sessions are unread there), and one beside the title of every unread session row. A session dot is only drawn while that row is really rendered: folded sessions are represented by their workspace row's dot and the pending panel. 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.",
+			revealLabel: "Locate the session in the sidebar when a list row is clicked (experimental)",
+			revealHint: "Clicking a row in the \"needing you\" or \"running\" list opens that session AND, in the sidebar, expands its workspace, scrolls to the row and flashes it once. This reads the page structure: the official sidebar keeps expand-and-scroll for its own search box and exposes no interface for it, so this drives the shipped workspace row and \"show more\" button the way a click would. A DSH upgrade may break it, and the only symptom is a sidebar that does not move — opening the session is never affected. **The expanded state is remembered by the official sidebar itself** (in the browser), so it will not collapse again on its own: collapse that workspace by hand, or turn this off.",
 			appBadgeLabel: "Badge the system app icon",
-			appBadgeHint: "Once installed as an app, the same number also goes to the system icon: a taskbar badge on Windows, a Dock badge on macOS, a number on the iOS home-screen icon. The system decides how it looks — on Windows, Chrome draws a dark circle with white text, while Edge goes through the Windows badge channel (whether it shows the number is up to Edge/Windows). The plugin re-asserts the number periodically, but only while the app window is open.",
+			appBadgeHint: "Once installed as an app, the same number also goes to the system icon: a taskbar badge on Windows, a Dock badge on macOS, a number on the iOS home-screen icon. The system decides how it looks — on Windows, Chrome draws a dark circle with white text, while Edge goes through the Windows badge channel (whether it shows the number is up to Edge/Windows). The plugin re-asserts the number periodically, but only while the app window is open. Safari's Dock and home-screen web apps additionally need notifications allowed first (see the permission row below), or the badge never appears.",
 			appBadgeFootnote: "The badge is only updated by this plugin while the app window is open; above 99 the system shows 99+.",
 			appBadgeProbeInstalled: "This environment: installed as an app, so this device can set a badge. Whether it actually appears is up to the system.",
 			appBadgeProbeTab: "This environment: a browser tab (not an installed app) — install as an app to get a badge.",
 			appBadgeProbeUnsupported: "This environment: no app-badge capability in this browser.",
 			appBadgeProbeInsecure: "This environment: not a secure context (use localhost or https) — the system badge is unavailable.",
+			notificationPermissionLabel: "Notifications permission:",
+			notificationPermissionGranted: "granted",
+			notificationPermissionDefault: "not granted",
+			notificationPermissionDenied: "denied (enable it in the system notifications settings)",
+			notificationPermissionUnsupported: "this browser has no Notification API",
+			notificationPermissionButton: "Allow notifications",
+			notificationPermissionHint: "A badge needs no notification permission on Chrome / Edge, but Safari is different: a macOS web app added to the Dock (or an iOS home-screen web app) only draws its badge once you allow notifications — Apple ties the two together. This only asks for the permission; the plugin does not send notifications.",
 			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.",
 			clearDelayLabel: "Mark read after staying:",
 			clearDelayUnit: "seconds",
-			clearDelayHint: "0 = read as soon as you enter (the dot clears at once). Above 0 you must stay in that session for this many seconds before it counts as read: leaving it resets the clock, and so does a reload. The clock only ever covers **the ending that was already there when you entered** — a turn that finishes while you are sitting in the session does not count: it stays red until you leave and come back. Capped at 600 seconds. A settings or plugins page, or a tab in the background, only **pauses** the clock — neither clears a dot (neither counts as leaving); the one thing that does count as leaving is **opening another session**. Read state lives on the Host ($DSH_HOME/custom-favicon/unread-seen.json): read on any device means read on every device, and the browser's own copy is only a cache — clearing site data no longer throws it away."
+			clearDelayHint: "0 = read as soon as you enter (the dot clears at once). Above 0 you must stay in that session for this many seconds before it counts as read: leaving it resets the clock, and so does a reload. The clock only ever covers **the ending that was already there when you entered** — a turn that finishes while you are sitting in the session does not count: it stays red until you leave and come back. Capped at 600 seconds. A settings or plugins page, or a tab in the background, only **pauses** the clock — neither clears a dot (neither counts as leaving); the one thing that does count as leaving is **opening another session**. Read state lives on the Host ($DSH_HOME/custom-favicon/unread-seen.json): read on any device means read on every device, and the browser's own copy is only a cache — clearing site data no longer throws it away.",
+			/** Running mark (0.18.0): a second projection of the official `running`. */
+			runningMarkSection: "Running marks",
+			runningMarkLabel: "Show running marks (header number / folder and session rows / top-left / tab)",
+			runningMarkCount: "{n} running",
+			runningMarkHint: "The yellow mark IS the official \"running\": the session has a turn in flight and is not parked waiting for you (while it waits, the official row shows the amber \"waiting for approval / waiting for answer\" and the yellow goes dark). It is completely independent of the unread red dot, and each draws its own mark: after the sidebar's \"工作区\" label sits the yellow NUMBER of sessions running right now (stacked against the red number — red top-right, yellow bottom-right); the workspace folder icon gets a yellow dot with the red dot to its left; a session row is red left, yellow right; and the top-left logo plus the bottom-right of the tab icon carry the same number, with the red number keeping its top-right corner. Every fact comes from the official host (each session's `running` in the session list); the plugin stores nothing and infers nothing, so a reload is immediately right and a process restart never leaves a yellow mark stuck on. Turning this off does not affect the red dot at all."
 		};
 		//#endregion
 
@@ -271,7 +311,9 @@ window.__ModuleLoader__.load({
 		const UNREAD_CLEAR_DELAY_MAX_SEC = 600;
 		/** Mirror of the host's default (see lib/unread.js) — badging the app icon is on. */
 		const UNREAD_APP_BADGE_FALLBACK = true;
-		let unreadConfig = { reasons: { ...UNREAD_FALLBACK_REASONS }, pending: true, workspaceDot: true, appBadge: UNREAD_APP_BADGE_FALLBACK, clearDelaySec: 0 };
+		/** Mirror of the host's default (see lib/unread.js) — locating a clicked row is on. */
+		const UNREAD_REVEAL_FALLBACK = true;
+		let unreadConfig = { reasons: { ...UNREAD_FALLBACK_REASONS }, pending: true, workspaceDot: true, appBadge: UNREAD_APP_BADGE_FALLBACK, clearDelaySec: 0, revealOnOpen: UNREAD_REVEAL_FALLBACK };
 		const unreadConfigListeners = new Set();
 		/** Mirror of the host's normalizer: any input becomes an integer 0..cap seconds. */
 		function normalizeClearDelay(input) {
@@ -293,7 +335,8 @@ window.__ModuleLoader__.load({
 				pending: typeof source.pending === "boolean" ? source.pending : true,
 				workspaceDot: typeof source.workspaceDot === "boolean" ? source.workspaceDot : true,
 				appBadge: typeof source.appBadge === "boolean" ? source.appBadge : UNREAD_APP_BADGE_FALLBACK,
-				clearDelaySec: normalizeClearDelay(source.clearDelaySec)
+				clearDelaySec: normalizeClearDelay(source.clearDelaySec),
+				revealOnOpen: typeof source.revealOnOpen === "boolean" ? source.revealOnOpen : UNREAD_REVEAL_FALLBACK
 			};
 		}
 		function emitUnreadConfig(input) {
@@ -308,6 +351,35 @@ window.__ModuleLoader__.load({
 			return () => { unreadConfigListeners.delete(fn); };
 		}
 
+		/**
+		 * The running mark's own switch, and the yellow it paints with.
+		 *
+		 * Deliberately NOT a field on the unread rule: the two features answer
+		 * different questions ("something ended and you have not looked" vs
+		 * "something is running right now"), so neither switch may drag the other's
+		 * storage or response shape along. The yellow is a literal like the red
+		 * `#e5484d` already is — the theme has no yellow token, and the official
+		 * amber `--dsw-alias-state-warn-primary` (#f59e0b) is taken by the row's
+		 * "waiting for you" dot, which must stay tellable apart from this one.
+		 */
+		const RUNNING_YELLOW = "#f5c518";
+		/** Mirror of the host default (lib/running.js). */
+		const RUNNING_MARK_FALLBACK = true;
+		let runningConfig = { enabled: RUNNING_MARK_FALLBACK };
+		const runningConfigListeners = new Set();
+		function normalizeRunningConfig(input) {
+			const source = input !== null && typeof input === "object" ? input : {};
+			return { enabled: typeof source.enabled === "boolean" ? source.enabled : RUNNING_MARK_FALLBACK };
+		}
+		function emitRunningConfig(input) {
+			runningConfig = normalizeRunningConfig(input);
+			runningConfigListeners.forEach((fn) => { try { fn(runningConfig); } catch {} });
+		}
+		function subscribeRunningConfig(fn) {
+			runningConfigListeners.add(fn);
+			return () => { runningConfigListeners.delete(fn); };
+		}
+
 		/**
 		 * The seen watermark: the HOST owns it, this browser keeps the working copy.
 		 *
@@ -658,6 +730,23 @@ window.__ModuleLoader__.load({
 			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;
 		}
+		/**
+		 * Which workspace a session is shown under: the basename of its cwd.
+		 *
+		 * The sidebar's own workspace rows are labelled with this basename, so a list
+		 * points at the same place the reader sees — the sidebar group cannot be
+		 * expanded for us (that state is private to the shipped browser), so naming
+		 * it is the honest substitute. Shared by the pending list and the running
+		 * list: two lists of the same sessions must not disagree about where they are.
+		 * @param entry - the session-list row (may be absent).
+		 * @returns the basename, or "" when the row carries no cwd.
+		 */
+		function sessionWhereOf(entry) {
+			const cwd = entry !== null && typeof entry === "object" && typeof entry.cwd === "string" ? entry.cwd : "";
+			if (cwd === "") return "";
+			const parts = cwd.replace(/[\\/]+$/, "").split(/[\\/]/);
+			return parts[parts.length - 1] || cwd;
+		}
 		/**
 		 * How many sessions deserve the badge right now: endings whose reason is
 		 * enabled and that this browser has not seen since, plus sessions waiting
@@ -685,16 +774,6 @@ window.__ModuleLoader__.load({
 			const ids = new Set();
 			const byId = list !== null && typeof list === "object" && list.byId !== null && typeof list.byId === "object" ? list.byId : {};
 			const titleOf = (id, entry) => (entry !== null && typeof entry === "object" && typeof entry.displayTitle === "string" && entry.displayTitle !== "" ? entry.displayTitle : id);
-			// Which workspace the session lives in. The sidebar's own workspace rows are
-			// labelled with this cwd basename, so the list points at the same place the
-			// reader sees — the sidebar group cannot be expanded for us (that state is
-			// private to the shipped browser), so naming it is the honest substitute.
-			const whereOf = (entry) => {
-				const cwd = entry !== null && typeof entry === "object" && typeof entry.cwd === "string" ? entry.cwd : "";
-				if (cwd === "") return "";
-				const parts = cwd.replace(/[\\/]+$/, "").split(/[\\/]/);
-				return parts[parts.length - 1] || cwd;
-			};
 			if (list !== null && typeof list === "object") {
 				const order = Array.isArray(list.ids) ? list.ids : Object.keys(byId);
 				for (const id of order) {
@@ -711,7 +790,7 @@ window.__ModuleLoader__.load({
 					// turns them on, so a vocabulary growth can never surprise the badge.
 					if (reasons[value.reason] !== true) continue;
 					ids.add(id);
-					hits.push({ id, title: titleOf(id, entry), where: whereOf(entry), waiting: false, kind: value.reason, at: endAt });
+					hits.push({ id, title: titleOf(id, entry), where: sessionWhereOf(entry), waiting: false, kind: value.reason, at: endAt });
 				}
 			}
 			if (config === null || typeof config !== "object" || config.pending !== false) {
@@ -725,7 +804,7 @@ window.__ModuleLoader__.load({
 							return;
 						}
 						ids.add(id);
-						hits.push({ id, title: titleOf(id, byId[id]), where: whereOf(byId[id]), waiting: true, kind, at: Date.now() });
+						hits.push({ id, title: titleOf(id, byId[id]), where: sessionWhereOf(byId[id]), waiting: true, kind, at: Date.now() });
 					});
 				}
 			}
@@ -733,6 +812,84 @@ window.__ModuleLoader__.load({
 			return hits;
 		}
 
+		//#endregion
+		//#region running state
+		// The "who is running right now" fact is entirely OFFICIAL and entirely
+		// free: the browser's session list already carries each session's
+		// `running` (host `ctx.agents.get(id)?.status === 'running'`, pushed by
+		// `api-session/status`), and the official session row already draws its own
+		// grey spinner from it. This plugin adds no host plumbing, no projection
+		// and no storage — it only projects the same fact as a YELLOW mark in four
+		// places. See docs/adr/0010-running-mark-is-a-second-projection.md.
+		/**
+		 * The sessions that are running right now.
+		 *
+		 * Two official facts are combined, in the shipped sidebar's own precedence:
+		 *   * running — `status.get(id)?.running`, falling back to the row's own
+		 *     `running` exactly like ui-workspace's `sessionNode` does;
+		 *   * waiting — a `pendingInteraction` makes the official row show the amber
+		 *     "waiting for approval / answer / plan review" instead of the spinner,
+		 *     so it is NOT running here either. That is why a session with the
+		 *     amber dot never also gets a yellow one.
+		 *
+		 * Sub-agent sessions are skipped for the same reason `collectUnread` skips
+		 * them: they are not part of the browsing the user does (ui-workspace's
+		 * `sessionVisible` hides them outright), so counting them would leave the
+		 * mark lit by work nobody can open.
+		 * @param list - the session list snapshot (may be absent).
+		 * @param status - the official session-status map (may be absent).
+		 * @returns the running session ids, in list order.
+		 */
+		function runningSessionIds(list, status) {
+			const out = [];
+			if (list === null || typeof list !== "object") return out;
+			const byId = list.byId !== null && typeof list.byId === "object" ? list.byId : {};
+			const order = Array.isArray(list.ids) ? list.ids : Object.keys(byId);
+			const lookup = status !== null && status !== undefined && typeof status.get === "function"
+				? (id) => status.get(id)
+				: () => undefined;
+			for (const id of order) {
+				if (typeof id !== "string" || id === "") continue;
+				const entry = byId[id];
+				if (entry === null || typeof entry !== "object") continue;
+				if (entry.origin === "subagent") continue;
+				const row = lookup(id);
+				const known = row !== null && typeof row === "object";
+				if (known && row.pendingInteraction !== null && row.pendingInteraction !== undefined) continue;
+				const running = known && typeof row.running === "boolean" ? row.running : entry.running;
+				if (running !== true) continue;
+				out.push(id);
+			}
+			return out;
+		}
+
+		/**
+		 * Roll the running sessions up to one count per workspace.
+		 *
+		 * Mirrors `dotsFromItems`: the ID anchors the number to the workspace row
+		 * the browser itself keys (`data-row-key="workspace:<id>"`), the title is
+		 * what the row displays, and a session whose workspace cannot be named is
+		 * dropped rather than guessed at. Pure, so a test can drive it directly.
+		 * @param ids - running session ids, from `runningSessionIds`.
+		 * @param owners - sessionId → `{ id, title }` from the official workspace snapshot.
+		 * @returns `[{ id, name, count }]`, busiest workspace first.
+		 */
+		function runningWorkspaceDots(ids, owners) {
+			const counts = new Map();
+			for (const id of Array.isArray(ids) ? ids : []) {
+				if (typeof id !== "string" || id === "") continue;
+				const owner = owners !== null && typeof owners === "object" ? owners[id] : undefined;
+				const workspaceId = owner !== null && typeof owner === "object" && typeof owner.id === "string" ? owner.id : "";
+				if (workspaceId === "") continue;
+				const title = typeof owner.title === "string" ? owner.title : "";
+				const existing = counts.get(workspaceId);
+				if (existing === undefined) counts.set(workspaceId, { id: workspaceId, name: title, count: 1 });
+				else existing.count++;
+			}
+			return [...counts.values()]
+				.sort((a, b) => b.count - a.count || (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
+		}
+
 		//#endregion
 		//#region badge bridge
 		// In-package badge bridge. Two number sources:
@@ -746,6 +903,16 @@ window.__ModuleLoader__.load({
 		let realCount = 0;
 		/** The sessions behind `realCount`, for the sidebar list (newest first). */
 		let realItems = [];
+		/**
+		 * How many sessions are running right now — the official `running` fact,
+		 * already folded by `runningSessionIds`. It rides the SAME bridge as the
+		 * unread number because it has the same two consumers (the brand mark and
+		 * the tab icon) and the two must never disagree about which of them is
+		 * being shown.
+		 */
+		let runningTotal = 0;
+		/** The sessions behind `runningTotal` (`{ id, title, where }`), for the running list. */
+		let runningItems = [];
 		let manualCount = 0;
 		let badgeSize = "md";
 		const badgeListeners = new Set();
@@ -753,11 +920,30 @@ window.__ModuleLoader__.load({
 			const n = Number(value);
 			return Number.isFinite(n) && n > 0 ? Math.floor(n) : 0;
 		}
+		/**
+		 * A stable identity for one running list.
+		 *
+		 * The number alone is not enough: with one session running, handing over to a
+		 * DIFFERENT session keeps the count at 1, so a guard that only compares counts
+		 * leaves the open list naming the session that already stopped — the mark and
+		 * the tab icon stay right while the list lies. Same reason the sidebar marks
+		 * key off `runningSignature`: compare the list by value.
+		 * @param items - `{ id, title, where }` rows (anything else is ignored).
+		 * @returns a string that changes whenever the list does.
+		 */
+		function runningItemsSignature(items) {
+			const out = [];
+			for (const item of Array.isArray(items) ? items : []) {
+				if (item === null || typeof item !== "object") continue;
+				out.push(`${item.id}\u0000${item.title}\u0000${item.where}`);
+			}
+			return out.join("\u0001");
+		}
 		function effectiveCount() {
 			return badgeSource === "manual" ? manualCount : realCount;
 		}
 		function badgeSnapshot() {
-			return { count: effectiveCount(), size: badgeSize, source: badgeSource, items: badgeSource === "manual" ? [] : realItems };
+			return { count: effectiveCount(), size: badgeSize, source: badgeSource, items: badgeSource === "manual" ? [] : realItems, running: runningTotal, runningItems };
 		}
 		function notifyBadge() {
 			const snapshot = badgeSnapshot();
@@ -779,6 +965,26 @@ window.__ModuleLoader__.load({
 			realItems = Array.isArray(items) ? items : [];
 			notifyBadge();
 		}
+		/**
+		 * The running sessions, as one number on the same bridge — plus the list
+		 * behind it, so the yellow count can be opened like the red one.
+		 *
+		 * Emitted from every render of the headless badge source, so the "did it
+		 * actually change" guard is what keeps a re-render from repainting the tab
+		 * icon and the brand mark for nothing. It is NOT routed through
+		 * `emitRealBadge`: the unread number and the running number are independent
+		 * facts, and a manual test number must not disturb the other.
+		 * @param value - how many sessions are running; anything non-positive is 0.
+		 * @param items - `{ id, title, where }`, one per running session, in list order.
+		 */
+		function emitRunningState(value, items) {
+			const next = normalizeCount(value);
+			const nextItems = Array.isArray(items) ? items : [];
+			if (next === runningTotal && runningItemsSignature(nextItems) === runningItemsSignature(runningItems)) return;
+			runningTotal = next;
+			runningItems = nextItems;
+			notifyBadge();
+		}
 		function emitBadgeSize(value) {
 			badgeSize = Object.prototype.hasOwnProperty.call(BADGE_SCALES, value) ? value : "md";
 			notifyBadge();
@@ -972,6 +1178,202 @@ window.__ModuleLoader__.load({
 			reconcileAppBadge(true);
 		}
 
+		//#endregion
+		//#region notifications permission (the WebKit half of app badging)
+		// On WebKit the badge and the notifications permission are one feature:
+		// Apple's own words are "when users allow a web app to send
+		// notifications, that includes permissions for the web app to use
+		// badging" — so a macOS web app added to the Dock (and an iOS
+		// home-screen web app) draws NO badge until the user allows
+		// notifications (sources: docs/adr/0009-notification-permission.md).
+		//
+		// This region does NOT gate `applyAppBadge`: Chromium needs none of it,
+		// and the API only reports "not permitted" by drawing nothing, which is
+		// undetectable. Keeping the call site unconditional is ADR 0005's rule;
+		// what is added here is the PRECONDITION, made visible and requestable
+		// from one user gesture.
+		/** The three states the spec defines; anything else is "no API". */
+		const NOTIFICATION_PERMISSION_STATES = ["granted", "denied", "default"];
+
+		/**
+		 * Normalize one reading of `Notification.permission` into a local fact.
+		 * @param value - the raw reading; only the spec strings count.
+		 * @returns `"granted" | "denied" | "default" | "unsupported"`.
+		 */
+		function normalizeNotificationPermission(value) {
+			return typeof value === "string" && NOTIFICATION_PERMISSION_STATES.includes(value) ? value : "unsupported";
+		}
+
+		/**
+		 * Normalize an already-shaped probe, so every reader of it takes dirty
+		 * input the same way: only the three spec states are real, and only a
+		 * strict `true` is a request entry point.
+		 * @param probe - a `{ state, canRequest }` probe, or anything else.
+		 * @returns the same two facts, normalized.
+		 */
+		function notificationPermissionFacts(probe) {
+			const source = probe !== null && typeof probe === "object" ? probe : {};
+			return {
+				state: normalizeNotificationPermission(source.state),
+				canRequest: source.canRequest === true
+			};
+		}
+
+		/**
+		 * Shape a raw `{ permission, canRequest }` reading, mirroring
+		 * `badgeCapabilityProbe`: two independent local facts, no platform claim.
+		 * @param env - the raw reading; anything else reads false.
+		 * @returns the probe for this device.
+		 */
+		function notificationPermissionProbe(env) {
+			const source = env !== null && typeof env === "object" ? env : {};
+			return notificationPermissionFacts({
+				state: normalizeNotificationPermission(source.permission),
+				canRequest: source.canRequest === true
+			});
+		}
+
+		/**
+		 * Read that fact off the window this code runs in.
+		 *
+		 * "unsupported" covers both a browser with no Notification API and a
+		 * permission string this code has never heard of — from the user's side
+		 * those are the same thing: there is nothing to grant here.
+		 * @returns the probe for this device.
+		 */
+		function notificationPermissionEnv() {
+			const api = typeof Notification === "object" && Notification !== null ? Notification : null;
+			return notificationPermissionProbe({
+				permission: api === null ? undefined : api.permission,
+				canRequest: api !== null && typeof api.requestPermission === "function"
+			});
+		}
+
+		/**
+		 * Which settings-page sentence describes this reading.
+		 * @param probe - a `notificationPermissionProbe` result.
+		 * @returns a locale key.
+		 */
+		function notificationPermissionKey(probe) {
+			const facts = notificationPermissionFacts(probe);
+			if (facts.state === "granted") return "notificationPermissionGranted";
+			if (facts.state === "denied") return "notificationPermissionDenied";
+			if (facts.state === "default") return "notificationPermissionDefault";
+			return "notificationPermissionUnsupported";
+		}
+
+		/**
+		 * Whether the "allow notifications" button can do anything.
+		 *
+		 * Only an undecided permission is worth a prompt: once granted there is
+		 * nothing left to ask, and once denied the browser refuses to prompt
+		 * again, so the settings page says where to change it instead of showing
+		 * a button that would silently do nothing.
+		 * @param probe - a `notificationPermissionProbe` result.
+		 * @returns true only when a prompt could still decide the fact.
+		 */
+		function notificationPermissionRequestable(probe) {
+			const facts = notificationPermissionFacts(probe);
+			return facts.state === "default" && facts.canRequest === true;
+		}
+
+		/**
+		 * Ask for the notifications permission — the ONE place that does.
+		 *
+		 * Must be called from a user gesture (the settings button's click):
+		 * WebKit and Chromium both drop a prompt that no activation asked for.
+		 * Resolves to a fresh probe and never rejects, so the caller can drop the
+		 * result straight into React state; the old callback form (Safari 15) is
+		 * why the returned promise is not the only path out.
+		 * @returns a Promise for the permission probe after the prompt.
+		 */
+		function requestNotificationPermission() {
+			const api = typeof Notification === "object" && Notification !== null ? Notification : null;
+			if (api === null || typeof api.requestPermission !== "function") return Promise.resolve(notificationPermissionEnv());
+			return new Promise((resolve) => {
+				// The prompt's own answer is authoritative when it comes back;
+				// re-reading `.permission` covers the promise form and a rejection
+				// (no user gesture, or not an installed web app on WebKit).
+				const settle = (value) => {
+					const next = notificationPermissionEnv();
+					resolve({
+						state: typeof value === "string" ? normalizeNotificationPermission(value) : next.state,
+						canRequest: next.canRequest
+					});
+				};
+				let returned;
+				try {
+					returned = api.requestPermission(settle);
+				} catch {
+					settle(undefined);
+					return;
+				}
+				if (returned !== null && typeof returned === "object" && typeof returned.then === "function") {
+					returned.then(settle, () => settle(undefined));
+				}
+			});
+		}
+
+		/**
+		 * Follow the permission while this page is open.
+		 *
+		 * It can move outside the page (System Settings, the browser's own
+		 * settings, another tab's prompt), and a stale "not granted" beside a
+		 * granted permission is exactly the kind of lie this half avoids.
+		 * `permissions.query({ name: "notifications" })` is the precise channel;
+		 * a re-read on focus/visibilitychange is the portable one (WebKit does
+		 * not implement every permission descriptor), and both are cheap.
+		 * Publishes only when the fact actually changed.
+		 * @param fn - called with a fresh probe when the fact moved.
+		 * @returns an unsubscribe function.
+		 */
+		function subscribeNotificationPermission(fn) {
+			if (typeof fn !== "function") return () => {};
+			const win = typeof window !== "undefined" ? window : null;
+			const navigatorObject = typeof navigator === "object" && navigator !== null ? navigator : null;
+			const read = () => {
+				const next = notificationPermissionEnv();
+				return { next, id: `${next.state}:${next.canRequest === true}` };
+			};
+			// Seeded with the mount reading, so mounting never re-publishes the
+			// value the settings page already rendered.
+			let last = read().id;
+			// Fire only on a real change: the settings page already rendered the
+			// mount reading, and a focus event that changed nothing must not repaint.
+			const publish = () => {
+				const reading = read();
+				if (reading.id === last) return;
+				last = reading.id;
+				try { fn(reading.next); } catch {}
+			};
+			/** @type {Array<() => void>} */
+			const unsubscribes = [];
+			if (win !== null && typeof win.addEventListener === "function") {
+				for (const event of ["focus", "visibilitychange", "pageshow"]) {
+					win.addEventListener(event, publish);
+					unsubscribes.push(() => win.removeEventListener(event, publish));
+				}
+			}
+			try {
+				if (navigatorObject !== null && navigatorObject.permissions && typeof navigatorObject.permissions.query === "function") {
+					const pending = navigatorObject.permissions.query({ name: "notifications" });
+					if (pending !== null && typeof pending === "object" && typeof pending.then === "function") {
+						pending.then((status) => {
+							if (status === null || typeof status !== "object" || typeof status.addEventListener !== "function") return;
+							status.addEventListener("change", publish);
+							unsubscribes.push(() => status.removeEventListener("change", publish));
+						}).catch(() => {});
+					}
+				}
+			} catch {}
+			return () => {
+				for (const off of unsubscribes) {
+					try { off(); } catch {}
+				}
+				unsubscribes.length = 0;
+			};
+		}
+
 		//#endregion
 		//#region favicon compositing
 		// The browser accepts exactly ONE image per <link rel="icon">, so a tab
@@ -1091,6 +1493,58 @@ window.__ModuleLoader__.load({
 			c2d.fillText(text, cx, cy + size * 0.01);
 			c2d.restore();
 		}
+		/**
+		 * The common badge scale when BOTH tab-icon numbers are shown.
+		 *
+		 * A big red "2" beside a small yellow "1" reads as a rendering bug, so the
+		 * two pills share one size: the largest that fits them stacked inside the
+		 * canvas (four half-heights + the edge pads + the seam between them). The
+		 * constraint is absolute — it is the canvas that is small, not the setting —
+		 * so this returns a SCALE multiplier the caller folds into the normal one,
+		 * and a pill drawn alone keeps whatever size the setting asks for.
+		 * @param scale - the badge-size multiplier from the setting.
+		 * @returns a multiplier ≤ 1 to apply to it.
+		 */
+		function faviconBadgeFitScale(scale) {
+			const k = typeof scale === "number" && scale > 0 ? scale : 1;
+			// 0.205: four half-heights plus both white rings plus a seam, inside the
+			// canvas. Anything larger and the two rings merge into one blob.
+			return Math.min(1, 0.205 / (0.28 * k));
+		}
+		/**
+		 * The yellow "N running" badge on the tab icon: bottom-right.
+		 *
+		 * Mirrors `drawFaviconBadge` exactly — same geometry, same white ring, same
+		 * digit size for the same `scale` — so the two numbers can sit one above the
+		 * other as equals. Dark digits, because yellow needs dark ink.
+		 * @param c2d - the tab-icon canvas context.
+		 * @param size - canvas edge in px.
+		 * @param count - how many sessions are running.
+		 * @param scale - the badge-size multiplier (already fitted when paired).
+		 */
+		function drawFaviconRunningBadge(c2d, size, count, scale) {
+			const text = badgeLabel(count);
+			const r = size * 0.28 * (scale || 1);
+			const wide = text.length > 1;
+			const w = wide ? r * 2 + size * 0.16 * (text.length - 1) : r * 2;
+			const h = r * 2;
+			const cx = size - w / 2 - size * 0.02;
+			const cy = size - h / 2 - size * 0.02;
+			c2d.save();
+			// White ring so the badge stays readable on any base artwork.
+			c2d.fillStyle = "#ffffff";
+			roundRect(c2d, cx - w / 2 - size * 0.03, cy - h / 2 - size * 0.03, w + size * 0.06, h + size * 0.06);
+			c2d.fill();
+			c2d.fillStyle = RUNNING_YELLOW;
+			roundRect(c2d, cx - w / 2, cy - h / 2, w, h);
+			c2d.fill();
+			c2d.fillStyle = "#1f1f1f";
+			c2d.font = `700 ${Math.round(h * (wide ? 0.56 : 0.68))}px system-ui, -apple-system, sans-serif`;
+			c2d.textAlign = "center";
+			c2d.textBaseline = "middle";
+			c2d.fillText(text, cx, cy + size * 0.01);
+			c2d.restore();
+		}
 		function loadIconImage(href) {
 			return new Promise((resolve, reject) => {
 				const img = new Image();
@@ -1101,7 +1555,10 @@ window.__ModuleLoader__.load({
 		}
 		async function applyBadgeToFavicon(count, size) {
 			const base = desiredIconHref();
-			if (count <= 0) {
+			// Two independent marks ride one composite, so "nothing to draw" means
+			// neither of them is wanted — not merely "no unread".
+			const running = runningTotal > 0;
+			if (count <= 0 && !running) {
 				// No badge to draw. With a custom icon active the page must carry it on
 				// EVERY link (a stale scheme-specific sibling outranks the one we set);
 				// with none, the shipped dark/light pair goes back untouched — the
@@ -1129,8 +1586,13 @@ window.__ModuleLoader__.load({
 				const dw = iw * scale;
 				const dh = ih * scale;
 				c2d.drawImage(img, (FAVICON_SIZE - dw) / 2, (FAVICON_SIZE - dh) / 2, dw, dh);
-				drawFaviconBadge(c2d, FAVICON_SIZE, count, badgeScale(size));
-				setIconEverywhere(canvas.toDataURL("image/png"), "image/png");
+				// One size for both numbers: when they share the tab icon they shrink
+				// together to the largest pair that fits, so neither reads as a bug and
+				// the two can never overlap.
+				const badgeUnit = badgeScale(size);
+				const badgeK = count > 0 && running ? badgeUnit * faviconBadgeFitScale(badgeUnit) : badgeUnit;
+				if (count > 0) drawFaviconBadge(c2d, FAVICON_SIZE, count, badgeK);
+				if (running) drawFaviconRunningBadge(c2d, FAVICON_SIZE, runningTotal, badgeK);				setIconEverywhere(canvas.toDataURL("image/png"), "image/png");
 			} catch (error) {
 				// Never silent: a failure here is invisible in the UI (the tab simply
 				// keeps its previous icon), which once cost a whole debugging session.
@@ -1186,7 +1648,7 @@ window.__ModuleLoader__.load({
 			// stale sibling is exactly what used to outrank the icon we set.
 			const hrefs = iconLinks().map((candidate) => candidate.getAttribute("href"));
 			const ours = hrefs.length > 0 && hrefs.every((value) => typeof value === "string" && value.slice(0, 5) === "data:");
-			if (effectiveCount() <= 0) {
+			if (effectiveCount() <= 0 && runningTotal <= 0) {
 				// Carries the custom icon, or puts the shipped pair back. Both writers
 				// only touch a link that actually differs, so this stays a no-op once
 				// the page is correct and cannot re-arm the head observer.
@@ -1205,22 +1667,38 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		//#region unread panel
+		//#region header panel
 		/**
-		 * Whether the "which sessions?" list is open, and where its button sits.
-		 * The foot entry and the floating list live in two different slots, so they
+		 * Which list is open, and where the button that opened it sits.
+		 *
+		 * One store for both lists, and one open slot: the two numbers sit in the same
+		 * header row, so two panels open at once would stack on top of each other
+		 * under the same anchor. `mode` is therefore "unread" | "running" | null, and
+		 * opening either closes the other by construction.
+		 *
+		 * The buttons and the floating list live in two different slots, so they
 		 * cannot share React state — this tiny store is what they agree through.
 		 */
-		let unreadPanelOpen = false;
-		let unreadPanelAnchor = null;
-		const unreadPanelListeners = new Set();
-		function emitUnreadPanel(open, anchor) {
-			unreadPanelOpen = open === true;
-			if (anchor !== undefined) unreadPanelAnchor = anchor;
-			unreadPanelListeners.forEach((fn) => { try { fn(); } catch {} });
+		let panelMode = null;
+		let panelAnchor = null;
+		const panelListeners = new Set();
+		function emitPanel(mode, anchor) {
+			panelMode = mode === "unread" || mode === "running" ? mode : null;
+			if (anchor !== undefined) panelAnchor = anchor;
+			panelListeners.forEach((fn) => { try { fn(); } catch {} });
+		}
+		function subscribePanel(fn) {
+			panelListeners.add(fn);
+			return () => { panelListeners.delete(fn); };
 		}
-		function subscribeUnreadPanel(fn) {
-			unreadPanelListeners.add(fn);
-			return () => { unreadPanelListeners.delete(fn); };
+		/**
+		 * One marker's button: open its list, or close it when it is already the open
+		 * one. Clicking the OTHER marker switches lists instead of stacking them.
+		 * @param mode - "unread" (the red count) or "running" (the yellow count).
+		 * @param anchor - the clicked node's viewport rect, or undefined to keep the last one.
+		 */
+		function togglePanel(mode, anchor) {
+			emitPanel(panelMode === mode ? null : mode, anchor === undefined ? null : anchor);
 		}
 		/**
 		 * Tells the badge source that the marks moved somewhere it did not touch —
@@ -1235,9 +1713,6 @@ window.__ModuleLoader__.load({
 			unreadPokeListeners.add(fn);
 			return () => { unreadPokeListeners.delete(fn); };
 		}
-		function toggleUnreadPanel(anchor) {
-			emitUnreadPanel(!unreadPanelOpen, anchor === undefined ? null : anchor);
-		}
 		/**
 		 * Roll the pending sessions up to one dot per workspace.
 		 *
@@ -1365,6 +1840,22 @@ window.__ModuleLoader__.load({
 			if (short !== "") parts.push(short);
 			return parts.join(" · ");
 		}
+		/**
+		 * The dim second line of one running row: that it is running, and which
+		 * session it is. Deliberately no age — the official session list carries no
+		 * "started at" fact (only `running: boolean`), and this plugin would rather
+		 * print less than invent a time. Shape matches `unreadRowSubtitle` so the two
+		 * lists read as one panel with two modes.
+		 * @param item - a row from the badge bridge's `runningItems`.
+		 * @param t - locale binder.
+		 * @returns the line, already joined.
+		 */
+		function runningRowSubtitle(item, t) {
+			const parts = [t("runningPanelRow")];
+			const short = shortSessionId(item.id);
+			if (short !== "") parts.push(short);
+			return parts.join(" · ");
+		}
 		/**
 		 * What "mark all read" may actually acknowledge: the turn-end rows.
 		 *
@@ -1385,6 +1876,175 @@ window.__ModuleLoader__.load({
 			}
 			return targets;
 		}
+		//#region reveal in sidebar
+		/**
+		 * Locating a clicked session in the sidebar: expand its workspace, scroll to the
+		 * row, light it up for a moment.
+		 *
+		 * The official sidebar does exactly this by itself — but ONLY for its own search
+		 * results. The state behind that (`revealSessionId`) is private to that component
+		 * and no Service exposes it, while `uiWorkspace.openSession` switches the main
+		 * view and nothing else. So this drives the shipped rows the way a user's click
+		 * would: the workspace row toggles its group, the "show more" button raises the
+		 * collapsed-session limit.
+		 *
+		 * It therefore reads the page structure, and it is DECORATIVE: by the time it runs
+		 * the session is already open. Moved markup (a DSH upgrade), a rail sidebar or an
+		 * open search box all degrade to "the sidebar did not move" — never to an error,
+		 * and never to a blocked click.
+		 */
+		const REVEAL_ROW_KEY_ATTR = "data-row-key";
+		const REVEAL_FLASH_ATTR = "data-icon-custom-flash";
+		const REVEAL_FLASH_STYLE_ID = "dsh-icon-custom-flash-css";
+		/** How long the located row stays lit. */
+		const REVEAL_FLASH_MS = 1200;
+		/**
+		 * How many DOM steps one reveal may take.
+		 *
+		 * The official flow does this in one shot by writing its own state; we only have
+		 * clicks, and every click needs a commit before the row can exist. The realistic
+		 * worst case is a collapsed workspace whose session sits past "show more", which
+		 * releases five rows per click — so this covers a workspace of roughly twenty
+		 * sessions and then stops, rather than driving a shipped control in a loop.
+		 */
+		const REVEAL_MAX_STEPS = 6;
+		/**
+		 * The flash rules: a short outline pulse, not a lasting class. The point is to say
+		 * "here it is", not to leave a mark on a shipped row.
+		 */
+		const REVEAL_FLASH_CSS = [
+			`[${REVEAL_FLASH_ATTR}]{animation:dsh-icon-custom-flash ${REVEAL_FLASH_MS}ms ease-out}`,
+			`@keyframes dsh-icon-custom-flash{0%{outline:2px solid var(--dsw-alias-state-business-primary,#4d6bfe);outline-offset:-2px}100%{outline:2px solid transparent;outline-offset:-2px}}`,
+			`@media (prefers-reduced-motion:reduce){[${REVEAL_FLASH_ATTR}]{animation:none;outline:2px solid var(--dsw-alias-state-business-primary,#4d6bfe);outline-offset:-2px}}`
+		].join("");
+		/** The row currently lit, and the timer that will un-light it. */
+		let revealFlashRow = null;
+		let revealFlashTimer = 0;
+
+		/**
+		 * What to do next to make one session's row visible.
+		 *
+		 * Pure, so the order — and the giving up — is testable without a browser: a row
+		 * that is already there gets scrolled to; otherwise its workspace is expanded;
+		 * otherwise "show more" is clicked; otherwise nothing is touched at all.
+		 * @param state - `{ hasRow, hasWorkspace, expanded, hasOverflow, overflowExpanded, steps }`.
+		 * @returns `"scroll" | "expand" | "overflow" | "give-up"`.
+		 */
+		function revealAction(state) {
+			if (state.hasRow === true) return "scroll";
+			if (state.steps >= REVEAL_MAX_STEPS) return "give-up";
+			if (state.hasWorkspace === true && state.expanded !== true) return "expand";
+			// `overflowExpanded` must be false: that button toggles, and this feature has
+			// no business COLLAPSING a workspace the reader deliberately opened up.
+			if (state.hasOverflow === true && state.overflowExpanded !== true) return "overflow";
+			return "give-up";
+		}
+
+		/**
+		 * The shipped row carrying one `data-row-key`, matched by VALUE.
+		 *
+		 * Not by a selector built from the key: session ids go into the key verbatim, so a
+		 * selector would need escaping rules that a plain comparison simply does not have.
+		 * @param container - the browsing region root.
+		 * @param key - e.g. `session:<id>` / `workspace:<id>` / `overflow:<id>`.
+		 * @returns the element, or null.
+		 */
+		function findRowByKey(container, key) {
+			try {
+				for (const node of container.querySelectorAll(`[${REVEAL_ROW_KEY_ATTR}]`)) {
+					if (node.getAttribute(REVEAL_ROW_KEY_ATTR) === key) return node;
+				}
+			} catch { /* a broken subtree must not become a thrown click */ }
+			return null;
+		}
+
+		/** One paint's worth of waiting, so a click can commit before the row is looked for. */
+		function nextPaint() {
+			return new Promise((resolve) => {
+				try {
+					if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(() => resolve());
+					else window.setTimeout(resolve, 16);
+				} catch { resolve(); }
+			});
+		}
+
+		/** Install the flash rules once per page. */
+		function ensureRevealFlashStyle() {
+			try {
+				if (document.getElementById(REVEAL_FLASH_STYLE_ID) !== null) return;
+				const style = document.createElement("style");
+				style.id = REVEAL_FLASH_STYLE_ID;
+				style.textContent = REVEAL_FLASH_CSS;
+				document.head.appendChild(style);
+			} catch { /* styling is cosmetic; never let it reach a click */ }
+		}
+
+		/** Take the flash off, whoever put it there. Also the unload path. */
+		function clearRevealFlash() {
+			if (revealFlashTimer !== 0) {
+				try { window.clearTimeout(revealFlashTimer); } catch { /* the page is going away */ }
+				revealFlashTimer = 0;
+			}
+			if (revealFlashRow !== null) {
+				try { revealFlashRow.removeAttribute(REVEAL_FLASH_ATTR); } catch { /* already detached */ }
+				revealFlashRow = null;
+			}
+		}
+
+		/**
+		 * Scroll one shipped row into view and light it for a moment.
+		 *
+		 * `block:"nearest"` is the official call and the reason a reveal does not yank the
+		 * whole list: it moves the list only as far as the row needs.
+		 * @param row - the session row element.
+		 */
+		function flashRow(row) {
+			try {
+				clearRevealFlash();
+				ensureRevealFlashStyle();
+				row.setAttribute(REVEAL_FLASH_ATTR, "1");
+				revealFlashRow = row;
+				revealFlashTimer = window.setTimeout(() => { clearRevealFlash(); }, REVEAL_FLASH_MS);
+			} catch { /* cosmetic */ }
+			try { row.scrollIntoView({ block: "nearest" }); } catch { /* older engines take no options */ }
+		}
+
+		/**
+		 * Put one session's row in front of the reader.
+		 *
+		 * Best effort from the first line to the last: the session is ALREADY open when
+		 * this runs, so every exit here — no container, no workspace id, a sidebar that
+		 * never renders the row — costs the reader nothing but the scroll.
+		 * @param sessionId - the session to locate.
+		 * @param workspaceId - its workspace, when the official snapshot knows one.
+		 */
+		async function revealSessionRow(sessionId, workspaceId) {
+			if (typeof sessionId !== "string" || sessionId === "") return;
+			if (unreadConfig === null || typeof unreadConfig !== "object" || unreadConfig.revealOnOpen === false) return;
+			const container = workspaceDotContainer();
+			if (container === null) return;
+			const wsKey = typeof workspaceId === "string" && workspaceId !== "" ? `workspace:${workspaceId}` : null;
+			const moreKey = typeof workspaceId === "string" && workspaceId !== "" ? `overflow:${workspaceId}` : null;
+			for (let steps = 0; steps < REVEAL_MAX_STEPS; steps++) {
+				const row = findRowByKey(container, `session:${sessionId}`);
+				const wsRow = wsKey === null ? null : findRowByKey(container, wsKey);
+				const more = moreKey === null ? null : findRowByKey(container, moreKey);
+				const action = revealAction({
+					hasRow: row !== null,
+					hasWorkspace: wsRow !== null,
+					expanded: wsRow !== null && wsRow.getAttribute("aria-expanded") === "true",
+					hasOverflow: more !== null,
+					overflowExpanded: more !== null && more.getAttribute("aria-expanded") === "true",
+					steps
+				});
+				if (action === "scroll") { flashRow(row); return; }
+				if (action === "give-up") return;
+				const target = action === "expand" ? wsRow : more;
+				if (target === null) return;
+				try { target.click(); } catch { return; }
+				await nextPaint();
+			}
+		}
 		//#endregion
 
 		//#region workspace dots
@@ -1399,6 +2059,18 @@ window.__ModuleLoader__.load({
 		 */
 		const WS_DOT_ATTR = "data-icon-custom-wsdot";
 		const ROW_DOT_ATTR = "data-icon-custom-rowdot";
+		/** The running mark's two shapes: a dot after a session title (and on a folder icon), plus the header count. */
+		const RUN_DOT_ATTR = "data-icon-custom-rundot";
+		const RUN_WS_ATTR = "data-icon-custom-runws";
+		/**
+		 * How far the folder icon's red dot steps left when the yellow dot joins it.
+		 *
+		 * An 8px dot plus a 2px seam: the pair then still sits over the icon's right
+		 * half instead of one of them hanging off into the workspace name. The red
+		 * steps back the moment the yellow is gone, so the unread marker keeps its
+		 * old place whenever it is alone.
+		 */
+		const WS_DOT_PAIR_SHIFT = 10;
 		const WS_ROW_MIN_H = 18;
 		const WS_ROW_MAX_H = 56;
 		const WS_ROW_MIN_W = 80;
@@ -1406,6 +2078,10 @@ window.__ModuleLoader__.load({
 		let workspaceDots = [];
 		/** One entry per unread session: `{ id, title }`, matched against the row title. */
 		let sessionDots = [];
+		/** One entry per RUNNING session: `{ id, title }` — same shape, same row handle. */
+		let runningSessionDots = [];
+		/** One entry per workspace with running sessions: `{ id, name, count }`. */
+		let runningWorkspaceMarks = [];
 		let workspaceDotFailures = 0;
 		let workspaceDotGivenUp = false;
 		let workspaceDotPainting = false;
@@ -1420,6 +2096,11 @@ window.__ModuleLoader__.load({
 			const next = marks !== null && typeof marks === "object" ? marks : {};
 			workspaceDots = Array.isArray(next.workspaces) ? next.workspaces : [];
 			sessionDots = Array.isArray(next.sessions) ? next.sessions : [];
+			// The running marks ride the same store and the same paint pass as the
+			// unread ones, but they are a different feature: they carry their own
+			// arrays, and whichever switch is off empties only its own.
+			runningSessionDots = Array.isArray(next.runningSessions) ? next.runningSessions : [];
+			runningWorkspaceMarks = Array.isArray(next.runningWorkspaces) ? next.runningWorkspaces : [];
 			workspaceDotListeners.forEach((fn) => { try { fn(); } catch {} });
 		}
 		function subscribeSidebarMarks(fn) {
@@ -1433,7 +2114,7 @@ window.__ModuleLoader__.load({
 				|| null;
 		}
 		function clearWorkspaceDots() {
-			try { document.querySelectorAll("[" + WS_DOT_ATTR + "],[" + ROW_DOT_ATTR + "]").forEach((node) => node.remove()); } catch {}
+			try { document.querySelectorAll("[" + WS_DOT_ATTR + "],[" + ROW_DOT_ATTR + "],[" + RUN_DOT_ATTR + "],[" + RUN_WS_ATTR + "]").forEach((node) => node.remove()); } catch {}
 			for (const entry of workspaceDotRestores) { try { entry.el.style.position = entry.position; } catch {} }
 			workspaceDotRestores = [];
 		}
@@ -1636,6 +2317,11 @@ window.__ModuleLoader__.load({
 			const enabled = unreadConfig.workspaceDot !== false;
 			const wanted = enabled ? workspaceDots : [];
 			const wantedRows = enabled ? sessionDots : [];
+			// A separate switch for a separate feature: the running marks keep working
+			// when the unread dots are turned off, and vice versa.
+			const runningEnabled = runningConfig.enabled !== false;
+			const wantedRunningRows = runningEnabled ? runningSessionDots : [];
+			const wantedRunningMarks = runningEnabled ? runningWorkspaceMarks : [];
 			const container = workspaceDotContainer();
 			workspaceDotPainting = true;
 			workspaceDotPaintedAt = Date.now();
@@ -1648,12 +2334,20 @@ window.__ModuleLoader__.load({
 				// matched twice for a moment) can no longer blink an existing dot away.
 				const wantedNames = new Set(wanted.map((entry) => workspaceDotKey(entry)));
 				const wantedIds = new Set(wantedRows.map((entry) => entry.id));
+				const wantedRunningIds = new Set(wantedRunningRows.map((entry) => entry.id));
+				const wantedRunningNames = new Set(wantedRunningMarks.map((entry) => workspaceDotKey(entry)));
 				document.querySelectorAll("[" + WS_DOT_ATTR + "]").forEach((node) => {
 					if (!node.isConnected || !wantedNames.has(node.getAttribute(WS_DOT_ATTR))) node.remove();
 				});
 				document.querySelectorAll("[" + ROW_DOT_ATTR + "]").forEach((node) => {
 					if (!node.isConnected || !wantedIds.has(node.getAttribute(ROW_DOT_ATTR))) node.remove();
 				});
+				document.querySelectorAll("[" + RUN_DOT_ATTR + "]").forEach((node) => {
+					if (!node.isConnected || !wantedRunningIds.has(node.getAttribute(RUN_DOT_ATTR))) node.remove();
+				});
+				document.querySelectorAll("[" + RUN_WS_ATTR + "]").forEach((node) => {
+					if (!node.isConnected || !wantedRunningNames.has(node.getAttribute(RUN_WS_ATTR))) node.remove();
+				});
 				if (container === null) { workspaceDotPainting = false; return; } // start-up race
 				const legacyTitleMatch = !sessionRowKeysInUse(container);
 				for (const entry of wanted) {
@@ -1669,7 +2363,6 @@ window.__ModuleLoader__.load({
 					}
 					if (target === null) { missed++; continue; }
 					const row = target.row;
-					if (existingMarker(row, WS_DOT_ATTR, key) !== null) { placed++; continue; }
 					const icon = target.icon;
 					const rowRect = row.getBoundingClientRect();
 					const anchorRect = icon.getBoundingClientRect();
@@ -1677,24 +2370,95 @@ window.__ModuleLoader__.load({
 						workspaceDotRestores.push({ el: row, position: row.style.position });
 						row.style.position = "relative";
 					}
+					// "Left red, right yellow": the yellow takes the corner this dot has
+					// always used, and the red steps one dot to the left while the pair is
+					// together (and steps back the moment the yellow is gone).
+					const paired = existingMarker(row, RUN_WS_ATTR, key) !== null;
+					const left = Math.round(anchorRect.right - rowRect.left - 4 - (paired ? WS_DOT_PAIR_SHIFT : 0));
+					const top = Math.round(anchorRect.top - rowRect.top - 3);
+					const existingDot = existingMarker(row, WS_DOT_ATTR, key);
+					if (existingDot !== null) {
+						if (existingDot.style.left !== left + "px") existingDot.style.left = left + "px";
+						if (existingDot.style.top !== top + "px") existingDot.style.top = top + "px";
+						placed++;
+						continue;
+					}
 					const dot = document.createElement("span");
 					dot.setAttribute(WS_DOT_ATTR, key);
 					dot.setAttribute("aria-hidden", "true");
 					dot.title = (typeof entry.name === "string" && entry.name !== "" ? entry.name : key) + " · " + entry.count;
 					dot.style.cssText = "position:absolute;pointer-events:none;width:8px;height:8px;border-radius:50%;"
-						+ "background:#e5484d;box-shadow:0 0 0 1.5px var(--dsw-alias-bg-layer-1,#fff);"
-						+ "left:" + Math.round(anchorRect.right - rowRect.left - 4) + "px;"
-						+ "top:" + Math.round(anchorRect.top - rowRect.top - 3) + "px;";
+						+ "background:#e5484d;box-shadow:0 0 0 1.5px var(--dsw-alias-bg-layer-1,#fff);";
+					dot.style.left = left + "px";
+					dot.style.top = top + "px";
 					row.appendChild(dot);
 					placed++;
 					created++;
 				}
-				// Session rows: the marker rides inline right after the title, so it stays
-				// beside the name whatever the timestamp happens to say.
+				// Workspace rows: the running mark is a yellow DOT on the folder icon
+				// (the count lives in the section header, where a number is readable).
+				// "Left red, right yellow": the yellow takes the corner the red has
+				// always used and the red steps aside by exactly one dot.
+				for (const entry of wantedRunningMarks) {
+					const key = workspaceDotKey(entry);
+					if (key === undefined) { missed++; continue; }
+					const keyedRow = workspaceRowElement(container, entry.id);
+					const target = keyedRow === null ? null : folderTargetFor(keyedRow);
+					if (target === null) { missed++; continue; }
+					const row = target.row;
+					const runDot = existingMarker(row, RUN_WS_ATTR, key);
+					const icon = target.icon;
+					const rowRect = row.getBoundingClientRect();
+					const anchorRect = icon.getBoundingClientRect();
+					if (window.getComputedStyle(row).position === "static") {
+						workspaceDotRestores.push({ el: row, position: row.style.position });
+						row.style.position = "relative";
+					}
+					const corner = Math.round(anchorRect.right - rowRect.left - 4);
+					const top = Math.round(anchorRect.top - rowRect.top - 3);
+					// The red keeps the pair's LEFT seat. It is nudged here as well as in
+					// its own loop because on the first paint it cannot see a yellow that
+					// does not exist yet — both places compute the same number, so the
+					// pair never oscillates.
+					const red = existingMarker(row, WS_DOT_ATTR, key);
+					if (red !== null) {
+						const redLeft = corner - WS_DOT_PAIR_SHIFT;
+						if (red.style.left !== redLeft + "px") red.style.left = redLeft + "px";
+						if (red.style.top !== top + "px") red.style.top = top + "px";
+					}
+					if (runDot !== null) {
+						if (runDot.style.left !== corner + "px") runDot.style.left = corner + "px";
+						if (runDot.style.top !== top + "px") runDot.style.top = top + "px";
+						placed++;
+						continue;
+					}
+					const mark = document.createElement("span");
+					mark.setAttribute(RUN_WS_ATTR, key);
+					mark.setAttribute("aria-hidden", "true");
+					mark.title = (entry.name !== "" ? entry.name : key) + " · " + entry.count;
+					mark.style.cssText = "position:absolute;pointer-events:none;width:8px;height:8px;border-radius:50%;"
+						+ "background:" + RUNNING_YELLOW + ";box-shadow:0 0 0 1.5px var(--dsw-alias-bg-layer-1,#fff);";
+					mark.style.left = corner + "px";
+					mark.style.top = top + "px";
+					row.appendChild(mark);
+					placed++;
+					created++;
+				}
+				// Session rows: RED first, then YELLOW — "left red, right yellow", and a
+				// fixed order no matter which of the two features changed last.
 				for (const entry of wantedRows) {
 					const target = sessionRowTarget(container, entry.id, entry.title, legacyTitleMatch);
 					if (target === null) { missed++; continue; }
-					if (existingMarker(target.row, ROW_DOT_ATTR, entry.id) !== null) { placed++; continue; }
+					const existing = existingMarker(target.row, ROW_DOT_ATTR, entry.id);
+					if (existing !== null) {
+						// Both markers can survive a repaint; keep the red in front of the
+						// yellow (a red painted while the yellow was gone would otherwise
+						// stay glued to the title).
+						const runDot = existingMarker(target.row, RUN_DOT_ATTR, entry.id);
+						if (runDot !== null && existing.nextElementSibling !== runDot) existing.insertAdjacentElement("afterend", runDot);
+						placed++;
+						continue;
+					}
 					const dot = document.createElement("span");
 					dot.setAttribute(ROW_DOT_ATTR, entry.id);
 					dot.setAttribute("aria-hidden", "true");
@@ -1702,11 +2466,27 @@ window.__ModuleLoader__.load({
 					// Tight to the title on the left, and kept off the timestamp on the
 					// right: with no right margin the dot reads as part of "24 分钟".
 					dot.style.cssText = "pointer-events:none;flex:none;width:8px;height:8px;border-radius:50%;"
-						+ "background:#e5484d;margin:0 4px 0 6px;";
+						+ "background:#e5484d;margin:0 5px 0 6px;";
 					target.title.insertAdjacentElement("afterend", dot);
 					placed++;
 					created++;
 				}
+				for (const entry of wantedRunningRows) {
+					const target = sessionRowTarget(container, entry.id, entry.title, legacyTitleMatch);
+					if (target === null) { missed++; continue; }
+					if (existingMarker(target.row, RUN_DOT_ATTR, entry.id) !== null) { placed++; continue; }
+					const runDot = document.createElement("span");
+					runDot.setAttribute(RUN_DOT_ATTR, entry.id);
+					runDot.setAttribute("aria-hidden", "true");
+					runDot.title = entry.title;
+					runDot.style.cssText = "pointer-events:none;flex:none;width:8px;height:8px;border-radius:50%;"
+						+ "background:" + RUNNING_YELLOW + ";margin:0 4px 0 0;";
+					const red = existingMarker(target.row, ROW_DOT_ATTR, entry.id);
+					if (red !== null) red.insertAdjacentElement("afterend", runDot);
+					else target.title.insertAdjacentElement("afterend", runDot);
+					placed++;
+					created++;
+				}
 			} catch (error) {
 				missed++;
 				noteWorkspaceDotFailure(String((error && error.message) || error));
@@ -1765,6 +2545,10 @@ window.__ModuleLoader__.load({
 			const workspaces = typeof props.useWorkspaces === "function" ? props.useWorkspaces((state) => state) : undefined;
 			const [config, setConfig] = React.useState(unreadConfig);
 			React.useEffect(() => subscribeUnreadConfig(setConfig), []);
+			// The running mark's own switch. Same shape, separate feature: the two
+			// never share state, so one switch can never move the other's marks.
+			const [running, setRunning] = React.useState(runningConfig);
+			React.useEffect(() => subscribeRunningConfig(setRunning), []);
 			// Baseline new sessions; persists only when it actually learns something.
 			React.useEffect(() => {
 				const ids = list !== null && typeof list === "object" && Array.isArray(list.ids) ? list.ids : [];
@@ -1793,6 +2577,36 @@ window.__ModuleLoader__.load({
 			const watching = visible && panelActive !== true;
 			const currentIds = currentSessionIds(list, { displayed: displayedSessionId() });
 			const items = collectUnread(list, pending, config, seenState.seen);
+			/**
+			 * Map session → its Workspace from the official snapshot: the ID anchors the
+			 * folder dot to the keyed row, the title is what the row displays (not always
+			 * the cwd basename, and not always equal to the stored title either).
+			 *
+			 * The same map answers a second question: which workspace row to expand when a
+			 * list row is clicked. The pending list only carries the cwd basename, which
+			 * cannot be turned back into a workspace id.
+			 */
+			const owners = React.useMemo(() => {
+				const out = {};
+				const workspaceItems = workspaces !== null && typeof workspaces === "object" && Array.isArray(workspaces.items) ? workspaces.items : [];
+				for (const workspace of workspaceItems) {
+					if (workspace === null || typeof workspace !== "object") continue;
+					if (!Array.isArray(workspace.sessionIds)) continue;
+					const id = typeof workspace.workspaceId === "string" ? workspace.workspaceId : "";
+					const title = typeof workspace.title === "string" ? workspace.title : "";
+					for (const sessionId of workspace.sessionIds) out[sessionId] = { id, title };
+				}
+				return out;
+			}, [workspaces]);
+			/**
+			 * The pending rows plus the workspace they belong to. A session the official
+			 * snapshot places nowhere keeps its row untouched: `revealSessionRow` then has
+			 * nothing to expand, which is the honest answer, not a guess.
+			 */
+			const itemsWithOwner = React.useMemo(() => items.map((item) => {
+				const owner = owners[item.id];
+				return owner === undefined || owner.id === "" ? item : { ...item, workspaceId: owner.id };
+			}), [items, owners]);
 			const count = items.length;
 			// Being in a session is what marks it read — and the clock that does it is
 			// armed by ENTERING the session, never by a new ending.
@@ -1868,25 +2682,45 @@ window.__ModuleLoader__.load({
 					if (timer !== 0) window.clearTimeout(timer);
 				};
 			}, [staySignature, delayMs, watching]);
-			React.useEffect(() => { emitRealBadge(count, items); }, [count, items]);
-			// Map session → its Workspace from the official snapshot: the ID anchors the
-			// folder dot to the keyed row, the title is what the row displays (not always
-			// the cwd basename, and not always equal to the stored title either).
+			React.useEffect(() => { emitRealBadge(count, itemsWithOwner); }, [count, itemsWithOwner]);
+			/**
+			 * One session's displayed title, the way the sidebar shows it.
+			 *
+			 * Kept in step with `collectUnread`'s own `titleOf`: the yellow dot is
+			 * matched against the row's rendered text, so it must use the same
+			 * `displayTitle` fallback the red dot uses, or a session whose generated
+			 * title has not landed yet would get no yellow dot at all.
+			 */
+			const titleOf = (id, entry) => (entry !== null && typeof entry === "object" && typeof entry.displayTitle === "string" && entry.displayTitle !== "" ? entry.displayTitle : id);
+			// The running fact, straight off the same two official props and with no
+			// host round trip at all. `runningSignature` is what the marks effect below
+			// depends on, so a list re-render with the same set of running sessions
+			// does not repaint the sidebar.
+			const runningIds = running.enabled === false ? [] : runningSessionIds(list, status);
+			const byId = list !== null && typeof list === "object" && list.byId !== null && typeof list.byId === "object" ? list.byId : {};
+			// The rows behind the yellow count, for the list it opens (`titleOf` +
+			// the same workspace naming the pending list uses, so the two modes of the
+			// panel cannot disagree about what a session is called or where it lives).
+			const runningRows = runningIds.map((id) => ({ id, title: titleOf(id, byId[id]), where: sessionWhereOf(byId[id]), workspaceId: owners[id] === undefined ? "" : owners[id].id }));
+			// Two keys for two consumers: the sidebar repaints on the SET OF IDS, while
+			// the panel must also refresh when a title or a workspace changes.
+			const runningSignature = runningIds.join("|");
+			const runningRowSignature = runningItemsSignature(runningRows);
+			const runningCount = runningIds.length;
+			React.useEffect(() => { emitRunningState(runningCount, runningRows); }, [runningRowSignature]);
+			// The session rows, for naming the running ones the way the sidebar shows
+			// them (`displayTitle`, the same fallback the red dots use).
 			React.useEffect(() => {
-				const owners = {};
-				const list = workspaces !== null && typeof workspaces === "object" && Array.isArray(workspaces.items) ? workspaces.items : [];
-				for (const workspace of list) {
-					if (workspace === null || typeof workspace !== "object") continue;
-					if (!Array.isArray(workspace.sessionIds)) continue;
-					const id = typeof workspace.workspaceId === "string" ? workspace.workspaceId : "";
-					const title = typeof workspace.title === "string" ? workspace.title : "";
-					for (const sessionId of workspace.sessionIds) owners[sessionId] = { id, title };
-				}
 				emitSidebarMarks({
 					workspaces: dotsFromItems(items, owners),
-					sessions: items.map((item) => ({ id: item.id, title: item.title }))
+					sessions: items.map((item) => ({ id: item.id, title: item.title })),
+					// The same rows, the other fact. Both arrays travel together, so the
+					// paint pass can put the yellow dot in front of the red one
+					// deterministically instead of depending on which feature changed last.
+					runningSessions: runningRows.map((row) => ({ id: row.id, title: row.title })),
+					runningWorkspaces: runningWorkspaceDots(runningIds, owners)
 				});
-			}, [items, workspaces]);
+			}, [items, owners, runningSignature, running]);
 			return null;
 		}
 
@@ -1910,16 +2744,23 @@ window.__ModuleLoader__.load({
 		 *
 		 * The count is shown for EVERY value including zero: a grey 0 keeps the
 		 * position from jumping, and doubles as the only way back to the panel once
-		 * the old sidebar-foot button is gone.
+		 * the old sidebar-foot button is gone. The YELLOW count, by contrast, has no
+		 * zero state and is a button: with nothing running there is no list to open.
 		 */
 		const HEAD_BADGE_ATTR = "data-icon-custom-unreadbadge";
+		/** The running count's own node in the same header row — bottom-right of the label. */
+		const HEAD_RUN_ATTR = "data-icon-custom-runbadge";
 		const HEAD_BADGE_STYLE_ID = "dsh-icon-custom-unreadbadge-css";
 		const HEAD_BADGE_WIRED = "data-icon-custom-unreadbadge-wired";
+		/** The yellow pill's own wiring flag — it is a button now, exactly like the red one. */
+		const HEAD_RUN_WIRED = "data-icon-custom-runbadge-wired";
 		const HEAD_BADGE_MAX_FAILURES = 40;
 		/** How many ancestors to walk up looking for the header row. */
 		const HEAD_BADGE_MAX_STEPS = 6;
 		/** Raise above the label's top edge; the header only leaves 8px of headroom. */
 		const HEAD_BADGE_RAISE = 7;
+		/** Drop below the label's bottom edge; mirrors the raise, and still fits the 36px header. */
+		const HEAD_RUN_DROP = 8;
 		/** Overhang past the label's right edge. */
 		const HEAD_BADGE_OVERHANG = 9;
 		let headerBadgeHost = null;
@@ -1947,7 +2788,14 @@ window.__ModuleLoader__.load({
 			`[${HEAD_BADGE_ATTR}]{position:absolute;display:none;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3.5px;box-sizing:border-box;border:0;border-radius:999px;background:#e5484d;color:#fff;font:inherit;font-size:9.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;cursor:pointer;z-index:3;box-shadow:0 0 0 1.5px var(--dsw-specific-sidebar-fill,#fff)}`,
 			`[${HEAD_BADGE_ATTR}]::after{content:"";position:absolute;inset:0 -5px -5px -5px;border-radius:999px}`,
 			`[${HEAD_BADGE_ATTR}]:hover{filter:brightness(1.12)}`,
-			`[${HEAD_BADGE_ATTR}][data-zero="1"]{background:var(--dsw-alias-state-idle-primary,#b6bcc4)}`
+			`[${HEAD_BADGE_ATTR}][data-zero="1"]{background:var(--dsw-alias-state-idle-primary,#b6bcc4)}`,
+			// The running count: same pill, other corner, and now a button like the red
+			// one — it opens the list of the very sessions it counts. It has no zero
+			// state (a yellow 0 would be pure noise), so with nothing running there is
+			// nothing to open either: the pill is simply not there.
+			`[${HEAD_RUN_ATTR}]{position:absolute;display:none;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3.5px;box-sizing:border-box;border:0;border-radius:999px;background:${RUNNING_YELLOW};color:#1f1f1f;font:inherit;font-size:9.5px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;cursor:pointer;z-index:3;box-shadow:0 0 0 1.5px var(--dsw-specific-sidebar-fill,#fff)}`,
+			`[${HEAD_RUN_ATTR}]::after{content:"";position:absolute;inset:0 -5px -5px -5px;border-radius:999px}`,
+			`[${HEAD_RUN_ATTR}]:hover{filter:brightness(1.12)}`
 		].join("");
 
 		/** Install the badge rules once per page. */
@@ -1974,11 +2822,13 @@ window.__ModuleLoader__.load({
 		 * @returns `{ row, label }`, or null when this build's DOM is not recognised.
 		 */
 		function sectionHeaderParts(container) {
-			// Our own badge is a button too; never let it stand in for the search
-			// control, or the row anchor would resolve to the wrong element.
+			// Our own nodes are never a stand-in for shipped controls or for the label:
+			// the red badge is a button and the yellow one carries text, so either could
+			// be mistaken for the search control or the label if left in the running.
 			let firstButton = null;
 			for (const candidate of container.querySelectorAll("button")) {
 				if (candidate.getAttribute(HEAD_BADGE_ATTR) !== null) continue;
+				if (candidate.getAttribute(HEAD_RUN_ATTR) !== null) continue;
 				firstButton = candidate;
 				break;
 			}
@@ -1988,6 +2838,8 @@ window.__ModuleLoader__.load({
 				for (const child of row.children) {
 					if (child === firstButton || child.contains(firstButton)) continue;
 					if (child.tagName === "BUTTON") continue;
+					if (child.getAttribute(HEAD_BADGE_ATTR) !== null) continue;
+					if (child.getAttribute(HEAD_RUN_ATTR) !== null) continue;
 					if (child.querySelector("button") !== null) continue;
 					if ((child.textContent ?? "").trim() !== "") return { row, label: child };
 				}
@@ -2052,7 +2904,7 @@ window.__ModuleLoader__.load({
 					event.stopPropagation();
 					const rect = node.getBoundingClientRect();
 					// `bottom` is what the panel drops below; see unreadPanelPlacement.
-					toggleUnreadPanel({ left: rect.left, top: rect.top, bottom: rect.bottom });
+					togglePanel("unread", { left: rect.left, top: rect.top, bottom: rect.bottom });
 				});
 			}
 			const count = effectiveCount();
@@ -2067,6 +2919,42 @@ window.__ModuleLoader__.load({
 				}
 			}
 			if (node.textContent !== text) node.textContent = text;
+			// The running count, in the same row's other corner: top-right is the unread
+			// number (where it has always been), bottom-right is this one. A button, not
+			// a label — it opens the list of the sessions it is counting.
+			let runNode = row.querySelector(`[${HEAD_RUN_ATTR}]`);
+			if (runNode === null) {
+				runNode = document.createElement("button");
+				runNode.type = "button";
+				runNode.setAttribute(HEAD_RUN_ATTR, "1");
+				// Same as the red one: appended AFTER the shipped controls, so it can
+				// never be mistaken for the header's first button.
+				row.appendChild(runNode);
+			}
+			if (runNode.getAttribute(HEAD_RUN_WIRED) !== "1") {
+				runNode.setAttribute(HEAD_RUN_WIRED, "1");
+				runNode.addEventListener("click", (event) => {
+					// The row belongs to the sidebar; keep the click to ourselves.
+					event.preventDefault();
+					event.stopPropagation();
+					const rect = runNode.getBoundingClientRect();
+					// The same anchor shape the red badge hands over; see
+					// `unreadPanelPlacement` for what `bottom` is used for.
+					togglePanel("running", { left: rect.left, top: rect.top, bottom: rect.bottom });
+				});
+			}
+			const running = normalizeCount(runningTotal);
+			const runText = badgeLabel(running);
+			if (typeof badgeT === "function") {
+				// Says what the number is AND that it opens: it is a control now, and a
+				// bare "2 running" would leave a screen reader with no idea it is one.
+				const spoken = badgeT("runningPanelTrigger").replace("{n}", String(running));
+				if (runNode.getAttribute("aria-label") !== spoken) {
+					runNode.setAttribute("aria-label", spoken);
+					runNode.setAttribute("title", spoken);
+				}
+			}
+			if (runNode.textContent !== runText) runNode.textContent = runText;
 			// The label collapses to nothing while the search box is open; the badge
 			// has no meaning then, and the label's own visibility cannot hide it
 			// because it is a sibling.
@@ -2074,6 +2962,7 @@ window.__ModuleLoader__.load({
 			const labelRect = label.getBoundingClientRect();
 			if (labelRect.width < 8) {
 				if (node.style.display !== "none") node.style.display = "none";
+				if (runNode.style.display !== "none") runNode.style.display = "none";
 			} else {
 				const width = typeof node.offsetWidth === "number" && node.offsetWidth > 0 ? node.offsetWidth : 15;
 				const left = Math.round(labelRect.right - rowRect.left - width + HEAD_BADGE_OVERHANG);
@@ -2082,6 +2971,17 @@ window.__ModuleLoader__.load({
 				if (node.style.left !== `${left}px`) node.style.left = `${left}px`;
 				if (node.style.top !== `${top}px`) node.style.top = `${top}px`;
 				if (node.style.display !== "flex") node.style.display = "flex";
+				// No zero state for the running count: it simply is not there.
+				if (running <= 0) {
+					if (runNode.style.display !== "none") runNode.style.display = "none";
+				} else {
+					const runWidth = typeof runNode.offsetWidth === "number" && runNode.offsetWidth > 0 ? runNode.offsetWidth : 15;
+					const runLeft = Math.round(labelRect.right - rowRect.left - runWidth + HEAD_BADGE_OVERHANG);
+					const runTop = Math.round(labelRect.bottom - rowRect.top - HEAD_RUN_DROP);
+					if (runNode.style.left !== `${runLeft}px`) runNode.style.left = `${runLeft}px`;
+					if (runNode.style.top !== `${runTop}px`) runNode.style.top = `${runTop}px`;
+					if (runNode.style.display !== "flex") runNode.style.display = "flex";
+				}
 			}
 			// The label animates its own width; follow it instead of waiting for the
 			// next mutation, which a CSS transition never produces.
@@ -2095,7 +2995,7 @@ window.__ModuleLoader__.load({
 
 		/** Take the badge back out and restore the row's own positioning. */
 		function clearHeaderBadge() {
-			try { document.querySelectorAll(`[${HEAD_BADGE_ATTR}]`).forEach((node) => node.remove()); } catch {}
+			try { document.querySelectorAll(`[${HEAD_BADGE_ATTR}],[${HEAD_RUN_ATTR}]`).forEach((node) => node.remove()); } catch {}
 			if (headerBadgeObserver !== null) {
 				try { headerBadgeObserver.disconnect(); } catch {}
 				headerBadgeObserver = null;
@@ -2154,30 +3054,33 @@ window.__ModuleLoader__.load({
 		}
 
 		/**
-		 * 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
-		 * session — which is also what marks it read.
+		 * The list behind those numbers, in the frame-wide overlay layer so it escapes
+		 * the sidebar's clipping and scroll container. ONE panel with two modes: the
+		 * red count opens "who needs you", the yellow count opens "who is running".
+		 * Clicking a row opens that session — which is also what marks an unread one
+		 * read. The running mode has no "mark all read": running is a live fact, not a
+		 * queue, so there is nothing there to acknowledge.
 		 */
-		function UnreadPopup(props) {
+		function HeaderPopup(props) {
 			const [snapshot, setSnapshot] = React.useState(badgeSnapshot);
-			const [open, setOpen] = React.useState(unreadPanelOpen);
+			const [mode, setMode] = React.useState(panelMode);
 			// 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(() => subscribePanel(() => setMode(panelMode)), []);
 			React.useEffect(() => {
-				if (!open) return undefined;
+				if (mode === null) return undefined;
 				const interval = window.setInterval(() => tick((n) => n + 1), 30000);
 				return () => window.clearInterval(interval);
-			}, [open]);
+			}, [mode]);
 			React.useEffect(() => {
-				if (!open) return undefined;
-				const onKey = (event) => { if (event.key === "Escape") emitUnreadPanel(false); };
+				if (mode === null) return undefined;
+				const onKey = (event) => { if (event.key === "Escape") emitPanel(null); };
 				const onDown = (event) => {
 					const node = event.target;
-					if (node !== null && typeof node.closest === "function" && node.closest('[data-icon-custom-unread="1"]') !== null) return;
-					emitUnreadPanel(false);
+					if (node !== null && typeof node.closest === "function" && node.closest('[data-icon-custom-panel="1"]') !== null) return;
+					emitPanel(null);
 				};
 				window.addEventListener("keydown", onKey);
 				document.addEventListener("mousedown", onDown, true);
@@ -2185,10 +3088,12 @@ window.__ModuleLoader__.load({
 					window.removeEventListener("keydown", onKey);
 					document.removeEventListener("mousedown", onDown, true);
 				};
-			}, [open]);
-			if (!open) return null;
+			}, [mode]);
+			if (mode === null) return null;
 			const t = props.t;
-			const anchor = unreadPanelAnchor;
+			/** Which of the two lists this render is: same shell, different rows. */
+			const running = mode === "running";
+			const anchor = panelAnchor;
 			// Measured, not assumed: the panel has to clear whatever width the sidebar
 			// currently has (it is resizable and collapsible).
 			let sidebarRight = null;
@@ -2203,8 +3108,12 @@ window.__ModuleLoader__.load({
 				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"
 			};
-			const items = Array.isArray(snapshot.items) ? snapshot.items : [];
-			const ackTargets = unreadAckTargets(items);
+			// The rows of whichever list is open. Both carry `{ id, title, where }`;
+			// only the unread ones carry an ending to acknowledge.
+			const items = running
+				? (Array.isArray(snapshot.runningItems) ? snapshot.runningItems : [])
+				: (Array.isArray(snapshot.items) ? snapshot.items : []);
+			const ackTargets = running ? [] : unreadAckTargets(items);
 			/**
 			 * Acknowledge every turn-end row at once.
 			 *
@@ -2218,12 +3127,12 @@ window.__ModuleLoader__.load({
 				if (!changed) return;
 				saveSeenState();
 				emitUnreadPoke();
-				if (ackTargets.length === items.length) emitUnreadPanel(false);
+				if (ackTargets.length === items.length) emitPanel(null);
 			};
-			return React.createElement("div", { "data-icon-custom-unread": "1", style },
-				React.createElement("div", { style: { fontWeight: 600, padding: "2px 6px 8px" } }, t("unreadPanelTitle")),
+			return React.createElement("div", { "data-icon-custom-panel": "1", style },
+				React.createElement("div", { style: { fontWeight: 600, padding: "2px 6px 8px" } }, t(running ? "runningPanelTitle" : "unreadPanelTitle")),
 				items.length === 0
-					? React.createElement("div", { style: { padding: "2px 6px 8px", opacity: 0.7 } }, t("unreadPanelEmpty"))
+					? React.createElement("div", { style: { padding: "2px 6px 8px", opacity: 0.7 } }, t(running ? "runningPanelEmpty" : "unreadPanelEmpty"))
 					: 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" } },
@@ -2231,11 +3140,11 @@ window.__ModuleLoader__.load({
 							),
 							group.items.map((item) => React.createElement("button", {
 								key: item.id, type: "button",
-								onClick: () => { emitUnreadPanel(false); props.onOpen(item.id); },
+								onClick: () => { emitPanel(null); props.onOpen(item); },
 								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" } }, unreadRowSubtitle(item, hostNow(), t))
+								React.createElement("span", { style: { display: "block", opacity: 0.6, fontSize: "11px" } }, running ? runningRowSubtitle(item, t) : unreadRowSubtitle(item, hostNow(), t))
 							))
 						))
 					),
@@ -2249,6 +3158,28 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+		/**
+		 * The two brand-mark pill sizes.
+		 *
+		 * A 24px mark cannot hold two full-size numbers, and drawing one big and one
+		 * small reads as a rendering bug rather than a design. So when BOTH are shown
+		 * they are drawn at one common edge — the largest that still fits them stacked
+		 * — while a pill shown alone keeps the normal size. Pure, so the rule is
+		 * testable without React.
+		 * @param size - the mark's edge in px.
+		 * @param scale - the badge-size multiplier from the setting.
+		 * @param hasUnread - whether the unread pill is shown.
+		 * @param hasRunning - whether the running pill is shown.
+		 * @returns `{ unread, running }` pill edges in px.
+		 */
+		function brandPillEdges(size, scale, hasUnread, hasRunning) {
+			const edge = Math.max(12, Math.round(size * 0.5 * scale));
+			if (hasUnread !== true || hasRunning !== true) return { unread: edge, running: edge };
+			// Half the mark each, minus the seam between them.
+			const shared = Math.max(9, Math.floor((size - 2) / 2));
+			return { unread: shared, running: shared };
+		}
+
 		/**
 		 * Sidebar brand-mark occupant (registered on the official
 		 * `sidebar.brand.mark` single seat). Shows the custom icon when the
@@ -2280,15 +3211,18 @@ window.__ModuleLoader__.load({
 				alt: "",
 				style
 			});
-			// No badge: keep the exact original element (no wrapper, no layout risk).
-			if (badge.count <= 0) return img;
-			const edge = Math.max(12, Math.round(size * 0.5 * badgeScale(badge.size)));
-			const label = `${badgeLabel(badge.count)} pending (test)`;
-			return React.createElement("span", {
-				style: { position: "relative", display: "inline-flex", width: size, height: size, flex: "none" }
-			},
-				img,
-				React.createElement("span", {
+			// No mark at all: keep the exact original element (no wrapper, no layout risk).
+			const runningCount = normalizeCount(badge.running);
+			if (badge.count <= 0 && runningCount <= 0) return img;
+			// Two independent facts, two corners: the unread count owns the top-right
+			// (where it has always been), the running count takes the bottom-right.
+			const edges = brandPillEdges(size, badgeScale(badge.size), badge.count > 0, runningCount > 0);
+			const edge = edges.unread;
+			const children = [img];
+			if (badge.count > 0) {
+				const label = `${badgeLabel(badge.count)} pending (test)`;
+				children.push(React.createElement("span", {
+					key: "unread",
 					title: label,
 					"aria-label": label,
 					style: {
@@ -2312,8 +3246,43 @@ window.__ModuleLoader__.load({
 						fontVariantNumeric: "tabular-nums",
 						pointerEvents: "none"
 					}
-				}, badgeLabel(badge.count))
-			);
+				}, badgeLabel(badge.count)));
+			}
+			if (runningCount > 0) {
+				const label = `${badgeLabel(runningCount)} running`;
+				// Same edge as the unread pill whenever both are shown (see
+				// brandPillEdges): a big red beside a small yellow reads as broken.
+				const runEdge = edges.running;
+				children.push(React.createElement("span", {
+					key: "running",
+					title: label,
+					"aria-label": label,
+					style: {
+						position: "absolute",
+						bottom: 0,
+						right: 0,
+						minWidth: runEdge,
+						height: runEdge,
+						padding: "0 2px",
+						boxSizing: "border-box",
+						borderRadius: 999,
+						background: RUNNING_YELLOW,
+						color: "#1f1f1f",
+						border: "1.5px solid var(--dsw-alias-bg-layer-1, #fff)",
+						fontSize: Math.max(7, Math.round(runEdge * 0.62)),
+						fontWeight: 700,
+						lineHeight: 1,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						fontVariantNumeric: "tabular-nums",
+						pointerEvents: "none"
+					}
+				}, badgeLabel(runningCount)));
+			}
+			return React.createElement("span", {
+				style: { position: "relative", display: "inline-flex", width: size, height: size, flex: "none" }
+			}, children);
 		}
 
 		function FaviconSection(props) {
@@ -2330,9 +3299,35 @@ window.__ModuleLoader__.load({
 			const [badgeSourceValue, setBadgeSourceValue] = React.useState(badgeSource);
 			const [unread, setUnread] = React.useState(unreadConfig);
 			React.useEffect(() => subscribeUnreadConfig(setUnread), []);
+			// Its own switch and its own endpoint pair: the running marks must be
+			// switchable without touching the unread rule (see lib/running.js).
+			const [running, setRunning] = React.useState(runningConfig);
+			React.useEffect(() => subscribeRunningConfig(setRunning), []);
 			// Sampled when the section mounts, which is the moment the user is
 			// looking at it. It reports local facts only (see badgeCapabilityProbe).
 			const [appBadgeProbe] = React.useState(() => appBadgeEnv());
+			// Live, unlike the capability probe above: the notifications permission
+			// can move outside this page (System Settings, another tab's prompt), and
+			// on WebKit the badge follows it.
+			const [notificationProbe, setNotificationProbe] = React.useState(() => notificationPermissionEnv());
+			const [permissionBusy, setPermissionBusy] = React.useState(false);
+			// A permission granted while the page is open is the WebKit precondition
+			// the badge was missing: every earlier call was dropped while there was
+			// no permission to draw it, so re-assert the number the page already shows.
+			const onPermissionChanged = React.useCallback((next) => {
+				setNotificationProbe(next);
+				if (next.state === "granted") reconcileAppBadge(true);
+			}, []);
+			React.useEffect(() => subscribeNotificationPermission(onPermissionChanged), [onPermissionChanged]);
+			// Called straight from the click: the prompt needs a user gesture, so it
+			// must never be moved into an effect.
+			const onRequestPermission = React.useCallback(() => {
+				setPermissionBusy(true);
+				requestNotificationPermission().then((next) => {
+					setPermissionBusy(false);
+					onPermissionChanged(next);
+				});
+			}, [onPermissionChanged]);
 			// Draft text for the delay box: typing must not save on every keystroke,
 			// and the box has to show the CLAMPED value once the save lands (type
 			// 99999 and it settles on the 600 cap instead of lying about it).
@@ -2402,8 +3397,11 @@ window.__ModuleLoader__.load({
 			const saveUnreadRule = React.useCallback((patch) => {
 				const next = normalizeUnreadConfig({ ...unreadConfig, ...patch });
 				emitUnreadConfig(next);
+				// Every field is sent explicitly, and the host replaces its copy with what
+				// arrives — so a field missing HERE is a field that silently reverts to its
+				// default on the next page load, however well the local toggle worked.
 				rpc.call("/api", "iconCustom/setUnreadRule", {
-					args: { request: { reasons: next.reasons, pending: next.pending, workspaceDot: next.workspaceDot, appBadge: next.appBadge, clearDelaySec: next.clearDelaySec } }
+					args: { request: { reasons: next.reasons, pending: next.pending, workspaceDot: next.workspaceDot, appBadge: next.appBadge, clearDelaySec: next.clearDelaySec, revealOnOpen: next.revealOnOpen } }
 				}).catch(() => {});
 			}, [rpc]);
 			// Toggle one unread reason. Applies locally at once; the host keeps the
@@ -2418,11 +3416,29 @@ window.__ModuleLoader__.load({
 			const onWorkspaceDotToggle = React.useCallback((checked) => {
 				saveUnreadRule({ workspaceDot: checked });
 			}, [saveUnreadRule]);
+			// The second fragile piece's own fuse (see the reveal region): locating a
+			// clicked session drives the shipped sidebar rows.
+			const onRevealToggle = React.useCallback((checked) => {
+				saveUnreadRule({ revealOnOpen: checked });
+			}, [saveUnreadRule]);
 			// The system-icon projection of the same number. Saved through the same
 			// one save path, so this field can never be dropped by a caller.
 			const onAppBadgeToggle = React.useCallback((checked) => {
 				saveUnreadRule({ appBadge: checked });
 			}, [saveUnreadRule]);
+			// Same "one save path, merged onto the current config" discipline as the
+			// unread rule, on its own endpoint: enabling or disabling the yellow marks
+			// applies locally at once and is persisted for the next page load.
+			const saveRunningRule = React.useCallback((patch) => {
+				const next = normalizeRunningConfig({ ...runningConfig, ...patch });
+				emitRunningConfig(next);
+				rpc.call("/api", "iconCustom/setRunningRule", {
+					args: { request: { enabled: next.enabled } }
+				}).catch(() => {});
+			}, [rpc]);
+			const onRunningMarkToggle = React.useCallback((checked) => {
+				saveRunningRule({ enabled: checked });
+			}, [saveRunningRule]);
 			// Seconds you must stay in a session before it counts as read; 0 = as soon
 			// as you enter. Clamped by the shared normalizer, so a stray keystroke can
 			// never persist an absurd delay.
@@ -2657,6 +3673,7 @@ window.__ModuleLoader__.load({
 							style: { ...(badgeSizeValue === key ? style.btnPrimary : style.btn), padding: "4px 10px" }
 						}, t(key === "sm" ? "badgeSizeSmall" : key === "md" ? "badgeSizeMedium" : "badgeSizeLarge")))
 					),
+					React.createElement("div", { style: style.hint }, t("badgeSizeHint")),
 					React.createElement("div", { style: { marginTop: "12px" } },
 						React.createElement("div", { style: style.desc }, t("unreadReasonsLabel")),
 						React.createElement("div", { style: { display: "flex", flexWrap: "wrap", alignItems: "center" } },
@@ -2691,6 +3708,17 @@ window.__ModuleLoader__.load({
 						),
 						React.createElement("div", { style: style.hint }, t("workspaceDotHint"))
 					),
+					React.createElement("div", { style: { marginTop: "10px" } },
+						React.createElement("label", { style: { display: "inline-flex", alignItems: "center", gap: "6px", fontSize: 12, color: "var(--dsw-alias-label-primary)", cursor: "pointer" } },
+							React.createElement("input", {
+								type: "checkbox",
+								checked: unread.revealOnOpen !== false,
+								onChange: (event) => onRevealToggle(event.target.checked === true)
+							}),
+							React.createElement("span", null, t("revealLabel"))
+						),
+						React.createElement("div", { style: style.hint }, t("revealHint"))
+					),
 					React.createElement("div", { style: { marginTop: "10px" } },
 						React.createElement("label", { style: { display: "inline-flex", alignItems: "center", gap: "6px", fontSize: 12, color: "var(--dsw-alias-label-primary)", cursor: "pointer" } },
 							React.createElement("input", {
@@ -2703,10 +3731,40 @@ window.__ModuleLoader__.load({
 						React.createElement("div", { style: style.hint }, t("appBadgeHint")),
 						// What THIS device is — never a claim about the platform.
 						React.createElement("div", { style: style.hint }, t(appBadgeCapabilityKey(appBadgeProbe))),
+						// The WebKit precondition as a live local fact, plus the one
+						// gesture that can still decide it (button only while undecided).
+						React.createElement("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: "8px", marginTop: "8px" } },
+							React.createElement("span", { style: style.desc }, `${t("notificationPermissionLabel")}${t(notificationPermissionKey(notificationProbe))}`),
+							notificationPermissionRequestable(notificationProbe)
+								? React.createElement("button", {
+									type: "button",
+									style: { ...style.btn, ...(permissionBusy ? style.btnDisabled : null) },
+									disabled: permissionBusy,
+									onClick: onRequestPermission
+								}, t("notificationPermissionButton"))
+								: null
+						),
+						React.createElement("div", { style: style.hint }, t("notificationPermissionHint")),
 						React.createElement("div", { style: style.hint }, t("appBadgeFootnote"))
 					),
 					React.createElement("div", { style: style.hint }, t("badgeTestHint"))
 				),
+				// A second, independent feature in its own block: same settings page,
+				// same save discipline, different fact.
+				React.createElement("div", { style: { borderTop: "1px solid var(--dsw-alias-border-l2)", marginTop: "12px", paddingTop: "12px" } },
+					React.createElement("div", { style: style.label }, t("runningMarkSection")),
+					React.createElement("div", { style: { marginTop: "8px" } },
+						React.createElement("label", { style: { display: "inline-flex", alignItems: "center", gap: "6px", fontSize: 12, color: "var(--dsw-alias-label-primary)", cursor: "pointer" } },
+							React.createElement("input", {
+								type: "checkbox",
+								checked: running.enabled !== false,
+								onChange: (event) => onRunningMarkToggle(event.target.checked === true)
+							}),
+							React.createElement("span", null, t("runningMarkLabel"))
+						),
+						React.createElement("div", { style: style.hint }, t("runningMarkHint"))
+					)
+				),
 				notice ? React.createElement("div", { style: style.notice }, notice) : null,
 				error ? React.createElement("div", { style: style.error }, error) : null
 			);
@@ -2748,6 +3806,14 @@ window.__ModuleLoader__.load({
 					scheduleHostSync();
 				})
 				.catch(() => {});
+			// The running-mark switch rides its own endpoint, for the same reason it has
+			// its own file: a problem in either feature must not touch the other.
+			rpc.call("/api", "iconCustom/getRunningRule", { args: {} })
+				.then((resp) => {
+					if (resp === null || typeof resp !== "object" || resp.ok !== true) return;
+					emitRunningConfig(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(() => {
@@ -2816,7 +3882,7 @@ window.__ModuleLoader__.load({
 			// The badge itself is NOT a slot occupant: it is injected into the
 			// sidebar's section header by `paintHeaderBadge()` (see above), because
 			// `sidebar.workspaces` is a single slot covering the whole region. Only
-			// the list it opens still rides a slot — the frame-wide overlay, which
+			// the lists they open still ride a slot — the frame-wide overlay, which
 			// escapes the sidebar's clipping.
 			//
 			// 0.2.x has no `ctx.sessions.open(id)` (the ClientSessions service exposes
@@ -2825,15 +3891,23 @@ window.__ModuleLoader__.load({
 			// `ctx.uiWorkspace.openSession(id)` (ui-chat does exactly this), so the entry
 			// is looked up optionally: navigation is best effort and must never make the
 			// favicon half depend on the workspace UI being mounted.
-			const openSession = (id) => {
+			const openSession = (row) => {
+				// A list row (`{ id, workspaceId, … }`) since 0.19.0: the workspace is what
+				// the sidebar reveal needs, and the pending list cannot supply it later. A
+				// bare id still opens the session — it just cannot expand anything.
+				const id = row !== null && typeof row === "object" ? row.id : row;
+				const workspaceId = row !== null && typeof row === "object" && typeof row.workspaceId === "string" ? row.workspaceId : "";
 				try { ctx.get("uiWorkspace")?.openSession(id); } catch { /* navigation is best effort */ }
+				// Deliberately not awaited, and never allowed to matter: the session is open
+				// either way (see the reveal region for why this is all best effort).
+				void revealSessionRow(id, workspaceId);
 			};
 			// The injected node labels itself for screen readers, so it needs the
 			// locale binder that only exists inside `apply()`.
 			badgeT = t;
 			ctx.slots.inject("shell.overlay", () => ctx.slots.register(
-				{ name: "shell.overlay", id: "icon-custom-unread-popup", order: 30 },
-				() => React.createElement(UnreadPopup, { t, onOpen: openSession })
+				{ name: "shell.overlay", id: "icon-custom-header-popup", order: 30 },
+				() => React.createElement(HeaderPopup, { t, onOpen: openSession })
 			));
 
 			// Real number source: a headless occupant of the frame-wide overlay
@@ -2922,14 +3996,22 @@ window.__ModuleLoader__.load({
 				if (!attach()) retry = window.setInterval(() => { if (attach()) window.clearInterval(retry); }, 1000);
 				const offDots = subscribeSidebarMarks(schedule);
 				const offConfig = subscribeUnreadConfig(schedule);
+				// The running marks ride the same paint pass, so their switch has to wake
+				// it too — otherwise turning it off would leave the marks until the next
+				// unrelated repaint.
+				const offRunning = subscribeRunningConfig(schedule);
 				return () => {
 					if (retry !== 0) window.clearInterval(retry);
 					if (workspaceDotVerify !== 0) { window.clearTimeout(workspaceDotVerify); workspaceDotVerify = 0; }
 					if (observer !== null) observer.disconnect();
 					offDots();
 					offConfig();
+					offRunning();
 					clearWorkspaceDots();
 					clearHeaderBadge();
+					// The one highlight this plugin ever puts on a SHIPPED row: it must not
+					// outlive the plugin, even if the unload lands inside its flash window.
+					clearRevealFlash();
 				};
 			}, "dsh-icon-custom: workspace dots");
 			// The platform favicon.svg repaints itself for dark mode through