dsh-vibegap 0.1.2 → 0.1.3

package/README.md

@@ -4,8 +4,9 @@ VibeGap 的 DeepSeek Harness 原生插件。Agent 持续运行 18 秒后，dsh w
 右下角会出现拼写单词卡；会话完成或等待确认时，完成当前单词后自动收起或继续。
 插件可独立运行，不要求安装 VibeGap Python 桌面端。
 如果本机 VibeGap Core 正在运行，插件会自动改用桌面端的当前词书和进度游标；
-Core 在页面打开后才由另一个 Agent 拉起也能自动接入。连接失败或运行中断线时，
-会回退到浏览器内的独立进度，远端游标会同步回本地作为断线续用位置。
+Core 在页面打开后才由另一个 Agent 拉起也能自动接入。为避免两张卡重复出现，
+共享模式下页内卡不自动弹出，但仍可用 `Ctrl+Alt+V` 手动呼出。运行中断线时
+保留当前词并自动重连，不会误跳到首次下载界面。
 
 ## 安装
 
@@ -46,6 +47,8 @@ dsh plugin --profile web remove dsh-vibegap
 本机 Core 可用时，单词和进度改由 `http://127.0.0.1:8765/panel/*` 提供，
 插件每 5 秒低频探测一次，且仅允许来自 `localhost` 或 `127.0.0.1` 的
 HTTP(S) 浏览器 Origin。DSH 单独使用时不会因此启动 Python/Core 进程。
+共享模式目前只发现默认端口 `8765`；若桌面端修改了 `daemon_port`，DSH 会保持
+独立本地模式。
 
 ## 使用
 
@@ -53,6 +56,7 @@ HTTP(S) 浏览器 Origin。DSH 单独使用时不会因此启动 Python/Core 进
 - 输入错误会清空当前拼写并计数。
 - `Tab` 显示或隐藏答案；看过答案后，本词按 fail 完成并前进。
 - `Esc` 或右上角 `×` 隐藏卡片；同一批运行中的会话不会再次弹出。
+- `Ctrl+Alt+V` 手动呼出或隐藏卡片（dsh 标签页处于前台时有效，不受 18 秒规则限制）。
 - “发音”可手动播放美式发音，“自动发音”可随时开关。
 
 ## 开发
@@ -61,6 +65,12 @@ HTTP(S) 浏览器 Origin。DSH 单独使用时不会因此启动 Python/Core 进
 或其他构建步骤。修改 bundle 后刷新页面；修改 `package.json` 或
 `cordis.patch.yml` 后重启 `dsh web`。
 
+纯逻辑与 manifest 兼容性测试：
+
+```bash
+npm test
+```
+
 服务端 `lib/index.js` 会在本机 VibeGap daemon 存在时继续上报 agent 生命周期；
 连接失败会静默降级，不影响 dsh。
 

package/lib/client.js

