arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/modules/HTMLImport.js

@@ -1,3 +1,8 @@
+import {
+  createArcaneEventSource,
+  projectArcaneDOMEvent
+} from 'arcane-os/event-manager';
+
 const htmlImportHostRegistryKey=Symbol.for('arcane.html-import.hosts');
 const htmlImportHostRegistry=globalThis[htmlImportHostRegistryKey] instanceof Map
   ?globalThis[htmlImportHostRegistryKey]
@@ -7,7 +12,24 @@ globalThis[htmlImportHostRegistryKey]=htmlImportHostRegistry;
 
 let htmlImportScriptId=0;
 
+function samePropertyDescriptor(left,right){
+  if(!left||!right)return left===right;
+  return left.configurable===right.configurable
+    &&left.enumerable===right.enumerable
+    &&left.writable===right.writable
+    &&left.value===right.value
+    &&left.get===right.get
+    &&left.set===right.set;
+}
+
 class HTMLImport extends HTMLElement {
+  #connectionGeneration=0;
+  #eventOwner=Object.freeze({kind:'html-import-lifecycle-owner'});
+  #events;
+  #importedDestroy=null;
+  #loadController=null;
+  #loadTask=Promise.resolve();
+
   ready=false;
 
   constructor() {
@@ -15,12 +37,40 @@ class HTMLImport extends HTMLElement {
       this.attachShadow({ mode: 'open' });
   }
 
-  async connectedCallback() {
+  #createEvents(){
+      this.#events=createArcaneEventSource(this.#eventOwner,{
+        source:'html-import',
+        eventTypes:Object.freeze([
+          'html-import-error',
+          'html-import-ready'
+        ])
+      });
+      return this.#events;
+  }
+
+  connectedCallback() {
+    const generation=++this.#connectionGeneration;
+    const controller=new AbortController();
     this.ready=false;
+    this.#loadController?.abort('html-import-load-superseded');
+    this.#loadController=controller;
+    const previous=this.#loadTask;
+    const task=Promise.resolve(previous)
+      .catch(()=>{})
+      .then(()=>this.#connect(generation,controller));
+    this.#loadTask=task;
+    return task;
+  }
+
+  async #connect(generation,controller){
+    if(!this.#isCurrentConnection(generation,controller))return;
+    if(!this.#events||this.#events.disposed)this.#createEvents();
     const href=this.getAttribute('href');
     let resolvedHref='';
+    const operationId=`html-import-load-${this.#events.instanceId}-${generation}`;
     if(!href){
       console.log('no href provided for html-import tag',this);
+      this.#loadController=null;
       return;
     }
 
@@ -35,46 +85,167 @@ class HTMLImport extends HTMLElement {
         cache:'default',
         credentials:'same-origin',
         method:'GET',
-        redirect:'error'
+        redirect:'error',
+        signal:controller.signal
       });
-      await this.#loadHTML(href,resolvedHref,response);
+      if(!this.#isCurrentConnection(generation,controller))return;
+      await this.#loadHTML(href,resolvedHref,response,generation,controller,operationId);
     }catch(err){
+      if(!this.#isCurrentConnection(generation,controller)){
+        await this.#destroyImportedHost();
+        return;
+      }
       console.error('Error loading HTML component:',err);
-      this.dispatchEvent(new CustomEvent('html-import-error',{
-        bubbles:true,
-        composed:true,
-        detail:{
+      const detail=Object.freeze({
           code:'HTML_IMPORT_FAILED',
           href,
           message:'The component could not be loaded.',
+          reason:'component-import-rejected',
           resolvedHref
+      });
+      const {occurrence}=this.#events.dispatch(
+        'html-import-error',
+        detail,
+        {
+          operationId,
+          publicDetail:Object.freeze({code:detail.code,reason:detail.reason})
         }
-      }));
+      );
+      projectArcaneDOMEvent(this,occurrence,{
+        bubbles:true,
+        composed:true
+      });
+      await this.#destroyImportedHost();
+    }finally{
+      if(this.#loadController===controller)this.#loadController=null;
+    }
+  }
+
+  disconnectedCallback(){
+    this.ready=false;
+    ++this.#connectionGeneration;
+    this.#loadController?.abort('html-import-disconnected');
+    this.#loadController=null;
+    const events=this.#events;
+    const previous=this.#loadTask;
+    const immediateTeardown=this.#destroyImportedHost();
+    const task=Promise.allSettled([previous,immediateTeardown]).then(()=>{
+      events?.dispose();
+      if(this.#events===events)this.#events=null;
+    });
+    this.#loadTask=task;
+    return task;
+  }
+
+  #isCurrentConnection(generation,controller){
+    return this.isConnected
+      &&generation===this.#connectionGeneration
+      &&this.#loadController===controller
+      &&!controller.signal.aborted;
+  }
+
+  #reportImportedDestroyError(error,{events,href,operationId}){
+    console.error('Error destroying imported HTML component:',error);
+    if(!events||events.disposed)return;
+    const detail=Object.freeze({
+      code:'HTML_IMPORT_IMPORTED_COMPONENT_DESTROY_REJECTED',
+      href,
+      message:'The imported component could not be destroyed.',
+      reason:'imported-component-destroy-rejected'
+    });
+    const {occurrence}=events.dispatch(
+      'html-import-error',
+      detail,
+      {
+        operationId,
+        publicDetail:Object.freeze({code:detail.code,reason:detail.reason})
+      }
+    );
+    projectArcaneDOMEvent(this,occurrence,{
+      bubbles:true,
+      composed:true
+    });
+  }
+
+  #restoreImportedDestroy(record){
+    const current=Object.getOwnPropertyDescriptor(this,'destroy')??null;
+    if(!samePropertyDescriptor(current,record.installedDescriptor))return false;
+    if(record.previousDescriptor){
+      Object.defineProperty(this,'destroy',record.previousDescriptor);
+    }else{
+      delete this.destroy;
+    }
+    return true;
+  }
+
+  #destroyImportedHost(){
+    const record=this.#importedDestroy;
+    if(!record)return Promise.resolve(false);
+    this.#importedDestroy=null;
+    const events=this.#events;
+    const generation=this.#connectionGeneration;
+    const reportContext={
+      events,
+      href:this.getAttribute('href')||'',
+      operationId:events
+        ?`html-import-destroy-${events.instanceId}-${generation}`
+        :null
+    };
+    let result;
+    try{
+      result=record.destroy.call(this);
+    }catch(error){
+      this.#reportImportedDestroyError(error,reportContext);
+      this.#restoreImportedDestroy(record);
+      return Promise.resolve(false);
     }
