dsh-folder-sidebar 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -1,36 +1,45 @@
-# Changelog
-
-## 0.17.0 — first public release
-
-首次公开发布。把 DSH 侧栏的「工作区 / 会话」列表换成分文件夹的进入式导航，并尽量与内置侧栏（`ui-workspace`）的语义和视觉对齐。
-
-### 导航
-
-- 一级只列工作区（文件夹），点进去才显示该工作区的会话列表，顶栏下方有「‹ 文件夹名 +」面包屑行（整行返回，`+` 新开会话）。
-- 默认停在当前会话所在的工作区；返回后停在文件夹列表。
-- 「未分组」伪文件夹承载不属于任何工作区的会话（subagent 来源的会话始终隐藏）。
-
-### 状态位
-
-- 会话行首固定 18px 状态位：转圈（运行中）、绿 `✓`（未读完成）、黄 `?`（等你回答/审批）、红 `!`（失败或中断）、空心灰（你主动停止）、淡灰点（空闲/已读）。
-- 完成态跟随客户端的 `completionUnread` 规则（打开即清除）；失败态来自本插件的 Host 投影 `folder-sidebar/turn`（`stateVersion = 3`），不因查看而清除。
-- 文件夹行图标即状态位：优先级 等待 > 运行 > 失败 > 未读完成 > 停止，同级取状态起始时间最早者。
-- 悬浮卡列出会话/文件夹的全部状态。
-
-### 操作
-
-- 会话 `…` 菜单（含右键）：置顶/取消置顶、重命名（行内）、分叉、复制 ID、归档（运行中会二次确认）。
-- 文件夹 `…` 菜单：重命名、在此新建会话、上移/下移、删除工作区。
-- 文件夹拖拽排序，落点有插入指示线，通过 Host 的 workspace 排序接口持久化。
-- 归档：视图选项三选一（隐藏 / 全部 / 仅归档）、归档行不可打开、提示条可撤销；失败操作有可见提示。
-
-### 顶栏
-
-- 固定的标题栏 + 搜索 / 视图选项 / 添加工作区按钮；搜索点击后淡入并占据顶栏（约 150–180ms，尊重 `prefers-reduced-motion`）。
-- 视图选项菜单同时包含排序（手动/名称/最近 + 正序/倒序，两级各自独立并持久化）与归档显示筛选。
-
-### 工程
-
-- 纯逻辑（排序比较器、状态优先级、文件夹聚合、归档筛选、时间格式化）放在 `client.js` 顶层并在 Node 环境导出，`test/logic.test.mjs` 直接测试发布源码。
-- 渲染错误由错误边界兜底：组件异常时在侧栏显示原因，而不是把槽位让回内置实现。
-- 图标按 `ui-primitives` 的真实几何复刻（不 import 宿主包），详见 README 的「图标」小节。
+# Changelog
+
+## 0.18.0
+
+- 长名称不再只能看省略号：悬停行（会话、文件夹、未分组、搜索结果、面包屑文件夹名）时，放不下的标题会缓慢横向滚到末尾再回来；不溢出的标题完全不动，`prefers-reduced-motion` 下不滚动。
+- 跑马灯位移与时长由纯函数 `marqueeShiftOf` / `marqueeDurationOf` 计算，已加入 `test/logic.test.mjs` 覆盖（阈值、上下限、单调性）。
+
+## 0.17.1
+
+- 重新发布以完成 npm 的暂存审批（内容与 0.17.0 一致）。0.17.0 在 npm 上归档为未批准的暂存版本。
+
+## 0.17.0 — first public release
+
+首次公开发布。把 DSH 侧栏的「工作区 / 会话」列表换成分文件夹的进入式导航，并尽量与内置侧栏（`ui-workspace`）的语义和视觉对齐。
+
+### 导航
+
+- 一级只列工作区（文件夹），点进去才显示该工作区的会话列表，顶栏下方有「‹ 文件夹名 +」面包屑行（整行返回，`+` 新开会话）。
+- 默认停在当前会话所在的工作区；返回后停在文件夹列表。
+- 「未分组」伪文件夹承载不属于任何工作区的会话（subagent 来源的会话始终隐藏）。
+
+### 状态位
+
+- 会话行首固定 18px 状态位：转圈（运行中）、绿 `✓`（未读完成）、黄 `?`（等你回答/审批）、红 `!`（失败或中断）、空心灰（你主动停止）、淡灰点（空闲/已读）。
+- 完成态跟随客户端的 `completionUnread` 规则（打开即清除）；失败态来自本插件的 Host 投影 `folder-sidebar/turn`（`stateVersion = 3`），不因查看而清除。
+- 文件夹行图标即状态位：优先级 等待 > 运行 > 失败 > 未读完成 > 停止，同级取状态起始时间最早者。
+- 悬浮卡列出会话/文件夹的全部状态。
+
+### 操作
+
+- 会话 `…` 菜单（含右键）：置顶/取消置顶、重命名（行内）、分叉、复制 ID、归档（运行中会二次确认）。
+- 文件夹 `…` 菜单：重命名、在此新建会话、上移/下移、删除工作区。
+- 文件夹拖拽排序，落点有插入指示线，通过 Host 的 workspace 排序接口持久化。
+- 归档：视图选项三选一（隐藏 / 全部 / 仅归档）、归档行不可打开、提示条可撤销；失败操作有可见提示。
+
+### 顶栏
+
+- 固定的标题栏 + 搜索 / 视图选项 / 添加工作区按钮；搜索点击后淡入并占据顶栏（约 150–180ms，尊重 `prefers-reduced-motion`）。
+- 视图选项菜单同时包含排序（手动/名称/最近 + 正序/倒序，两级各自独立并持久化）与归档显示筛选。
+
+### 工程
+
+- 纯逻辑（排序比较器、状态优先级、文件夹聚合、归档筛选、时间格式化）放在 `client.js` 顶层并在 Node 环境导出，`test/logic.test.mjs` 直接测试发布源码。
+- 渲染错误由错误边界兜底：组件异常时在侧栏显示原因，而不是把槽位让回内置实现。
+- 图标按 `ui-primitives` 的真实几何复刻（不 import 宿主包），详见 README 的「图标」小节。

