dsh-workspace-session-filter 1.0.0 → 1.0.3

package/README.md

@@ -4,20 +4,20 @@
 
 给 DSH 侧边栏加两个入口：
 
-1. **工作区标题行里的两个小图标** —— 就在放大镜左边、与原生按钮之间隔一条细分隔线，
-   分别是 `运行中` 与 `待确认`（各自带命中数角标）。点一下在下方弹出按工作区分组的
-   会话列表，点行直接进会话，是日常主入口；
+1. **侧边栏底部的筛选条** —— 设置按钮上方单独一行，`运行中` / `待确认` / `未读` 三个
+   chip（各自带命中数）。点一下向上弹出按工作区分组的会话列表，点行直接进会话，是日常主入口；
 2. 侧边栏面板列表里的「会话筛选」图标 —— 打开中间栏的完整视图，顶部是
-   `全部 / 运行中 / 等待确认 / 更多` 筛选器，`更多` 里是 `最近一天 / 最近三天 /
+   `全部 / 运行中 / 等待确认 / 未读 / 更多` 筛选器，`更多` 里是 `最近一天 / 最近三天 /
    最近一周 / 最近一个月`（外加 `不限时间`）。
 
 ## 功能
 
-- **按状态筛选**：标题行只放 `运行中`（含子智能体仍在跑）与 `待确认`（审批、计划
-  审阅、待回答）两个图标，各自带当前命中数；完整面板另有 `全部` 用于浏览。
-- **就在手边**：点图标在下方弹出按工作区分组的列表，点行直接进会话，再点同一个图标收起；
-  侧边栏收成窄条、或搜索框展开时隐藏（那两种状态下原生按钮也会让位）。若连标题行都
-  定位不到（例如上游改了结构），自动退回侧边栏左下角的 chip 条，功能不会消失。
+- **按状态筛选**：底部只放三个 chip —— `运行中`（含子智能体仍在跑）、`待确认`（审批、
+  计划审阅、待回答）、`未读`（跑完但没看，或最近有新内容你没打开过），各自带当前命中数；
+  完整面板另有 `全部` 用于浏览。
+- **就在手边**：点 chip 向上弹出按工作区分组的列表，点行直接进会话，再点同一个 chip 收起；
+  侧边栏收成窄条时换成带合计角标的圆形按钮，展开后同样能筛。
+- **单独一行**：筛选条占满侧边栏那一行，不和成本计等其他底部条目挤在一起。
 - **按时间筛选**：`更多` 下拉里的四个时间窗，基于会话的 `updatedAt`；选中后 `更多`
   按钮直接显示当前时间窗名称，再点一次可改回 `不限时间`。
 - **组合筛选**：状态与时间可叠加，右侧出现 `清除筛选` 一次复位。
@@ -50,11 +50,14 @@ profile 目录里的 pnpm，装完再读包里的 `dsh.bundle.patch` 自动登
 `dsh.profile.bundles`，因此不用手改 profile 的 `package.json`）：
 
 ```bash
+# 从 npm registry 装（1.0.1 起可用，最省事）
+dsh plugin --profile desktop add dsh-workspace-session-filter
+
 # 从 GitHub 装（pnpm 会锁定解析到的 commit）
 dsh plugin --profile desktop add github:shijiewang/dsh-workspace-session-filter
 
 # 固定到某个标签
-dsh plugin --profile desktop add github:shijiewang/dsh-workspace-session-filter#v1.0.0
+dsh plugin --profile desktop add github:shijiewang/dsh-workspace-session-filter#v1.0.1
 
 # 或者直接用本仓库的绝对路径（装成 link: 依赖，改文件后刷新即生效）
 dsh plugin --profile desktop add /absolute/path/to/dsh-workspace-session-filter
@@ -76,19 +79,20 @@ dsh plugin --profile desktop remove dsh-workspace-session-filter
 
 装好后：
 
