dsh-panel-control 0.7.2 → 0.9.1

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.7.2';
+  const BUILD_STAMP = 'dsh-panel-control/0.9.1';
   try { window.__dpcEvaluated = BUILD_STAMP; } catch { /* ignore */ }
 /**
  * Client half of dsh-panel-control.
@@ -265,6 +265,14 @@ function build(require) {
   const SLOT_MAIN = 'main';
   const SLOT_SETTINGS = 'settings.section';
   const PANEL_KEY = 'panel-control';
+  /** Bridged pages get their own ids; the prefix also keeps them out of the host's reserved keys. */
+  const BRIDGE_PREFIX = 'dpc-bridge-';
+  const BRIDGE_SLOT_PREFIX = 'dpc-bridge-slot-';
+  /** Between the ordinary entries and this manager's own row (order 90). */
+  const BRIDGE_ORDER = 85;
+  const BRIDGE_DEBOUNCE_MS = 120;
+  /** Boot-time rescans: plugins register their settings page while the page starts. */
+  const BRIDGE_RETRY_MS = [350, 900, 2000, 4200, 8000, 15000];
   const STORAGE_KEY = 'dsh.panel-control.v1';
   /** Host route that answers "file these entries into groups" (see index.js). */
   const RPC_CHANNEL = '/api';
