@rimori/client 1.1.10 → 1.3.0

package/src/plugin/Logger.ts

@@ -0,0 +1,324 @@
+import { RimoriClient } from './RimoriClient';
+import html2canvas from 'html2canvas';
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+interface LogEntry {
+  id: string;
+  timestamp: string;
+  level: LogLevel;
+  message: string;
+  data?: any;
+  context?: {
+    url: string;
+    userAgent: string;
+    browserInfo: BrowserInfo;
+    screenshot?: string;
+    mousePosition?: MousePosition;
+  };
+}
+
+interface BrowserInfo {
+  userAgent: string;
+  language: string;
+  cookieEnabled: boolean;
+  onLine: boolean;
+  screenResolution: string;
+  windowSize: string;
+  timestamp: string;
+}
+
+interface MousePosition {
+  x: number;
+  y: number;
+  timestamp: string;
+}
+
+/**
+ * Singleton Logger class for Rimori client plugins.
+ * Handles all logging levels, production filtering, and log transmission to Rimori.
+ * Overrides console methods globally for seamless integration.
+ */
+export class Logger {
+  private static instance: Logger;
+  private isProduction: boolean;
+  private logs: LogEntry[] = [];
+  private logIdCounter = 0;
+  private originalConsole: {
+    log: typeof console.log;
+    info: typeof console.info;
+    warn: typeof console.warn;
+    error: typeof console.error;
+    debug: typeof console.debug;
+  };
+  private mousePosition: MousePosition | null = null;
+
+  private constructor(rimori: RimoriClient, isProduction?: boolean) {
+    this.isProduction = this.validateIsProduction(isProduction);
+
+    // Store original console methods
+    this.originalConsole = {
+      log: console.log,
+      info: console.info,
+      warn: console.warn,
+      error: console.error,
+      debug: console.debug
+    };
+
+    // Override console methods globally
+    this.overrideConsoleMethods();
+
+    // Track mouse position
+    this.trackMousePosition();
+
+    // Expose logs to global scope for DevTools access
+    this.exposeToDevTools();
+
+    // Set up navigation clearing
+    this.setupNavigationClearing();
+
+    rimori.event.respond('logging.requestPluginLogs', async () => {
+      this.addLogEntry(await this.createLogEntry('info', 'Screenshot capture', undefined, true));
+      const logs = {
+        logs: this.logs,
+        pluginId: rimori.plugin.pluginId,
+        timestamp: new Date().toISOString()
+      }
+      this.logs = [];
+      this.logIdCounter = 0;
+      return logs;
+    });
+  }
+
+  /**
+   * Initialize the Logger singleton and override console methods globally.
+   * @param rimori - Rimori client instance
+   * @param isProduction - Whether the environment is production
+   * @returns Logger instance
+   */
+  public static getInstance(rimori: RimoriClient, isProduction?: boolean): Logger {
+    if (!Logger.instance) {
+      Logger.instance = new Logger(rimori, isProduction);
+    }
+    return Logger.instance;
+  }
+
+  private validateIsProduction(isProduction?: boolean): boolean {
+    if (isProduction !== undefined) {
+      return isProduction;
+    }
+    if (typeof window !== 'undefined' && window.location.href) {
+      return !window.location.href.includes('localhost');
+    }
+    return true;
+  }
+  /**
+   * Expose log access to global scope for DevTools console access.
+   */
+  private exposeToDevTools(): void {
+    if (typeof window !== 'undefined') {
+      // Expose a global function to access logs from DevTools console
+      (window as any).getRimoriLogs = () => this.logs;
+    }
+  }
+
+  /**
+   * Set up navigation event listeners to clear logs on page changes.
+   */
+  private setupNavigationClearing(): void {
+    if (typeof window === 'undefined' || typeof history === 'undefined') return;
+
+    // Clear logs on browser back/forward
+    window.addEventListener('popstate', () => this.logs = []);
+
+    // Override history methods to clear logs on programmatic navigation
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    history.pushState = (...args) => {
+      originalPushState.apply(history, args);
+      this.logs = [];
+    };
+
+    history.replaceState = (...args) => {
+      originalReplaceState.apply(history, args);
+      this.logs = [];
+    };
+
+    // Listen for URL changes (works with React Router and other SPAs)
+    let currentUrl = window.location.href;
+    const checkUrlChange = () => {
+      if (window.location.href !== currentUrl) {
+        currentUrl = window.location.href;
+        this.logs = [];
+      }
+    };
+
+    // Check for URL changes periodically
+    setInterval(checkUrlChange, 100);
+
+    // Also listen for hash changes (for hash-based routing)
+    window.addEventListener('hashchange', () => this.logs = []);
+  }
+
+  /**
+   * Override console methods globally to capture all console calls.
+   */
+  private overrideConsoleMethods(): void {
+    // Override console.log
+    console.log = (...args: any[]) => {
+      this.originalConsole.log(...args);
+      this.handleConsoleCall('info', args);
+    };
+
+    // Override console.info
+    console.info = (...args: any[]) => {
+      this.originalConsole.info(...args);
+      this.handleConsoleCall('info', args);
+    };
+
+    // Override console.warn
+    console.warn = (...args: any[]) => {
+      this.originalConsole.warn(...args);
+      this.handleConsoleCall('warn', args);
+    };
+
+    // Override console.error
+    console.error = (...args: any[]) => {
+      this.originalConsole.error(...args);
+      this.handleConsoleCall('error', args);
+    };
+
+    // Override console.debug
+    console.debug = (...args: any[]) => {
+      this.originalConsole.debug(...args);
+      this.handleConsoleCall('debug', args);
+    };
+  }
+
+  /**
+   * Track mouse position for screenshot context.
+   */
+  private trackMousePosition(): void {
+    if (typeof window !== 'undefined') {
+      const updateMousePosition = (event: MouseEvent) => {
+        this.mousePosition = {
+          x: event.clientX,
+          y: event.clientY,
+          timestamp: new Date().toISOString()
+        };
+      };
+
+      window.addEventListener('mousemove', updateMousePosition);
+      window.addEventListener('click', updateMousePosition);
+    }
+  }
+
+  /**
+   * Handle console method calls and create log entries.
+   * @param level - Log level
+   * @param args - Console arguments
+   */
+  private async handleConsoleCall(level: LogLevel, args: any[]): Promise<void> {
+    // Skip if this is a production log that shouldn't be stored
+    if (this.isProduction && (level === 'debug' || level === 'info')) {
+      return;
+    }
+
+    // Convert console arguments to message and data
+    const message = args.map(arg =>
+      typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
+    ).join(' ');
+
+    const data = args.length > 1 ? args.slice(1) : undefined;
+
+    const entry = await this.createLogEntry(level, message, data);
+    this.addLogEntry(entry);
+  }
+
+  /**
+   * Get browser and system information for debugging.
+   * @returns Object with browser and system information
+   */
+  private getBrowserInfo(): BrowserInfo {
+    return {
+      userAgent: navigator.userAgent,
+      language: navigator.language,
+      cookieEnabled: navigator.cookieEnabled,
+      onLine: navigator.onLine,
+      screenResolution: `${screen.width}x${screen.height}`,
+      windowSize: `${window.innerWidth}x${window.innerHeight}`,
+      timestamp: new Date().toISOString()
+    };
+  }
+
+  /**
+   * Capture a screenshot of the current page.
+   * @returns Promise resolving to base64 screenshot or null if failed
+   */
+  private async captureScreenshot(): Promise<string | null> {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      const canvas = await html2canvas(document.body);
+      const screenshot = canvas.toDataURL('image/png');
+      // this.originalConsole.log("screenshot captured", screenshot)
+      return screenshot;
+    }
+    return null;
+  }
+
+  /**
+   * Create a log entry with context information.
+   * @param level - Log level
+   * @param message - Log message
+   * @param data - Additional data
+   * @returns Log entry
+   */
+  private async createLogEntry(level: LogLevel, message: string, data?: any, forceScreenshot?: boolean): Promise<LogEntry> {
+    const context: Partial<LogEntry['context']> = {};
+
+    // Add URL if available
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+      return {
+        id: `log_${++this.logIdCounter}_${Date.now()}`,
+        timestamp: new Date().toISOString(),
+        level,
+        message,
+        data,
+      }
+    }
+
+    context.url = window.location.href;
+
+    // Add browser info (this method now handles worker context internally)
+    context.browserInfo = this.getBrowserInfo();
+    context.userAgent = context.browserInfo.userAgent;
+
+    // Add screenshot and mouse position if level is error or warn
+    if (level === 'error' || level === 'warn' || forceScreenshot) {
+      context.screenshot = await this.captureScreenshot() || undefined;
+      context.mousePosition = this.mousePosition || undefined;
+    }
+
+    return {
+      id: `log_${++this.logIdCounter}_${Date.now()}`,
+      timestamp: new Date().toISOString(),
+      level,
+      message,
+      data,
+      context: context as LogEntry['context']
+    };
+  }
+
+  /**
+   * Add a log entry to the internal log array.
+   * @param entry - Log entry to add
+   */
+  private addLogEntry(entry: LogEntry): void {
+    this.logs.push(entry);
+
+    // Maintain log size limit (1000 entries)
+    if (this.logs.length > 1000) {
+      this.logs = this.logs.slice(-1000);
+    }
+  }
+}

