dsh-visualization 0.1.3 → 0.1.4

package/README.md

@@ -84,6 +84,8 @@ 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
@@ -262,6 +264,8 @@ DSH 装在别处时用环境变量 `DSH_HOME` 或 `DSHVIZ_SESSIONS_ROOT` 指过
 **前提**：装了插件，且 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）**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-visualization",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "DSH Visualization — a session instrument: rings, turns, tools and background jobs of a live DeepSeek Harness session.",
   "type": "module",
   "main": "index.js",

package/wallpaper/howto.html

@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="zh">
+<head>
+<meta charset="utf-8">
+<style>
+  :root{
+    --bg:#0b0d11; --panel:#141922; --line:#232b38; --txt:#e6edfa; --dim:#8d97ab;
+    --amber:#ffc46b; --mint:#8fe0c8; --coral:#ff7a5c; --violet:#b28cff; --sky:#7fb2ff;
+  }
+  *{box-sizing:border-box}
+  html,body{margin:0;background:var(--bg);font:13px/1.6 "Segoe UI","Microsoft YaHei",sans-serif;color:var(--txt)}
+  .wrap{width:1400px;padding:28px 30px 30px}
+  h1{margin:0 0 4px;font-size:19px;letter-spacing:.04em}
+  .sub{color:var(--dim);font-size:12.5px;margin-bottom:22px}
+  .row{display:flex;gap:18px}
+  .card{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 16px 18px;position:relative}
+  .n{position:absolute;top:-11px;left:16px;background:var(--bg);border:1px solid var(--line);color:var(--amber);
+     font-size:11px;letter-spacing:.14em;padding:2px 9px;border-radius:20px}
+  .t{font-size:13.5px;margin:6px 0 12px;font-weight:600}
+  .muted{color:var(--dim)}
+  .kbd{border:1px solid var(--line);background:#0f141c;border-radius:4px;padding:1px 6px;font-size:11.5px;color:var(--txt)}
+  .mock{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#0f141c}
+  .mock .bar{height:22px;background:#111721;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 8px;gap:5px}
+  .dot{width:7px;height:7px;border-radius:50%;background:#2b3444}
+  .mock .body{padding:10px}
+  .opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;border:1px solid transparent}
+  .opt.sel{background:#1a2433;border-color:#2f4straight}
+  .opt.sel{border-color:#3a4a63}
+  .opt .ico{width:16px;height:16px;border-radius:3px;background:#2a3342}
+  .opt.sel .ico{background:var(--sky)}
+  .foot{margin-top:14px;display:flex;justify-content:space-between;align-items:center}
+  .btn{background:#1d2634;border:1px solid var(--line);border-radius:5px;padding:5px 12px;font-size:12px;color:var(--dim)}
+  .btn.on{background:var(--amber);border-color:var(--amber);color:#1a1206;font-weight:600}
+  .path{font-family:Consolas,monospace;font-size:11.5px;color:var(--mint);background:#0f141c;border:1px solid var(--line);
+        border-radius:4px;padding:5px 8px;display:block;margin-top:8px;word-break:break-all}
+  .flow{margin-top:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px}
+  .node{border:1px solid var(--line);border-radius:5px;padding:4px 8px;background:#0f141c;color:var(--dim)}
+  .node.hot{border-color:var(--amber);color:var(--amber)}
+  .arw{color:#3d4757}
+  .note{margin-top:12px;font-size:11.5px;color:var(--dim);border-left:2px solid var(--violet);padding-left:8px}
+</style>
+</head>
+<body>
+<div class="wrap">
+  <h1>把 DSH Visualization 设成桌面壁纸</h1>
+  <div class="sub">前提：已安装 dsh-visualization 插件，并且 DSH 正在运行 · Wallpaper Engine（Steam）</div>
+
+  <div class="row">
+    <div class="card">
+      <div class="n">STEP 1</div>
+      <div class="t">在 Wallpaper Engine 里新建壁纸</div>
+      <div class="mock">
+        <div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>
+        <div class="body">
+          <div class="opt"><span class="ico"></span>场景 Scene</div>
+          <div class="opt"><span class="ico"></span>视频 Video</div>
+          <div class="opt sel"><span class="ico"></span><b>网页 Web</b></div>
+          <div class="opt"><span class="ico"></span>应用程序 Application</div>
+        </div>
+      </div>
+      <div class="note">点左下角 <span class="kbd">创建壁纸</span>，类型选 <b>网页</b>。</div>
+    </div>
+
+    <div class="card">
+      <div class="n">STEP 2</div>
+      <div class="t">选中仓库里的壁纸入口</div>
+      <div class="mock" style="padding:12px 12px 14px">
+        <div class="muted" style="font-size:11.5px">选择文件</div>
+        <span class="path">wallpaper&#92;index.html</span>
+        <div class="muted" style="font-size:11.5px;margin-top:10px">同目录还有（不用选）</div>
+        <span class="path" style="color:var(--dim)">project.json · preview.jpg</span>
+      </div>
+      <div class="note">路径来自你安装插件的目录，通常在<br><span style="color:var(--dim)">…/profiles/desktop/node_modules/dsh-visualization/wallpaper/</span></div>
+    </div>
+
+    <div class="card">
+      <div class="n">STEP 3</div>
+      <div class="t">直接应用，不用配置</div>
+      <div class="flow">
+        <span class="node">DSH 随机端口<br><span style="opacity:.6">:1233 :7632 …</span></span>
+        <span class="arw">→</span>
+        <span class="node hot">插件固定端口<br>127.0.0.1:8799</span>
+        <span class="arw">→</span>
+        <span class="node">壁纸</span>
+      </div>
+      <div class="note">壁纸只会访问 <b>8799</b>；插件在内部转发到这次 DSH 的真实端口。
+        连不上时壁纸显示提示，每 5 秒重试一次，DSH 换端口后会自动找到。</div>
+    </div>
+  </div>
+
+  <div class="sub" style="margin-top:20px;margin-bottom:0">
+    端口 8799 被占用时插件会依次退到 8798 / 8797 / 8796 / 8795；要固定成别的，在插件配置里写
+    <span class="kbd">wallpaperPort</span>，同时改 <span class="kbd">wallpaper/index.html</span> 里的 PORTS 数组。
+  </div>
+</div>
+</body>
+</html>