arcane-os 0.2.2 → 0.3.0

package/runtime/arcane/components/conversation-view.html

@@ -4,10 +4,17 @@
 </style>
 <section class="shell"><header id="heading" class="heading" hidden><div><h2 id="title"></h2><p id="participants"></p></div><span id="badge" class="badge"></span></header><div id="messages" class="messages"><div class="blank"><div><strong>Select a conversation</strong><p>Choose a thread from the inbox, or connect a service in settings.</p></div></div></div><form id="composer" class="composer" hidden><label class="arcane-field"><span class="sr-only">Reply</span><textarea id="body" required placeholder="Write a reply"></textarea></label><div class="composer-row"><p id="status" class="status" role="status" aria-live="polite"></p><button class="arcane-button" type="submit">Send</button></div></form></section>
 <script type="module">
-const host=this,root=host.shadowRoot,heading=root.querySelector('#heading'),messages=root.querySelector('#messages'),composer=root.querySelector('#composer'),body=root.querySelector('#body'),status=root.querySelector('#status');let thread=null,advisories={};
-host.setConversation=(next,items=[],options={})=>{thread=next||null;advisories=options?.advisories instanceof Map?options.advisories:new Map();heading.hidden=!thread;composer.hidden=!thread;if(!thread){messages.innerHTML='<div class="blank"><div><strong>Select a conversation</strong><p>Choose a thread from the inbox, or connect a service in settings.</p></div></div>';return}root.querySelector('#title').textContent=thread.title;root.querySelector('#participants').textContent=(thread.participants||[]).join(', ');root.querySelector('#badge').textContent=`${thread.channel} · ${thread.providerId}`;render(items)};
-host.setBusy=value=>{for(const control of composer.elements) control.disabled=Boolean(value)};host.setStatus=value=>status.textContent=String(value||'');
-composer.addEventListener('submit',event=>{event.preventDefault();const value=body.value.trim();if(!value)return;host.dispatchEvent(new CustomEvent('communication-send',{bubbles:true,composed:true,detail:{thread,body:value}}))});
-function render(items){messages.replaceChildren(...Array.from(items||[]).map(item=>{const article=document.createElement('article'),text=document.createElement('p'),footer=document.createElement('footer'),time=document.createElement('time'),state=document.createElement('span');article.className=`message ${item.direction}`;text.textContent=item.body||item.subject||'';time.dateTime=item.timestamp;time.textContent=new Intl.DateTimeFormat(undefined,{dateStyle:'short',timeStyle:'short'}).format(new Date(item.timestamp));state.textContent=item.status;footer.append(time,state);article.append(text,footer);const advisory=advisories.get(item);if(advisory){const note=document.createElement('aside'),title=document.createElement('strong'),summary=document.createElement('p');note.className='advisory';note.dataset.level=String(advisory.level||'caution');note.setAttribute('role','note');title.textContent=String(advisory.title||'Content advisory');summary.textContent=String(advisory.summary||'Review this message carefully.');note.append(title,summary);const signals=Array.from(advisory.signals||[]).map(String).filter(Boolean).slice(0,8);if(signals.length){const list=document.createElement('ul');for(const signal of signals){const entry=document.createElement('li');entry.textContent=signal;list.append(entry)}note.append(list)}if(advisory.actionLabel){const action=document.createElement('button');action.type='button';action.className='arcane-button arcane-button--tertiary';action.textContent=String(advisory.actionLabel);action.addEventListener('click',()=>host.dispatchEvent(new CustomEvent('communication-advisory-action',{bubbles:true,composed:true,detail:{thread,message:item,advisory}})));note.append(action)}article.append(note)}return article}));messages.scrollTop=messages.scrollHeight;}
-host.clearComposer=()=>{body.value='';body.focus()};host.ready=true;host.dispatchEvent(new CustomEvent('conversation-view-ready',{bubbles:true,composed:true}));
+const host=this,root=host.shadowRoot,heading=root.querySelector('#heading'),messages=root.querySelector('#messages'),composer=root.querySelector('#composer'),body=root.querySelector('#body'),status=root.querySelector('#status');
+const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+const events=createArcaneEventSource(host,{source:'arcane.component.conversation-view',eventTypes:['communication-send','communication-advisory-action','conversation-view-ready']});
+const lifecycleController=new AbortController();
+let thread=null,advisories={},destroyed=false,operationSequence=0;
+function nextOperationId(kind){operationSequence+=1;return `${events.descriptor.instanceId}:${kind}:${operationSequence}`}
+function emit(type,detail={},publicDetail={},operationId=null){if(destroyed)return false;const publication=events.dispatch(type,detail,{publicDetail,operationId});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true})}
+host.setConversation=(next,items=[],options={})=>{if(destroyed)return false;thread=next||null;advisories=options?.advisories instanceof Map?options.advisories:new Map();heading.hidden=!thread;composer.hidden=!thread;if(!thread){messages.innerHTML='<div class="blank"><div><strong>Select a conversation</strong><p>Choose a thread from the inbox, or connect a service in settings.</p></div></div>';return}root.querySelector('#title').textContent=thread.title;root.querySelector('#participants').textContent=(thread.participants||[]).join(', ');root.querySelector('#badge').textContent=`${thread.channel} · ${thread.providerId}`;render(items)};
+host.setBusy=value=>{if(destroyed)return false;for(const control of composer.elements) control.disabled=Boolean(value)};host.setStatus=value=>{if(destroyed)return false;status.textContent=String(value||'')};
+composer.addEventListener('submit',event=>{event.preventDefault();const value=body.value.trim();if(!value)return;emit('communication-send',{thread,body:value},{hasThread:Boolean(thread),bodyLength:value.length},nextOperationId('send'))},{signal:lifecycleController.signal});
+function render(items){messages.replaceChildren(...Array.from(items||[]).map(item=>{const article=document.createElement('article'),text=document.createElement('p'),footer=document.createElement('footer'),time=document.createElement('time'),state=document.createElement('span');article.className=`message ${item.direction}`;text.textContent=item.body||item.subject||'';time.dateTime=item.timestamp;time.textContent=new Intl.DateTimeFormat(undefined,{dateStyle:'short',timeStyle:'short'}).format(new Date(item.timestamp));state.textContent=item.status;footer.append(time,state);article.append(text,footer);const advisory=advisories.get(item);if(advisory){const note=document.createElement('aside'),title=document.createElement('strong'),summary=document.createElement('p');note.className='advisory';note.dataset.level=String(advisory.level||'caution');note.setAttribute('role','note');title.textContent=String(advisory.title||'Content advisory');summary.textContent=String(advisory.summary||'Review this message carefully.');note.append(title,summary);const signals=Array.from(advisory.signals||[]).map(String).filter(Boolean).slice(0,8);if(signals.length){const list=document.createElement('ul');for(const signal of signals){const entry=document.createElement('li');entry.textContent=signal;list.append(entry)}note.append(list)}if(advisory.actionLabel){const action=document.createElement('button');action.type='button';action.className='arcane-button arcane-button--tertiary';action.textContent=String(advisory.actionLabel);action.addEventListener('click',()=>emit('communication-advisory-action',{thread,message:item,advisory},{hasThread:Boolean(thread),level:String(advisory.level||'caution')},nextOperationId('advisory-action')),{signal:lifecycleController.signal});note.append(action)}article.append(note)}return article}));messages.scrollTop=messages.scrollHeight;}
+function destroy(){if(destroyed)return false;destroyed=true;lifecycleController.abort();thread=null;advisories={};events.dispose();host.ready=false;return true}
+host.clearComposer=()=>{if(destroyed)return false;body.value='';body.focus()};host.destroy=destroy;host.ready=true;emit('conversation-view-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/dashboard-config.html

@@ -23,6 +23,9 @@
         normalizeDashboardOptions,
         normalizeDashboardVisibility
     }=await import(moduleURL('ComponentContracts.js'));
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.dashboard-config',eventTypes:['dashboard-config-closed','dashboard-config-opened','dashboard-config-change','dashboard-config-ready']});
+    const lifecycleController=new AbortController();
     const openButton=host.shadowRoot.querySelector('#openConfig');
     const configModal=host.shadowRoot.querySelector('#configModal');
 
