Add Pluggable Capability to the AI Workspace UI

portals/ai-workspace/package.json

@@ -3,6 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
   "scripts": {
     "dev": "vite",
     "start": "vite",

portals/ai-workspace/src/AIWorkspace.tsx

@@ -0,0 +1,144 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect } from "react";
+import { BrowserRouter } from "react-router-dom";
+import { IntlProvider } from "react-intl";
+import {
+  AcrylicOrangeTheme,
+  AcrylicPurpleTheme,
+  ClassicTheme,
+  HighContrastTheme,
+  OxygenUIThemeProvider,
+  Box,
+  LinearProgress,
+  Stack,
+  Typography,
+} from "@wso2/oxygen-ui";
+
+import App from "./App";
+import "./styles.css";
+import { AUTH_MODE } from "./config.env";
+import { BASE_PATH } from "./paths";
+import { BFFAuthProvider } from "./contexts/BFFAuthProvider";
+import { useAppAuth } from "./contexts/AppAuthContext";
+import BasicAuthLoginPage from "./pages/login/BasicAuthLoginPage";
+import type { AIWorkspaceExtension } from "./extensions";
+
+function LoadingScreen({ message }: { message?: string }) {
+  return (
+    <Box
+      sx={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        p: 4,
+      }}
+    >
+      <Stack
+        spacing={2}
+        alignItems="center"
+        sx={{ maxWidth: 480, textAlign: "center" }}
+      >
+        {message && <Typography color="text.secondary">{message}</Typography>}
+        <Box sx={{ width: 200 }}>
+          <LinearProgress color="primary" />
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+function OIDCRedirect() {
+  const { login } = useAppAuth();
+  useEffect(() => {
+    void login();
+  }, [login]);
+  return <LoadingScreen message="Redirecting to sign in…" />;
+}
+
+function AppGate({
+  extensions,
+}: {
+  extensions: readonly AIWorkspaceExtension[];
+}) {
+  const { isAuthenticated, isLoading } = useAppAuth();
+  if (isLoading) return <LoadingScreen />;
+  if (!isAuthenticated) {
+    if (AUTH_MODE === "basic") {
+      return (
+        <BasicAuthLoginPage
+          onSuccess={() => {
+            const { pathname, search, hash } = window.location;
+            const route = pathname.startsWith(BASE_PATH)
+              ? pathname.slice(BASE_PATH.length)
+              : pathname;
+            window.location.replace(
+              route === "/login" || route === "/signin"
+                ? `${BASE_PATH}/`
+                : pathname + search + hash,
+            );
+          }}
+        />
+      );
+    }
+    return <OIDCRedirect />;
+  }
+  return (
+    <IntlProvider locale="en" defaultLocale="en">
+      <App extensions={extensions} />
+    </IntlProvider>
+  );
+}
+
+export type AIWorkspaceProps = {
+  extensions?: readonly AIWorkspaceExtension[];
+};
+
+export default function AIWorkspace({ extensions = [] }: AIWorkspaceProps) {
+  return (
+    <OxygenUIThemeProvider
+      themes={[
+        {
+          key: "acrylicOrange",
+          label: "Acrylic Orange Theme",
+          theme: AcrylicOrangeTheme,
+        },
+        {
+          key: "acrylicPurple",
+          label: "Acrylic Purple Theme",
+          theme: AcrylicPurpleTheme,
+        },
+        {
+          key: "highContrast",
+          label: "High Contrast Theme",
+          theme: HighContrastTheme,
+        },
+        { key: "classic", label: "Classic Theme", theme: ClassicTheme },
+      ]}
+      initialTheme="acrylicOrange"
+    >
+      <BrowserRouter basename={BASE_PATH}>
+        <BFFAuthProvider>
+          <AppGate extensions={extensions} />
+        </BFFAuthProvider>
+      </BrowserRouter>
+    </OxygenUIThemeProvider>
+  );
+}

portals/ai-workspace/src/App.tsx

@@ -85,6 +85,10 @@ import { ChoreoUserProvider } from './contexts/ChoreoUserContext';
 import { useAppAuth } from './contexts/AppAuthContext';
 import { Box, Button, Stack, Typography } from '@wso2/oxygen-ui';
 import OoopsImage from './assets/images/Ooops.svg';
+import {
+  ExtensionsProvider,
+  type AIWorkspaceExtension,
+} from './extensions';
 
 /**
  * Only allow same-origin relative paths as return URLs to prevent open redirects.
@@ -275,7 +279,17 @@ function WithPageBoundary({ children }: { children: React.ReactNode }) {
   return <RoutePageBoundary>{children}</RoutePageBoundary>;
 }
 
-export default function App() {
+export type AppProps = {
+  extensions?: readonly AIWorkspaceExtension[];
+};
+
+function WorkspaceRoutes({ extensions = [] }: AppProps) {
+  const extensionRoutes = extensions.map((extension) => (
+    <Route key={extension.id} path={extension.path} element={
+      <WithPageBoundary>{extension.element}</WithPageBoundary>
+    } />
+  ));
+
   return (
     <ChoreoUserProvider>
       <Routes>
@@ -592,6 +606,7 @@ export default function App() {
                 />
               </Route>
             </Route>
+            {extensionRoutes}
             <Route path="projects/:projectSlug" element={<ProjectShell />}>
               <Route index element={<Navigate to="home" replace />} />
               <Route
@@ -803,6 +818,7 @@ export default function App() {
                   />
                 </Route>
               </Route>
+              {extensionRoutes}
             </Route>
           </Route>
         </Route>
@@ -812,3 +828,11 @@ export default function App() {
     </ChoreoUserProvider>
   );
 }
+
+export default function App({ extensions = [] }: AppProps) {
+  return (
+    <ExtensionsProvider extensions={extensions}>
+      <WorkspaceRoutes extensions={extensions} />
+    </ExtensionsProvider>
+  );
+}

portals/ai-workspace/src/extensions.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { createContext, useContext } from 'react';
+
+export type AIWorkspaceExtension = {
+  id: string;
+  path: string;
+  label: string;
+  icon?: React.ReactNode;
+  element: React.ReactNode;
+};
+
+const ExtensionsContext = createContext<readonly AIWorkspaceExtension[]>([]);
+
+export function ExtensionsProvider({
+  extensions,
+  children,
+}: {
+  extensions: readonly AIWorkspaceExtension[];
+  children: React.ReactNode;
+}) {
+  return (
+    <ExtensionsContext.Provider value={extensions}>
+      {children}
+    </ExtensionsContext.Provider>
+  );
+}
+
+export function useAIWorkspaceExtensions(): readonly AIWorkspaceExtension[] {
+  return useContext(ExtensionsContext);
+}

portals/ai-workspace/src/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).
+ * Licensed under the Apache License, Version 2.0.
+ */
+
+export { default as App } from './App';
+export type { AppProps } from './App';
+export { default as AIWorkspace } from './AIWorkspace';
+export type { AIWorkspaceProps } from './AIWorkspace';
+export type { AIWorkspaceExtension } from './extensions';
+export { BASE_PATH } from './paths';

portals/ai-workspace/src/main.tsx

@@ -16,103 +16,12 @@
  * under the License.
  */
 
-import React, { useEffect } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import { IntlProvider } from 'react-intl';
-import {
-  AcrylicOrangeTheme, AcrylicPurpleTheme, ClassicTheme,
-  HighContrastTheme, OxygenUIThemeProvider,
-  Box, LinearProgress, Stack, Typography,
-} from '@wso2/oxygen-ui';
+import React from "react";
+import { createRoot } from "react-dom/client";
+import AIWorkspace from "./AIWorkspace";
 
-import App from './App.tsx';
-import './styles.css';
-import { AUTH_MODE } from './config.env';
-import { BASE_PATH } from './paths';
-import { BFFAuthProvider } from './contexts/BFFAuthProvider';
-import { useAppAuth } from './contexts/AppAuthContext';
-import BasicAuthLoginPage from './pages/login/BasicAuthLoginPage';
-
-// ── Loading screen ──────────────────────────────────────────────────────────
-
-function LoadingScreen({ message }: { message?: string }) {
-  return (
-    <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4 }}>
-      <Stack spacing={2} alignItems="center" sx={{ maxWidth: 480, textAlign: 'center' }}>
-        {message && <Typography color="text.secondary">{message}</Typography>}
-        <Box sx={{ width: 200 }}>
-          <LinearProgress color="primary" variant="indeterminate" />
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-// ── OIDC redirect — the BFF owns the handshake; we just navigate to it ─────────
-
-function OIDCRedirect() {
-  const { login } = useAppAuth();
-  useEffect(() => { void login(); }, [login]);
-  return <LoadingScreen message="Redirecting to sign in…" />;
-}
-
-// ── AppGate — decides login UX vs. the authenticated app ──────────────────────
-
-function AppGate() {
-  const { isAuthenticated, isLoading } = useAppAuth();
-
-  if (isLoading) {
-    return <LoadingScreen />;
-  }
-
-  if (!isAuthenticated) {
-    if (AUTH_MODE === 'basic') {
-      // On success the BFF has set the session cookie; reload to re-hydrate while
-      // preserving the path the user originally requested (matching OIDC return
-      // behaviour). Only avoid pinning to the login route itself.
-      return <BasicAuthLoginPage onSuccess={() => {
-        // window.location is outside the router, so these paths carry the base path
-        // (BrowserRouter's basename) and the fallback has to add it back.
-        const { pathname, search, hash } = window.location;
-        const route = pathname.startsWith(BASE_PATH) ? pathname.slice(BASE_PATH.length) : pathname;
-        const target = route === '/login' || route === '/signin'
-          ? `${BASE_PATH}/`
-          : pathname + search + hash;
-        window.location.replace(target);
-      }} />;
-    }
-    return <OIDCRedirect />;
-  }
-
-  return (
-    <IntlProvider locale="en" defaultLocale="en">
-      <App />
-    </IntlProvider>
-  );
-}
-
-// ── Entry point ───────────────────────────────────────────────────────────────
-
-const container = document.getElementById('root')!;
-const root = createRoot(container);
-
-root.render(
+createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <OxygenUIThemeProvider
-      themes={[
-        { key: 'acrylicOrange', label: 'Acrylic Orange Theme', theme: AcrylicOrangeTheme },
-        { key: 'acrylicPurple', label: 'Acrylic Purple Theme', theme: AcrylicPurpleTheme },
-        { key: 'highContrast', label: 'High Contrast Theme', theme: HighContrastTheme },
-        { key: 'classic', label: 'Classic Theme', theme: ClassicTheme },
-      ]}
-      initialTheme="acrylicOrange"
-    >
-      <BrowserRouter basename={BASE_PATH}>
-        <BFFAuthProvider>
-          <AppGate />
-        </BFFAuthProvider>
-      </BrowserRouter>
-    </OxygenUIThemeProvider>
-  </React.StrictMode>
+    <AIWorkspace />
+  </React.StrictMode>,
 );