dsh-plugin-yanyan-toolkit 0.0.0-stage → 1.4.0

package/lib/client.js

@@ -0,0 +1,201 @@
+// dsh-plugin-yanyan-toolkit — Client (browser) half.
+//
+// 根包是整包元数据的天然宿主：在插件详情页「包含的组件」列表里，给
+// 每个组件自己的中文标题右侧补一个版本标签（v1.2.3 这种）。
+//
+// 官方「包含的组件」列表（app.asar 内 PluginManagerPage 的 RowsSection）
+// 渲染的是 InstalledPluginChild，其协议只有 id/name/enabled/locked，
+// 没有 version 字段，所以版本显示必须由 client 半区自行注入：
+//   - section 有 [data-plugin-rows]，每行 li[data-plugin-row]；
+//   - rowMain 里两个 <code> 分别写着 loader id 与「真实包名」；
+//     按真实包名去 host /components 返回的版本表里查，只处理本包 4 个组件，
+//     不会误伤其它插件的详情页。
+//   - CSS 类名是 CSS Modules 编译过的 hash，不能依赖类名字符串，
+//     一律靠 data 属性 + <code> 文本定位。
+//
+// 装载骨架与「observer + 16ms 节流 + ctx.effect 统一清理」严格照抄现成轮子
+// packages/dsh-plugin-yanyan-update/lib/client.js:354-392，容器/标签自持、
+// 不改 React 管理的 DOM、不干扰 reconciliation；React 重渲染清掉我们的
+// span 后由 MutationObserver 自动重挂。inject 保持 []（fetch / document 原生，
+// 不依赖任何服务），标签文案只有 v + 版本号，无需 locale。
+
+(function (root) {
+  if (!root) return;
+  if (!root.__ModuleLoader__ || typeof root.__ModuleLoader__.load !== 'function') return;
+
+  root.__ModuleLoader__.load({
+    id: 'dsh-plugin-yanyan-toolkit',
+    factory: () => {
+      var module = { exports: {} };
+      var exports = module.exports;
+      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+      var BASE = '/__dsh-plugin-yanyan-toolkit/components';
+      var MARK = 'data-yanyan-component-version';
+      var STYLE_MARK = 'data-yanyan-component-version-style';
+
+      // 用主题变量带回退色，照抄 update 包 CSS 的写法。
+      var CSS = [
+        '[' + MARK + ']{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;' +
+          'font-size:11px;line-height:1.6;font-weight:500;vertical-align:middle;white-space:nowrap;' +
+          'background:var(--dsw-alias-fill-subtle,#f3f4f6);' +
+          'color:var(--dsw-alias-label-secondary-foreground,#6b7280);' +
+          'border:1px solid var(--dsw-alias-stroke-subtle,#e5e7eb);}',
+      ];
+
+      var versions = null;
+      var fetching = false;
+      var observer = null;
+      var ensureTimer = null;
+      var disposed = false;
+
+      function ensureStyle() {
+        try {
+          if (document.querySelector('style[' + STYLE_MARK + ']')) return;
+          var st = document.createElement('style');
+          st.setAttribute(STYLE_MARK, '');
+          st.textContent = CSS.join('\n');
+          (document.head || document.documentElement).appendChild(st);
+        } catch (e) {}
+      }
+
+      function loadVersions() {
+        if (disposed || versions || fetching) return;
+        fetching = true;
+        try {
+          fetch(BASE, { credentials: 'same-origin' })
+            .then(function (r) { return r.json(); })
+            .then(function (d) {
+              if (d && d.ok === true && d.components && typeof d.components === 'object') {
+                versions = d.components;
+                scheduleEnsure();
+              }
+            })
+            .catch(function () {})
+            .then(function () { fetching = false; });
+        } catch (e) {
+          fetching = false;
+        }
+      }
+
+      // 两个 <code> 的直接父容器就是 rowMain；其第一个元素子是标题。
+      // configure 形态下第一个元素子是 button.rowOpen，标题 span 在按钮内部。
+      function titleElement(codes) {
+        var main = null;
+        for (var i = 0; i < codes.length; i++) {
+          if (codes[i].parentElement) { main = codes[i].parentElement; break; }
+        }
+        if (!main) return null;
+        var first = main.firstElementChild;
+        if (!first) return null;
+        if (first.tagName === 'BUTTON') {
+          for (var j = 0; j < first.children.length; j++) {
+            if (first.children[j].tagName === 'SPAN') return first.children[j];
+          }
+        }
+        return first;
+      }
+
+      function ensureTags() {
+        if (disposed) return;
+        if (!versions) { loadVersions(); return; }
+        ensureStyle();
+        var lists;
+        try {
+          lists = document.querySelectorAll('section[data-plugin-rows] li[data-plugin-row]');
+        } catch (e) {
+          return;
+        }
+        for (var i = 0; i < lists.length; i++) {
+          var li = lists[i];
+          var codes;
+          try { codes = li.querySelectorAll('code'); } catch (e) { continue; }
+          if (!codes || codes.length === 0) continue;
+
+          // 只认本聚合包里的组件包名，其它插件详情页一概不动。
+          var ver = null;
+          for (var k = 0; k < codes.length; k++) {
+            var pkg = (codes[k].textContent || '').trim();
+            if (Object.prototype.hasOwnProperty.call(versions, pkg)) {
+              ver = versions[pkg];
+              break;
+            }
+          }
+          if (!ver) continue;
+
+          var host = titleElement(codes);
+          if (!host) continue;
+          var label = 'v' + ver;
+          var existing = null;
+          try { existing = host.querySelector('span[' + MARK + ']'); } catch (e) {}
+          if (existing) {
+            if (existing.getAttribute('data-version') === ver) continue;
+            existing.textContent = label;
+            existing.setAttribute('data-version', ver);
+            continue;
+          }
+          var tag = document.createElement('span');
+          tag.setAttribute(MARK, '');
+          tag.setAttribute('data-version', ver);
+          tag.textContent = label;
+          try { host.appendChild(tag); } catch (e) {}
+        }
+      }
+
+      function scheduleEnsure() {
+        if (ensureTimer !== null) return;
+        ensureTimer = setTimeout(function () {
+          ensureTimer = null;
+          ensureTags();
+        }, 16);
+      }
+
+      var inject = [];
+      var apply = function (ctx) {
+        // ctx.effect 缺失时退化为「尽力跑一次」，不影响所在页面。
+        if (!ctx || typeof ctx.effect !== 'function') {
+          loadVersions();
+          ensureTags();
+          return;
+        }
+        // 所有 observer / timer 集中在这个 effect 内注册与撤销。
+        ctx.effect(function () {
+          disposed = false;
+          loadVersions();
+          ensureTags();
+          try {
+            observer = new MutationObserver(function () { scheduleEnsure(); });
+            observer.observe(document.body, { childList: true, subtree: true });
+          } catch (e) {
+            observer = null;
+          }
+
+          return function () {
+            disposed = true;
+            try { if (observer) observer.disconnect(); } catch (e) {}
+            observer = null;
+            if (ensureTimer !== null) {
+              try { clearTimeout(ensureTimer); } catch (e) {}
+              ensureTimer = null;
+            }
+            try {
+              var tags = document.querySelectorAll('span[' + MARK + ']');
+              for (var i = 0; i < tags.length; i++) {
+                if (tags[i].parentNode) tags[i].parentNode.removeChild(tags[i]);
+              }
+            } catch (e) {}
+            try {
+              var st = document.querySelector('style[' + STYLE_MARK + ']');
+              if (st && st.parentNode) st.parentNode.removeChild(st);
+            } catch (e) {}
+            versions = null;
+          };
+        }, 'yanyan-toolkit: component versions');
+      };
+
+      exports.inject = inject;
+      exports.apply = apply;
+      return module.exports;
+    },
+  });
+})(typeof window !== 'undefined' ? window : typeof self !== 'undefined' ? self : null);