@@ -340,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: {
@@ -377,6 +386,21 @@ function build(require) {
     layoutCollapseHint: { zh: '点分组标题收起该组，标题与数量仍保留。', en: 'Click a group title to fold it; the title and count stay.' },
     layoutMax: { zh: '高度上限', en: 'Height cap' },
     layoutMaxNone: { zh: '不限', en: 'No cap' },
+    layoutBridge: { zh: '补全设置页入口', en: 'Entries for settings pages' },
+    layoutBridgeHint: {
+      zh: '第三方插件只做了设置页、没做侧栏入口时，替它在侧栏补一个入口。关掉后这些入口全部移除，插件自己的设置页不受影响。',
+      en: 'When a third-party plugin ships a settings page but no sidebar entry, add one for it. Turning this off removes only those entries; the plugin keeps its settings page.',
+    },
+    bridgeBack: { zh: '返回对话', en: 'Back to conversation' },
+    bridgeTag: { zh: '设置页', en: 'Settings page' },
+    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' },
@@ -468,6 +492,9 @@ function build(require) {
     collapsed: [],
     guard: true,
     collapse: true,
+    bridge: true,
+    names: {},
+    tags: true,
     panelMax: 45,
   });
 
@@ -479,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) {
@@ -508,6 +545,9 @@ function build(require) {
     // explicit false is the only way to turn the CSS off.
     out.guard = raw.guard !== false;
     out.collapse = raw.collapse !== false;
+    // Missing in files written before the bridge existed: those installs get the
+    // feature by default, exactly like a fresh one.
+    out.bridge = raw.bridge !== false;
     const cap = Math.round(Number(raw.panelMax));
     out.panelMax = Number.isFinite(cap) ? Math.min(70, Math.max(0, cap)) : 45;
     if (Array.isArray(raw.groups)) {
@@ -531,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;
   }
@@ -559,7 +613,15 @@ function build(require) {
       (prefs.groups || []).length > 0 ||
       (prefs.collapsed || []).length > 0 ||
       (prefs.autoFiled || []).length > 0 ||
-      prefs.auto === true);
+      prefs.auto === true ||
+      // A file that only turned a switch off is still a file the reader edited;
+      // without this, the next load treats it as empty and drops the edit.
+      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. */
   async function hostCall(method, payload) {
@@ -870,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).
@@ -900,6 +988,420 @@ function build(require) {
     left.length === right.length &&
     left.every((row, index) => row.id === right[index].id && row.label === right[index].label);
 
+  /* -------------------------------------------------------------- bridges */
+
+  /**
+   * Settings pages with no panel of their own.
+   *
+   * A Client plugin addresses its settings page with `settings.section`; the
+   * sidebar only lists `sidebar.panellist` entries, and the two registries are
+   * unrelated. A plugin that never registers a panel therefore has a reachable
+   * settings page and no way to open it from the navigation rail. This block
+   * gives each such page a panel of its own: a panellist row plus the `main`
+   * entry it addresses, whose body is the host's own renderer for that section.
+   *
+   * A slot entry's `registrant` names the Cordis fiber that registered it, but
+   * the client runner applies many plugins inside one fiber: in practice every
+   * plugin except the market reports the same name, so a registrant match cannot
+   * tell one plugin from another. Attribution is therefore by ownership of the
+   * navigation row: a settings id whose base name (with a trailing `-settings`
+   * removed) is an existing panel id, or whose label is an existing panel label,
+   * belongs to a plugin that already has a way in. Core settings ids are listed
+   * explicitly; they ship without a panel because that is the product decision,
+   * not a gap.
+   */
+  const CORE_SECTION_IDS = new Set(['account', 'general', 'models', 'agent-presets', 'plugins']);
+
+  const bridgeState = {
+    entries: new Map(),
+    labels: new Map(),
+    timer: null,
+    retries: new Set(),
+    retriesStarted: false,
+    syncing: false,
+    scans: 0,
+    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) {
+    const pkg = packageState.map[id];
+    return packageLabel(pkg) || packageLabel(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;
+    return typeof value === 'string' ? value : '';
+  }
+
+  function readSections(slots) {
+    try {
+      const raw = slots && typeof slots.entriesOfSlot === 'function' ? slots.entriesOfSlot(SLOT_SETTINGS) || [] : [];
+      return raw
+        .map((entry) => {
+          const options = (entry && entry.options) || {};
+          return {
+            id: typeof options.id === 'string' ? options.id : '',
+            label: options.label,
+            registrant: registrantOf(entry),
+            component: entry && entry.component,
+            inject: options.inject,
+            store: options.store,
+            locale: options.locale,
+          };
+        })
+        .filter((section) => section.id !== '');
+    } catch {
+      return [];
+    }
+  }
+
+  function panelEntries(slots) {
+    try {
+      return (slots && typeof slots.entriesOfSlot === 'function' ? slots.entriesOfSlot(SLOT_PANELS) || [] : [])
+        .map((entry) => entry && entry.options)
+        .filter((options) => options && typeof options.id === 'string' && options.id !== '')
+        .map((options) => ({ id: options.id, label: resolveLabel(options.label, options.id) }));
+    } catch {
+      return [];
+    }
+  }
+
+  function sectionBase(id) {
+    return id.endsWith('-settings') ? id.slice(0, -'-settings'.length) : id;
+  }
+
+  /**
+   * Every settings page whose plugin owns no sidebar entry.
+   *
+   * A plugin may expose more than one settings page; each becomes its own row,
+   * labelled with the plugin's own section label. A label already used by a real
+   * panel is suffixed with the settings id so two rows never read the same.
+   */
+  function bridgeCandidates(slots) {
+    const rows = panelEntries(slots).filter((row) => !row.id.startsWith(BRIDGE_PREFIX));
+    const panelIds = new Set(rows.map((row) => row.id));
+    const panelLabels = new Set(rows.map((row) => row.label));
+    // Real panel labels own their names; a bridged row must not steal one, and
+    // must not collide with another bridged row either.
+    const used = new Set(panelLabels);
+    const out = [];
+    const taken = new Set();
+    for (const section of readSections(slots)) {
+      if (CORE_SECTION_IDS.has(section.id)) continue;
+      const base = sectionBase(section.id);
+      let owned = panelIds.has(section.id) || panelIds.has(base);
+      if (!owned) {
+        for (const panelId of panelIds) {
+          if (panelId.endsWith('-' + base)) {
+            owned = true;
+            break;
+          }
+        }
+      }
+      if (owned) continue;
+      const label = resolveLabel(section.label, section.id);
+      if (panelLabels.has(label)) continue;
+      if (typeof section.component !== 'function') continue;
+      const bridgeId = BRIDGE_PREFIX + section.id;
+      if (bridgeId.length > LIMITS.key || taken.has(bridgeId)) continue;
+      taken.add(bridgeId);
+      const chosen = used.has(label) ? `${label} · ${section.id}` : label;
+      used.add(chosen);
+      out.push({
+        bridgeId,
+        sectionId: section.id,
+        label: chosen,
+        component: section.component,
+        inject: section.inject,
+        store: section.store,
+        locale: section.locale,
+      });
+    }
+    return out;
+  }
+
+  /** The layout's live selection, read through the public store when it exposes one. */
+  function activePanelId() {
+    try {
+      const layout = optionalService(ctxRef, 'layout');
+      const info = layout && layout.panelInfo;
+      const snapshot = info && typeof info.getSnapshot === 'function' ? info.getSnapshot() : info;
+      return snapshot && typeof snapshot.activePanelId === 'string' ? snapshot.activePanelId : null;
+    } catch {
+      return null;
+    }
+  }
+
+  function disposeBridge(id, record) {
+    bridgeState.entries.delete(id);
+    for (const dispose of record.disposers.slice().reverse()) {
+      try {
+        dispose();
+      } catch (error) {
+        console.warn(`[${PACKAGE}] bridge cleanup failed for "${id}"`, error);
+      }
+    }
+    // The main key this row addressed is gone, so a reader sitting on it would
+    // stare at an empty centre column. The Conversation is the only safe landing.
+    if (activePanelId() === id) {
+      try {
+        const layout = optionalService(ctxRef, 'layout');
+        if (layout && typeof layout.selectPanel === 'function') layout.selectPanel(null);
+      } catch {
+        /* nothing was selected after all */
+      }
+    }
+  }
+
+  function syncBridges() {
+    const slots = ctxRef && ctxRef.slots;
+    if (!slots || typeof slots.register !== 'function' || bridgeState.syncing) return;
+    bridgeState.syncing = true;
+    bridgeState.scans += 1;
+    let changed = false;
+    try {
+      const enabled = prefsNow().bridge !== false;
+      watchSettings();
+      const sections = readSections(slots);
+      const panelIds = panelEntries(slots).map((row) => row.id);
+      const candidates = enabled ? bridgeCandidates(slots) : [];
+      const desired = new Set(candidates.map((candidate) => candidate.bridgeId));
+      bridgeState.labels = new Map(candidates.map((candidate) => [candidate.bridgeId, candidate.label]));
+      for (const [id, record] of Array.from(bridgeState.entries)) {
+        if (desired.has(id)) continue;
+        disposeBridge(id, record);
+        changed = true;
+      }
+      for (const candidate of candidates) {
+        if (bridgeState.entries.has(candidate.bridgeId)) continue;
+        const slotName = BRIDGE_SLOT_PREFIX + candidate.sectionId;
+        const record = { sectionId: candidate.sectionId, disposers: [] };
+        try {
+          record.disposers.push(
+            slots.register(
+              {
+                name: SLOT_MAIN,
+                key: candidate.bridgeId,
+                locale: NS,
+                children: { [slotName]: { kind: 'single', scope: 'root' } },
+              },
+              makeBridgePanel(candidate, slotName),
+            ),
+          );
+          // The settings shell owns the `settings.section` declaration, so its
+          // props-face renderer is not ours to call. Declaring one child slot of
+          // our own and re-registering the same component into it gives the
+          // section the host kit it expects (inject, locale, store, boundary)
+          // without touching the shell or the foreign registration.
+          record.disposers.push(
+            slots.register(
+              {
+                name: slotName,
+                inject: candidate.inject,
+                store: candidate.store,
+                locale: candidate.locale,
+              },
+              candidate.component,
+            ),
+          );
+          record.disposers.push(
+            slots.register(
+              {
+                name: SLOT_PANELS,
+                id: candidate.bridgeId,
+                order: BRIDGE_ORDER,
+                locale: NS,
+                label: () => bridgeState.labels.get(candidate.bridgeId) || candidate.label,
+              },
+              BridgeIcon,
+            ),
+          );
+          bridgeState.entries.set(candidate.bridgeId, record);
+          changed = true;
+        } catch (error) {
+          for (const dispose of record.disposers.slice().reverse()) {
+            try {
+              dispose();
+            } catch {
+              /* the pair is already half gone */
+            }
+          }
+          console.warn(`[${PACKAGE}] could not add a panel for "${candidate.sectionId}"`, error);
+        }
+      }
+      // Early scans run while plugins are still registering. Keeping a trace of
+      // exactly what the slot returned tells a later reader whether a missing
+      // row is a timing problem or an ownership guess that did not hold.
+      if (bridgeState.scans <= 8 || changed) {
+        reportHost({
+          kind: 'bridge-scan',
+          enabled,
+          scans: bridgeState.scans,
+          sections: sections.map((section) => `${section.id}:${section.registrant || '?'}`).join('|'),
+          panels: panelIds.join('|'),
+          ids: Array.from(bridgeState.entries.keys()).join(','),
+        });
+      }
+      if (changed) {
+        reportHost({
+          kind: 'bridge',
+          enabled,
+          ids: Array.from(bridgeState.entries.keys()).join(','),
+          sections: candidates.length,
+        });
+        // The diagnostics line in the settings card reads this count; without a
+        // 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 {
+      bridgeState.syncing = false;
+    }
+  }
+
+  function scheduleBridgeSync() {
+    if (bridgeState.timer) clearTimeout(bridgeState.timer);
+    bridgeState.timer = setTimeout(() => {
+      bridgeState.timer = null;
+      syncBridges();
+    }, BRIDGE_DEBOUNCE_MS);
+  }
+
+  /**
+   * Watch the section registry.
+   *
+   * `subscribe` is trustworthy only once the slot is declared. The plugin runs
+   * before some of the plugins it bridges, so an early subscription can resolve
+   * to nothing and never be retried; the declaration callback calls this again.
+   */
+  function watchSettings() {
+    if (bridgeState.unsub) return;
+    const slots = ctxRef && ctxRef.slots;
+    if (!slots || typeof slots.subscribe !== 'function') return;
+    try {
+      const dispose = slots.subscribe(SLOT_SETTINGS, () => scheduleBridgeSync());
+      bridgeState.unsub = typeof dispose === 'function' ? dispose : () => {};
+    } catch {
+      /* not declared yet; the next scan or declaration retries */
+    }
+  }
+
+  function unwatchSettings() {
+    if (!bridgeState.unsub) return;
+    try {
+      bridgeState.unsub();
+    } catch {
+      /* the slot is already gone */
+    }
+    bridgeState.unsub = null;
+  }
+
+  function scheduleBridgeRetry(delay) {
+    const id = setTimeout(() => {
+      bridgeState.retries.delete(id);
+      if (ctxRef) syncBridges();
+    }, delay);
+    // Browsers return a number; Node returns an object. Letting the harness
+    // exit without waiting out the last boot scan keeps `npm run check` quick.
+    if (id && typeof id.unref === 'function') id.unref();
+    bridgeState.retries.add(id);
+  }
+
+  function scheduleBridgeRetries() {
+    if (bridgeState.retriesStarted) return;
+    bridgeState.retriesStarted = true;
+    for (const delay of BRIDGE_RETRY_MS) scheduleBridgeRetry(delay);
+  }
+
+  function disposeBridges() {
+    if (bridgeState.timer) {
+      clearTimeout(bridgeState.timer);
+      bridgeState.timer = null;
+    }
+    for (const id of Array.from(bridgeState.retries)) clearTimeout(id);
+    bridgeState.retries.clear();
+    unwatchSettings();
+    for (const [id, record] of Array.from(bridgeState.entries)) disposeBridge(id, record);
+  }
+
   /** The stored order, extended with every entry that is new since it was saved. */
   function normalize(prefs, entries) {
     const known = new Set(entries.map((entry) => entry.id));
@@ -955,7 +1457,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);
     }
@@ -974,7 +1478,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 机器人"
@@ -1086,7 +1590,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;
         }
@@ -1234,6 +1741,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();
@@ -1262,10 +1837,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),
       });