-- 侧边栏**左下角**（设置按钮上方）出现 `运行中 N` / `待确认 N` 筛选条；
+- 侧边栏**底部**（设置按钮上方、单独一行）出现 `运行中 N` / `待确认 N` / `未读 N` 筛选条；
 - 侧边栏面板列表里出现「会话筛选」图标，指向中间栏的完整视图。
 
 卸载：`plugin_manager({ action: "remove_bundle", target: "dsh-workspace-session-filter" })`。
 
-> 包名 `dsh-workspace-session-filter` 与仓库同名，`dsh plugin` 用 git spec、tarball 或
-> 目录路径都能装；发布到 npm registry 后，也可以直接把包名交给 `dsh plugin add`。
+> 包名 `dsh-workspace-session-filter` 与仓库同名。截至 1.0.3，npm registry、
+> GitHub、release tarball、本地目录四种来源都能装；registry 上是 `npm publish` 发出的
+> 正式版本，`repository` 字段指回本仓库。
 
 ## 结构
 
 | 文件 | 作用 |
 | --- | --- |
-| `client.js` | 全部界面逻辑：字典、图标、左下筛选条 + 面板 + 侧边栏图标三个 slot 注册、内联样式 |
+| `client.js` | 全部界面逻辑：字典、图标、底部筛选条 + 面板 + 侧边栏图标三个 slot 注册、内联样式 |
 | `index.js` | Host 半边（本插件不需要 Host 能力，留空） |
 | `cordis.patch.yml` | 把 `session-filter` 条目插入 profile 组合 |
 | `package.json` | 包元信息 + `dsh.client` / `dsh.bundle` 声明 |
@@ -100,18 +104,21 @@ dsh plugin --profile desktop remove dsh-workspace-session-filter
 - **面板落位**：`sidebar.panellist` 的 `id` 与 `main` 的 `key` 复用同一个字符串
   `session-filter`，侧边栏图标因此直接指向本面板；`order: 30` 排在插件、定时任务、
   上下文之后。
-- **标题行落位**：`sidebar.workspaces` 是单例插槽且没有标题行插槽，所以两个图标注册在
-  `sidebar.footer.action`（一个 0 尺寸的挂载点），再用 `position: fixed` 覆盖到测得的标题行
-  位置：`[data-slot="sidebar.workspaces"] [class*="_sectionHeader"]` 与其中
-  `[class*="_searchSlot"]` 的 `getBoundingClientRect()` 决定 `top` 与 `right`。类名后缀由
-  CSS Modules 稳定提供（前缀哈希会变），配合 `MutationObserver` + `resize` 跟随折叠、
-  搜索展开与窗口缩放；测不到就退回 `sidebar.footer.action` 的常规 chip 条。
+- **筛选条落位**：注册在 `sidebar.footer.action`（设置按钮上方的一行槽位），整条占满宽度；
+  弹层用 `position: fixed` 贴在 chip 上方（`bottom: innerHeight - rect.top + 8`），因为侧边栏
+  容器 `overflow` 会裁掉绝对定位的浮层。宽版渲染三个 chip，窄条（`wide: false`）渲染一个
+  36px 圆按钮，角标是三个数字之和。
 - **数据来源**：`main` slot 提供的标准 props — `useSessions`（会话快照）、
   `useWorkspaces`（工作区快照）、`useSessionStatus`（状态 Map），全部是
   `SnapshotSelectorHook`，必须传 selector。
 - **样式**：只用 `--dsw-alias-*` / `--dsw-*` 设计令牌，数值对齐内置列表页
   （960px 内容宽、`clamp(24px,4vw,48px)` 内边距、28px chip、32px 行高、菜单 4px 内衬
   + `--dsw-elevation-prominent`），类名前缀 `dwsf-`。
