dsh-visualization 0.1.1 → 0.1.2

package/FAQ.md

@@ -0,0 +1,85 @@
+# FAQ / 常见问题
+
+## Why is the license not OSI-approved? / 为什么不用 OSI 许可？
+
+**EN** — By design, not by accident. The visual language — the rings, the palette, the layered
+layout — derives from [HALOFLUX](https://github.com/Ryder191/haloflux), which is licensed under
+PolyForm Noncommercial 1.0.0. Those terms require any derivative to stay noncommercial and to keep
+the attribution. An MIT/Apache/BSD badge here would be a promise this project cannot keep, so the
+plugin adopts the same license: free for personal use, study, research, teaching and hobby
+projects; commercial use is not granted.
+
+The *code* (host folding, zstd frame parsing, SSE, the page) is original, written for this plugin.
+Nothing was copied from HALOFLUX's source; what it borrows is the design language, and that is
+credited in both the LICENSE and the page footer.
+
+**中文** — 这是刻意的，不是疏漏。视觉语言（环、配色、分层布局）来自
+[HALOFLUX](https://github.com/Ryder191/haloflux)，它使用 PolyForm Noncommercial 1.0.0。
+该许可要求衍生作品同为非商业并保留署名。这里挂 MIT/Apache 就等于是本项目兑现不了的承诺，
+所以插件沿用同一许可：个人使用、学习、研究、教学、兴趣项目免费；不授予商业用途。
+
+代码本身（宿主折叠、zstd 帧解析、SSE、页面）是为本插件新写的，没有复制 HALOFLUX 的源码；
+借用的是设计语言，LICENSE 与页面右下角都写明了出处。
+
+> Marketplace listings do not require an OSI-approved license — other listed plugins in this catalog
+> also ship non-OSI terms.
+> 插件市场并不要求 OSI 许可——本目录里已有其他非 OSI 许可的插件。
+
+## Does it send my data anywhere? / 会把数据发出去吗？
+
+**EN** — No. The host half reads `~/.dsh/sessions/**` read-only, folds it in memory, and serves it on
+`/dsh-visualization/*` to the local page. No outbound network request is made by either half, and no
+file is written except the OS-level cache the browser keeps for the page itself.
+
+**中文** — 不会。宿主侧只读 `~/.dsh/sessions/**`，在内存里折叠，通过 `/dsh-visualization/*`
+提供给本地页面。前后两端都不发起任何对外网络请求，也不写任何文件（浏览器自身的页面缓存除外）。
+
+## Why can it only be reached from localhost? / 为什么只能本机访问？
+
+**EN** — Session logs contain every command you ran and every prompt you typed. The routes answer
+loopback addresses only, so exposing the Web UI on a LAN does not expose the instrument. If you
+really need remote access, set `allowRemote: true` in the plugin config and understand that anyone
+who can reach the port can read those logs.
+
+**中文** — 会话日志里有你执行过的每条命令和输入的每句话。路由只响应回环地址，所以把 Web 界面暴露到
+局域网并不会顺带暴露仪表盘。确实需要远程访问时，在插件配置里写 `allowRemote: true`——
+但要清楚：任何能访问该端口的人都能读到这些日志。
+
+## The panel is blank / says "no session log" / 面板空白、提示没有会话
+
+| 提示 | 原因 |
+|---|---|
+| `这个运行环境不支持 zstd 解压（需要 Node ≥ 22.15）` | 宿主 Node 太老 |
+| `会话目录是空的 —— 先在这个 profile 里跑一轮对话` | 这个 profile 还没聊过 |
+| `还没找到 DSH 会话目录（…），确认 DSH_HOME 是否正确` | DSH 数据不在默认位置；设 `DSH_HOME` 或 `DSHVIZ_SESSIONS_ROOT` |
+| 面板空白 + 网络面板 403 | 不是本机访问；见上一节 |
+
+## Does it slow the session down? / 会拖慢会话吗？
+
+**EN** — The fold is incremental: only newly appended zstd frames are decoded, and only new events
+are pushed into the accumulator. At ~8.7k events the first fold costs 240–260 ms; afterwards each
+change costs 7–12 ms. When nothing changes, the SSE connection sends zero bytes (except a 15 s
+heartbeat).
+
+**中文** — 折叠是增量的：只解新追加的 zstd 帧，只把新事件 push 进累加器。约 8.7k 事件时首次
+240~260ms，之后每次变化 7~12ms。没有变化时 SSE 一个字节都不发（只有 15 秒一次的心跳）。
+
+## How do I uninstall it? / 怎么卸载？
+
+```powershell
+# DSH 插件页里关掉，或：
+dsh plugin remove dsh-visualization
+# npm 装的：
+npm uninstall -g dsh-visualization
+```
+
+仪表盘不写任何持久状态；删除后 `~/.dsh/sessions` 里的日志原样不动。
+
+## Can I use it at work? / 能在公司用吗？
+
+**EN** — No. PolyForm Noncommercial excludes use by a for-profit company, including internal use
+and use on behalf of a company. Personal study and noncommercial organisations (charities,
+educational and public research institutions) are permitted by the license text.
+
+**中文** — 不行。PolyForm Noncommercial 排除了在营利性公司内部或代表公司的使用。个人学习、
+以及慈善、教育、公共研究机构等非商业组织，按许可条文是允许的。

package/README.md

@@ -36,6 +36,8 @@ rings, turns, tools and background jobs.
 
 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 |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-visualization",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "DSH Visualization — a session instrument: rings, turns, tools and background jobs of a live DeepSeek Harness session.",
   "type": "module",
   "main": "index.js",
@@ -26,7 +26,8 @@
     "locale",
     "icon.svg",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "FAQ.md"
   ],
   "keywords": [
     "dsh",

package/web/index.html

@@ -979,6 +979,21 @@ html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
       for (var cq = 0; cq < CHAIN_PREV.length; cq++) {
         var ce = CHAIN_PREV[cq], cps = ce.pts;
         for (var cp = 1; cp < cps.length; cp++) segLine(cps[cp - 1], cps[cp], ce.bright, ce.fr);
+        /* 用到技能的那一步：③ 上加发光环 + 两段高亮，否则技能环上永远是个空环 */
+        if (ce.skill) {
+          var sp = ce.skill, si = cps.indexOf(sp);
+          var hg = X.createRadialGradient(sp.x, sp.y, 0, sp.x, sp.y, 15);
+          hg.addColorStop(0, 'rgba(150,200,255,.42)');
+          hg.addColorStop(1, 'rgba(150,200,255,0)');
+          X.fillStyle = hg; X.beginPath(); X.arc(sp.x, sp.y, 15, 0, TAU); X.fill();
+          X.strokeStyle = 'rgba(160,205,255,.9)'; X.lineWidth = 1.8;
+          X.beginPath(); X.arc(sp.x, sp.y, 3.6, 0, TAU); X.stroke();
+          X.strokeStyle = 'rgba(150,200,255,.6)'; X.lineWidth = 2;
+          X.beginPath();
+          if (si > 0) { X.moveTo(cps[si - 1].x, cps[si - 1].y); X.lineTo(sp.x, sp.y); }
+          if (si >= 0 && si < cps.length - 1) { X.moveTo(sp.x, sp.y); X.lineTo(cps[si + 1].x, cps[si + 1].y); }
+          X.stroke();
+        }
         /* 移动光点：按路径长度插值 */
         var lens = [], tot = 0;
         for (var cl = 1; cl < cps.length; cl++) {
@@ -1130,6 +1145,32 @@ html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
         });
       }
     }
