@young1lin/dsh-ui-gitworkbench 0.1.12 → 0.1.13

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 本文件记录面向使用者的变更。格式参考 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.1.0/)，版本号遵循语义化版本。
 
+## [0.1.13] - 2026-08-25
+
+### 新增
+
+- **查找面板会数数了**。Ctrl/Cmd+F 的查找框旁边多了 `3/128`——当前第几个、一共多少个。此前面板不报数，于是「一个都没匹配上」和「匹配全在屏幕外」看起来一模一样。数一遍要走整个文档，所以它不在按键路径上：打字停下来之后才算，用的是语法着色和实时 diff 底色同一个空闲档；走到 5000 个就停，再多显示 `5000+`。命中位置留着不丢，所以按 Enter 在匹配之间跳是一次二分查找而不是重数一遍。拿本仓库自己的客户端源码实测，全量计数 300 行 3–5ms、2000 行 9–11ms、4000 行 12ms、20000 行（`SIDE_LINE_CAP`，窗格能载入的上限）60ms。
+
+### 修复
+
+- **Ctrl/Cmd+F 的查找面板不再是库自带的那身灰壳**。`@codemirror/search` 给面板的每个值都是写死的字面量：`#f5f5f5` 的条、灰色渐变的按钮、`1px solid silver` 的输入框、`#ffff0054` 的命中底色，外加一个不指定字体族的 `font-size: 70%`。它们一个都不跟调色板走，于是抽屉十四套配色里有十一套下面，Ctrl+F 打开的是一块浅灰色原生表单控件板，压在深色窗格上。现在面板穿的是抽屉自己的控件：同样的高度、圆角、字号、悬停与焦点圈，命中底色也从调色板里取。
+- **行号槽不再把代码压在自己底下**。CodeMirror 用内联样式把行号槽钉成 `position: sticky`，横向滚动时它停在窗格左缘、代码从底下滑过去；库自带一层不透明底色正是为挡住这一幕，而抽屉此前把它改成了透明，于是行号和代码叠印在一起。现在行号槽有自己的底色（取窗格地色），并向左溢出，连窗格左内边距那一条缝也一并盖住。
+
+### 变更
+
+- **抽屉里同一件事只剩一种画法**。此前七类列表行有四种圆角、两种悬停色、三种「选中」写法，History 的筛选弹层里挤着 20 / 22 / 26px 三种控件高度，紧挨着一排 24px 的控件。现在稠密列表行圆角统一，中性悬停只有一种颜色，「选中」只有一条规则（强调色文字 + 强调色底 + 强调色描边），筛选弹层里的控件全部站到面板内控件的统一高度上。变更树的目录行和文件行此前根本没有圆角，悬停和选中的填充会方角撞上窗格边——现在与 Files 树一致。
+
 ## [0.1.12] - 2026-08-23
 
 ### 修复

package/CHANGELOG_EN.md

@@ -2,6 +2,21 @@
 
 User-facing changes, newest first. Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); versioning follows SemVer.
 
+## [0.1.13] - 2026-08-25
+
+### Added
+
+- **The find panel counts.** Ctrl/Cmd+F now shows `3/128` beside the search field — which match you are on, and how many there are. Without it, a query that matched nothing and a query whose matches are all below the fold looked identical. Counting walks the whole document, so it never happens on the keystroke path: the walk waits until the typing stops, on the same idle the syntax coloring and the live diff tint use, and it stops at 5,000 matches, past which the total reads `5000+`. Match positions are kept, so moving between matches with Enter is a binary search rather than a second walk. Measured against this repository's own client sources, a full count costs 3–5ms at 300 lines, 9–11ms at 2,000, 12ms at 4,000, and 60ms at 20,000 — `SIDE_LINE_CAP`, the ceiling the pane will load.
+
+### Fixed
+
+- **The Ctrl/Cmd+F panel no longer arrives in the library's grey shell.** Every value `@codemirror/search` dresses its panel with is a literal: a `#f5f5f5` strip, buttons on a grey gradient, `1px solid silver` fields, `#ffff0054` matches, and a `font-size: 70%` that names no font family. None of them follow a palette, so on eleven of the drawer's fourteen themes Ctrl+F opened a light-grey slab of native form controls on top of a dark pane. The panel now wears the drawer's own controls — the same height, radius, type size, hover and focus ring — and takes its match colors from the palette.
+- **The line-number gutter no longer prints the code through itself.** CodeMirror pins the gutter with an inline `position: sticky`, so the numbers hold the pane's left edge while the code scrolls sideways underneath them; the library ships an opaque fill there for exactly that reason, and the drawer had overridden it to transparent, leaving numbers and code painted on top of each other. The gutter now carries the pane's ground color, and bleeds left far enough to cover the pane's own left padding.
+
+### Changed
+
+- **One way to draw each thing.** Seven kinds of list row had four answers for a corner, two hover colors and three spellings of "this one is selected", and the History filter popover held controls at 20 / 22 / 26px next to a row of controls at 24. Dense list rows now share one radius, neutral hovers share one color, selection is one rule (accent text in an accent tint inside an accent border), and every control in the filter popover stands at the standard in-pane height. The Changes tree's directory and file rows had no corner at all, so their hover and selection fills ran square into the pane edge — they now match the Files tree.
+
 ## [0.1.12] - 2026-08-23
 
 ### Fixed