package/README.md

@@ -23,6 +23,7 @@
   点这一行任意位置 = 返回上一级（文件夹列表）；点右侧 `+` = 在当前工作区新开会话（不触发返回）。下面才是该工作区的会话列表。
 - **默认停在当前会话所在的工作区**；返回后停在文件夹列表，不会被自动拉回。
 - **搜索**：标题匹配即时本地过滤；内容匹配 250 ms 防抖后走 Host 的会话检索，结果带所属工作区与命中片段，点击直接打开。
+- **长名称**：放不下的标题在悬停该行时横向滚动（会话行、文件夹行、未分组、搜索结果、面包屑文件名都生效），滚到末尾再回滚；能放下的标题静止不动，`prefers-reduced-motion` 下不滚动。
 - 侧栏收起成窄栏时只渲染一个文件夹图标，点击展开。
 
 ## 状态位

package/client.js

@@ -201,6 +201,21 @@ function baseName(path) {
   return parts.length > 0 ? parts[parts.length - 1] : path
 }
 
+/**
+ * How far a title must travel to show its tail, or 0 when it already fits.
+ * A couple of pixels of rounding should not start a marquee.
+ */
+function marqueeShiftOf(scrollWidth, clientWidth) {
+  if (!Number.isFinite(scrollWidth) || !Number.isFinite(clientWidth)) return 0
+  const shift = Math.round(scrollWidth - clientWidth)
+  return shift > 2 ? shift : 0
+}
+
+/** Longer titles scroll slower, so the reading speed stays roughly even. */
+function marqueeDurationOf(shift) {
+  return Math.min(14000, Math.max(2200, Math.round(shift * 26)))
+}
+
 /**
  * Web Client half of dsh-folder-sidebar.
  *
@@ -413,6 +428,12 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
 .dfs-row.is-current{background:var(--dsw-alias-bg-layer-1)}
 .dfs-row.is-current .dfs-title{font-weight:600}
 .dfs-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.dfs-titleText{display:inline-block;white-space:nowrap;will-change:transform}
+.dfs-title.is-marquee{text-overflow:clip}
+.dfs-title.is-marquee .dfs-titleText,
+.dfs-crumbName.is-marquee .dfs-titleText{animation:dfs-title-marquee var(--dfs-marquee-duration,4s) ease-in-out infinite alternate}
+@keyframes dfs-title-marquee{0%,10%{transform:translateX(0)}90%,100%{transform:translateX(var(--dfs-marquee-shift,0))}}
+@media (prefers-reduced-motion: reduce){.dfs-title.is-marquee .dfs-titleText,.dfs-crumbName.is-marquee .dfs-titleText{animation:none}}
 .dfs-snippet{flex:1 1 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--dsw-alias-label-secondary)}
 .dfs-time{flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:var(--dsw-alias-label-secondary)}
 .dfs-status{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px}
@@ -621,6 +642,17 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
       ], { size: 14 })
     }
 
+    /**
+     * One title line: the outer span clips, the inner span scrolls on hover.
+     * The marquee only starts for text that does not fit, so short names stay
+     * still and keep their ellipsis when narrowed.
+     */
+    function Title(props) {
+      const className = props.className ?? 'dfs-title'
+      return h('span', { className, title: props.title ?? props.text },
+        h('span', { className: 'dfs-titleText' }, props.text))
+    }
+
     class RenderBoundary extends React.Component {
       constructor(props) {
         super(props)
@@ -1104,6 +1136,32 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
             if (hoverTimer.current !== undefined) clearTimeout(hoverTimer.current)
           }, [])
 
