@morehao/dsh-skills-console 0.3.6 → 0.3.8

package/README.md

@@ -37,7 +37,7 @@ DSH（DeepSeek Harness）的**技能控制台**：装、更新、删除、接入
 - **两个入口**：默认在「设置 → 技能控制台」；页头 ⚙ 里可切到左侧栏独立面板，切换立即生效。
 - **一页两 tab**：已安装 / 订阅。页头右侧是「自动接入」（多选 Agent）与「添加技能 / 添加订阅」。
 - **每行五个动作**：开关（启停）、查看、更新、接入设置、删除；窄面板下隐藏「查看」，技能名本身仍是入口。状态标签覆盖最新 / 可更新 / 本地已改 / 上游已移除 / 软链断裂 / 无上游等。
-- **窄面板不跳版**：页头按内容自然换行——放得下时动作组在标题行右侧，放不下（约 630px 以下，如设置页）就整组换到下一行并靠右，插件名始终完整；列表按面板自身宽度在 860px 处切两列；页面预留滚动条槽位，滚动条出现/消失、切 tab、窗口微调都不会让整页翻面。
+- **窄面板不跳版**：页头按内容自然换行——放得下时动作组在标题行右侧，放不下（约 630px 以下，如设置页）就整组换到下一行并靠右，插件名始终完整；列表按面板自身宽度在 860px 处切两列；滚动只发生在列表区（页头、工具栏、筛选条固定不动），滚动条出现/消失、切 tab、窗口微调都不会让整页翻面。
 - **Agent 多了不挤**：每行最多展示 3 个，其余折成 `+n`，悬浮或聚焦即可看全。
 - **找得到**：支持按名称 / 来源 / Agent 搜索，按「可更新 / 待检查 / 已停用」筛选，平铺或按 Agent 分组。
 - **待检查 vs 无上游**：「待检查」只表示*这次*没拿到上游结论（限流、网络、仓库 404 等）；再次点「检查更新」时，如果上次没有结论、上游又只回了 304，会无视 ETag 完整重读一次树，不会把「待检查」永久粘住。没有可用订阅来源的技能标「无上游」——它们无法参与更新检查，不计入待检查。

package/client.js

@@ -470,8 +470,45 @@ try {
 } catch {
   ReactDOM = null;
 }
-function portalize(node) {
-  return ReactDOM?.createPortal && typeof document !== "undefined" && document.body ? ReactDOM.createPortal(node, document.body) : node;
+function overlayHost() {
+  if (typeof document === "undefined") return null;
+  const root = document.querySelector?.(".dshsc-root");
+  const dialog = root?.closest?.('[role="dialog"]');
+  return dialog || document.querySelector?.("body") || null;
+}
+function portalize(node, target) {
+  const host = target || (typeof document !== "undefined" ? document.body : null);
+  return ReactDOM?.createPortal && host ? ReactDOM.createPortal(node, host) : node;
+}
+var overlayLayers = [];
+var escapeGuarded = false;
+function onOverlayEscape(event) {
+  if (event.key !== "Escape" || overlayLayers.length === 0) return;
+  event.preventDefault?.();
+  event.stopPropagation?.();
+  event.stopImmediatePropagation?.();
+  overlayLayers[overlayLayers.length - 1].close();
+}
+function useOverlayLayer(active, close) {
+  const closeRef = import_react.default.useRef(close);
+  closeRef.current = close;
+  import_react.default.useEffect(() => {
+    if (!active || typeof document === "undefined") return void 0;
+    const layer = { close: () => closeRef.current?.() };
+    overlayLayers.push(layer);
+    if (!escapeGuarded) {
+      document.addEventListener("keydown", onOverlayEscape, true);
+      escapeGuarded = true;
+    }
+    return () => {
+      const index = overlayLayers.indexOf(layer);
+      if (index >= 0) overlayLayers.splice(index, 1);
+      if (overlayLayers.length === 0 && escapeGuarded) {
+        document.removeEventListener("keydown", onOverlayEscape, true);
+        escapeGuarded = false;
+      }
+    };
+  }, [active]);
 }
 
 // client/icons.js
@@ -811,21 +848,52 @@ function FolderIcon({ size = 12 }) {
 }
 
 // client/section.js
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
+
+// client/scroll.js
+function isScroller(node, tolerance = 4) {
+  if (!node || typeof getComputedStyle !== "function") return false;
+  const style = getComputedStyle(node);
+  return Boolean(style && /(auto|scroll)/.test(style.overflowY || "") && node.scrollHeight > node.clientHeight + tolerance);
+}
+function nearestScroller(node, tolerance = 4) {
+  let current = node?.parentElement || null;
+  while (current) {
+    if (isScroller(current, tolerance)) return current;
+    current = current.parentElement || null;
+  }
+  return typeof document !== "undefined" ? document.scrollingElement || null : null;
+}
+function scrollHost(node, tolerance = 4) {
+  if (isScroller(node, tolerance)) return node;
+  return node && nearestScroller(node, tolerance) || node;
+}
 
 // client/styles.js
 var CSS = `
-  /* 主面板形态：与 DSH 自带管理页同一边距/滚动方式。
-     scrollbar-gutter: stable 让滚动条出现/消失都不改变内容宽度——否则列表一长出来，
-     内容就窄 5~15px，贴着断点的布局会整页跳一次。 */
-  .dshsc-page { box-sizing: border-box; width: 100%; height: 100%; overflow: auto;
-    scrollbar-gutter: stable;
+  /* 主面板形态：页面本身固定不滚，滚动条只出现在列表区（.dshsc-listscroll）。
+     页头 / 工具栏 / 筛选条是 flex:none 的固定行，行区域 flex:1 + overflow:auto。
+     scrollbar-gutter 跟着滚动条一起挪到列表区：行区域变长/变短都不改变自身宽度，
+     贴着 860 断点的布局不会因为滚动条出现整页翻面。 */
+  .dshsc-page { box-sizing: border-box; width: 100%; height: 100%; overflow: hidden;
     padding: calc(28px + var(--dsh-frame-top-clearance, 0px)) clamp(24px, 4vw, 48px) 48px; }
   .dshsc-page .dshsc-root { max-width: 980px; margin: 0 auto; }
   .dshsc-page .dshsc-title { font-size: 20px; font-weight: 500; line-height: 28px; }
   .dshsc-page .dshsc-sub { font-size: 13px; line-height: 20px; }
-  .dshsc-root { display: flex; flex-direction: column; gap: 14px; color: var(--dsw-alias-label-primary);
+  /* 高度取满挂载面：侧栏 main 是 100%，设置页是宿主 .options 的内容高。
+     宿主没给确定高度时（height:100% 解析为 auto）退化成外层滚动，不会把内容裁掉。 */
+  .dshsc-root { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 0;
+    color: var(--dsw-alias-label-primary);
     container-type: inline-size; container-name: dshsc; }
+  /* 页头 / 工具栏 / 顶部提示条高度不参与压缩；tab 面板吃满剩余高度，
+     面板里的筛选条与说明固定，只有行区域（.dshsc-listscroll）自己出现滚动条。 */
+  .dshsc-root > .dshsc-head, .dshsc-root > .dshsc-toolbar,
+  .dshsc-root > .dshsc-banner, .dshsc-root > .dshsc-meta { flex: none; }
+  .dshsc-tabpane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
+  .dshsc-tabpane > .dshsc-banner, .dshsc-tabpane > .dshsc-notice,
+  .dshsc-tabpane > .dshsc-listbar { flex: none; }
+  .dshsc-listscroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
+    scrollbar-gutter: stable; }
   /* 页头：左标题块、右业务动作。动作组不靠固定断点换行——标题块的 flex-basis 用内容宽度
      （auto），放得下就同排、放不下（约 630px 以下）动作组自然换到第二行并靠右。
      这样窄面板（设置页 ~565px）会回到「动作在下、标识在上」，身份胶囊永远是完整的，
@@ -1218,8 +1286,9 @@ var CSS = `
     color: var(--dsw-alias-label-secondary); line-height: 1.6; }
   .dshsc-reader-placeholder b { color: var(--dsw-alias-label-primary); font-size: 13px; }
 