package/README.md

@@ -93,6 +93,9 @@ irm https://raw.githubusercontent.com/young1lin/dsh-ui-gitworkbench/main/scripts
 | 客户端半被类型检查 | ✅ | `tsconfig.client.json` 进了 `bundle`/`typecheck`；曾故意写坏一处，确认报 `TS2322` |
 | 主题 7 族 × 亮暗 + 跟随系统明暗 | ✅ | `tests/theme-palettes.test.ts` 把 `themes.ts` 与 `.module.css` 互扣（两个方向都验过会红）；`lib/client.js` 含全部 14 套调色板 |
 | 背景图 / 自定义 CSS 的项目+全局存储 | ✅ | 对**构建产物** `lib/index.js` 跑 styleGet/styleSet 全流程（临时 HOME，18/18 PASS）：读写、项目优先、越界钳制、恶意 image 拒绝、清空删记录、非仓库拒绝、两作用域并发写不互相覆盖 |
+| Ctrl/Cmd+F 查找面板穿抽屉的控件，并报 `当前 / 总数` | ✅ | `python scripts/verify_search_panel.py`：24 项实机检查（条随调色板重绘、控件同高同圆角、命中底色非库自带、窄窗格回流、计数随 Enter 前进） |
+| 抽屉视觉词汇表单一（圆角 / 字号 / 控件高度 / 悬停 / 选中） | ✅ | `tests/drawer-chrome.test.ts` 逐条声明扫描全表，六个变异全红；`python scripts/verify_vocabulary.py` 实机复核（18 个筛选控件同高、17 处小字同号、树行圆角与选中 chip） |
+| 行号槽不再把代码压在底下 | ✅ | `python scripts/verify_gutter.py`：窗格拖窄后横向滚动 400px，63 行钻到槽下，槽有自身底色且向左溢出；可编辑轨条仍在槽之上 |
 
 **已知边界**：状态卡挂在 `conversation.session.header.actions` 插槽，只有**打开了会话（会话头渲染）**时才挂载。无头自动化里若没真正打开会话，状态卡不会出现——这是预期行为，手动在 UI 里开一个会话即可看到。
 
@@ -381,6 +384,53 @@ git 靠「一删除 + 一新增」的配对才认得出改名；pathspec 只放
 ### 6.17 抽屉内新增模态层的 CSS 必须写 `.drawer > .xxx`，裸类会被压住
 `.drawer > *:not(.resizer) { position: relative; z-index: 1 }`（布局需要）给了每个直接子元素 position 与层叠秩，裸类声明的 `position: absolute` 会输给它——遮罩被当作最后一个 flex 项排进抽屉底部的一条缝里，样式全对、位置全错、还不报错。模态遮罩一律写成 `.drawer > .confirmScrim` 这种带父作用域的选择器；`tests/drawer-chrome.test.ts` 有断言守着这条作用域与层叠秩。
 