+          /** Reveal a clipped title by scrolling it while the row is hovered. */
+          const startMarquee = (event) => {
+            const row = event.currentTarget
+            if (row === null || typeof row.querySelector !== 'function') return
+            const text = row.querySelector('.dfs-titleText')
+            const box = text === null ? null : text.parentElement
+            if (text === null || box === null) return
+            const shift = marqueeShiftOf(text.scrollWidth, box.clientWidth)
+            if (shift === 0) return
+            text.style.setProperty('--dfs-marquee-shift', `-${shift}px`)
+            text.style.setProperty('--dfs-marquee-duration', `${marqueeDurationOf(shift)}ms`)
+            box.classList.add('is-marquee')
+          }
+
+          const stopMarquee = (event) => {
+            const row = event.currentTarget
+            if (row === null || typeof row.querySelector !== 'function') return
+            const text = row.querySelector('.dfs-titleText')
+            const box = text === null ? null : text.parentElement
+            if (text === null || box === null) return
+            box.classList.remove('is-marquee')
+            text.style.removeProperty('--dfs-marquee-shift')
+            text.style.removeProperty('--dfs-marquee-duration')
+          }
+
+
           React.useEffect(() => {
             if (hoverFor === null) return undefined
             const onScroll = () => setHoverFor(null)
@@ -1374,10 +1432,12 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
             const resultRows = hits.slice(0, 30).map((hit) => h('div', { key: hit.sessionId, className: 'dfs-rowWrap' },
               h('div', {
                 className: 'dfs-row', role: 'button', tabIndex: 0,
+                onMouseEnter: startMarquee,
+                onMouseLeave: stopMarquee,
                 onClick: () => openSession(hit.sessionId),
                 onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); openSession(hit.sessionId) } },
               },
-              h('span', { className: 'dfs-title' }, hit.title),
+              h(Title, { text: hit.title }),
               h('span', { className: 'dfs-time' }, baseName(hit.workspace.path) || t('group.ungrouped')),
               hit.snippet === undefined ? null : h('span', { className: 'dfs-snippet' }, `${t('search.content')}: ${hit.snippet}`))))
             body.push(topBar())
@@ -1598,14 +1658,17 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
                   title: typeof workspace.path === 'string' && workspace.path !== '' ? workspace.path : name,
                   onClick: () => { if (!renaming) setOpenId(workspace.workspaceId) },
                   onContextMenu: contextMenuHandler(menuKey, folderMenu),
-                  onMouseEnter: (event) => scheduleHover(menuKey, folderStatusRows(workspace), event),
-                  onMouseLeave: cancelHover,
+                  onMouseEnter: (event) => {
+                    startMarquee(event)
+                    scheduleHover(menuKey, folderStatusRows(workspace), event)
+                  },
+                  onMouseLeave: (event) => { stopMarquee(event); cancelHover() },
                   onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setOpenId(workspace.workspaceId) } },
                 },
                 h(FolderGlyph, { kind: folderKind, label: folderKind === undefined ? undefined : labels[folderKind] }),
                 renaming
                   ? renameInput(rename)