@@ -30,9 +33,22 @@
     let visibility={};
     let content=null;
     let labels=normalizeDashboardOptions(optionsFromDataset()).labels;
+    let operationSequence=0;
+    let operationGeneration=0;
+    let destroyed=false;
+
+    function emit(type,detail={},publicDetail={},options={}){
+        if(destroyed){
+            return false;
+        }
+        const publication=events.dispatch(type,detail,{publicDetail,operationId:options.operationId||null,cancelable:Boolean(options.cancelable)});
+        if(options.cancelable&&!publication.accepted) return false;
+        return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true,cancelable:Boolean(options.cancelable)});
+    }
 
     host.close=closeConfig;
     host.configure=configure;
+    host.destroy=destroy;
     host.getChartOptions=getChartOptions;
     host.getEffectiveVisibility=getEffectiveVisibility;
     host.open=openConfig;
@@ -42,34 +58,33 @@
     Object.defineProperties(
         host,
         {
-            definitions:{get:getDefinitions,set:setDefinitions},
-            effectiveVisibility:{get:getEffectiveVisibility},
-            options:{get:getOptions,set:configure},
-            visibility:{get:getVisibility,set:setVisibility}
+            definitions:{configurable:true,get:getDefinitions,set:setDefinitions},
+            effectiveVisibility:{configurable:true,get:getEffectiveVisibility},
+            options:{configurable:true,get:getOptions,set:configure},
+            visibility:{configurable:true,get:getVisibility,set:setVisibility}
         }
     );
 
     openButton.addEventListener(
         'click',
         ()=>openConfig().catch(
-            error=>console.error('Unable to configure dashboard:',error)
-        )
+            error=>{
+                if(!destroyed){
+                    console.error('Unable to configure dashboard:',error);
+                }
+            }
+        ),
+        {signal:lifecycleController.signal}
     );
     configModal.addEventListener(
         'modal-closed',
-        ()=>host.dispatchEvent(
-            new CustomEvent(
-                'dashboard-config-closed',
-                {
-                    bubbles:true,
-                    composed:true,
-                    detail:{
-                        effectiveVisibility:getEffectiveVisibility(),
-                        visibility:getVisibility()
-                    }
-                }
-            )
-        )
+        ()=>emit(
+            'dashboard-config-closed',
+            {effectiveVisibility:getEffectiveVisibility(),visibility:getVisibility()},
+            {definitionCount:definitions.length},
+            {operationId:`${events.descriptor.instanceId}:close:${++operationSequence}`}
+        ),
+        {signal:lifecycleController.signal}
     );
 
     function optionsFromDataset(){
@@ -84,6 +99,9 @@
     }
 
     function configure(input={}){
+        if(destroyed){
+            return getOptions();
+        }
         const normalized=normalizeDashboardOptions(
             input,
             {definitions,labels,visibility}
@@ -97,6 +115,9 @@
     }
 
     function setDefinitions(values=[]){
+        if(destroyed){
+            return getDefinitions();
+        }
         definitions=normalizeDashboardDefinitions(values);
         renderTrigger();
         refreshContent();
@@ -104,6 +125,9 @@
     }
 
     function setVisibility(values={}){
+        if(destroyed){
+            return getVisibility();
+        }
         visibility=normalizeDashboardVisibility(values);
         syncOptions();
         return getVisibility();
@@ -143,50 +167,60 @@
     }
 
     async function openConfig(){
-        if(!definitions.length){
+        if(destroyed||!definitions.length){
             return false;
         }
+        const generation=++operationGeneration;
         const modal=await waitForComponent(
             configModal,
             {
                 methods:['populate','open'],
                 property:'ready',
-                event:'modal-ready'
+                event:'modal-ready',
+                signal:lifecycleController.signal
             }
         );
+        if(destroyed||generation!==operationGeneration){
+            return false;
+        }
         if(!content){
             content=createContent();
             await modal.populate(content,false);
+            if(destroyed||generation!==operationGeneration){
+                return false;
+            }
         }
         refreshContent();
-        modal.open();
-        host.dispatchEvent(
-            new CustomEvent(
-                'dashboard-config-opened',
-                {
-                    bubbles:true,
-                    composed:true,
-                    detail:{
-                        effectiveVisibility:getEffectiveVisibility(),
-                        visibility:getVisibility()
-                    }
-                }
-            )
-        );
+        const opened=await modal.open();
+        if(destroyed||generation!==operationGeneration||opened!==true){
+            return false;
+        }
+        emit('dashboard-config-opened',{effectiveVisibility:getEffectiveVisibility(),visibility:getVisibility()},{definitionCount:definitions.length},{operationId:`${events.descriptor.instanceId}:open:${++operationSequence}`});
         return true;
     }
 
     async function closeConfig(){
+        if(destroyed){
+            return false;
+        }
+        const generation=++operationGeneration;
         const modal=await waitForComponent(
             configModal,
             {
                 methods:['close'],
                 property:'ready',
-                event:'modal-ready'
+                event:'modal-ready',
+                signal:lifecycleController.signal
             }
         );
-        modal.close();
-        return true;
+        if(destroyed||generation!==operationGeneration){
+            return false;
+        }
+        const closed=await modal.close();
+        if(destroyed||generation!==operationGeneration){
+            return false;
+        }
+        return closed===true;
     }
 
     function createContent(){
@@ -205,7 +239,7 @@
         empty.dataset.dashboardConfigEmpty='';
         items.className='chart-options';
         items.dataset.dashboardConfigOptions='';
-        items.addEventListener('change',changeVisibility);
+        items.addEventListener('change',changeVisibility,{signal:lifecycleController.signal});
         section.append(styles,heading,message,empty,items);
         return section;
     }
@@ -280,22 +314,14 @@
         const previous=isVisible(definition);
         const next={...visibility,[definition.key]:checkbox.checked};
         const effective=effectiveDashboardVisibility(definitions,next);
-        const changeEvent=new CustomEvent(
+        operationSequence+=1;
+        const accepted=emit(
             'dashboard-config-change',
-            {
-                bubbles:true,
-                cancelable:true,
-                composed:true,
-                detail:{
-                    definition:cloneDefinition(definition),
-                    effectiveVisibility:effective,
-                    key:definition.key,
-                    visibility:{...next},
-                    visible:checkbox.checked
-                }
-            }
+            {definition:cloneDefinition(definition),effectiveVisibility:effective,key:definition.key,visibility:{...next},visible:checkbox.checked},
+            {key:definition.key,visible:checkbox.checked},
+            {cancelable:true,operationId:`${events.descriptor.instanceId}:change:${operationSequence}`}
         );
-        if(!host.dispatchEvent(changeEvent)){
+        if(!accepted){
             checkbox.checked=previous;
             return;
         }
@@ -330,12 +356,23 @@
         };
     }
 
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        operationGeneration+=1;
+        lifecycleController.abort('dashboard-config-destroyed');
+        configModal.destroy?.();
+        definitions=[];
+        visibility={};
+        content=null;
+        events.dispose();
+        host.ready=false;
+        return true;
+    }
+
     renderTrigger();
     host.ready=true;
-    host.dispatchEvent(
-        new CustomEvent(
-            'dashboard-config-ready',
-            {bubbles:true,composed:true}
-        )
-    );
+    emit('dashboard-config-ready',{}, {ready:true});
 </script>

package/runtime/arcane/components/data-maintenance.html

@@ -18,34 +18,62 @@
     const maintenanceModal=host.shadowRoot.querySelector('#maintenanceModal');
     const {default:waitForComponent}=await import('../modules/WaitForComponent.js');
     const {clearEmptyChatsAndMemories}=await import('../modules/DataMaintenance.js?v=3');
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.data-maintenance',eventTypes:['data-maintenance-complete','data-maintenance-ready']});
+    const lifecycleController=new AbortController();
 
     let content=null;
+    let openGeneration=0;
+    let clearGeneration=0;
+    let operationSequence=0;
+    let destroyed=false;
 
     host.open=openMaintenance;
+    host.destroy=destroy;
 
     openButton.addEventListener(
         'click',
         ()=>openMaintenance().catch(
-            error=>console.error('Unable to open maintenance:',error)
-        )
+            error=>{
+                if(!destroyed){
+                    console.error('Unable to open maintenance:',error);
+                }
+            }
+        ),
+        {signal:lifecycleController.signal}
     );
 
     async function openMaintenance(){
+        if(destroyed){
+            return false;
+        }
+        const generation=++openGeneration;
         const modal=await waitForComponent(
             maintenanceModal,
             {
                 methods:['populate','open'],
                 property:'ready',
-                event:'modal-ready'
+                event:'modal-ready',
+                signal:lifecycleController.signal
             }
         );
+        if(destroyed||generation!==openGeneration){
+            return false;
+        }
 
         if(!content){
             content=createContent();
             await modal.populate(content,false);
+            if(destroyed||generation!==openGeneration){
+                return false;
+            }
         }
 
-        modal.open();
+        const opened=await modal.open();
+        if(destroyed||generation!==openGeneration){
+            return false;
+        }
+        return opened===true;
     }
 
     function createContent(){
@@ -64,11 +92,19 @@
         clearButton.addEventListener(
             'click',
             async function clearChats(){
+                if(destroyed){
+                    return;
+                }
+                const generation=++clearGeneration;
+                const operationId=`${events.descriptor.instanceId}:clear:${++operationSequence}`;
                 clearButton.disabled=true;
                 status.innerText='Checking chat logs...';
 
                 try{
                     const result=await clearEmptyChatsAndMemories();
+                    if(destroyed||generation!==clearGeneration){
+                        return;
+                    }
 
                     if(result.deletedChats||result.deletedMemories){
                         status.innerText=`Deleted ${result.deletedChats} empty ${result.deletedChats===1?'chat':'chats'} and ${result.deletedMemories} empty or associated ${result.deletedMemories===1?'memory':'memories'}.`;
@@ -80,19 +116,25 @@
                         status.innerText+=` ${result.failed} could not be deleted.`;
                     }
 
-                    host.dispatchEvent(
-                        new CustomEvent(
-                            'data-maintenance-complete',
-                            {detail:result}
-                        )
+                    const publication=events.dispatch(
+                        'data-maintenance-complete',
+                        result,
+                        {operationId,publicDetail:{deletedChats:Number(result.deletedChats||0),deletedMemories:Number(result.deletedMemories||0),failed:Number(result.failed||0)}}
                     );
+                    projectArcaneDOMEvent(host,publication.occurrence);
                 }catch(error){
+                    if(destroyed||generation!==clearGeneration){
+                        return;
+                    }
                     status.innerText='Unable to complete data maintenance.';
                     console.error('Unable to clear empty chats and memories:',error);
                 }finally{
-                    clearButton.disabled=false;
+                    if(!destroyed&&generation===clearGeneration){
+                        clearButton.disabled=false;
+                    }
                 }
-            }
+            },
+            {signal:lifecycleController.signal}
         );
 
         section.append(
@@ -105,8 +147,21 @@
         return section;
     }
 
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        openGeneration+=1;
+        clearGeneration+=1;
+        lifecycleController.abort('data-maintenance-destroyed');
+        maintenanceModal.destroy?.();
+        events.dispose();
+        host.ready=false;
+        return true;
+    }
+
     host.ready=true;
