@morehao/dsh-skills-console 0.5.1 → 0.5.3

package/client.js

@@ -304,18 +304,18 @@ var DICT = {
     "viewer.info.mode": "状态",
     "viewer.info.status": "更新",
     "viewer.info.none": "无",
-    "intro.button": "介绍",
-    "intro.open": "AI 介绍：这个技能能做什么",
-    "intro.title": "AI 介绍",
+    "intro.button": "简介",
+    "intro.open": "AI 简介：这个技能能做什么",
+    "intro.title": "AI 简介",
     "intro.loading": "读取中…",
-    "intro.empty": "还没有生成介绍",
-    "intro.generate": "生成介绍",
+    "intro.empty": "还没有生成简介",
+    "intro.generate": "生成简介",
     "intro.regenerate": "重新生成",
     "intro.generating": "生成中…",
     "intro.hint": "会把 SKILL.md 正文发送给当前配置的模型提供方",
     "intro.hintRemote": "会把该技能在 {source}@{commit} 的 SKILL.md 发送给当前配置的模型提供方",
     "intro.meta": "{model} · {time} · AI 生成，可能不准确",
-    "intro.stale": "技能内容已更新，介绍可能过期",
+    "intro.stale": "技能内容已更新，简介可能过期",
     "intro.view": "查看技能",
     "intro.unavailable": "当前宿主没有可用的模型服务",
     "intro.error.noModel": "还没有配置可用的模型",
@@ -1040,7 +1040,7 @@ function FolderIcon({ size = 12 }) {
 }
 
 // client/section.js
-var import_react10 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 
 // client/scroll.js
 function isScroller(node, tolerance = 4) {
@@ -1134,6 +1134,19 @@ var CSS = `
   .dshsc-pop-label em { font-style: normal; font-size: 11px; color: var(--dsw-alias-label-tertiary); }
   .dshsc-pop-name { display: inline-flex; align-items: baseline; gap: 6px; }
   .dshsc-pop-hint { font-size: 11px; line-height: 1.5; color: var(--dsw-alias-label-tertiary); }
+  /* 与 DSH 自带开关同尺寸/同 token：关是 border-l3 轨道，开是 brand-primary 轨道。
+     0.5.0 换三档 chip 时这组规则被一起删掉，但「侧边栏入口」还在用 .dshsc-switch，补回来。 */
+  .dshsc-switch { box-sizing: border-box; position: relative; flex: none; width: 36px; height: 20px; padding: 2px;
+    border: 0; border-radius: 999px; background: var(--dsw-alias-border-l3); cursor: pointer;
+    transition: background .14s ease; }
+  .dshsc-switch:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px; }
+  .dshsc-switch:disabled { cursor: not-allowed; opacity: .5; }
+  .dshsc-switch[aria-checked="true"] { background: var(--dsw-alias-brand-primary); }
+  .dshsc-knob { display: block; width: 16px; height: 16px; border-radius: 50%;
+    background: var(--dsw-alias-switch-thumb, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .28);
+    transition: transform .12s ease, background .12s ease; }
+  .dshsc-switch[aria-checked="true"] .dshsc-knob { transform: translateX(16px);
+    background: var(--dsw-alias-label-primary-foreground, #fff); }
 
   .dshsc-btn { font: inherit; font-size: 12px; line-height: 1; padding: 7px 11px; border-radius: 8px; cursor: pointer;
     white-space: nowrap;
@@ -1357,10 +1370,15 @@ var CSS = `
   .dshsc-sub-list { display: flex; flex-direction: column; padding: 0 12px 7px 46px;
     background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 22%, transparent);
     border-top: 1px solid var(--dsw-alias-border-l1); }
+  /* 条目操作列 92px 是照两枚按钮预留的，眼下每行只有一枚「安装」（两字 ≈ 43px：0 9px padding + 边框）。
+     表头「操作」和已装行的破折号都按按钮宽度做一个右对齐的居中盒子：三者落在同一条中轴上，
+     既不贴着列右缘，也不用改列宽 / 挪按钮。换语言或字号时盒子只是不再严格等于按钮宽度。 */
+  .dshsc-sub-list { --dshsc-entry-act: 44px; }
   .dshsc-entryhead { display: grid; grid-template-columns: minmax(0, 1fr) 110px 92px; gap: 10px;
     align-items: center; height: 26px; border-bottom: 1px solid var(--dsw-alias-border-l1);
     color: var(--dsw-alias-label-tertiary); font-size: 10px; font-weight: 500; letter-spacing: .02em; }
-  .dshsc-entryhead .right { text-align: right; padding-right: 2px; }
+  .dshsc-entryhead .right { justify-self: end; box-sizing: border-box; width: var(--dshsc-entry-act);
+    text-align: center; padding-right: 0; }
   .dshsc-sub-entry { display: grid; grid-template-columns: minmax(0, 1fr) 110px 92px; gap: 10px;
     align-items: center; font-size: 12px; padding: 6px 0; border-top: 1px solid var(--dsw-alias-border-l1); }
   .dshsc-entryhead + .dshsc-sub-entry { border-top: 0; }
@@ -1374,8 +1392,9 @@ var CSS = `
   .dshsc-state.ok svg { color: var(--dsw-alias-state-success-primary); }
   .dshsc-sub-entry .dshsc-actions { justify-self: end; display: flex; justify-content: flex-end; }
   .dshsc-sub-entry .dshsc-btn { height: 24px; padding: 0 9px; font-size: 11.5px; }
-  /* 已装条目的操作列没有动作：破折号占位，保持右对齐与按钮基线一致 */
-  .dshsc-sub-entry .dshsc-noop { color: var(--dsw-alias-label-tertiary); font-size: 11.5px; line-height: 24px; padding-right: 9px; }
+  /* 已装条目的操作列没有动作：破折号占位，居中在按钮宽度里，和表头、安装按钮同一条中轴 */
+  .dshsc-sub-entry .dshsc-noop { box-sizing: border-box; width: var(--dshsc-entry-act); padding: 0;
+    text-align: center; color: var(--dsw-alias-label-tertiary); font-size: 11.5px; line-height: 24px; }
   /* 设置页的真实宽度常常远小于窗口（侧栏 + 页面缩放），视口 media query 不可靠；
      以 .dshsc-root 自身宽度为准，窄面板时切两列，避免固定列把 Agent 标签挤成竖排。
      断点取 860 而不是贴着面板常见的 ~900：四列网格需要 280 + 150 + 操作列 + 3×14 gap + 中间列，
@@ -1404,7 +1423,7 @@ var CSS = `
   }
   .dshsc-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
 