+### 6.18 CodeMirror 自带的界面只能在 `EditorView.theme` 里改，且查找面板不能用 flex 排版
+`.cm-*` 是全局类名，写进 `.module.css` 会被 CSS Modules 哈希掉，选不中；改动一律走 TS 里的 `EditorView.theme`（`paneTheme` 与 `cm-search-theme.ts`）。这样写仍然吃得到调色板：面板挂在 `.overlay` 里，`var(--gs-*)` 照常解析。层叠也不用操心——`EditorView` 把 base theme 排在最前面挂载，同特异度下普通 theme 规则赢。
+
+排版有个坑：`@codemirror/search` 用一个 `<br>` 分隔「查找行」和「替换行」，而 Blink **不给 flex 容器里的 `<br>` 生成盒子**——`flex-basis: 100%`、`width: 100%`、`min-width: 100%` 三种写法都在跑起来的应用上试过，替换框一律留在查找行上，样式全对、只是少了一次换行。面板因此保持行内流：控件写成 `inline-flex` 原子，行距用每个控件的下外边距承担，面板下内边距按这个边距扣掉；`scripts/verify_search_panel.py` 在真实抽屉里量这套版式。库自带的那套值全是字面量（`#f5f5f5` 的条、`linear-gradient` 的按钮、`1px solid silver` 的输入框、`#ffff0054` 的命中、外加一个不指定字体族的 `font-size: 70%`），一个都不跟主题走，必须逐条盖掉；`tests/cm-search-theme.test.ts` 按名字守着这份清单。
+
+### 6.19 探针按类名选元素要用「后缀匹配」，读状态前要先把鼠标挪开
+
+CSS Modules 的类名带每次构建都变的哈希前缀（`T3TXCq_file`），所以 Playwright 里
+只能按局部名匹配。但 `[class*="file"]` 太松：它同时选中 `fileLi`、`filePath`、
+`fileStatus`、`fileCountAdd`，第一版 `verify_vocabulary.py` 因此量到了外层
+`<li>`，报告「树行没有圆角」——而圆角就在里面那个 `<button>` 上。按后缀判断才准：
+
+```js
+const local = (name) => [...document.querySelectorAll('[class]')]
+    .filter(el => [...el.classList].some(c => c === name || c.endsWith('_' + name)));
+```
+
+第二个坑在特异度上：`.file:hover` 是 (0,2,0)，裸修饰符 `.fileActive` 只有
+(0,1,0)，悬停规则必然赢。Playwright 点完一行，指针就停在那行上，`getComputedStyle`
+读回来的是**悬停态**，于是选中态的强调色底会被读成中性的 `--gs-raise`。读状态前
+先 `page.mouse.move(4, 4)`。抽屉里所有选中行都是这个行为：指针压上去时底色让位给
+悬停，强调色文字、600 字重和左侧强调边仍在，选中依然读得出来。
+
+还有一条：规则写在子元素上时要读子元素。`.calWeek` 的 11px 写在 `.calWeek span`
+上，读容器拿到的是从面板继承来的 12px，看起来像漂移。
+
+### 6.20 行号槽是内联 `position: sticky`，把它改成透明就等于让代码从行号底下穿过去
+
+`@codemirror/view` 在 gutter 插件里用**内联样式**写死 `this.dom.style.position =
+"sticky"`（`dist/index.js` 约 11398 行），CSS 覆盖不掉。于是横向滚动时行号钉在面板
+左缘不动，代码从底下滑过去——库自带 `background: #f5f5f5` 正是为了挡住这一幕，
+`paneTheme` 早先把它改成了 `transparent`，行号和代码就叠印在一起了（在跑起来的
+应用上拍到过：`pl0ügin`、`ull5neutral`、`cro3ssed`）。所以 gutter 必须有自己的底色，
+用面板的地色 `--gs-surface`——Files 的 `.fbMain` 和 Changes 的 `.diffPane` 都是它。
+自己上色的格子（活动行、改动行）照旧盖在上面，跟盖在透明上没有区别。
+
+只补底色还差一截：`left: 0` 把 gutter 钉在滚动容器的**内容盒**边缘，而面板是在
+**内边距盒**上裁剪的，所以代码会继续从面板那 8px 左内边距里钻出来，露在行号左边。
+底色因此要向左溢出：`boxShadow: '-16px 0 0 0 var(--gs-surface)'`。颜色就是地色、
+又被面板裁掉，多溢一点不要钱。
+
+两个连带项。一是 `.cmHost[data-editable]::before` 那条可编辑轨条压着 gutter 头两个
+像素，而 CodeMirror 把 gutter 叠在 `z-index: 200`——轨条得写 `z-index: 201`，否则
+gutter 一变不透明就把它埋了。二是探针查不了这件事：`elementFromPoint` 不做
+box-shadow 的命中测试，行号左边那个点照样报 `.cm-line`，只能截图看像素，或者直接
+读 `getComputedStyle(...).boxShadow`。`scripts/verify_gutter.py` 走的是后者。
+
 ---
 
 ## 7. dsh 仓库里的关键参考文件（去哪里抄）

package/README_EN.md

@@ -7,7 +7,7 @@ An out-of-tree Web UI plugin for [dsh (DeepSeek Harness)](https://github.com/dee
 Every session header gets a small status card showing the current branch, ahead/behind counts, and added/deleted lines. Click it and a workbench panel slides in from the right with everything about the session worktree's changes:
 
 - **Changes** — a collapsible file tree beside full-context, side-by-side per-file diffs with dual line numbers, word-level highlights, Shiki syntax coloring, and an editable right column. A magnifier filters the tree by space-separated keywords (smart case); hovering a file reveals IDEA-style Rollback behind a consequence-specific dialog. The diff header keeps the current hunk and `current / total` visible: Unstaged offers Stage / Revert even in Edit mode, while Staged offers Unstage for the current hunk or the whole file.
-- **Files** — a searchable repository tree with editable CodeMirror file views, image previews, and per-line blame information.
+- **Files** — a searchable repository tree with editable CodeMirror file views, image previews, and per-line blame information. Ctrl/Cmd+F opens a find panel dressed in the drawer's own controls that reports `3/128` — which match you are on, out of how many.
 - **History** — commits, file tree, and diff in three panes; scrolling to the bottom loads the next page automatically. Rows carry the author, the hover card the exact time; an IDEA-style filter (a `user:` / `path:` / `after:` query grammar plus an authors / date / paths funnel) compiles into `git log` arguments and matches over all history, with an All-branches option.
 - **Compare** — diff any two branches against each other.
 - **Commit & sync** — ticking a file in the tree is a real `git add` / `git restore --staged`; with the commit box and the fetch / pull / push bar, a full commit-and-push never leaves the panel.