+    return Promise.resolve(result)
+      .then(
+        ()=>true,
+        error=>{
+          this.#reportImportedDestroyError(error,reportContext);
+          return false;
+        }
+      )
+      .finally(()=>this.#restoreImportedDestroy(record));
   }
 
-  async #loadHTML(href,resolvedHref,response){
+  async #loadHTML(href,resolvedHref,response,generation,controller,operationId){
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
 
     const html = await response.text();
+    if(!this.#isCurrentConnection(generation,controller))return false;
+    await this.#destroyImportedHost();
+    if(!this.#isCurrentConnection(generation,controller))return false;
     this.shadowRoot.innerHTML = html;
 
     await this.#executeScripts();
+    if(!this.#isCurrentConnection(generation,controller)){
+      await this.#destroyImportedHost();
+      return false;
+    }
 
     this.ready=true;
-    this.dispatchEvent(new CustomEvent('html-import-ready',{
+    const {occurrence}=this.#events.dispatch(
+      'html-import-ready',
+      Object.freeze({href,resolvedHref}),
+      {operationId,publicDetail:Object.freeze({ready:true})}
+    );
+    projectArcaneDOMEvent(this,occurrence,{
       bubbles:true,
-      composed:true,
-      detail:{href,resolvedHref}
-    }));
+      composed:true
+    });
     return true;
   }
 
   async #executeScripts() {
     const scripts = Array.from(this.shadowRoot.querySelectorAll('script'));
-    for(const script of scripts){
+    const previousDescriptor=Object.getOwnPropertyDescriptor(this,'destroy')??null;
+    const previousDestroy=this.destroy;
+    try{
+      for(const script of scripts){
         if (script.src) {
           console.error('ONLY INLINE SCRIPTS SUPPORTED AT THIS TIME FOR SECURITY REASONS');
           console.warn('script src path will need to be limited to ./{text}.js, ../{text}.js), or acceptable sub folders. This can be complex.');
@@ -105,6 +276,19 @@ class HTMLImport extends HTMLElement {
           htmlImportHostRegistry.delete(hostToken);
           delete executable.dataset.arcaneHostToken;
         }
+      }
+    }finally{
+      const installedDescriptor=Object.getOwnPropertyDescriptor(this,'destroy')??null;
+      const installedDestroy=this.destroy;
+      if(typeof installedDestroy==='function'
+        &&installedDestroy!==previousDestroy
+        &&!samePropertyDescriptor(installedDescriptor,previousDescriptor)){
+        this.#importedDestroy={
+          destroy:installedDestroy,
+          installedDescriptor,
+          previousDescriptor
+        };
+      }
     }
   }
 }

package/runtime/arcane/modules/LocalAIReadinessController.js

@@ -2,9 +2,28 @@ import {
     checkLocalAIReadiness,
     deriveLocalAIRequirements
 } from './LocalAIReadiness.js?v=4';