-  /* 调用策略 chip：一个入口显示当前模式；点开三档弹层。窄列里允许省略，不撑破 102px */
+  /* 调用策略 chip：一个入口显示当前模式；点开三档弹窗。窄列里允许省略，不撑破 102px */
   .dshsc-chip { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
     height: 24px; padding: 0 9px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 999px;
     background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-secondary); font-family: inherit;
@@ -1428,40 +1447,27 @@ var CSS = `
   .dshsc-chip.legacy { color: var(--dsw-alias-label-tertiary); background: var(--dsw-alias-bg-layer-2); }
   .dshsc-chip.muted { color: var(--dsw-alias-label-tertiary); cursor: default; opacity: .8; }
 
-  .dshsc-policy-pop { position: fixed; z-index: 70; box-sizing: border-box; width: min(380px, calc(100vw - 16px));
-    max-height: min(600px, calc(100vh - 16px)); overflow: auto; padding: 14px;
-    background: var(--dsw-alias-bg-base); border: 1px solid var(--dsw-alias-border-l1); border-radius: 14px;
-    box-shadow: 0 18px 48px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.16);
-    display: flex; flex-direction: column; gap: 10px; }
-  .dshsc-policy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
-  .dshsc-policy-title { font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary); }
-  .dshsc-policy-sub { margin: 2px 0 0; font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary); }
-  .dshsc-policy-close { flex: none; width: 24px; height: 24px; margin: -4px -4px 0 0; border: 0; border-radius: 6px;
-    background: transparent; color: var(--dsw-alias-label-secondary); font-size: 18px; line-height: 1; cursor: pointer; }
-  .dshsc-policy-close:hover { background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); }
-  .dshsc-policy-options { display: flex; flex-direction: column; gap: 6px; }
-  .dshsc-policyopt { box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; width: 100%;
-    padding: 9px 10px; text-align: left; border: 1px solid var(--dsw-alias-border-l1); border-radius: 9px;
-    background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-label-primary); font-family: inherit; cursor: pointer; }
-  .dshsc-policyopt:hover:not(:disabled) { background: var(--dsw-alias-bg-layer-2); border-color: var(--dsw-alias-border-l2); }
-  .dshsc-policyopt.active { border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 55%, var(--dsw-alias-border-l1));
-    background: color-mix(in srgb, var(--dsw-alias-brand-primary) 7%, transparent); }
+  /* 调用策略：标准居中弹窗（Overlay）里的单选列表；行距 / 圆点尺寸对齐共享设置的 .dshsc-check */
+  .dshsc-policy-options { max-height: none; overflow: visible; }
+  .dshsc-policyopt { box-sizing: border-box; display: flex; align-items: flex-start; gap: 9px; width: 100%;
+    padding: 5px 8px; text-align: left; border: 0; border-radius: 8px;
+    background: transparent; color: var(--dsw-alias-label-primary); font-family: inherit; cursor: pointer; }
+  .dshsc-policyopt:hover:not(:disabled) { background: var(--dsw-alias-bg-layer-2); }
+  .dshsc-policyopt:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: -2px; }
   .dshsc-policyopt:disabled { cursor: not-allowed; opacity: .55; }
   .dshsc-policyopt.static { cursor: default; }
-  .dshsc-policyopt-dot { flex: none; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%;
-    border: 1.5px solid var(--dsw-alias-border-l3); }
-  .dshsc-policyopt.active .dshsc-policyopt-dot { border-color: var(--dsw-alias-brand-primary);
-    background: radial-gradient(circle, var(--dsw-alias-brand-primary) 0 40%, transparent 47%); }
+  .dshsc-policyopt.static:hover { background: transparent; }
+  .dshsc-policyopt-dot { box-sizing: border-box; flex: none; width: 15px; height: 15px; margin-top: 2px;
+    border-radius: 50%; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-1); }
+  .dshsc-policyopt.active .dshsc-policyopt-dot { border: 5px solid var(--dsw-alias-brand-primary); }
   .dshsc-policyopt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-  .dshsc-policyopt-body b { font-size: 12px; font-weight: 600; }
+  .dshsc-policyopt-body b { font-size: 13px; font-weight: 600; }
   .dshsc-policyopt-body small { font-size: 11px; line-height: 15px; color: var(--dsw-alias-label-tertiary); }
   .dshsc-policy-note { padding: 7px 9px; border-radius: 8px; background: var(--dsw-alias-bg-layer-2);
     color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 15px; }
   .dshsc-policy-note.warn, .dshsc-policy-note.author { color: var(--dsw-alias-state-warn-primary);
     background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 9%, transparent); }
   .dshsc-policy-hidden { display: flex; flex-direction: column; gap: 8px; }
-  .dshsc-policy-restore { align-self: flex-start; }
-  .dshsc-policy-foot { display: flex; justify-content: flex-end; gap: 6px; }
   .dshsc-policy-confirm { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 9px;
     border: 1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 34%, var(--dsw-alias-border-l1));
     background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 7%, transparent); }
@@ -1647,7 +1653,7 @@ var CSS = `
   .dshsc-info-sec dd { margin: 0; color: var(--dsw-alias-label-primary); overflow-wrap: anywhere; }
   .dshsc-info-sec dd.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
 