-                  : h('span', { className: 'dfs-title' }, name === '' ? t('section.title') : name),
+                  : h(Title, { text: name === '' ? t('section.title') : name }),
                 h('span', { className: `dfs-rowActions${menuFor !== null && menuFor.key === menuKey ? ' is-open' : ''}` },
                   menuTrigger(menuKey, folderMenu)),
                 rows.length > 0 ? h('span', { className: 'dfs-badge' }, String(rows.length)) : null,
@@ -1627,12 +1690,15 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
                   tabIndex: 0,
                   title: t('group.ungrouped'),
                   onClick: () => setOpenId(UNGROUPED),
-                  onMouseEnter: (event) => scheduleHover(menuKey, folderStatusRows(ungroupedWorkspace), event),
-                  onMouseLeave: cancelHover,
+                  onMouseEnter: (event) => {
+                    startMarquee(event)
+                    scheduleHover(menuKey, folderStatusRows(ungroupedWorkspace), event)
+                  },
+                  onMouseLeave: (event) => { stopMarquee(event); cancelHover() },
                   onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setOpenId(UNGROUPED) } },
                 },
                 h(FolderGlyph, { kind: folderKindOf(ungroupedWorkspace), label: undefined }),
-                h('span', { className: 'dfs-title' }, t('group.ungrouped')),
+                h(Title, { text: t('group.ungrouped') }),
                 h('span', { className: 'dfs-badge' }, String(ungroupedRows.length)),
                 h(ChevronIcon, null))))
             }
@@ -1662,6 +1728,8 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
             role: 'button',
             tabIndex: 0,
             title: t('action.back'),
+            onMouseEnter: startMarquee,
+            onMouseLeave: stopMarquee,
             onClick: () => { setOpenId(null); setQuery('') },
             onKeyDown: (event) => {
               if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); setOpenId(null); setQuery('') }
@@ -1671,7 +1739,7 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
           h(FolderIcon, null),
           workspaceRenaming
             ? renameInput(rename)
-            : h('span', { className: 'dfs-crumbName', title: name }, name),
+            : h(Title, { className: 'dfs-crumbName', text: name }),
           isUngrouped ? null : h('button', {
             key: 'new',
             type: 'button', className: 'dfs-iconBtn', title: t('action.newSession'),
@@ -1715,12 +1783,15 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ !== undefined) {
                 title: isArchived ? t('notice.archivedNotOpenable') : (kind === undefined ? titleOf(summary) : `${titleOf(summary)} — ${label}`),
                 onClick: () => { if (!renaming) openRow() },
                 onContextMenu: contextMenuHandler(menuKey, sessionMenu),
-                onMouseEnter: (event) => scheduleHover(menuKey, statusRowsOf(status, projectionOf(summary.id), summary.updatedAt), event),
-                onMouseLeave: cancelHover,
+                onMouseEnter: (event) => {
+                  startMarquee(event)
+                  scheduleHover(menuKey, statusRowsOf(status, projectionOf(summary.id), summary.updatedAt), event)
+                },
+                onMouseLeave: (event) => { stopMarquee(event); cancelHover() },
                 onKeyDown: (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); openRow() } },
               },
               h(Indicator, { kind, title: label }),
-              renaming ? renameInput(rename) : h('span', { className: 'dfs-title' }, titleOf(summary)),
+              renaming ? renameInput(rename) : h(Title, { text: titleOf(summary) }),
               isPinned ? h('span', { className: 'dfs-pin', title: t('action.pin'), 'aria-hidden': true }, h(PinIcon)) : null,
               h('span', { className: `dfs-rowActions${menuFor !== null && menuFor.key === menuKey ? ' is-open' : ''}` },
                 menuTrigger(menuKey, sessionMenu)),
@@ -1761,6 +1832,6 @@ if (typeof module === 'object' && module !== null && module.exports !== undefine
     directionSign, normalizeSort, readSortState, writeSortState,
     readArchivedFilter, writeArchivedFilter,
     sortWorkspaces, sortSessions, pickFolderKind, indicatorOf,
-    relativeTime, baseName,
+    relativeTime, baseName, marqueeShiftOf, marqueeDurationOf,
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-folder-sidebar",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "type": "module",
   "description": "Folder-style sidebar for DeepSeek Harness: workspaces read as folders, and clicking one enters its session list instead of scrolling every workspace at once. · DSH 文件夹侧栏：工作区即文件夹，点进去只看该工作区的会话。",
   "license": "MIT",