package/src/plugin/PluginController.ts

@@ -1,59 +1,135 @@
-import { AuthSessionMissingError, createClient, SupabaseClient } from '@supabase/supabase-js';
-import { EventBus, EventBusMessage } from './fromRimori/EventBus';
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import { UserInfo } from '../core/controller/SettingsController';
+import { EventBus, EventBusMessage } from '../fromRimori/EventBus';
+import { ActivePlugin, Plugin } from '../fromRimori/PluginTypes';
 import { RimoriClient } from "./RimoriClient";
-import { setTheme } from './ThemeSetter';
 import { StandaloneClient } from './StandaloneClient';
+import { setTheme } from './ThemeSetter';
+import { Logger } from './Logger';
 
 // Add declaration for WorkerGlobalScope
 declare const WorkerGlobalScope: any;
 
-interface SupabaseInfo {
+export interface RimoriInfo {
   url: string,
   key: string,
+  backendUrl: string,
   token: string,
   expiration: Date,
   tablePrefix: string,
   pluginId: string
+  installedPlugins: Plugin[]
+  profile: UserInfo
+  mainPanelPlugin?: ActivePlugin
+  sidePanelPlugin?: ActivePlugin
 }
 
 export class PluginController {
   private static client: RimoriClient;
   private static instance: PluginController;
-  private communicationSecret: string | null = null;
+  private port: MessagePort | null = null;
+  private queryParams: Record<string, string> = {};
   private supabase: SupabaseClient | null = null;
-  private supabaseInfo: SupabaseInfo | null = null;
+  private rimoriInfo: RimoriInfo | null = null;
   private pluginId: string;
+  private isMessageChannelReady: boolean = false;
+  private pendingRequests: Array<() => void> = [];
 
   private constructor(pluginId: string, standalone: boolean) {
     this.pluginId = pluginId;
     this.getClient = this.getClient.bind(this);
 
     if (typeof WorkerGlobalScope === 'undefined') {
-      setTheme();
+      // In standalone mode, use URL fallback. In iframe mode, theme will be set after MessageChannel init
+      if (standalone) {
+        setTheme();
+      }
     }
 
-    //no need to forward messages to parent in standalone mode
+    //no need to forward messages to parent in standalone mode or worker context
     if (standalone) return;
-    
-    window.addEventListener("message", (event) => {
-      // console.log("client: message received", event);
-      const { topic, sender, data, eventId } = event.data.event as EventBusMessage;
-
-      // skip forwarding messages from own plugin
-      if (sender === pluginId) return;
-
-      EventBus.emit(sender, topic, data, eventId);
-    });
-
-    const secret = this.getSecret();
-
-    EventBus.on("*", (event) => {
-      // skip messages which are not from the own plugin
-      if (event.sender !== this.pluginId) return;
-      if (event.topic.startsWith("self.")) return;
-      // console.log("sending event to parent", event);
-      window.parent.postMessage({ event, secret }, "*")
-    });
+
+    this.initMessageChannel(typeof WorkerGlobalScope !== 'undefined');
+  }
+
+  private initMessageChannel(worker: boolean = false) {
+    const listener = (event: MessageEvent) => {
+      console.log("[PluginController] window message", { origin: event.origin, data: event.data });
+      const { type, pluginId, queryParams, rimoriInfo } = event.data || {};
+      const [transferredPort] = event.ports || [];
+
+      if (type !== "rimori:init" || !transferredPort || pluginId !== this.pluginId) {
+        console.log("[PluginController] message ignored (not init or wrong plugin)", { type, pluginId, hasPort: !!transferredPort });
+        return;
+      }
+
+      this.queryParams = queryParams || {};
+      this.port = transferredPort;
+
+      // Initialize Supabase client immediately with provided info
+      if (rimoriInfo) {
+        this.rimoriInfo = rimoriInfo;
+        this.supabase = createClient(rimoriInfo.url, rimoriInfo.key, {
+          accessToken: () => Promise.resolve(rimoriInfo.token)
+        });
+      }
+
+      // Handle messages from parent
+      this.port.onmessage = ({ data }) => {
+        const { event, type, eventId, response, error } = data || {};
+
+        // no idea why this is needed but it works for now
+        if (type === 'response' && eventId) {
+          EventBus.emit(this.pluginId, response.topic, response.data, eventId);
+        } else if (type === 'error' && eventId) {
+          EventBus.emit(this.pluginId, 'error', { error }, eventId);
+        } else if (event) {
+          const { topic, sender, data: eventData, eventId } = event as EventBusMessage;
+          if (sender !== this.pluginId) {
+            EventBus.emit(sender, topic, eventData, eventId);
+          }
+        }
+      };
+
+      // Set theme from MessageChannel query params
+      if (!worker) {
+        const theme = this.queryParams['rm_theme'];
+        setTheme(theme);
+      }
+
+      // Forward plugin events to parent (only after MessageChannel is ready)
+      EventBus.on("*", (ev) => {
+        if (ev.sender === this.pluginId && !ev.topic.startsWith("self.")) {
+          this.port?.postMessage({ event: ev });
+        }
+      });
+
+      // Mark MessageChannel as ready and process pending requests
+      this.isMessageChannelReady = true;
+
+      // Process any pending requests
+      this.pendingRequests.forEach(request => request());
+      this.pendingRequests = [];
+    };
+    if (worker) {
+      self.onmessage = listener;
+    } else {
+      window.addEventListener("message", listener);
+    }
+    this.sendHello(worker);
+  }
+
+  private sendHello(isWorker: boolean = false) {
+    try {
+      const payload = { type: "rimori:hello", pluginId: this.pluginId };
+      if (isWorker) {
+        self.postMessage(payload);
+      } else {
+        window.parent.postMessage(payload, "*");
+      }
+    } catch (e) {
+      console.error("[PluginController] Error sending hello:", e);
+    }
   }
 
   public static async getInstance(pluginId: string, standalone = false): Promise<RimoriClient> {
@@ -63,62 +139,126 @@ export class PluginController {
       }
       PluginController.instance = new PluginController(pluginId, standalone);
       PluginController.client = await RimoriClient.getInstance(PluginController.instance);
+
+      //only init logger in workers and on main plugin pages
+      if (PluginController.instance.getQueryParam("applicationMode") !== "sidebar") {
+        Logger.getInstance(PluginController.client);
+      }
     }
     return PluginController.client;
   }
 
-  private getSecret(): string | null {
-    if (!this.communicationSecret) {
-      const secret = new URLSearchParams(window.location.search).get("secret");
-      if (!secret) {
-        console.info("Communication secret not found in URL as query parameter");
-      }
-      this.communicationSecret = secret;
-    }
-    return this.communicationSecret;
+  public getQueryParam(key: string): string | null {
+    return this.queryParams[key] || null;
   }
 
-  public async getClient(): Promise<{ supabase: SupabaseClient, tablePrefix: string, pluginId: string }> {
-    if (
-      this.supabase &&
-      this.supabaseInfo &&
-      this.supabaseInfo.expiration > new Date()
-    ) {
-      return { supabase: this.supabase, tablePrefix: this.supabaseInfo.tablePrefix, pluginId: this.supabaseInfo.pluginId };
+  public async getClient(): Promise<{ supabase: SupabaseClient, info: RimoriInfo }> {
+    // Return cached client if valid
+    if (this.supabase && this.rimoriInfo && this.rimoriInfo.expiration > new Date()) {
+      return { supabase: this.supabase, info: this.rimoriInfo };
     }
 
-    const { data } = await EventBus.request<SupabaseInfo>(this.pluginId, "global.supabase.requestAccess");
-    this.supabaseInfo = data;
-    this.supabase = createClient(this.supabaseInfo.url, this.supabaseInfo.key, {
-      accessToken: () => Promise.resolve(this.getToken())
-    });
+    // If MessageChannel is not ready yet, queue the request
+    if (!this.isMessageChannelReady) {
+      return new Promise<{ supabase: SupabaseClient, info: RimoriInfo }>((resolve) => {
+        this.pendingRequests.push(async () => {
+          const result = await this.getClient();
+          resolve(result);
+        });
+      });
+    }
 
-    return { supabase: this.supabase, tablePrefix: this.supabaseInfo.tablePrefix, pluginId: this.supabaseInfo.pluginId };
-  }
+    // If we have rimoriInfo from MessageChannel init, use it directly
+    if (this.rimoriInfo && this.supabase) {
+      return { supabase: this.supabase, info: this.rimoriInfo };
+    }
+
+    // Fallback: request from parent
+    if (!this.rimoriInfo) {
+      if (typeof WorkerGlobalScope !== 'undefined') {
+        // In worker context, send request via self.postMessage to WorkerHandler
+        const eventId = Math.floor(Math.random() * 1000000000);
+        const requestEvent = {
+          event: {
+            timestamp: new Date().toISOString(),
+            eventId,
+            sender: this.pluginId,
+            topic: 'global.supabase.requestAccess',
+            data: {},
+            debug: false
+          }
+        };
+
+        return new Promise<{ supabase: SupabaseClient, info: RimoriInfo }>((resolve) => {
+          // Listen for the response
+          const originalOnMessage = self.onmessage;
+          self.onmessage = (event) => {
+            if (event.data?.topic === 'global.supabase.requestAccess' && event.data?.eventId === eventId) {
+              this.rimoriInfo = event.data.data;
+              this.supabase = createClient(this.rimoriInfo!.url, this.rimoriInfo!.key, {
+                accessToken: () => Promise.resolve(this.getToken())
+              });
+              self.onmessage = originalOnMessage; // Restore original handler
+              resolve({ supabase: this.supabase, info: this.rimoriInfo! });
+            } else if (originalOnMessage) {
+              originalOnMessage.call(self, event);
+            }
+          };
 
-  public async getToken() {
-    if (this.supabaseInfo && this.supabaseInfo.expiration && this.supabaseInfo.expiration > new Date()) {
-      return this.supabaseInfo.token;
+          // Send the request
+          self.postMessage(requestEvent);
+        });
+      } else {
+        // In main thread context, use EventBus
+        const { data } = await EventBus.request<RimoriInfo>(this.pluginId, "global.supabase.requestAccess");
+        this.rimoriInfo = data;
+        this.supabase = createClient(this.rimoriInfo.url, this.rimoriInfo.key, {
+          accessToken: () => Promise.resolve(this.getToken())
+        });
+      }
     }
 
-    const { data } = await EventBus.request<{ token: string, expiration: Date }>(this.pluginId, "global.supabase.requestAccess");
+    return { supabase: this.supabase!, info: this.rimoriInfo };
+  }
 
-    if (!this.supabaseInfo) {
-      throw new Error("Supabase info not found");
+  public async getToken(): Promise<string> {
+    if (this.rimoriInfo && this.rimoriInfo.expiration && this.rimoriInfo.expiration > new Date()) {
+      return this.rimoriInfo.token;
+    }
+
+    // If we don't have rimoriInfo, request it
+    if (!this.rimoriInfo) {
+      const { data } = await EventBus.request<RimoriInfo>(this.pluginId, "global.supabase.requestAccess");
+      this.rimoriInfo = data;
+      return this.rimoriInfo.token;
     }
 
-    this.supabaseInfo.token = data.token;
-    this.supabaseInfo.expiration = data.expiration;
+    // If token is expired, request fresh access
+    const { data } = await EventBus.request<{ token: string, expiration: Date }>(this.pluginId, "global.supabase.requestAccess");
+    this.rimoriInfo.token = data.token;
+    this.rimoriInfo.expiration = data.expiration;
 
-    return this.supabaseInfo.token;
+    return this.rimoriInfo.token;
   }
 
+  /**
+   * Gets the Supabase URL.
+   * @returns The Supabase URL.
+   * @deprecated All endpoints should use the backend URL instead.
+   */
   public getSupabaseUrl() {
-    if (!this.supabaseInfo) {
+    if (!this.rimoriInfo) {
       throw new Error("Supabase info not found");
     }
 
-    return this.supabaseInfo.url;
+    return this.rimoriInfo.url;
+  }
+
+  public getBackendUrl() {
+    if (!this.rimoriInfo) {
+      throw new Error("Rimori info not found");
+    }
+    return this.rimoriInfo.backendUrl;
   }
 
   public getGlobalEventTopic(preliminaryTopic: string) {
@@ -138,7 +278,7 @@ export class PluginController {
       throw new Error(`The event topic must consist of 3 parts. <pluginId>.<topic area>.<action>. Received: ${preliminaryTopic}`);
     }
 
-    const topicRoot = this.supabaseInfo?.pluginId ?? "global";
+    const topicRoot = this.rimoriInfo?.pluginId ?? "global";
     return `${topicRoot}.${preliminaryTopic}`;
   }