-  /* 列表行的 ✨ 介绍入口：只占一个小胶囊，不改变行高与列宽 */
+  /* 列表行的 ✨ 简介入口：只占一个小胶囊，不改变行高与列宽 */
   .dshsc-intro-btn { flex: none; display: inline-flex; align-items: center; gap: 3px;
     height: 19px; padding: 0 7px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 999px;
     background: transparent; color: var(--dsw-alias-label-tertiary); font: inherit; font-size: 11px;
@@ -1657,15 +1663,15 @@ var CSS = `
   .dshsc-intro-btn:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px; }
   .dshsc-intro-btn .dshsc-spark { font-size: 10px; color: var(--dsw-alias-brand-primary); }
 
-  /* 介绍浮层：复用 policy 浮层的外壳（fixed + portal），只调内容排版 */
-  .dshsc-intro-pop { width: min(360px, calc(100vw - 16px)); gap: 7px; }
+  /* 简介弹窗：和调用策略一样走标准居中弹窗（Overlay），这里只调内容排版 */
+  .dshsc-intro-sub { margin: 0; font-size: 11px; line-height: 16px; color: var(--dsw-alias-label-tertiary);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .dshsc-intro-text { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--dsw-alias-label-primary);
     white-space: pre-wrap; overflow-wrap: anywhere; }
   .dshsc-intro-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--dsw-alias-label-tertiary); }
   .dshsc-intro-meta { margin: 0; font-size: 11px; line-height: 15px; color: var(--dsw-alias-label-tertiary); }
   .dshsc-intro-stale { margin: 0; font-size: 11px; line-height: 15px; color: var(--dsw-alias-state-warn-primary); }
   .dshsc-intro-error { margin: 0; font-size: 11.5px; line-height: 16px; color: var(--dsw-alias-state-error-primary); }
-  .dshsc-intro-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 3px; }
 
   /* 正文排版：只用 token，不写死深浅色 */
   .dshsc-md { font-size: 13.5px; line-height: 1.72; color: var(--dsw-alias-label-primary); }
@@ -2441,10 +2447,35 @@ function Toolbar({
 }
 
 // client/views/installed.js
-var import_react5 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
-// client/views/intro-popover.js
-var import_react3 = __toESM(require("react"), 1);
+// client/views/overlay.js
+function Overlay({ t, title, children, footer, onCancel }) {
+  useOverlayLayer(true, onCancel);
+  return portalize(h(
+    "div",
+    { className: "dshsc-overlay", onClick: (event) => {
+      if (event.target === event.currentTarget) onCancel?.();
+    } },
+    h(
+      "div",
+      { className: "dshsc-modal", role: "dialog", "aria-modal": "true" },
+      h("button", {
+        className: "dshsc-modal-close",
+        "aria-label": t("action.cancel"),
+        onClick: (event) => {
+          event.stopPropagation();
+          onCancel?.();
+        }
+      }, "×"),
+      h("h3", null, title),
+      children,
+      h("div", { className: "dshsc-modal-foot" }, footer)
+    )
+  ), overlayHost());
+}
+
+// client/views/intro-modal.js
 var ERROR_KEY = {
   "error.skills.intro-no-model": "intro.error.noModel",
   "error.skills.intro-rate-limit": "intro.error.rateLimit",
@@ -2470,22 +2501,18 @@ function modelLabel(intro) {
   if (!intro?.model) return "—";
   return intro.provider ? `${intro.provider}/${intro.model}` : intro.model;
 }
-function IntroPopover({
+function IntroModal({
   t,
   name,
   stamp = "",
   subtitle = null,
   endpoint = null,
   capability,
-  anchor,
-  anchorEl,
   hint = null,
   viewLabel = null,
   onClose,
   onView = null
 }) {
-  const ref = import_react3.default.useRef(null);
-  const [pos, setPos] = import_react3.default.useState({ left: 0, top: 0, visibility: "hidden" });
   const enabled = capability?.enabled !== false;
   const available = capability?.available !== false;
   const intro = useSkillIntro({
@@ -2495,32 +2522,6 @@ function IntroPopover({
     enabled,
     endpoint
   });
-  useOverlayLayer(true, onClose);
-  import_react3.default.useLayoutEffect(() => {
-    const node = ref.current;
-    if (!node || !anchor || typeof window === "undefined") return;
-    const rect = node.getBoundingClientRect();
-    const width = rect.width || 360;
-    const height = rect.height || 220;
-    let left = anchor.left;
-    left = Math.max(8, Math.min(left, window.innerWidth - width - 8));
-    let top = anchor.bottom + 8;
-    if (top + height > window.innerHeight - 8) {
-      top = Math.max(8, anchor.top - height - 8);
-    }
-    setPos({ left, top, visibility: "visible" });
-  }, [anchor, intro.loading, intro.intro?.text, intro.generating, intro.genError]);
-  import_react3.default.useEffect(() => {
-    if (typeof document === "undefined") return void 0;
-    const onPointerDown = (event) => {
-      const target = event?.target;
-      if (ref.current?.contains?.(target)) return;
-      if (anchorEl?.contains?.(target)) return;
-      onClose();
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
-  }, [anchorEl, onClose]);
   const failure = intro.genError || intro.error;
   const failureKey = failure?.code ? ERROR_KEY[failure.code] || "intro.error.generic" : null;
   const meta = intro.intro ? t("intro.meta").replace("{model}", modelLabel(intro.intro)).replace("{time}", formatWhen(intro.intro.generatedAt) || "—") : "";
@@ -2554,75 +2555,30 @@ function IntroPopover({
       }
     }, intro.generating ? t("intro.generating") : t("intro.generate")));
   }
-  return portalize(h(
-    "div",
+  return h(
+    Overlay,
     {
-      ref,
-      className: "dshsc-policy-pop dshsc-intro-pop",
-      role: "dialog",
-      "aria-label": `${t("intro.title")} · ${name}`,
-      style: { left: `${pos.left}px`, top: `${pos.top}px`, visibility: pos.visibility }
+      t,
+      title: `✨ ${t("intro.title")}`,
+      onCancel: onClose,
+      footer: actions
     },
-    h(
-      "div",
-      { className: "dshsc-policy-head" },
-      h(
-        "div",
-        null,
-        h("div", { className: "dshsc-policy-title" }, `✨ ${t("intro.title")}`),
-        h("div", { className: "dshsc-policy-sub", title: subtitle || name }, subtitle || name)
-      ),
-      h("button", {
-        type: "button",
-        className: "dshsc-policy-close",
-        "aria-label": t("action.close"),
-        onClick: onClose
-      }, "×")
-    ),
-    intro.loading ? h("p", { className: "dshsc-intro-note" }, t("intro.loading")) : intro.intro ? h("p", { className: "dshsc-intro-text" }, intro.intro.text) : h("p", { className: "dshsc-intro-note" }, t("intro.empty")),
-    intro.intro?.stale ? h("p", { className: "dshsc-intro-stale" }, t("intro.stale")) : null,
-    failureKey ? h("p", { className: "dshsc-intro-error" }, t(failureKey)) : null,
-    meta ? h("p", { className: "dshsc-intro-meta" }, meta) : null,
-    available && !intro.intro && !intro.loading ? h("p", { className: "dshsc-intro-meta" }, hint || t("intro.hint")) : null,
-    !available ? h("p", { className: "dshsc-intro-error" }, t("intro.unavailable")) : null,
-    h("div", { className: "dshsc-intro-foot" }, actions)
-  ));
+    h("p", { className: "dshsc-intro-sub", key: "sub", title: subtitle || name }, subtitle || name),
+    intro.loading ? h("p", { className: "dshsc-intro-note", key: "loading" }, t("intro.loading")) : intro.intro ? h("p", { className: "dshsc-intro-text", key: "text" }, intro.intro.text) : h("p", { className: "dshsc-intro-note", key: "empty" }, t("intro.empty")),
+    intro.intro?.stale ? h("p", { className: "dshsc-intro-stale", key: "stale" }, t("intro.stale")) : null,
+    failureKey ? h("p", { className: "dshsc-intro-error", key: "error" }, t(failureKey)) : null,
+    meta ? h("p", { className: "dshsc-intro-meta", key: "meta" }, meta) : null,
+    available && !intro.intro && !intro.loading ? h("p", { className: "dshsc-intro-meta", key: "hint" }, hint || t("intro.hint")) : null,
+    !available ? h("p", { className: "dshsc-intro-error", key: "unavailable" }, t("intro.unavailable")) : null
+  );
 }
 
-// client/views/policy-popover.js
-var import_react4 = __toESM(require("react"), 1);
-function PolicyPopover({ t, row, anchor, anchorEl, busy, onClose, onSave, onUnpark }) {
+// client/views/policy-modal.js
+var import_react3 = __toESM(require("react"), 1);
+function PolicyModal({ t, row, busy, onClose, onSave, onUnpark }) {
   const initial = row.mode === "hidden" ? "auto" : row.mode;
-  const [mode, setMode] = import_react4.default.useState(initial);
-  const [confirming, setConfirming] = import_react4.default.useState(false);
-  const ref = import_react4.default.useRef(null);
-  const [pos, setPos] = import_react4.default.useState({ left: 0, top: 0, visibility: "hidden" });
-  useOverlayLayer(true, onClose);
-  import_react4.default.useLayoutEffect(() => {
-    const node = ref.current;
-    if (!node || !anchor || typeof window === "undefined") return;
-    const rect = node.getBoundingClientRect();
-    const width = rect.width || 360;
-    const height = rect.height || 320;
-    let left = anchor.left + anchor.width / 2 - width / 2;
-    left = Math.max(8, Math.min(left, window.innerWidth - width - 8));
-    let top = anchor.bottom + 8;
-    if (top + height > window.innerHeight - 8) {
-      top = Math.max(8, anchor.top - height - 8);
-    }
-    setPos({ left, top, visibility: "visible" });
-  }, [anchor, confirming, mode]);
-  import_react4.default.useEffect(() => {
-    if (typeof document === "undefined") return void 0;
-    const onPointerDown = (event) => {
-      const target = event?.target;
-      if (ref.current?.contains?.(target)) return;
-      if (anchorEl?.contains?.(target)) return;
-      onClose();
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => document.removeEventListener("pointerdown", onPointerDown, true);
-  }, [anchorEl, onClose]);
+  const [mode, setMode] = import_react3.default.useState(initial);
+  const [confirming, setConfirming] = import_react3.default.useState(false);
   const hidden = row.mode === "hidden";
   const author = row.origin === "author" && row.mode === "manual";
   const flat = row.kind === "file";
@@ -2644,7 +2600,8 @@ function PolicyPopover({ t, row, anchor, anchorEl, busy, onClose, onSave, onUnpa
       type: "button",
       key: `policy-${id}`,
       className: `dshsc-policyopt${mode === id ? " active" : ""}`,
-      "aria-pressed": String(mode === id),
+      role: "radio",
+      "aria-checked": String(mode === id),
       disabled: busy || flat,
       onClick: () => choose(id)
     },
@@ -2656,95 +2613,85 @@ function PolicyPopover({ t, row, anchor, anchorEl, busy, onClose, onSave, onUnpa
       h("small", null, desc)
     )
   );
-  return portalize(h(
-    "div",
+  const footer = confirming ? [
+    h("button", {
+      type: "button",
+      key: "cancel",
+      className: "dshsc-btn ghost",
+      disabled: busy,
+      onClick: () => setConfirming(false)
+    }, t("action.cancel")),
+    h("button", {
+      type: "button",
+      key: "confirm",
+      className: "dshsc-btn danger",
+      disabled: busy,
+      onClick: () => onSave("hidden")
+    }, busy ? t("policy.saving") : t("policy.hiddenConfirm"))
+  ] : hidden ? [
+    h("button", { type: "button", key: "cancel", className: "dshsc-btn ghost", onClick: onClose }, t("action.cancel")),
+    h("button", {
+      type: "button",
+      key: "restore",
+      className: "dshsc-btn primary",
+      disabled: busy,
+      onClick: onUnpark
+    }, t("policy.unpark"))
+  ] : [
+    h("button", { type: "button", key: "cancel", className: "dshsc-btn ghost", onClick: onClose }, t("action.cancel")),
+    h("button", {
+      type: "button",
+      key: "save",
+      className: "dshsc-btn primary",
+      disabled: busy || !dirty || flat,
+      onClick: submit
+    }, busy ? t("policy.saving") : t("action.save"))
+  ];
+  return h(
+    Overlay,
     {
-      ref,
-      className: "dshsc-policy-pop",
-      role: "dialog",
-      "aria-label": t("policy.title"),
-      style: { left: `${pos.left}px`, top: `${pos.top}px`, visibility: pos.visibility }
+      t,
+      title: t("policy.title"),
+      onCancel: onClose,
+      footer
     },
-    h(
-      "div",
-      { className: "dshsc-policy-head" },
-      h(
-        "div",
-        null,
-        h("div", { className: "dshsc-policy-title" }, t("policy.title")),
-        h("div", { className: "dshsc-policy-sub" }, t("policy.subtitle"))
-      ),
-      h("button", {
-        type: "button",
-        className: "dshsc-policy-close",
-        "aria-label": t("action.close"),
-        onClick: onClose
-      }, "×")
-    ),
-    author ? h("div", { className: "dshsc-policy-note author" }, t("policy.authorHint")) : null,
-    row.legacy ? h("div", { className: "dshsc-policy-note" }, t("policy.legacyHint")) : null,
-    row.drift ? h("div", { className: "dshsc-policy-note warn" }, t("policy.driftHint")) : null,
+    h("p", { className: "dshsc-sub", key: "sub" }, t("policy.subtitle")),
+    author ? h("div", { className: "dshsc-policy-note author", key: "author" }, t("policy.authorHint")) : null,
+    row.legacy ? h("div", { className: "dshsc-policy-note", key: "legacy" }, t("policy.legacyHint")) : null,
+    row.drift ? h("div", { className: "dshsc-policy-note warn", key: "drift" }, t("policy.driftHint")) : null,
     hidden ? h(
       "div",
-      { className: "dshsc-policy-hidden" },
+      { className: "dshsc-policy-hidden", key: "hidden" },
       h(
         "div",
-        { className: "dshsc-policyopt active static" },
-        h("span", { className: "dshsc-policyopt-dot" }),
+        { className: "dshsc-panel" },
         h(
-          "span",
-          { className: "dshsc-policyopt-body" },
-          h("b", null, t("policy.hidden")),
-          h("small", null, t("policy.hiddenDesc"))
+          "div",
+          { className: "dshsc-policyopt active static", role: "radio", "aria-checked": "true" },
+          h("span", { className: "dshsc-policyopt-dot", "aria-hidden": "true" }),
+          h(
+            "span",
+            { className: "dshsc-policyopt-body" },
+            h("b", null, t("policy.hidden")),
+            h("small", null, t("policy.hiddenDesc"))
+          )
         )
       ),
-      h("button", {
-        type: "button",
-        className: "dshsc-btn primary dshsc-policy-restore",
-        disabled: busy,
-        onClick: onUnpark
-      }, t("policy.unpark")),
-      h("p", { className: "dshsc-policy-sub" }, t("policy.hiddenHint"))
+      h("p", { className: "dshsc-sub" }, t("policy.hiddenHint"))
     ) : h(
       "div",
-      { className: "dshsc-policy-options" },
+      { className: "dshsc-panel dshsc-policy-options", key: "options", role: "radiogroup", "aria-label": t("policy.title") },
       option("auto", t("policy.auto"), t("policy.autoDesc")),
       option("manual", t("policy.manual"), t("policy.manualDesc")),
       option("hidden", t("policy.hidden"), t("policy.hiddenDesc"))
     ),
     confirming ? h(
       "div",
-      { className: "dshsc-policy-confirm" },
+      { className: "dshsc-policy-confirm", key: "confirm" },
       h("b", null, t("policy.hiddenConfirmTitle")),
-      h("p", null, t("policy.hiddenConfirmBody")),
-      h(
-        "div",
-        { className: "dshsc-policy-foot" },
-        h("button", {
-          type: "button",
-          className: "dshsc-btn ghost",
-          disabled: busy,
-          onClick: () => setConfirming(false)
-        }, t("action.cancel")),
-        h("button", {
-          type: "button",
-          className: "dshsc-btn danger",
-          disabled: busy,
-          onClick: () => onSave("hidden")
-        }, busy ? t("policy.saving") : t("policy.hiddenConfirm"))
-      )
-    ) : h(
-      "div",
-      { className: "dshsc-policy-foot" },
-      h("button", { type: "button", className: "dshsc-btn ghost", onClick: onClose }, t("action.cancel")),
-      hidden ? null : h("button", {
-        type: "button",
-        className: "dshsc-btn primary",
-        disabled: busy || !dirty || flat,
-        onClick: submit
-      }, busy ? t("policy.saving") : t("action.save"))
-    )
-  ), overlayHost());
+      h("p", null, t("policy.hiddenConfirmBody"))
+    ) : null
+  );
 }
 
 // client/views/installed.js
@@ -2766,38 +2713,26 @@ function InstalledTab({
   actions
 }) {
   const updatable = (row) => UPDATABLE.has(row.status);
-  const [policy, setPolicy] = import_react5.default.useState(null);
-  const [intro, setIntro] = import_react5.default.useState(null);
+  const [policy, setPolicy] = import_react4.default.useState(null);
+  const [intro, setIntro] = import_react4.default.useState(null);
   const sharedTargets = new Set((data?.agents?.detected || []).filter((agent) => agent.kind === "agent" && agent.sharedHome === "yes").map((agent) => agent.target));
-  import_react5.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (!policy) return;
     if (rows.some((row) => row.name === policy.row.name)) return;
     setPolicy(null);
   }, [policy, rows]);
-  import_react5.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (!intro) return;
     if (rows.some((row) => row.name === intro.row.name)) return;
     setIntro(null);
   }, [intro, rows]);
-  function openIntro(event, row) {
-    const el = event.currentTarget;
-    const rect = el.getBoundingClientRect();
-    setIntro({
-      row,
-      anchorEl: el,
-      anchor: { left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height }
-    });
+  function openIntro(row) {
+    setIntro({ row });
   }
-  function openPolicy(event, row) {
+  function openPolicy(row) {
     if (busy !== null || row.kind === "file") return;
     if (row.mode === "manual" && row.origin === "author") return;
-    const el = event.currentTarget;
-    const rect = el.getBoundingClientRect();
-    setPolicy({
-      row,
-      anchorEl: el,
-      anchor: { left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height }
-    });
+    setPolicy({ row });
   }
   function policyChip(row) {
     if (row.status === "unmanaged") {
@@ -2814,7 +2749,7 @@ function InstalledTab({
         disabled: busy !== null,
         title: t("policy.hiddenHint"),
         "aria-haspopup": "dialog",
-        onClick: (event) => openPolicy(event, row)
+        onClick: () => openPolicy(row)
       }, t("policy.hidden"));
     }
     if (mode === "manual" && row.origin === "author") {
@@ -2830,7 +2765,7 @@ function InstalledTab({
         disabled: busy !== null,
         title: t("policy.driftHint"),
         "aria-haspopup": "dialog",
-        onClick: (event) => openPolicy(event, row)
+        onClick: () => openPolicy(row)
       }, t("policy.drift"));
     }
     if (row.legacy === "dsh-off") {
@@ -2840,7 +2775,7 @@ function InstalledTab({
         disabled: busy !== null,
         title: t("policy.legacyHint"),
         "aria-haspopup": "dialog",
-        onClick: (event) => openPolicy(event, row)
+        onClick: () => openPolicy(row)
       }, t("policy.legacy"));
     }
     if (mode === "manual") {
@@ -2850,7 +2785,7 @@ function InstalledTab({
         disabled: busy !== null,
         title: t("policy.manualOnlyHint"),
         "aria-haspopup": "dialog",
-        onClick: (event) => openPolicy(event, row)
+        onClick: () => openPolicy(row)
       }, t("policy.manual"));
     }
     return h("button", {
@@ -2859,7 +2794,7 @@ function InstalledTab({
       disabled: busy !== null,
       title: t("policy.open"),
       "aria-haspopup": "dialog",
-      onClick: (event) => openPolicy(event, row)
+      onClick: () => openPolicy(row)
     }, t("policy.auto"));
   }
   function statusTag(row) {
@@ -2988,7 +2923,7 @@ function InstalledTab({
               className: "dshsc-intro-btn",
               title: t("intro.open"),
               "aria-haspopup": "dialog",
-              onClick: (event) => openIntro(event, row)
+              onClick: () => openIntro(row)
             },
             h("span", { className: "dshsc-spark", "aria-hidden": "true" }, "✨"),
             t("intro.button")
@@ -3242,12 +3177,10 @@ function InstalledTab({
       )
     );
   }
-  const introPopover = intro && data?.intro ? h(IntroPopover, {
+  const introModal = intro && data?.intro ? h(IntroModal, {
     t,
     name: intro.row.name,
     stamp: [intro.row.commit || "", intro.row.currentHash || "", intro.row.updatedAt || "", intro.row.status || ""].join("|"),
-    anchor: intro.anchor,
-    anchorEl: intro.anchorEl,
     capability: data.intro,
     onClose: () => setIntro(null),
     onView: () => {
@@ -3256,11 +3189,9 @@ function InstalledTab({
       actions.onView(target);
     }
   }) : null;
-  const popover = policy ? h(PolicyPopover, {
+  const policyModal = policy ? h(PolicyModal, {
     t,
     row: policy.row,
-    anchor: policy.anchor,
-    anchorEl: policy.anchorEl,
     busy: busy !== null,
     onClose: () => setPolicy(null),
     onSave: (mode) => {
@@ -3274,7 +3205,7 @@ function InstalledTab({
       actions.onRequestUnpark(target);
     }
   }) : null;
-  return h(import_react5.default.Fragment, null, content(), popover, introPopover);
+  return h(import_react4.default.Fragment, null, content(), policyModal, introModal);
 }
 
 // client/views/agent-tip.js
@@ -3309,7 +3240,7 @@ function AgentTip({ t, agentTip, agentTipPos, nodeRef }) {
 }
 
 // client/views/subscriptions.js
-var import_react6 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 function repoOf(source) {
   const value = String(source || "").trim().toLowerCase().replace(/\.git$/, "");
   return value || null;
@@ -3331,22 +3262,18 @@ function SubscriptionsTab({
   onInstall,
   onAdd
 }) {
-  const [intro, setIntro] = import_react6.default.useState(null);
-  import_react6.default.useEffect(() => {
+  const [intro, setIntro] = import_react5.default.useState(null);
+  import_react5.default.useEffect(() => {
     if (!intro) return;
     const subscription = subscriptions.find((item) => item.id === intro.subscriptionId);
     const entries = subscription?.snapshot?.entries || [];
     if (entries.some((entry) => entry.name === intro.name)) return;
     setIntro(null);
   }, [intro, subscriptions]);
-  function openIntro(event, subscription, entry) {
-    const el = event.currentTarget;
-    const rect = el.getBoundingClientRect();
+  function openIntro(subscription, entry) {
     setIntro({
       subscriptionId: subscription.id,
-      name: entry.name,
-      anchorEl: el,
-      anchor: { left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width, height: rect.height }
+      name: entry.name
     });
   }
   function introButton(subscription, entry) {
@@ -3357,7 +3284,7 @@ function SubscriptionsTab({
         className: "dshsc-intro-btn",
         title: t("intro.open"),
         "aria-haspopup": "dialog",
-        onClick: (clickEvent) => openIntro(clickEvent, subscription, entry)
+        onClick: () => openIntro(subscription, entry)
       },
       h("span", { className: "dshsc-spark", "aria-hidden": "true" }, "✨"),
       t("intro.button")
@@ -3365,22 +3292,20 @@ function SubscriptionsTab({
   }
   const introSubscription = intro ? subscriptions.find((item) => item.id === intro.subscriptionId) || null : null;
   const introEntry = introSubscription ? (introSubscription.snapshot?.entries || []).find((entry) => entry.name === intro.name) || null : null;
-  const introPopover = intro && introEntry && capability ? (() => {
+  const introModal = intro && introEntry && capability ? (() => {
     const commit = introSubscription.snapshot?.commit || "";
     const installedAlready = rows.some((row) => {
       if (row.name !== introEntry.name) return false;
       if (row.subscriptionId === introSubscription.id) return true;
       return repoOf(row.source) === repoOf(introSubscription.source);
     });
-    return h(IntroPopover, {
+    return h(IntroModal, {
       t,
       name: introEntry.name,
       stamp: commit,
       subtitle: `${introSubscription.source}@${shortCommit(commit)}`,
       endpoint: `/subscriptions/${encodeURIComponent(introSubscription.id)}/entries/${encodeURIComponent(introEntry.name)}/intro`,
       capability,
-      anchor: intro.anchor,
-      anchorEl: intro.anchorEl,
       hint: t("intro.hintRemote").replace("{source}", introSubscription.source).replace("{commit}", shortCommit(commit) || "—"),
       viewLabel: t("action.install"),
       onView: installedAlready ? null : () => {
@@ -3412,7 +3337,7 @@ function SubscriptionsTab({
     );
   }
   return h(
-    import_react6.default.Fragment,
+    import_react5.default.Fragment,
     null,
     h(
       "div",
@@ -3511,7 +3436,6 @@ function SubscriptionsTab({
                   h(
                     "span",
                     { className: `dshsc-state${installedAlready ? " ok" : ""}` },
-                    installedAlready ? "✓ " : "",
                     installedAlready ? t("installed") : t("notInstalled")
                   ),
                   h(
@@ -3530,51 +3454,23 @@ function SubscriptionsTab({
         })
       )
     ),
-    introPopover
+    introModal
   );
 }
 
 // client/views/modals.js
-var import_react8 = __toESM(require("react"), 1);
-
-// client/views/add-skill.js
 var import_react7 = __toESM(require("react"), 1);
 
-// client/views/overlay.js
-function Overlay({ t, title, children, footer, onCancel }) {
-  useOverlayLayer(true, onCancel);
-  return portalize(h(
-    "div",
-    { className: "dshsc-overlay", onClick: (event) => {
-      if (event.target === event.currentTarget) onCancel?.();
-    } },
-    h(
-      "div",
-      { className: "dshsc-modal", role: "dialog", "aria-modal": "true" },
-      h("button", {
-        className: "dshsc-modal-close",
-        "aria-label": t("action.cancel"),
-        onClick: (event) => {
-          event.stopPropagation();
-          onCancel?.();
-        }
-      }, "×"),
-      h("h3", null, title),
-      children,
-      h("div", { className: "dshsc-modal-foot" }, footer)
-    )
-  ), overlayHost());
-}
-
 // client/views/add-skill.js
+var import_react6 = __toESM(require("react"), 1);
 function AddSkillModal({ t, onCancel, onProbe, onInstall }) {
-  const [source, setSource] = import_react7.default.useState("");
-  const [phase, setPhase] = import_react7.default.useState("idle");
-  const [options, setOptions] = import_react7.default.useState([]);
-  const [selected, setSelected] = import_react7.default.useState(() => /* @__PURE__ */ new Set());
-  const [manual, setManual] = import_react7.default.useState("");
-  const [skipped, setSkipped] = import_react7.default.useState(0);
-  const [error, setError] = import_react7.default.useState(null);
+  const [source, setSource] = import_react6.default.useState("");
+  const [phase, setPhase] = import_react6.default.useState("idle");
+  const [options, setOptions] = import_react6.default.useState([]);
+  const [selected, setSelected] = import_react6.default.useState(() => /* @__PURE__ */ new Set());
+  const [manual, setManual] = import_react6.default.useState("");
+  const [skipped, setSkipped] = import_react6.default.useState(0);
+  const [error, setError] = import_react6.default.useState(null);
   const reset = (value) => {
     setSource(value);
     setPhase("idle");
@@ -3710,7 +3606,7 @@ function AddSkillModal({ t, onCancel, onProbe, onInstall }) {
 
 // client/views/modals.js
 function FormModal({ t, title, hint, fields, onCancel, onSubmit }) {
-  const [form, setForm] = import_react8.default.useState(() => Object.fromEntries(fields.map((field) => [field.key, ""])));
+  const [form, setForm] = import_react7.default.useState(() => Object.fromEntries(fields.map((field) => [field.key, ""])));
   const incomplete = fields.some(
     (field) => field.required !== false && !String(form[field.key] || "").trim()
   );
@@ -3758,7 +3654,7 @@ function ExportsModal({ t, row, agents, onCancel, onSave }) {
   const candidates = agents.filter(
     (agent) => agent.kind === "agent" && agent.exists && agent.exportable
   );
-  const [targets, setTargets] = import_react8.default.useState(() => {
+  const [targets, setTargets] = import_react7.default.useState(() => {
     const available = new Set(candidates.map((agent) => agent.target));
     return new Set((row.exports || []).map((item) => item.target).filter((target) => available.has(target)));
   });
@@ -3800,7 +3696,7 @@ function ExportsModal({ t, row, agents, onCancel, onSave }) {
   );
 }
 function DefaultExportModal({ t, settings, agents, onCancel, onSave }) {
-  const [targets, setTargets] = import_react8.default.useState(() => new Set(
+  const [targets, setTargets] = import_react7.default.useState(() => new Set(
     Array.isArray(settings.exportTargets) ? settings.exportTargets : []
   ));
   const toggle = (target) => setTargets((prev) => {
@@ -3929,7 +3825,7 @@ ${conflicts.map((item) => `${item.label}: ${item.linkPath}`).join("\n")}`,
 }
 
 // client/views/skill-reader.js
