dsh-agent-skills 0.1.0 → 0.1.2

package/README.md

@@ -6,14 +6,16 @@
 
 把 Claude Code、Codex、Gemini CLI、Cursor 等工具的本地 Agent Skills 接入 DeepSeek Harness，并在「设置 → Agent Skills」里统一查看、启停和管理。
 
+![Agent Skills 设置页面](https://raw.githubusercontent.com/minivv/dsh-agent-skills/main/agent-skills-page.png)
+
 ## 它解决什么问题
 
 很多 AI 编程工具都使用 `<技能名>/SKILL.md`，但技能分散在不同目录。`dsh-agent-skills` 会自动发现这些目录，把有效技能汇总进 DSH，并提供一个可视化设置页：
 
-- 自动发现 `~/.agents/skills`、`~/.claude/skills`、`~/.codex/skills`、`~/.gemini/skills` 等常用目录。
+- 默认扫描 `~/.agents/skills`、`~/.claude/skills`、`~/.codex/skills`、`~/.config/opencode/skills` 和 `~/.gemini/skills`。
 - 支持添加任意自定义技能目录。
 - 显示每个来源是否存在、包含多少有效技能，以及技能名称和描述。
-- 可按目录或单个技能启停；变更会持久化，并在下一次 Agent step 生效。
+- 可按目录或单个技能启停；变更会持久化，页面会提示刷新后生效。
 - 监听技能文件变化，也可随时手动重新扫描。
 - 不修改原始 `SKILL.md` 文件。
 
@@ -21,9 +23,9 @@
 
 ### 方式一：DSH 插件市场（推荐）
 
-打开 DSH 的「设置 → 插件市场」，搜索 **Agent Skills**，点击安装。市场会优先使用 npm 包，安装速度快，也不需要在本机重新构建。
+通过 [DSH 插件市场](https://github.com/dsh-market/dsh-market) 安装，或打开 DSH 的「设置 → 插件市场」，搜索 **Agent Skills**，点击安装。市场会优先使用 npm 包，安装速度快，也不需要在本机重新构建。
 
-安装后重启一次 DSH Web，再打开「设置 → Agent Skills」。
+安装后继续完成下面的「开启接管 DSH 技能」步骤，再重启 DSH Web。
 
 ### 方式二：从 npm 安装
 
@@ -31,22 +33,32 @@
 dsh plugin --profile web add dsh-agent-skills
 ```
 
-为了让技能开关覆盖 `standard` 和 `code` Agent preset 中的 filesystem provider，还需安装一次 preset-only 行：
+### 方式三：从 GitHub 安装
 
 ```bash
-DSH_INSTALL_ROOT="$(npm root -g)/@deepseek-ai/dsh" \
-  node ~/.dsh/profiles/web/node_modules/dsh-agent-skills/scripts/install-preset.mjs
+dsh plugin --profile web add github:minivv/dsh-agent-skills
 ```
 
-然后重启 DSH Web。这个 preset 入口只注册 scoped skill provider，不会在 Agent preset 中创建 `agentSkills` host 服务。
+仓库包含 `prepare: npm run build`，因此 pnpm 会在 Git 安装时自动构建。DSH/pnpm 可能会要求你授权构建脚本；不想授权构建时请使用 npm 或插件市场版本，npm 包已经包含构建好的 `lib/`。
+
+### 开启接管 DSH 技能
 
-### 方式三：从 GitHub 安装
+完成任一种安装方式后：
+
+1. 打开 DSH 的「设置 → Agent Skills」。
+2. 点击 **开启接管 DSH 技能**。
+3. 看到“已开启”提示后重启 DSH Web。
+
+开启后，页面中的目录和技能开关会接入 `standard` 与 `code` preset，真正控制 Agent 可见的技能。这个操作只添加 `dsh-agent-skills/preset` provider，不会创建第二个 `agentSkills` host 服务。
+
+如果页面无法定位 DSH 安装位置，可以使用备用命令：
 
 ```bash
-dsh plugin --profile web add github:minivv/dsh-agent-skills
+DSH_INSTALL_ROOT="$(npm root -g)/@deepseek-ai/dsh" \
+  node ~/.dsh/profiles/web/node_modules/dsh-agent-skills/scripts/install-preset.mjs
 ```
 
-仓库包含 `prepare: npm run build`，因此 pnpm 会在 Git 安装时自动构建。DSH/pnpm 可能会要求你授权构建脚本；不想授权构建时请使用 npm 或插件市场版本，npm 包已经包含构建好的 `lib/`。
+执行后重启 DSH Web。DSH 升级可能覆盖内置 preset；如果页面重新显示“开启接管 DSH 技能”，点击一次即可恢复。
 
 ## 使用
 
@@ -54,7 +66,8 @@ dsh plugin --profile web add github:minivv/dsh-agent-skills
 2. 进入「设置 → Agent Skills」。
 3. 检查自动发现的来源，或点击「+ 添加目录」。
 4. 使用来源开关或技能开关控制 Agent 可见范围。
-5. 修改磁盘上的技能后，点击「重新扫描」或等待自动刷新。
+5. 技能区出现“n 个技能变更需刷新页面生效”后，点击「刷新页面」。
+6. 修改磁盘上的技能后，点击「重新扫描」或等待自动刷新。
 
 插件状态保存在：
 
@@ -115,13 +128,14 @@ npm pack --dry-run
 ## 已知约束
 
 - DSH 技能名必须匹配 `[a-z0-9]+(?:-[a-z0-9]+)*`。
-- 修改插件安装或 preset 组合后需要重启一次；技能启停和重新扫描不需要重启。
-- DSH 升级可能覆盖其内置 preset 文件；如开关不再生效，重新运行 `scripts/install-preset.mjs`。
+- 修改插件安装或 preset 组合后需要重启一次；目录或技能开关变更后按页面提示刷新。
+- DSH 升级可能覆盖其内置 preset 文件；如开关不再生效，在设置页重新点击「开启接管 DSH 技能」。
 
 ## 相关链接
 
 - [GitHub](https://github.com/minivv/dsh-agent-skills)
 - [npm](https://www.npmjs.com/package/dsh-agent-skills)
+- [DSH 插件市场](https://github.com/dsh-market/dsh-market)
 - [WeiSpot 项目页](https://weispot.vercel.app/projects/dsh-agent-skills)
 
 ## License

package/lib/client.js

@@ -36,6 +36,14 @@ var zh = {
   nav: "Agent Skills",
   title: "Agent Skills",
   subtitle: "\u6D4F\u89C8\u3001\u542F\u7528\u548C\u7BA1\u7406\u667A\u80FD\u4F53\u6280\u80FD\u4E0E\u6765\u6E90\u3002",
+  takeoverTitle: "\u63A5\u7BA1 DSH \u6280\u80FD",
+  takeoverDescription: "\u5F00\u542F\u540E\uFF0C\u8FD9\u91CC\u7684\u76EE\u5F55\u548C\u6280\u80FD\u5F00\u5173\u4F1A\u771F\u6B63\u63A7\u5236 Agent \u53EF\u89C1\u7684\u6280\u80FD\u3002",
+  takeoverEnabledTitle: "\u5DF2\u63A5\u7BA1 DSH \u6280\u80FD",
+  takeoverEnabledDescription: "\u76EE\u5F55\u548C\u6280\u80FD\u5F00\u5173\u5DF2\u63A5\u5165 standard \u4E0E code \u9884\u8BBE\u3002",
+  takeoverRestartDescription: "\u5DF2\u5F00\u542F\uFF0C\u8BF7\u91CD\u542F DSH \u540E\u751F\u6548\u3002",
+  takeoverPartialDescription: "\u5DF2\u63A5\u5165 {configured}/{total} \u4E2A\u9884\u8BBE\uFF0C\u70B9\u51FB\u7EE7\u7EED\u5B8C\u6210\u3002",
+  takeoverUnavailableDescription: "\u672A\u627E\u5230 DSH \u5B89\u88C5\u4F4D\u7F6E\uFF0C\u8BF7\u786E\u8BA4\u5F53\u524D\u9875\u9762\u7531 DSH \u542F\u52A8\u540E\u91CD\u8BD5\u3002",
+  takeoverAction: "\u5F00\u542F\u63A5\u7BA1 DSH \u6280\u80FD",
   searchPlaceholder: "\u641C\u7D22\u6280\u80FD\u540D\u79F0\u6216\u63CF\u8FF0\u2026",
   sources: "\u6765\u6E90",
   validCount: "\u4E2A\u6709\u6548",
@@ -51,7 +59,10 @@ var zh = {
   hideSkills: "\u6536\u8D77\u6280\u80FD",
   noSkillsInDir: "\u8BE5\u76EE\u5F55\u4E0B\u6CA1\u6709\u53EF\u7528\u6280\u80FD",
   dirMissing: "\u76EE\u5F55\u4E0D\u5B58\u5728",
-  enabledHeader: "\u6280\u80FD {total} \u4E2A\u53EF\u7528 \xB7 {custom} \u4E2A\u81EA\u5B9A\u4E49 \xB7 {global} \u4E2A\u5168\u5C40 \xB7 {builtin} \u4E2A\u5185\u7F6E",
+  enabledLabel: "\u6280\u80FD",
+  enabledStats: "{total} \u4E2A\u53EF\u7528 \xB7 {custom} \u4E2A\u81EA\u5B9A\u4E49 \xB7 {global} \u4E2A\u5168\u5C40 \xB7 {builtin} \u4E2A\u5185\u7F6E",
+  refreshPending: "{n} \u4E2A\u6280\u80FD\u53D8\u66F4\u9700\u5237\u65B0\u9875\u9762\u751F\u6548",
+  refreshPage: "\u5237\u65B0\u9875\u9762",
   noSkills: "\u5F53\u524D\u6CA1\u6709\u53EF\u7528\u7684\u6280\u80FD\u3002\u70B9\u51FB\u300C+ \u6DFB\u52A0\u76EE\u5F55\u300D\u6DFB\u52A0\u4E00\u4E2A\u6280\u80FD\u76EE\u5F55\uFF0C\u6216\u542F\u7528\u66F4\u591A\u6765\u6E90\u3002",
   noMatch: "\u6CA1\u6709\u5339\u914D\u7684\u6280\u80FD",
   tagCustom: "\u81EA\u5B9A\u4E49",
@@ -75,6 +86,14 @@ var en = {
   nav: "Agent Skills",
   title: "Agent Skills",
   subtitle: "Browse, enable, and manage agent skills and their sources.",
+  takeoverTitle: "Take over DSH skills",
+  takeoverDescription: "Connect these source and skill switches to the skills visible to the Agent.",
+  takeoverEnabledTitle: "DSH skills are managed here",
+  takeoverEnabledDescription: "Source and skill switches are connected to the standard and code presets.",
+  takeoverRestartDescription: "Enabled. Restart DSH to apply the change.",
+  takeoverPartialDescription: "Connected to {configured}/{total} presets. Continue to finish setup.",
+  takeoverUnavailableDescription: "DSH could not be located. Open this page from DSH and try again.",
+  takeoverAction: "Enable DSH skill takeover",
   searchPlaceholder: "Search skills by name or description\u2026",
   sources: "Sources",
   validCount: "valid",
@@ -90,7 +109,10 @@ var en = {
   hideSkills: "Hide skills",
   noSkillsInDir: "No usable skills in this directory",
   dirMissing: "directory missing",
-  enabledHeader: "{total} skills available \xB7 {custom} custom \xB7 {global} global \xB7 {builtin} builtin",
+  enabledLabel: "Skills",
+  enabledStats: "{total} available \xB7 {custom} custom \xB7 {global} global \xB7 {builtin} builtin",
+  refreshPending: "{n} skill changes need a page refresh to take effect",
+  refreshPage: "Refresh page",
   noSkills: "No skills available. Click \u201C+ Add directory\u201D to add a skill directory, or enable more sources.",
   noMatch: "No matching skills",
   tagCustom: "Custom",
@@ -129,13 +151,13 @@ function SkillDescription({ text, t }) {
     const element = ref.current;
     if (element === null) return;
     const check2 = () => {
-      setOverflow(element.scrollHeight > element.clientHeight + 1);
+      if (!expanded) setOverflow(element.scrollHeight > element.clientHeight + 1);
     };
     check2();
     const observer = new ResizeObserver(check2);
     observer.observe(element);
     return () => observer.disconnect();
-  }, [text]);
+  }, [expanded, text]);
   if (text === "") return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { ref, className: expanded ? "as-skill-desc" : "as-skill-desc as-skill-desc-clamped", children: text }),
@@ -180,6 +202,8 @@ function DirCard({
 }
 function AgentSkillsSection({ api, t }) {
   const [view, setView] = (0, import_react.useState)(void 0);
+  const [takeover, setTakeover] = (0, import_react.useState)(void 0);
+  const [takeoverRestartRequired, setTakeoverRestartRequired] = (0, import_react.useState)(false);
   const [busy, setBusy] = (0, import_react.useState)(true);
   const [error51, setError] = (0, import_react.useState)("");
   const [query, setQuery] = (0, import_react.useState)("");
@@ -188,31 +212,61 @@ function AgentSkillsSection({ api, t }) {
   const [addDirText, setAddDirText] = (0, import_react.useState)("");
   const [dirExpanded, setDirExpanded] = (0, import_react.useState)(/* @__PURE__ */ new Set());
   const [saving, setSaving] = (0, import_react.useState)(false);
+  const [pendingSkillCount, setPendingSkillCount] = (0, import_react.useState)(0);
+  const baselineEnabled = (0, import_react.useRef)(void 0);
+  const rememberBaseline = (0, import_react.useCallback)((next) => {
+    if (baselineEnabled.current !== void 0) return;
+    baselineEnabled.current = new Map(next.skills.map((skill) => [skill.name, skill.enabled]));
+  }, []);
+  const updatePendingCount = (0, import_react.useCallback)((next) => {
+    const baseline = baselineEnabled.current;
+    if (baseline === void 0) {
+      rememberBaseline(next);
+      setPendingSkillCount(0);
+      return;
+    }
+    let changed = 0;
+    for (const skill of next.skills) {
+      const initial = baseline.get(skill.name);
+      if (initial !== void 0 && initial !== skill.enabled) changed += 1;
+    }
+    setPendingSkillCount(changed);
+  }, [rememberBaseline]);
   const load = (0, import_react.useCallback)(async (refresh = () => api.list()) => {
     setError("");
     const result2 = await refresh();
     if (result2.ok) {
+      rememberBaseline(result2.value);
       setView(result2.value);
     } else {
       setError(t("errorLoad", { message: result2.error.message }));
     }
+  }, [api, rememberBaseline, t]);
+  const loadTakeover = (0, import_react.useCallback)(async (refresh = () => api.takeoverStatus()) => {
+    const result2 = await refresh();
+    if (result2.ok) {
+      setTakeover(result2.value);
+    } else {
+      setError(t("errorLoad", { message: result2.error.message }));
+    }
   }, [api, t]);
   (0, import_react.useEffect)(() => {
     setBusy(true);
-    void load().finally(() => setBusy(false));
-  }, [load]);
+    void Promise.all([load(), loadTakeover()]).finally(() => setBusy(false));
+  }, [load, loadTakeover]);
   (0, import_react.useEffect)(() => {
     const timer = window.setInterval(() => {
       void load();
     }, 5e3);
     return () => window.clearInterval(timer);
   }, [load]);
-  const mutate = (0, import_react.useCallback)(async (operation) => {
+  const mutate = (0, import_react.useCallback)(async (operation, trackSkillChanges = false) => {
     setSaving(true);
     setError("");
     try {
       const result2 = await operation();
       if (result2.ok) {
+        if (trackSkillChanges) updatePendingCount(result2.value);
         setView(result2.value);
       } else {
         setError(t("errorSave", { message: result2.error.message }));
@@ -220,7 +274,22 @@ function AgentSkillsSection({ api, t }) {
     } finally {
       setSaving(false);
     }
-  }, [t]);
+  }, [t, updatePendingCount]);
+  const enableTakeover = (0, import_react.useCallback)(async () => {
+    setSaving(true);
+    setError("");
+    try {
+      const result2 = await api.enableTakeover();
+      if (result2.ok) {
+        setTakeover(result2.value);
+        setTakeoverRestartRequired(result2.value.enabled);
+      } else {
+        setError(t("errorSave", { message: result2.error.message }));
+      }
+    } finally {
+      setSaving(false);
+    }
+  }, [api, t]);
   const toggleDirExpanded = (path) => {
     setDirExpanded((prev) => {
       const next = new Set(prev);
@@ -265,6 +334,14 @@ function AgentSkillsSection({ api, t }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "as-wrap", "data-plugin": "dsh-agent-skills", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "as-title", children: t("title") }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "as-subtitle", children: t("subtitle") }),
+    takeover !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: takeover.enabled ? "as-takeover as-takeover-enabled" : "as-takeover", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "as-takeover-icon", "aria-hidden": "true", children: takeover.enabled ? "\u2713" : "\u2192" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "as-takeover-copy", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: takeover.enabled ? t("takeoverEnabledTitle") : t("takeoverTitle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: takeoverRestartRequired ? t("takeoverRestartDescription") : takeover.enabled ? t("takeoverEnabledDescription") : takeover.available && takeover.configured > 0 ? t("takeoverPartialDescription", { configured: takeover.configured, total: takeover.total }) : takeover.available ? t("takeoverDescription") : t("takeoverUnavailableDescription") })
+      ] }),
+      !takeover.enabled && takeover.available && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "as-btn as-btn-primary as-takeover-action", disabled: saving, onClick: () => void enableTakeover(), children: t("takeoverAction") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "input",
       {
@@ -376,17 +453,25 @@ function AgentSkillsSection({ api, t }) {
         t,
         expanded: dirExpanded.has(dir.path),
         onToggleExpanded: () => toggleDirExpanded(dir.path),
-        onToggleEnabled: (next) => void mutate(() => api.toggleDir({ path: dir.path, enabled: next })),
+        onToggleEnabled: (next) => void mutate(() => api.toggleDir({ path: dir.path, enabled: next }), true),
         onRemove: () => void mutate(() => api.removeDir({ path: dir.path }))
       },
       dir.path
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "as-skills-header", children: t("enabledHeader", {
-      total: view.counts.total,
-      custom: view.counts.custom,
-      global: view.counts.global,
-      builtin: view.counts.builtin
-    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { className: "as-skills-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "as-skills-header-title", children: t("enabledLabel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "as-skills-header-stats", children: t("enabledStats", {
+        total: view.counts.total,
+        custom: view.counts.custom,
+        global: view.counts.global,
+        builtin: view.counts.builtin
+      }) })
+    ] }),
+    pendingSkillCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "as-refresh-card", role: "status", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "as-refresh-icon", "aria-hidden": "true", children: "\u21BB" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "as-refresh-message", children: t("refreshPending", { n: pendingSkillCount }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "as-btn as-refresh-action", onClick: () => window.location.reload(), children: t("refreshPage") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "as-skill-grid", children: filteredSkills.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "as-empty", children: query.trim() === "" ? t("noSkills") : t("noMatch") }) : filteredSkills.map((skill) => {
       const tagClass = skill.kind === "custom" ? "as-tag-custom" : skill.kind === "builtin" ? "as-tag-builtin" : "as-tag-global";
       const tagLabel = skill.kind === "custom" ? t("tagCustom") : skill.kind === "builtin" ? t("tagBuiltin") : t("tagGlobal");
@@ -403,7 +488,7 @@ function AgentSkillsSection({ api, t }) {
               {
                 checked: skill.enabled,
                 disabled: saving || !skill.toggleable,
-                onChange: (next) => void mutate(() => api.toggleSkill({ name: skill.name, enabled: next })),
+                onChange: (next) => void mutate(() => api.toggleSkill({ name: skill.name, enabled: next }), true),
                 label: skill.enabled ? t("enabled") : t("disabled")
               }
             )
@@ -428,8 +513,11 @@ var CSS = `
   --as-accent: #3fb950;
   --as-accent-soft: rgba(63, 185, 80, 0.15);
   --as-danger: #f85149;
-  --as-radius: 10px;
+  --as-warning: #d29922;
+  --as-warning-soft: rgba(210, 153, 34, 0.12);
+  --as-radius: 8px;
   color-scheme: light dark;
+  -webkit-font-smoothing: antialiased;
 }
 
 .as-wrap { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 860px; }
@@ -438,6 +526,16 @@ var CSS = `
 .as-search { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--as-border); background: transparent; color: inherit; font-size: 13px; outline: none; }
 .as-search:focus { border-color: var(--as-accent); }
 
+.as-takeover { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 9px 10px; border: 1px solid var(--as-border-soft); border-radius: var(--as-radius); background: rgba(128, 128, 128, 0.04); box-sizing: border-box; }
+.as-takeover-enabled { border-color: rgba(63, 185, 80, 0.28); background: rgba(63, 185, 80, 0.07); }
+.as-takeover-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: rgba(128, 128, 128, 0.13); color: var(--as-muted); font-size: 14px; font-weight: 650; }
+.as-takeover-enabled .as-takeover-icon { color: var(--as-accent); background: var(--as-accent-soft); }
+.as-takeover-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
+.as-takeover-copy strong { font-size: 13px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
+.as-takeover-copy span { font-size: 12px; line-height: 1.45; color: var(--as-muted); text-wrap: pretty; }
+.as-takeover-action { min-height: 40px; flex: none; transition-property: transform, background-color; transition-duration: 120ms; }
+.as-takeover-action:active:not(:disabled) { transform: scale(0.96); }
+
 .as-sources-row { display: flex; align-items: baseline; gap: 10px; }
 .as-sources-label { font-size: 14px; font-weight: 550; }
 .as-sources-counts { font-size: 12px; color: var(--as-muted); }
@@ -481,8 +579,15 @@ var CSS = `
 .as-dir-skill-name { font-size: 13px; font-weight: 550; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
 .as-dir-skill-desc { font-size: 12px; color: var(--as-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.as-skills-header { font-size: 13px; font-weight: 550; margin: 4px 0 0; }
-.as-skills-header .muted { font-weight: 450; color: var(--as-muted); }
+.as-skills-header { display: flex; align-items: baseline; gap: 7px; font-size: 13px; font-weight: 550; margin: 4px 0 0; text-wrap: balance; }
+.as-skills-header-title { color: var(--as-text); }
+.as-skills-header-stats { font-size: 11px; font-weight: 450; color: var(--as-muted-2); font-variant-numeric: tabular-nums; }
+.as-refresh-card { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 4px 5px 4px 11px; border: 1px solid rgba(210, 153, 34, 0.28); border-radius: var(--as-radius); background: var(--as-warning-soft); box-sizing: border-box; }
+.as-refresh-icon { flex: none; color: var(--as-warning); font-size: 17px; line-height: 1; }
+.as-refresh-message { flex: 1; min-width: 0; color: var(--as-text); font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; text-wrap: pretty; }
+.as-refresh-action { min-height: 40px; flex: none; border-color: rgba(210, 153, 34, 0.42); background: rgba(210, 153, 34, 0.08); transition-property: transform, background-color; transition-duration: 120ms; }
+.as-refresh-action:hover { background: rgba(210, 153, 34, 0.14); }
+.as-refresh-action:active { transform: scale(0.96); }
 .as-skill-grid { display: flex; flex-direction: column; gap: 8px; }
 .as-skill-card { border: 1px solid var(--as-border-soft); border-radius: var(--as-radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
 .as-skill-row { display: flex; align-items: center; gap: 8px; }
@@ -505,6 +610,43 @@ var CSS = `
 .as-empty { font-size: 12px; color: var(--as-muted); padding: 12px 0; }
 .as-error { font-size: 12px; color: var(--as-danger); }
 .as-busy { font-size: 12px; color: var(--as-muted-2); }
+
+@media (max-width: 640px) {
+  [role="dialog"]:has([data-plugin="dsh-agent-skills"]) { flex-direction: column; }
+  [role="dialog"]:has([data-plugin="dsh-agent-skills"]) > nav {
+    width: 100%;
+    height: auto;
+    flex: none;
+    box-sizing: border-box;
+    border-right: 0;
+    border-bottom: 1px solid var(--as-border-soft);
+  }
+  [role="dialog"]:has([data-plugin="dsh-agent-skills"]) > nav > :first-child { display: none; }
+  [role="dialog"]:has([data-plugin="dsh-agent-skills"]) > nav > :last-child {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 4px;
+  }
+  [role="dialog"]:has([data-plugin="dsh-agent-skills"]) > nav > :last-child > button {
+    min-width: 0;
+    padding-inline: 8px;
+  }
+  [role="dialog"]:has([data-plugin="dsh-agent-skills"]) > div {
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex: 1;
+  }
+  .as-takeover { align-items: flex-start; flex-wrap: wrap; }
+  .as-takeover-action { width: 100%; }
+  .as-actions-row { flex-wrap: wrap; }
+  .as-dir-row { align-items: flex-start; flex-wrap: wrap; }
+  .as-dir-path { flex: 1; min-width: 120px; }
+  .as-skill-row { align-items: flex-start; flex-wrap: wrap; }
+  .as-refresh-card { flex-wrap: wrap; padding: 8px 9px; }
+  .as-refresh-message { min-width: calc(100% - 34px); }
+  .as-refresh-action { width: 100%; }
+}
 `;
 var installed;
 function injectStyles() {
@@ -15092,6 +15234,16 @@ var agentSkillsViewSchema = external_exports.object({
   validDirs: external_exports.number().int().min(0),
   missingDirs: external_exports.number().int().min(0)
 });
+var presetTakeoverStatusSchema = external_exports.object({
+  /** Whether a verified DSH install with supported presets was found. */
+  available: external_exports.boolean(),
+  /** Whether every available standard/code preset contains the managed row. */
+  enabled: external_exports.boolean(),
+  /** Number of preset files that already contain the managed row. */
+  configured: external_exports.number().int().min(0),
+  /** Number of supported preset files found in this DSH installation. */
+  total: external_exports.number().int().min(0)
+});
 var toggleSkillInputSchema = external_exports.object({
   name: external_exports.string(),
   enabled: external_exports.boolean()
@@ -15128,6 +15280,24 @@ var TYPERT_REMOTE = {
       parameters: [],
       result: result("AgentSkillsView", agentSkillsViewSchema)
     },
+    {
+      id: `${PKG}#agentSkills/takeoverStatus`,
+      service: "agentSkills",
+      namespace: "agentSkills",
+      method: "takeoverStatus",
+      invocation: direct,
+      parameters: [],
+      result: result("PresetTakeoverStatus", presetTakeoverStatusSchema)
+    },
+    {
+      id: `${PKG}#agentSkills/enableTakeover`,
+      service: "agentSkills",
+      namespace: "agentSkills",
+      method: "enableTakeover",
+      invocation: direct,
+      parameters: [],
+      result: result("PresetTakeoverStatus", presetTakeoverStatusSchema)
+    },
     {
       id: `${PKG}#agentSkills/toggleSkill`,
       service: "agentSkills",