-    host.dispatchEvent(
-        new CustomEvent('data-maintenance-ready')
-    );
+    const readyPublication=events.dispatch('data-maintenance-ready',{}, {publicDetail:{ready:true}});
+    projectArcaneDOMEvent(host,readyPublication.occurrence);
 </script>

package/runtime/arcane/components/data-view.html

@@ -18,25 +18,43 @@
     const openButton=host.shadowRoot.querySelector('#openData');
     const dataModal=host.shadowRoot.querySelector('#dataModal');
     const {default:waitForComponent}=await import('../modules/WaitForComponent.js');
+    const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
+    const events=createArcaneEventSource(host,{source:'arcane.component.data-view',eventTypes:['data-view-ready']});
+    const lifecycleController=new AbortController();
 
     let content=null;
     let fileManager=null;
+    let operationGeneration=0;
+    let destroyed=false;
 
     host.beforeOpen=typeof host.beforeOpen==='function'
         ?host.beforeOpen
         :async function beforeOpen(){};
     host.open=openData;
+    host.destroy=destroy;
 
     openButton.innerText=host.dataset.button||'View Data';
     openButton.addEventListener(
         'click',
         ()=>openData().catch(
-            error=>console.error('Unable to open data view:',error)
-        )
+            error=>{
+                if(!destroyed){
+                    console.error('Unable to open data view:',error);
+                }
+            }
+        ),
+        {signal:lifecycleController.signal}
     );
 
     async function openData(){
+        if(destroyed){
+            return false;
+        }
+        const generation=++operationGeneration;
         await host.beforeOpen();
+        if(destroyed||generation!==operationGeneration){
+            return false;
+        }
 
         const reload=Boolean(content);
 
@@ -45,9 +63,13 @@
             {
                 methods:['populate','open'],
                 property:'ready',
-                event:'modal-ready'
+                event:'modal-ready',
+                signal:lifecycleController.signal
             }
         );
