dsh-flyout-sidebar 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +43 -9
  2. package/README_EN.md +44 -9
  3. package/dist/client.js +1127 -276
  4. package/dist/index.js +483 -113
  5. package/package.json +4 -4
  6. package/snapshots/flyout-file-preview.png +0 -0
  7. package/snapshots/sidebar-file-preview.png +0 -0
  8. package/snapshots/sidebar.png +0 -0
package/README.md CHANGED
@@ -1,13 +1,22 @@
1
1
  # dsh-flyout-sidebar
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/dsh-flyout-sidebar.svg)](https://www.npmjs.com/package/dsh-flyout-sidebar)
3
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](#license)
4
5
 
5
- > DeepSeek Harness (DSH) 插件：可弹出式侧边栏——文件树 + Git 未提交变更列表，点击文件即可多标签预览，并可弹出为独立浏览器标签页。
6
+ > DeepSeek Harness (DSH) 插件：**可弹出式侧边栏**——文件树 + Git 未提交变更列表，多标签预览文件与 diff，预览区盖住整个会话区，还能一键**弹出为独立浏览器标签页**、拖到另一块显示器。
6
7
  >
7
8
  > 中文 ｜ [EN](README_EN.md)
8
9
 
10
+ ![侧边栏面板](snapshots/sidebar.png)
11
+
9
12
  ## 安装 / Install
10
13
 
14
+ ### npm 安装（推荐）
15
+
16
+ ```sh
17
+ dsh plugin --profile web add dsh-flyout-sidebar
18
+ ```
19
+
11
20
  ### 源码安装（GitHub）
12
21
 
13
22
  ```sh
@@ -36,23 +45,40 @@ dsh web
36
45
  dsh --profile web --dump-config | grep dsh-flyout-sidebar # 配置层含本行
37
46
  ```
38
47
 
48
+ ## 核心特性 / Highlights
49
+
50
+ - **可弹出**：面板左上角 ↗ 一键弹出为 `/flyout-sidebar` 独立浏览器标签页——可拖到另一块显示器当"文件面板"用，主屏对话不受任何遮挡；面板与弹出页经 `localStorage` 实时同步会话与主题，弹出页无标题栏、垂直空间全部留给内容
51
+ - **预览显示面积大**：预览覆盖层盖住侧边栏**左侧整个会话区域**（不是挤在窄面板里），代码行号 + 语法高亮、长文件、大图、PDF 都有足够的阅读宽度
52
+ - **多标签预览文件 / diff**：可同时打开多个文件标签，也可直接点 Git 变更列表打开**着色 unified diff**；支持代码高亮、Markdown 渲染、图片、PDF（内嵌 pdf.js，离线可用）、HTML 沙箱 iframe；⇥ 一键收起/恢复全部标签
53
+ - **自动刷新**：Git 变更列表自动跟随——agent 每次工具执行后 700ms 去抖刷新 + 2s 轮询 + 15s 兜底覆盖 IDE 等带外修改；点刷新按钮强制拉取真实状态，列表逐行浮现提示
54
+
55
+ ![多标签预览——大面积预览区](snapshots/sidebar-file-preview.png)
56
+
39
57
  ## 功能 / Features
40
58
 
41
59
  | # | 形式 | 入口 | 说明 |
42
60
  |---|------|------|------|
43
- | 1 | 文件树视图（默认） | 面板打开即见 | 浏览当前工作区目录，懒加载展开、目录优先排序，实时跟随工作区/会话切换重新定位根目录 |
44
- | 2 | Git 变更视图 | 面板右上角 git 分支图标 | 列出已变更未提交文件（`M`/`A`/`D`/`R`/`U` 徽章，悬停显示已暂存/未暂存，重命名显示原路径）；点击文件显示相对 HEAD 的着色 unified diff，未跟踪文件自动合成新文件 diff |
61
+ | 1 | 文件树视图（默认） | 面板打开即见 | 浏览当前工作区目录，懒加载展开、目录优先排序，实时跟随工作区/会话切换重新定位根目录；顶部搜索框按文件名过滤（`git ls-files` 秒搜全仓，尊重 gitignore） |
62
+ | 2 | Git 变更视图 | 面板右上角 git 分支图标 | 列出已变更未提交文件（`M`/`A`/`D`/`R`/`U` 徽章，悬停显示已暂存/未暂存，重命名显示原路径，每行显示 `+n −n` 行数统计）；点击文件显示相对 HEAD 的着色 unified diff，未跟踪文件自动合成新文件 diff |
45
63
  | 3 | 多标签预览 | 点击文件 | 预览覆盖层盖住侧边栏左侧整个区域，可同时打开多个文件；按扩展名自动语法高亮，另支持 Markdown 渲染、图片、PDF、HTML 沙箱 iframe；⇥ 收起整个预览（标签保留，点文件恢复） |
46
64
  | 4 | 弹出独立标签页 | 面板左上角 ↗ | 弹出为 `/flyout-sidebar` 独立网页，可拖到另一显示器；内容在左/面板在右，面板左右位置一键切换、宽度可拖动（默认最小宽，记忆偏好） |
47
65
 
48
- **特性一览：**
66
+ **其他特性一览：**
49
67
 
50
- - Git 变更列表按工作区分桶缓存：首次请求同步等待真实结果，之后即时响应 + 后台刷新（agent 每次工具执行后 700ms 去抖刷新，另有 15s 兜底轮询覆盖 IDE 等带外修改）
51
68
  - 切换项目/会话时自动清空全部预览标签，杜绝跨项目内容串显
52
69
  - git 变更行与文件树行可一键复制路径，或把 `@path` 引用写入会话输入框
53
70
  - 面板与弹出页实时跟随 DSH 浅色 / 深色主题（弹出页经 `localStorage` 同步，首屏即正确）
54
71
  - 与其他 sidebar 插件兼容：其他侧边卡片打开时自动让位到其左侧，两者同时可见
55
- - 弹出页无标题栏，垂直空间全部留给内容；状态（live / git error / offline）并入面板顶行
72
+ - 面板开合为推拉滑动动画，触发按钮随面板同步滑入滑出
73
+ - 中英双语界面：默认跟随浏览器语言，可在设置中固定；独立弹出页经 `localStorage` 同步语言选择
74
+ - 代码预览支持软换行（预览栏 ⇋ 图标或设置项），默认横向滚动
75
+ - `Esc` 逐级退出：先关活动预览标签，再收起面板；浏览器刷新后按会话恢复打开的预览标签（sessionStorage）
76
+ - 代码预览使用浏览器原生查找（⌘/Ctrl+F）：逐行渲染使行号在软换行下也对齐
77
+ - 图片预览支持滚轮缩放、拖拽平移、双击复位
78
+ - 预览栏 ↗（外开图标）可在系统默认编辑器/IDE 中打开当前文件（host 侧经 `open`/`xdg-open`/Windows `rundll32`，路径锚定工作区）
79
+ - 文件树健壮加载：工作区在 host 侧尚未解析完成时按指数退避自动重试（约 9s 窗口），仍失败则显示错误与「重试」按钮；点刷新重放自上而下的逐条浮现动画
80
+
81
+ ![弹出页——独立窗口全屏预览](snapshots/flyout-file-preview.png)
56
82
 
57
83
  ## 设置 / Settings
58
84
 
@@ -64,6 +90,8 @@ DSH 设置面板（左下角 ⚙️）新增「**Flyout Sidebar**」选项卡：
64
90
  | 自动刷新 | 开 | Git 变更视图打开时每 2s 轮询最新状态 |
65
91
  | 文件树 | 开 | 显示文件树视图与视图切换图标；关闭后面板固定显示 Git 变更视图 |
66
92
  | 最短面板宽度 | 20% | 面板最小宽度（占窗口宽度的百分比，20–60%）；更宽可拖动面板左边缘调整 |
93
+ | 界面语言 | 跟随浏览器 | 侧边栏与独立弹出页的显示语言（中文 / English）；弹出页需刷新后生效 |
94
+ | 代码换行 | 关 | 代码预览长行软换行；关闭则横向滚动（预览栏图标可临时切换） |
67
95
 
68
96
  设置保存在浏览器 `localStorage`（键 `dsh-flyout-sidebar:settings`），刷新后仍生效；弹出页的面板宽度/左右位置偏好分别存于 `dsh-flyout-sidebar:panelw` / `panelLeft`。
69
97
 
@@ -81,11 +109,14 @@ DSH 设置面板（左下角 ⚙️）新增「**Flyout Sidebar**」选项卡：
81
109
  │ - host/files.ts 文件树列目录 / 文本读取 │
82
110
  │ - host/page.ts 独立弹出页 HTML（内联 shared 源码） │
83
111
  │ - host/routes.ts ctx.webServer.register： │
84
- │ GET /flyout-sidebar/gitstatus 变更列表 JSON │
112
+ │ GET /flyout-sidebar/gitstatus 变更列表 JSON（支持 force） │
85
113
  │ GET /flyout-sidebar/gitdiff 单文件 diff JSON │
86
114
  │ GET /flyout-sidebar/listdir 文件树目录列表 │
87
115
  │ GET /flyout-sidebar/content 文本内容（代码预览） │
116
+ │ GET /flyout-sidebar/search 文件名搜索 │
88
117
  │ GET /flyout-sidebar/media 图片 / PDF 二进制 │
118
+ │ （media 响应带 CSP sandbox / nosniff，阻断内联 SVG XSS； │
119
+ │ 所有读路径均锚定工作区，无 /remove 等状态变更路由） │
89
120
  │ - tools/result 事件 → 700ms 去抖刷新对应工作区的状态缓存 │
90
121
  └──────────────────────────────────────────────────────────────────┘
91
122
  │ fetch
@@ -112,10 +143,10 @@ DSH 设置面板（左下角 ⚙️）新增「**Flyout Sidebar**」选项卡：
112
143
  ```sh
113
144
  npm run build # tsdown 重新生成 dist/index.js 与 dist/client.js
114
145
  npm run check # tsc --noEmit 类型检查（strict）
115
- npm test # node:test smoke：host 路由/事件 + client 组件渲染 + 弹出页脚本
146
+ npm test # node:test smoke：host 路由/事件 + client 组件渲染 + 弹出页脚本 + markdown/highlight 回归
116
147
  ```
117
148
 
118
- > 建议安装提交前守护（一次即可）：`ln -sf ../../scripts/precommit.sh .git/hooks/pre-commit`。每次 `git commit` 自动重建 bundle，产物与源码不同步会直接拦截提交。
149
+ > 建议安装提交前守护（一次即可）：`ln -sf ../../scripts/precommit.sh .git/hooks/pre-commit`。每次 `git commit` 自动重建 bundle 并执行类型检查与测试，产物与源码不同步或测试失败会直接拦截提交。
119
150
 
120
151
  项目结构：
121
152
 
@@ -124,6 +155,7 @@ dsh-flyout-sidebar/
124
155
  ├── tsdown.config.ts # tsdown 构建：host/client 双 bundle + ?raw 内联插件
125
156
  ├── src/index.ts # Host 入口（导出 name/inject/apply，ESM）
126
157
  ├── dist/ # ⚙️ 构建产物：index.js（host）/ client.js（浏览器），勿手改
158
+ ├── snapshots/ # README 截图
127
159
  ├── src/shared/ # 两端共享可移植模块（JSDoc 类型，随弹出页内联）：ext / markdown / highlight
128
160
  ├── src/host/ # host 模块：types / artifacts / workspace / files / git / page（弹出页 HTML）/ routes（HTTP）
129
161
  ├── src/client/ # client 模块（TSX）：jsx（React 桥）/ runtime / store / styles / icons / preview / components
@@ -140,6 +172,8 @@ dsh plugin --profile web update dsh-flyout-sidebar # 或重新 add
140
172
 
141
173
  随后重启 `dsh web` 并硬刷新浏览器。
142
174
 
175
+ > 若安装后仍是旧版本：DSH profile 的 pnpm 供应链策略 `minimumReleaseAge`（默认 24 小时）会暂缓安装刚发布的版本；可在 profile 的 `pnpm-workspace.yaml` 的 `minimumReleaseAgeExclude` 中加入本包名（不带版本号）立即解锁。
176
+
143
177
  ## 友情链接 / Links
144
178
 
145
179
  - [LinuxDo](https://linux.do)
package/README_EN.md CHANGED
@@ -1,13 +1,22 @@
1
1
  # dsh-flyout-sidebar
2
2
 
3
+ [![npm version](https://img.shields.io/npm/v/dsh-flyout-sidebar.svg)](https://www.npmjs.com/package/dsh-flyout-sidebar)
3
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](#license)
4
5
 
5
- > DeepSeek Harness (DSH) plugin: a flyout sidebar with a file tree and the Git changed-but-uncommitted files, multi-tab file preview, and a standalone flyout browser tab.
6
+ > DeepSeek Harness (DSH) plugin: a **flyout sidebar** — file tree + Git changed-but-uncommitted files, multi-tab preview of files and diffs, a preview area that covers the whole conversation region, and one-click **pop-out to a standalone browser tab** you can drag to another monitor.
6
7
  >
7
8
  > [中文](README.md) ｜ EN
8
9
 
10
+ ![Sidebar panel](snapshots/sidebar.png)
11
+
9
12
  ## Install
10
13
 
14
+ ### From npm (recommended)
15
+
16
+ ```sh
17
+ dsh plugin --profile web add dsh-flyout-sidebar
18
+ ```
19
+
11
20
  ### From GitHub sources
12
21
 
13
22
  ```sh
@@ -36,23 +45,40 @@ After installing, **restart `dsh web`** and **hard-refresh the browser** (Cmd/Ct
36
45
  dsh --profile web --dump-config | grep dsh-flyout-sidebar # this line should appear
37
46
  ```
38
47
 
48
+ ## Highlights
49
+
50
+ - **Pop it out**: the ↗ button in the panel header pops the sidebar out to a standalone `/flyout-sidebar` browser tab — drag it to another monitor and use it as a dedicated file panel while the main screen keeps the conversation unobstructed; the panel and the flyout sync session and theme in real time via `localStorage`, and the flyout has no title bar so all vertical space goes to content
51
+ - **Large preview area**: the preview overlay covers the **entire conversation region to the left of the sidebar** (not a narrow strip) — code with line numbers + syntax highlighting, long files, large images and PDFs all get plenty of reading width
52
+ - **Multi-tab preview of files / diffs**: open many file tabs at once, or click a Git change to open a **colored unified diff**; supports code highlighting, Markdown rendering, images, PDF (embedded pdf.js, offline-safe) and sandboxed HTML iframes; ⇥ collapses/restores all tabs at once
53
+ - **Auto refresh**: the Git changes list follows automatically — a 700ms debounce after every agent tool run, 2s polling, and a 15s fallback covering out-of-band IDE edits; the refresh button forces a real fetch with a row-by-row reveal animation
54
+
55
+ ![Multi-tab preview — large preview area](snapshots/sidebar-file-preview.png)
56
+
39
57
  ## Features
40
58
 
41
59
  | # | Form | Entry | Description |
42
60
  |---|------|-------|-------------|
43
- | 1 | File tree view (default) | visible when the panel opens | Browse the current workspace; lazy-expanded directories, directories first; re-roots automatically when the workspace/session switches |
44
- | 2 | Git changes view | git-branch icon in the panel header | Lists changed-but-uncommitted files (`M`/`A`/`D`/`R`/`U` badges, hover for staged/unstaged, renames show the original path); clicking a file shows a colored unified diff against HEAD — untracked files get a synthesized new-file diff |
61
+ | 1 | File tree view (default) | visible when the panel opens | Browse the current workspace; lazy-expanded directories, directories first; re-roots automatically when the workspace/session switches; a search box at the top filters files by name (instant full-repo search via `git ls-files`, gitignore-aware) |
62
+ | 2 | Git changes view | git-branch icon in the panel header | Lists changed-but-uncommitted files (`M`/`A`/`D`/`R`/`U` badges, hover for staged/unstaged, renames show the original path, per-file `+n −n` line stats); clicking a file shows a colored unified diff against HEAD — untracked files get a synthesized new-file diff |
45
63
  | 3 | Multi-tab preview | click a file | The preview overlay covers the entire area left of the sidebar; open many files at once; syntax highlighting by extension, plus Markdown, images, PDF and sandboxed HTML iframes; ⇥ collapses the whole preview (tabs kept, opening a file restores them) |
46
64
  | 4 | Flyout tab | ↗ in the panel header | Pops out to `/flyout-sidebar`, draggable to another monitor; content left / file panel right, one-click side swap, draggable width (defaults to minimum, preference remembered) |
47
65
 
48
- **Highlights:**
66
+ **More:**
49
67
 
50
- - Git status is cached per workspace: the first request awaits the real result, then polls answer instantly while a background refresh runs (700ms debounce after every agent tool run, plus a 15s safety poll covering IDE edits)
51
68
  - Switching projects/sessions clears all preview tabs automatically, so content never leaks across workspaces
52
69
  - One-click path copy, or write an `@path` quote into the session composer, from git change rows and file tree rows
53
70
  - Both the panel and the flyout tab follow DSH's light/dark theme in real time (the flyout syncs via `localStorage`, correct on first paint)
54
71
  - Coexists with other sidebar plugins: it shifts left of other side cards automatically, both stay visible
55
- - The flyout has no title bar — all vertical space goes to content; the status (live / git error / offline) lives in the panel header row
72
+ - The panel opens/closes with a push-pull slide animation; the trigger button slides along with it
73
+ - Bilingual UI (Chinese / English): follows the browser language by default, pinnable in settings; the flyout syncs the choice via `localStorage`
74
+ - Code previews support soft wrap (⇋ icon in the preview bar or the setting), horizontal scrolling by default
75
+ - `Esc` exits stepwise: closes the active preview tab first, then collapses the panel; open preview tabs are restored per session after a browser reload (sessionStorage)
76
+ - Code previews use the browser's native find (⌘/Ctrl+F); per-line rendering keeps line numbers aligned even with soft wrap
77
+ - Image previews support wheel zoom, drag panning and double-click reset
78
+ - The external-link icon in the preview bar opens the current file in the system editor/IDE (host side via `open`/`xdg-open`/Windows `rundll32`, path anchored to the workspace)
79
+ - Resilient file tree loading: when the workspace is not yet resolvable on the host, it retries with exponential backoff (~9s window), then shows an error with a Retry button; clicking refresh replays the top-down staggered row animation
80
+
81
+ ![Flyout tab — full-window preview](snapshots/flyout-file-preview.png)
56
82
 
57
83
  ## Settings
58
84
 
@@ -64,6 +90,8 @@ A "**Flyout Sidebar**" tab appears in the DSH settings panel (⚙️ in the bott
64
90
  | Auto refresh | on | Poll the latest git status every 2s while the changes view is open |
65
91
  | File tree | on | Show the file tree view and the view-toggle icon; when off the panel always shows the Git changes view |
66
92
  | Min panel width | 20% | Minimum panel width (percent of window width, 20–60%); drag the panel's left edge to widen it |
93
+ | Interface language | auto (browser) | Display language for the sidebar and the flyout page (Chinese / English); the flyout applies it after a reload |
94
+ | Code wrap | off | Soft-wrap long lines in code previews; horizontal scrolling when off (the preview-bar icon toggles it temporarily) |
67
95
 
68
96
  Settings are stored in the browser's `localStorage` (key `dsh-flyout-sidebar:settings`); the flyout's panel width / side preferences live in `dsh-flyout-sidebar:panelw` / `panelLeft`.
69
97
 
@@ -83,11 +111,15 @@ The plugin splits into a host side and a client side, written in TypeScript + JS
83
111
  │ - host/page.ts standalone flyout page HTML (inlines the │
84
112
  │ shared modules) │
85
113
  │ - host/routes.ts ctx.webServer.register: │
86
- │ GET /flyout-sidebar/gitstatus change list JSON │
114
+ │ GET /flyout-sidebar/gitstatus change list JSON (?force) │
87
115
  │ GET /flyout-sidebar/gitdiff per-file diff JSON │
88
116
  │ GET /flyout-sidebar/listdir directory listing │
89
117
  │ GET /flyout-sidebar/content text content (code preview) │
118
+ │ GET /flyout-sidebar/search filename search │
90
119
  │ GET /flyout-sidebar/media images / PDF binary │
120
+ │ (media responses carry CSP sandbox / nosniff to block inline │
121
+ │ SVG XSS; every read path is anchored to the workspace and │
122
+ │ there are no state-mutating routes like /remove) │
91
123
  │ - tools/result event → 700ms debounced cache refresh │
92
124
  └──────────────────────────────────────────────────────────────────┘
93
125
  │ fetch
@@ -115,10 +147,10 @@ Technical notes: a single `tsdown.config.ts` bundles both sides (host ESM / clie
115
147
  ```sh
116
148
  npm run build # tsdown: regenerate dist/index.js and dist/client.js
117
149
  npm run check # tsc --noEmit strict type checking
118
- npm test # node:test smoke tests (host routes/events + client rendering + flyout page)
150
+ npm test # node:test smoke tests (host routes/events + client rendering + flyout page + markdown/highlight regression)
119
151
  ```
120
152
 
121
- > Recommended one-time setup of the pre-commit guard: `ln -sf ../../scripts/precommit.sh .git/hooks/pre-commit`. Every `git commit` rebuilds the bundles automatically and blocks the commit if they are out of sync with the sources.
153
+ > Recommended one-time setup of the pre-commit guard: `ln -sf ../../scripts/precommit.sh .git/hooks/pre-commit`. Every `git commit` rebuilds the bundles and runs the type check and tests, blocking the commit if the bundles are out of sync or any test fails.
122
154
 
123
155
  Project structure:
124
156
 
@@ -127,6 +159,7 @@ dsh-flyout-sidebar/
127
159
  ├── tsdown.config.ts # tsdown build: host/client bundles + ?raw inline plugin
128
160
  ├── src/index.ts # host entry (exports name/inject/apply, ESM)
129
161
  ├── dist/ # ⚙️ generated: index.js (host) / client.js (browser), do not edit
162
+ ├── snapshots/ # README screenshots
130
163
  ├── src/shared/ # shared portable modules (JSDoc types, inlined into the flyout page): ext / markdown / highlight
131
164
  ├── src/host/ # host modules: types / artifacts / workspace / files / git / page (flyout HTML) / routes (HTTP)
132
165
  ├── src/client/ # client modules (TSX): jsx (React bridge) / runtime / store / styles / icons / preview / components
@@ -143,6 +176,8 @@ dsh plugin --profile web update dsh-flyout-sidebar # or `add` again
143
176
 
144
177
  Then restart `dsh web` and hard-refresh the browser.
145
178
 
179
+ > If you still get the old version after publishing: the DSH profile's pnpm supply-chain policy `minimumReleaseAge` (24h by default) holds back freshly published versions. Add this package's name (without a version) to `minimumReleaseAgeExclude` in the profile's `pnpm-workspace.yaml` to unlock it immediately.
180
+
146
181
  ## Links
147
182
 
148
183
  - [LinuxDo](https://linux.do)