@mixofreality-studio/archistrator-platform-framework-web 0.1.0

package/dist/components/UserProfile.d.ts

@@ -0,0 +1,31 @@
+/**
+ * UserProfile component displays user avatar and menu with sign out option.
+ *
+ * Differences from the gtd-specific version:
+ * - Navigation callbacks (onCreateOrg, onSelectOrganization) are props instead
+ *   of react-router-dom `useNavigate()` calls, removing the router dependency.
+ * - `accountUrl` is a prop instead of a hardcoded Keycloak/GTD URL.
+ * - UI test-id strings are inlined from the `User` namespace of UIIdentifiers
+ *   rather than imported from the gtd constants file.
+ */
+import { type ReactNode } from 'react';
+import type { UserInfo } from '../types/UserInfo.js';
+export interface UserProfileProps {
+    user: UserInfo;
+    /**
+     * URL to the identity-provider account management page.
+     * Opened in a new tab when the user clicks their name/email in the menu.
+     */
+    accountUrl: string;
+    /**
+     * Called when the user clicks "Create Organization".
+     * The host app is responsible for navigation.
+     */
+    onCreateOrg: () => void;
+    /**
+     * Called when the user selects an organization to switch to.
+     * Receives the organization ID.
+     */
+    onSelectOrganization: (orgId: string) => void;
+}
+export declare function UserProfile({ user, accountUrl, onCreateOrg, onSelectOrganization, }: UserProfileProps): ReactNode;

