containers/libreportal/frontend/components/app-detail/feature.json

@@ -0,0 +1,8 @@
+{
+  "id": "app-detail",
+  "routes": ["/app", "/app*"],
+  "module": "/components/app-detail/index.js",
+  "handler": "handleAppDetail",
+  "navId": "nav-app-center",
+  "order": 25
+}

containers/libreportal/frontend/components/app-detail/index.js

@@ -0,0 +1,58 @@
+// features/app-detail/index.js — the per-app detail page (/app/<name>[/<tab>]).
+//
+// Shares the apps-unified-layout fragment with the App Center grid but renders
+// via window.appTabbedManager (a system-loader singleton; call .initialize(),
+// never `new`). Registered AFTER the apps feature so '/apps*' wins the wildcard
+// match and only true /app* paths land here. mount() mirrors handleAppDetail
+// exactly, including the legacy ?app= / ?=name parsing and the ?tab=/?config=
+// → path rewrite. unmount() is a no-op for now (the singleton is shared); the
+// known unguarded popstate/task-listener re-bind in app-tabbed-manager is
+// addressed in a follow-up (it predates this migration).
+LP.features.register({
+  id: 'app-detail',
+  routes: ['/app', '/app*'],
+
+  async mount(ctx) {
+    const url = new URL(window.location);
+    let appName = url.pathname.replace(/^\/app\/?/, '').split('/')[0];
+    appName = appName ? decodeURIComponent(appName) : '';
+    if (!appName) appName = url.searchParams.get('app');
+
+    // Old format ?=appname&tab=tabname
+    if (!appName && url.search.includes('?=')) {
+      const queryPart = url.search.replace('?', '');
+      for (const part of queryPart.split('&')) {
+        if (part.startsWith('=')) { appName = part.substring(1); break; }
+      }
+    }
+
+    if (!appName) { return ctx.nav('/apps', false); }
+
+    // Back-compat: rewrite legacy ?tab=/?config= to the canonical path shape
+    // before the page reads URL state (replaceState — no extra history entry).
+    const legacyTab = url.searchParams.get('tab');
+    const legacyConfig = url.searchParams.get('config');
+    if (legacyTab || legacyConfig) {
+      const tab = legacyTab === 'logs' ? 'tasks' : (legacyTab || 'config');
+      const sub = (tab === 'config') ? legacyConfig : null;
+      const taskId = url.searchParams.get('task');
+      const canonical = ctx.services.router.appPath(appName, tab, sub, taskId);
+      if (canonical !== url.pathname + url.search) {
+        window.history.replaceState({ route: canonical }, '', canonical);
+      }
+    }
+
+    const html = await ctx.loadFragment('/components/apps/core/html/apps-unified-layout.html');
+    ctx.setContent(html, appName);
+
+    if (!window.appTabbedManager) {
+      throw new Error('AppTabbedManager not initialized by SystemLoader');
+    }
+    await window.appTabbedManager.initialize();
+  },
+
+  async unmount() {
+    // No-op: AppTabbedManager is a shared system-loader singleton. Its
+    // listener-rebind leak is pre-existing and fixed separately.
+  },
+});

containers/libreportal/frontend/components/apps/feature.json

@@ -1,17 +1,9 @@
 {
   "id": "apps",
-  "routes": [
-    "/apps",
-    "/apps*",
-    "/app",
-    "/app*"
-  ],
+  "routes": ["/apps", "/apps*"],
   "module": "/components/apps/index.js",
   "handler": "handleApps",
   "navId": "nav-app-center",
-  "nav": {
-    "label": "App Center",
-    "order": 20
-  },
+  "nav": { "label": "App Center", "order": 20 },
   "order": 20
 }

containers/libreportal/frontend/components/apps/index.js

