dsh-pocket 1.0.1 → 1.0.2

package/README.en.md

@@ -35,6 +35,7 @@ Phone ──scan──> dsh-pocket proxy ──> dsh web :3080
 | 📱 Mobile-adaptive layout | Narrow screens get a drawer layout automatically (ported from dsh-web-mobile, MIT): sidebar drawer, full-width conversation, safe-area insets, touch optimizations |
 | 🧩 Zero-dependency install | One npm package, one settings tab — no core/adapter split, no account, no server |
 | 🔒 URL is the key | No public URL exposure in LAN mode; public URL rotates on every restart |
+| 🔔 Web Push | Phone notifications when a task finishes or fails (even with the page closed); requires the HTTPS public tunnel or localhost |
 
 ## 🚀 Usage
 

package/README.md

@@ -35,6 +35,7 @@
 | 📱 移动端适配 | 窄屏自动变抽屉布局（移植 dsh-web-mobile，MIT）：侧栏抽屉、会话全宽、状态栏安全区、触控优化 |
 | 🧩 零依赖安装 | 一个 npm 包、一个设置页，没有核心/适配器要分开装；无需账号、无需服务器 |
 | 🔒 URL 即钥匙 | 无公网 URL 暴露给第三方（局域网模式）；公网 URL 每次重启自动换新 |
+| 🔔 Web Push 通知 | agent 跑完/出错 → 手机推送通知（即使没开页面）；需 HTTPS 公网路径或 localhost |
 
 ## 🚀 怎么用
 

package/client/api.js

@@ -5,6 +5,10 @@ export const POCKET_ENDPOINTS = Object.freeze({
   status: 'pocket.status',
   tunnelStart: 'tunnel.start',
   tunnelStop: 'tunnel.stop',
+  pushVapidKey: 'push.vapidKey',
+  pushSubscribe: 'push.subscribe',
+  pushUnsubscribe: 'push.unsubscribe',
+  pushStatus: 'push.status',
 });
 
 /** 浏览器可见的状态字段（无敏感信息；含二维码 data URL）。 */

package/client/client.js

