@lyra_wang/dsh-screenshot 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lyra Wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,49 @@
-# Temporary Holding Version
+# @lyra_wang/dsh-screenshot
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+输入框左侧多一个「＋ 截图」按钮：按下 → 系统框选屏幕（空格可切换成「选窗口」）→ 截好的图**直接作为附件进入草稿**，不用剪贴板、不用切 App。
+
+对齐豆包工作 / Codex 的「应用截图」用法，但走的是 DSH 自己的附件管线。
+
+## 为什么是 Host + Client 两半
+
+| 半边 | 干什么 | 为什么不能放在一起 |
+|---|---|---|
+| Host (`index.js`) | 注册 `POST /plugins/screenshot/capture`，调 macOS `screencapture`，把 PNG 原样返回 | 浏览器页面无法打开系统截图 UI；`screencapture` 是同一 GUI 会话里的普通 CLI |
+| Client (`client.js`) | 在 `conversation.input.left` 注册按钮；拿到 PNG 后交给输入框 | 草稿附件的 id 与上传状态由 composer 自己持有，插件只能把 `File` 交回给它的 intake 路径 |
+
+Client 侧**不直接调上传 API**：`ctx.fileUpload.upload()` 只返回服务端凭据，而草稿附件需要客户端自己生成 id + 上传状态表。把图片做成 `File` 后合成一次 `paste` 事件（`ClipboardEvent` + `DataTransfer`），输入框就会走和用户手动粘贴完全相同的代码路径：上传 → 缩略图 → 可删除附件。找不到编辑器时退回「文件选择 input + change 事件」。
+
+## 前台条件
+
+- macOS（使用系统 `screencapture`）
+- DSH Desktop 需要**屏幕录制**权限（系统设置 → 隐私与安全性 → 屏幕录制）。Host 进程实测可直接调用 `screencapture`；如果截图返回空白/失败，先检查这一项。
+
+## 用法
+
+1. 在对话输入框左侧点「＋ 截图」。
+2. 屏幕出现框选十字：拖拽选区域；按 **空格** 切换成窗口选择；按 **Esc** 取消。
+3. 松手后图片出现在草稿的附件区，和粘贴截图完全一样（可删除、可随消息发出）。
+
+顶部会有一条短暂提示告诉你当前状态（框选中 / 已加入 / 出错原因）。
+
+## 实现要点
+
+- `screencapture -i -x -t png <tmp>`：`-i` 交互、`-x` 静音、显式 PNG；退出码非 0 且没有产物 = 用户取消 → 路由返回 `204`，客户端静默复位。
+- 同一时刻只允许一次截图（并发请求返回 `409`），避免两个系统选区叠在一起。
+- 临时文件写在 `mkdtemp` 出来的目录里，返回后立即删除。
+- 路由复用 Host 的连接鉴权（`connection.requestRejection`），只有 DSH 页面能调。
+
+## 已知边界
+
+- 只能在 DSH **桌面端**用：Web 版没有 Host 进程的 GUI 会话，`screencapture` 不可用。
+- 截图期间那个 HTTP 请求会一直挂着（最长 180 秒超时），这是「等用户选完」的必然形态。
+- 依赖 DSH composer 的粘贴处理器；若未来 composer 结构变化导致合成 paste 不再被接收，会退回文件 input 通道，仍不行则报「找不到输入框」。
+
+## 回滚
+
+```bash
+# 从 profile 移除（等价于插件页面里的卸载）
+dsh plugin remove @lyra_wang/dsh-screenshot
+```
+
+或直接删掉 `~/.dsh/profiles/desktop/package.json` 里对应的依赖与 `dsh.profile.bundles` 条目，然后重启 DSH。

package/client.js