package/dist/components/UserProfile.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * UserProfile component displays user avatar and menu with sign out option.
+ *
+ * Differences from the gtd-specific version:
+ * - Navigation callbacks (onCreateOrg, onSelectOrganization) are props instead
+ *   of react-router-dom `useNavigate()` calls, removing the router dependency.
+ * - `accountUrl` is a prop instead of a hardcoded Keycloak/GTD URL.
+ * - UI test-id strings are inlined from the `User` namespace of UIIdentifiers
+ *   rather than imported from the gtd constants file.
+ */
+import { useState } from 'react';
+import { IconButton, Avatar, Menu, MenuItem, ListItemIcon, ListItemText, Divider, Typography, Dialog, DialogTitle, DialogContent, List, ListItem, ListItemButton, Box, } from '@mui/material';
+import { Logout as LogoutIcon, AccountCircle as AccountCircleIcon, SwapHoriz as SwapHorizIcon, Business as BusinessIcon, AddBusiness as AddBusinessIcon, } from '@mui/icons-material';
+// Inline test-id strings (mirrors gtd UIIdentifiers.User namespace)
+const USER_TEST_IDS = {
+    PROFILE_BUTTON: 'user-profile-button',
+    PROFILE_MENU: 'user-profile-menu',
+    ACCOUNT_BUTTON: 'user-account-button',
+    SWITCH_ORG_BUTTON: 'user-switch-org-button',
+    CREATE_ORG_BUTTON: 'user-create-org-button',
+    ORG_SWITCH_DIALOG: 'user-org-switch-dialog',
+    orgSwitchOption: (orgId) => `user-org-switch-option-${orgId}`,
+    LOGOUT_BUTTON: 'user-logout-button',
+};
+/**
+ * Get user initials from name or email.
+ * Returns up to 2 characters for the avatar.
+ */
+function getUserInitials(user) {
+    if (user.name !== undefined && user.name !== '') {
+        const parts = user.name.trim().split(/\s+/);
+        const firstPart = parts[0];
+        const lastPart = parts[parts.length - 1];
+        if (parts.length >= 2 && firstPart !== undefined && lastPart !== undefined) {
+            const firstInitial = firstPart[0] ?? '';
+            const lastInitial = lastPart[0] ?? '';
+            return `${firstInitial}${lastInitial}`.toUpperCase();
+        }
+        return user.name.substring(0, 2).toUpperCase();
+    }
+    if (user.email !== undefined && user.email !== '') {
+        return user.email.substring(0, 2).toUpperCase();
+    }
+    return 'U';
+}
+export function UserProfile({ user, accountUrl, onCreateOrg, onSelectOrganization, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [orgDialogOpen, setOrgDialogOpen] = useState(false);
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSignOut = () => {
+        window.location.href = '/logout';
+    };
+    const handleAccountClick = () => {
+        window.open(accountUrl, '_blank', 'noopener,noreferrer');
+        handleClose();
+    };
+    const handleSwitchOrgClick = () => {
+        setOrgDialogOpen(true);
+        handleClose();
+    };
+    const handleCreateOrgClick = () => {
+        handleClose();
+        onCreateOrg();
+    };
+    const handleOrgDialogClose = () => {
+        setOrgDialogOpen(false);
+    };
+    const handleSelectOrganization = (orgId) => {
+        setOrgDialogOpen(false);
+        onSelectOrganization(orgId);
+    };
+    const displayName = user.name ?? user.email ?? 'User';
+    const displayEmail = user.email;
+    const orgEntries = Object.entries(user.organization ?? {});
+    const hasMultipleOrgs = orgEntries.length > 1;
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-controls": open ? 'user-menu' : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": "true", "aria-label": "user profile", "data-testid": USER_TEST_IDS.PROFILE_BUTTON, size: "small", onClick: handleClick, children: _jsx(Avatar, { alt: displayName, sx: { width: 32, height: 32 }, children: getUserInitials(user) }) }), _jsxs(Menu, { anchorEl: anchorEl, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, "data-testid": USER_TEST_IDS.PROFILE_MENU, id: "user-menu", open: open, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                }, onClose: handleClose, children: [_jsxs(MenuItem, { "data-testid": USER_TEST_IDS.ACCOUNT_BUTTON, onClick: handleAccountClick, children: [_jsx(ListItemIcon, { children: _jsx(AccountCircleIcon, { fontSize: "small" }) }), _jsx(ListItemText, { primary: displayName, secondary: displayEmail, slotProps: {
+                                    primary: { variant: 'body2', fontWeight: 'medium' },
+                                    secondary: { variant: 'caption' },
+                                } })] }), _jsx(Divider, {}), hasMultipleOrgs ? _jsxs(MenuItem, { "data-testid": USER_TEST_IDS.SWITCH_ORG_BUTTON, onClick: handleSwitchOrgClick, children: [_jsx(ListItemIcon, { children: _jsx(SwapHorizIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "body2", children: "Switch Organization" }) })] }) : null, _jsxs(MenuItem, { "data-testid": USER_TEST_IDS.CREATE_ORG_BUTTON, onClick: handleCreateOrgClick, children: [_jsx(ListItemIcon, { children: _jsx(AddBusinessIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "body2", children: "Create Organization" }) })] }), _jsxs(MenuItem, { "data-testid": USER_TEST_IDS.LOGOUT_BUTTON, onClick: handleSignOut, children: [_jsx(ListItemIcon, { children: _jsx(LogoutIcon, { fontSize: "small" }) }), _jsx(ListItemText, { children: _jsx(Typography, { variant: "body2", children: "Sign Out" }) })] })] }), _jsxs(Dialog, { "data-testid": USER_TEST_IDS.ORG_SWITCH_DIALOG, open: orgDialogOpen, onClose: handleOrgDialogClose, children: [_jsx(DialogTitle, { children: "Switch Organization" }), _jsx(DialogContent, { children: _jsx(List, { sx: { minWidth: 300 }, children: orgEntries.map(([orgName, orgDetails]) => (_jsx(ListItem, { disablePadding: true, children: _jsxs(ListItemButton, { "data-testid": USER_TEST_IDS.orgSwitchOption(orgDetails.id), onClick: () => {
+                                        handleSelectOrganization(orgDetails.id);
+                                    }, children: [_jsx(ListItemIcon, { children: _jsx(BusinessIcon, { color: "primary" }) }), _jsx(Box, { sx: { flexGrow: 1 }, children: _jsx(Typography, { variant: "body1", children: orgName }) })] }) }, orgDetails.id))) }) })] })] }));
+}