+- **未读的判定**：两个来源叠加 —— ① 状态 Map 里的 `completionUnread`（内置列表画完成点的
+  同一个信号，覆盖"跑完没看"）；② 本插件自己记的"最后查看时间表"，存 `localStorage`
+  （key `dsh-workspace-session-filter:seen.v1`），会话 `updatedAt` 比它新就算有新内容。
+  维护方式：当前打开的会话每次渲染都刷新时间戳，点任意行也算读过，首次见到的会话先建基线
+  （所以新装不会满屏未读）。`未读` 与 `运行中`/`待确认` 互斥计数，行右侧会多出 `未读` 文案。
 - **容错**：面板与左下筛选条各包一层错误边界（`PanelBoundary` / `FooterBoundary`），
   渲染异常时分别退化成空状态 / 什么都不渲染，不会让中间栏变白或拖坏侧边栏；
   标准 hooks 缺失时先打日志再降级。
@@ -122,7 +129,7 @@ dsh plugin --profile desktop remove dsh-workspace-session-filter
 `sidebar.footer.action`、`sidebar.panellist` 与 `main` 三个宿主都已挂上
 `session-filter`（运行中的页面里生效）。
 再用一个按树路径实现 hooks 的迷你 React 骨架渲染真实组件、驱动 chip 与下拉，
-覆盖了左下筛选条（chip 计数、弹层开合、行点击、窄条模式）与完整面板
+覆盖了底部筛选条（chip 计数、弹层开合、行点击、窄条模式）与完整面板
 （计数、分组、状态/时间筛选、菜单开合、空状态）两条路径的断言。
 
 DSH 的检查工具没有渲染/截图能力，所以像素级外观需要你在正在运行的窗口里点左侧

package/client.js

