arcane-os 0.1.0-dev.5

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

@@ -0,0 +1,13 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+:host{display:block;min-width:0;height:100%}.shell{display:grid;grid-template-rows:auto 1fr auto;height:100%;min-height:32rem}.heading{align-items:center;display:flex;gap:.75rem;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color,#ccd4df)}.heading h2,.heading p{margin:0}.heading p{color:var(--muted-text-color,#607080)}.badge{border:1px solid var(--border-color,#ccd4df);border-radius:999px;padding:.25rem .55rem;font-size:.72rem;text-transform:uppercase}.messages{display:flex;flex-direction:column;gap:.8rem;overflow:auto;padding:1rem}.message{align-self:flex-start;max-width:min(78%,42rem);padding:.75rem .9rem;border:1px solid var(--border-color,#ccd4df);border-radius:.9rem;background:var(--modal-background,#fff)}.message.outbound{align-self:flex-end;color:var(--button-text-color,#fff);background:var(--primary-color,#172238)}.message p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.message footer{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.4rem;font-size:.7rem;opacity:.72}.advisory{display:grid;gap:.45rem;margin-top:.7rem;padding:.7rem;border:2px solid var(--border-color,#ccd4df);border-radius:.65rem;background:var(--background-color,#f5f7fa);color:var(--text-color,#172238)}.advisory[data-level="critical"],.advisory[data-level="high"]{border-color:rgb(174,48,52)}.advisory[data-level="caution"]{border-color:rgb(190,120,34)}.advisory strong,.advisory p{margin:0}.advisory ul{margin:.1rem 0;padding-left:1.2rem}.advisory button{justify-self:start}.composer{display:grid;gap:.6rem;padding:1rem;border-top:1px solid var(--border-color,#ccd4df)}textarea{min-height:5rem;resize:vertical}.composer-row{align-items:center;display:flex;gap:.75rem;justify-content:space-between}.status{color:var(--muted-text-color,#607080);margin:0}.blank{display:grid;place-items:center;height:100%;padding:2rem;text-align:center}.blank p{color:var(--muted-text-color,#607080)}
+</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}));
+</script>

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

