dsh-visualization 0.1.4 → 0.1.5

package/README.md

@@ -1,325 +1,65 @@
-# DSH Visualization — session instrument for DeepSeek Harness
+# dsh-visualization
 
-A layered instrument for a live DSH session: a sidebar icon, a full panel showing the session's
-rings, turns, tools and background jobs.
+A **session instrument** for DeepSeek Harness: a sidebar icon that opens a live panel showing the
+current session as seven rings, a turn timeline, per-step ladders, background jobs, approvals and
+file changes — read straight from the session log, updated while the conversation runs.
 
-**English** (below) · **[中文说明](#中文)** at the bottom.
+![The instrument](https://raw.githubusercontent.com/peilopielo/dsh-Visualization/main/assets/shot-overview.png)
 
-> The standalone version (open `standalone/start.cmd`, no DSH plugin needed) lives in [`standalone/`](standalone/).
-
-- **Seven rings**: ① session · ② steps · ③ skills · ④ tools · ⑤ jobs · ⑥ approvals · ⑦ changes — each one toggleable
-- **Turn timeline**: two lines per turn — number + steps/tools/duration, then the prompt you typed
-- **Connections**: per-step ladders (①→②→③→④) with dots running along them, or beams from the core
-- **Hover / click**: every node on every ring answers — hover for its name, click for details (tools list the last six actual commands)
-- **Turn scoping**: `show turns` / `line turns` knobs narrow the view to the last N turns
-- Every display option is remembered in `localStorage`
-
----
-
-# For users
-
-## Requirements
-
-- **Node ≥ 22.15** in the host: session logs are zstd-compressed. Without support the panel says so
-  explicitly instead of rendering blank.
-- Session directory defaults to `~/.dsh/sessions`; if DSH stores data elsewhere, set `DSH_HOME`
-  or `DSHVIZ_SESSIONS_ROOT`.
+**English** · **[中文](#中文)** below.
 
 ## Install
 
 ```powershell
-# local directory (development)
-#   plugin_manager install_bundle, target = this directory
-# from npm (after publishing)
-#   search "dsh-visualization" on the Plugins page
+# from the plugin market / Plugins page: search "dsh-visualization"
+# or from npm:
+npm i dsh-visualization
 ```
 
-A ring icon appears in the left rail; click it to open the instrument.
-
-Or from npm: pm i dsh-visualization (package: https://www.npmjs.com/package/dsh-visualization).
-
-## Reading the panel
-
-| Area | What it tells you |
-|---|---|
-| Centre number | current turn; `TOOL` / `THINKING` / `IDLE` above it |
-| ① session ring | context-window usage + the last 12 turn ticks |
-| ② step ring | time buckets; thicker = more time spent in that slice |
-| ③ skill ring | 16 slots; one lights up per loaded skill |
-| ④ tool ring | composition by call count (or by time — see `share`) |
-| ⑤ job ring | one arc per background job, length ∝ runtime |
-| ⑥ approval ring | one tick per approval, colour = outcome |
-| ⑦ change ring | one tick per file change; deliverables are taller |
-| Right column | session flow, context, jobs, turn timeline, tool totals |
-| Bottom | event log, grouped by turn |
-
-Direction matters: on ②–⑦ the newest data sits at 12 o'clock and older data goes clockwise.
+A ring icon appears in the left rail — click it to open the panel.
 
-## The controls (bottom left)
+## Learn more
 
-| Control | Options |
+| Document | For |
 |---|---|
-| rings `①…⑦` | show/hide each layer; radii re-spread to fill the space |
-| `spin` | slow rotation of ②③④ |
-| `lines` | `ladders` / `beams` / `both` |
-| `share` | tool ring sized by `count` or by `time` |
-| `line turns` | how many turns get connectors (`2` by default) |
-| `show turns` | how many turns every panel covers |
-| `⧉ window` | open a separate window you can drag to another monitor |
-| `中 / EN` | switch language |
-
-`line turns` can never exceed `show turns` — the connector count is clamped automatically.
-
-## Language
-
-The UI ships in Chinese and English. It starts from `navigator.language`, remembers your choice,
-and can be forced per page with `?lang=en` / `?lang=zh`.
-
-## Using it as a desktop wallpaper
-
-The panel can also run inside **Wallpaper Engine** (Steam). The plugin opens a small fixed-port
-endpoint — `http://127.0.0.1:8799/` — because the DSH Web port changes on every launch and a
-wallpaper cannot guess it.
-
-**Requirements**: the plugin installed, and DSH running. If DSH is off the wallpaper shows a hint
-and retries every 5 seconds; when DSH comes back on a different port the wallpaper finds it again.
-
-![How to set it as a wallpaper](https://raw.githubusercontent.com/peilopielo/dsh-Visualization/main/assets/howto.png)
-
-**Install the wallpaper**
-
-1. In Wallpaper Engine: **Create Wallpaper** → pick **Web** as the type
-2. When it asks for a file, choose the `wallpaper/index.html` from this repository (or
-   `wallpaper/project.json` if your version of WE asks for a project)
-3. Save the project somewhere permanent and preview it. It connects to `127.0.0.1:8799` by itself.
+| **[GUIDE.md](GUIDE.md)** | Using it: reading the rings, every control, wallpapers, troubleshooting |
+| **[AGENTS.md](AGENTS.md)** | Changing it: file map, build rules, data flow, release flow, known traps |
+| **[FAQ.md](FAQ.md)** | Why the license is non-OSI, privacy, limits |
 
-**Changing the port**: the plugin tries 8799, then 8798, 8797, 8796, 8795. To use a different base
-port, set `wallpaperPort` in the plugin config; set it to `0` to turn the endpoint off.
+**Requirements**: Node ≥ 22.15 in the host (the session log is zstd-compressed).
 
-**If it stays on the "not connected" screen**
-
-| Cause | Fix |
-|---|---|
-| DSH is not running | start it |
-| the plugin is disabled | enable `dsh-visualization` on the Plugins page |
-| 8799–8795 are all taken | set `wallpaperPort` to a free port and edit `PORTS` in `wallpaper/index.html` |
-| CPU spikes while gaming | in Wallpaper Engine, enable "pause when a fullscreen app runs" |
-
-## When something looks wrong
-
-| Symptom | Cause |
-|---|---|
-| Panel says "this runtime does not support zstd" | Node < 22.15 in the host |
-| Panel says the session directory is empty | no session has run in this profile yet |
-| Panel is empty with 403 in the network tab | you are not on loopback; set `allowRemote: true` (only on trusted machines) |
-| A step ring segment is dim and has no line | that step is outside `line turns` — raise it, or lower `show turns` |
-| A bright segment has no line | that step made no tool calls (a text-only step) |
+**License**: [PolyForm Noncommercial 1.0.0](LICENSE) — free for personal use, study, research and
+teaching; commercial use is not granted. The visual language derives from
+[HALOFLUX](https://github.com/Ryder191/haloflux), and that attribution stays.
 
 ---
 
-# For plugin developers and agents
+## 中文
 
-## Files
+DeepSeek Harness 的**会话仪表盘**：侧栏一个环图标，打开后把当前会话画成七层环 + 轮次时间线 +
+逐步阶梯连线，工具调用、后台任务、审批、文件变更都在上面，数据直接读会话日志，对话进行中实时更新。
 
-```
-index.js        host entry: registers the /<basePath> route, injects origin + policy
-fold.cjs        the whole host brain: session discovery, zstd frames, incremental fold, HTTP/SSE routes
-client.js       client half: sidebar icon + a main-panel iframe pointing at the page
-web/index.html  the instrument page (GENERATED — do not edit by hand)
-build.cjs       regenerates web/index.html from ../instrument.html
-cordis.patch.yml / locale/*.json / icon.svg   metadata
-```
-
-## Editing rules (the part that bites)
+![界面](https://raw.githubusercontent.com/peilopielo/dsh-Visualization/main/assets/shot-overview.png)
 
-1. **The page has a single source: `instrument.html`** in the repository root. Edit that, then run
-   `node build.cjs`. The build only rewrites absolute endpoints (`/state` → `state`) so the page works
-   under a path prefix. Editing `web/index.html` directly will be overwritten.
-2. **Host changes need a DSH restart.** `fold.cjs` and `index.js` are ESM modules; toggling the plugin
-   only remounts the route — the loaded module is not re-evaluated. `client.js` and `web/*` pick up on
-   a page refresh.
-3. **Debug globals are gated**: `window.__M` / `__HIT` / `__CHAIN` only exist with `?debug=1`
-   (or `#debug`, or `localStorage.dshviz.debug=1`).
-4. **Never rewrite the page with a one-line shell command.** It has been destroyed that way once.
-   Use edits, or author a small `.cjs` patch script and run it.
+## 安装
 
-## Data flow
-
-```
-~/.dsh/sessions/<ws>/<session>/session.v<N>.jsonl.zstd
-  └─ zstdFrames()   parse RFC 8878 headers+blocks → exact frame boundaries
-  └─ unzstdAll()    decode only the frames appended since last read
-  └─ makeFolder()   reducer: push(newEvents) → result()  (never re-scans history)
-  └─ /dsh-visualization/state (one-shot)   /dsh-visualization/events (SSE, pushes only on change)
-  └─ page: applyState() → render() (DOM) + draw() (canvas)
+```powershell
+# 插件市场 / 插件页搜索 "dsh-visualization"
+# 或者从 npm 装：
+npm i dsh-visualization
 ```
 
-Cost at ~8.7k events: first fold 240–260 ms, then 7–12 ms per change. Frame parsing is exact, so a
-partially-written tail frame simply stops the walk and is picked up next time.
-
-## Adding things
-
-**A new ring** — three places, all inside `instrument.html`:
-`RINGVIS` / `RING_NAME` / `RING_COL` (state + labels), the `if (RINGVIS[n])` drawing block in `draw()`,
-and `hitReg({ kind, r, a0, a1, label, data })` so hover/click works. Add a detail renderer branch in
-`showDetail()` if the card needs fields.
-
-**A new language** — `EN` map (whole-string matches), `EN_RULES` (templated phrases), `EN_FN`
-(replacements that need logic). `LANG` currently accepts `zh` | `en`; to add a third, turn it into a
-list and key the dictionaries by code.
-
-**A new tool kind colour** — `toolColor(name)` in `instrument.html`.
-
-## Config
-
-| Field | Default | Meaning |
-|---|---|---|
-| `basePath` | `/dsh-visualization` | route prefix |
-| `allowRemote` | `false` | allow non-loopback peers. **This exposes session logs to anyone who can reach the port.** |
-| `wallpaperPort` | `8799` | fixed local port for the wallpaper entry; tries 8799 down to 8795. `0` disables it |
-
-## Routes
-
-| Path | Purpose |
-|---|---|
-| `/dsh-visualization/` | the page |
-| `/dsh-visualization/state` | folded state, one-shot (`?session=<id>` to pin a session) |
-| `/dsh-visualization/events` | same payload over SSE; pushed only when something changed (250 ms check) |
-| `/dsh-visualization/sessions` | session list |
-| `/dsh-visualization/select?session=` | switch the pinned session |
-| `/dsh-visualization/calls?tool=&limit=` | recent calls of one tool, fetched on demand |
-| `/dsh-visualization/replay?action=` | replay a session's history |
-
-Limits: loopback-only by default, gzip on state, SSE capped at 8 concurrent clients.
-
-## Performance notes
-
-| Stage | Before | Now |
-|---|---|---|
-| Transport | 566 KB every 900 ms | 51 KB gzip, only on change |
-| Decompression | whole log each time | only appended zstd frames |
-| Fold | every event each time | only new events |
-| Idle traffic | continuous polling | zero (15 s heartbeat only) |
-
-## Known limitations
-
-- **Memory grows with the session**: the reducer keeps derived state for every event. Steps/tools/log are
-  capped; counters are cumulative. At ~100k events `result()` still sorts 1.2k steps and 1.5k tools,
-  roughly 10–20 ms per frame.
-- **Two UI languages only** (zh/en).
-- **Read-only**: the instrument never writes session files.
-
-## License
-
-**[PolyForm Noncommercial License 1.0.0](./LICENSE)** — Copyright (c) 2026 Ryder191 (RYDER CODE / Ms MAIKEBAIs CAT).
-
-- **Noncommercial only.** Personal use, study, research, teaching and hobby projects are free.
-  Selling it, bundling it into a paid product, using it inside a company, or paid support is **not** permitted.
-- **This is a derivative of HALOFLUX** (visual language, layout, rings, palette —
-  https://github.com/Ryder191/haloflux). Per HALOFLUX's terms, derivatives must stay noncommercial and keep
-  the attribution.
-- **Keep the notices.** If you redistribute, pass along this LICENSE and its two `Required Notice:` lines.
-- The page's bottom-right credit line (`DSH Visualization by Ryder191 · PolyForm NC · visual language: HALOFLUX`)
-  must stay.
-
----
-
-# 中文
-
-把 DeepSeek Harness 的会话画成一台**分层仪表**：侧栏点一下，中间面板显示当前会话的环、轮次、工具和后台任务。
-
-## 使用说明
-
-**环境要求**：宿主 Node ≥ 22.15（会话日志是 zstd）。会话目录默认 `~/.dsh/sessions`，
-DSH 装在别处时用环境变量 `DSH_HOME` 或 `DSHVIZ_SESSIONS_ROOT` 指过去。
+装好后左侧栏出现环图标，点开就是面板。
 
-**安装**：本地目录用 `plugin_manager install_bundle` 指向本目录；发布后可在插件页搜索 `dsh-visualization`。
-安装后左侧栏出现环图标，点开即是仪表盘。
+## 更多文档
 
-**怎么读**：中心数字是当前轮次，上方是状态（`TOOL`/`THINKING`/`IDLE`）。① 会话环是上下文占用 + 最近
-12 轮刻度；② 步骤环按时间分格，格子越粗表示那段时间花得越久；③ 技能环 16 格，加载一个亮一个；
-④ 工具环按调用次数（或耗时）分扇区；⑤ 任务环每个后台任务一段弧，弧长 = 运行时长；⑥ 审批环每次审批一根
-刻度；⑦ 变更环每次文件改动一根刻度。**12 点方向是最新的，越旧越顺时针**。
-
-**控件**（左下角）：七个环开关、环旋转、连线模式（阶梯/光束/两者）、占比口径、连线轮数、显示轮数、
-`⧉ 新窗口`（拖到副屏）、`中 / EN`。`连线轮数` 不会超过 `显示轮数`，超了会自动钳制。
-
-**语言**：默认跟随 `navigator.language`，选了就记住；也可以 `?lang=en` / `?lang=zh` 临时指定。
-
-**常见现象**：
-
-| 现象 | 原因 |
+| 文档 | 给谁看 |
 |---|---|
-| 面板说"不支持 zstd" | 宿主 Node < 22.15 |
-| 面板说会话目录是空的 | 这个 profile 还没跑过对话 |
-| 面板空白、网络面板里 403 | 不是本机访问；需要远程看才把 `allowRemote` 打开 |
-| 某个格子暗、没有线 | 它不在「连线轮数」范围内 |
-| 格子亮、没有线 | 这一步没有工具调用（纯文字步） |
-
-## 当桌面壁纸用（Wallpaper Engine）
-
-这个面板也能放进 **Wallpaper Engine**（Steam）当桌面壁纸。插件会在本机开一个**固定端口**——
-`http://127.0.0.1:8799/`——因为 DSH 的 Web 端口每次启动都会变，壁纸没法猜。
-
-**前提**：装了插件，且 DSH 正在运行。DSH 关掉时壁纸显示提示并每 5 秒重试；DSH 换了端口重启，
-壁纸会自己重新找到。
-
-![How to set it as a wallpaper](https://raw.githubusercontent.com/peilopielo/dsh-Visualization/main/assets/howto.png)
-
-**导入步骤**
-
-1. Wallpaper Engine 里点 **创建壁纸（Create Wallpaper）** → 类型选 **网页（Web）**
-2. 选文件时指向本仓库的 `wallpaper/index.html`（如果你的版本要选工程，就选 `wallpaper/project.json`）
-3. 存到固定位置，应用即可。它会自己连上 `127.0.0.1:8799`
-
-**改端口**：插件会依次尝试 8799 → 8798 → 8797 → 8796 → 8795。想换起始端口，在插件配置里写
-`wallpaperPort`；写 `0` 就是关掉这个入口。
-
-**一直显示"没有连上"怎么办**
-
-| 原因 | 处理 |
-|---|---|
-| DSH 没开 | 启动 DSH |
-| 插件被禁用了 | 在插件页启用 `dsh-visualization` |
-| 8795–8799 都被占用 | 配置里换个端口，同时改 `wallpaper/index.html` 里的 `PORTS` 数组 |
-| 玩游戏时卡顿 | 在 Wallpaper Engine 里打开"其他应用全屏时暂停" |
-
-## 给 agent / 开发者的编辑说明
-
-**文件**：`index.js`（宿主入口，注册路由 + 注入 origin/策略）、`fold.cjs`（会话发现、zstd 帧解析、
-增量折叠、HTTP/SSE 路由）、`client.js`（侧栏图标 + 面板 iframe）、`web/index.html`（**生成物**）、
-`build.cjs`（从主仓库 `instrument.html` 重新生成）。
-
-**四条规矩**：
-
-1. **页面只有一个源**：改 `../instrument.html`，再跑 `node build.cjs`。直接改 `web/index.html` 会被覆盖。
-2. **改宿主必须重启 DSH**：`fold.cjs` / `index.js` 是 ESM，插件开关只会重挂路由，不会重新求值。
-   `client.js` 和 `web/*` 刷新页面即可。
-3. **调试全局是门控的**：`window.__M` / `__HIT` / `__CHAIN` 只在 `?debug=1` 时存在。
-4. **绝不用单行命令整篇覆盖页面**——它被这样毁过一次。用编辑工具，或写一个 `.cjs` 补丁脚本再执行。
-
-**数据流**：`张日志 → zstdFrames()（按 RFC 8878 精确切帧）→ 只解新帧 → makeFolder().push(新事件) →
-/dsh-visualization/state（一次性）或 /dsh-visualization/events（SSE，变化才推）→ applyState() → render() + draw()`。
-
-**8.7k 事件的开销**：首次 240~260ms，之后每次变化 7~12ms。
-
-**加东西**：新环 = `RINGVIS`/`RING_NAME`/`RING_COL` + `draw()` 里的绘制块 + `hitReg(...)` 登记 +
-`showDetail()` 的详情分支；新语言 = `EN` 词典 + `EN_RULES` 正则 + `EN_FN` 逻辑替换，并把 `LANG`
-从 `'zh'|'en'` 改成列表；新工具配色 = `toolColor()`。
-
-**配置**：`basePath`（默认 `/dsh-visualization`）、`allowRemote`（默认 `false`，打开等于把会话日志暴露给能访问该端口的人）、
-`wallpaperPort`（默认 `8799`，壁纸用的固定端口，写 0 关闭）。
-
-**已知限制**：内存随会话线性增长（十万条时每帧 `result()` 约 10~20ms）；界面只有中英两门语言；
-仪表只读，从不写会话文件。
-
-## 许可证
+| **[GUIDE.md](GUIDE.md)** | 怎么用：怎么读环、每个控件、桌面壁纸、排错 |
+| **[AGENTS.md](AGENTS.md)** | 怎么改：文件地图、构建规则、数据流、发布流程、踩过的坑 |
+| **[FAQ.md](FAQ.md)** | 为什么不用 OSI 许可、隐私、限制 |
 
-**[PolyForm Noncommercial License 1.0.0](./LICENSE)** —— Copyright (c) 2026 Ryder191（RYDER CODE / Ms MAIKEBAIs CAT）。
+**环境要求**：宿主 Node ≥ 22.15（会话日志是 zstd 压缩的）。
 
-- **仅限非商业用途**：个人学习、兴趣项目、研究、教学可自由使用、修改、分享。
-  **禁止**：出售、集成进付费产品、在公司内部或代表公司使用、接单或有偿项目。
-- **本项目是 HALOFLUX 的衍生作品**（视觉语言、布局、环与配色均来自
-  https://github.com/Ryder191/haloflux）。按 HALOFLUX 的条款，衍生作品必须同为非商业并保留署名。
-- **保留声明**：转发时附带本 LICENSE 与其中的两行 `Required Notice:`。
-- 页面右下角署名（`DSH Visualization by Ryder191 · PolyForm NC · visual language: HALOFLUX`）不得删除。
+**许可**：[PolyForm Noncommercial 1.0.0](LICENSE) —— 个人使用、学习、研究、教学免费，不授予商业用途。
+视觉语言来自 [HALOFLUX](https://github.com/Ryder191/haloflux)，该署名保留。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-visualization",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "DSH Visualization — a session instrument: rings, turns, tools and background jobs of a live DeepSeek Harness session.",
   "type": "module",
   "main": "index.js",
@@ -28,7 +28,15 @@
     "LICENSE",
     "README.md",
     "FAQ.md",
-    "wallpaper"
+    "GUIDE.md",
+    "AGENTS.md",
+    "screenshots.json",
+    "wallpaper/live.html",
+    "wallpaper/hybrid.html",
+    "wallpaper/project.json",
+    "wallpaper/preview.jpg",
+    "wallpaper/lively",
+    "wallpaper/lively-package.zip"
   ],
   "keywords": [
     "dsh",

package/screenshots.json

@@ -0,0 +1,5 @@
+[
+  "assets/shot-overview.png",
+  "assets/shot-detail.png",
+  "assets/shot-english.png"
+]

package/wallpaper/hybrid.html

@@ -0,0 +1,221 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<title>DSH Visualization</title>
+<style>
+  /* 设计分辨率 2560×1440，整块按比例缩放适配任意屏幕 */
+  html, body { margin: 0; height: 100%; background: #0b0d11; overflow: hidden }
+  #stage {
+    position: absolute; left: 0; top: 0; width: 2560px; height: 1440px;
+    transform-origin: 0 0;
+    background: radial-gradient(ellipse 64% 60% at 38% 44%, #31363e 0%, #282d34 40%, #1f2329 72%, #191c21 100%);
+  }
+  #stage > * { position: absolute; display: block }
+  /* 左区：原生 canvas（环 + 动画） */
+  #c { left: 0; top: 56px; width: 2130px; height: 1158px }
+  /* 三块截图条 */
+  #sTop { left: 0; top: 0; width: 2560px; height: 56px }
+  #sRight { left: 2130px; top: 56px; width: 430px; height: 1158px }
+  #sBottom { left: 0; top: 1214px; width: 2560px; height: 226px }
+  #hint {
+    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
+    color: #8d97ab; font: 15px/1.8 "Segoe UI", "Microsoft YaHei", sans-serif;
+    text-align: center; display: none; z-index: 20
+  }
+  #hint b { display: block; color: #e6edfa; font-size: 19px; margin-bottom: 8px }
+</style>
+</head>
+<body>
+<div id="stage">
+  <canvas id="c"></canvas>
+  <img id="sTop" alt="">
+  <img id="sRight" alt="">
+  <img id="sBottom" alt="">
+  <div id="hint"><b>DSH Visualization</b><div>等待画面…</div></div>
+</div>
+<script>
+/* ---- 缩放适配 ---- */
+var stage = document.getElementById('stage');
+function fit() {
+  var s = Math.min(innerWidth / 2560, innerHeight / 1440);
+  stage.style.transform = 'scale(' + s + ')';
+  stage.style.left = ((innerWidth - 2560 * s) / 2) + 'px';
+  stage.style.top = ((innerHeight - 1440 * s) / 2) + 'px';
+}
+fit(); addEventListener('resize', fit);
+
+/* ---- 截图条：定时换查询串，坏图就藏起来 ---- */
+var strips = ['sTop', 'sRight', 'sBottom'].map(function (id) { return document.getElementById(id) });
+var hint = document.getElementById('hint');
+var loaded = 0;
+strips.forEach(function (img) {
+  img.onload = function () { loaded++; if (loaded >= 1) hint.style.display = 'none' };
+  img.onerror = function () { if (loaded === 0) hint.style.display = 'block' };
+});
+var names = ['strip-top.png', 'strip-right.png', 'strip-bottom.png'];
+var n = 0;
+function refreshStrips() {
+  var q = '?t=' + Date.now() + '-' + (n++);
+  strips.forEach(function (img, i) { img.src = names[i] + q });
+}
+refreshStrips();
+setInterval(refreshStrips, 8000);
+
+/* ---- 左区原生 canvas：环 + 光点（数据每 3 秒拉一次） ---- */
+var cv = document.getElementById('c'), ctx = cv.getContext('2d');
+var CW = 2130, CH = 1158;
+function sizeCanvas() {
+  var d = Math.min(devicePixelRatio || 1, 1.5);
+  cv.width = Math.round(CW * d); cv.height = Math.round(CH * d);
+  ctx.setTransform(d, 0, 0, d, 0, 0);
+}
+sizeCanvas();
+
+var PORTS = [8799, 8798, 8797, 8796, 8795], port = 0, S = null, t0 = Date.now();
+function probe() {
+  var i = 0;
+  (function next() {
+    if (i >= PORTS.length) { setTimeout(probe, 5000); return }
+    var p = PORTS[i++], ctl = new AbortController(), tm = setTimeout(function () { ctl.abort() }, 1500);
+    fetch('http://127.0.0.1:' + p + '/state', { signal: ctl.signal, cache: 'no-store' })
+      .then(function (r) { return r.ok ? r.json() : null })
+      .then(function (j) { clearTimeout(tm); if (!j) return next(); port = p; S = j })
+      .catch(function () { clearTimeout(tm); next() });
+  })();
+}
+probe();
+setInterval(function () {
+  if (!port) { probe(); return }
+  fetch('http://127.0.0.1:' + port + '/state', { cache: 'no-store' })
+    .then(function (r) { return r.json() })
+    .then(function (j) { S = j })
+    .catch(function () { port = 0 });
+}, 3000);
+
+var COL = { tool: '#ffc46b', step: '#f0a6c6', skill: '#b28cff', job: '#8fe0c8' };
+function arc(x, y, r, a, b, col, w) {
+  ctx.beginPath(); ctx.arc(x, y, r, a, b); ctx.strokeStyle = col; ctx.lineWidth = w; ctx.stroke();
+}
+
+(function loop() {
+  var t = (Date.now() - t0) / 1000;
+  ctx.clearRect(0, 0, CW, CH);
+  /* 背景：与插件一致的深色渐变 */
+
+
+  var cx = CW * 0.46, cy = CH * 0.5, base = Math.min(CW, CH) * 0.33;
+  var turn = (S && S.turn) || 0;
+  var steps = (S && S.steps) || [];
+  var stats = (S && S.toolStats) || [];
+  var jobs = (S && S.jobs) || [];
+  var skills = (S && S.skills) || [];
+
+  for (var i = 1; i <= 6; i++) arc(cx, cy, base * i / 6, 0, 6.283, 'rgba(140,160,190,0.07)', 1);
+
+  var total = 0, k;
+  for (k = 0; k < stats.length; k++) total += stats[k].count || 0;
+  var a = -Math.PI / 2, rT = base * 0.95;
+  if (total > 0) {
+    for (k = 0; k < Math.min(stats.length, 14); k++) {
+      var len = (stats[k].count || 0) / total * 6.283;
+      arc(cx, cy, rT, a, a + len - 0.01, COL.tool, 10);
+      a += len;
+    }
+  }
+
+  var n2 = Math.min(steps.length, 90), rS = base * 0.74;
+  for (k = 0; k < n2; k++) {
+    var aa = -Math.PI / 2 + (k / n2) * 6.283;
+    arc(cx, cy, rS, aa, aa + Math.max(0.012, 6.283 / n2 * 0.62), COL.step, 3);
+  }
+
+  for (k = 0; k < 16; k++) {
+    var sa = -Math.PI / 2 + k * 6.283 / 16, on = k < skills.length, r0 = base * 0.56, r1 = r0 + (on ? 15 : 6);
+    ctx.beginPath();
+    ctx.moveTo(cx + Math.cos(sa) * r0, cy + Math.sin(sa) * r0);
+    ctx.lineTo(cx + Math.cos(sa) * r1, cy + Math.sin(sa) * r1);
+    ctx.strokeStyle = on ? COL.skill : 'rgba(178,140,255,0.16)';
+    ctx.lineWidth = on ? 2.2 : 1; ctx.stroke();
+  }
+
+  for (k = 0; k < Math.min(jobs.length, 24); k++) {
+    var ja = -Math.PI / 2 + (k / 24) * 6.283, jl = jobs[k].state === 'RUN' ? 0.16 : 0.09;
+    arc(cx, cy, base * 0.42, ja, ja + jl, jobs[k].state === 'RUN' ? COL.job : 'rgba(143,224,200,0.45)', 4);
+  }
+
+  /* 核心 */
+  var core = ctx.createRadialGradient(cx, cy, 0, cx, cy, base * 0.34);
+  core.addColorStop(0, 'rgba(255,214,150,0.20)');
+  core.addColorStop(1, 'rgba(255,214,150,0)');
+  ctx.fillStyle = core; ctx.beginPath(); ctx.arc(cx, cy, base * 0.34, 0, 6.283); ctx.fill();
+  arc(cx, cy, base * 0.30, 0, 6.283, 'rgba(200,215,240,0.22)', 1.5);
+
+  ctx.textAlign = 'center';
+  ctx.fillStyle = 'rgba(255,196,107,0.55)'; ctx.font = '600 13px "Segoe UI",sans-serif';
+  ctx.fillText('TURN', cx, cy - base * 0.10);
+  ctx.fillStyle = '#e6edfa'; ctx.font = '600 ' + Math.round(base * 0.26) + 'px "Segoe UI",sans-serif';
+  ctx.fillText(String(turn || '—'), cx, cy + base * 0.09);
+
+  /* 最近一步的连线 + 沿环跑的光点 */
+  if (steps.length > 1) {
+    var la = -Math.PI / 2 + ((steps.length - 1) % 90) / 90 * 6.283;
+    ctx.beginPath();
+    ctx.moveTo(cx + Math.cos(la) * base * 0.30, cy + Math.sin(la) * base * 0.30);
+    ctx.lineTo(cx + Math.cos(la) * rS, cy + Math.sin(la) * rS);
+    ctx.strokeStyle = 'rgba(240,166,198,0.7)'; ctx.lineWidth = 2; ctx.stroke();
+  }
+  var da = -Math.PI / 2 + (t * 0.6 % 6.283);
+  ctx.beginPath(); ctx.arc(cx + Math.cos(da) * rT, cy + Math.sin(da) * rT, 4, 0, 6.283);
+  ctx.fillStyle = '#fffaf0'; ctx.fill();
+
+
+  /* ---- 阶梯连线：最近 12 步，从核心射向 ② / ④ ---- */
+  var K = Math.min(steps.length, 12), rS2 = base * 0.74;
+  for (k = 0; k < K; k++) {
+    var idx = steps.length - K + k;
+    var ang = -Math.PI / 2 + ((idx % 90) / 90) * 6.283;
+    var fr = (k + 1) / K;
+    ctx.beginPath();
+    ctx.moveTo(cx + Math.cos(ang) * base * 0.30, cy + Math.sin(ang) * base * 0.30);
+    ctx.lineTo(cx + Math.cos(ang) * rS2, cy + Math.sin(ang) * rS2);
+    ctx.strokeStyle = 'rgba(255,236,205,' + (0.10 + 0.42 * fr).toFixed(3) + ')';
+    ctx.lineWidth = 1 + 1.2 * fr; ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(cx + Math.cos(ang) * rS2, cy + Math.sin(ang) * rS2, 1.6, 0, 6.283);
+    ctx.fillStyle = 'rgba(255,246,230,' + (0.3 + 0.5 * fr).toFixed(3) + ')'; ctx.fill();
+  }
+
+  /* ---- 七层标签 + 数字（和插件里一致）---- */
+  var RH = [0.30, 0.74, 0.56, 0.95, 0.42, 0.86, 0.90];
+  var lastStep = steps.length ? steps[steps.length - 1] : null;
+  var lastSec = lastStep ? Math.max(0, ((lastStep.end || Date.now()) - lastStep.t) / 1000) : 0;
+  var runJobs = jobs.filter(function (j) { return j.state === 'RUN' }).length;
+  var pct = (S && S.ctxUsed && S.ctxWin) ? Math.round(S.ctxUsed / S.ctxWin * 100) : 0;
+  var names = ['① 会话', '② 步骤', '③ 技能', '④ 工具', '⑤ 任务', '⑥ 审批', '⑦ 变更'];
+  var cols = ['#e6edfa', '#f0a6c6', '#b28cff', '#ffc46b', '#7fd8c4', '#ff8a6b', '#8fb8ff'];
+  var cnt = [
+    pct + '%',
+    lastSec.toFixed(1) + 's',
+    skills.length + '',
+    stats.filter(function (s) { return s.count > 0 }).length + ' 种',
+    '运行 ' + runJobs + ' · 共 ' + jobs.length,
+    ((S && S.approvals) || 0) + ' 次',
+    ((S && S.changes || []).length || 0) + ' 处'
+  ];
+  ctx.textAlign = 'center';
+  for (k = 0; k < 7; k++) {
+    var rr = base * RH[k];
+    ctx.font = '10px Consolas,monospace';
+    ctx.fillStyle = cols[k]; ctx.globalAlpha = 0.55;
+    ctx.fillText(names[k], cx, cy - rr - 16);
+    ctx.globalAlpha = 0.35;
+    ctx.fillText(String(cnt[k]), cx, cy - rr - 4);
+    ctx.globalAlpha = 1;
+  }
+
+  requestAnimationFrame(loop);
+})();
+</script>
+</body>
+</html>

package/wallpaper/live.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8"><title>DSH Visualization</title>
+<style>
+  html, body { margin: 0; height: 100%; background: #0b0d11; overflow: hidden }
+  img { display: block; width: 100vw; height: 100vh; object-fit: contain }
+  #hint {
+    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
+    color: #8d97ab; font: 15px/1.8 "Segoe UI", "Microsoft YaHei", sans-serif; text-align: center
+  }
+  #hint b { display: block; color: #e6edfa; font-size: 19px; margin-bottom: 8px }
+</style>
+</head>
+<body>
+<img id="shot" alt="">
+<div id="hint"><b>DSH Visualization</b><div>等待画面…</div></div>
+<script>
+var img = document.getElementById('shot');
+var hint = document.getElementById('hint');
+var ok = false, n = 0;
+img.onload = function () { ok = true; hint.style.display = 'none' };
+img.onerror = function () { if (!ok) hint.style.display = 'block' };
+
+/* 5 fps：截图流水线以 200ms 一轮在后台产出 frame.jpg */
+function tick() {
+  img.src = 'frame.jpg?t=' + (n++);
+}
+tick();
+setInterval(tick, 200);
+</script>
+</body>
+</html>

package/wallpaper/lively/LivelyInfo.json

@@ -0,0 +1,17 @@
+{
+  "AppVersion": "2.0.0.0",
+  "Title": "DSH Visualization",
+  "Thumbnail": "preview.jpg",
+  "Preview": "preview.jpg",
+  "Desc": "A live session instrument for DeepSeek Harness: seven rings, a turn timeline, per-step ladders and job/approval/change layers, read straight from the session log. Requires the dsh-visualization plugin to be installed and DSH to be running — the wallpaper connects to the plugin's fixed local port.",
+  "Author": "peilopielo",
+  "License": "PolyForm Noncommercial 1.0.0",
+  "Contact": "https://github.com/peilopielo/dsh-Visualization",
+  "Type": 1,
+  "FileName": "index.html",
+  "IsAbsolutePath": false,
+  "Arguments": null,
+  "Id": null,
+  "Tags": ["dsh", "visualization", "dashboard"],
+  "Version": 1
+}