dsh-panel-control 0.8.3 → 0.9.2

package/README.md

@@ -6,6 +6,7 @@
 
 - **排序** — 拖动行首把手任意换位；一键按名称 A→Z；一键恢复注册时的默认顺序。
 - **隐藏** — 行右侧的眼睛图标。隐藏项仍留在列表里，随时放回；不影响插件是否加载，也不写插件自己的配置。
+- **重命名** — 行右侧的铅笔图标把名称改成你熟悉的叫法，`Enter` 或失焦保存，`Esc` 取消，清空即恢复原名。改名只改侧栏显示，不动插件自己的配置；宽侧栏下改过名的行会在最右侧显示插件包名小标签（省略 `dsh-` 前缀，可在「侧栏布局」里关掉），避免时间久了忘记它原本是谁。
 - **分组** — 新建分组（如「创作」「系统」）并把入口分进去，侧栏会在组与组之间插入带标题的分隔线。组的先后由设置里的分组列表拖动决定，与注册顺序、分类结果无关。
 - **分组折叠** — 点分组标题收起该组，只留标题与计数；`Enter` / 空格同样可切换，状态写进配置。侧栏收成图标条时不显示标题，也不折叠。
 - **侧栏溢出兜底** — 导航项变多时，官方侧栏会把下方的会话/工作区列表压到 0 高且无法滚动（[讨论 #12083](https://github.com/deepseek-ai/deepseek-harness/discussions/12083)）。本插件给导航列表加上限高与滚动，给下方区域留最小高度。
@@ -25,13 +26,17 @@
 
 补出来的设置页入口也出现在同一个侧栏列表里，排在普通入口之后、本插件自己之前；标题沿用设置页自己的名称，重复时附带设置页 id 以区分。
 
+改过名的入口仍把原来的注册名留在按钮属性里，引擎靠它把自己映射回同一条注册，所以宿主的排序、重渲染和后续重扫都不受影响；行尾标签显示的是插件包名（由 Host 从安装目录的 `package.json` 解析，`dsh-` 前缀已省略），屏幕阅读器与工具提示读到的则是你设定的显示名。
+
 ## 安装
 
+要求 DeepSeek Harness `>= 0.2.1-rc.3`（更旧的版本缺少本插件依赖的槽与模块图接口，宿主会拒绝加载）。
+
 从 npm 安装（推荐）：
 
 ```bash
 cd C:/Users/<you>/.dsh/profiles/desktop
-npm install dsh-panel-control@0.8.3
+npm install dsh-panel-control@0.9.2
 ```
 
 把包名加进同一目录 `package.json` 的 `dsh.profile.bundles`：
@@ -68,11 +73,12 @@ cmd //c mklink /J node_modules\dsh-panel-control D:\Github\dsh-panel-control
 - 高度兜底开关，以及 35 / 45 / 55 / 不限 四档上限；
 - 分组折叠开关，以及「全部收起 / 全部展开」；
 - 设置页入口开关（默认开）。关掉后补出来的行会连同注册一起撤掉，不只是藏起来；
+- 包名标签开关（默认开）。关掉后改名仍然生效，只是行尾不再显示包名；
 - 折叠状态按分组 id 记在配置里，重启后保留。
 
 ## 配置与存储
 
-布局写在 Host 侧：`~/.dsh/panel-control/prefs.json`（`~` 是这个 profile 的用户目录）。包含顺序、隐藏项、分组、折叠状态、布局开关、设置页入口开关与分类结果。
+布局写在 Host 侧：`~/.dsh/panel-control/prefs.json`（`~` 是这个 profile 的用户目录）。包含顺序、隐藏项、分组、自定义名称、折叠状态、布局开关、设置页入口开关、包名标签开关与分类结果。
 
 页面 origin 是 Host 的 loopback 端口，每次启动都会换端口，`localStorage` 会因此"看起来每次清空"——所以真实存储放在 Host 侧，`localStorage` 只留镜像；读不到 Host 时才回退到镜像。配置按安装维度生效，不跟随工作区。
 
@@ -86,7 +92,7 @@ cmd //c mklink /J node_modules\dsh-panel-control D:\Github\dsh-panel-control
 ## 开发与测试
 
 ```bash
-npm run check     # 语法检查 + 宿主路由 smoke + 布局/桥接静态与行为断言
+npm run check     # 语法检查 + 宿主路由 smoke + 布局/桥接/改名静态与行为断言
 npm run smoke     # 只跑宿主路由用例
 npm run doctor    # 体检 profile 安装状态
 ```
@@ -95,14 +101,16 @@ npm run doctor    # 体检 profile 安装状态
 - `scripts/host-smoke.mjs`：驱动宿主侧路由，覆盖设置读写、分类请求与 bundle 兜底。
 - `scripts/layout-smoke.mjs`：断言侧栏布局的 CSS 钩子与关键数值，并校验 `BUILD_STAMP` 与版本号一致。
 - `scripts/bridge-smoke.mjs`：在假 ctx 上跑 `client.js`，断言只给「有设置页、没有侧栏入口」的第三方插件补行，且成对注册 main、开关关闭后整体撤回、桥接页经自有子槽交给宿主渲染并能返回对话。
+- `scripts/names-smoke.mjs`：用迷你 DOM 驱动真实引擎，断言改名覆盖宿主标题与 `aria-label`、包名标签的位置与开关、清空恢复、窄侧栏不出标签、重复名称仍能按位置映射、未知包不显示标签，以及 `dispose` 后 DOM 原样归还。
 
-进一步材料：[docs/sidebar-layout.md](docs/sidebar-layout.md)（布局与折叠实现）、[docs/bridged-settings-pages.md](docs/bridged-settings-pages.md)（设置页补入口的识别与渲染）、[docs/ui-design-notes.md](docs/ui-design-notes.md)（界面规范与踩坑）、[docs/discussion-bundle-evaluated-twice.md](docs/discussion-bundle-evaluated-twice.md)（bundle 被求值两次的事故复盘）。
+进一步材料：[docs/sidebar-layout.md](docs/sidebar-layout.md)（布局与折叠实现）、[docs/renaming-panels.md](docs/renaming-panels.md)（重命名与包名标签）、[docs/bridged-settings-pages.md](docs/bridged-settings-pages.md)（设置页补入口的识别与渲染）、[docs/ui-design-notes.md](docs/ui-design-notes.md)（界面规范与踩坑）、[docs/discussion-bundle-evaluated-twice.md](docs/discussion-bundle-evaluated-twice.md)（bundle 被求值两次的事故复盘）。
 
 ## 边界
 
 - 自动分类会把入口名称发给当前 profile 配置的模型服务商；不想要就关掉开关，分组仍可手动编辑。
 - 分类结果只是建议，可以整体重排或改名。
 - 依赖宿主侧栏的 DOM 结构（`[class*="panelList"]` 与面板按钮的 `aria-label`），官方大改版时需要跟进。
+- 重命名只覆盖侧栏的显示层：宿主标题文本、`aria-label` 与包名标签都是本插件写的，插件自己的配置和入口 id 不变；宿主重渲染后由下一次扫描补回。图标条模式没有标题文本，只改可访问名称，也不显示包名标签。包名由 Host 从模块所在安装目录的 `package.json` 解析（模块 id 不等于包名，例如 `dsh-enhance-ui` → `@wufeng0105/dsh-enhance`），接口不可用或解析不到时该行不显示标签。
 - 只写 `style.order`、`style.display` 与 `data-dpc-*` 属性，不移动 React 节点，不改宿主代码。
 - 排序、隐藏、分组都只影响本机这份安装。
 - 设置页入口按「section id / label 是否已被某个面板占用」识别归属，不依赖插件声明的注册者（client runner 会把多个插件报成同一个名字）；代价是启发式：与面板同名的第三方设置页会被视为已有入口，新增内置设置页需要更新 `CORE_SECTION_IDS`。第三方设置页按宿主渲染器原位渲染，若它自己依赖设置弹窗的私有上下文，可能出现布局差异。

package/client.js

@@ -5,7 +5,7 @@
   // Everything below therefore lives inside this closure. Re-evaluation must stay possible: when the
   // plugin is switched off the loader drops our factory, so switching it back on re-executes this
   // script and needs the registration that follows.
-  const BUILD_STAMP = 'dsh-panel-control/0.8.3';
+  const BUILD_STAMP = 'dsh-panel-control/0.9.2';
   try { window.__dpcEvaluated = BUILD_STAMP; } catch { /* ignore */ }
 /**
  * Client half of dsh-panel-control.
@@ -348,9 +348,10 @@ function build(require) {
     diagYes: { zh: '是', en: 'yes' },
     diagNo: { zh: '否', en: 'no' },
     hint: {
-      zh: '拖行首的把手排序；隐藏的入口仍留在列表里，随时可以放回来。',
-      en: 'Drag the handle at the start of a row to reorder it; a hidden entry stays in this list and can come back at any time.',
+      zh: '拖行首的把手排序；点铅笔可以改显示名，改过名的入口会在侧栏右侧显示包名。隐藏的入口仍留在列表里，随时可以放回来。',
+      en: 'Drag the handle at the start of a row to reorder it; use the pencil to rename an entry, and a renamed row shows its package name on the right in the sidebar. A hidden entry stays in this list and can come back at any time.',
     },
+    renameIt: { zh: '修改显示名', en: 'Rename entry' },
     dragHint: { zh: '拖动排序', en: 'Drag to reorder' },
     locked: { zh: '固定显示', en: 'always shown' },
     lockedHint: {
@@ -395,6 +396,11 @@ function build(require) {
     bridgeFrom: { zh: '来自 {p}', en: 'From {p}' },
     bridgeMissing: { zh: '这个设置页已经不可用。', en: 'This settings page is no longer available.' },
     diagBridge: { zh: '补全入口', en: 'bridged entries' },
+    layoutTags: { zh: '包名标签', en: 'Package tag' },
+    layoutTagsHint: {
+      zh: '改过显示名的入口会在侧栏行右侧显示插件包名（省略 dsh- 前缀）；关掉后全部隐藏。',
+      en: 'A renamed entry shows its plugin package name (with the dsh- prefix trimmed) in a small tag on the right of its sidebar row. Turn this off to hide them all.',
+    },
     layoutCollapseAll: { zh: '全部收起', en: 'Fold all' },
     layoutExpandAll: { zh: '全部展开', en: 'Unfold all' },
     layoutCollapseOne: { zh: '点此收起', en: 'click to fold' },
@@ -487,6 +493,8 @@ function build(require) {
     guard: true,
     collapse: true,
     bridge: true,
+    names: {},
+    tags: true,
     panelMax: 45,
   });
 
@@ -498,7 +506,17 @@ function build(require) {
    * would then build that many separators. The numbers here are far above any
    * real sidebar and turn a hostile or corrupted store into a cheap no-op.
    */
-  const LIMITS = { order: 200, hidden: 200, autoFiled: 400, collapsed: 200, groups: 24, assign: 400, name: 40, key: 120 };
+  const LIMITS = { order: 200, hidden: 200, autoFiled: 400, collapsed: 200, groups: 24, assign: 400, names: 200, name: 40, key: 120 };
+
+  /** Trim, flatten and cap a user-visible name. Returns '' when it is unusable. */
+  function cleanName(value) {
+    if (typeof value !== 'string') return '';
+    return value
+      .replace(/[\u0000-\u001f\u007f]/g, '')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .slice(0, LIMITS.name);
+  }
 
   /** Dedupe, drop anything that is not a usable id, and stop at `cap`. */
   function uniqueIds(raw, cap) {
@@ -553,6 +571,20 @@ function build(require) {
         kept += 1;
       }
     }
+    if (raw.names && typeof raw.names === 'object') {
+      let kept = 0;
+      for (const [panelId, value] of Object.entries(raw.names)) {
+        if (kept >= LIMITS.names) break;
+        if (typeof panelId !== 'string' || panelId === '' || panelId.length > LIMITS.key) continue;
+        const name = cleanName(value);
+        if (!name) continue;
+        out.names[panelId] = name;
+        kept += 1;
+      }
+    }
+    // Renames are opt-in per entry, so a missing field means "no custom names".
+    // The tag switch is the opposite: old files never had it and must get it on.
+    out.tags = raw.tags !== false;
     out.auto = raw.auto === true;
     return out;
   }