@@ -0,0 +1,341 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3">
+<link rel="stylesheet" href="./arcane/css/dashboard-config.css?v=2">
+<style>
+    :host{
+        display:block;
+    }
+</style>
+
+<button id="openConfig" type="button" aria-haspopup="dialog" disabled></button>
+<html-import id="configModal" class="modal" href="./arcane/components/modal.html?v=13"></html-import>
+
+<script type="module">
+    const host=this;
+    const componentURL=new URL(
+        host.getAttribute('href')||'./arcane/components/dashboard-config.html',
+        document.baseURI
+    );
+    const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
+    const {default:waitForComponent}=await import(moduleURL('WaitForComponent.js'));
+    const {
+        effectiveDashboardVisibility,
+        normalizeDashboardDefinitions,
+        normalizeDashboardOptions,
+        normalizeDashboardVisibility
+    }=await import(moduleURL('ComponentContracts.js'));
+    const openButton=host.shadowRoot.querySelector('#openConfig');
+    const configModal=host.shadowRoot.querySelector('#configModal');
+
+    let definitions=[];
+    let visibility={};
+    let content=null;
+    let labels=normalizeDashboardOptions(optionsFromDataset()).labels;
+
+    host.close=closeConfig;
+    host.configure=configure;
+    host.getChartOptions=getChartOptions;
+    host.getEffectiveVisibility=getEffectiveVisibility;
+    host.open=openConfig;
+    host.setDefinitions=setDefinitions;
+    host.setVisibility=setVisibility;
+
+    Object.defineProperties(
+        host,
+        {
+            definitions:{get:getDefinitions,set:setDefinitions},
+            effectiveVisibility:{get:getEffectiveVisibility},
+            options:{get:getOptions,set:configure},
+            visibility:{get:getVisibility,set:setVisibility}
+        }
+    );
+
+    openButton.addEventListener(
+        'click',
+        ()=>openConfig().catch(
+            error=>console.error('Unable to configure dashboard:',error)
+        )
+    );
+    configModal.addEventListener(
+        'modal-closed',
+        ()=>host.dispatchEvent(
+            new CustomEvent(
+                'dashboard-config-closed',
+                {
+                    bubbles:true,
+                    composed:true,
+                    detail:{
+                        effectiveVisibility:getEffectiveVisibility(),
+                        visibility:getVisibility()
+                    }
+                }
+            )
+        )
+    );
+
+    function optionsFromDataset(){
+        const dataset=host.dataset||{};
+        const options={};
+        for(const field of ['description','emptyLabel','heading','triggerLabel']){
+            if(dataset[field]!==undefined){
+                options[field]=dataset[field];
+            }
+        }
+        return options;
+    }
+
+    function configure(input={}){
+        const normalized=normalizeDashboardOptions(
+            input,
+            {definitions,labels,visibility}
+        );
+        definitions=normalized.definitions;
+        visibility=normalized.visibility;
+        labels=normalized.labels;
+        renderTrigger();
+        refreshContent();
+        return getOptions();
+    }
+
+    function setDefinitions(values=[]){
+        definitions=normalizeDashboardDefinitions(values);
+        renderTrigger();
+        refreshContent();
+        return getDefinitions();
+    }
+
+    function setVisibility(values={}){
+        visibility=normalizeDashboardVisibility(values);
+        syncOptions();
+        return getVisibility();
+    }
+
+    function getDefinitions(){
+        return definitions.map(cloneDefinition);
+    }
+
+    function getVisibility(){
+        return {...visibility};
+    }
+
+    function getEffectiveVisibility(){
+        return effectiveDashboardVisibility(definitions,visibility);
+    }
+
+    function getChartOptions(key=''){
+        const definition=definitions.find(candidate=>candidate.key===key);
+        if(!definition){
+            return null;
+        }
+        return {
+            ...definition.chartOptions,
+            labels:{...definition.chartOptions.labels},
+            chartOptions:typeof definition.chartOptions.chartOptions==='object'
+                &&definition.chartOptions.chartOptions!==null
+                ?{...definition.chartOptions.chartOptions}
+                :definition.chartOptions.chartOptions
+        };
+    }
+
+    function isVisible(definition={}){
+        return typeof visibility[definition.key]==='boolean'
+            ?visibility[definition.key]
+            :definition.defaultVisible;
+    }
+
+    async function openConfig(){
+        if(!definitions.length){
+            return false;
+        }
+        const modal=await waitForComponent(
+            configModal,
+            {
+                methods:['populate','open'],
+                property:'ready',
+                event:'modal-ready'
+            }
+        );
+        if(!content){
+            content=createContent();
+            await modal.populate(content,false);
+        }
+        refreshContent();
+        modal.open();
+        host.dispatchEvent(
+            new CustomEvent(
+                'dashboard-config-opened',
+                {
+                    bubbles:true,
+                    composed:true,
+                    detail:{
+                        effectiveVisibility:getEffectiveVisibility(),
+                        visibility:getVisibility()
+                    }
+                }
+            )
+        );
+        return true;
+    }
+
+    async function closeConfig(){
+        const modal=await waitForComponent(
+            configModal,
+            {
+                methods:['close'],
+                property:'ready',
+                event:'modal-ready'
+            }
+        );
+        modal.close();
+        return true;
+    }
+
+    function createContent(){
+        const section=document.createElement('section');
+        const styles=document.createElement('link');
+        const heading=document.createElement('h1');
+        const message=document.createElement('p');
+        const empty=document.createElement('p');
+        const items=document.createElement('section');
+
+        styles.rel='stylesheet';
+        styles.href='./arcane/css/dashboard-config.css?v=2';
+        heading.dataset.dashboardConfigHeading='';
+        message.dataset.dashboardConfigDescription='';
+        empty.className='dashboard-config-empty';
+        empty.dataset.dashboardConfigEmpty='';
+        items.className='chart-options';
+        items.dataset.dashboardConfigOptions='';
+        items.addEventListener('change',changeVisibility);
+        section.append(styles,heading,message,empty,items);
+        return section;
+    }
+
+    function refreshContent(){
+        if(!content){
+            return;
+        }
+        const heading=content.querySelector('[data-dashboard-config-heading]');
+        const message=content.querySelector('[data-dashboard-config-description]');
+        const empty=content.querySelector('[data-dashboard-config-empty]');
+        const items=content.querySelector('[data-dashboard-config-options]');
+        const fragment=document.createDocumentFragment();
+        let group=null;
+
+        heading.innerText=labels.heading;
+        message.innerText=labels.description;
+        empty.innerText=labels.empty;
+        empty.hidden=definitions.length>0;
+
+        for(const definition of definitions){
+            if(definition.group&&definition.group!==group){
+                group=definition.group;
+                const groupHeading=document.createElement('h2');
+                groupHeading.className='chart-option-group';
+                groupHeading.innerText=group;
+                fragment.append(groupHeading);
+            }
+            const label=document.createElement('label');
+            const checkbox=document.createElement('input');
+            const title=document.createElement('h3');
+            const description=document.createElement('p');
+
+            label.className='chart-option';
+            label.classList.toggle('disabled',definition.disabled);
+            checkbox.type='checkbox';
+            checkbox.dataset.chartKey=definition.key;
+            checkbox.checked=isVisible(definition);
+            checkbox.disabled=definition.disabled;
+            title.innerText=definition.title;
+            description.innerText=definition.description;
+            description.hidden=!definition.description;
+            label.append(checkbox,title,description);
+            fragment.append(label);
+        }
+        items.replaceChildren(fragment);
+    }
+
+    function syncOptions(){
+        if(!content){
+            return;
+        }
+        const byKey=new Map(definitions.map(definition=>[definition.key,definition]));
+        content.querySelectorAll('[data-chart-key]').forEach(
+            checkbox=>{
+                const definition=byKey.get(checkbox.dataset.chartKey);
+                checkbox.checked=definition?isVisible(definition):false;
+                checkbox.disabled=!definition||definition.disabled;
+            }
+        );
+    }
+
+    function changeVisibility(event){
+        const checkbox=event.target.closest?.('[data-chart-key]');
+        const definition=definitions.find(
+            candidate=>candidate.key===checkbox?.dataset.chartKey
+        );
+        if(!checkbox||!definition||definition.disabled){
+            return;
+        }
+
+        const previous=isVisible(definition);
+        const next={...visibility,[definition.key]:checkbox.checked};
+        const effective=effectiveDashboardVisibility(definitions,next);
+        const changeEvent=new CustomEvent(
+            'dashboard-config-change',
+            {
+                bubbles:true,
+                cancelable:true,
+                composed:true,
+                detail:{
+                    definition:cloneDefinition(definition),
+                    effectiveVisibility:effective,
+                    key:definition.key,
+                    visibility:{...next},
+                    visible:checkbox.checked
+                }
+            }
+        );
+        if(!host.dispatchEvent(changeEvent)){
+            checkbox.checked=previous;
+            return;
+        }
+        visibility=next;
+        syncOptions();
+    }
+
+    function renderTrigger(){
+        openButton.innerText=labels.trigger;
+        openButton.disabled=definitions.length===0;
+    }
+
+    function cloneDefinition(definition){
+        return {
+            ...definition,
+            chartOptions:{
+                ...definition.chartOptions,
+                labels:{...definition.chartOptions.labels},
+                chartOptions:typeof definition.chartOptions.chartOptions==='object'
+                    &&definition.chartOptions.chartOptions!==null
+                    ?{...definition.chartOptions.chartOptions}
+                    :definition.chartOptions.chartOptions
+            }
+        };
+    }
+
+    function getOptions(){
+        return {
+            definitions:getDefinitions(),
+            labels:{...labels},
+            visibility:getVisibility()
+        };
+    }
+
+    renderTrigger();
+    host.ready=true;
+    host.dispatchEvent(
+        new CustomEvent(
+            'dashboard-config-ready',
+            {bubbles:true,composed:true}
+        )
+    );
+</script>

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