package/dist/context/UserContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * UserContext provides user authentication information to the application.
+ * Fetches user info from /api/userinfo on mount and provides it via context.
+ * The server returns mock user data in local mode.
+ */
+import { type ReactNode } from 'react';
+interface UserProviderProps {
+    children: ReactNode;
+}
+export declare function UserProvider({ children }: UserProviderProps): ReactNode;
+export {};

package/dist/context/UserContext.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * UserContext provides user authentication information to the application.
+ * Fetches user info from /api/userinfo on mount and provides it via context.
+ * The server returns mock user data in local mode.
+ */
+import { useState, useEffect } from 'react';
+import { Box, CircularProgress, Alert, Button, Typography } from '@mui/material';
+import { UserContext } from './UserContextDefinition.js';
+export function UserProvider({ children }) {
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const fetchUserInfo = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch('/api/userinfo', {
+                headers: { 'Accept': 'application/json' },
+            });
+            if (!response.ok) {
+                if (response.status === 401) {
+                    // Session expired or not authenticated — reload to trigger Envoy OIDC redirect
+                    window.location.reload();
+                    return;
+                }
+                throw new Error(`Failed to fetch user info: ${response.status.toString()} ${response.statusText}`);
+            }
+            const userData = (await response.json());
+            setUser(userData);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+            setError(errorMessage);
+            console.error('Error fetching user info:', err);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        void fetchUserInfo();
+    }, []);
+    // Loading state - show centered spinner
+    if (loading) {
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                minHeight: '100vh',
+            }, children: _jsx(CircularProgress, {}) }));
+    }
+    // Error state - show error alert with retry button
+    if ((error !== null && error !== '') || user === null) {
+        return (_jsx(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                alignItems: 'center',
+                minHeight: '100vh',
+                gap: 2,
+                p: 3,
+            }, children: _jsxs(Alert, { severity: "error", sx: { maxWidth: 600 }, children: [_jsx(Typography, { gutterBottom: true, variant: "h6", children: "Failed to Load User Information" }), _jsx(Typography, { sx: { mb: 2 }, variant: "body2", children: error ?? 'User information not available' }), _jsx(Button, { variant: "contained", onClick: () => {
+                            void fetchUserInfo();
+                        }, children: "Retry" })] }) }));
+    }
+    // Success - provide user via context
+    return _jsx(UserContext.Provider, { value: { user }, children: children });
+}

package/dist/context/UserContextDefinition.d.ts

@@ -0,0 +1,9 @@
+/**
+ * User Context Definition
+ * Separate file for context to satisfy react-refresh/only-export-components
+ */
+import type { UserInfo } from '../types/UserInfo.js';
+export interface UserContextValue {
+    user: UserInfo;
+}
+export declare const UserContext: import("react").Context<UserContextValue | undefined>;

package/dist/context/UserContextDefinition.js

@@ -0,0 +1,6 @@
+/**
+ * User Context Definition
+ * Separate file for context to satisfy react-refresh/only-export-components
+ */
+import { createContext } from 'react';
+export const UserContext = createContext(undefined);

package/dist/hooks/useUser.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to access the current user from context.
+ */
+import type { UserContextValue } from '../context/UserContextDefinition.js';
+/**
+ * Hook to access the current user from context.
+ * Must be used within a UserProvider.
+ */
+export declare function useUser(): UserContextValue;

package/dist/hooks/useUser.js

