Enhance external repository integration

webapp/EXTENSION_EXAMPLE.md

@@ -109,48 +109,36 @@ export default EchoPage;
 
 ## 3) Extend the frontend routes
 
-Append the new route inside `webapp/packages/webui/src/extensions/routes/routeExtensions.js`:
+Append the new route inside `webapp/packages/webui/src/extensions/echo.routes.js`:
 
 ```javascript
 import EchoPage from '../../pages/EchoPage';
 
-export const extendRoutes = (defaultRoutes = []) => [
-  ...defaultRoutes,
-  {
+export const route = {
     path: '/echo',
     element: <EchoPage />,
     // Inherits PrivateRoute + Layout by default
-  },
-];
+  }
 ```
 
 All routes defined here are merged with `src/config/routesConfig.jsx`, so the Echo page sits alongside the built-in screens.
 
 ## 4) Register the Echo card
 
-Create `webapp/packages/webui/src/extensions/cards/registerEchoCard.js`:
+Create `webapp/packages/webui/src/extensions/echo.card.js`:
 
 ```javascript
 import CampaignIcon from '@mui/icons-material/Campaign';
-import { registerExternalCardRegistrar } from './cardRegistry';
 
-registerExternalCardRegistrar(({ registerCard }) =>
-  registerCard({
+export const card = {
     id: 'echo',
     title: 'Echo',
     description: 'Send text to the Echo API and see it mirrored back.',
     buttonText: 'Open Echo',
     icon: <CampaignIcon />,
     defaultOrder: 7,
     onAction: ({ navigate }) => navigate('/echo'),
-  }),
-);
-```
-
-Import the registrar once so it runs during startup by editing `webapp/packages/webui/src/main.jsx`:
-
-```javascript
-import './extensions/cards/registerEchoCard';
+  };
 ```
 
 (Optional) If you want to control the card’s order or grouping, add an entry to `CARD_CONFIG_OVERRIDES` (for example via `.env` or `window.__CARD_CONFIG_OVERRIDES__`).

webapp/packages/webui/src/config/routesConfig.jsx

@@ -105,6 +105,10 @@ export const defaultRoutes = [
   },
 ];
 
-export const loadRoutesConfig = () => extendRoutes(defaultRoutes);
+import { routes as extensionRoutes } from '../extensions';
+
+export const loadRoutesConfig = () => {
+  return [...defaultRoutes, ...extensionRoutes];
+};
 
 export default loadRoutesConfig;

webapp/packages/webui/src/extensions/index.js

@@ -1,16 +1,22 @@
-// webapp/packages/webui/src/extensions/index.js
+// This file is automatically generated by the build process.
+// It is not intended for manual editing.
+//
+// It scans for all files in the extensions directory and exports them.
+// This allows for a CI/CD-friendly way to add new extensions.
 
-// Import all your extensions here
-import * as echoExtension from './echo';
+const modules = import.meta.glob('./**/*.js', { eager: true });
 
-// Aggregate all extensions
-const allExtensions = [
-    echoExtension,
-];
+const cards = [];
+const routes = [];
 
-// Process and export the aggregated parts
-export const extensionCards = allExtensions.flatMap(ext => ext.cards || []);
-export const extensionPages = allExtensions.flatMap(ext => ext.pages || []);
+for (const path in modules) {
+    const mod = modules[path];
+    if (mod.card) {
+        cards.push(mod.card);
+    }
+    if (mod.route) {
+        routes.push(mod.route);
+    }
+}
 
-// You can also export other things like reducers, middleware, etc.
-// export const extensionReducers = allExtensions.reduce((acc, ext) => ({ ...acc, ...(ext.reducers || {}) }), {});
+export { cards, routes };

webapp/packages/webui/src/pages/HomePage.jsx

@@ -3,16 +3,13 @@ import { useNavigate } from 'react-router-dom';
 import { Box, Typography, Grid } from '@mui/material';
 import { useAuth } from '../contexts/AuthContext';
 import ActionCard from '../components/ActionCard';
-import { ensureCardRegistryInitialized, listCards } from '../extensions/cards/cardRegistry';
-import loadCardsConfig from '../extensions/cards/config/configLoader';
+import { cards as extensionCards } from '../extensions';
 
 const HomePage = () => {
   const navigate = useNavigate();
   const { user } = useAuth();
 
-  ensureCardRegistryInitialized();
-
-  const cards = useMemo(() => listCards(loadCardsConfig()), []);
+  const cards = useMemo(() => extensionCards, []);
 
   return (
     <Box sx={{ flexGrow: 1, p: 3 }}>