package/lib/index.js

@@ -0,0 +1,149 @@
+// dsh-plugin-yanyan-toolkit — Host (Node) half.
+//
+// 聚合包的自身 loader 行只用于承载五项 patch 元数据与依赖声明，
+// 四个功能插件各自有独立的 loader 行，由 DSH loader 直接挂载。
+// 因此这里不重复官方全家桶的 dynamic shell（await import + ctx.plugin）
+// 机制，只贡献两条同源回环路由：
+//   1) /health     —— 确认本包已被装载；
+//   2) /components —— 动态给出各组件自己的版本，供 client 半区在
+//                     插件详情页「包含的组件」列表逐个显示。
+//
+// 版本一律从各组件自身的 package.json 读取，绝不写死，避免文档/DOM
+// 与真实版本失同步（聚合包与四个功能插件可以各自独立发版）。
+
+import { readFileSync } from 'node:fs';
+import { createRequire } from 'node:module';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+export const name = 'dsh-plugin-yanyan-toolkit';
+export const inject = ['webServer', 'connection'];
+
+export const HEALTH_ROUTE = '/__dsh-plugin-yanyan-toolkit/health';
+export const COMPONENTS_ROUTE = '/__dsh-plugin-yanyan-toolkit/components';
+
+const ROOT_DIR = dirname(dirname(fileURLToPath(import.meta.url)));
+const EXTERNAL_PKG = '@linxin666/dsh-session-archive';
+const SUBPACKAGES = ['dsh-plugin-yanyan-update', 'dsh-plugin-yanyan-subagent', 'dsh-plugin-yanyan-icon'];
+
+const FORBIDDEN_BODY = { ok: false, error: 'forbidden', message: '请求未通过 DSH 准入裁决。' };
+const METHOD_BODY = { ok: false, error: 'method-not-allowed', message: '只接受 GET 或 POST 请求。' };
+
+function readJsonSafe(file) {
+  try {
+    return JSON.parse(readFileSync(file, 'utf8'));
+  } catch (error) {
+    return null;
+  }
+}
+
+// 根包版本也从 package.json 动态读取，避免再出现 VERSION 常量与包声明失同步。
+export const VERSION = String((readJsonSafe(join(ROOT_DIR, 'package.json')) || {}).version || '0.0.0');
+
+/**
+ * 收集聚合包内每个组件自己的版本：{ 包名: version }。
+ * - 自身与三个自写子包：读各自 package.json 的 version。
+ * - 外部复用的会话归档包：优先用 createRequire 解析实际安装包的
+ *   package.json（拿到真实版本，而非声明范围）；解析不到时回退根包
+ *   dependencies 的声明，并去掉 ^ / ~ 等范围前缀。
+ * 纯函数，rootDir 可注入以便单测，读不到一律给 'unknown' 而不抛错。
+ */
+export function collectVersions(rootDir = ROOT_DIR) {
+  const out = {};
+  const rootPkg = readJsonSafe(join(rootDir, 'package.json')) || {};
+  out[rootPkg.name || 'dsh-plugin-yanyan-toolkit'] = String(rootPkg.version || 'unknown');
+
+  for (const sub of SUBPACKAGES) {
+    const pkg = readJsonSafe(join(rootDir, 'packages', sub, 'package.json')) || {};
+    out[sub] = String(pkg.version || 'unknown');
+  }
+
+  let external = null;
+  // 先走规范的 require.resolve（拿到真实安装版本）；部分包的 exports 不暴露
+  // ./package.json 会抛 ERR_PACKAGE_PATH_NOT_EXPORTED，再直接定位 node_modules
+  // 文件路径兜底；两者都失败才回退根包 dependencies 的声明范围（去掉 ^ / ~）。
+  const candidates = [];
+  try {
+    const require = createRequire(join(rootDir, 'package.json'));
+    candidates.push(require.resolve(EXTERNAL_PKG + '/package.json', { paths: [rootDir] }));
+  } catch (error) {
+    // 继续走文件路径兜底
+  }
+  let dir = rootDir;
+  for (let i = 0; i < 4; i++) {
+    candidates.push(join(dir, 'node_modules', EXTERNAL_PKG, 'package.json'));
+    dir = dirname(dir);
+  }
+  for (const file of candidates) {
+    const v = (readJsonSafe(file) || {}).version;
+    if (v) { external = v; break; }
+  }
+  if (!external) {
+    const spec = (rootPkg.dependencies || {})[EXTERNAL_PKG];
+    if (spec) external = String(spec).replace(/^[\^~>=<\s]+/, '');
+  }
+  out[EXTERNAL_PKG] = String(external || 'unknown');
+  return out;
+}
+
+function respond(res, status, body) {
+  const payload = JSON.stringify(body);
+  res.writeHead(status, {
+    'content-type': 'application/json; charset=utf-8',
+    'cache-control': 'no-store',
+    'content-length': Buffer.byteLength(payload),
+  });
+  res.end(payload);
+}
+
+// 统一准入：仅当 requestRejection 返回 undefined 时放行（不自建信任例外）。
+function makeFence(ctx) {
+  return (req) => {
+    try {
+      return ctx.connection.requestRejection(req) === undefined;
+    } catch (error) {
+      return false;
+    }
+  };
+}
+
+function makeRouteHandler(fence, payload) {
+  return (req, res) => {
+    if (!fence(req)) {
+      respond(res, 403, FORBIDDEN_BODY);
+      return;
+    }
+    const method = String(req.method || 'GET').toUpperCase();
+    if (method !== 'GET' && method !== 'POST') {
+      respond(res, 405, METHOD_BODY);
+      return;
+    }
+    try {
+      respond(res, 200, payload());
+    } catch (error) {
+      respond(res, 200, { ok: false, error: 'internal', message: String((error && error.message) || error) });
+    }
+  };
+}
+
+// register 的返回值直接作为 effect 的清理函数，禁用 / HMR 时路由自动撤销。
+// 复用 dsh-plugin-yanyan-update/lib/index.js:907-918 的多路由注册骨架。
+export function apply(ctx) {
+  const fence = makeFence(ctx);
+  const routes = [
+    {
+      path: HEALTH_ROUTE,
+      handler: makeRouteHandler(fence, () => ({ ok: true, name, version: VERSION })),
+    },
+    {
+      path: COMPONENTS_ROUTE,
+      handler: makeRouteHandler(fence, () => ({ ok: true, components: collectVersions() })),
+    },
+  ];
+  for (const route of routes) {
+    ctx.effect(
+      () => ctx.webServer.register({ kind: 'exact', path: route.path, handler: route.handler }),
+      'dsh-plugin-yanyan-toolkit: route ' + route.path,
+    );
+  }
+}

