ui-turnav — Turn Outline Navigator

English | 中文

---

中文

DSH Web GUI 的轮次目录导航客户端插件，仿 Kimi Code 的 Web 会话交互：在聊天正文列的右缘（不是窗口滚动条）悬浮一列小色块，每个色块对应一轮用户提问。

效果

• 默认收起：一列 6×22px 的灰色小方条，35% 透明度，贴在 748px 正文列右缘；
• 位置高亮：跟随会话滚动，当前阅读位置对应的色块变为品牌蓝、全亮；
• 悬浮展开：鼠标移入色块列，原来的色块自身以 0.28s 动画拉伸成 260px 宽的长条，该轮用户输入的文字在条内右对齐淡入——不创建任何新元素、没有独立面板；
• 点击跳转：点击任意色块，平滑滚动到对应的那条用户消息。

安装（挂载到 DSH Web）

本包是纯客户端 Cordis 插件（dsh.client.platform = "web"），宿主侧为空壳。

1. 让包可被 Web profile 解析——二选一：

   • 把仓库复制/链接到 $DSH_HOME/profiles/node_modules/ui-turnav（Windows 可用 Junction：New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\node_modules\ui-turnav" -Target <本仓库路径>）；
   • 或按你的部署方式安装为依赖。

2. 在 $DSH_HOME/profiles/web/cordis.patch.yml 追加一行 insert：

   - insert:
       - id: ui-turnav
         name: ui-turnav
   

3. 重启 dsh web，打开任意有历史对话的会话即可看到右侧色块列。

实现说明

• 挂载点：conversation.input.overlay（会话作用域的附加槽位，不替换任何原有 UI）；
• 数据：会话快照 chat.order + chat.nodes，只取 kind === 'user' 的轮首用户消息；
• 定位/滚动：聊天视图官方 DOM 契约 data-conversation-scroll（滚动容器）与 data-chat-anchor-key（节点锚点），不依赖易变的样式类名；
• 配色全部走主题 CSS 变量（--dsw-*），明暗主题自适应；
• 卸载即清理：样式与槽位注册都挂在插件 Fiber 生命周期上。

---

English

A turn outline navigator client plugin for the DSH Web GUI, modeled after Kimi Code's web session interaction: a rail of small color bars floating at the right edge of the chat content column (not the window scrollbar), one bar per turn-opening user prompt.

Behavior

• Collapsed: a column of 6×22px neutral bars at 35% opacity, hugging the 748px content column;
• Position highlight: the bar at the current reading position turns brand blue, following the conversation scrollport;
• Hover to expand: each bar stretches in place (width animation, 6px → 260px) and the turn's prompt fades in, right-aligned inside the stretched bar — no separate panel, no extra DOM;
• Click to jump: smooth-scrolls to that user message.

Installation

Pure client-side Cordis plugin (dsh.client.platform = "web"); the host half is an empty shell.

1. Make the package resolvable by the web profile, e.g. link it into $DSH_HOME/profiles/node_modules/ui-turnav.

2. Append to $DSH_HOME/profiles/web/cordis.patch.yml:

   - insert:
       - id: ui-turnav
         name: ui-turnav
   

3. Restart dsh web and open any session with conversation history.

Implementation notes

• Mount point: conversation.input.overlay (additive session-scoped slot; nothing shipped is replaced);
• Data: snapshot.chat.order / chat.nodes, filtered to kind === 'user';
• Anchoring: the chat view's own DOM contract — data-conversation-scroll and data-chat-anchor-key — never hashed CSS class names;
• Colors come from theme CSS variables (--dsw-*), light/dark aware;
• Clean teardown: stylesheet and slot registration are bound to the plugin fiber lifecycle.

License

MIT