-var import_react9 = __toESM(require("react"), 1);
+var import_react8 = __toESM(require("react"), 1);
 
 // client/markdown.js
 function classifyHref(href) {
@@ -4426,17 +4322,17 @@ function SkillReader({
 }) {
   const { state, file, loadFile, retry } = useSkillReader(row);
   const name = row?.name || "";
-  const [tab, setTab] = import_react9.default.useState(initialTab);
-  const [format, setFormat] = import_react9.default.useState("rendered");
-  const [docOverride, setDocOverride] = import_react9.default.useState(null);
-  const [fileFormat, setFileFormat] = import_react9.default.useState("rendered");
-  const [tocActive, setTocActive] = import_react9.default.useState(null);
-  const [descOpen, setDescOpen] = import_react9.default.useState(false);
-  const [descClamped, setDescClamped] = import_react9.default.useState(false);
-  const bodyRef = import_react9.default.useRef(null);
-  const dialogRef = import_react9.default.useRef(null);
-  const descRef = import_react9.default.useRef(null);
-  const scrollRef = import_react9.default.useRef(0);
+  const [tab, setTab] = import_react8.default.useState(initialTab);
+  const [format, setFormat] = import_react8.default.useState("rendered");
+  const [docOverride, setDocOverride] = import_react8.default.useState(null);
+  const [fileFormat, setFileFormat] = import_react8.default.useState("rendered");
+  const [tocActive, setTocActive] = import_react8.default.useState(null);
+  const [descOpen, setDescOpen] = import_react8.default.useState(false);
+  const [descClamped, setDescClamped] = import_react8.default.useState(false);
+  const bodyRef = import_react8.default.useRef(null);
+  const dialogRef = import_react8.default.useRef(null);
+  const descRef = import_react8.default.useRef(null);
+  const scrollRef = import_react8.default.useRef(0);
   useOverlayLayer(variant === "drawer" || variant === "page", onClose);
   const tree = state.tree;
   const files = tree?.files || [];
@@ -4444,18 +4340,18 @@ 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_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     setDocOverride(null);
     scrollRef.current = 0;
   }, [name]);