package/locale/en.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "Yanyan Toolkit",
+    "description": "One bundle with four independently toggleable plugins: Plugin Update (checks local and registry plugin versions, updates them one by one), Session Management (auto-archive / auto-delete, single and batch delete, reusing the existing dsh-session-archive package), Subagent Management (session header tab, permanent per-row delete with log root-cause removal + in-memory projection fix, clean all idle, and idle-time auto-cleanup), and Icon Generator (center-crops an uploaded image and generates an icon.svg fitted for the plugin list artwork slot). Install this one package to get all four."
+  }
+}

package/locale/zh.json

@@ -0,0 +1,6 @@
+{
+  "meta": {
+    "title": "研研工具包",
+    "description": "一个包带上四个可独立开关的插件：插件更新（检查本地与线上插件版本、逐个更新）、会话管理（自动归档 / 自动删除、单条与批量删除，直接复用现成的 dsh-session-archive）、子智能体管理（会话顶部标签、逐个彻底删除：日志根除 + 内存投影根治、清理全部空闲、按空闲时间自动清理）、图标生成（上传图片居中裁切并生成适配插件列表图标位的 icon.svg）。装这一个包即可全部获得。"
+  }
+}

package/package.json

@@ -1,6 +1,84 @@
 {
   "name": "dsh-plugin-yanyan-toolkit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.4.0",
+  "description": "研研工具包：聚合「插件更新」「会话管理」「子智能体管理（日志根除 + 内存投影根治）」「图标生成」四个可独立开关的插件。",
+  "type": "module",
+  "main": "lib/index.js",
+  "icon": "icon.svg",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json",
+    "./locale/*.json": "./locale/*.json",
+    "./icon": "./icon.svg"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "cordis.patch.yml",
+    "icon.svg",
+    "locale/en.json",
+    "locale/zh.json",
+    "README.md",
+    "README.en.md",
+    "README.zh.md",
+    "README.i18n.yaml",
+    "CHANGELOG.md",
+    "LICENSE",
+    "scripts/cleanup-ghost-subagents.mjs",
+    "packages",
+    "!packages/*/test"
+  ],
+  "keywords": [
+    "deepseek-harness",
+    "dsh-plugin",
+    "dsh",
+    "plugin-manager",
+    "session-archive",
+    "subagent",
+    "icon-generator",
+    "toolkit",
+    "cordis",
+    "npm-package",
+    "gitee-mirror"
+  ],
+  "author": "sweet560",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sweet560/dsh-plugin-yanyan-toolkit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sweet560/dsh-plugin-yanyan-toolkit/issues"
+  },
+  "homepage": "https://github.com/sweet560/dsh-plugin-yanyan-toolkit/blob/main#readme",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs",
+    "pack": "npm pack --dry-run"
+  },
+  "dependencies": {
+    "dsh-plugin-yanyan-update": "file:./packages/dsh-plugin-yanyan-update",
+    "dsh-plugin-yanyan-subagent": "file:./packages/dsh-plugin-yanyan-subagent",
+    "dsh-plugin-yanyan-icon": "file:./packages/dsh-plugin-yanyan-icon",
+    "@linxin666/dsh-session-archive": "^0.4.18"
+  },
+  "dsh": {
+    "engines": {
+      "dsh": ">=0.2.2-rc.2"
+    },
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [],
+      "platform": "web"
+    },
+    "manifestVersion": 1
+  }
+}