@@ -587,6 +619,8 @@ function build(require) {
       prefs.guard === false ||
       prefs.collapse === false ||
       prefs.bridge === false ||
+      prefs.tags === false ||
+      Object.keys(prefs.names || {}).length > 0 ||
       (typeof prefs.panelMax === 'number' && prefs.panelMax !== 45));
 
   /** One call to the Host half, or null when this Client cannot reach it. */
@@ -898,6 +932,32 @@ function build(require) {
     return fallback;
   }
 
+  /** The user's own name for an entry, or '' when it was never renamed. */
+  function customName(prefs, id) {
+    const names = prefs && prefs.names;
+    if (!names || typeof names !== 'object') return '';
+    const value = names[id];
+    return typeof value === 'string' ? cleanName(value) : '';
+  }
+
+  /** What the sidebar and the manager row should show for this entry. */
+  function displayName(prefs, id, fallback) {
+    return customName(prefs, id) || fallback;
+  }
+
+  /**
+   * A package name shortened into a tag: scope gone, `dsh-` gone, `client-ui-`
+   * gone. `dsh-panel-control` and `dshmarket` both read as their product name.
+   */
+  function packageLabel(name) {
+    if (typeof name !== 'string') return '';
+    return name
+      .replace(/^@[^/]+\//, '')
+      .replace(/^dsh-?/, '')
+      .replace(/^client-ui-/, '')
+      .trim();
+  }
+
   /**
    * The sidebar's own list: every registered entry, sorted exactly the way the
    * sidebar sorts it (`order`, then registration order).
@@ -963,6 +1023,86 @@ function build(require) {
     unsub: null,
   };
 
+  /**
+   * Panel/section id -> the package that registers it.
+   *
+   * The slot entry has no package field and its `registrant` is shared by most
+   * plugins, so the Host resolves ownership from its module graph. The map stays
+   * empty until that answer arrives; the tag falls back to the id meanwhile.
+   */
+  const packageState = {
+    map: Object.create(null),
+    loading: false,
+    key: '',
+    pending: '',
+  };
+
+  function packageTagFor(id) {
+    // No fallback to the row id: a bridge row's id is `dpc-bridge-*` and an
+    // unresolved panel id is not a package name. An empty tag is better than
+    // a second, wrong spelling of the same plugin.
+    return packageLabel(packageState.map[id]);
+  }
+
+  /**
+   * Ask the Host which package each visible row belongs to.
+   *
+   * Scans are de-duplicated by the exact id set, so the engine's many passes and
+   * every bridge re-sync cost one call per set rather than one per pass.
+   */
+  async function ensurePackages(force) {
+    const records = [];
+    const seen = new Set();
+    const add = (id, slot) => {
+      if (typeof id !== 'string' || id === '' || seen.has(slot + ':' + id)) return;
+      seen.add(slot + ':' + id);
+      records.push({ id, slot });
+    };
+    for (const entry of store.state.entries) {
+      if (entry.id.startsWith(BRIDGE_PREFIX)) continue;
+      add(entry.id, SLOT_PANELS);
+    }
+    for (const record of bridgeState.entries.values()) {
+      if (record && typeof record.sectionId === 'string') add(record.sectionId, SLOT_SETTINGS);
+    }
+    if (records.length === 0) return;
+    records.sort((left, right) => (left.slot + ':' + left.id).localeCompare(right.slot + ':' + right.id));
+    const key = records.map((row) => row.slot + ':' + row.id).join('|');
+    if (!force && key === packageState.key) return;
+    if (packageState.loading) {
+      packageState.pending = key;
+      return;
+    }
+    packageState.key = key;
+    packageState.loading = true;
+    try {
+      const value = await hostCall('packages', { ids: records });
+      const packages = value && value.packages;
+      if (!packages || typeof packages !== 'object') return;
+      let changed = false;
+      for (const [id, pkg] of Object.entries(packages)) {
+        if (typeof pkg !== 'string' || pkg === '') continue;
+        if (packageState.map[id] === pkg) continue;
+        packageState.map[id] = pkg;
+        changed = true;
+      }
+      // A bridge row's own id is synthetic; its package is the section's.
+      for (const [bridgeId, record] of bridgeState.entries) {
+        const pkg = record && packageState.map[record.sectionId];
+        if (pkg && packageState.map[bridgeId] !== pkg) {
+          packageState.map[bridgeId] = pkg;
+          changed = true;
+        }
+      }
+      if (changed && engineRef) engineRef.schedule();
+    } finally {
+      packageState.loading = false;
+      const next = packageState.pending;
+      packageState.pending = '';
+      if (next && next !== packageState.key) void ensurePackages();
+    }
+  }
+
   function registrantOf(entry) {
     const options = (entry && entry.options) || {};
     const value = (entry && entry.registrant) || options.registrant;
@@ -1111,7 +1251,7 @@ function build(require) {
       for (const candidate of candidates) {
         if (bridgeState.entries.has(candidate.bridgeId)) continue;
         const slotName = BRIDGE_SLOT_PREFIX + candidate.sectionId;
-        const record = { disposers: [] };
+        const record = { sectionId: candidate.sectionId, disposers: [] };
         try {
           record.disposers.push(
             slots.register(
@@ -1189,6 +1329,9 @@ function build(require) {
         // re-render it would keep showing the value from before the sync.
         emit();
       }
+      // New bridge rows (or a first scan that finally sees the real rows) need
+      // their package names; the call is keyed, so repeated scans are free.
+      void ensurePackages();
     } catch (error) {
       console.warn(`[${PACKAGE}] bridge sync failed`, error);
     } finally {
@@ -1316,7 +1459,9 @@ function build(require) {
     const used = new Set();
     const byLabel = new Map();
     for (const button of buttons) {
-      const label = button.getAttribute('aria-label') || '';
+      // A renamed row keeps its original label in `data-dpc-label`: the visible
+      // text and aria-label change, but the entry it belongs to does not.
+      const label = button.getAttribute('data-dpc-label') || button.getAttribute('aria-label') || '';
       if (!byLabel.has(label)) byLabel.set(label, []);
       byLabel.get(label).push(button);
     }
@@ -1335,7 +1480,7 @@ function build(require) {
       // Labels that agree prove the two lists are the same list; a button with no
       // label at all is no evidence either way, so it may be filled positionally.
       const sameOrder = loose.every((entry, index) => {
-        const label = rest[index].getAttribute('aria-label') || '';
+        const label = rest[index].getAttribute('data-dpc-label') || rest[index].getAttribute('aria-label') || '';
         return label === '' || label === entry.label;
       });
       // A build that labels rows in wording this plugin never sees ("IM 机器人"
@@ -1447,7 +1592,10 @@ function build(require) {
         if (!entry.label) continue;
         let button = null;
         try {
-          button = document.querySelector(`button[aria-label="${cssEscape(entry.label)}"]`);
+          const label = cssEscape(entry.label);
+          button = document.querySelector(
+            `button[data-dpc-label="${label}"], button[aria-label="${label}"]`,
+          );
         } catch {
           button = null;
         }
@@ -1595,6 +1743,74 @@ function build(require) {
       }
     };
 
+    /** The title node of a host panel row: the only direct span that is not the
+     *  aria-hidden glyph and not the original-name tag this plugin adds. */
+    const titleSpanOf = (button) => {
+      for (const child of Array.from(button.children || [])) {
+        if (child.tagName !== 'SPAN') continue;
+        const className = typeof child.className === 'string' ? child.className : '';
+        if (className.split(/\s+/).includes('dpc-nameTag')) continue;
+        if (child.getAttribute('aria-hidden') === 'true') continue;
+        return child;
+      }
+      return null;
+    };
+
+    /**
+     * Rename rows in the host sidebar, and keep the original label visible in a
+     * small tag. The host owns this DOM, so this is a pure display overlay: the
+     * entry id, its slot registration and every other preference are untouched.
+     */
+    const applyNames = (map, plan, wide) => {
+      const tagsOn = plan.prefs.tags !== false;
+      const byId = new Map(plan.entries.map((entry) => [entry.id, entry]));
+      for (const [id, button] of map) {
+        try {
+          const entry = byId.get(id);
+          if (!entry) continue;
+          const custom = customName(plan.prefs, id);
+          const shown = custom || entry.label;
+          // Keep the original label addressable: mapButtons() must keep matching
+          // the same row after the user renames it.
+          if (button.getAttribute('data-dpc-label') !== entry.label) {
+            button.setAttribute('data-dpc-label', entry.label);
+          }
+          if (button.getAttribute('aria-label') !== shown) button.setAttribute('aria-label', shown);
+          const title = titleSpanOf(button);
+          if (title && title.textContent !== shown) title.textContent = shown;
+          let tag = null;
+          for (const child of Array.from(button.children || [])) {
+            const className = typeof child.className === 'string' ? child.className : '';
+            if (className.split(/\s+/).includes('dpc-nameTag')) tag = child;
+          }
+          // Only a renamed row needs the tag: it identifies the plugin by its
+          // package (`dsh-` trimmed), which a custom display name can hide.
+          const tagText = packageTagFor(id);
+          const wantTag = Boolean(
+            wide &&
+              tagsOn &&
+              custom &&
+              custom !== entry.label &&
+              tagText &&
+              tagText.toLowerCase() !== shown.toLowerCase(),
+          );
+          if (wantTag) {
+            if (!tag) {
+              tag = document.createElement('span');
+              tag.className = 'dpc-nameTag';
+              tag.setAttribute('aria-hidden', 'true');
+              button.appendChild(tag);
+            }
+            if (tag.textContent !== tagText) tag.textContent = tagText;
+          } else if (tag) {
+            tag.remove();
+          }
+        } catch {
+          /* a host build with another row shape: leave that row alone */
+        }
+      }
+    };
+
     const apply = () => {
       if (destroyed) return;
       const plan = readPlan();
@@ -1623,10 +1839,21 @@ function build(require) {
       const folded = folding ? new Set(plan.prefs.collapsed || []) : new Set();
       diag.folded = Array.from(folded).join(',');
 
+      // Renames are display state, like the height cap: apply them before the
+      // signature shortcut so a pass that only renames still reaches the DOM.
+      const buttons = Array.from(list.querySelectorAll(':scope > button'));
+      const map = mapButtons(plan.entries, buttons);
+      applyNames(map, plan, wide);
+      // Package names label renamed rows; the first pass that knows the entries
+      // asks the Host once, and later passes are deduplicated by the id set.
+      void ensurePackages();
+
       const nextSignature = JSON.stringify({
         blocks: plan.blocks,
         hidden: plan.hidden ? Array.from(plan.hidden).sort() : [],
         entries: plan.entries.map((entry) => entry.id + ':' + entry.label),
+        names: plan.prefs.names || {},
+        tags: plan.prefs.tags !== false,
         wide,
         folded: Array.from(folded),
       });
@@ -1640,10 +1867,8 @@ function build(require) {
 
       pause();
       try {
-        const buttons = Array.from(list.querySelectorAll(':scope > button'));
         for (const node of Array.from(list.querySelectorAll('[data-dpc-sep]'))) node.remove();
 
-        const map = mapButtons(plan.entries, buttons);
         const managed = new Set(map.values());
 
         // Anything we do not manage (the "More" launcher and its wrapper) keeps
@@ -1781,6 +2006,18 @@ function build(require) {
           node.style.removeProperty('display');
         }
       }
+      // Hand the host rows back exactly as they were: the original label, the
+      // original title text, and no tag of ours.
+      for (const button of Array.from(document.querySelectorAll('button[data-dpc-label]'))) {
+        const label = button.getAttribute('data-dpc-label');
+        if (label) {
+          button.setAttribute('aria-label', label);
+          const title = titleSpanOf(button);
+          if (title) title.textContent = label;
+          button.removeAttribute('data-dpc-label');
+        }
+        for (const tag of Array.from(button.querySelectorAll('.dpc-nameTag'))) tag.remove();
+      }
       for (const node of Array.from(document.querySelectorAll('[data-dpc-list]'))) {
         node.removeAttribute('data-dpc-list');
         node.removeAttribute('data-dpc-unbounded');
@@ -1868,7 +2105,9 @@ function build(require) {
   }
 
   function sortByName() {
-    const labelOf = new Map((store.state.entries || []).map((entry) => [entry.id, entry.label]));
+    const prefs = prefsNow();
+    const entries = store.state.entries || [];
+    const labelOf = new Map(entries.map((entry) => [entry.id, displayName(prefs, entry.id, entry.label)]));
     const locale = activeLang() === 'zh' ? 'zh-Hans-CN' : 'en';
     const order = orderNow()
       .slice()
@@ -2113,6 +2352,7 @@ function build(require) {
     plus: 'M12 6v12M6 12h12',
     eye: 'M2.5 12S6 6.5 12 6.5 21.5 12 21.5 12 18 17.5 12 17.5 2.5 12 2.5 12Z',
     eyeOff: 'M2.5 12S6 6.5 12 6.5c1.6 0 3 .45 4.2 1.1M21.5 12S18 17.5 12 17.5c-1.6 0-3-.45-4.2-1.1M4 4l16 16',
+    edit: 'M4 20h4l10.5-10.5a2.12 2.12 0 0 0-3-3L5 17v3Z',
     back: 'M14.5 6.5 9 12l5.5 5.5',
   };
 
@@ -2258,7 +2498,15 @@ function build(require) {
               'span',
               { className: 'dpc-bridgeTags' },
               h('span', { className: 'dpc-bridgeTag' }, t('bridgeTag')),
-              h('span', { className: 'dpc-bridgeFrom' }, fill(t('bridgeFrom'), { p: candidate.sectionId })),
+              h(
+                'span',
+                { className: 'dpc-bridgeFrom' },
+                fill(t('bridgeFrom'), {
+                  // The same package short name the row tag shows; the section
+                  // id is only a fallback while the Host lookup is in flight.
+                  p: packageTagFor(candidate.bridgeId) || candidate.sectionId,
+                }),
+              ),
             ),
           ),
           node
@@ -2373,6 +2621,9 @@ function build(require) {
     // check runs again on focus, and the answer must not pop back up.
     const [, forceRender] = React.useReducer((n) => n + 1, 0);
     const [groupDrag, setGroupDrag] = React.useState({ from: null, over: null });
+    const [editing, setEditing] = React.useState(null);
+    const [draft, setDraft] = React.useState('');
+    const cancelRenameRef = React.useRef(false);
     /**
      * Dragging works the same for a row and for a section: the handle starts it,
      * the target highlights, dropping commits "move before this one". Only the
@@ -2436,12 +2687,44 @@ function build(require) {
     }, [prefs.auto, prefs.autoFiled, entries.length, state.autoState && state.autoState.status]);
 
     const order = normalize(prefs, entries);
-    const labelOf = new Map(entries.map((entry) => [entry.id, entry.label]));
+    const rawOf = new Map(entries.map((entry) => [entry.id, entry.label]));
+    const labelOf = new Map(entries.map((entry) => [entry.id, displayName(prefs, entry.id, entry.label)]));
     const hidden = new Set(prefs.hidden || []);
     const groupsOf = prefs.groups || [];
     const autoOn = prefs.auto === true;
     const autoState = state.autoState || { status: 'idle', message: '', groups: 0 };
 
+    const startRename = (id) => {
+      cancelRenameRef.current = false;
+      setEditing(id);
+      setDraft(customName(prefsNow(), id));
+    };
+
+    const finishRename = (id) => {
+      // Escape unmounts the input; a trailing blur must not save the draft.
+      if (cancelRenameRef.current) {
+        cancelRenameRef.current = false;
+        setEditing(null);
+        setDraft('');
+        return;
+      }
+      const original = rawOf.get(id) || id;
+      const name = cleanName(draft);
+      const names = { ...(prefsNow().names || {}) };
+      if (!name || name === original) delete names[id];
+      else names[id] = name;
+      setEditing(null);
+      setDraft('');
+      commit({ ...prefsNow(), names });
+    };
+
+    const cancelRename = () => {
+      cancelRenameRef.current = true;
+      setEditing(null);
+      setDraft('');
+    };
+
+
     const head = h(
       'header',
       { className: inSection ? 'dpc-head dpc-head--section' : 'dpc-head' },
@@ -2599,6 +2882,7 @@ function build(require) {
 
     const rows = order.map((id, position) => {
       const label = labelOf.get(id) || id;
+      const rawLabel = rawOf.get(id) || id;
       const isHidden = hidden.has(id);
       const locked = id === PANEL_KEY;
       return h(
@@ -2616,8 +2900,32 @@ function build(require) {
         h(
           'span',
           { className: 'dpc-rowText' },
-          h('span', { className: 'dpc-name', title: label }, label),
-          h('code', { className: 'dpc-key', title: id }, id),
+          editing === id
+            ? h('input', {
+                className: 'dpc-input dpc-nameInput',
+                // autoFocus is enough: opening the editor is an explicit click.
+                autoFocus: true,
+                value: draft,
+                placeholder: rawLabel,
+                'aria-label': t('renameIt'),
+                onChange: (event) => setDraft(event.target.value),
+                onKeyDown: (event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    finishRename(id);
+                  } else if (event.key === 'Escape') {
+                    event.preventDefault();
+                    cancelRename();
+                  }
+                },
+                onBlur: () => finishRename(id),
+              })
+            : h(
+                'span',
+                { className: 'dpc-name', title: label === rawLabel ? rawLabel : label + ' · ' + rawLabel },
+                label,
+              ),
+          editing === id ? null : h('code', { className: 'dpc-key', title: id }, id),
         ),
         h(
           'span',
@@ -2635,6 +2943,9 @@ function build(require) {
               ungrouped: t('ungrouped'),
               onPick: (next) => setGroup(id, next),
             }),
+        iconButton('edit', t('renameIt'), () => startRename(id), false, {
+          'aria-pressed': editing === id ? 'true' : 'false',
+        }),
         iconButton(
           isHidden ? 'eyeOff' : 'eye',
           locked ? t('lockedHint') : isHidden ? t('showIt') : t('hideIt'),
@@ -2676,6 +2987,7 @@ function build(require) {
     const layoutOn = prefs.guard !== false;
     const foldingOn = prefs.collapse !== false;
     const bridgeOn = prefs.bridge !== false;
+    const tagsOn = prefs.tags !== false;
     const capNow = typeof prefs.panelMax === 'number' ? prefs.panelMax : 45;
     const setLayout = (patch) => commit({ ...prefsNow(), ...patch });
     const layoutSwitch = (on, label, onClick) =>
@@ -2726,6 +3038,11 @@ function build(require) {
         t('layoutBridgeHint'),
         layoutSwitch(bridgeOn, t('layoutBridge'), () => setLayout({ bridge: !bridgeOn })),
       ),
+      layoutRow(
+        t('layoutTags'),
+        t('layoutTagsHint'),
+        layoutSwitch(tagsOn, t('layoutTags'), () => setLayout({ tags: !tagsOn })),
+      ),
       layoutRow(
         t('layoutMax'),
         null,
@@ -2928,6 +3245,7 @@ function build(require) {
     .dpc-glyph:empty::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4}
     .dpc-rowText{display:flex;flex:1 1 auto;flex-direction:row;align-items:baseline;gap:8px;min-width:0}
     .dpc-name{font-size:13px;font-weight:500;line-height:18px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .dpc-nameInput{flex:1 1 120px;max-width:320px;font-size:13px;line-height:18px}
     .dpc-key{font-family:var(--dsw-font-family-code,ui-monospace,monospace);font-size:11px;line-height:16px;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-tertiary,rgba(127,127,127,.7));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .dpc-tags{display:flex;flex:none;align-items:center;gap:8px}
     .dpc-tag{font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,rgba(127,127,127,.8));white-space:nowrap}
@@ -2942,7 +3260,9 @@ function build(require) {
     .dpc-pickerText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
     .dpc-caret{flex:none;width:6px;height:6px;margin-top:-2px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg);opacity:.7;transition:transform 120ms cubic-bezier(.16,1,.3,1)}
     .dpc-picker[data-open="true"] .dpc-caret{margin-top:2px;transform:rotate(225deg)}
-    .dpc-menu{position:absolute;z-index:50;top:calc(100% + 4px);right:0;display:flex;flex-direction:column;gap:2px;min-width:144px;max-width:240px;padding:4px;background:var(--dsw-alias-bg-elevated,rgba(127,127,127,.18));border:.5px solid var(--dsw-alias-border-l2,rgba(127,127,127,.24));border-radius:var(--dsw-radius-md,8px);box-shadow:0 8px 24px rgba(0,0,0,.28)}
+    /* Opaque popover surface: --dsw-alias-bg-layer-2 is the host's own elevated
+       layer, so the menu never lets the card behind it show through. */
+    .dpc-menu{position:absolute;z-index:50;top:calc(100% + 4px);right:0;display:flex;flex-direction:column;gap:2px;min-width:144px;max-width:240px;padding:4px;background-color:var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-base,#1f1f1f));border:.5px solid var(--dsw-alias-border-l2,rgba(127,127,127,.24));border-radius:var(--dsw-radius-md,8px);box-shadow:0 8px 24px rgba(0,0,0,.28)}
     .dpc-option{appearance:none;border:0;padding:4px 8px;border-radius:var(--dsw-radius-xs,4px);background:transparent;color:var(--dsw-alias-label-secondary,rgba(127,127,127,.95));font:inherit;font-size:12px;line-height:16px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
     .dpc-option:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.18));color:var(--dsw-alias-label-primary,#8a8a8a)}
     .dpc-option[aria-selected="true"]{background:color-mix(in srgb,var(--dsw-alias-state-business-primary,#5865f2) 16%,transparent);color:var(--dsw-alias-label-primary-bluish,#7f8fd8)}
@@ -3045,6 +3365,10 @@ function build(require) {
     [data-dpc-list]>button{flex:none}
     [data-dpc-region]{flex:1 1 auto;min-height:min(120px,18vh)}
 
+    /* The original name of a renamed row. It sits after the host title, pushed
+       to the far right; the host row stays a single click target. */
+    .dpc-nameTag{display:inline-block;flex:none;margin-left:auto;max-width:50%;height:16px;padding:0 6px;border-radius:999px;background:var(--dsw-alias-bg-l2,rgba(127,127,127,.14));color:var(--dsw-alias-label-tertiary,rgba(127,127,127,.8));font-size:10px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
+
     .dpc-sep{display:flex;align-items:center;gap:6px;flex:none;padding:12px 8px 4px;font-size:11px;font-weight:500;line-height:14px;color:var(--dsw-alias-label-tertiary,rgba(127,127,127,.78));white-space:nowrap;overflow:hidden;cursor:pointer;border-radius:var(--dsw-radius-sm,6px);user-select:none}
     .dpc-sep:hover{color:var(--dsw-alias-label-secondary,rgba(127,127,127,.95))}
     .dpc-sep:focus-visible{outline:2px solid var(--dsw-focus-ring-color,rgba(127,127,127,.65));outline-offset:1px}
@@ -3244,6 +3568,9 @@ function build(require) {
       }
       ctx.effect(() => () => disposeBridges(), `${PACKAGE}: bridge cleanup`);
       kickBridge();
+      // Renames show the owning package; the first scan answers the current rows,
+      // later bridge scans refresh the set when more settings pages register.
+      void ensurePackages();
     try { window.__dpcApplied = true; } catch { /* ignore */ }
   }
 

package/docs/bridged-settings-pages.md

@@ -44,8 +44,8 @@
 `props.renderSlot(slotName, { close: back }, {})` 渲染它。
 
 这样 section 的 `inject`、`store`、locale `t`、`useStore` 和 error boundary 仍由宿主照常提供；直接调用
-section 组件会缺这些。面板只负责外壳：顶部一条 40px 的栏（「返回对话」+ 来源 section id），
-下面一块随页面滚动的主体。`close` 与设置壳里一样只做「关掉这一页」，这里落回对话
+section 组件会缺这些。面板只负责外壳：顶部一条 40px 的栏（「返回对话」+ 来源包名短名，
+查不到包名时退回 section id），下面一块随页面滚动的主体。`close` 与设置壳里一样只做「关掉这一页」，这里落回对话
 （`layout.selectPanel(null)`）。
 
 桥接面板不常驻：开关关闭、section 消失、插件卸载时，`dispose()` 成对撤掉 `main` 与