-  const descOwnerRef = import_react9.default.useRef(name);
-  import_react9.default.useEffect(() => {
+  const descOwnerRef = import_react8.default.useRef(name);
+  import_react8.default.useEffect(() => {
     if (descOwnerRef.current === name) return;
     descOwnerRef.current = name;
     setDescOpen(false);
     setDescClamped(false);
   }, [name]);
-  import_react9.default.useLayoutEffect(() => {
+  import_react8.default.useLayoutEffect(() => {
     const node = descRef.current;
     if (!node) return void 0;
     const measure = () => {
@@ -4477,16 +4373,16 @@ function SkillReader({
       window.removeEventListener("resize", measure);
     };
   }, [description, descOpen]);
-  import_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     if (!initialFile) return;
     setTab("files");
     void loadFile(initialFile);
   }, [initialFile, loadFile]);
-  import_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     const node = bodyRef.current;
     if (node && scrollRef.current) node.scrollTop = scrollRef.current;
   });
-  import_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     if (variant !== "drawer" || typeof document === "undefined") return void 0;
     const previous = document.activeElement;
     const node = dialogRef.current;
@@ -4513,12 +4409,12 @@ function SkillReader({
       previous?.focus?.();
     };
   }, [variant, onClose]);
-  import_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     if (variant !== "page" || typeof document === "undefined") return;
     const node = document.getElementById("dshsc-reader-name");
     node?.focus?.();
   }, [variant, name]);