-  /* 文件 tab：左树右预览；抽屉里上下排 */
-  .dshsc-reader-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
+  /* 文件 tab：抽屉里上下排；整页（宽容器）左树右预览 */
+  .dshsc-reader-files { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
+  .dshsc-reader-page .dshsc-reader-files { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
   .dshsc-reader-tree { border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; overflow: auto;
     max-height: 300px; background: var(--dsw-alias-bg-layer-1); }
   .dshsc-reader-preview { border: 1px solid var(--dsw-alias-border-l1); border-radius: 10px; overflow: hidden;
@@ -1313,8 +1382,11 @@ var CSS = `
   .dshsc-md-table th { background: var(--dsw-alias-bg-layer-2); font-weight: 600; }
   .dshsc-md-table tr:last-child td { border-bottom: 0; }
 
-  /* 整页（A1）：返回条 + hero + 目录 + 720px 正文 */
-  .dshsc-reader-page { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
+  /* 整页（A1）：返回条 + hero + 目录 + 720px 正文。
+     root 高度固定后，整页阅读器也自己撑满：顶栏 / hero 固定，正文列内部滚动，
+     返回按钮不会跟着长文滚走。 */
+  .dshsc-reader-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
+  .dshsc-reader-page > .dshsc-reader-topbar, .dshsc-reader-page > .dshsc-reader-hero { flex: none; }
   .dshsc-reader-topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
   .dshsc-reader-topbar .dshsc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
     box-sizing: border-box; height: 28px; padding: 0 10px; font-size: 12px; line-height: 1; white-space: nowrap; }
@@ -1334,7 +1406,11 @@ var CSS = `
     background: var(--dsw-alias-bg-layer-1); }
   .dshsc-reader-hero .dshsc-reader-head { border-bottom: 0; }
   .dshsc-reader-hero .dshsc-reader-desc { -webkit-line-clamp: 3; max-width: 78ch; }
-  .dshsc-reader-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; }
+  .dshsc-reader-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr);
+    gap: 18px; align-items: stretch; }
+  /* 只有目录真的在的时候才开第二轨：否则唯一的正文列会被自动摆进 180px 的目录轨，
+     文件 / 信息 tab 会窄成一条（树里的文件名被截断、预览挤到下面）。 */
+  .dshsc-reader-layout.has-toc { grid-template-columns: 180px minmax(0, 1fr); }
   .dshsc-reader-toc { position: sticky; top: 0; display: flex; flex-direction: column; gap: 1px;
     max-height: 70vh; overflow: auto; padding-right: 4px; }
   .dshsc-reader-toc-title { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
@@ -1348,7 +1424,8 @@ var CSS = `
   .dshsc-reader-tocitem.on { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 12%, transparent);
     color: var(--dsw-alias-brand-primary); }
   .dshsc-reader-tocitem:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 1px; }
-  .dshsc-reader-col { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--dsw-alias-border-l1);
+  .dshsc-reader-col { display: flex; flex-direction: column; min-width: 0; min-height: 0;
+    border: 1px solid var(--dsw-alias-border-l1);
     border-radius: 12px; background: var(--dsw-alias-bg-layer-1); overflow: hidden; }
   .dshsc-reader-col .dshsc-reader-tabs { border-top: 0; }
   .dshsc-reader-page .dshsc-reader-body { max-height: none; }
@@ -1359,11 +1436,20 @@ var CSS = `
   @container dshsc (max-width: 860px) {
     /* 行内「查看」先让位：技能名本身仍是入口 */
     .dshsc-row .dshsc-view { display: none; }
-    .dshsc-reader-layout { grid-template-columns: minmax(0, 1fr); }
+    .dshsc-reader-layout.has-toc { grid-template-columns: minmax(0, 1fr); }
+    .dshsc-reader-page .dshsc-reader-files { grid-template-columns: minmax(0, 1fr); }
     .dshsc-reader-toc { display: none; }
     .dshsc-reader-page .dshsc-reader-desc { -webkit-line-clamp: 2; }
   }
 
+  /* 描述默认按行数截断；真被截断时下面给「展开 / 收起」，所以要压在上面所有 clamp 规则之后 */
+  .dshsc-reader-descblock { display: flex; flex-direction: column; align-items: flex-start; }
+  .dshsc-reader-desc.expanded { display: block; overflow: visible; -webkit-line-clamp: unset; }
+  .dshsc-reader-more { margin-top: 3px; padding: 0; border: 0; border-radius: 4px; background: transparent;
+    color: var(--dsw-alias-brand-primary); font: inherit; font-size: 11.5px; line-height: 1.6; cursor: pointer; }
+  .dshsc-reader-more:hover { text-decoration: underline; }
+  .dshsc-reader-more:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px; }
+
   .dshsc-toast { position: fixed; right: 18px; bottom: 18px; z-index: 70; font-size: 12px; padding: 10px 13px; border-radius: 9px;
     background: var(--dsw-alias-bg-layer-3); color: var(--dsw-alias-label-primary); border: 1px solid var(--dsw-alias-border-l2);
     box-shadow: 0 8px 24px rgba(0,0,0,.22); max-width: 420px; }