@@ -0,0 +1,169 @@
+/**
+ * Client half of the screenshot bundle.
+ *
+ * One compact button in `conversation.input.left`: press it, the Host opens the
+ * system capture UI (crosshair, Space toggles window picking), and the finished
+ * PNG is pushed into the draft as an ordinary image attachment.
+ *
+ * Why a synthetic paste instead of a direct upload call: the composer owns the
+ * draft-attachment registry (client-generated ids + upload progress), so the
+ * only supported way for a plugin to add an image exactly like a user paste is
+ * to hand the same `File` to that intake path. `ClipboardEvent` carries a
+ * `DataTransfer`, so the composer's own paste handler does the rest.
+ */
+window.__ModuleLoader__.load({
+  id: '@lyra_wang/dsh-screenshot',
+  factory(require) {
+    const React = require('react');
+    const h = React.createElement;
+    const { useCallback, useEffect, useRef, useState } = React;
+
+    const ROOT = 'dsh-screenshot';
+    const CAPTURE_PATH = '/plugins/screenshot/capture';
+
+    const CSS = `
+      .${ROOT}-btn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
+        height:26px;padding:0 8px;border-radius:7px;color:var(--dsw-alias-label-secondary,#b9b9c0);
+        font:12px/1 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;user-select:none}
+      .${ROOT}-btn:hover{background:var(--dsw-alias-bg-layer-2,#3a3a41);color:var(--dsw-alias-label-primary,#e6e6e9)}
+      .${ROOT}-btn[data-busy="true"]{opacity:.6;cursor:progress}
+      .${ROOT}-toast{position:fixed;z-index:2147483000;left:50%;transform:translateX(-50%);bottom:86px;
+        padding:8px 14px;border-radius:999px;background:var(--dsw-alias-bg-overlay,#2b2b2f);
+        border:1px solid var(--dsw-alias-border-l1,#3a3a40);box-shadow:0 10px 30px rgba(0,0,0,.4);
+        font:12px/1.3 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;
+        color:var(--dsw-alias-label-primary,#e6e6e9);pointer-events:none;white-space:nowrap}
+      .${ROOT}-toast[data-error="true"]{color:#ff8a8a}
+    `;
+
+    /** Walk up from the button until an ancestor contains the draft editor. */
+    function findComposerScope(node) {
+      let current = node;
+      while (current && current !== document.body) {
+        if (current.querySelector && current.querySelector('[contenteditable="true"], input[type="file"]')) {
+          return current;
+        }
+        current = current.parentElement;
+      }
+      return document.body;
+    }
+
+    function findEditor(scope) {
+      const active = document.activeElement;
+      if (active && active.matches && active.matches('[contenteditable="true"]')) return active;
+      return scope.querySelector('[contenteditable="true"]')
+        || document.querySelector('[contenteditable="true"]');
+    }
+
+    function findFileInput(scope) {
+      return scope.querySelector('input[type="file"]')
+        || document.querySelector('input[type="file"]');
+    }
+
+    /**
+     * Hand one image File to the composer the way a user paste would.
+     * @returns which intake path accepted the file.
+     */
+    function deliverImage(scope, file) {
+      const editor = findEditor(scope);
+      if (editor) {
+        editor.focus({ preventScroll: true });
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(file);
+        const event = new ClipboardEvent('paste', {
+          clipboardData: dataTransfer,
+          bubbles: true,
+          cancelable: true,
+        });
+        editor.dispatchEvent(event);
+        return 'paste';
+      }
+      const input = findFileInput(scope);
+      if (input) {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(file);
+        input.files = dataTransfer.files;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+        return 'input';
+      }
+      throw new Error('找不到输入框，无法放入截图');
+    }
+
+    function ScreenshotButton(props) {
+      const [busy, setBusy] = useState(false);
+      const [toast, setToast] = useState(null);
+      const btnRef = useRef(null);
+      const toastTimer = useRef(0);
+
+      const showToast = useCallback((text, isError) => {
+        setToast({ text, isError: isError === true });
+        window.clearTimeout(toastTimer.current);
+        toastTimer.current = window.setTimeout(() => setToast(null), isError ? 5200 : 2200);
+      }, []);
+
+      useEffect(() => () => window.clearTimeout(toastTimer.current), []);
+
+      const capture = useCallback(async () => {
+        if (busy) return;
+        const scope = findComposerScope(btnRef.current);
+        setBusy(true);
+        showToast('框选要截的区域（空格可切窗口，Esc 取消）');
+        try {
+          const response = await fetch(CAPTURE_PATH, {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ mode: 'region' }),
+          });
+          if (response.status === 204) {
+            showToast('已取消截图');
+            return;
+          }
+          if (!response.ok) {
+            const payload = await response.json().catch(() => ({}));
+            throw new Error(payload.message || ('HTTP ' + response.status));
+          }
+          const blob = await response.blob();
+          if (blob.size === 0) throw new Error('截图内容为空');
+          const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+          const file = new File([blob], 'screenshot-' + stamp + '.png', { type: 'image/png' });
+          const via = deliverImage(scope, file);
+          showToast(via === 'paste' ? '截图已加入草稿' : '截图已加入草稿（文件选择通道）');
+        } catch (error) {
+          showToast(error instanceof Error ? error.message : String(error), true);
+        } finally {
+          setBusy(false);
+        }
+      }, [busy, showToast]);
+
+      const button = h('button', {
+        key: 'btn',
+        ref: btnRef,
+        type: 'button',
+        className: ROOT + '-btn',
+        'data-busy': busy ? 'true' : 'false',
+        title: '截图并放入输入框（框选区域，空格切换窗口）',
+        onClick: capture,
+      }, h('span', null, '＋'), h('span', null, busy ? '截图中…' : '截图'));
+
+      const toastNode = toast
+        ? h('div', {
+          key: 'toast',
+          className: ROOT + '-toast',
+          'data-error': toast.isError ? 'true' : 'false',
+        }, toast.text)
+        : null;
+
+      return h(React.Fragment, null, h('style', { key: 'style' }, CSS), button, toastNode);
+    }
+
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        ctx.slots.inject('conversation.input.left', () => ctx.slots.register({
+          name: 'conversation.input.left',
+          id: 'screenshot',
+          order: 4,
+        }, (props) => h(ScreenshotButton, props)));
+      },
+    };
+  },
+});