@@ -30,6 +30,7 @@ window.__ModuleLoader__.load({
       'filter.running': '运行中',
       'filter.awaiting': '等待确认',
       'filter.awaitingShort': '待确认',
+      'filter.unread': '未读',
       'filter.more': '更多',
       'filter.reset': '清除筛选',
       'filter.aria': '会话筛选条件',
@@ -68,6 +69,7 @@ window.__ModuleLoader__.load({
       'filter.running': 'Running',
       'filter.awaiting': 'Awaiting confirmation',
       'filter.awaitingShort': 'Awaiting',
+      'filter.unread': 'Unread',
       'filter.more': 'More',
       'filter.reset': 'Clear filters',
       'filter.aria': 'Session filters',
@@ -208,11 +210,79 @@ window.__ModuleLoader__.load({
       return parts.length > 0 ? parts[parts.length - 1] : ''
     }
 
+    /* ------------------------------------------------------------------ *
+     * Last-seen stamps
+     *
+     * The shipped status map only flags a turn that finished while the session
+     * was not on screen (`completionUnread`). Everything else that bumps a
+     * session — queued work, a subagent settling, an edit made elsewhere —
+     * leaves `updatedAt` moving without any flag, so the "unread" dimension
+     * remembers when this panel last saw a session and counts newer activity.
+     * The map lives in localStorage so it survives reloads; an unknown session
+     * is baselined on first sight, which keeps a fresh install quiet.
+     * ------------------------------------------------------------------ */
+    const SEEN_KEY = 'dsh-workspace-session-filter:seen.v1'
+    const seenCache = { loaded: false, map: {}, timer: null }
+
+    function seenStorage() {
+      try {
+        return typeof localStorage === 'undefined' ? null : localStorage
+      } catch (error) {
+        return null
+      }
+    }
+
+    function loadSeen() {
+      if (seenCache.loaded) return seenCache.map
+      seenCache.loaded = true
+      const store = seenStorage()
+      if (!store) return seenCache.map
+      try {
+        const parsed = JSON.parse(store.getItem(SEEN_KEY) || 'null')
+        if (parsed && typeof parsed === 'object') seenCache.map = parsed
+      } catch (error) {
+        seenCache.map = {}
+      }
+      return seenCache.map
+    }
+
+    function flushSeen() {
+      const store = seenStorage()
+      if (!store) return
+      try {
+        const ids = Object.keys(seenCache.map)
+        if (ids.length > 400) {
+          ids.sort((left, right) => (seenCache.map[right] || 0) - (seenCache.map[left] || 0))
+          for (const id of ids.slice(400)) delete seenCache.map[id]
+        }
+        store.setItem(SEEN_KEY, JSON.stringify(seenCache.map))
+      } catch (error) {
+        /* quota or private mode: the bookkeeping is best effort */
+      }
+    }
+
+    function markSeen(sessionId, stamp) {
+      if (!(stamp > 0)) return
+      const map = loadSeen()
+      const previous = map[sessionId]
+      if (previous !== undefined && previous >= stamp) return
+      map[sessionId] = stamp
+      if (seenCache.timer === null && typeof setTimeout === 'function') {
+        seenCache.timer = setTimeout(() => { seenCache.timer = null; flushSeen() }, 400)
+      }
+    }
+
     /** One flat row model, mirroring the shipped sidebar's status precedence. */
-    function buildRow(summary, status, subagents, t) {
+    function buildRow(summary, status, subagents, t, lastSeen) {
       const kind = pendingKindOf(status)
       const running = status && status.running !== undefined ? status.running === true : Boolean(summary.running)
       const completed = Boolean(status && status.completionUnread === true)
+      const activityNew = completed !== true
+        && kind === undefined
+        && running !== true
+        && subagents === 0
+        && lastSeen !== undefined
+        && (Number(summary.updatedAt) || 0) > lastSeen
       let dot = 'idle'
       let label = ''
       if (kind !== undefined) {
@@ -228,6 +298,9 @@ window.__ModuleLoader__.load({
         label = t('status.subagentsRunning', { n: subagents })
       } else if (completed) {
         dot = 'done'
+        label = t('filter.unread')
+      } else if (activityNew) {
+        label = t('filter.unread')
       }
       return {
         id: summary.id,
@@ -238,6 +311,7 @@ window.__ModuleLoader__.load({
         label,
         awaiting: kind !== undefined,
         running: running || subagents > 0,
+        unread: completed || activityNew,
       }
     }
 
@@ -266,17 +340,27 @@ window.__ModuleLoader__.load({
         if (archived.has(summary.id)) continue
         if (cutoff && !(summary.updatedAt >= cutoff)) continue
         const status = statuses ? statuses.get(summary.id) : undefined
-        const row = buildRow(summary, status, runningSubagents(list, summary.id, statuses || new Map()), t)
+        const stamp = Number(summary.updatedAt) || 0
+        const seen = loadSeen()
+        let lastSeen = seen[summary.id]
+        if (summary.id === currentId || lastSeen === undefined) {
+          markSeen(summary.id, stamp)
+          if (lastSeen === undefined) lastSeen = stamp
+        }
+        const row = buildRow(summary, status, runningSubagents(list, summary.id, statuses || new Map()), t, lastSeen)
         rows.set(summary.id, row)
         base.push(row)
       }
 
       const matches = (row) => statusFilter === 'all'
-        || (statusFilter === 'running' ? row.running : row.awaiting)
+        || (statusFilter === 'running' ? row.running
+          : statusFilter === 'awaiting' ? row.awaiting
+            : row.unread)
       const counts = {
         all: base.length,
         running: base.filter((row) => row.running).length,
         awaiting: base.filter((row) => row.awaiting).length,
+        unread: base.filter((row) => row.unread).length,
       }
 
       const groups = []
@@ -502,7 +586,10 @@ window.__ModuleLoader__.load({
 
       const now = Date.now()
       const view = deriveView(props, statusFilter, range, now)
-      const onOpen = props.onOpen
+      const onOpen = (sessionId) => {
+        markSeen(sessionId, Date.now())
+        props.onOpen(sessionId)
+      }
       const filtered = statusFilter !== 'all' || range !== null
 
       return h('div', { className: 'dwsf-page' },
@@ -526,6 +613,10 @@ window.__ModuleLoader__.load({
                 label: t('filter.awaiting'), count: view.counts.awaiting, active: statusFilter === 'awaiting',
                 onClick: () => setStatusFilter(statusFilter === 'awaiting' ? 'all' : 'awaiting'),
               }),
+              h(FilterTab, {
+                label: t('filter.unread'), count: view.counts.unread, active: statusFilter === 'unread',
+                onClick: () => setStatusFilter(statusFilter === 'unread' ? 'all' : 'unread'),
+              }),
               filtered
                 ? h('button', {
                     type: 'button',
@@ -572,238 +663,10 @@ window.__ModuleLoader__.load({
       return h(PanelBoundary, { t }, h(SessionFilterPage, props))
     }
 
-    /* ---------------------------------------------------------------- header */
-
-    const HEADER_SLOT_SELECTOR = '[data-slot="sidebar.workspaces"]'
-
-    /**
-     * ui-workspace owns the workspace section header (label, magnifier, view
-     * options, add) and exposes no slot inside it, so the filter icons are placed
-     * over the measured row: immediately left of the search box, with a hairline
-     * before the native controls. Returns null when the row cannot be measured —
-     * the caller then falls back to the sidebar-foot bar.
-     */
-    function measureHeaderSpot() {
-      if (typeof document === 'undefined' || typeof window === 'undefined') return null
-      if (typeof document.querySelector !== 'function') return null
-      const slot = document.querySelector(HEADER_SLOT_SELECTOR)
-      let header = (slot && typeof slot.querySelector === 'function')
-        ? slot.querySelector('[class*="_sectionHeader"]')
-        : null
-      /* Secondary probe: the region outlet may be renamed upstream, but the header
-         class suffix belongs to this package only. */
-      if (!header) header = document.querySelector('[class*="_sectionHeader"]')
-      if (!header || typeof header.getBoundingClientRect !== 'function') return null
-      const search = header.querySelector('[class*="_searchSlot"]')
-      if (!search || typeof search.getBoundingClientRect !== 'function') return null
-      const rect = header.getBoundingClientRect()
-      const searchRect = search.getBoundingClientRect()
-      if (!rect || !(rect.height >= 24)) return null
-      /* Rail (collapsed sidebar) and the expanded search box own that row: hide
-         rather than fall back, so nothing pops up at the sidebar foot. */
-      if (!(rect.width >= 150)) return { hidden: true }
-      if (header.querySelector('[class*="_searchSlotExpanded"]')) return { hidden: true }
-      const top = Math.round(rect.top + (rect.height - 28) / 2)
-      const right = Math.round(window.innerWidth - searchRect.left + 6)
-      if (!(top > -40) || !(right > 0)) return null
-      return { top, right }
-    }
-
-    /** A dashed running circle: the header twin of the shipped ongoing status dot. */
-    function RunningGlyph(props) {
-      const size = props.size || 14
-      return h('svg', { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': 'true', focusable: 'false' },
-        h('circle', {
-          cx: 8, cy: 8, r: 5.5,
-          stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeDasharray: '6.2 4.2',
-        }),
-        h('path', {
-          d: 'M11.4 3.4l.2 2.4-2.4-.2',
-          stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round',
-        })
-      )
-    }
-
-    /** A circled exclamation: a session that is waiting on an answer. */
-    function WaitingGlyph(props) {
-      const size = props.size || 14
-      return h('svg', { width: size, height: size, viewBox: '0 0 16 16', fill: 'none', 'aria-hidden': 'true', focusable: 'false' },
-        h('circle', { cx: 8, cy: 8, r: 5.6, stroke: 'currentColor', strokeWidth: 1.4 }),
-        h('path', { d: 'M8 4.9v3.5', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round' }),
-        h('circle', { cx: 8, cy: 11.1, r: 0.9, fill: 'currentColor' })
-      )
-    }
-
-    /** Shared popover: workspace-grouped sessions for one filter. */
-    function FilterPopover(props) {
-      const t = props.t
-      const view = props.view
-      return h('section', {
-        className: 'dwsf-pop',
-        style: props.style,
-        role: 'dialog',
-        'aria-label': t('panel.label'),
-      },
-        h('header', { className: 'dwsf-popHead' },
-          h('span', { className: 'dwsf-popTitle' }, t('panel.label')),
-          h('span', { className: 'dwsf-popCount' },
-            t('panel.summary', { n: view.total, w: view.groups.length }))
-        ),
-        props.filters || null,
-        h('div', { className: 'dwsf-popBody' },
-          view.loading
-            ? h('div', { className: 'dwsf-empty' }, h('div', null, t('empty.loading')))
-            : h(Groups, { view, t, now: props.now, onOpen: props.onOpen })
-        )
-      )
-    }
-
-    /**
-     * The two filter icons in the workspace section header. They read the same
-     * snapshot hooks as the panel, drop into the header row without touching the
-     * shipped component tree, and hide themselves while the sidebar is a rail or
-     * the search box is expanded (the native actions fade out there too).
-     */
-    function HeaderFilters(props) {
-      const t = props.t
-      const [mode, setMode] = useState('running')
-      const [open, setOpen] = useState(false)
-      const [spot, setSpot] = useState(() => measureHeaderSpot())
-      const [anchor, setAnchor] = useState(undefined)
-      const layerRef = useRef(null)
-      const [, setTick] = useState(0)
-
-      useEffect(() => {
-        const timer = setInterval(() => setTick((value) => value + 1), 60000)
-        return () => clearInterval(timer)
-      }, [])
-
-      useEffect(() => {
-        let frame = 0
-        let warned = false
-        const measure = () => {
-          frame = 0
-          const next = measureHeaderSpot()
-          if (!next && !warned) {
-            warned = true
-            console.warn('[workspace-session-filter] workspace header not found; using the sidebar-foot bar')
-          }
-          if (next && next.hidden) setOpen(false)
-          setSpot((prev) => {
-            if (prev === next) return prev
-            if (prev && next && prev.hidden && next.hidden) return prev
-            if (prev && next && prev.top === next.top && prev.right === next.right) return prev
-            return next
-          })
-        }
-        const schedule = () => {
-          if (frame) return
-          frame = (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function')
-            ? window.requestAnimationFrame(measure)
-            : setTimeout(measure, 16)
-        }
-        measure()
-        if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') window.addEventListener('resize', schedule)
-        const slot = (typeof document !== 'undefined' && typeof document.querySelector === 'function')
-          ? document.querySelector(HEADER_SLOT_SELECTOR)
-          : null
-        const Observer = typeof window !== 'undefined' ? window.MutationObserver : undefined
-        const observer = (slot && typeof Observer === 'function') ? new Observer(schedule) : null
-        if (observer) observer.observe(slot, { attributes: true, attributeFilter: ['class', 'style'], subtree: true, childList: true })
-        return () => {
-          if (frame) {
-            if (typeof window !== 'undefined' && typeof window.cancelAnimationFrame === 'function') window.cancelAnimationFrame(frame)
-            else clearTimeout(frame)
-          }
-          if (typeof window !== 'undefined' && typeof window.removeEventListener === 'function') window.removeEventListener('resize', schedule)
-          if (observer) observer.disconnect()
-        }
-      }, [])
-
-      useEffect(() => {
-        if (!open) return undefined
-        const onPointerDown = (event) => {
-          const node = layerRef.current
-          if (node && event.target && typeof node.contains === 'function' && node.contains(event.target)) return
-          setOpen(false)
-        }
-        const onKeyDown = (event) => {
-          if (event.key !== 'Escape' || event.defaultPrevented) return
-          event.preventDefault()
-          setOpen(false)
-        }
-        document.addEventListener('pointerdown', onPointerDown, true)
-        document.addEventListener('keydown', onKeyDown, true)
-        return () => {
-          document.removeEventListener('pointerdown', onPointerDown, true)
-          document.removeEventListener('keydown', onKeyDown, true)
-        }
-      }, [open])
-
-      if (spot === null) return h(FooterBar, props)
-      if (spot === undefined || spot.hidden) return null
-
-      const now = Date.now()
-      const view = deriveView(props, mode, null, now)
-      const closeAndOpen = (sessionId) => {
-        setOpen(false)
-        props.onOpen(sessionId)
-      }
-      const openWith = (nextMode, event) => {
-        if (open && mode === nextMode) {
-          setOpen(false)
-          return
-        }
-        const node = event && event.currentTarget
-        setMode(nextMode)
-        if (node && typeof node.getBoundingClientRect === 'function' && typeof window !== 'undefined') {
-          const rect = node.getBoundingClientRect()
-          const width = Math.min(340, window.innerWidth - 24)
-          setAnchor({
-            left: Math.round(Math.max(12, Math.min(rect.left, window.innerWidth - width - 12))),
-            top: Math.round(rect.bottom + 8),
-          })
-        } else {
-          setAnchor({ left: 24, top: 120 })
-        }
-        setOpen(true)
-      }
-      const button = (key, label, count, glyph) => h('button', {
-        key,
-        type: 'button',
-        className: 'dwsf-headBtn',
-        'data-active': open && mode === key ? 'true' : 'false',
-        'aria-pressed': open && mode === key ? 'true' : 'false',
-        'aria-label': count > 0 ? label + ' · ' + count : label,
-        title: count > 0 ? label + ' · ' + count : label,
-        onClick: (event) => openWith(key, event),
-      },
-        glyph,
-        count > 0
-          ? h('span', { className: 'dwsf-headCount', 'data-tone': key === 'awaiting' ? 'warn' : 'calm', 'aria-hidden': 'true' }, String(count))
-          : null
-      )
-      const popover = open && anchor
-        ? h(FilterPopover, { t, view, now, onOpen: closeAndOpen, style: anchor })
-        : null
-      return h('div', { ref: layerRef, className: 'dwsf-headLayer' },
-        popover,
-        h('div', {
-          className: 'dwsf-headGroup',
-          style: { top: spot.top, right: spot.right },
-          role: 'group',
-          'aria-label': t('filter.aria'),
-        },
-          button('running', t('filter.running'), view.counts.running, h(RunningGlyph, { size: 14 })),
-          button('awaiting', t('filter.awaitingShort'), view.counts.awaiting, h(WaitingGlyph, { size: 14 })),
-          h('span', { className: 'dwsf-headDivider', 'aria-hidden': 'true' })
-        )
-      )
-    }
-
     /**
-     * Fallback bar (only when the workspace header cannot be measured): the two
-     * status filters sit at the sidebar foot and open the same popover.
+     * The sidebar-foot filter bar. Two chips cover the states worth interrupting a
+     * human for and expand a workspace-grouped popover upwards; a collapsed
+     * sidebar gets one icon button with a combined badge instead.
      */
     function FooterBar(props) {
       const t = props.t
@@ -881,6 +744,7 @@ window.__ModuleLoader__.load({
       const now = Date.now()
       const view = deriveView(props, mode, null, now)
       const onOpen = (sessionId) => {
+        markSeen(sessionId, Date.now())
         setOpen(false)
         props.onOpen(sessionId)
       }
@@ -899,7 +763,8 @@ window.__ModuleLoader__.load({
 
       const filters = h('div', { className: 'dwsf-footChips', role: 'group', 'aria-label': t('filter.aria') },
         chip('running', t('filter.running'), view.counts.running),
-        chip('awaiting', t('filter.awaitingShort'), view.counts.awaiting)
+        chip('awaiting', t('filter.awaitingShort'), view.counts.awaiting),
+        chip('unread', t('filter.unread'), view.counts.unread)
       )
 
       const popover = open && anchor !== undefined
@@ -924,7 +789,7 @@ window.__ModuleLoader__.load({
         : null
 
       if (!wide) {
-        const waiting = view.counts.running + view.counts.awaiting
+        const waiting = view.counts.running + view.counts.awaiting + view.counts.unread
         return h('div', { ref: rootRef, className: 'dwsf-footRail' },
           popover,
           h('button', {
@@ -954,7 +819,7 @@ window.__ModuleLoader__.load({
         console.error('[workspace-session-filter] snapshot hooks are unavailable on sidebar.footer.action', props)
         return null
       }
-      return h(FooterBoundary, null, h(HeaderFilters, props))
+      return h(FooterBoundary, null, h(FooterBar, props))
     }
 
     class FooterBoundary extends React.Component {
@@ -984,10 +849,7 @@ window.__ModuleLoader__.load({
 .dwsf-page{width:100%;min-width:0;height:100%;min-height:0;display:flex;overflow:hidden;color:var(--dsw-alias-label-primary);background:var(--dsw-alias-bg-base);font-size:14px;line-height:1.6}
 .dwsf-scroll{flex:1;min-height:0;overflow:auto;scrollbar-gutter:stable;--dsh-scrollbar-width:9px;--dsh-scrollbar-thumb-border:2px}
 .dwsf-content{max-width:960px;margin:0 auto;padding:0 clamp(24px,4vw,48px) 48px}
-.dwsf-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px;padding-top:28px}
 [data-platform=darwin] .dwsf-heading{padding-top:calc(28px + var(--dsh-frame-top-clearance,0px))}
-.dwsf-heading h1{min-width:0;max-width:100%;margin:0;font-size:20px;font-weight:500;line-height:28px}
-.dwsf-headingMeta{flex:none;color:var(--dsw-alias-label-secondary);font-size:13px;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums}
 .dwsf-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px}
 .dwsf-filter{height:28px;display:inline-flex;align-items:center;gap:5px;flex:none;padding:0 10px;border:0;border-radius:14px;background:0 0;color:var(--dsw-alias-label-tertiary);font:inherit;font-size:14px;line-height:22px;white-space:nowrap;cursor:pointer}
 .dwsf-filter:hover{background:var(--dsw-alias-interactive-bg-hover)}
@@ -1064,15 +926,6 @@ window.__ModuleLoader__.load({
 .dwsf-popBody{flex:1;min-height:0;padding:0 8px 10px;overflow:auto;--dsh-scrollbar-width:9px}
 .dwsf-pop .dwsf-groupHead{padding:10px 8px 4px}
 .dwsf-pop .dwsf-empty{padding:28px 16px}
-.dwsf-headLayer{position:static;display:block;width:0;height:0;overflow:visible}
-.dwsf-headGroup{position:fixed;z-index:55;display:flex;align-items:center;gap:2px;height:28px;pointer-events:auto}
-.dwsf-headBtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:var(--dsw-radius-sm);background:0 0;color:var(--dsw-alias-label-secondary);cursor:pointer}
-.dwsf-headBtn:hover{background:var(--dsw-alias-interactive-bg-hover)}
-.dwsf-headBtn[data-active="true"]{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}
-.dwsf-headBtn:focus-visible{outline:var(--dsw-focus-ring-width,2px) solid var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline-offset:-2px}
-.dwsf-headCount{position:absolute;top:0;right:-1px;min-width:12px;height:12px;padding:0 3px;border-radius:999px;background:var(--dsw-specific-sidebar-fill);color:var(--dsw-alias-label-tertiary);font-size:9px;line-height:12px;text-align:center;font-variant-numeric:tabular-nums}
-.dwsf-headCount[data-tone="warn"]{color:var(--dsw-alias-state-warn-primary)}
-.dwsf-headDivider{flex:none;width:.5px;height:16px;margin-left:6px;background:var(--dsw-alias-border-l2)}
 `
 
     /* ------------------------------------------------------------------ *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-workspace-session-filter",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "Workspace session filter panel with status and recency filters.",
   "type": "module",
   "exports": {