+import {
+    createArcaneEventSource,
+    projectArcaneDOMEvent
+} from 'arcane-os/event-manager';
 
 const SLOT_NAMES=Object.freeze(['llm','stt','tts']);
 
+export const LOCAL_AI_READINESS_CONTROLLER_EVENT_TYPES=Object.freeze({
+    changed:'local-ai-readiness-change'
+});
+export const LOCAL_AI_READINESS_CONTROLLER_ERROR_CODES=Object.freeze({
+    aborted:'ARCANE_LOCAL_AI_READINESS_CONTROLLER_ABORTED',
+    disposed:'ARCANE_LOCAL_AI_READINESS_CONTROLLER_DISPOSED',
+    statusReadyTimeout:'ARCANE_LOCAL_AI_STATUS_COMPONENT_READY_TIMEOUT'
+});
+export const LOCAL_AI_READINESS_CONTROLLER_REASONS=Object.freeze({
+    checked:'local-ai-readiness-checked',
+    aborted:'local-ai-readiness-controller-aborted',
+    disposed:'local-ai-readiness-controller-disposed',
+    statusReadyTimeout:'local-ai-status-component-ready-timeout'
+});
+
 function availabilityFromReport(report={}){
     const slots=report.slots||{};
     return Object.freeze(Object.fromEntries(SLOT_NAMES.map(name=>{
@@ -29,19 +48,85 @@ function pendingReport(requirements){
     });
 }
 
-async function waitForStatusComponent(status){
+function localAIReadinessAbortError(reason,disposed=false){
+    const code=disposed
+        ?LOCAL_AI_READINESS_CONTROLLER_ERROR_CODES.disposed
+        :LOCAL_AI_READINESS_CONTROLLER_ERROR_CODES.aborted;
+    const errorReason=disposed
+        ?LOCAL_AI_READINESS_CONTROLLER_REASONS.disposed
+        :LOCAL_AI_READINESS_CONTROLLER_REASONS.aborted;
+    if(reason instanceof Error
+        &&reason.name==='AbortError'
+        &&reason.code===code
+        &&reason.reason===errorReason){
+        return reason;
+    }
+
+    const error=new Error(
+        disposed
+            ?'The local AI readiness controller has been disposed.'
+            :'The local AI readiness check was aborted.'
+    );
+    error.name='AbortError';
+    error.code=code;
+    error.reason=errorReason;
+    if(reason!==undefined){
+        error.cause=reason;
+    }
+    return error;
+}
+
+async function waitForStatusComponent(status,signal){
     if(!status||status.ready){
         return status;
     }
 
-    await new Promise(resolve=>{
-        const timeout=globalThis.setTimeout(done,10000);
-        function done(){
+    await new Promise(function waitForLocalAIStatusPromise(resolve,reject){
+        let settled=false;
+        const timeout=globalThis.setTimeout(failTimeout,10000);
+
+        function cleanup(){
             globalThis.clearTimeout(timeout);
-            status.removeEventListener('local-ai-status-ready',done);
+            status.removeEventListener('local-ai-status-ready',complete);
+            signal?.removeEventListener('abort',abortWait);
+        }
+
+        function complete(){
+            if(settled){
+                return;
+            }
+            settled=true;
+            cleanup();
             resolve();
         }
-        status.addEventListener('local-ai-status-ready',done,{once:true});
+
+        function fail(error){
+            if(settled){
+                return;
+            }
+            settled=true;
+            cleanup();
+            reject(error);
+        }
+
+        function failTimeout(){
+            const error=new Error('Local AI status component readiness timed out after 10000 ms.');
+            error.code=LOCAL_AI_READINESS_CONTROLLER_ERROR_CODES.statusReadyTimeout;
+            error.reason=LOCAL_AI_READINESS_CONTROLLER_REASONS.statusReadyTimeout;
+            fail(error);
+        }
+
+        function abortWait(){
+            fail(localAIReadinessAbortError(signal?.reason));
+        }
+
+        if(signal?.aborted){
+            abortWait();
+            return;
+        }
+
+        signal?.addEventListener('abort',abortWait,{once:true});
+        status.addEventListener('local-ai-status-ready',complete,{once:true});
     });
     return status;
 }
@@ -62,35 +147,76 @@ export function createLocalAIReadinessController({
         throw new TypeError('A chat component is required.');
     }
 
+    const lifecycleController=new AbortController();
+    const eventOwner=Object.freeze({kind:'local-ai-readiness-controller'});
+    const events=createArcaneEventSource(
+        eventOwner,
+        {
+            source:'local-ai-readiness-controller',
+            eventTypes:Object.freeze(
+                Object.values(LOCAL_AI_READINESS_CONTROLLER_EVENT_TYPES)
+            )
+        }
+    );
     let active=null;
+    let chatReadyListenerPending=false;
+    let destroyed=false;
     let latestReport=null;
     let currentAvailability=availabilityFromReport({});
+    let operationSequence=0;
 
-    const publishAvailability=()=>{
+    function publishAvailability(){
+        if(destroyed){
+            return;
+        }
         if(typeof chat.setAIAvailability==='function'){
+            if(chatReadyListenerPending){
+                chat.removeEventListener('chat-ready',publishAvailability);
+            }
+            chatReadyListenerPending=false;
             chat.setAIAvailability(currentAvailability);
-        }else{
-            chat.addEventListener('chat-ready',publishAvailability,{once:true});
+        }else if(!chatReadyListenerPending){
+            chatReadyListenerPending=true;
+            chat.addEventListener(
+                'chat-ready',
+                publishAvailability,
+                {
+                    once:true,
+                    signal:lifecycleController.signal
+                }
+            );
         }
-    };
+    }
 
-    const applyAvailability=report=>{
+    function applyAvailability(report){
         currentAvailability=availabilityFromReport(report);
         publishAvailability();
-    };
+    }
 
-    const check=async()=>{
+    async function check(){
+        if(destroyed){
+            throw localAIReadinessAbortError(
+                lifecycleController.signal.reason,
+                true
+            );
+        }
         if(active){
             return active;
         }
 
-        active=(async()=>{
+        active=(async function runLocalAIReadinessCheck(){
             const preferenceTuple=selectedPreferences(preferences);
             const requirements=deriveLocalAIRequirements(preferenceTuple);
             const required=SLOT_NAMES.some(name=>requirements[name].required);
 
             applyAvailability(pendingReport(requirements));
-            await waitForStatusComponent(status);
+            await waitForStatusComponent(status,lifecycleController.signal);
+            if(destroyed){
+                throw localAIReadinessAbortError(
+                    lifecycleController.signal.reason,
+                    true
+                );
+            }
             status?.configure?.({profileHref});
             if(required){
                 status?.begin?.(requirements);
@@ -102,42 +228,95 @@ export function createLocalAIReadinessController({
                 ...checkOptions,
                 preferences:preferenceTuple
             });
+            if(destroyed){
+                throw localAIReadinessAbortError(
+                    lifecycleController.signal.reason,
+                    true
+                );
+            }
             status?.present?.(latestReport);
             applyAvailability(latestReport);
             if(typeof onChange==='function'){
                 onChange(latestReport);
             }
-            chat.dispatchEvent(new CustomEvent('local-ai-readiness-change',{
-                bubbles:true,
-                composed:true,
-                detail:{report:latestReport}
-            }));
+            const availability=availabilityFromReport(latestReport);
+            if(destroyed){
+                throw localAIReadinessAbortError(
+                    lifecycleController.signal.reason,
+                    true
+                );
+            }
+            operationSequence+=1;
+            const operationId=`${events.instanceId}:check:${operationSequence.toString(36)}`;
+            const reason=LOCAL_AI_READINESS_CONTROLLER_REASONS.checked;
+            const publication=events.dispatch(
+                LOCAL_AI_READINESS_CONTROLLER_EVENT_TYPES.changed,
+                Object.freeze({operationId,reason,report:latestReport}),
+                {
+                    operationId,
+                    publicDetail:Object.freeze({availability,reason})
+                }
+            );
+            projectArcaneDOMEvent(
+                chat,
+                publication.occurrence,
+                {
+                    bubbles:true,
+                    composed:true
+                }
+            );
             return latestReport;
-        })().finally(()=>{
+        })().finally(function releaseLocalAIReadinessCheck(){
             active=null;
         });
 
         return active;
-    };
+    }
 
-    const ensure=()=>{
+    function ensure(){
         if(active){
             return active;
         }
         return latestReport
             ?Promise.resolve(latestReport)
             :check();
-    };
+    }
+
+    function retry(){
+        void check().catch(function ignoreDestroyedLocalAIRetry(error){
+            if(error?.name!=='AbortError'){
+                console.error('Local AI readiness retry failed.',error);
+            }
+        });
+    }
+    status?.addEventListener(
+        'local-ai-retry',
+        retry,
+        {signal:lifecycleController.signal}
+    );
 
-    const retry=()=>void check();
-    status?.addEventListener('local-ai-retry',retry);
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        lifecycleController.abort(
+            localAIReadinessAbortError(undefined,true)
+        );
+        if(chatReadyListenerPending){
+            chat.removeEventListener('chat-ready',publishAvailability);
+            chatReadyListenerPending=false;
+        }
+        status?.removeEventListener('local-ai-retry',retry);
+        events.dispose();
+        return true;
+    }
 
     return Object.freeze({
         check,
         ensure,
-        destroy(){
-            status?.removeEventListener('local-ai-retry',retry);
-        },
+        destroy,
+        dispose:destroy,
         get availability(){
             return currentAvailability;
         },