@@ -0,0 +1,112 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3">
+<style>
+    :host{
+        display:block;
+    }
+
+    button{
+        margin:0;
+    }
+</style>
+
+<button id="openMaintenance" type="button" aria-haspopup="dialog">Maintenance</button>
+<html-import id="maintenanceModal" class="modal" href="./arcane/components/modal.html?v=13"></html-import>
+
+<script type="module">
+    const host=this;
+    const openButton=host.shadowRoot.querySelector('#openMaintenance');
+    const maintenanceModal=host.shadowRoot.querySelector('#maintenanceModal');
+    const {default:waitForComponent}=await import('../modules/WaitForComponent.js');
+    const {clearEmptyChatsAndMemories}=await import('../modules/DataMaintenance.js?v=3');
+
+    let content=null;
+
+    host.open=openMaintenance;
+
+    openButton.addEventListener(
+        'click',
+        ()=>openMaintenance().catch(
+            error=>console.error('Unable to open maintenance:',error)
+        )
+    );
+
+    async function openMaintenance(){
+        const modal=await waitForComponent(
+            maintenanceModal,
+            {
+                methods:['populate','open'],
+                property:'ready',
+                event:'modal-ready'
+            }
+        );
+
+        if(!content){
+            content=createContent();
+            await modal.populate(content,false);
+        }
+
+        modal.open();
+    }
+
+    function createContent(){
+        const section=document.createElement('section');
+        const heading=document.createElement('h1');
+        const message=document.createElement('p');
+        const clearButton=document.createElement('button');
+        const status=document.createElement('p');
+
+        heading.innerText='Data Maintenance';
+        message.innerText='Remove chat logs with no user entries, their associated memories, and memory records with no content.';
+        clearButton.type='button';
+        clearButton.innerText='Clear Empty Chats & Memories';
+        status.setAttribute('aria-live','polite');
+
+        clearButton.addEventListener(
+            'click',
+            async function clearChats(){
+                clearButton.disabled=true;
+                status.innerText='Checking chat logs...';
+
+                try{
+                    const result=await clearEmptyChatsAndMemories();
+
+                    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'}.`;
+                    }else{
+                        status.innerText='No empty chats or memories were found.';
+                    }
+
+                    if(result.failed){
+                        status.innerText+=` ${result.failed} could not be deleted.`;
+                    }
+
+                    host.dispatchEvent(
+                        new CustomEvent(
+                            'data-maintenance-complete',
+                            {detail:result}
+                        )
+                    );
+                }catch(error){
+                    status.innerText='Unable to complete data maintenance.';
+                    console.error('Unable to clear empty chats and memories:',error);
+                }finally{
+                    clearButton.disabled=false;
+                }
+            }
+        );
+
+        section.append(
+            heading,
+            message,
+            clearButton,
+            status
+        );
+
+        return section;
+    }
+
+    host.ready=true;
+    host.dispatchEvent(
+        new CustomEvent('data-maintenance-ready')
+    );
+</script>

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