@@ -0,0 +1,16 @@
+/**
+ * Hook to access the current user from context.
+ */
+import { useContext } from 'react';
+import { UserContext } from '../context/UserContextDefinition.js';
+/**
+ * Hook to access the current user from context.
+ * Must be used within a UserProvider.
+ */
+export function useUser() {
+    const context = useContext(UserContext);
+    if (context === undefined) {
+        throw new Error('useUser must be used within a UserProvider');
+    }
+    return context;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { setupTelemetry } from './telemetry.js';
+export * from './types/UserInfo.js';
+export { UserProvider } from './context/UserContext.js';
+export { UserContext } from './context/UserContextDefinition.js';
+export type { UserContextValue } from './context/UserContextDefinition.js';
+export { useUser } from './hooks/useUser.js';
+export { UserProfile } from './components/UserProfile.js';
+export type { UserProfileProps } from './components/UserProfile.js';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { setupTelemetry } from './telemetry.js';
+export * from './types/UserInfo.js';
+export { UserProvider } from './context/UserContext.js';
+export { UserContext } from './context/UserContextDefinition.js';
+export { useUser } from './hooks/useUser.js';
+export { UserProfile } from './components/UserProfile.js';

package/dist/telemetry.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Initialises OpenTelemetry tracing and logging for a web application.
+ *
+ * Call this once at app startup (e.g. from main.tsx / index.tsx).
+ * Telemetry is only active when `mode === 'production'`; in dev/test the
+ * function returns immediately to avoid failed OTLP export calls.
+ *
+ * @param serviceName - The OTel service.name attribute (e.g. 'archistrator-webapp').
+ * @param mode        - The build mode string; pass `import.meta.env.MODE` from
+ *                      the consuming app. Defaults to `'development'`.
+ */
+export declare function setupTelemetry(serviceName: string, mode?: string): void;

package/dist/telemetry.js

@@ -0,0 +1,132 @@
+import { BatchSpanProcessor, WebTracerProvider, } from '@opentelemetry/sdk-trace-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
+import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { resourceFromAttributes } from '@opentelemetry/resources';
+import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
+import { LoggerProvider, BatchLogRecordProcessor, } from '@opentelemetry/sdk-logs';
+import { OTLPLogExporter } from '@opentelemetry/exporter-logs-otlp-http';
+/**
+ * Initialises OpenTelemetry tracing and logging for a web application.
+ *
+ * Call this once at app startup (e.g. from main.tsx / index.tsx).
+ * Telemetry is only active when `mode === 'production'`; in dev/test the
+ * function returns immediately to avoid failed OTLP export calls.
+ *
+ * @param serviceName - The OTel service.name attribute (e.g. 'archistrator-webapp').
+ * @param mode        - The build mode string; pass `import.meta.env.MODE` from
+ *                      the consuming app. Defaults to `'development'`.
+ */
+export function setupTelemetry(serviceName, mode = 'development') {
+    if (mode !== 'production') {
+        return;
+    }
+    const resource = resourceFromAttributes({
+        [ATTR_SERVICE_NAME]: serviceName,
+        'deployment.environment.name': mode,
+    });
+    // --- Traces ---
+    const traceExporter = new OTLPTraceExporter({
+        url: '/otlp/v1/traces',
+    });
+    const tracerProvider = new WebTracerProvider({
+        resource,
+        spanProcessors: [new BatchSpanProcessor(traceExporter)],
+    });
+    tracerProvider.register();
+    registerInstrumentations({
+        instrumentations: [
+            new FetchInstrumentation({
+                ignoreUrls: [/\/otlp\//],
+            }),
+            new DocumentLoadInstrumentation(),
+        ],
+    });
+    // --- Logs ---
+    const logExporter = new OTLPLogExporter({
+        url: '/otlp/v1/logs',
+    });
+    const loggerProvider = new LoggerProvider({
+        resource,
+        processors: [new BatchLogRecordProcessor(logExporter)],
+    });
+    const logger = loggerProvider.getLogger(serviceName);
+    // --- Global error capture ---
+    window.addEventListener('error', (event) => {
+        const err = event.error;
+        logger.emit({
+            severityText: 'ERROR',
+            body: event.message,
+            attributes: {
+                'exception.type': err instanceof Error ? err.name : 'Error',
+                'exception.message': event.message,
+                'exception.stacktrace': err instanceof Error ? (err.stack ?? '') : '',
+                'code.filepath': event.filename,
+                'code.lineno': event.lineno,
+                'code.column': event.colno,
+            },
+        });
+    });
+    window.addEventListener('unhandledrejection', (event) => {
+        const reason = event.reason;
+        const message = reason instanceof Error ? reason.message : String(reason);
+        logger.emit({
+            severityText: 'ERROR',
+            body: `Unhandled promise rejection: ${message}`,
+            attributes: {
+                'exception.type': reason instanceof Error ? reason.name : 'UnhandledRejection',
+                'exception.message': message,
+                'exception.stacktrace': reason instanceof Error ? (reason.stack ?? '') : '',
+            },
+        });
+    });
+    // --- Fetch error logging ---
+    const originalFetch = window.fetch;
+    window.fetch = async (...args) => {
+        const url = args[0] instanceof Request ? args[0].url : String(args[0]);
+        // Don't log telemetry export failures (avoid recursion)
+        if (url.includes('/otlp/')) {
+            return originalFetch(...args);
+        }
+        const callsite = new Error();
+        try {
+            const response = await originalFetch(...args);
+            if (!response.ok) {
+                logger.emit({
+                    severityText: 'ERROR',
+                    body: `HTTP ${String(response.status)} ${response.statusText} — ${args[1]?.method ?? 'GET'} ${url}`,
+                    attributes: {
+                        'http.request.method': args[1]?.method ?? 'GET',
+                        'url.full': url,
+                        'http.response.status_code': response.status,
+                        'exception.stacktrace': callsite.stack ?? '',
+                    },
+                });
+            }
+            return response;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error(String(err));
+            logger.emit({
+                severityText: 'ERROR',
+                body: `Fetch failed — ${args[1]?.method ?? 'GET'} ${url}: ${error.message}`,
+                attributes: {
+                    'http.request.method': args[1]?.method ?? 'GET',
+                    'url.full': url,
+                    'exception.type': error.name,
+                    'exception.message': error.message,
+                    'exception.stacktrace': callsite.stack ?? '',
+                },
+            });
+            throw err;
+        }
+    };
+    // Flush buffered telemetry when user navigates away
+    document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden') {
+            void tracerProvider.forceFlush();
+            void loggerProvider.forceFlush();
+        }
+    });
+}