@@ -37,7 +37,11 @@ var POCKET_RPC_CHANNEL = "/dsh-pocket";
 var POCKET_ENDPOINTS = Object.freeze({
   status: "pocket.status",
   tunnelStart: "tunnel.start",
-  tunnelStop: "tunnel.stop"
+  tunnelStop: "tunnel.stop",
+  pushVapidKey: "push.vapidKey",
+  pushSubscribe: "push.subscribe",
+  pushUnsubscribe: "push.unsubscribe",
+  pushStatus: "push.status"
 });
 function redactStatus(s) {
   return {
@@ -1241,6 +1245,32 @@ function mobileApply(ctx) {
 // client/index.jsx
 var name = "dsh-pocket";
 var inject = ["slots", "connection", "layout", "locale", "sessionLogDownload"];
+async function setupPush(rpcCall) {
+  try {
+    if (!("serviceWorker" in navigator) || !("PushManager" in window)) return "unsupported";
+    if (!window.isSecureContext) return "insecure";
+    const reg = await navigator.serviceWorker.register("/pocket-sw.js");
+    const vapid = await rpcCall(POCKET_ENDPOINTS.pushVapidKey, {});
+    if (!vapid?.ok) return "host-error";
+    let sub = await reg.pushManager.getSubscription();
+    if (!sub) {
+      sub = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(vapid.value.publicKey)
+      });
+    }
+    const res = await rpcCall(POCKET_ENDPOINTS.pushSubscribe, { subscription: sub.toJSON() });
+    return res?.ok ? "on" : "host-error";
+  } catch {
+    return "error";
+  }
+}
+function urlBase64ToUint8Array(base64url) {
+  const pad = "=".repeat((4 - base64url.length % 4) % 4);
+  const b64 = (base64url + pad).replace(/-/g, "+").replace(/_/g, "/");
+  const raw = atob(b64);
+  return Uint8Array.from(raw, (c) => c.charCodeAt(0));
+}
 var styles = {
   card: { background: "var(--dsw-alias-bg-layer-1,#fff)", border: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", borderRadius: 12, padding: "14px 16px", maxWidth: 480 },
   block: { borderTop: "1px solid var(--dsw-alias-border-l2,#e5e7eb)", marginTop: 12, paddingTop: 12 },
@@ -1255,6 +1285,7 @@ function PocketSettingsTab({ rpcCall }) {
   const [status, setStatus] = (0, import_react2.useState)(null);
   const [busy, setBusy] = (0, import_react2.useState)(false);
   const [error, setError] = (0, import_react2.useState)(null);
+  const [pushState, setPushState] = (0, import_react2.useState)("checking");
   const call = async (endpoint, payload) => {
     const res = await rpcCall(endpoint, payload);
     if (!res?.ok) throw new Error(res?.error?.message ?? "RPC failed");
@@ -1271,6 +1302,9 @@ function PocketSettingsTab({ rpcCall }) {
     const t = setInterval(load, 3e3);
     return () => clearInterval(t);
   }, []);
+  (0, import_react2.useEffect)(() => {
+    setupPush(rpcCall).then(setPushState);
+  }, []);
   const startTunnel = async () => {
     setBusy(true);
     setError(null);
@@ -1331,6 +1365,17 @@ function PocketSettingsTab({ rpcCall }) {
         (0, import_react2.createElement)("div", { style: styles.warn, marginTop: 8 }, "\u26A0\uFE0F DSH \u80FD\u6267\u884C\u7535\u8111\u4EE3\u7801\uFF1A\u4E8C\u7EF4\u7801/URL \u5C31\u662F\u94A5\u5319\uFF0C\u8BF7\u52FF\u53D1\u7ED9\u522B\u4EBA")
       )
     ),
+    // Web Push 状态
+    (0, import_react2.createElement)(
+      "div",
+      { style: styles.block },
+      (0, import_react2.createElement)("div", { style: { fontWeight: 600, fontSize: 13 } }, "\u{1F514} \u63A8\u9001\u901A\u77E5 | Push notifications"),
+      (0, import_react2.createElement)(
+        "div",
+        { style: styles.muted },
+        pushState === "on" ? "\u5DF2\u5F00\u542F\uFF1Aagent \u8DD1\u5B8C/\u51FA\u9519\u65F6\u624B\u673A\u6536\u5230\u901A\u77E5 | on: notified when tasks finish or fail" : pushState === "unsupported" ? "\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u63A8\u9001 | this browser does not support push" : pushState === "insecure" ? "\u9700\u8981 HTTPS\uFF08\u516C\u7F51\u96A7\u9053\uFF09\u6216 localhost \u624D\u80FD\u5F00\u542F\u63A8\u9001 | push needs HTTPS (public tunnel) or localhost" : pushState === "checking" ? "\u68C0\u67E5\u4E2D\u2026 | checking\u2026" : "\u63A8\u9001\u672A\u5F00\u542F | push not enabled"
+      )
+    ),
     error ? (0, import_react2.createElement)("div", { style: { color: "var(--dsw-alias-state-error-primary,#dc2626)", fontSize: 12, marginTop: 8 } }, `\u274C ${error}`) : null
   );
 }

package/client/index.jsx

@@ -1,6 +1,7 @@
 // dsh-pocket 网页客户端：
-//   1. 设置页签「手机访问」（局域网/公网二维码）
+//   1. 设置页签「手机访问」（局域网/公网二维码 + Web Push 状态）
 //   2. 移动端适配（移植自 MIT 项目 dsh-web-mobile，见 client/mobile/LICENSE.dsh-web-mobile）
+//   3. Web Push：注册 Service Worker + 订阅推送（agent 跑完/出错 → 手机通知）
 //
 // 手机扫码打开的就是电脑上的 dsh web，实时同步；窄屏自动变成抽屉布局。
 
@@ -12,6 +13,36 @@ import { mobileApply } from './mobile/mobile-apply.tsx';
 const name = 'dsh-pocket';
 const inject = ['slots', 'connection', 'layout', 'locale', 'sessionLogDownload'];
 
+/** Web Push：注册 SW + 订阅（仅安全上下文可用：HTTPS 公网 / localhost）。 */
+async function setupPush(rpcCall) {
+  try {
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) return 'unsupported';
+    if (!window.isSecureContext) return 'insecure'; // http://LAN-IP 无 Push API
+    const reg = await navigator.serviceWorker.register('/pocket-sw.js');
+    const vapid = await rpcCall(POCKET_ENDPOINTS.pushVapidKey, {});
+    if (!vapid?.ok) return 'host-error';
+    let sub = await reg.pushManager.getSubscription();
+    if (!sub) {
+      sub = await reg.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(vapid.value.publicKey),
+      });
+    }
+    const res = await rpcCall(POCKET_ENDPOINTS.pushSubscribe, { subscription: sub.toJSON() });
+    return res?.ok ? 'on' : 'host-error';
+  } catch {
+    return 'error';
+  }
+}
+
+/** VAPID 公钥（base64url）→ Uint8Array（pushManager.subscribe 需要）。 */
+function urlBase64ToUint8Array(base64url) {
+  const pad = '='.repeat((4 - (base64url.length % 4)) % 4);
+  const b64 = (base64url + pad).replace(/-/g, '+').replace(/_/g, '/');
+  const raw = atob(b64);
+  return Uint8Array.from(raw, (c) => c.charCodeAt(0));
+}
+
 const styles = {
   card: { background: 'var(--dsw-alias-bg-layer-1,#fff)', border: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', borderRadius: 12, padding: '14px 16px', maxWidth: 480 },
   block: { borderTop: '1px solid var(--dsw-alias-border-l2,#e5e7eb)', marginTop: 12, paddingTop: 12 },
@@ -27,6 +58,7 @@ function PocketSettingsTab({ rpcCall }) {
   const [status, setStatus] = useState(null);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState(null);
+  const [pushState, setPushState] = useState('checking'); // checking|on|unsupported|insecure|off
 
   const call = async (endpoint, payload) => {
     const res = await rpcCall(endpoint, payload);
@@ -44,6 +76,11 @@ function PocketSettingsTab({ rpcCall }) {
     return () => clearInterval(t);
   }, []);
 
+  // Web Push 订阅（只跑一次）
+  useEffect(() => {
+    setupPush(rpcCall).then(setPushState);
+  }, []);
+
   const startTunnel = async () => {
     setBusy(true);
     setError(null);
@@ -97,6 +134,17 @@ function PocketSettingsTab({ rpcCall }) {
         ),
     ),
 
+    // Web Push 状态
+    h('div', { style: styles.block },
+      h('div', { style: { fontWeight: 600, fontSize: 13 } }, '🔔 推送通知 | Push notifications'),
+      h('div', { style: styles.muted },
+        pushState === 'on' ? '已开启：agent 跑完/出错时手机收到通知 | on: notified when tasks finish or fail'
+        : pushState === 'unsupported' ? '当前浏览器不支持推送 | this browser does not support push'
+        : pushState === 'insecure' ? '需要 HTTPS（公网隧道）或 localhost 才能开启推送 | push needs HTTPS (public tunnel) or localhost'
+        : pushState === 'checking' ? '检查中… | checking…'
+        : '推送未开启 | push not enabled'),
+    ),
+
     error ? h('div', { style: { color: 'var(--dsw-alias-state-error-primary,#dc2626)', fontSize: 12, marginTop: 8 } }, `❌ ${error}`) : null,
   );
 }

package/lib/index.js

@@ -3,14 +3,27 @@
 // 设置页「设置 → 插件 → 手机访问」：
 //   - 局域网二维码：自动显示（代理随插件启动）
 //   - 公网二维码：点「开启公网」→ cloudflared 隧道 → 扫码即用，人在外面也能访问
+//   - Web Push：agent 跑完/出错 → 手机推送通知（需 HTTPS 公网路径或 localhost）
 // 手机看到的界面 = 电脑上的 dsh web，实时同步（WebSocket 透传）。
 
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+
 import { createPocketService } from './service.mjs';
 import { installPocketRpc } from './web-rpc.js';
+import { createPushService } from './push.mjs';
 
 const name = 'dsh-pocket';
 const inject = ['connection', 'webServer'];
 
+// 服务 worker 源码（同源提供：/pocket-sw.js）
+const SW_SOURCE = new URL('./pocket-sw.js', import.meta.url);
+let swCache = null;
+async function swScript() {
+  if (!swCache) swCache = await readFile(fileURLToPath(SW_SOURCE), 'utf8');
+  return swCache;
+}
+
 export function apply(ctx, config = {}, internals = {}) {
   const logger = ctx.logger?.(name) ?? console;
   const dshPort = internals.dshPort ?? ctx.webServer?.port;
@@ -25,7 +38,52 @@ export function apply(ctx, config = {}, internals = {}) {
     internals,
   });
 
-  const disposeRpc = installPocketRpc(ctx, { service, log: logger });
+  // Web Push 服务（web-push 库；测试可注入 stub）
+  const pushPromise = internals.pushPromise ?? createPushService({ internals });
+  pushPromise.catch((err) => logger.error('dsh-pocket: push service init failed | 推送服务初始化失败: %s', err?.message ?? err));
+
+  const disposers = [];
+  const disposeRpc = installPocketRpc(ctx, {
+    service,
+    push: internals.push ?? { vapidPublicKey: () => '', count: () => 0, subscribe: async () => false, unsubscribe: async () => false },
+    log: logger,
+  });
+  disposers.push(disposeRpc);
+
+  // 同源提供 Service Worker（Web Push 必需）
+  try {
+    const removeSw = ctx.webServer.register({
+      kind: 'exact',
+      path: '/pocket-sw.js',
+      handler: async (req, res) => {
+        res.writeHead(200, { 'content-type': 'application/javascript', 'cache-control': 'no-cache' });
+        res.end(await swScript());
+      },
+    });
+    disposers.push(removeSw);
+  } catch (err) {
+    logger.error('dsh-pocket: sw route register failed | SW 路由注册失败: %s', err?.message ?? err);
+  }
+
+  // Agent 回合结束/出错 → 推送通知（有订阅才发）
+  const onSessionEvent = (session, event) => {
+    if (event?.type !== 'turn/end') return;
+    const reason = event?.data?.reason ?? event?.reason;
+    if (!reason) return;
+    void pushPromise.then(async (push) => {
+      try {
+        if (reason.kind === 'error') {
+          await push.notify({ title: '❌ 任务失败 | Task failed', body: String(reason.error?.message ?? '').slice(0, 120) || 'Agent 执行出错', url: '/' });
+        } else if (reason.kind === 'completed') {
+          await push.notify({ title: '✅ 任务完成 | Task done', body: 'Agent 已完成任务，点开查看结果', url: '/' });
+        }
+      } catch (err) {
+        logger.error('dsh-pocket: push send failed | 推送发送失败: %s', err?.message ?? err);
+      }
+    });
+  };
+  const offSession = ctx.on('session/event', onSessionEvent);
+  disposers.push(offSession);
 
   // 代理随插件自动启动（局域网二维码开箱即用，零配置）
   void service.startProxy().then((proxy) => {
@@ -35,9 +93,9 @@ export function apply(ctx, config = {}, internals = {}) {
   });
 
   ctx.effect(() => async () => {
-    disposeRpc();
+    for (const d of disposers.reverse()) { try { d(); } catch { /* 忽略 */ } }
     await service.dispose();
-  }, 'dsh-pocket: stop proxy and tunnel');
+  }, 'dsh-pocket: stop proxy, tunnel and push');
 }
 
 export { name, inject };

