fix: load Clerk browser bundle from CDN to enable mountSignIn in Electron

Agent-Logs-Url: https://github.com/highperformancecoder/minsky/sessions/d833ade0-d70c-484f-abc9-cb1e3ad7bda9

Co-authored-by: highperformancecoder <3075825+highperformancecoder@users.noreply.github.com>

Author: Copilot

gui-js/libs/core/src/lib/services/clerk/clerk.service.ts

@@ -1,9 +1,16 @@
 import { Injectable } from '@angular/core';
 import { ElectronService } from '../electron/electron.service';
 import { events } from '@minsky/shared';
-import { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js';
 import { AppConfig } from '@minsky/environment';
 
+declare global {
+  interface Window {
+    Clerk?: Clerk;
+    __clerk_publishable_key?: string;
+  }
+}
+
 @Injectable({
   providedIn: 'root',
 })
@@ -16,15 +23,56 @@ export class ClerkService {
   async initialize(): Promise<void> {
     if (this.initialized) return;
 
-    this.clerk = new Clerk(AppConfig.clerkPublishableKey);
-    // standardBrowser: true forces the UI component renderer to initialise even
-    // in non-standard browser contexts such as Electron (where environment
-    // detection may otherwise return false and leave #componentControls null,
-    // causing mountSignIn() to throw "Clerk was not loaded with Ui components").
-    await this.clerk.load({ standardBrowser: true });
+    // Load Clerk via its CDN browser bundle rather than the npm-imported module.
+    // The npm dist files (clerk.js / clerk.mjs) do not bundle the ClerkUI
+    // implementation, so clerk.mountSignIn() would always throw
+    // "Clerk was not loaded with Ui components" when called on an instance
+    // created with `new Clerk(key)` from the npm package.
+    // The browser bundle served from Clerk's CDN lazily loads the UI chunks
+    // (React-based pre-built components) from the same CDN origin, enabling
+    // mountSignIn() to work correctly.
+    await this.loadClerkBrowserBundle();
+    this.clerk = window.Clerk!;
+    await this.clerk.load();
     this.initialized = true;
   }
 
+  /**
+   * Dynamically injects Clerk's CDN browser bundle script into the document.
+   * The CDN URL is derived from the publishable key's embedded frontendApi.
+   * Returns a Promise that resolves once the script has loaded and
+   * window.Clerk has been set by the bundle.
+   */
+  private loadClerkBrowserBundle(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      if (window.Clerk) {
+        resolve();
+        return;
+      }
+
+      const pk = AppConfig.clerkPublishableKey;
+      // Publishable key format: pk_<type>_<base64(frontendApi + '$')>
+      const encoded = pk.split('_')[2] ?? '';
+      const padded = encoded + '='.repeat((4 - (encoded.length % 4)) % 4);
+      let frontendApi: string;
+      try {
+        frontendApi = atob(padded).replace(/\$$/, '');
+      } catch {
+        reject(new Error('Invalid Clerk publishable key'));
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.src = `https://${frontendApi}/npm/@clerk/clerk-js@latest/dist/clerk.browser.js`;
+      script.setAttribute('data-clerk-publishable-key', pk);
+      script.async = true;
+      script.onload = () => resolve();
+      script.onerror = () =>
+        reject(new Error('Failed to load Clerk authentication service'));
+      document.head.appendChild(script);
+    });
+  }
+
   async isSignedIn(): Promise<boolean> {
     if (!this.clerk) return false;
     return !!this.clerk.user;
@@ -35,7 +83,7 @@ export class ClerkService {
     return await this.clerk.session.getToken();
   }
 
-  mountSignIn(element: HTMLElement): void {
+  mountSignIn(element: HTMLDivElement): void {
     if (!this.clerk) throw new Error('Clerk is not initialized.');
     this.clerk.mountSignIn(element);
   }