replace produced-file probes with CSS width bands
以 CSS 宽度档位替代产出文件探针
The produced-files row duplicated every candidate chip in a hidden probe tree, synchronously read computed styles and element geometry in a layout effect, and repeated those reads whenever the row or a probe resized. That machinery existed only to choose how many labels fit on one line. Its forced layout work cost more than exact width-dependent chip counts were worth. The produced-file discovery and Host-opening beh
English
Problem
The produced-files row duplicated every candidate chip in a hidden probe tree, synchronously read computed styles and element geometry in a layout effect, and repeated those reads whenever the row or a probe resized. That machinery existed only to choose how many labels fit on one line. Its forced layout work cost more than exact width-dependent chip counts were worth.
The produced-file discovery and Host-opening behavior remain owned by opening a produced file from the web UI. This decision changes only how that row handles limited horizontal space.
Decision
The produced-files row is an inline-size query container. CSS width bands hide trailing chips from the six-file prefix and select the corresponding pre-rendered localized remainder label. The flex row performs the actual shrinking, and each basename uses CSS ellipsis while the selected remainder label keeps its intrinsic width. ProducedFiles has no resize observer, layout effect, layout state, duplicate chip probes, computed-style lookup, or element-geometry read.
The row keeps its chip maximum and gap as local CSS custom properties. Each width band corresponds to that budget and reveals one matching remainder label when paths are omitted, so + N files remains accurate for the CSS-selected prefix. The same selected label controls whether the existing Host-gated Show in folder action is visible.
Alternatives considered
- Observe only the row and estimate from its width — this removes content measurement but still creates one observer and width-driven React state per mounted result row even though CSS already receives the same width.
- Always render six chips and let flexbox shrink them — this removes all sizing logic but can reduce six filenames to nearly empty targets on a narrow conversation column. CSS width bands retain useful labels without runtime observation.
- Wrap or horizontally scroll every chip — wrapping changes the turn's vertical rhythm, while horizontal scrolling makes the tail hard to discover. The fixed cap keeps the row bounded without either interaction.
Consequences
Mounting and resizing the row performs no JavaScript layout work. Because fixed width bands ignore actual text widths and localized remainder widths, they may show one more or fewer chip than exact measurement would; flex shrinking and clipping preserve the single-line layout, and the selected + N files label still counts every omitted path. Rendered files preserve their full path in the accessible name and title. Each row carries at most six short remainder spans, of which CSS exposes zero or one. The assembled browser test verifies responsive omission, one-line layout, and the absence of horizontal overflow.
中文
问题
产出文件行会在隐藏探针树中复制每个候选 chip，在 layout effect 中同步读取计算样式和元素几何，并在该行或任一探针改变尺寸时重复读取。这套机制只用于决定一行能容纳多少标签，其强制布局工作不值得用来换取随宽度精确变化的 chip 数量。
产出文件发现与 Host 打开行为仍由从 web UI 打开产出的文件所有。本决策只改变该行处理有限横向空间的方式。
决策
产出文件行是一个 inline-size 查询容器。CSS 宽度档位会隐藏六文件前缀尾部的 chip，并选择对应的预渲染本地化剩余计数标签。flex 行负责实际收缩，各 basename 由 CSS 以 ellipsis 省略，而选中的剩余计数标签保持自身宽度。ProducedFiles 不含 resize observer、layout effect、布局 state、重复 chip 探针、计算样式查询或元素几何读取。
该行以局部 CSS 自定义属性保存 chip 最大宽度与间距。每个宽度档位对应这份预算，并在省略路径时显示一个匹配的剩余计数标签，因此 + N 个文件 对 CSS 选中的前缀保持准确。同一个选中标签控制现有 Host 能力约束下的在文件夹中显示动作是否可见。
考虑过的替代方案
- 只观察该行并根据其宽度估算——这会删除内容测量，却仍会为每个已挂载结果行创建一个 observer 和宽度驱动的 React state，而 CSS 已经获得同一份宽度。
- 始终渲染六个 chip 并让 flexbox 收缩——这会删除全部尺寸逻辑，却可能在狭窄会话列中把六个文件名压缩成近乎空白的点击目标。CSS 宽度档位无需运行时观察即可保留有用标签。
- 换行或横向滚动全部 chip——换行会改变轮次的纵向节奏，横向滚动则使尾部难以发现。固定上限无需这两种交互即可约束该行。
后果
该行挂载与改变尺寸时不执行 JavaScript 布局工作。由于固定宽度档位忽略实际文本宽度与本地化剩余计数宽度，它可能比精确测量多显示或少显示一个 chip；flex 收缩与裁切会保持单行，选中的 + N 个文件 标签仍准确统计全部未展示路径。已渲染文件在无障碍名称与 title 中保留完整路径。每行至多携带六个短剩余计数 span，其中 CSS 展示零个或一个。组装层浏览器测试验证响应式省略、单行布局与无横向溢出。