package/lib/pocket-sw.js

@@ -0,0 +1,32 @@
+// dsh-pocket Service Worker（经 webServer 同源提供：/pocket-sw.js）
+// 职责：接收推送 → 显示通知；点击通知 → 聚焦/打开 DSH 页面。
+const ICON = '/favicon.svg';
+
+self.addEventListener('push', (event) => {
+  let data = {};
+  try {
+    data = event.data ? event.data.json() : {};
+  } catch { /* 非 JSON 载荷忽略 */ }
+  event.waitUntil(
+    self.registration.showNotification(data.title || 'DSH Pocket', {
+      body: data.body || '',
+      icon: ICON,
+      badge: ICON,
+      tag: data.tag || 'dsh-pocket',
+      data: { url: data.url || '/' },
+    }),
+  );
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const url = event.notification.data?.url || '/';
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((windowClients) => {
+      for (const client of windowClients) {
+        if ('focus' in client) return client.focus();
+      }
+      return self.clients.openWindow(url);
+    }),
+  );
+});

package/lib/push.mjs

@@ -0,0 +1,122 @@
+// dsh-pocket Web Push 服务（Agent 跑完/出错 → 手机推送通知，即使没开页面）
+//
+// 原理：浏览器 Push API（Service Worker + pushManager.subscribe）把订阅
+// 交给我们，我们在 dsh web 进程内用 web-push（VAPID 认证 + RFC 8030 协议）
+// 直接推送到浏览器厂商的推送服务（Chrome→FCM / Firefox→Mozilla / Safari→APNs）。
+// 免费、无需第三方账号；VAPID 密钥与订阅存本机。
+//
+// ⚠️ 硬性前提：Web Push 只在**安全上下文**可用（HTTPS 或 localhost）。
+//    - 公网隧道 https://xxx.trycloudflare.com ✅（人在外面的主场景）
+//    - 桌面 localhost:3080 ✅
+//    - 局域网 http://192.168.x.x ❌（明文 HTTP 没有 Push API）
+
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
+import { homedir } from 'node:os';
+import { join, dirname } from 'node:path';
+
+const DATA_REL = join('dsh-pocket', 'push');
+const VAPID_FILE = 'vapid.json';
+const SUBS_FILE = 'subscriptions.json';
+
+function defaultWebPush() {
+  // 动态 require（web-push 是 CJS）
+  return require('web-push');
+}
+
+/**
+ * 创建推送服务。
+ * @param {object} opts
+ * @param {string} [opts.home]      $DSH_HOME（默认 ~/.dsh）
+ * @param {object} [opts.webpush]   web-push 库（测试注入 stub）
+ * @param {string} [opts.subject]   VAPID subject（mailto:）
+ * @param {object} [opts.internals] 测试注入：mkdir/write/read
+ * @returns {Promise<PushService>}
+ */
+export async function createPushService({
+  home,
+  webpush = defaultWebPush(),
+  subject = 'mailto:shaobeichen@outlook.com',
+  internals = {},
+} = {}) {
+  const dshHome = home ?? process.env.DSH_HOME ?? join(homedir(), '.dsh');
+  const dir = join(dshHome, DATA_REL);
+  const vapidPath = join(dir, VAPID_FILE);
+  const subsPath = join(dir, SUBS_FILE);
+  const mkdirFn = internals.mkdir ?? mkdir;
+  const read = internals.read ?? readFile;
+  const write = internals.write ?? writeFile;
+
+  await mkdirFn(dir, { recursive: true });
+
+  // VAPID 密钥：生成一次，持久化
+  let vapid;
+  try {
+    vapid = JSON.parse(await read(vapidPath, 'utf8'));
+  } catch {
+    vapid = webpush.generateVAPIDKeys();
+    await write(vapidPath, JSON.stringify(vapid, null, 2) + '\n', { mode: 0o600 });
+  }
+  webpush.setVapidDetails(subject, vapid.publicKey, vapid.privateKey);
+
+  // 订阅集合：endpoint → subscription
+  let subs = new Map();
+  try {
+    for (const s of JSON.parse(await read(subsPath, 'utf8')) ?? []) {
+      if (s?.endpoint) subs.set(s.endpoint, s);
+    }
+  } catch { /* 空开始 */ }
+
+  const persist = async () => {
+    await write(subsPath, JSON.stringify([...subs.values()], null, 2) + '\n', { mode: 0o600 });
+  };
+
+  return {
+    vapidPublicKey: () => vapid.publicKey,
+    count: () => subs.size,
+
+    /** 记录浏览器订阅。 */
+    async subscribe(subscription) {
+      if (!subscription?.endpoint || !subscription?.keys) return false;
+      subs.set(subscription.endpoint, subscription);
+      await persist();
+      return true;
+    },
+
+    /** 按 endpoint 取消订阅。 */
+    async unsubscribe(endpoint) {
+      const removed = subs.delete(endpoint);
+      if (removed) await persist();
+      return removed;
+    },
+
+    /**
+     * 推送通知到所有订阅；失效订阅自动清理。
+     * @param {object} opts
+     * @param {string} opts.title
+     * @param {string} [opts.body]
+     * @param {string} [opts.url]     点击通知打开的地址（默认 /）
+     * @param {object} [opts.data]     额外载荷
+     */
+    async notify({ title, body = '', url = '/', data = {} }) {
+      if (subs.size === 0) return 0;
+      const payload = JSON.stringify({ title, body, url, ...data });
+      let sent = 0;
+      for (const [endpoint, sub] of [...subs.entries()]) {
+        try {
+          await webpush.sendNotification(sub, payload, { TTL: 600 });
+          sent += 1;
+        } catch (err) {
+          // 410 Gone / 404 = 订阅失效，清理
+          const code = err?.statusCode;
+          if (code === 410 || code === 404) {
+            subs.delete(endpoint);
+            await persist();
+          }
+        }
+      }
+      return sent;
+    },
+
+    async dispose() { /* 无长连接需要清理 */ },
+  };
+}

