dsh-workspace-session-filter 1.0.0 → 1.0.1

package/README.md

@@ -4,20 +4,19 @@
 
 给 DSH 侧边栏加两个入口：
 
-1. **工作区标题行里的两个小图标** —— 就在放大镜左边、与原生按钮之间隔一条细分隔线，
-   分别是 `运行中` 与 `待确认`（各自带命中数角标）。点一下在下方弹出按工作区分组的
-   会话列表，点行直接进会话，是日常主入口；
+1. **侧边栏底部的筛选条** —— 设置按钮上方单独一行，`运行中` 与 `待确认` 两个 chip
+   （各自带命中数）。点一下向上弹出按工作区分组的会话列表，点行直接进会话，是日常主入口；
 2. 侧边栏面板列表里的「会话筛选」图标 —— 打开中间栏的完整视图，顶部是
    `全部 / 运行中 / 等待确认 / 更多` 筛选器，`更多` 里是 `最近一天 / 最近三天 /
    最近一周 / 最近一个月`（外加 `不限时间`）。
 
 ## 功能
 
-- **按状态筛选**：标题行只放 `运行中`（含子智能体仍在跑）与 `待确认`（审批、计划
-  审阅、待回答）两个图标，各自带当前命中数；完整面板另有 `全部` 用于浏览。
-- **就在手边**：点图标在下方弹出按工作区分组的列表，点行直接进会话，再点同一个图标收起；
-  侧边栏收成窄条、或搜索框展开时隐藏（那两种状态下原生按钮也会让位）。若连标题行都
-  定位不到（例如上游改了结构），自动退回侧边栏左下角的 chip 条，功能不会消失。
+- **按状态筛选**：底部只放 `运行中`（含子智能体仍在跑）与 `待确认`（审批、计划审阅、
+  待回答）两个 chip，各自带当前命中数；完整面板另有 `全部` 用于浏览。
+- **就在手边**：点 chip 向上弹出按工作区分组的列表，点行直接进会话，再点同一个 chip 收起；
+  侧边栏收成窄条时换成带合计角标的圆形按钮，展开后同样能筛。
+- **单独一行**：筛选条占满侧边栏那一行，不和成本计等其他底部条目挤在一起。
 - **按时间筛选**：`更多` 下拉里的四个时间窗，基于会话的 `updatedAt`；选中后 `更多`
   按钮直接显示当前时间窗名称，再点一次可改回 `不限时间`。
 - **组合筛选**：状态与时间可叠加，右侧出现 `清除筛选` 一次复位。
@@ -54,7 +53,7 @@ profile 目录里的 pnpm，装完再读包里的 `dsh.bundle.patch` 自动登
 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,7 +75,7 @@ dsh plugin --profile desktop remove dsh-workspace-session-filter
 
 装好后：
 
-- 侧边栏**左下角**（设置按钮上方）出现 `运行中 N` / `待确认 N` 筛选条；
+- 侧边栏**底部**（设置按钮上方、单独一行）出现 `运行中 N` / `待确认 N` 筛选条；
 - 侧边栏面板列表里出现「会话筛选」图标，指向中间栏的完整视图。
 
 卸载：`plugin_manager({ action: "remove_bundle", target: "dsh-workspace-session-filter" })`。
@@ -88,7 +87,7 @@ dsh plugin --profile desktop remove dsh-workspace-session-filter
 
 | 文件 | 作用 |
 | --- | --- |
-| `client.js` | 全部界面逻辑：字典、图标、左下筛选条 + 面板 + 侧边栏图标三个 slot 注册、内联样式 |
+| `client.js` | 全部界面逻辑：字典、图标、底部筛选条 + 面板 + 侧边栏图标三个 slot 注册、内联样式 |
 | `index.js` | Host 半边（本插件不需要 Host 能力，留空） |
 | `cordis.patch.yml` | 把 `session-filter` 条目插入 profile 组合 |
 | `package.json` | 包元信息 + `dsh.client` / `dsh.bundle` 声明 |
@@ -100,12 +99,10 @@ 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。
@@ -122,7 +119,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

@@ -572,238 +572,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
@@ -954,7 +726,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 +756,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 +833,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.1",
   "description": "Workspace session filter panel with status and recency filters.",
   "type": "module",
   "exports": {