package/cordis.patch.yml

@@ -0,0 +1,3 @@
+- insert:
+    - id: screenshot
+      name: '@lyra_wang/dsh-screenshot'

package/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect x="6" y="16" width="52" height="36" rx="8" fill="none" stroke="#7aa2ff" stroke-width="4"/>
+  <circle cx="32" cy="34" r="10" fill="none" stroke="#7aa2ff" stroke-width="4"/>
+  <path d="M22 16l3-6h14l3 6" fill="none" stroke="#7aa2ff" stroke-width="4" stroke-linejoin="round"/>
+  <circle cx="48" cy="24" r="2.5" fill="#7aa2ff"/>
+</svg>

package/index.js

@@ -0,0 +1,150 @@
+/**
+ * Host half of the screenshot bundle.
+ *
+ * One route: run macOS `screencapture` and hand the client the raw PNG bytes.
+ *
+ * Why the host and not the browser: a page cannot open the system capture UI.
+ * `screencapture` is a normal CLI in the same GUI session as the Host, so a
+ * region/window selection appears on top of everything and returns when the
+ * operator finishes (Esc cancels).
+ *
+ * `-i` = interactive (crosshair; Space toggles window-picking mode),
+ * `-x` = no shutter sound, `-t png` = explicit format.
+ */
+import { execFile } from 'node:child_process';
+import { mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+export const inject = ['webServer'];
+
+const CAPTURE_PATH = '/plugins/screenshot/capture';
+const CAPTURE_TIMEOUT_MS = 180_000;
+
+let capturing = false;
+
+function sendJson(res, status, payload) {
+  res.setHeader('content-type', 'application/json; charset=utf-8');
+  res.writeHead(status);
+  res.end(JSON.stringify(payload));
+}
+
+/** Reuse the Host's browser authentication for this plugin's own route. */
+function connectionRejection(ctx, req) {
+  const connection = typeof ctx.get === 'function' ? ctx.get('connection') : undefined;
+  if (!connection || typeof connection.requestRejection !== 'function') return undefined;
+  try {
+    return connection.requestRejection({ headers: req.headers });
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Run screencapture into a temp file.
+ * @param mode - "region" for the interactive crosshair, "full" for a silent
+ *   whole-screen capture (kept for self-tests and headless verification).
+ * @returns PNG bytes, or null when the operator cancelled.
+ */
+function capturePng(mode) {
+  const dir = mkdtempSync(join(tmpdir(), 'dsh-screenshot-'));
+  const file = join(dir, 'capture.png');
+  const args = mode === 'full' ? ['-x', '-t', 'png', file] : ['-i', '-x', '-t', 'png', file];
+  return new Promise((resolve, reject) => {
+    execFile('/usr/sbin/screencapture', args, { timeout: CAPTURE_TIMEOUT_MS }, (error) => {
+      try {
+        const buffer = readFileSync(file);
+        resolve(buffer.length > 0 ? buffer : null);
+      } catch {
+        // No file: the operator pressed Esc, or the tool refused to capture.
+        if (error && error.killed !== true && error.code !== 0 && error.code !== 1) {
+          reject(new Error(String(error.message || error)));
+          return;
+        }
+        resolve(null);
+      } finally {
+        try { rmSync(dir, { recursive: true, force: true }); } catch { /* best effort */ }
+      }
+    });
+  });
+}
+
+async function handleCapture(ctx, req, res) {
+  if (req.method !== 'POST') {
+    sendJson(res, 405, { ok: false, message: 'method not allowed' });
+    return;
+  }
+  const rejection = connectionRejection(ctx, req);
+  if (rejection !== undefined) {
+    sendJson(res, rejection, { ok: false, message: '未通过 DSH 连接鉴权（本地 token 无效）' });
+    return;
+  }
+  if (capturing) {
+    sendJson(res, 409, { ok: false, message: '已有一次截图正在进行' });
+    return;
+  }
+  capturing = true;
+  try {
+    const body = await readJsonBody(req);
+    const mode = body && body.mode === 'full' ? 'full' : 'region';
+    const png = await capturePng(mode);
+    if (png === null) {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    res.writeHead(200, {
+      'content-type': 'image/png',
+      'content-length': String(png.length),
+      'cache-control': 'no-store',
+    });
+    res.end(png);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    ctx.logger?.warn?.('screenshot: capture failed: ' + message);
+    sendJson(res, 500, { ok: false, message });
+  } finally {
+    capturing = false;
+  }
+}
+
+function readJsonBody(req, limit = 64 * 1024) {
+  return new Promise((resolve, reject) => {
+    const chunks = [];
+    let size = 0;
+    req.on('data', (chunk) => {
+      size += chunk.length;
+      if (size > limit) {
+        reject(new Error('request body too large'));
+        req.destroy();
+        return;
+      }
+      chunks.push(chunk);
+    });
+    req.on('end', () => {
+      if (chunks.length === 0) {
+        resolve({});
+        return;
+      }
+      try {
+        resolve(JSON.parse(Buffer.concat(chunks).toString('utf8')));
+      } catch {
+        reject(new Error('invalid JSON body'));
+      }
+    });
+    req.on('error', reject);
+  });
+}
+
+export function apply(ctx) {
+  ctx.effect(() => ctx.webServer.register({
+    kind: 'exact',
+    path: CAPTURE_PATH,
+    handler: (req, res) => {
+      handleCapture(ctx, req, res).catch((error) => {
+        ctx.logger?.warn?.('screenshot: unhandled: ' + String(error));
+        try { sendJson(res, 500, { ok: false, message: String(error) }); } catch { /* already sent */ }
+      });
+    },
+  }));
+}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@lyra_wang/dsh-screenshot",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Composer button: capture a screen region/window with macOS screencapture and drop the image straight into the DSH draft as an attachment.",
+  "license": "MIT",
+  "type": "module",
+  "keywords": [
+    "dsh",
+    "dsh-plugin",
+    "deepseek-harness",
+    "cordis",
+    "client-plugin",
+    "screenshot",
+    "capture"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js"
+  },
+  "files": [
+    "index.js",
+    "client.js",
+    "cordis.patch.yml",
+    "icon.svg",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "immediately": true,
+      "inject": [
+        "@deepseek-ai/dsh-client-ui-layout"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LyraWang6688/ai-capability-store.git",
+    "directory": "external-capabilities/plugin/dsh/screenshot"
+  }
+}