Add Mode2Svelte - advanced SvelteKit implementation

- Created Mode2Svelte as a copy of Mode1Svelte
- Updated branding (title, description) to distinguish from Mode1Svelte
- Added Mode2Svelte support to orchestrator
- Configured orchestrator to spawn Mode2Svelte with Node.js adapter
- Set Mode2Svelte as active mode in activeMode.txt
- Built production bundle for Mode2Svelte
- Both Mode1Svelte and Mode2Svelte now managed by orchestrator on port 3005
- Orchestrator controls which mode runs via activeMode.txt configuration

Mode2Svelte/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

Mode2Svelte/src/lib/auth/backend.ts

@@ -0,0 +1,204 @@
+import { config } from 'dotenv';
+import { ConfidentialClientApplication } from '@azure/msal-node';
+import PocketBase from 'pocketbase';
+import type { GraphTokenCache, BackendAuthConfig } from './types';
+
+// Load environment variables from shared secrets directory
+config({ path: '/home/admin/secrets/.env' });
+
+/**
+ * Configuration Manager
+ * Exposes frontend-safe configuration loaded from environment
+ */
+export class AuthConfigManager {
+  /**
+   * Get frontend configuration (safe to expose to browser)
+   */
+  static getFrontendConfig() {
+    return {
+      pbUrl: process.env.PB_URL!,
+      provider: 'microsoft',
+      collection: 'Users',
+    };
+  }
+
+  /**
+   * Get all backend secrets (never expose to frontend)
+   */
+  static getBackendConfig() {
+    return {
+      clientId: process.env.CLIENT_ID!,
+      tenantId: process.env.TENANT_ID!,
+      clientSecret: process.env.CLIENT_SECRET!,
+      pbDb: process.env.PB_DB!,
+    };
+  }
+}
+
+/**
+ * Microsoft Graph Token Management (Backend)
+ * Handles token acquisition and caching for backend Graph API calls
+ */
+export class GraphTokenManager {
+  private cca: ConfidentialClientApplication;
+  private cache: GraphTokenCache | null = null;
+  private config: Required<BackendAuthConfig>;
+
+  constructor(config: BackendAuthConfig) {
+    this.config = {
+      clientId: config.clientId || process.env.CLIENT_ID || '',
+      tenantId: config.tenantId || process.env.TENANT_ID || '',
+      clientSecret: config.clientSecret || process.env.CLIENT_SECRET || '',
+    };
+
+    this.cca = new ConfidentialClientApplication({
+      auth: {
+        clientId: this.config.clientId,
+        authority: `https://login.microsoftonline.com/${this.config.tenantId}`,
+        clientSecret: this.config.clientSecret,
+      },
+    });
+  }
+
+  /**
+   * Get Graph token (from cache or acquire new)
+   */
+  async getToken(): Promise<string> {
+    const now = Date.now();
+
+    // Check cache validity (with 60s buffer for expiration)
+    if (this.cache && this.cache.expiresOn - 60000 > now) {
+      return this.cache.token;
+    }
+
+    try {
+      const result = await this.cca.acquireTokenByClientCredential({
+        scopes: ['https://graph.microsoft.com/.default'],
+      });
+
+      if (!result?.accessToken) {
+        throw new Error('Failed to acquire Graph token');
+      }
+
+      const expiresOn = result.expiresOn
+        ? new Date(result.expiresOn).getTime()
+        : now + 55 * 60 * 1000; // Default 55 minutes
+
+      this.cache = {
+        token: result.accessToken,
+        expiresOn,
+      };
+
+      return result.accessToken;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      throw new Error(`Failed to acquire Graph token: ${message}`);
+    }
+  }
+
+  /**
+   * Get token with expiration info
+   */
+  async getTokenWithExpiry(): Promise<{ token: string; expiresOnISO: string }> {
+    const token = await this.getToken();
+    const expiresOn = this.cache?.expiresOn || Date.now();
+    return {
+      token,
+      expiresOnISO: new Date(expiresOn).toISOString(),
+    };
+  }
+
+  /**
+   * Check if token is cached and valid
+   */
+  isTokenValid(): boolean {
+    if (!this.cache) return false;
+    const now = Date.now();
+    return this.cache.expiresOn - 60000 > now;
+  }
+
+  /**
+   * Clear cache (force refresh on next call)
+   */
+  clearCache(): void {
+    this.cache = null;
+  }
+}
+
+/**
+ * PocketBase Token Validation (Backend)
+ * Validates and uses user PocketBase tokens
+ */
+export class PocketBaseValidator {
+  private pb: PocketBase;
+
+  constructor(pbUrl?: string) {
+    this.pb = new PocketBase(pbUrl || process.env.PB_DB!);
+  }
+
+  /**
+   * Set user token and validate it
+   */
+  async validateUserToken(token: string): Promise<boolean> {
+    try {
+      this.pb.authStore.save(token, null);
+      await this.pb.collection('Users').authRefresh();
+      return true;
+    } catch (error) {
+      console.error('Token validation failed:', error instanceof Error ? error.message : error);
+      return false;
+    }
+  }
+
+  /**
+   * Get user record from token
+   */
+  async getUserRecord(token: string): Promise<any> {
+    try {
+      this.pb.authStore.save(token, null);
+      const record = this.pb.authStore.record || this.pb.authStore.model;
+      return record;
+    } catch (error) {
+      console.error('Failed to get user record:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Get PocketBase instance
+   */
+  getPocketBase(): PocketBase {
+    return this.pb;
+  }
+}
+
+/**
+ * Combined backend auth manager
+ */
+export class BackendAuth {
+  graphTokenManager: GraphTokenManager;
+  pbValidator: PocketBaseValidator;
+
+  constructor(config: BackendAuthConfig, pbUrl?: string) {
+    this.graphTokenManager = new GraphTokenManager(config);
+    this.pbValidator = new PocketBaseValidator(pbUrl);
+  }
+
+  /**
+   * Middleware to validate PocketBase token in requests
+   * Usage: app.use('/*', (c, next) => backendAuth.validateTokenMiddleware(c, next))
+   */
+  async validateTokenMiddleware(c: any, next: any): Promise<any> {
+    const token = c.req.header('Authorization')?.replace('Bearer ', '') ||
+                  (await c.req.json().catch(() => ({})))?.pbToken;
+
+    if (token) {
+      const isValid = await this.pbValidator.validateUserToken(token);
+      if (!isValid) {
+        return c.json({ error: 'Invalid token' }, 401);
+      }
+    }
+
+    return next();
+  }
+}

Mode2Svelte/src/lib/auth/frontend.ts

@@ -0,0 +1,250 @@
+import PocketBase from 'pocketbase';
+import type { AuthConfig, AuthState, AuthCallbacks } from './types';
+
+/**
+ * PocketBase OAuth2 Frontend Module
+ * Handles user authentication and token management
+ */
+export class PocketBaseAuth {
+  private pb: PocketBase;
+  private config: Required<AuthConfig>;
+  private callbacks: AuthCallbacks;
+  private state: AuthState;
+
+  constructor(config: AuthConfig, callbacks?: Partial<AuthCallbacks>) {
+    this.config = {
+      pbUrl: config.pbUrl!,
+      collection: config.collection || 'Users',
+      provider: config.provider || 'microsoft',
+      loginContainerId: config.loginContainerId || 'loginContainer',
+      userDisplayNameId: config.userDisplayNameId || 'userDisplayName',
+      userEmailId: config.userEmailId || 'userEmailValue',
+      loginBtnId: config.loginBtnId || 'loginBtn',
+      loginErrorId: config.loginErrorId || 'loginError',
+    };
+
+    this.callbacks = {
+      onAuthSuccess: callbacks?.onAuthSuccess || (() => {}),
+      onAuthFailure: callbacks?.onAuthFailure || (() => {}),
+      onTokenUpdate: callbacks?.onTokenUpdate || (() => {}),
+      onUiUpdate: callbacks?.onUiUpdate || (() => {}),
+    };
+
+    this.pb = new PocketBase(this.config.pbUrl);
+    this.state = {
+      isAuthenticated: false,
+      user: null,
+      token: null,
+    };
+
+    this.init();
+  }
+
+  /**
+   * Initialize auth module
+   */
+  private init(): void {
+    this.updateAuthUI();
+    if (this.pb.authStore.isValid && this.pb.authStore.token) {
+      this.ensureUserLogged();
+    }
+    this.setupLoginButton();
+  }
+
+  /**
+   * Setup login button click handler
+   */
+  private setupLoginButton(): void {
+    const loginBtn = document.getElementById(this.config.loginBtnId);
+    if (!loginBtn) {
+      console.warn(`Login button with id "${this.config.loginBtnId}" not found`);
+      return;
+    }
+
+    loginBtn.addEventListener('click', async (e) => {
+      e.preventDefault();
+      await this.handleLogin();
+    });
+  }
+
+  /**
+   * Handle login button click
+   */
+  private async handleLogin(): Promise<void> {
+    const loginBtn = document.getElementById(this.config.loginBtnId) as HTMLButtonElement;
+    const loginError = document.getElementById(this.config.loginErrorId) as HTMLElement;
+
+    if (!loginBtn || !loginError) return;
+
+    loginBtn.disabled = true;
+    loginBtn.textContent = 'Checking session...';
+    loginError.classList.add('hidden');
+
+    try {
+      // Try to use existing token first
+      const hadToken = await this.ensureUserLogged();
+      if (hadToken) {
+        this.resetLoginButton();
+        return;
+      }
+
+      // Otherwise perform OAuth
+      loginBtn.textContent = 'Logging in...';
+      const authData = await this.pb.collection(this.config.collection).authWithOAuth2({
+        provider: this.config.provider,
+      });
+
+      this.updateState(authData);
+      this.updateAuthUI();
+      this.callbacks.onAuthSuccess?.(this.state);
+
+      console.log('✓ Logged in with', this.config.provider);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      console.error('Login failed:', message);
+      loginError.textContent = `Login failed: ${message}`;
+      loginError.classList.remove('hidden');
+      this.callbacks.onAuthFailure?.(error);
+    } finally {
+      this.resetLoginButton();
+    }
+  }
+
+  /**
+   * Ensure user is logged in (check existing token)
+   */
+  async ensureUserLogged(): Promise<boolean> {
+    if (!this.pb.authStore.isValid || !this.pb.authStore.token) {
+      return false;
+    }
+
+    try {
+      const refresh = await this.pb.collection(this.config.collection).authRefresh();
+      this.updateState(refresh);
+      this.updateAuthUI();
+      this.callbacks.onTokenUpdate?.(this.state);
+      console.log('✓ Token refreshed');
+      return true;
+    } catch (error) {
+      console.warn('Existing token invalid, clearing auth');
+      this.pb.authStore.clear();
+      this.updateState(null);
+      this.updateAuthUI();
+      return false;
+    }
+  }
+
+  /**
+   * Update internal auth state
+   */
+  private updateState(data: any): void {
+    if (!data) {
+      this.state = {
+        isAuthenticated: false,
+        user: null,
+        token: null,
+      };
+      return;
+    }
+
+    const record = data.record || this.pb.authStore.record || this.pb.authStore.model;
+    const meta = data.meta || {};
+    const model = this.pb.authStore.model;
+
+    this.state = {
+      isAuthenticated: true,
+      user: {
+        id: record?.id || model?.id || 'unknown',
+        name: record?.name || model?.name || meta?.name || record?.email || model?.email || 'Unknown User',
+        email: record?.email || model?.email || meta?.email || '(no email)',
+      },
+      token: this.pb.authStore.token,
+    };
+  }
+
+  /**
+   * Update UI based on auth state
+   */
+  updateAuthUI(): void {
+    const loginContainer = document.getElementById(this.config.loginContainerId);
+    const userDisplayName = document.getElementById(this.config.userDisplayNameId);
+    const userEmail = document.getElementById(this.config.userEmailId);
+
+    if (!loginContainer) return;
+
+    if (this.pb.authStore.isValid) {
+      loginContainer.classList.add('hidden');
+      if (this.state.user) {
+        if (userDisplayName) userDisplayName.textContent = this.state.user.name;
+        if (userEmail) userEmail.textContent = this.state.user.email;
+      }
+    } else {
+      loginContainer.classList.remove('hidden');
+      const loginError = document.getElementById(this.config.loginErrorId);
+      if (loginError) loginError.classList.add('hidden');
+    }
+
+    this.callbacks.onUiUpdate?.(this.state);
+  }
+
+  /**
+   * Check token status (for verification/display)
+   */
+  async checkTokenStatus(): Promise<{ pbToken: boolean; tokenExpiry?: string }> {
+    const pbToken = !!this.pb.authStore.token;
+    return { pbToken };
+  }
+
+  /**
+   * Get current auth state
+   */
+  getAuthState(): AuthState {
+    return { ...this.state };
+  }
+
+  /**
+   * Get PocketBase instance (for direct usage if needed)
+   */
+  getPocketBase(): PocketBase {
+    return this.pb;
+  }
+
+  /**
+   * Logout
+   */
+  logout(): void {
+    this.pb.authStore.clear();
+    this.updateState(null);
+    this.updateAuthUI();
+    console.log('✓ Logged out');
+  }
+
+  /**
+   * Reset login button to initial state
+   */
+  private resetLoginButton(): void {
+    const loginBtn = document.getElementById(this.config.loginBtnId) as HTMLButtonElement;
+    if (loginBtn) {
+      loginBtn.disabled = false;
+      loginBtn.textContent = 'Login with Microsoft';
+    }
+  }
+}
+
+/**
+ * Quick init function - fetches config from backend
+ */
+export async function initPocketBaseAuth(
+  backendUrl: string,
+  callbacks?: Partial<AuthCallbacks>
+): Promise<PocketBaseAuth> {
+  // Fetch frontend config from backend
+  const response = await fetch(`${backendUrl}/api/auth/config`);
+  if (!response.ok) {
+    throw new Error('Failed to fetch auth configuration from backend');
+  }
+  const config = await response.json();
+  
+  const auth = new PocketBaseAuth(config, callbacks);
+  return auth;
+}

Mode2Svelte/src/lib/auth/types.ts

@@ -0,0 +1,62 @@
+/**
+ * Frontend Auth Configuration
+ */
+export interface AuthConfig {
+  pbUrl: string;              // PocketBase URL (required)
+  collection?: string;
+  provider?: string;
+  loginContainerId?: string;
+  userDisplayNameId?: string;
+  userEmailId?: string;
+  loginBtnId?: string;
+  loginErrorId?: string;
+}
+
+/**
+ * Frontend configuration provided by backend
+ */
+export interface FrontendConfig {
+  pbUrl: string;
+  provider?: string;
+  collection?: string;
+}
+
+/**
+ * Backend Auth Configuration
+ */
+export interface BackendAuthConfig {
+  clientId?: string;
+  tenantId?: string;
+  clientSecret?: string;
+}
+
+/**
+ * Auth state object
+ */
+export interface AuthState {
+  isAuthenticated: boolean;
+  user: {
+    id: string;
+    name: string;
+    email: string;
+  } | null;
+  token: string | null;
+}
+
+/**
+ * Graph token cache object
+ */
+export interface GraphTokenCache {
+  token: string;
+  expiresOn: number;
+}
+
+/**
+ * Auth event callbacks
+ */
+export interface AuthCallbacks {
+  onAuthSuccess?: (state: AuthState) => void;
+  onAuthFailure?: (error: any) => void;
+  onTokenUpdate?: (state: AuthState) => void;
+  onUiUpdate?: (state: AuthState) => void;
+}

Mode2Svelte/src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.