@@ -2197,17 +2283,35 @@ function InstalledTab({
     ) : null;
   }
   function content() {
-    if (!data) return h("div", { className: "dshsc-empty" }, t("empty.loading"));
+    if (!data) {
+      return h(
+        "div",
+        { className: "dshsc-tabpane" },
+        h(
+          "div",
+          { className: "dshsc-listscroll" },
+          h("div", { className: "dshsc-empty" }, t("empty.loading"))
+        )
+      );
+    }
     if (rows.length === 0) {
       return h(
         "div",
-        { className: "dshsc-empty" },
-        h("div", { className: "dshsc-name" }, t("empty.skills")),
-        h("div", { className: "dshsc-meta", style: { justifyContent: "center" } }, t("empty.skillsHint")),
+        { className: "dshsc-tabpane" },
         h(
           "div",
-          { style: { marginTop: 10 } },
-          h("button", { className: "dshsc-btn primary", disabled: !writable, onClick: actions.onAddSkill }, t("action.addSkill"))
+          { className: "dshsc-listscroll" },
+          h(
+            "div",
+            { className: "dshsc-empty" },
+            h("div", { className: "dshsc-name" }, t("empty.skills")),
+            h("div", { className: "dshsc-meta", style: { justifyContent: "center" } }, t("empty.skillsHint")),
+            h(
+              "div",
+              { style: { marginTop: 10 } },
+              h("button", { className: "dshsc-btn primary", disabled: !writable, onClick: actions.onAddSkill }, t("action.addSkill"))
+            )
+          )
         )
       );
     }
@@ -2225,11 +2329,15 @@ function InstalledTab({
     ))) : h("div", { className: "dshsc-list" }, visibleRows.map(rowView));
     return h(
       "div",
-      { style: { display: "flex", flexDirection: "column", gap: 8 } },
+      { className: "dshsc-tabpane" },
       visibleOnlyBanners(),
       builtinNotice(),
       listBar(),
-      visibleRows.length === 0 ? filteredEmpty() : body
+      h(
+        "div",
+        { className: "dshsc-listscroll" },
+        visibleRows.length === 0 ? filteredEmpty() : body
+      )
     );
   }
   return content();
@@ -2281,90 +2389,105 @@ function SubscriptionsTab({
   if (subscriptions.length === 0) {
     return h(
       "div",
-      { className: "dshsc-empty" },
-      h("div", { className: "dshsc-name" }, t("empty.subs")),
-      h("div", { className: "dshsc-meta", style: { justifyContent: "center" } }, t("empty.subsHint")),
+      { className: "dshsc-tabpane" },
       h(
         "div",
-        { style: { marginTop: 10 } },
-        h("button", { className: "dshsc-btn primary", disabled: !writable, onClick: onAdd }, t("action.addSubscription"))
+        { className: "dshsc-listscroll" },
+        h(
+          "div",
+          { className: "dshsc-empty" },
+          h("div", { className: "dshsc-name" }, t("empty.subs")),
+          h("div", { className: "dshsc-meta", style: { justifyContent: "center" } }, t("empty.subsHint")),
+          h(
+            "div",
+            { style: { marginTop: 10 } },
+            h("button", { className: "dshsc-btn primary", disabled: !writable, onClick: onAdd }, t("action.addSubscription"))
+          )
+        )
       )
     );
   }
-  return h("div", { className: "dshsc-list" }, subscriptions.map((subscription) => {
-    const entries = subscription.snapshot?.entries || [];
-    const installedNames = new Set(rows.filter((row) => row.subscriptionId === subscription.id).map((row) => row.name));
-    const open = Boolean(expanded[subscription.id]);
-    return h(
+  return h(
+    "div",
+    { className: "dshsc-tabpane" },
+    h(
       "div",
-      { className: "dshsc-sub-block", key: subscription.id },
-      h(
-        "div",
-        { className: "dshsc-sub-row" },
-        h("button", {
-          className: "dshsc-caret",
-          "aria-expanded": String(open),
-          "aria-label": `${subscription.source} ${open ? t("action.collapse") : t("action.expand")}`,
-          onClick: () => onToggle(subscription.id)
-        }, h(CaretIcon, { open })),
-        h("span", { className: "dshsc-name" }, subscription.source),
-        h("span", { className: "dshsc-tag" }, subscription.ref || t("subscription.defaultRef")),
-        h(
-          "span",
-          { className: "dshsc-substat" },
-          `${entries.length} ${t("skillCount")} · ${t("installed")} ${installedNames.size}`
-        ),
-        h(
-          "div",
-          { className: "dshsc-actions" },
-          h("button", {
-            className: "dshsc-btn sq",
-            disabled: busy !== null,
-            title: t("action.checkUpdates"),
-            "aria-label": `${t("action.checkUpdates")} ${subscription.source}`,
-            onClick: () => void onRefresh(subscription)
-          }, h(RefreshIcon, { size: 13 })),
-          h("button", { className: "dshsc-btn ghost danger", disabled: busy !== null, onClick: () => void onDelete(subscription) }, t("action.unsubscribe"))
-        )
-      ),
-      open ? h("div", { className: "dshsc-sub-list" }, entries.map((entry) => {
-        const installedAlready = installedNames.has(entry.name);
+      { className: "dshsc-listscroll" },
+      h("div", { className: "dshsc-list" }, subscriptions.map((subscription) => {
+        const entries = subscription.snapshot?.entries || [];
+        const installedNames = new Set(rows.filter((row) => row.subscriptionId === subscription.id).map((row) => row.name));
+        const open = Boolean(expanded[subscription.id]);
         return h(
           "div",
-          { className: "dshsc-sub-entry", key: entry.name },
-          h("span", { className: "dshsc-name" }, entry.name),
-          h(
-            "span",
-            { className: `dshsc-state${installedAlready ? " ok" : ""}` },
-            installedAlready ? "✓ " : "",
-            installedAlready ? t("installed") : t("notInstalled")
-          ),
+          { className: "dshsc-sub-block", key: subscription.id },
           h(
             "div",
-            { className: "dshsc-actions" },
-            installedAlready ? null : h("button", {
-              className: "dshsc-btn",
-              disabled: !writable || busy !== null,
-              onClick: () => void onInstall(subscription, entry)
-            }, t("action.install"))
-          )
+            { className: "dshsc-sub-row" },
+            h("button", {
+              className: "dshsc-caret",
+              "aria-expanded": String(open),
+              "aria-label": `${subscription.source} ${open ? t("action.collapse") : t("action.expand")}`,
+              onClick: () => onToggle(subscription.id)
+            }, h(CaretIcon, { open })),
+            h("span", { className: "dshsc-name" }, subscription.source),
+            h("span", { className: "dshsc-tag" }, subscription.ref || t("subscription.defaultRef")),
+            h(
+              "span",
+              { className: "dshsc-substat" },
+              `${entries.length} ${t("skillCount")} · ${t("installed")} ${installedNames.size}`
+            ),
+            h(
+              "div",
+              { className: "dshsc-actions" },
+              h("button", {
+                className: "dshsc-btn sq",
+                disabled: busy !== null,
+                title: t("action.checkUpdates"),
+                "aria-label": `${t("action.checkUpdates")} ${subscription.source}`,
+                onClick: () => void onRefresh(subscription)
+              }, h(RefreshIcon, { size: 13 })),
+              h("button", { className: "dshsc-btn ghost danger", disabled: busy !== null, onClick: () => void onDelete(subscription) }, t("action.unsubscribe"))
+            )
+          ),
+          open ? h("div", { className: "dshsc-sub-list" }, entries.map((entry) => {
+            const installedAlready = installedNames.has(entry.name);
+            return h(
+              "div",
+              { className: "dshsc-sub-entry", key: entry.name },
+              h("span", { className: "dshsc-name" }, entry.name),
+              h(
+                "span",
+                { className: `dshsc-state${installedAlready ? " ok" : ""}` },
+                installedAlready ? "✓ " : "",
+                installedAlready ? t("installed") : t("notInstalled")
+              ),
+              h(
+                "div",
+                { className: "dshsc-actions" },
+                installedAlready ? null : h("button", {
+                  className: "dshsc-btn",
+                  disabled: !writable || busy !== null,
+                  onClick: () => void onInstall(subscription, entry)
+                }, t("action.install"))
+              )
+            );
+          })) : null
         );
-      })) : null
-    );
-  }));
+      }))
+    )
+  );
 }
 
 // client/views/modals.js