@@ -35,12 +35,17 @@ window.__ModuleLoader__.load({
       { autoPronounce: true },
       { persist: { name: "vibegap.prefs" } },
     );
+    var posStore = runtime.createSnapshotStore(
+      { x: null, y: null },
+      { persist: { name: "vibegap.pos" } },
+    );
 
     var css = [
       ".vg-card{position:fixed;right:24px;bottom:24px;width:min(390px,calc(100vw - 32px));box-sizing:border-box;padding:16px;border:1px solid var(--dsw-alias-border-l,#d8d8d8);border-radius:14px;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#202020);box-shadow:0 12px 34px rgba(0,0,0,.18);font-family:inherit;pointer-events:auto;outline:none;z-index:1}",
       ".vg-card:focus{border-color:var(--dsw-alias-border-focus,#5794ff);box-shadow:0 12px 34px rgba(0,0,0,.18),0 0 0 2px rgba(87,148,255,.2)}",
-      ".vg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}",
+      ".vg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;cursor:move;user-select:none;touch-action:none}",
       ".vg-title{font-size:13px;font-weight:650;letter-spacing:.02em}",
+      ".vg-prog{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:11px;color:var(--dsw-alias-label-tertiary,#888)}",
       ".vg-close{min-width:28px!important;padding:0!important;font-size:18px!important}",
       ".vg-banner{margin:-2px 0 14px;padding:8px 10px;border-radius:8px;background:var(--dsw-alias-interactive-bg-hover,#f2f3f5);font-size:12px;line-height:1.4}",
       ".vg-word{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:48px;margin:16px 0 12px}",
@@ -54,6 +59,7 @@ window.__ModuleLoader__.load({
       ".vg-hint{margin-top:12px;text-align:center;color:var(--dsw-alias-label-tertiary,#888);font-size:11px}",
       ".vg-empty{padding:18px 4px 8px;text-align:center;color:var(--dsw-alias-label-secondary,#666);font-size:13px;line-height:1.6}",
       ".vg-error{margin-top:10px;color:var(--dsw-alias-state-danger-primary,#c93c37);font-size:12px}",
+      ".vg-reconnect{margin:8px 0 0;text-align:center;color:var(--dsw-alias-state-warning-primary,#9a6700);font-size:12px}",
       ".vg-shake{animation:vg-shake .28s ease-in-out}",
       "@keyframes vg-blink{50%{border-color:transparent}}",
       "@keyframes vg-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}",
@@ -189,6 +195,13 @@ window.__ModuleLoader__.load({
         draft.cursor = Math.min(Math.max(Number(remoteProgress.cursor), 0), draft.words.length - 1);
       });
     }
+    function daemonFailureState(current) {
+      if (current.mode === "daemon" || current.mode === "disconnected") {
+        return { mode: "disconnected", word: current.word };
+      }
+      if (current.mode === "probing") return { mode: "local", word: null };
+      return current;
+    }
     function useDaemonBackend() {
       var backend = React.useState({ mode: "probing", word: null });
       var current = useCell({ mode: "probing", word: null });
@@ -208,14 +221,15 @@ window.__ModuleLoader__.load({
               if (active) setBackend({ mode: "daemon", word: word });
             }
           } catch (_) {
-            if (active && current.current.mode !== "local") setBackend({ mode: "local", word: null });
+            var failed = daemonFailureState(current.current);
+            if (active && failed !== current.current) setBackend(failed);
           }
           if (active) timer = setTimeout(probe, DAEMON_PROBE_MS);
         }
         probe();
         return function () { active = false; if (timer) clearTimeout(timer); };
       }, []);
-      return backend;
+      return [backend[0], setBackend];
     }
 
     function advanceProgress(total) {
@@ -253,10 +267,16 @@ window.__ModuleLoader__.load({
       );
     }
 
-    function useLifecycle(sessionState, visible, setVisible, showBanner, onRestart) {
+    function canAutoPopup(backendMode) {
+      return backendMode !== "daemon" && backendMode !== "disconnected";
+    }
+
+    function useLifecycle(sessionState, visible, setVisible, showBanner, onRestart, allowAutoPopup) {
       var ref = useCell({ running: false, rows: {}, suppressed: false, arm: null, pending: null });
       var runningRef = useCell(false);
       var visibleRef = useCell(visible);
+      var autoPopupRef = useCell(allowAutoPopup);
+      autoPopupRef.current = allowAutoPopup;
       React.useEffect(function () { visibleRef.current = visible; }, [visible]);
       React.useEffect(function () {
         var anyRunning = sessionState.ids.some(function (id) {
@@ -268,7 +288,7 @@ window.__ModuleLoader__.load({
           life.suppressed = false; life.pending = null;
           onRestart();
           if (!visibleRef.current) life.arm = setTimeout(function () {
-            if (!runningRef.current || life.suppressed) return;
+            if (!runningRef.current || life.suppressed || !autoPopupRef.current) return;
             setVisible(true);
             if (life.pending) { showBanner(life.pending); life.pending = null; }
           }, POPUP_DELAY_MS);
@@ -288,34 +308,47 @@ window.__ModuleLoader__.load({
       return { state: ref, running: runningRef };
     }
 
+    function createTypingHandler(configRef) {
+      return function onKey(event) {
+        var config = configRef.current;
+        if (document.activeElement !== config.card.current) return;
+        if (event.key === "Escape") { event.preventDefault(); config.hide(); return; }
+        if (event.key === "Tab") {
+          event.preventDefault(); config.setPeeked(true); config.setTyped(0);
+          config.setRevealed(function (value) { return !value; }); return;
+        }
+        if (event.key.length !== 1 || !/[a-zA-Z'\- ]/.test(event.key)) return;
+        event.preventDefault();
+        if (config.revealed) config.setRevealed(false);
+        if (event.key.toLowerCase() === config.word[config.typed].toLowerCase()) {
+          var next = config.typed + 1; config.setTyped(next);
+          if (next === config.word.length) config.complete();
+          return;
+        }
+        config.setTypos(function (value) { return value + 1; });
+        config.setTyped(0); config.shake();
+      };
+    }
+
     function useTyping(config) {
+      var configRef = useCell(config);
+      configRef.current = config;
       React.useEffect(function () {
         if (!config.visible || !config.focused || !config.word || config.busy) return;
-        function onKey(event) {
-          if (document.activeElement !== config.card.current) return;
-          if (event.key === "Escape") { event.preventDefault(); config.hide(); return; }
-          if (event.key === "Tab") {
-            event.preventDefault(); config.setPeeked(true); config.setTyped(0);
-            config.setRevealed(function (value) { return !value; }); return;
-          }
-          if (event.key.length !== 1 || !/[a-zA-Z'\- ]/.test(event.key)) return;
-          event.preventDefault();
-          if (config.revealed) config.setRevealed(false);
-          if (event.key.toLowerCase() === config.word[config.typed].toLowerCase()) {
-            var next = config.typed + 1; config.setTyped(next);
-            if (next === config.word.length) config.complete();
-            return;
-          }
-          config.setTypos(function (value) { return value + 1; });
-          config.setTyped(0); config.shake();
-        }
+        var onKey = createTypingHandler(configRef);
         document.addEventListener("keydown", onKey);
         return function () { document.removeEventListener("keydown", onKey); };
-      }, [config]);
+      }, [config.visible, config.focused, config.word, config.busy]);
     }
 
     function CardBody(props) {
-      if (!props.word) return h(EmptyCard, { status: props.download, setStatus: props.setDownload });
+      if (!props.word) {
+        if (props.connectionLost) {
+          return h("div", { className: "vg-empty", role: "status" },
+            "桌面端连接已断开，正在自动重连");
+        }
+        return h(EmptyCard, { status: props.download, setStatus: props.setDownload });
+      }
       var translation = props.word.trans.join("；");
       return h(React.Fragment, null,
         h(LetterGrid, {
@@ -325,15 +358,17 @@ window.__ModuleLoader__.load({
         h("div", { className: "vg-trans", title: translation }, translation.slice(0, TRANSLATION_MAX_CHARS)),
         h("div", { className: "vg-meta" },
           props.word.usphone ? "/" + props.word.usphone + "/" : null,
-          props.typos ? "错误 " + props.typos : "尚无错误",
+          props.typos ? "错 " + props.typos : null,
           props.outcome ? h("span", { role: "status" }, props.outcome === "fail" ? "已记为需复习" : "拼写正确") : null,
         ),
+        props.connectionLost ? h("div", { className: "vg-reconnect", role: "status" },
+          "桌面端连接已断开，当前词会在重连后继续") : null,
         h("div", { className: "vg-actions" },
           h(Button, { size: "sm", variant: "outline", onClick: props.pronounce }, "发音"),
           h(Button, { size: "sm", variant: "ghost", onClick: props.toggleAuto },
             "自动发音：" + (props.autoPronounce ? "开" : "关")),
         ),
-        h("div", { className: "vg-hint" }, "点击卡片后拼写 · Tab 查看答案 · Esc 隐藏"),
+        h("div", { className: "vg-hint" }, "点击卡片后拼写 · Tab 查看答案 · Esc 隐藏 · Ctrl+Alt+V 呼出"),
       );
     }
 
@@ -344,6 +379,7 @@ window.__ModuleLoader__.load({
         peeked: React.useState(false), shaking: React.useState(false), busy: React.useState(false),
         outcome: React.useState(""), holdWord: React.useState(null),
         download: React.useState({ busy: false, error: "" }),
+        pos: React.useState(null),
       };
     }
 
@@ -362,12 +398,18 @@ window.__ModuleLoader__.load({
     function activeSelection(local, backend) {
       var remote = backend[0];
       if (remote.mode === "daemon" && remote.word) {
-        return { ordered: [remote.word], word: remote.word, isDaemon: true };
+        return { ordered: [remote.word], word: remote.word, isDaemon: true,
+          connectionLost: false, remoteUnavailable: false };
       }
-      return { ordered: local.ordered, word: local.word, isDaemon: false };
+      if (remote.mode === "disconnected") {
+        return { ordered: remote.word ? [remote.word] : [], word: remote.word, isDaemon: true,
+          connectionLost: true, remoteUnavailable: true };
+      }
+      return { ordered: local.ordered, word: local.word, isDaemon: false,
+        connectionLost: false, remoteUnavailable: false };
     }
 
-    function useLifecycleBridge(sessionState, states, refs) {
+    function useLifecycleBridge(sessionState, states, refs, allowAutoPopup) {
       var showBanner = function (message) {
         refs.banner.current = message; states.banner[1](message);
       };
@@ -376,7 +418,9 @@ window.__ModuleLoader__.load({
         clearTimeout(refs.hideTimer.current); refs.hideTimer.current = null;
         showBanner(null); resetInput(states);
       };
-      var tracker = useLifecycle(sessionState, states.visible[0], states.visible[1], showBanner, onRestart);
+      var tracker = useLifecycle(
+        sessionState, states.visible[0], states.visible[1], showBanner, onRestart, allowAutoPopup,
+      );
       return { tracker: tracker, showBanner: showBanner };
     }
     function resetInput(states) {
@@ -429,7 +473,7 @@ window.__ModuleLoader__.load({
         syncLocalProgress(result);
         var word = await panelRequest("/next-word");
         model.backend[1]({ mode: "daemon", word: word });
-      } catch (_) { model.backend[1]({ mode: "local", word: null }); }
+      } catch (_) { model.backend[1](daemonFailureState(model.backend[0])); }
     }
 
     function shakeCard(states) {
@@ -437,6 +481,31 @@ window.__ModuleLoader__.load({
       setTimeout(function () { states.shaking[1](false); }, SHAKE_MS);
     }
 
+    function startDrag(model, event) {
+      if (event.target.closest("button,a,input,textarea,select")) return;
+      var card = model.refs.card.current;
+      if (!card || event.button !== 0) return;
+      event.preventDefault();
+      var rect = card.getBoundingClientRect();
+      var offsetX = event.clientX - rect.left;
+      var offsetY = event.clientY - rect.top;
+      var last = null;
+      function move(ev) {
+        last = {
+          x: Math.min(Math.max(ev.clientX - offsetX, 0), Math.max(window.innerWidth - rect.width, 0)),
+          y: Math.min(Math.max(ev.clientY - offsetY, 0), Math.max(window.innerHeight - 48, 0)),
+        };
+        model.states.pos[1](last);
+      }
+      function up() {
+        document.removeEventListener("pointermove", move);
+        document.removeEventListener("pointerup", up);
+        if (last) try { posStore.set(last); } catch (_) {}
+      }
+      document.addEventListener("pointermove", move);
+      document.addEventListener("pointerup", up);
+    }
+
     function useCardEffects(model) {
       var word = displayedWord(model);
       React.useEffect(function () { resetInput(model.states); }, [word && word.name]);
@@ -446,6 +515,29 @@ window.__ModuleLoader__.load({
       React.useEffect(function () {
         return function () { if (model.refs.hideTimer.current) clearTimeout(model.refs.hideTimer.current); };
       }, []);
+      React.useEffect(function () {
+        // 页面内手动唤醒:Ctrl+Alt+V 唤出/隐藏(dsh 标签页聚焦时有效)
+        function onSummon(event) {
+          if (!event.ctrlKey || !event.altKey || event.key.toLowerCase() !== "v") return;
+          event.preventDefault();
+          if (model.states.visible[0]) { hideCard(model, true); return; }
+          model.lifecycle.tracker.state.current.suppressed = false;
+          model.states.visible[1](true);
+        }
+        document.addEventListener("keydown", onSummon);
+        return function () { document.removeEventListener("keydown", onSummon); };
+      }, [model.states.visible[0]]);
+      React.useEffect(function () {
+        // 恢复上次拖到的位置;越出当前视口则放弃,回默认右下角
+        try {
+          var saved = posStore.getSnapshot();
+          if (saved && Number.isFinite(saved.x) && Number.isFinite(saved.y) &&
+              saved.x >= 0 && saved.y >= 0 &&
+              saved.x < window.innerWidth - 60 && saved.y < window.innerHeight - 48) {
+            model.states.pos[1]({ x: saved.x, y: saved.y });
+          }
+        } catch (_) {}
+      }, []);
     }
 
     function useCardTyping(model) {
@@ -454,7 +546,8 @@ window.__ModuleLoader__.load({
       useTyping({
         visible: states.visible[0], focused: states.focused[0],
         word: word && word.name,
-        busy: states.busy[0], typed: states.typed[0], revealed: states.revealed[0],
+        busy: states.busy[0] || model.selection.remoteUnavailable,
+        typed: states.typed[0], revealed: states.revealed[0],
         card: model.refs.card, setTyped: states.typed[1], setTypos: states.typos[1],
         setRevealed: states.revealed[1], setPeeked: states.peeked[1],
         hide: function () { hideCard(model, true); },
@@ -468,13 +561,21 @@ window.__ModuleLoader__.load({
       return h(React.Fragment, null, h("style", { id: STYLE_ID }, css),
         h("section", {
           className: "vg-card", tabIndex: 0, ref: model.refs.card, "aria-label": "VibeGap 单词卡",
+          style: states.pos[0]
+            ? { left: states.pos[0].x + "px", top: states.pos[0].y + "px", right: "auto", bottom: "auto" }
+            : undefined,
           onFocus: function (event) { if (event.target === event.currentTarget) states.focused[1](true); },
           onBlur: function () { states.focused[1](false); },
           onMouseDown: function (event) {
             if (!event.target.closest("button,a,input,textarea,select")) model.refs.card.current.focus();
           },
         },
-        h("div", { className: "vg-head" }, h("div", { className: "vg-title" }, "VibeGap"),
+        h("div", {
+          className: "vg-head", title: "按住拖动",
+          onPointerDown: function (event) { startDrag(model, event); },
+        },
+          h("div", { className: "vg-title" }, "VibeGap"),
+          model.progressText ? h("span", { className: "vg-prog" }, model.progressText) : null,
           h(Button, { className: "vg-close", size: "sm", variant: "ghost", title: "隐藏",
             onClick: function () { hideCard(model, true); } }, "×")),
         states.banner[0] ? h("div", { className: "vg-banner", role: "status" }, states.banner[0]) : null,
@@ -489,6 +590,7 @@ window.__ModuleLoader__.load({
         word: word, typed: states.typed[0], typos: states.typos[0], revealed: states.revealed[0],
         focused: states.focused[0], shaking: states.shaking[0], download: states.download[0],
         outcome: states.outcome[0], setDownload: states.download[1], autoPronounce: model.autoPronounce,
+        connectionLost: model.selection.connectionLost,
         pronounce: function () { if (word) safePronounce(word.name); },
         toggleAuto: function () { prefsStore.set({ autoPronounce: !model.autoPronounce }); },
       };
@@ -502,12 +604,24 @@ window.__ModuleLoader__.load({
       var prefs = useSnapshot(prefsStore);
       var states = useCardStates();
       var refs = { card: useCell(null), hideTimer: useCell(null), banner: useCell(null) };
-      var lifecycle = useLifecycleBridge(sessionState, states, refs);
       var backend = useDaemonBackend();
+      var lifecycle = useLifecycleBridge(
+        sessionState, states, refs, canAutoPopup(backend[0].mode),
+      );
       var selection = activeSelection(useWordSelection(progress), backend);
+      var word = selection.word;
+      var progressText = "";
+      if (selection.isDaemon && word && Number.isFinite(Number(word.total))) {
+        progressText = word.position + "/" + word.total +
+          (selection.connectionLost ? " · 桌面端重连中" : " · 共享桌面进度");
+      } else if (selection.ordered.length) {
+        var cursorShown = Math.min(Math.max(Number(progress.cursor) || 0, 0), selection.ordered.length - 1);
+        progressText = cursorShown + "/" + selection.ordered.length + " · 本地进度";
+      }
       var model = {
         states: states, refs: refs, lifecycle: lifecycle, selection: selection, backend: backend,
         autoPronounce: !prefs || prefs.autoPronounce !== false,
+        progressText: progressText,
       };
       useCardEffects(model);
       useCardTyping(model);
@@ -516,6 +630,15 @@ window.__ModuleLoader__.load({
 
     exports.apply = apply;
     exports.inject = inject;
+    exports.__test = {
+      activeSelection: activeSelection,
+      canAutoPopup: canAutoPopup,
+      createTypingHandler: createTypingHandler,
+      daemonFailureState: daemonFailureState,
+      normalizeWords: normalizeWords,
+      transitionNotice: transitionNotice,
+      useTyping: useTyping,
+    };
     return module.exports;
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vibegap",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Self-contained vocabulary flashcards for DeepSeek Harness web sessions",
   "main": "lib/index.js",
   "exports": {
@@ -10,6 +10,9 @@
   },
   "keywords": ["dsh-plugin", "vibegap", "vocabulary", "productivity"],
   "files": ["lib", "cordis.patch.yml", "README.md"],
+  "scripts": {
+    "test": "node --test test/*.test.js"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ktao732084-arch/vibegap.git",