+    /* 技能是被调用的稀疏事件：给它一条自己的连线，别指望"某一步用了 skill"那条阶梯 */
+    if (M.skills.length) {
+      var nowSk = clockNow();
+      var spanSk = RSPAN[1] || (M.sSteps && M.sSteps.length
+        ? Math.max(120000, nowSk - M.sSteps[0].t) : 120000);
+      for (i = 0; i < M.skills.length && i < 16; i++) {
+        var skI = M.skills[i];
+        var aSk = rotOf(2, t) - Math.PI / 2 + TAU * i / 16;
+        var px = ox + Math.cos(aSk) * rr, py = oy + Math.sin(aSk) * rr;
+        var age = nowSk - (skI.last || 0);
+        if (age >= 0 && age <= spanSk) {
+          var aTo = -Math.PI / 2 + (age / spanSk) * TAU + rotOf(1, t);
+          var qx = ox + Math.cos(aTo) * R[1], qy = oy + Math.sin(aTo) * R[1];
+          X.strokeStyle = rgba(COL.skill, 0.8); X.lineWidth = 2.6;
+          X.beginPath(); X.moveTo(px, py); X.lineTo(qx, qy); X.stroke();
+          X.beginPath(); X.arc(qx, qy, 3, 0, TAU);
+          X.fillStyle = rgba(COL.skill, 0.95); X.fill();
+        }
+        var hgS = X.createRadialGradient(px, py, 0, px, py, 19);
+        hgS.addColorStop(0, rgba(COL.skill, 0.75));
+        hgS.addColorStop(1, rgba(COL.skill, 0));
+        X.fillStyle = hgS; X.beginPath(); X.arc(px, py, 19, 0, TAU); X.fill();
+        X.beginPath(); X.arc(px, py, 4.2, 0, TAU);
+        X.fillStyle = rgba(COL.skill, 0.95); X.fill();
+      }
+    }
     }
 
     /* ④ 工具环：不看时间，看「构成」
@@ -1404,15 +1445,20 @@ html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
             return x5.turn === s5.turn && x5.step === s5.step;
           });
           var usedSkill = stepTools.some(function (x5) { return x5.name === 'skill'; });
+          var skillPt = null;
+          if (usedSkill) {
+            /* ③ 技能环只落一个点，再向 ④ 扇开（原来每个工具都插一个 ③ 点，会来回跳） */
+            var aK0 = (SKILL_ANG == null)
+              ? (segMap['skill'] != null ? segMap['skill'] : -Math.PI / 2)
+              : SKILL_ANG;
+            skillPt = { x: ox + Math.cos(aK0) * R[2], y: oy + Math.sin(aK0) * R[2] };
+            path.push(skillPt);
+          }
           var used = 0;
           for (var tj = 0; tj < stepTools.length && used < 12; tj++) {
             var tl5 = stepTools[tj];
             var aT5 = segMap[tl5.name];
             if (aT5 == null) continue;
-            if (usedSkill) {
-              var aK = (SKILL_ANG == null) ? aT5 : SKILL_ANG;
-              path.push({ x: ox + Math.cos(aK) * R[2], y: oy + Math.sin(aK) * R[2] });
-            }
             path.push({ x: ox + Math.cos(aT5) * R[3], y: oy + Math.sin(aT5) * R[3] });
             used++;
           }
@@ -1443,7 +1489,7 @@ html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
           /* 这里只攒几何，真正的绘制在下一帧开头（画环之前）完成 —— 线在环下面 */
           if (path.length > 1) {
             CHAIN_PREV.push({
-              pts: path, bright: bright, fr: fr5,
+              pts: path, bright: bright, fr: fr5, skill: skillPt,
               phase: (i / Math.max(1, arr3.length)) * 0.8
             });
           }