dsh-ui-tweaks 0.1.0 → 0.2.0

package/README.en.md

@@ -2,11 +2,21 @@
 
 A [DeepSeek Harness](https://deepseek-harness.github.io/deepseek-harness/) (DSH) web plugin that live-tunes the conversation UI from the Settings panel.
 
+## Preview
+
+| | |
+|---|---|
+| ![Conversation timeline](assets/timeline.png) | ![Claude Desktop table style](assets/table.png) |
+| **Conversation timeline**: right-side rail — hover to preview messages, click to jump, scroll-highlighting, auto-dodges a right sidebar | **Table style**: the Claude Desktop look (light-gray rounded cards) |
+| ![Dialog width](assets/dialog_box.png) | ![Settings panel](assets/settings.png) |
+| **Dialog width**: message column, composer and stats line widen together | **Settings panel**: font size / table style / dialog width / timeline |
+
 ## Features
 
 - **Message font size (px)** — type any value (10–32); applies to message text, headings, tables and code.
 - **Table style** — choose `Default` or the **Claude Desktop** look (light-gray rounded cell cards with small gaps, no borders; cells share the inline-code background; header not bold).
 - **Dialog width (px)** — type any value (600–1600); the message column, the composer input and the stats line below it widen together.
+- **Conversation timeline (toggleable, off by default)** — a thin navigation rail at the right of the message area: one indicator line per user message, hover to expand a preview panel, scroll-highlighting of the current position, click to smooth-scroll to that message (loading older history on demand). Works in **light and dark mode**, and **always hugs the message area's right edge** — even with a right sidebar installed and expanded (e.g. dsh-better-sidebar), the rail dodges it instead of overlapping. Auto-hidden while a session has fewer than two user messages.
 
 All changes apply **live** — no reload needed. The same values can be hand-edited in the settings document:
 
@@ -15,6 +25,7 @@ ui-tweaks:
   fontSize: 16
   tableStyle: claude
   dialogWidth: 880
+  timelineEnabled: true   # defaults to false (off); set true to enable
 ```
 
 Settings entry: **Settings → UI Tweaks**.
@@ -63,12 +74,22 @@ npx -y @deepseek-ai/dsh plugin --profile web add .        # bundle install from
 - **Server** (`src/index.ts`) registers the `ui-tweaks` settings namespace and
   mounts a same-origin route (`/_dsh/ui-tweaks/settings`) — the Web settings
   RPC only exposes a fixed allowlist of namespaces in rc.6, so a custom route
-  is how a plugin owns a configuration page.
+  is how a plugin owns a configuration page. `src/timeline.ts` also registers
+  the `dshChatTimeline` session projection that durably enumerates user
+  messages.
 - **Browser** (`src/client/index.tsx`) reads/writes that route, renders the
   Settings section, and applies the values live via a runtime `<style>` element
   that overrides stable DSH anchors (`[data-chat-flow]`,
   `[data-composer-card]`, `body` markdown font tokens, markdown tables inside
   `[data-slot="conversation.chat.node"]`).
+- **Timeline** (`src/client/timeline.tsx`) mounts in the
+  `conversation.input.dock` slot and portals to `body`. Data sources, fastest
+  first: session projection → loaded chat nodes → background `loadOlder`. Its
+  position is anchored by measuring the right edge and vertical center of
+  `[data-conversation-scroll]` (the message area), so it follows both the DSH
+  column grid and any right-sidebar layout push (`#root` margin-right);
+  colors ride DSH theme tokens (`--dsw-alias-*`) for correct light/dark
+  rendering.
 
 ## License
 

package/README.md

@@ -1,12 +1,22 @@
 # dsh-ui-tweaks
 
-[DeepSeek Harness](https://deepseek-harness.github.io/deepseek-harness/)（DSH）Web UI 插件：在设置面板中实时调整对话界面——字体大小、表格样式、对话框宽度。
+[DeepSeek Harness](https://deepseek-harness.github.io/deepseek-harness/)（DSH）Web UI 插件：在设置面板中实时调整对话界面——字体大小、表格样式、对话框宽度，以及可开关的对话时间线。
+
+## 预览
+
+| | |
+|---|---|
+| ![对话时间线](assets/timeline.png) | ![Claude Desktop 表格样式](assets/table.png) |
+| **对话时间线**：右侧竖轨，悬停展开消息预览、点击跳转、随滚动高亮当前位置，自动避让右侧边栏 | **表格样式**：Claude Desktop 浅灰圆角卡片风格 |
+| ![对话框宽度](assets/dialog_box.png) | ![设置面板](assets/settings.png) |
+| **对话框宽度**：消息列、输入框、统计栏同步变宽 | **设置面板**：字体大小 / 表格样式 / 对话框宽度 / 时间线 |
 
 ## 功能
 
 - **消息字体大小（px）**：直接输入数字（10–32），作用于消息正文、标题、表格与代码。
 - **表格样式**：可选 `默认` 或 **Claude Desktop** 风格（浅灰圆角单元格卡片、单元格间有间隙、无边框、单元格与行内代码同底色、表头不加粗）。
 - **对话框宽度（px）**：直接输入数字（600–1600）；消息列、输入框、输入框下方的统计栏（轮数/步数/耗时/tok/s）**三者同步变宽**。
+- **对话时间线（可开关，默认关闭）**：在消息区右侧显示细竖导航轨——每条用户消息一根指示线，悬停展开面板预览消息、随滚动高亮当前位置、点击平滑跳转到对应消息（自动加载更早历史）。**浅色/深色模式都正常显示**，且**始终贴在消息区右侧**：即使安装了右侧边栏（如 dsh-better-sidebar）并展开，时间线也会自动避让、不会与侧边栏重叠。会话中用户消息少于 2 条时自动隐藏。
 
 所有修改**即时生效**，无需刷新。同一份配置也可以直接在设置文档里手改：
 
@@ -15,6 +25,7 @@ ui-tweaks:
   fontSize: 16
   tableStyle: claude
   dialogWidth: 880
+  timelineEnabled: true   # 默认 false（关闭），设为 true 开启
 ```
 
 设置入口：**设置 → 界面调整**。
@@ -57,8 +68,9 @@ npx -y @deepseek-ai/dsh plugin --profile web add .        # 从本目录作为 b
 
 ## 工作原理
 
-- **服务端**（`src/index.ts`）：注册 `ui-tweaks` 设置命名空间，并挂载同源路由 `/_dsh/ui-tweaks/settings`——rc.6 的 Web 设置 RPC 只暴露固定白名单命名空间，因此自定义路由是插件拥有配置页的方式。
+- **服务端**（`src/index.ts`）：注册 `ui-tweaks` 设置命名空间，并挂载同源路由 `/_dsh/ui-tweaks/settings`——rc.6 的 Web 设置 RPC 只暴露固定白名单命名空间，因此自定义路由是插件拥有配置页的方式。另在 `src/timeline.ts` 注册 `dshChatTimeline` 会话投影单元，持久化枚举用户消息。
 - **浏览器端**（`src/client/index.tsx`）：读写该路由、渲染设置页，并通过运行时 `<style>` 元素实时应用样式，覆盖稳定的 DSH 锚点（`[data-chat-flow]`、`[data-composer-card]`、`body` 上的 markdown 字体 token、`[data-slot="conversation.chat.node"]` 内的 markdown 表格）。
+- **时间线**（`src/client/timeline.tsx`）：挂在 `conversation.input.dock` 插槽、portal 到 `body`。数据按速度优先：会话投影 → 已加载聊天节点 → 后台 `loadOlder`。位置通过测量 `[data-conversation-scroll]`（消息区）右缘与垂直中线动态锚定，因此 DSH 原生列布局与右侧边栏（`#root` 的 margin-right 布局推挤）变化时都会自动跟随；颜色全部使用 DSH 主题变量（`--dsw-alias-*`），浅色/深色模式均正常。
 
 ## 协议