+var import_react4 = __toESM(require("react"), 1);
+
+// client/views/add-skill.js
 var import_react3 = __toESM(require("react"), 1);
+
+// client/views/overlay.js
 function Overlay({ t, title, children, footer, onCancel }) {
-  import_react3.default.useEffect(() => {
-    const onKey = (event) => {
-      if (event.key === "Escape") onCancel?.();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [onCancel]);
-  return h(
+  useOverlayLayer(true, onCancel);
+  return portalize(h(
     "div",
     { className: "dshsc-overlay", onClick: (event) => {
       if (event.target === event.currentTarget) onCancel?.();
@@ -2384,10 +2507,154 @@ function Overlay({ t, title, children, footer, onCancel }) {
       children,
       h("div", { className: "dshsc-modal-foot" }, footer)
     )
+  ), overlayHost());
+}
+
+// client/views/add-skill.js
+function AddSkillModal({ t, onCancel, onProbe, onInstall }) {
+  const [source, setSource] = import_react3.default.useState("");
+  const [phase, setPhase] = import_react3.default.useState("idle");
+  const [options, setOptions] = import_react3.default.useState([]);
+  const [selected, setSelected] = import_react3.default.useState(() => /* @__PURE__ */ new Set());
+  const [manual, setManual] = import_react3.default.useState("");
+  const [skipped, setSkipped] = import_react3.default.useState(0);
+  const [error, setError] = import_react3.default.useState(null);
+  const reset = (value) => {
+    setSource(value);
+    setPhase("idle");
+    setOptions([]);
+    setSelected(/* @__PURE__ */ new Set());
+    setSkipped(0);
+    setError(null);
+  };
+  const probe = async () => {
+    const value = source.trim();
+    if (!value || phase === "probing") return;
+    setPhase("probing");
+    setError(null);
+    try {
+      const result = await onProbe(value);
+      const found = Array.isArray(result?.skills) ? result.skills : [];
+      setOptions(found);
+      setSelected(new Set(found.map((item) => item.name)));
+      setSkipped(Math.max(0, Number(result?.skipped) || 0));
+      setPhase(found.length > 0 ? "picked" : "empty");
+    } catch (err) {
+      setError(err?.message || String(err));
+      setPhase("failed");
+    }
+  };
+  const toggle = (name) => setSelected((prev) => {
+    const next = new Set(prev);
+    if (next.has(name)) next.delete(name);
+    else next.add(name);
+    return next;
+  });
+  const names = manual.split(/[,，\s]+/).map((item) => item.trim()).filter(Boolean);
+  const skippedText = skipped > 0 ? t("form.skipped").replace("{n}", String(skipped)) : null;
+  const manualMode = phase === "empty" || phase === "failed";
+  const skills = phase === "picked" ? [...selected] : names;
+  const canSubmit = phase === "picked" ? selected.size > 0 : manualMode ? names.length > 0 : false;
+  const submit = () => {
+    if (!canSubmit) return;
+    onInstall({ source: source.trim(), skills });
+  };
+  return h(
+    Overlay,
+    {
+      t,
+      title: t("action.addSkill"),
+      onCancel,
+      footer: [
+        h("button", { key: "c", className: "dshsc-btn ghost", onClick: onCancel }, t("action.cancel")),
+        h("button", {
+          key: "s",
+          className: "dshsc-btn primary",
+          disabled: !canSubmit,
+          onClick: submit
+        }, t("action.save"))
+      ]
+    },
+    h("p", { className: "dshsc-sub" }, t("form.pickHint")),
+    h(
+      "div",
+      { className: "dshsc-field" },
+      h("span", null, t("form.source")),
+      h(
+        "div",
+        { className: "dshsc-inline" },
+        h("input", {
+          value: source,
+          placeholder: t("form.sourceHint"),
+          onChange: (event) => reset(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") void probe();
+          }
+        }),
+        h("button", {
+          className: "dshsc-btn",
+          disabled: !source.trim() || phase === "probing",
+          onClick: () => void probe()
+        }, phase === "probing" ? t("form.probing") : t("form.probe"))
+      )
+    ),
+    phase === "picked" ? h(
+      "div",
+      { key: "picked" },
+      h("div", { className: "dshsc-group" }, t("form.detected").replace("{n}", String(options.length))),
+      h(
+        "div",
+        { style: { display: "flex", gap: 6, marginBottom: 6 } },
+        h("button", {
+          className: "dshsc-btn ghost",
+          onClick: () => setSelected(new Set(options.map((item) => item.name)))
+        }, t("form.selectAll")),
+        h("button", {
+          className: "dshsc-btn ghost",
+          onClick: () => setSelected(/* @__PURE__ */ new Set())
+        }, t("form.selectNone"))
+      ),
+      h("div", { className: "dshsc-panel" }, options.map((option) => h(
+        "label",
+        { className: "dshsc-check dshsc-skill", key: option.name },
+        h("input", {
+          type: "checkbox",
+          checked: selected.has(option.name),
+          onChange: () => toggle(option.name)
+        }),
+        h(
+          "span",
+          { className: "dshsc-skill-main" },
+          h("span", { className: "dshsc-skill-name" }, option.name),
+          option.description ? h("small", { className: "dshsc-skill-desc" }, option.description) : null,
+          h("small", { className: "dshsc-skill-path" }, option.skillPath)
+        )
+      ))),
+      skippedText ? h("p", { className: "dshsc-sub" }, skippedText) : null
+    ) : null,
+    phase === "probing" ? h("p", { className: "dshsc-sub" }, t("form.probingHint")) : null,
+    manualMode ? h(
+      "div",
+      { key: "manual" },
+      h("p", { className: "dshsc-sub" }, phase === "empty" ? skippedText || t("form.noSkills") : `${t("form.probeFailed")}${error ? ` · ${error}` : ""}`),
+      h(
+        "label",
+        { className: "dshsc-field" },
+        h("span", null, t("form.skills")),
+        h("input", {
+          value: manual,
+          placeholder: "git-kit, handoff",
+          onChange: (event) => setManual(event.target.value)
+        })
+      )
+    ) : null,
+    h("p", { className: "dshsc-sub" }, t("form.hint"))
   );
 }
+
+// client/views/modals.js
 function FormModal({ t, title, hint, fields, onCancel, onSubmit }) {
-  const [form, setForm] = import_react3.default.useState(() => Object.fromEntries(fields.map((field) => [field.key, ""])));
+  const [form, setForm] = import_react4.default.useState(() => Object.fromEntries(fields.map((field) => [field.key, ""])));
   const incomplete = fields.some(
     (field) => field.required !== false && !String(form[field.key] || "").trim()
   );
@@ -2435,14 +2702,14 @@ function LinksModal({ t, row, agents, workspaces, pickDirectory, onCancel, onSav
   const candidates = agents.filter(
     (agent) => agent.kind === "dsh" || agent.kind !== "project" && agent.exists
   );
-  const [targets, setTargets] = import_react3.default.useState(() => {
+  const [targets, setTargets] = import_react4.default.useState(() => {
     const visible = new Set(candidates.map((agent) => agent.target));
     const initial = new Set(row.links.map((link) => link.target).filter((target) => visible.has(target)));
     initial.add("dsh-global");
     return initial;
   });
-  const [scopeProjects, setScopeProjects] = import_react3.default.useState(row.scopeProjects || []);
-  const [scopeMode, setScopeMode] = import_react3.default.useState((row.scopeProjects || []).length > 0 ? "projects" : "global");
+  const [scopeProjects, setScopeProjects] = import_react4.default.useState(row.scopeProjects || []);
+  const [scopeMode, setScopeMode] = import_react4.default.useState((row.scopeProjects || []).length > 0 ? "projects" : "global");
   const workspacePaths = new Set(workspaces.map((workspace) => workspace.path));
   const otherProjects = scopeProjects.filter((project) => !workspacePaths.has(project));
   const toggle = (target) => setTargets((prev) => {
@@ -2536,7 +2803,7 @@ function LinksModal({ t, row, agents, workspaces, pickDirectory, onCancel, onSav
   );
 }
 function AutoLinkModal({ t, settings, agents, dsh, onCancel, onSave }) {
-  const [targets, setTargets] = import_react3.default.useState(() => new Set(
+  const [targets, setTargets] = import_react4.default.useState(() => new Set(
     Array.isArray(settings.autoLinkTargets) ? settings.autoLinkTargets : agents.map((agent) => agent.target)
   ));
   const toggle = (target) => setTargets((prev) => {
@@ -2592,146 +2859,6 @@ function AutoLinkModal({ t, settings, agents, dsh, onCancel, onSave }) {
     h("p", { className: "dshsc-sub" }, t("autoLink.hint"))
   );
 }
-function AddSkillModal({ t, onCancel, onProbe, onInstall }) {
-  const [source, setSource] = import_react3.default.useState("");
-  const [phase, setPhase] = import_react3.default.useState("idle");
-  const [options, setOptions] = import_react3.default.useState([]);
-  const [selected, setSelected] = import_react3.default.useState(() => /* @__PURE__ */ new Set());
-  const [manual, setManual] = import_react3.default.useState("");
-  const [skipped, setSkipped] = import_react3.default.useState(0);
-  const [error, setError] = import_react3.default.useState(null);
-  const reset = (value) => {
-    setSource(value);
-    setPhase("idle");
-    setOptions([]);
-    setSelected(/* @__PURE__ */ new Set());
-    setSkipped(0);
-    setError(null);
-  };
-  const probe = async () => {
-    const value = source.trim();
-    if (!value || phase === "probing") return;
-    setPhase("probing");
-    setError(null);
-    try {
-      const result = await onProbe(value);
-      const found = Array.isArray(result?.skills) ? result.skills : [];
-      setOptions(found);
-      setSelected(new Set(found.map((item) => item.name)));
-      setSkipped(Math.max(0, Number(result?.skipped) || 0));
-      setPhase(found.length > 0 ? "picked" : "empty");
-    } catch (err) {
-      setError(err?.message || String(err));
-      setPhase("failed");
-    }
-  };
-  const toggle = (name) => setSelected((prev) => {
-    const next = new Set(prev);
-    if (next.has(name)) next.delete(name);
-    else next.add(name);
-    return next;
-  });
-  const names = manual.split(/[,，\s]+/).map((item) => item.trim()).filter(Boolean);
-  const skippedText = skipped > 0 ? t("form.skipped").replace("{n}", String(skipped)) : null;
-  const manualMode = phase === "empty" || phase === "failed";
-  const skills = phase === "picked" ? [...selected] : names;
-  const canSubmit = phase === "picked" ? selected.size > 0 : manualMode ? names.length > 0 : false;
-  const submit = () => {
-    if (!canSubmit) return;
-    onInstall({ source: source.trim(), skills });
-  };
-  return h(
-    Overlay,
-    {
-      t,
-      title: t("action.addSkill"),
-      onCancel,
-      footer: [
-        h("button", { key: "c", className: "dshsc-btn ghost", onClick: onCancel }, t("action.cancel")),
-        h("button", {
-          key: "s",
-          className: "dshsc-btn primary",
-          disabled: !canSubmit,
-          onClick: submit
-        }, t("action.save"))
-      ]
-    },
-    h("p", { className: "dshsc-sub" }, t("form.pickHint")),
-    h(
-      "div",
-      { className: "dshsc-field" },
-      h("span", null, t("form.source")),
-      h(
-        "div",
-        { className: "dshsc-inline" },
-        h("input", {
-          value: source,
-          placeholder: t("form.sourceHint"),
-          onChange: (event) => reset(event.target.value),
-          onKeyDown: (event) => {
-            if (event.key === "Enter") void probe();
-          }
-        }),
-        h("button", {
-          className: "dshsc-btn",
-          disabled: !source.trim() || phase === "probing",
-          onClick: () => void probe()
-        }, phase === "probing" ? t("form.probing") : t("form.probe"))
-      )
-    ),
-    phase === "picked" ? h(
-      "div",
-      { key: "picked" },
-      h("div", { className: "dshsc-group" }, t("form.detected").replace("{n}", String(options.length))),
-      h(
-        "div",
-        { style: { display: "flex", gap: 6, marginBottom: 6 } },
-        h("button", {
-          className: "dshsc-btn ghost",
-          onClick: () => setSelected(new Set(options.map((item) => item.name)))
-        }, t("form.selectAll")),
-        h("button", {
-          className: "dshsc-btn ghost",
-          onClick: () => setSelected(/* @__PURE__ */ new Set())
-        }, t("form.selectNone"))
-      ),
-      h("div", { className: "dshsc-panel" }, options.map((option) => h(
-        "label",
-        { className: "dshsc-check dshsc-skill", key: option.name },
-        h("input", {
-          type: "checkbox",
-          checked: selected.has(option.name),
-          onChange: () => toggle(option.name)
-        }),
-        h(
-          "span",
-          { className: "dshsc-skill-main" },
-          h("span", { className: "dshsc-skill-name" }, option.name),
-          option.description ? h("small", { className: "dshsc-skill-desc" }, option.description) : null,
-          h("small", { className: "dshsc-skill-path" }, option.skillPath)
-        )
-      ))),
-      skippedText ? h("p", { className: "dshsc-sub" }, skippedText) : null
-    ) : null,
-    phase === "probing" ? h("p", { className: "dshsc-sub" }, t("form.probingHint")) : null,
-    manualMode ? h(
-      "div",
-      { key: "manual" },
-      h("p", { className: "dshsc-sub" }, phase === "empty" ? skippedText || t("form.noSkills") : `${t("form.probeFailed")}${error ? ` · ${error}` : ""}`),
-      h(
-        "label",
-        { className: "dshsc-field" },
-        h("span", null, t("form.skills")),
-        h("input", {
-          value: manual,
-          placeholder: "git-kit, handoff",
-          onChange: (event) => setManual(event.target.value)
-        })
-      )
-    ) : null,
-    h("p", { className: "dshsc-sub" }, t("form.hint"))
-  );
-}
 function Modals({ t, modal, data, autoLinkAgents, autoLinkDsh, pickDirectory, actions, onClose, onSaveAutoLink }) {
   if (modal.type === "add-skill") {
     return h(AddSkillModal, {
@@ -2814,7 +2941,7 @@ ${conflicts.map((item) => `${item.label}: ${item.linkPath}`).join("\n")}`,
 }
 
 // client/views/skill-reader.js
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // client/markdown.js
 function classifyHref(href) {
@@ -3097,7 +3224,7 @@ function resolveRelativeHref(currentDir, href) {
   return { relPath: out.join("/"), anchor: target.kind === "anchor" ? target.href : "" };
 }
 
-// client/views/skill-reader.js
+// client/views/markdown-view.js
 var PARSE_CACHE = /* @__PURE__ */ new Map();
 function parseCached(text) {
   const key = String(text ?? "");
@@ -3110,48 +3237,6 @@ function parseCached(text) {
   }
   return parsed;
 }
-function formatBytes(bytes) {
-  const value = Number(bytes) || 0;
-  if (value < 1024) return `${value} B`;
-  if (value < 1024 * 1024) return `${(value / 1024).toFixed(value < 10 * 1024 ? 1 : 0)} KB`;
-  return `${(value / (1024 * 1024)).toFixed(1)} MB`;
-}
-function formatWhen(iso) {
-  if (!iso) return null;
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return null;
-  const pad = (value) => String(value).padStart(2, "0");
-  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
-}
-var MARKDOWN = /\.(md|markdown)$/i;
-function isMarkdownPath(relPath) {
-  return MARKDOWN.test(String(relPath || ""));
-}
-function nearestScroller(node) {
-  let current = node?.parentElement || null;
-  while (current) {
-    if (typeof getComputedStyle === "function") {
-      const style = getComputedStyle(current);
-      if (style && /(auto|scroll)/.test(style.overflowY || "") && current.scrollHeight > current.clientHeight + 4) {
-        return current;
-      }
-    }
-    current = current.parentElement || null;
-  }
-  return typeof document !== "undefined" ? document.scrollingElement || null : null;
-}
-function scrollHost(node) {
-  return node && nearestScroller(node) || node;
-}
-var STATUS_KEY = {
-  current: "status.current",
-  "update-available": "status.update",
-  "locally-modified": "status.local",
-  conflict: "status.conflict",
-  "upstream-deleted": "status.deleted",
-  "broken-link": "status.broken",
-  unmanaged: "status.unmanaged"
-};
 function inlineNodes(nodes, { onOpenFile, onOpenAnchor, keyPrefix = "i" }) {
   if (!Array.isArray(nodes)) return null;
   return nodes.map((node, index) => {
@@ -3284,6 +3369,34 @@ function Markdown({ text, onOpenFile, onOpenAnchor }) {
   const { blocks } = parseCached(text);
   return h("div", { className: "dshsc-md" }, blockNodes(blocks, { onOpenFile, onOpenAnchor }));
 }
+
+// client/views/skill-reader.js
+function formatBytes(bytes) {
+  const value = Number(bytes) || 0;
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(value < 10 * 1024 ? 1 : 0)} KB`;
+  return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+}
+function formatWhen(iso) {
+  if (!iso) return null;
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return null;
+  const pad = (value) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+var MARKDOWN = /\.(md|markdown)$/i;
+function isMarkdownPath(relPath) {
+  return MARKDOWN.test(String(relPath || ""));
+}
+var STATUS_KEY = {
+  current: "status.current",
+  "update-available": "status.update",
+  "locally-modified": "status.local",
+  conflict: "status.conflict",
+  "upstream-deleted": "status.deleted",
+  "broken-link": "status.broken",
+  unmanaged: "status.unmanaged"
+};
 function TabButton({ id, label, count, active, onSelect }) {
   return h("button", {
     type: "button",
@@ -3324,14 +3437,18 @@ function SkillReader({
   onToast
 }) {
   const { state, file, loadFile, retry } = useSkillReader(row);
-  const [tab, setTab] = import_react4.default.useState(initialTab);
-  const [format, setFormat] = import_react4.default.useState("rendered");
-  const [docOverride, setDocOverride] = import_react4.default.useState(null);
-  const [fileFormat, setFileFormat] = import_react4.default.useState("rendered");
-  const [tocActive, setTocActive] = import_react4.default.useState(null);
-  const bodyRef = import_react4.default.useRef(null);
-  const dialogRef = import_react4.default.useRef(null);
-  const scrollRef = import_react4.default.useRef(0);
+  const [tab, setTab] = import_react5.default.useState(initialTab);
+  const [format, setFormat] = import_react5.default.useState("rendered");
+  const [docOverride, setDocOverride] = import_react5.default.useState(null);
+  const [fileFormat, setFileFormat] = import_react5.default.useState("rendered");
+  const [tocActive, setTocActive] = import_react5.default.useState(null);
+  const [descOpen, setDescOpen] = import_react5.default.useState(false);
+  const [descClamped, setDescClamped] = import_react5.default.useState(false);
+  const bodyRef = import_react5.default.useRef(null);
+  const dialogRef = import_react5.default.useRef(null);
+  const descRef = import_react5.default.useRef(null);
+  const scrollRef = import_react5.default.useRef(0);
+  useOverlayLayer(variant === "drawer" || variant === "page", onClose);
   const name = row?.name || "";
   const tree = state.tree;
   const files = tree?.files || [];
@@ -3339,30 +3456,54 @@ function SkillReader({
   const bodyText = docOverride ? docOverride.content : state.body?.content || "";
   const description = row?.description || state.body?.meta?.description || "";
   const headings = tab === "doc" && bodyText ? parseCached(bodyText).headings : [];
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     setDocOverride(null);
     scrollRef.current = 0;
   }, [name]);
-  import_react4.default.useEffect(() => {
+  const descOwnerRef = import_react5.default.useRef(name);
+  import_react5.default.useEffect(() => {
+    if (descOwnerRef.current === name) return;
+    descOwnerRef.current = name;
+    setDescOpen(false);
+    setDescClamped(false);
+  }, [name]);
+  import_react5.default.useLayoutEffect(() => {
+    const node = descRef.current;
+    if (!node) return void 0;
+    const measure = () => {
+      if (descOpen) return;
+      const scroll = Number(node.scrollHeight) || 0;
+      const client = Number(node.clientHeight) || 0;
+      setDescClamped(scroll > client + 1);
+    };
+    measure();
+    if (typeof window === "undefined" || !window.addEventListener) return void 0;
+    window.addEventListener("resize", measure);
+    let observer = null;
+    if (typeof ResizeObserver === "function") {
+      observer = new ResizeObserver(measure);
+      observer.observe(node);
+    }
+    return () => {
+      observer?.disconnect?.();
+      window.removeEventListener("resize", measure);
+    };
+  }, [description, descOpen]);
+  import_react5.default.useEffect(() => {
     if (!initialFile) return;
     setTab("files");
     void loadFile(initialFile);
   }, [initialFile, loadFile]);
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     const node = bodyRef.current;
     if (node && scrollRef.current) node.scrollTop = scrollRef.current;
   });
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (variant !== "drawer" || typeof document === "undefined") return void 0;
     const previous = document.activeElement;
     const node = dialogRef.current;
     node?.focus?.();
     const onKeyDown = (event) => {
-      if (event?.key === "Escape") {
-        event.stopPropagation?.();
-        onClose?.();
-        return;
-      }
       if (event?.key !== "Tab" || !node?.querySelectorAll) return;
       const focusables = Array.from(
         node.querySelectorAll('a[href],button:not([disabled]),[tabindex]:not([tabindex="-1"])')
@@ -3378,18 +3519,18 @@ function SkillReader({
         first.focus?.();
       }
     };
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", onKeyDown, true);
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("keydown", onKeyDown, true);
       previous?.focus?.();
     };
   }, [variant, onClose]);
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (variant !== "page" || typeof document === "undefined") return;
     const node = document.getElementById("dshsc-reader-name");
     node?.focus?.();
   }, [variant, name]);
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (variant !== "page" || typeof window === "undefined") return void 0;
     const node = bodyRef.current;
     if (!node?.querySelectorAll) return void 0;
@@ -3459,7 +3600,22 @@ function SkillReader({
         onClick: () => onClose?.()
       }, "×") : null
     ),
-    description ? h("p", { className: "dshsc-reader-desc" }, description) : null,
+    description ? h(
+      "div",
+      { className: "dshsc-reader-descblock" },
+      h("p", {
+        className: `dshsc-reader-desc${descOpen ? " expanded" : ""}`,
+        id: "dshsc-reader-desc",
+        ref: descRef
+      }, description),
+      descClamped ? h("button", {
+        type: "button",
+        className: "dshsc-reader-more",
+        "aria-expanded": String(descOpen),
+        "aria-controls": "dshsc-reader-desc",
+        onClick: () => setDescOpen((prev) => !prev)
+      }, t(descOpen ? "action.collapse" : "action.expand")) : null
+    ) : null,
     h(
       "div",
       { className: "dshsc-reader-meta" },
@@ -3752,6 +3908,7 @@ function SkillReader({
     }, t("action.update")) : null
   );
   if (variant === "page") {
+    const tocShown = headings.length > 1;
     return h(
       "div",
       { className: "dshsc-reader-page" },
@@ -3777,8 +3934,8 @@ function SkillReader({
       h("div", { className: "dshsc-reader-hero" }, header),
       h(
         "div",
-        { className: "dshsc-reader-layout" },
-        headings.length > 1 ? h(
+        { className: `dshsc-reader-layout${tocShown ? " has-toc" : ""}` },
+        tocShown ? h(
           "nav",
           { className: "dshsc-reader-toc", "aria-label": t("viewer.toc") },
           h("div", { className: "dshsc-reader-toc-title" }, t("viewer.toc")),
@@ -3805,25 +3962,26 @@ function SkillReader({
       ref: dialogRef,
       tabIndex: -1
     }, header, tabsBar, body, actionsFooter)
-  ));
+  ), overlayHost());
 }
 
 // client/section.js
 var UPDATABLE2 = /* @__PURE__ */ new Set(["update-available", "locally-modified", "conflict"]);
 function Section({ t, page = false, pickDirectory, onPlacementChange }) {
   const { data, error, busy, toast, setToast, setBusy, reload, run } = useSkillsData();
-  const [tab, setTab] = import_react5.default.useState("installed");
-  const [view, setView] = import_react5.default.useState("flat");
-  const [modal, setModal] = import_react5.default.useState(null);
-  const [expanded, setExpanded] = import_react5.default.useState({});
-  const [placementBusy, setPlacementBusy] = import_react5.default.useState(null);
-  const [placementOverride, setPlacementOverride] = import_react5.default.useState(null);
-  const [query, setQuery] = import_react5.default.useState("");
-  const [viewer, setViewer] = import_react5.default.useState(null);
-  const rootRef = import_react5.default.useRef(null);
-  const scrollPos = import_react5.default.useRef(null);
-  const [filter, setFilter] = import_react5.default.useState("all");
-  const [builtinOpen, setBuiltinOpen] = import_react5.default.useState(false);
+  const [tab, setTab] = import_react6.default.useState("installed");
+  const [view, setView] = import_react6.default.useState("flat");
+  const [modal, setModal] = import_react6.default.useState(null);
+  const [expanded, setExpanded] = import_react6.default.useState({});
+  const [placementBusy, setPlacementBusy] = import_react6.default.useState(null);
+  const [placementOverride, setPlacementOverride] = import_react6.default.useState(null);
+  const [query, setQuery] = import_react6.default.useState("");
+  const [viewer, setViewer] = import_react6.default.useState(null);
+  const rootRef = import_react6.default.useRef(null);
+  const scrollPos = import_react6.default.useRef(null);
+  const restoreScroll = import_react6.default.useRef(null);
+  const [filter, setFilter] = import_react6.default.useState("all");
+  const [builtinOpen, setBuiltinOpen] = import_react6.default.useState(false);
   const { settingsOpen, settingsRef, settingsPlacement, closeSettings, toggleSettings } = useSettingsPopover();
   const { agentTip, agentTipPos, agentTipRef, openAgentTip, closeAgentTip } = useAgentTip();
   const rows = data?.installs || [];
@@ -3844,7 +4002,7 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
     const agentLabels = row.links.map((link) => link.target === "dsh-global" ? "DSH" : link.label);
     return [row.name, row.source || "", ...agentLabels].join(" ").toLowerCase().includes(queryText);
   });
-  import_react5.default.useEffect(() => {
+  import_react6.default.useEffect(() => {
     if (!viewer || !data) return;
     if (rows.some((row) => row.name === viewer.name)) return;
     setViewer(null);
@@ -3856,43 +4014,36 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
   const autoLinkDsh = (data?.agents?.all || []).find((agent) => agent.target === "dsh-global") || null;
   const autoLinkLabel = [t("links.dshGlobal"), ...autoLinkAgents.map((agent) => agent.label)].join("、");
   const placement = (placementOverride ?? data?.settings?.placement) === "sidebar" ? "sidebar" : "settings";
-  function getScrollParent(node) {
-    let current = node?.parentElement || null;
-    while (current) {
-      if (typeof getComputedStyle === "function") {
-        const style = getComputedStyle(current);
-        if (style && /(auto|scroll)/.test(style.overflowY || "") && current.scrollHeight > current.clientHeight) {
-          return current;
-        }
-      }
-      current = current.parentElement || null;
-    }
-    return typeof document !== "undefined" ? document.scrollingElement || null : null;
+  function listScroller() {
+    const node = rootRef.current?.querySelector?.(".dshsc-listscroll");
+    if (isScroller(node)) return node;
+    return nearestScroller(rootRef.current);
   }
   function openViewer(row, mode = "drawer") {
     if (!row) return;
     if (mode === "page") {
-      scrollPos.current = getScrollParent(rootRef.current)?.scrollTop ?? 0;
+      scrollPos.current = listScroller()?.scrollTop ?? 0;
     }
     setViewer({ name: row.name, mode });
   }
   function openPage() {
     setViewer((prev) => {
       if (!prev) return prev;
-      scrollPos.current = getScrollParent(rootRef.current)?.scrollTop ?? 0;
+      scrollPos.current = listScroller()?.scrollTop ?? 0;
       return { ...prev, mode: "page" };
     });
   }
   function closeViewer() {
-    const restore = viewer?.mode === "page" ? scrollPos.current : null;
+    if (viewer?.mode === "page") restoreScroll.current = scrollPos.current;
     setViewer(null);
-    if (restore === null || typeof window === "undefined") return;
-    const apply2 = () => {
-      const scroller = getScrollParent(rootRef.current);
-      if (scroller) scroller.scrollTop = restore;
-    };
-    if (typeof window.requestAnimationFrame === "function") window.requestAnimationFrame(apply2);
   }
+  import_react6.default.useLayoutEffect(() => {
+    if (restoreScroll.current === null) return;
+    const target = restoreScroll.current;
+    restoreScroll.current = null;
+    const scroller = listScroller();
+    if (scroller) scroller.scrollTop = target;
+  }, [viewer]);
   async function changePlacement(next) {
     if (next === placement || placementBusy) return;
     setPlacementBusy(next);
@@ -3953,7 +4104,7 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
     onToast: (next) => setToast(next)
   }) : null;
   const listNode = h(
-    import_react5.default.Fragment,
+    import_react6.default.Fragment,
     null,
     h(Header, {
       t,
@@ -4021,7 +4172,7 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
     h("style", null, CSS),
     viewer?.mode === "page" ? null : listNode,
     readerNode,
-    toast ? h("div", { className: `dshsc-toast ${toast.kind}` }, toast.text) : null,
+    toast ? portalize(h("div", { className: `dshsc-toast ${toast.kind}` }, toast.text), overlayHost()) : null,
     modal ? h(Modals, {
       t,
       modal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morehao/dsh-skills-console",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "统一管理本地技能的安装、更新、删除与接入，让同一份技能在多个 Agent 间复用。A skill manager for DeepSeek Harness: install, update, remove, link and toggle agent skills.",
   "license": "MIT",
   "author": "morehao <morehao@qq.com>",
@@ -52,7 +52,8 @@
     "build:client": "node scripts/build-client.mjs",
     "dev:client": "node scripts/build-client.mjs --watch",
     "check:client": "node scripts/build-client.mjs --check",
-    "check": "node scripts/check-syntax.mjs && node scripts/build-client.mjs --check && node scripts/check-naming.mjs && node scripts/check-pack.mjs && node scripts/smoke-release-notes.mjs",
+    "check:cycles": "node scripts/check-cycles.mjs",
+    "check": "node scripts/check-syntax.mjs && node scripts/check-cycles.mjs && node scripts/build-client.mjs --check && node scripts/check-naming.mjs && node scripts/check-pack.mjs && node scripts/smoke-release-notes.mjs",
     "check:syntax": "node scripts/check-syntax.mjs",
     "check:naming": "node scripts/check-naming.mjs",
     "check:pack": "node scripts/check-pack.mjs",