package/lib/web-rpc.js

@@ -17,12 +17,12 @@ function fail(code, message) {
 }
 
 /** 注册 /dsh-pocket 逻辑通道（仅本机 loopback 可调）。 */
-export function installPocketRpc(ctx, { service, log = console }) {
+export function installPocketRpc(ctx, { service, push, log = console }) {
   if (!ctx?.connection?.rpc?.handle) {
     log.warn?.('dsh-pocket: DSH Host Connection RPC unavailable — settings tab disabled | 无 Connection RPC，设置页不可用');
     return () => {};
   }
-  return ctx.connection.rpc.handle(POCKET_RPC_CHANNEL, async (endpoint, _payload = {}, signal) => {
+  return ctx.connection.rpc.handle(POCKET_RPC_CHANNEL, async (endpoint, payload = {}, signal) => {
     if (signal?.aborted) return fail('cancelled', 'The request was cancelled.');
 
     try {
@@ -37,10 +37,24 @@ export function installPocketRpc(ctx, { service, log = console }) {
         service.stopTunnel();
         return ok(redactStatus(await service.status()));
       }
+      if (endpoint === POCKET_ENDPOINTS.pushVapidKey) {
+        return ok({ publicKey: push.vapidPublicKey() });
+      }
+      if (endpoint === POCKET_ENDPOINTS.pushSubscribe) {
+        const added = await push.subscribe(payload?.subscription);
+        return ok({ subscribed: added, count: push.count() });
+      }
+      if (endpoint === POCKET_ENDPOINTS.pushUnsubscribe) {
+        const removed = await push.unsubscribe(payload?.endpoint);
+        return ok({ removed, count: push.count() });
+      }
+      if (endpoint === POCKET_ENDPOINTS.pushStatus) {
+        return ok({ enabled: push.count() > 0, count: push.count() });
+      }
       return fail('bad-request', `Unknown endpoint: ${endpoint}`);
     } catch (err) {
       log.error?.('dsh-pocket: rpc %s failed | RPC 失败: %s', endpoint, err?.message ?? err);
-      return fail('internal', err?.message ?? String(err));
+      return fail('bad-request', err?.message ?? String(err));
     }
   }, { authority: 'loopback' });
 }

package/package.json

@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "qrcode": "^1.5.4",
-    "qrcode-terminal": "^0.12.0"
+    "qrcode-terminal": "^0.12.0",
+    "web-push": "^3.6.7"
   },
   "devDependencies": {
     "esbuild": "^0.25.9",
@@ -76,5 +77,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "version": "1.0.1"
+  "version": "1.0.2"
 }