-  import_react9.default.useEffect(() => {
+  import_react8.default.useEffect(() => {
     if (variant !== "page" || typeof window === "undefined") return void 0;
     const node = bodyRef.current;
     if (!node?.querySelectorAll) return void 0;
@@ -4956,19 +4852,19 @@ function SkillReader({
 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_react10.default.useState("installed");
-  const [view, setView] = import_react10.default.useState("flat");
-  const [modal, setModal] = import_react10.default.useState(null);
-  const [expanded, setExpanded] = import_react10.default.useState({});
-  const [placementBusy, setPlacementBusy] = import_react10.default.useState(null);
-  const [placementOverride, setPlacementOverride] = import_react10.default.useState(null);
-  const [query, setQuery] = import_react10.default.useState("");
-  const [viewer, setViewer] = import_react10.default.useState(null);
-  const rootRef = import_react10.default.useRef(null);
-  const scrollPos = import_react10.default.useRef(null);
-  const restoreScroll = import_react10.default.useRef(null);
-  const [filter, setFilter] = import_react10.default.useState("all");
-  const [builtinOpen, setBuiltinOpen] = import_react10.default.useState(false);
+  const [tab, setTab] = import_react9.default.useState("installed");
+  const [view, setView] = import_react9.default.useState("flat");
+  const [modal, setModal] = import_react9.default.useState(null);
+  const [expanded, setExpanded] = import_react9.default.useState({});
+  const [placementBusy, setPlacementBusy] = import_react9.default.useState(null);
+  const [placementOverride, setPlacementOverride] = import_react9.default.useState(null);
+  const [query, setQuery] = import_react9.default.useState("");
+  const [viewer, setViewer] = import_react9.default.useState(null);
+  const rootRef = import_react9.default.useRef(null);
+  const scrollPos = import_react9.default.useRef(null);
+  const restoreScroll = import_react9.default.useRef(null);
+  const [filter, setFilter] = import_react9.default.useState("all");
+  const [builtinOpen, setBuiltinOpen] = import_react9.default.useState(false);
   const { settingsOpen, settingsRef, settingsPlacement, closeSettings, toggleSettings } = useSettingsPopover();
   const { agentTip, agentTipPos, agentTipRef, openAgentTip, closeAgentTip } = useAgentTip();
   const rows = data?.installs || [];
@@ -4991,7 +4887,7 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
     const agentLabels = row.exports.map((item) => item.label);
     return [row.name, row.source || "", ...agentLabels].join(" ").toLowerCase().includes(queryText);
   });
-  import_react10.default.useEffect(() => {
+  import_react9.default.useEffect(() => {
     if (!viewer || !data) return;
     if (rows.some((row) => row.name === viewer.name)) return;
     setViewer(null);
@@ -5025,7 +4921,7 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
     if (viewer?.mode === "page") restoreScroll.current = scrollPos.current;
     setViewer(null);
   }
-  import_react10.default.useLayoutEffect(() => {
+  import_react9.default.useLayoutEffect(() => {
     if (restoreScroll.current === null) return;
     const target = restoreScroll.current;
     restoreScroll.current = null;
@@ -5094,7 +4990,7 @@ function Section({ t, page = false, pickDirectory, onPlacementChange }) {
     onToast: (next) => setToast(next)
   }) : null;
   const listNode = h(
-    import_react10.default.Fragment,
+    import_react9.default.Fragment,
     null,
     h(Header, {
       t,