@@ -1,24 +1,18 @@
-// components/apps/index.js — the App Center: the grid (/apps, /apps/<category>)
-// AND the per-app detail page (/app/<name>[/<tab>]). One feature owns both route
-// sets; mount() dispatches by path. Both render the shared apps-unified-layout
-// and drive system-loader singletons — appsManager for the grid, appTabbedManager
-// for detail — via .initialize(), never `new`. (app-detail used to be a separate
-// sibling component; it's the same feature, so it lives here.)
+// features/apps/index.js — the App Center grid (/apps, /apps/<category>).
+//
+// window.appsManager is a system-loader singleton (created by
+// initializeComponents); mount() calls .initialize(), never `new`. Routes
+// '/apps' and '/apps*' are registered BEFORE the app-detail feature's '/app*'
+// so findRouteHandler's longest-prefix wildcard match resolves /apps* here
+// (the manifest order guarantees this). unmount() is a no-op: the singleton and
+// its constructor-time taskRefresh registrations are shared with app-detail and
+// the dashboard and must outlive this view.
 LP.features.register({
   id: 'apps',
-  routes: ['/apps', '/apps*', '/app', '/app*'],
+  routes: ['/apps', '/apps*'],
 
   async mount(ctx) {
-    // /apps* -> grid; everything else (/app*) -> detail. Check '/apps' FIRST so
-    // it wins over '/app' (since '/apps'.startsWith('/app')).
-    if (window.location.pathname.startsWith('/apps')) {
-      return this._mountGrid(ctx);
-    }
-    return this._mountDetail(ctx);
-  },
-
-  // ---- grid (/apps, /apps/<category>) ----
-  async _mountGrid(ctx) {
+    // Category from the path (/apps/<category>), else legacy ?=<cat> / ?apps=.
     const seg = window.location.pathname.replace(/^\/apps\/?/, '').split('/')[0];
     if (seg) {
       window.appsCategory = decodeURIComponent(seg);
@@ -30,53 +24,23 @@ LP.features.register({
         window.appsCategory = new URLSearchParams(search).get('apps') || 'all';
       }
     }
+
     // Load the unified layout only if it isn't already present — preserves grid
-    // state when moving between categories / back from detail (legacy behaviour).
+    // state when moving between categories / back from app-detail (legacy behaviour).
     if (!document.querySelector('.apps-layout')) {
       const html = await ctx.loadFragment('/components/apps/core/html/apps-unified-layout.html');
       ctx.setContent(html, 'Applications');
     }
-    if (!window.appsManager) throw new Error('AppsManager not initialized by SystemLoader');
+
+    if (!window.appsManager) {
+      throw new Error('AppsManager not initialized by SystemLoader');
+    }
     await window.appsManager.initialize();
   },
 
-  // ---- per-app detail (/app/<name>[/<tab>]) ----
-  async _mountDetail(ctx) {
-    const url = new URL(window.location);
-    let appName = url.pathname.replace(/^\/app\/?/, '').split('/')[0];
-    appName = appName ? decodeURIComponent(appName) : '';
-    if (!appName) appName = url.searchParams.get('app');
-    // Old format ?=appname&tab=tabname
-    if (!appName && url.search.includes('?=')) {
-      const queryPart = url.search.replace('?', '');
-      for (const part of queryPart.split('&')) {
-        if (part.startsWith('=')) { appName = part.substring(1); break; }
-      }
-    }
-    if (!appName) { return ctx.nav('/apps', false); }
-
-    // Back-compat: rewrite legacy ?tab=/?config= to the canonical path shape
-    // before the page reads URL state (replaceState — no extra history entry).
-    const legacyTab = url.searchParams.get('tab');
-    const legacyConfig = url.searchParams.get('config');
-    if (legacyTab || legacyConfig) {
-      const tab = legacyTab === 'logs' ? 'tasks' : (legacyTab || 'config');
-      const sub = (tab === 'config') ? legacyConfig : null;
-      const taskId = url.searchParams.get('task');
-      const canonical = ctx.services.router.appPath(appName, tab, sub, taskId);
-      if (canonical !== url.pathname + url.search) {
-        window.history.replaceState({ route: canonical }, '', canonical);
-      }
-    }
-
-    const html = await ctx.loadFragment('/components/apps/core/html/apps-unified-layout.html');
-    ctx.setContent(html, appName);
-    if (!window.appTabbedManager) throw new Error('AppTabbedManager not initialized by SystemLoader');
-    await window.appTabbedManager.initialize();
-  },
-
   async unmount() {
-    // No-op: appsManager / appTabbedManager are shared system-loader singletons.
-    // The dirty-config nav guard fires in navigate() before unmount.
+    // Nothing to release — AppsManager is a shared system-loader singleton.
+    // The dirty-config nav guard (window.__appConfigNavGuard) fires in
+    // navigate() BEFORE unmount and is owned by AppsManager, so we leave it.
   },
 });

containers/libreportal/frontend/components/manifest.dev.json

@@ -4,113 +4,73 @@
   "features": [
     {
       "id": "dashboard",
-      "routes": [
-        "/",
-        "/dashboard"
-      ],
+      "routes": ["/", "/dashboard"],
       "module": "/components/dashboard/index.js",
       "handler": "handleDashboard",
       "navId": "nav-dashboard",
-      "nav": {
-        "label": "Dashboard",
-        "order": 10
-      }
+      "nav": { "label": "Dashboard", "order": 10 }
     },
     {
       "id": "apps",
-      "routes": [
-        "/apps",
-        "/apps*",
-        "/app",
-        "/app*"
-      ],
+      "routes": ["/apps", "/apps*"],
       "module": "/components/apps/index.js",
       "handler": "handleApps",
       "navId": "nav-app-center",
-      "nav": {
-        "label": "App Center",
-        "order": 20
-      }
+      "nav": { "label": "App Center", "order": 20 }
+    },
+    {
+      "id": "app-detail",
+      "routes": ["/app", "/app*"],
+      "module": "/components/app-detail/index.js",
+      "handler": "handleAppDetail",
+      "navId": "nav-app-center"
     },
     {
       "id": "admin",
-      "routes": [
-        "/admin",
-        "/admin*"
-      ],
+      "routes": ["/admin", "/admin*"],
       "module": "/components/admin/index.js",
       "handler": "handleAdmin",
       "navId": "nav-config",
-      "nav": {
-        "label": "Admin",
-        "order": 40
-      }
+      "nav": { "label": "Admin", "order": 40 }
     },
     {
       "id": "config-redirect",
-      "routes": [
-        "/config",
-        "/config*"
-      ],
+      "routes": ["/config", "/config*"],
       "handler": "handleConfigRedirect",
       "navId": "nav-config"
     },
     {
       "id": "tasks",
-      "routes": [
-        "/tasks",
-        "/tasks*"
-      ],
+      "routes": ["/tasks", "/tasks*"],
       "module": "/components/tasks/index.js",
       "handler": "handleTasks",
       "navId": "nav-tasks",
-      "nav": {
-        "label": "Tasks",
-        "order": 60
-      }
+      "nav": { "label": "Tasks", "order": 60 }
     },
     {
       "id": "updater",
-      "routes": [
-        "/updater",
-        "/updater*"
-      ],
+      "routes": ["/updater", "/updater*"],
       "module": "/components/updater/index.js",
       "navId": "nav-updater",
-      "nav": {
-        "label": "Updates",
-        "order": 30
-      }
+      "nav": { "label": "Updates", "order": 30 }
     },
     {
       "id": "backup",
-      "routes": [
-        "/backup",
-        "/backup*"
-      ],
+      "routes": ["/backup", "/backup*"],
       "module": "/components/backup/index.js",
       "handler": "handleBackup",
       "navId": "nav-backup",
-      "nav": {
-        "label": "Backups",
-        "order": 50
-      }
+      "nav": { "label": "Backups", "order": 50 }
     },
     {
       "id": "peers",
-      "routes": [
-        "/peers",
-        "/peers*"
-      ],
+      "routes": ["/peers", "/peers*"],
       "handler": "handlePeers",
       "navId": "nav-config"
     },
     {
       "id": "ssh",
-      "routes": [
-        "/ssh",
-        "/ssh*"
-      ],
+      "routes": ["/ssh", "/ssh*"],
       "handler": "handleSsh",
       "navId": "nav-config"
     }