package/packages/dsh-plugin-yanyan-icon/README.md

@@ -0,0 +1,33 @@
+# 研研工具包 - 图标生成
+
+根据上传的图片，居中裁切为正方形后生成适配 DSH 插件列表图标位（截图红框处）的 `icon.svg`。
+
+## 功能
+
+- 在插件页「已安装插件」标题行右侧提供「图标生成」按钮，点开下拉面板。
+- 选择 PNG / JPEG / WebP 图片后，浏览器用原生 Canvas 居中裁切（cover）并缩到 48×48 PNG。
+- POST 到本包 host 半区 `/__dsh-plugin-yanyan-icon/generate`，由纯函数 `buildIconSvg` 包装成 64×64 viewBox、圆角矩形背景、居中内嵌位图的自包含静态 SVG。
+- 按插件列表真实的 30px 行尺寸与 36px 卡片尺寸双预览，支持一键下载 `icon.svg`。
+- 生成物无脚本、无外链、无 foreignObject、无 currentColor（`<img>` 上下文不继承页面色），解码后不超过 32 KiB，与 DSH 市场索引的内联图标上限对齐。
+
+## 为什么这么做
+
+DSH 插件列表的图标由 `<img src="data:...;base64,...">` 渲染（见 `dsh-client-ui-plugin-manager` 的 `PackageArtwork`），行 30px / 卡片 36px，且明确「render as an image, not inline markup」。package.json 的 `icon` 字段或 `exports["./icon"]` 会被读成 base64 data URL。因此产物必须是纯静态、自带背景与显式颜色的图片，不能依赖页面 CSS 变量或脚本。
+
+## 约束
+
+- 纯 JavaScript ESM host 半区 + `__ModuleLoader__` client 半区，不依赖 React / TS / JSX / 构建工具 / 第三方依赖。
+- UI 文案中文，不使用装饰性 emoji。
+- 所有同源回环路由经 `ctx.connection.requestRejection` 准入；请求体上限 2 MiB。
+- 只接受位图 base64 data URL，拒绝 SVG / javascript: / 外链，颜色只接受 `#rgb` / `#rrggbb`，避免注入。
+- `buildIconSvg` / `normalizeOptions` / `validateDataUrl` / `parseGenerateRequest` 为无副作用纯函数，模块顶层不访问 document / window / ctx。
+
+## 用法
+
+把下载的 `icon.svg` 放到插件包根目录，并在 package.json 声明 `"icon": "icon.svg"` 与 `exports["./icon"]`，重启 DSH 后即可在插件列表显示。
+
+## 测试
+
+```
+node --test test/*.test.mjs
+```