@@ -0,0 +1,92 @@
+<link rel="stylesheet" href="./arcane/css/layout.css?v=3">
+<style>
+    :host{
+        display:flex;
+        justify-content:flex-end;
+    }
+
+    button{
+        margin:0;
+    }
+</style>
+
+<button id="openData" type="button" aria-haspopup="dialog"></button>
+<html-import id="dataModal" class="modal" href="./arcane/components/modal.html?v=13"></html-import>
+
+<script type="module">
+    const host=this;
+    const openButton=host.shadowRoot.querySelector('#openData');
+    const dataModal=host.shadowRoot.querySelector('#dataModal');
+    const {default:waitForComponent}=await import('../modules/WaitForComponent.js');
+
+    let content=null;
+    let fileManager=null;
+
+    host.beforeOpen=typeof host.beforeOpen==='function'
+        ?host.beforeOpen
+        :async function beforeOpen(){};
+    host.open=openData;
+
+    openButton.innerText=host.dataset.button||'View Data';
+    openButton.addEventListener(
+        'click',
+        ()=>openData().catch(
+            error=>console.error('Unable to open data view:',error)
+        )
+    );
+
+    async function openData(){
+        await host.beforeOpen();
+
+        const reload=Boolean(content);
+
+        const modal=await waitForComponent(
+            dataModal,
+            {
+                methods:['populate','open'],
+                property:'ready',
+                event:'modal-ready'
+            }
+        );
+
+        if(!content){
+            content=document.createElement('section');
+            fileManager=document.createElement('html-import');
+
+            const heading=document.createElement('h1');
+
+            heading.innerText=host.dataset.title||'Data';
+            fileManager.className='file-manager';
+            fileManager.previewTransform=host.previewTransform;
+            fileManager.dataset.dirs=host.dataset.dirs||'';
+            fileManager.dataset.layout=host.dataset.layout||'files';
+            fileManager.setAttribute(
+                'href',
+                './arcane/components/file-manager.html?v=18'
+            );
+
+            content.append(heading,fileManager);
+            await modal.populate(content,false);
+        }
+
+        const manager=await waitForComponent(
+            fileManager,
+            {
+                methods:['loadAll'],
+                property:'ready',
+                event:'file-manager-ready'
+            }
+        );
+
+        if(reload){
+            await manager.loadAll();
+        }
+
+        modal.open();
+    }
+
+    host.ready=true;
+    host.dispatchEvent(
+        new CustomEvent('data-view-ready')
+    );
+</script>