@zolomedia/bifrost-client 1.7.74

package/L1_Foundation/bootstrap/prism_loader.js

@@ -0,0 +1,164 @@
+/**
+ * L1_Foundation/bootstrap/prism_loader.js
+ * 
+ * Prism.js loader with sequential loading (core → components → .zolo languages).
+ * Extracted from bifrost_client.js _loadPrismJS() and _loadPrismZolo().
+ */
+
+/**
+ * Load Prism.js from CDN for syntax highlighting
+ * 
+ * NOTE: Prism requires specific load order (core → components → .zolo languages)
+ * 
+ * @param {Object} logger - Logger instance for debug output
+ */
+export function loadPrismJS(logger) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  logger.debug('[Prism] Loading...');
+
+  const prismCDN = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
+  const prismTheme = `${prismCDN}/themes/prism-tomorrow.min.css`;
+  
+  // Check if Prism CSS already loaded
+  if (!document.querySelector(`link[href="${prismTheme}"]`)) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = prismTheme;
+    document.head.appendChild(link);
+    logger.debug('[Prism] CSS loaded (prism-tomorrow)');
+  } else {
+    logger.debug('Prism.js CSS already loaded');
+  }
+  
+  // Load custom .zolo theme overrides — bundled WITH the client (syntax/),
+  // resolved relative to this module so the zlsp palette ships built-in.
+  const zoloTheme = new URL('../../syntax/prism-zolo-theme.css', import.meta.url).href;
+  if (!document.querySelector(`link[href="${zoloTheme}"]`)) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = zoloTheme;
+    document.head.appendChild(link);
+    logger.debug('[Prism] .zolo custom theme loaded');
+  }
+
+  // Load Prism core + common languages
+  const scripts = [
+    { src: `${prismCDN}/prism.min.js`, name: 'core' },
+    { src: `${prismCDN}/components/prism-markup.min.js`, name: 'markup' },
+    { src: `${prismCDN}/components/prism-css.min.js`, name: 'css' },
+    { src: `${prismCDN}/components/prism-javascript.min.js`, name: 'javascript' },
+    { src: `${prismCDN}/components/prism-python.min.js`, name: 'python' },
+    { src: `${prismCDN}/components/prism-bash.min.js`, name: 'bash' },
+    { src: `${prismCDN}/components/prism-yaml.min.js`, name: 'yaml' }
+  ];
+
+  // Load scripts sequentially (Prism components depend on core)
+  const loadScript = (scriptInfo, index) => {
+    // Check if script already loaded
+    if (document.querySelector(`script[src="${scriptInfo.src}"]`)) {
+      // Already loaded, continue to next
+      logger.debug(`Prism ${scriptInfo.name} already loaded`);
+      if (index < scripts.length - 1) {
+        loadScript(scripts[index + 1], index + 1);
+      } else {
+        logger.debug('All Prism.js scripts already loaded');
+        loadPrismZolo(logger);
+      }
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = scriptInfo.src;
+    script.onload = () => {
+      // Load next script in sequence (silent)
+      if (index < scripts.length - 1) {
+        loadScript(scripts[index + 1], index + 1);
+      } else {
+        // Load custom .zolo language definition
+        loadPrismZolo(logger);
+      }
+    };
+    script.onerror = () => {
+      logger.warn(`Failed to load Prism ${scriptInfo.name}`);
+    };
+    document.head.appendChild(script);
+  };
+
+  // Start loading chain
+  loadScript(scripts[0], 0);
+}
+
+/**
+ * Load custom .zolo language definition for Prism.js
+ * @param {Object} logger - Logger instance
+ */
+function loadPrismZolo(logger) {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  logger.debug('Loading custom .zolo languages...');
+
+  // Keep dependency order deterministic: extensions rely on base "zolo".
+  const zoloLanguages = ['zolo', 'zspark', 'zui', 'zschema', 'zconfig', 'zenv'];
+  const totalLanguages = zoloLanguages.length;
+
+  // zolo grammars ship WITH the client (syntax/), not the host app. Resolve
+  // them relative to this module so every zApp gets zolo highlighting for free.
+  const syntaxBase = new URL('../../syntax/', import.meta.url).href;
+
+  const alreadyLoaded = zoloLanguages.every((lang) => window.Prism?.languages?.[lang]);
+  if (alreadyLoaded) {
+    logger.debug('Prism .zolo languages already loaded');
+    return;
+  }
+
+  const finishLoad = () => {
+    logger.debug('Prism.js loaded (7 languages + %s .zolo variants)', totalLanguages);
+
+    // Rehighlight ALL code blocks rendered before grammars loaded — covers
+    // zolo variants AND stock languages (bash, python, …) from zMD fences.
+    if (window.Prism) {
+      const codeBlocks = document.querySelectorAll('pre code[class*="language-"]');
+      if (codeBlocks.length > 0) {
+        logger.debug(`Rehighlighting ${codeBlocks.length} code blocks`);
+        codeBlocks.forEach(block => {
+          Prism.highlightElement(block);
+        });
+      }
+    }
+  };
+
+  const loadLanguageSequentially = (index) => {
+    if (index >= totalLanguages) {
+      finishLoad();
+      return;
+    }
+
+    const lang = zoloLanguages[index];
+    const scriptSrc = `${syntaxBase}prism-${lang}.js`;
+
+    // Check if already loaded
+    if (document.querySelector(`script[src="${scriptSrc}"]`)) {
+      logger.debug(`Prism ${lang} already loaded`);
+      loadLanguageSequentially(index + 1);
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = scriptSrc;
+    script.onload = () => {
+      loadLanguageSequentially(index + 1);
+    };
+    script.onerror = () => {
+      logger.debug(`[Prism] language file not found: ${scriptSrc} (skipped)`);
+      loadLanguageSequentially(index + 1);
+    };
+    document.head.appendChild(script);
+  };
+
+  loadLanguageSequentially(0);
+}

package/L1_Foundation/config/client_config.js

@@ -0,0 +1,110 @@
+/**
+ * L1_Foundation/config/client_config.js
+ * 
+ * Client configuration management, option validation, default values.
+ * Extracted from bifrost_client.js constructor logic.
+ */
+
+// Default values (mirror bifrost_constants.js TIMEOUTS)
+const RECONNECT_DELAY_DEFAULT = 3000;  // TIMEOUTS.RECONNECT_DELAY
+const REQUEST_TIMEOUT_DEFAULT = 30000; // TIMEOUTS.REQUEST_TIMEOUT
+
+/**
+ * ClientConfig - Manages BifrostClient configuration
+ */
+export class ClientConfig {
+  /**
+   * Parse and validate client options
+   * @param {Object} options - Raw options from constructor
+   * @returns {Object} Validated and normalized options
+   */
+  static parseOptions(options = {}) {
+    return {
+      autoConnect: options.autoConnect === true,
+      zTheme: options.zTheme !== false, // Default true
+      zThemeCDN: options.zThemeCDN || 'https://cdn.jsdelivr.net/gh/ZoloAi/zTheme@main/dist',
+      targetElement: options.targetElement || 'zVaF',
+      autoRequest: options.autoRequest || null,
+      autoReconnect: options.autoReconnect !== false, // Default true
+      reconnectDelay: typeof options.reconnectDelay === 'number' ? options.reconnectDelay : RECONNECT_DELAY_DEFAULT,
+      timeout: typeof options.timeout === 'number' ? options.timeout : REQUEST_TIMEOUT_DEFAULT,
+      debug: options.debug === true,
+      token: options.token || null,
+      hooks: options.hooks || {},
+      
+      // Walker-specific options
+      zVaFile: options.zVaFile || null,
+      zVaFolder: options.zVaFolder || null,
+      zBlock: options.zBlock || null,
+    };
+  }
+
+  /**
+   * Read zUI config from page (server-injected)
+   * @returns {Object} Parsed zUI config or empty object
+   */
+  static readZUIConfig() {
+    if (typeof document === 'undefined') {
+      return {};
+    }
+
+    const zuiConfigEl = document.getElementById('zui-config');
+    if (!zuiConfigEl) {
+      return {};
+    }
+
+    try {
+      return JSON.parse(zuiConfigEl.textContent);
+    } catch (e) {
+      console.error('[ClientConfig] Failed to parse zui-config:', e);
+      return {};
+    }
+  }
+
+  /**
+   * Auto-construct WebSocket URL from backend config
+   * @param {Object} zuiConfig - Parsed zUI config
+   * @returns {Object} { url, ssl_enabled }
+   */
+  static autoConstructURL(zuiConfig) {
+    const wsConfig = zuiConfig.websocket || {};
+    const protocol = wsConfig.ssl_enabled ? 'wss:' : 'ws:';
+    const wsHost = wsConfig.host || '127.0.0.1';
+    const wsPort = wsConfig.port || 8765;
+    const url = `${protocol}//${wsHost}:${wsPort}`;
+    
+    return {
+      url,
+      ssl_enabled: wsConfig.ssl_enabled || false
+    };
+  }
+
+  /**
+   * Validate WebSocket URL
+   * @param {string} url - URL to validate
+   * @throws {Error} If URL is invalid
+   */
+  static validateURL(url) {
+    if (typeof url !== 'string' || url.trim() === '') {
+      throw new Error('BifrostClient: URL must be a non-empty string');
+    }
+    if (!url.startsWith('ws://') && !url.startsWith('wss://')) {
+      throw new Error('BifrostClient: URL must start with ws:// or wss://');
+    }
+  }
+
+  /**
+   * Merge walker options from zUI config
+   * @param {Object} options - Current options
+   * @param {Object} zuiConfig - zUI config from page
+   * @returns {Object} Merged options
+   */
+  static mergeWalkerOptions(options, zuiConfig) {
+    return {
+      ...options,
+      zVaFile: options.zVaFile || zuiConfig.zVaFile || null,
+      zVaFolder: options.zVaFolder || zuiConfig.zVaFolder || null,
+      zBlock: options.zBlock || zuiConfig.zBlock || null,
+    };
+  }
+}

package/L1_Foundation/config/config.js

@@ -0,0 +1,7 @@
+/**
+ * L1_Foundation/config - Configuration Management
+ * 
+ * Client configuration, option validation, defaults.
+ */
+
+export { ClientConfig } from './client_config.js';

package/L1_Foundation/connection/connection.js

@@ -0,0 +1,8 @@
+/**
+ * L1_Foundation/connection - WebSocket Connection Management
+ * 
+ * Provides WebSocket connection management for BifrostClient.
+ * Handles connection lifecycle, auto-reconnect, and message routing.
+ */
+
+export { WebSocketConnection } from './websocket_connection.js';

package/L1_Foundation/connection/websocket_connection.js

@@ -0,0 +1,122 @@
+/**
+ * L1_Foundation/connection/websocket_connection.js
+ * 
+ * WebSocket Connection - Browser WebSocket Connection Management
+ * 
+ * Handles WebSocket connection lifecycle, auto-reconnect, and message routing.
+ * Extracted from bifrost_client.js inline stub (Task 0, Step 1.5)
+ * 
+ * @module connection/websocket_connection
+ * @layer L1 (Foundation)
+ */
+
+import { TIMEOUTS } from '../constants/bifrost_constants.js';
+
+export class WebSocketConnection {
+  constructor(url, logger, hooks, options = {}) {
+    this.url = url;
+    this.logger = logger;
+    this.hooks = hooks;
+    this.options = {
+      autoReconnect: options.autoReconnect !== false,
+      reconnectDelay: options.reconnectDelay || TIMEOUTS.RECONNECT_DELAY
+    };
+    this.ws = null;
+  }
+
+  /**
+   * Check if WebSocket is connected
+   * @returns {boolean}
+   */
+  isConnected() {
+    return this.ws && this.ws.readyState === WebSocket.OPEN;
+  }
+
+  /**
+   * Effective connect URL — appends the blue-green resume id (prior server
+   * full_session_id) when one is remembered, so a reconnect that lands on a
+   * swapped-in instance resumes the same session. No id (first connect / cleared
+   * storage) → the base URL, i.e. today's fresh-mint behavior.
+   * @returns {string}
+   */
+  _effectiveUrl() {
+    let url = this.url;
+    try {
+      const resumeId = (typeof sessionStorage !== 'undefined')
+        ? sessionStorage.getItem('zOS_resume_id') : null;
+      if (resumeId) {
+        url += (url.includes('?') ? '&' : '?') + 'zresume=' + encodeURIComponent(resumeId);
+      }
+    } catch (_) { /* storage unavailable — connect without resume */ }
+    return url;
+  }
+
+  /**
+   * Connect to WebSocket server
+   * @returns {Promise<void>}
+   */
+  async connect() {
+    return new Promise((resolve, reject) => {
+      this.ws = new WebSocket(this._effectiveUrl());
+      
+      this.ws.onopen = () => {
+        this.logger.info('Connected to server');
+        this.hooks.call('onConnected', { url: this.url });
+        resolve();
+      };
+      
+      this.ws.onerror = (error) => {
+        this.logger.error('WebSocket error:', error);
+        this.hooks.call('onError', error);
+        reject(error);
+      };
+      
+      this.ws.onclose = (event) => {
+        this.logger.info('Disconnected from server');
+        this.hooks.call('onDisconnected', event);
+        
+        // Auto-reconnect if enabled and connection was not cleanly closed
+        if (this.options.autoReconnect && !event.wasClean) {
+          setTimeout(() => {
+            this.logger.info('Attempting to reconnect...');
+            this.connect().catch(err => {
+              this.logger.error('Reconnect failed:', err);
+            });
+          }, this.options.reconnectDelay);
+        }
+      };
+    });
+  }
+
+  /**
+   * Disconnect from WebSocket server
+   */
+  disconnect() {
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  /**
+   * Send message to server
+   * @param {string} msg - Message to send (JSON string)
+   */
+  send(msg) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(msg);
+    } else {
+      this.logger.warn('Cannot send message: WebSocket not connected');
+    }
+  }
+
+  /**
+   * Set message handler callback
+   * @param {Function} callback - Callback function for incoming messages
+   */
+  onMessage(callback) {
+    if (this.ws) {
+      this.ws.onmessage = callback;
+    }
+  }
+}