V0.38.3 extension config sections (#236)

Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>

src/js/sw/surfaces/settings/index.js

@@ -2,8 +2,9 @@
  * SettingsSurface — root settings surface
  *
  * Reads globals:
- *   __SECTION__    — active section name (string)
- *   __BASE__       — base path
+ *   __SECTION__          — active section name (string)
+ *   __BASE__             — base path
+ *   __CONFIG_SECTIONS__  — v0.38.3: extension config sections (array|null)
  *
  * Policy flags (BYOK, personas) come from sw.auth.policies,
  * populated at SDK boot via GET /api/v1/profile/permissions.
@@ -75,6 +76,20 @@ const SECTION_TITLES = {
     notifications: 'Notifications',
 };
 
+// ── v0.38.3: Extension config sections ──────
+// Packages declare config_section in their manifest. The backend passes
+// matching entries via __CONFIG_SECTIONS__. We merge them into the nav
+// and section module map for lazy loading.
+const _configSections = window.__CONFIG_SECTIONS__ || [];
+const EXT_NAV_ITEMS = _configSections.map(cs => ({ key: cs.package_id, label: cs.label }));
+const _base = window.__BASE__ || '';
+for (const cs of _configSections) {
+    const pkgId = cs.package_id;
+    const component = cs.component || 'js/config.js';
+    sectionModules[pkgId] = () => import(`${_base}/surfaces/${pkgId}/${component}`);
+    SECTION_TITLES[pkgId] = cs.label;
+}
+
 function SettingsSurface() {
     const BASE    = window.__BASE__ || '';
     const section = window.__SECTION__ || 'general';
@@ -195,6 +210,20 @@ function SettingsSurface() {
                             </p>
                         </div>
                     `}
+
+                    ${EXT_NAV_ITEMS.length > 0 && html`
+                        <div>
+                            <div class="settings-nav-sep"></div>
+                            <div class="settings-nav-label" style="font-size:10px;font-weight:600;color:var(--text-3);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:0.5px;">Extensions</div>
+                            ${EXT_NAV_ITEMS.map(item => html`
+                                <a href="${BASE}/settings/${item.key}"
+                                   class="settings-nav-link ${section === item.key ? 'active' : ''}"
+                                   onClick=${onNavClick}>
+                                    ${item.label}
+                                </a>
+                            `)}
+                        </div>
+                    `}
                 </div>
 
                 ${/* Content */''}