package/packages/dsh-plugin-yanyan-icon/README.zh.md

@@ -0,0 +1,33 @@
+# 研研工具包 - 图标生成
+
+根据上传的图片，居中裁切为正方形后生成适配 DSH 插件列表图标位（截图红框处）的 `icon.svg`。
+
+## 功能
+
+- 在插件页「已安装插件」标题行右侧提供「图标生成」按钮，点开下拉面板。
+- 选择 PNG / JPEG / WebP 图片后，浏览器用原生 Canvas 居中裁切（cover）并缩到 48×48 PNG。
+- POST 到本包 host 半区 `/__dsh-plugin-yanyan-icon/generate`，由纯函数 `buildIconSvg` 包装成 64×64 viewBox、圆角矩形背景、居中内嵌位图的自包含静态 SVG。
+- 按插件列表真实的 30px 行尺寸与 36px 卡片尺寸双预览，支持一键下载 `icon.svg`。
+- 生成物无脚本、无外链、无 foreignObject、无 currentColor（`<img>` 上下文不继承页面色），解码后不超过 32 KiB，与 DSH 市场索引的内联图标上限对齐。
+
+## 为什么这么做
+
+DSH 插件列表的图标由 `<img src="data:...;base64,...">` 渲染（见 `dsh-client-ui-plugin-manager` 的 `PackageArtwork`），行 30px / 卡片 36px，且明确「render as an image, not inline markup」。package.json 的 `icon` 字段或 `exports["./icon"]` 会被读成 base64 data URL。因此产物必须是纯静态、自带背景与显式颜色的图片，不能依赖页面 CSS 变量或脚本。
+
+## 约束
+
+- 纯 JavaScript ESM host 半区 + `__ModuleLoader__` client 半区，不依赖 React / TS / JSX / 构建工具 / 第三方依赖。
+- UI 文案中文，不使用装饰性 emoji。
+- 所有同源回环路由经 `ctx.connection.requestRejection` 准入；请求体上限 2 MiB。
+- 只接受位图 base64 data URL，拒绝 SVG / javascript: / 外链，颜色只接受 `#rgb` / `#rrggbb`，避免注入。
+- `buildIconSvg` / `normalizeOptions` / `validateDataUrl` / `parseGenerateRequest` 为无副作用纯函数，模块顶层不访问 document / window / ctx。
+
+## 用法
+
+把下载的 `icon.svg` 放到插件包根目录，并在 package.json 声明 `"icon": "icon.svg"` 与 `exports["./icon"]`，重启 DSH 后即可在插件列表显示。
+
+## 测试
+
+```
+node --test test/*.test.mjs
+```

package/packages/dsh-plugin-yanyan-icon/cordis.patch.yml

@@ -0,0 +1,7 @@
+- insert:
+    - id: dsh-plugin-yanyan-icon
+      name: 'dsh-plugin-yanyan-icon'
+      config:
+        radius: 14
+        padding: 4
+        borderWidth: 1

package/packages/dsh-plugin-yanyan-icon/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="icon generator">
+  <rect x="6" y="6" width="52" height="52" rx="14" fill="#eef2ff" stroke="#c7d2fe" stroke-width="2"/>
+  <rect x="14" y="16" width="36" height="28" rx="4" fill="#ffffff" stroke="#6366f1" stroke-width="2"/>
+  <circle cx="24" cy="26" r="3.5" fill="#f59e0b"/>
+  <path d="M16 40 L27 30 L34 36 L41 29 L48 40 Z" fill="#6366f1"/>
+  <path d="M32 46 L32 52 M28 49 L32 53 L36 49" fill="none" stroke="#4f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>