+        if(destroyed||generation!==operationGeneration){
+            return false;
+        }
 
         if(!content){
             content=document.createElement('section');
@@ -67,6 +89,9 @@
 
             content.append(heading,fileManager);
             await modal.populate(content,false);
+            if(destroyed||generation!==operationGeneration){
+                return false;
+            }
         }
 
         const manager=await waitForComponent(
@@ -74,19 +99,40 @@
             {
                 methods:['loadAll'],
                 property:'ready',
-                event:'file-manager-ready'
+                event:'file-manager-ready',
+                signal:lifecycleController.signal
             }
         );
+        if(destroyed||generation!==operationGeneration){
+            return false;
+        }
 
         if(reload){
             await manager.loadAll();
+            if(destroyed||generation!==operationGeneration){
+                return false;
+            }
         }
 
         modal.open();
+        return true;
+    }
+
+    function destroy(){
+        if(destroyed){
+            return false;
+        }
+        destroyed=true;
+        operationGeneration+=1;
+        lifecycleController.abort('data-view-destroyed');
+        fileManager?.destroy?.();
+        dataModal.destroy?.();
+        events.dispose();
+        host.ready=false;
+        return true;
     }
 
     host.ready=true;
-    host.dispatchEvent(
-        new CustomEvent('data-view-ready')
-    );
+    const readyPublication=events.dispatch('data-view-ready',{}, {publicDetail:{ready:true}});
+    projectArcaneDOMEvent(host,readyPublication.occurrence);
 </script>