package/dist/types/UserInfo.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Represents an organization entry in the user's organization map.
+ */
+export interface OrganizationEntry {
+    id: string;
+    [key: string]: string | string[];
+}
+/**
+ * Map of organization names to their details.
+ */
+export type OrganizationMap = Record<string, OrganizationEntry>;
+export interface UserInfo {
+    sub: string;
+    email?: string;
+    name?: string;
+    preferred_username?: string;
+    picture?: string;
+    email_verified?: boolean;
+    organization?: OrganizationMap;
+}
+/**
+ * Extracts the first organization ID from the user's organization map.
+ * Returns 'default' if no organizations are present.
+ */
+export declare function getFirstOrganizationId(user: UserInfo): string;

package/dist/types/UserInfo.js

@@ -0,0 +1,16 @@
+/**
+ * Extracts the first organization ID from the user's organization map.
+ * Returns 'default' if no organizations are present.
+ */
+export function getFirstOrganizationId(user) {
+    if (user.organization === undefined) {
+        return 'default';
+    }
+    const orgNames = Object.keys(user.organization);
+    const firstName = orgNames[0];
+    if (firstName === undefined) {
+        return 'default';
+    }
+    const firstOrg = user.organization[firstName];
+    return firstOrg?.id ?? 'default';
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@mixofreality-studio/archistrator-platform-framework-web",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mixofreality-studio/archistrator-platform.git",
+    "directory": "web"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@mui/material": ">=7.0.0",
+    "@mui/icons-material": ">=7.0.0",
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "dependencies": {
+    "@opentelemetry/exporter-logs-otlp-http": "^0.212.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.212.0",
+    "@opentelemetry/instrumentation": "^0.212.0",
+    "@opentelemetry/instrumentation-document-load": "^0.56.0",
+    "@opentelemetry/instrumentation-fetch": "^0.212.0",
+    "@opentelemetry/resources": "^2.5.1",
+    "@opentelemetry/sdk-logs": "^0.212.0",
+    "@opentelemetry/sdk-trace-web": "^2.5.1",
+    "@opentelemetry/semantic-conventions": "^1.39.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@mui/material": "^7.3.6",
+    "@mui/icons-material": "^7.3.6",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}