@@ -1279,10 +1865,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
@@ -1420,6 +2004,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');
@@ -1447,6 +2043,9 @@ function build(require) {
     scheduleSaveToHost();
     emit();
     if (engineRef) engineRef.schedule();
+    // The bridge switch lives here too; toggling it must add or drop the rows
+    // right away rather than on the next unrelated registration.
+    scheduleBridgeSync();
   }
 
   function setDiag(patch) {
@@ -1477,6 +2076,8 @@ function build(require) {
       if (!stored || !hasContent(stored)) await hostCall('save', { prefs: chosen });
     }
     setDiag({ prefsSource: prefsSource.value, hostFile });
+    // The Host copy may carry the bridge switch with it.
+    scheduleBridgeSync();
   }
 
   const prefsNow = () => store.state.prefs;
@@ -1502,7 +2103,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()
@@ -1747,6 +2350,8 @@ 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',
   };
 
   /** One 16px line glyph, one 1.5 stroke, colours inherited from the text role. */
@@ -1807,6 +2412,105 @@ function build(require) {
 
   const PanelIcon = SlidersIcon;
 
+  /**
+   * A page glyph with text lines: the settings page, not the plugin's own icon
+   * (that one belongs to the plugin and is not available to the bridge).
+   */
+  function BridgeIcon(props) {
+    const size = props && typeof props.size === 'number' ? props.size : 18;
+    const active = Boolean(props && props.active);
+    return h(
+      'svg',
+      {
+        width: size,
+        height: size,
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        'aria-hidden': true,
+        style: { display: 'block', opacity: active ? 1 : 0.78 },
+      },
+      h('rect', {
+        x: 3.5,
+        y: 4.5,
+        width: 17,
+        height: 15,
+        rx: 2.5,
+        stroke: 'currentColor',
+        strokeWidth: 1.6,
+      }),
+      h('path', {
+        d: 'M8 9.5h8M8 12h5M8 14.5h8',
+        stroke: 'currentColor',
+        strokeWidth: 1.5,
+        strokeLinecap: 'round',
+      }),
+    );
+  }
+
+  /**
+   * One bridged page: a back bar, then the host's renderer for the section.
+   *
+   * The settings shell owns the `settings.section` declaration, so the ctx-level
+   * `slots.renderSlot` cannot reach it: that entry point only renders `root`, and
+   * a child slot is renderable only through the props face of the entry that
+   * declared it. Each bridge therefore declares its own single-child slot and
+   * re-registers the section component into it (see `syncBridges`), and renders
+   * that slot through the `renderSlot` prop the host hands this component. The
+   * host still builds the section's kit — inject, locale, store, boundary and
+   * hooks all stay its own. The owner prop is the same `close` the settings shell
+   * passes, wired to the Conversation because this page has no dialog to close.
+   */
+  function makeBridgePanel(candidate, slotName) {
+    const back = () => {
+      try {
+        const layout = optionalService(ctxRef, 'layout');
+        if (layout && typeof layout.selectPanel === 'function') layout.selectPanel(null);
+      } catch {
+        /* the Conversation is already showing */
+      }
+    };
+    return function BridgePanel(props) {
+      const renderSlot = props && typeof props.renderSlot === 'function' ? props.renderSlot : null;
+      let node = null;
+      try {
+        if (renderSlot) node = renderSlot(slotName, { close: back }, {});
+      } catch (error) {
+        console.warn(`[${PACKAGE}] could not render settings page "${candidate.sectionId}"`, error);
+      }
+      return h(
+        'div',
+        { className: 'dpc-root dpc-bridge' },
+        h(
+          'div',
+          { className: 'dpc-page dpc-bridgePage' },
+          h(
+            'div',
+            { className: 'dpc-bridgeBar' },
+            h(
+              'button',
+              { type: 'button', className: 'dpc-link dpc-bridgeBack', onClick: back },
+              h(Icon, { name: 'back' }),
+              h('span', null, t('bridgeBack')),
+            ),
+            h(
+              'span',
+              { className: 'dpc-bridgeTags' },
+              h('span', { className: 'dpc-bridgeTag' }, t('bridgeTag')),
+              h('span', { className: 'dpc-bridgeFrom' }, fill(t('bridgeFrom'), { p: candidate.sectionId })),
+            ),
+          ),
+          node
+            ? h('div', { className: 'dpc-bridgeBody' }, node)
+            : h(
+                'section',
+                { className: 'dpc-card dpc-empty' },
+                h('p', { className: 'dpc-emptyTitle' }, t('bridgeMissing')),
+              ),
+        ),
+      );
+    };
+  }
+
   /** The entry's own glyph, borrowed from the slot it registered. */
   function Glyph(props) {
     const [node, setNode] = React.useState(null);
@@ -1907,6 +2611,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
@@ -1970,12 +2677,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' },
@@ -2133,6 +2872,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(
@@ -2150,8 +2890,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',
@@ -2169,6 +2933,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'),
@@ -2209,6 +2976,8 @@ function build(require) {
     // is the only place the guard, the cap and the fold switch are explained.
     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) =>
@@ -2251,6 +3020,19 @@ function build(require) {
         t('layoutCollapseHint'),
         layoutSwitch(foldingOn, t('layoutCollapse'), () => setLayout({ collapse: !foldingOn })),
       ),
+      // The switch is the only way back for a reader who does not want the
+      // extra rows: turning it off also disposes the registrations, not just
+      // the display, so the host list and this page agree.
+      layoutRow(
+        t('layoutBridge'),
+        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,
@@ -2350,6 +3132,7 @@ function build(require) {
           state.inventory && state.inventory.repeated ? t('diagYes') : t('diagNo'),
           true,
         ),
+        diagRow(t('diagBridge'), String(bridgeState.entries.size), true),
         diagnostics && diagnostics.error ? h('dt', { key: 'et' }, 'error') : null,
         diagnostics && diagnostics.error
           ? h('dd', { key: 'ed', className: 'dpc-error' }, diagnostics.error)
@@ -2452,6 +3235,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}
@@ -2466,7 +3250,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)}
@@ -2525,6 +3311,16 @@ function build(require) {
     .dpc-segmentBtn--on{background:var(--dsw-alias-settings-card-fill,rgba(127,127,127,.22));color:var(--dsw-alias-label-primary,#8a8a8a)}
     .dpc-segmentBtn:disabled{opacity:.4;cursor:default}
 
+    /* A bridged settings page: its own bar, then the host-rendered section. */
+    .dpc-bridgePage{gap:16px}
+    .dpc-bridgeBar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding-bottom:8px;border-bottom:.5px solid var(--dsw-alias-border-l2,rgba(127,127,127,.14))}
+    .dpc-bridgeBack{display:inline-flex;align-items:center;gap:6px;margin-left:-8px}
+    .dpc-bridgeBack .dpc-ico{width:14px;height:14px}
+    .dpc-bridgeTags{display:flex;align-items:center;gap:8px;min-width:0}
+    .dpc-bridgeTag{flex:none;padding:2px 8px;border:.5px solid var(--dsw-alias-border-l2,rgba(127,127,127,.24));border-radius:999px;font-size:11px;line-height:16px;color:var(--dsw-alias-label-secondary,rgba(127,127,127,.95))}
+    .dpc-bridgeFrom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--dsw-font-family-code,ui-monospace,monospace);font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary,rgba(127,127,127,.8))}
+    .dpc-bridgeBody{min-width:0}
+
     @media (max-width:1000px){
       /* Below the column width the frame becomes the gutter instead of pushing
          content past the window edge. */
@@ -2534,6 +3330,7 @@ function build(require) {
       .dpc-row{flex-wrap:wrap;gap:8px}
       .dpc-rowText{flex:1 1 120px}
       .dpc-tags{order:8}
+      .dpc-bridgeFrom{display:none}
     }
     /* The settings column is narrower than the page column: drop what is only
        nice-to-have there instead of letting the row overflow. */
@@ -2558,6 +3355,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}
@@ -2672,10 +3473,24 @@ function build(require) {
       // A registration, a rename or a locale switch changes the list this plugin
       // lays out, so every one of them re-runs the pass.
       if (typeof ctx.slots.subscribe === 'function') {
-        ctx.effect(() => ctx.slots.subscribe(SLOT_PANELS, () => engineRef && engineRef.schedule()), `${PACKAGE}: panel entries`);
+        ctx.effect(
+          () =>
+            ctx.slots.subscribe(SLOT_PANELS, () => {
+              if (engineRef) engineRef.schedule();
+              scheduleBridgeSync();
+            }),
+          `${PACKAGE}: panel entries`,
+        );
       }
       if (locale && typeof locale.subscribe === 'function') {
-        ctx.effect(() => locale.subscribe(() => engineRef && engineRef.schedule()), `${PACKAGE}: labels`);
+        ctx.effect(
+          () =>
+            locale.subscribe(() => {
+              if (engineRef) engineRef.schedule();
+              scheduleBridgeSync();
+            }),
+          `${PACKAGE}: labels`,
+        );
       }
 
       ctx.slots.inject(SLOT_MAIN, () => {
@@ -2714,6 +3529,38 @@ function build(require) {
           return undefined;
         }
       });
+
+      // A bridged page follows three registries: the settings sections it
+      // mirrors, the panels it must not duplicate, and the locale that names
+      // both. Each declaration is its own readiness signal, so the sync runs
+      // once the slots exist and again on every later change.
+      const kickBridge = () => {
+        try {
+          watchSettings();
+          scheduleBridgeSync();
+          scheduleBridgeRetries();
+        } catch (error) {
+          console.warn(`[${PACKAGE}] bridge scheduling failed`, error);
+        }
+      };
+      try {
+        // Re-install the watch on every declaration: before the slot exists
+        // `subscribe` cannot observe the section registry, and a stale
+        // subscription would miss the pages that register after us.
+        ctx.slots.inject(SLOT_SETTINGS, () => {
+          unwatchSettings();
+          watchSettings();
+          kickBridge();
+        });
+        ctx.slots.inject(SLOT_PANELS, kickBridge);
+      } catch (error) {
+        console.warn(`[${PACKAGE}] bridge slots unavailable`, error);
+      }
+      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 */ }
   }
 
@@ -2736,7 +3583,9 @@ function build(require) {
   }
 
   return {
-    inject: ['slots'],
+    // `layout` is only read (never patched): the bridge's back button and its
+    // selection fallback call the public selectPanel action.
+    inject: ['slots', 'layout'],
     // Pure helpers the browser harness drives directly, without a Cordis context.
     testables: { createEngine, mapButtons, readEntries, normalize, sanitize, store, reorderList, applyInner, setCtx: (value) => { ctxRef = value; } },
     apply(ctx) {