arcane-os 0.1.0-dev.5

package/runtime/arcane/components/header.html

@@ -0,0 +1,142 @@
+<style>
+    /* Styles when 'no-logo' class is added to the host */
+    :host(.no-logo) .logo{
+        visibility: hidden;
+        -webkit-app-region: drag;
+    }
+
+    header{
+        -webkit-app-region: drag;
+        padding: 0 0.5em;
+        display: grid;
+        grid-template-columns:2em 2em 2em minmax(0,1fr) 2em 8em;
+        align-items: center;
+        text-align:center;
+        color: var(--platinum);
+    }
+
+    header .logo {
+        height:2em;
+        text-align:center;
+        -webkit-app-region: no-drag;
+        cursor:pointer;
+    }
+
+    h1{
+        font-weight: 300;
+        font-size:1em;
+    }
+
+    button{
+        -webkit-app-region: no-drag;
+        opacity:55%;
+        transition:opacity 250ms;
+        border: none;
+        background:transparent;
+        cursor:pointer;
+        color:var(--platinum);
+        font-weight:600
+    }
+
+    button:hover{
+        opacity:100%;
+        cursor:pointer;
+    }
+
+    button>img{
+        filter:var(--icon-filter,none);
+        height:1.2em;
+    }
+
+    .crisis-call{
+        background:var(--primary-color);
+        color:var(--button-text-color,var(--text-color));
+        padding:.7em 0 .4em;
+        border-radius: .2em;
+        opacity:70%;
+        width:100%;
+        white-space:nowrap;
+    }
+
+    .internet-status{
+        color:var(--danger-color);
+    }
+
+    .internet-status.online{
+        color:var(--success-color);
+    }
+</style>
+<header>
+    <button id="back"><img src="./arcane/img/arrow-left.png"/></button>
+    <button id="forward"><img src="./arcane/img/arrow-right.png"/></button>
+    <button id="refresh"><img src="./arcane/img/refresh.png"/></button>
+    <h1 id="title"></h1>
+    <span class="internet-status">●</span>
+    <a part='crisis-call-988' href='tel:988'>
+        <button class="crisis-call">988</button>
+    </a>
+</header>
+
+<script type="module">
+    import('../entities/User.js');
+    
+    const host=this;
+
+    window.addEventListener('user-entity-loaded', setSkin);
+    window.addEventListener('online', checkInternet);
+    window.addEventListener('offline', checkInternet);
+
+    if (window.user?.ready) {
+        setSkin();
+    }
+
+    checkInternet();
+
+    let color = {};
+
+    this.shadowRoot.querySelector('#back').addEventListener(
+        'click',
+        (e)=>{
+            window.history.back();
+        }
+    );
+
+    this.shadowRoot.querySelector('#forward').addEventListener(
+        'click',
+        (e)=>{
+            window.history.forward();
+        }
+    );
+
+    this.shadowRoot.querySelector('#refresh').addEventListener(
+        'click',
+        (e)=>{
+            window.location.reload(true);
+        }
+    );
+
+    this.shadowRoot.querySelector('#title').innerText = document.title;
+
+    async function setSkin() {
+        try {
+            const skin = window.user?.skin;
+            if (skin) {
+                document.body.className = skin;
+            } else {
+                console.log('No saved skin found. Using default.');
+            }
+        } catch (err) {
+            console.error('Failed to set global saved skin', err);
+        }
+    }
+
+    // Check if user can connect to the internet (make sure the cloud can be reached)
+    async function checkInternet() {
+        const online = navigator.onLine;
+        console.log(`Internet status: ${online ? 'Online' : 'Offline'}`);
+        host.shadowRoot.querySelector('.internet-status')
+            .classList
+            .toggle('online', online);
+
+    }
+</script>

package/runtime/arcane/components/integration-settings.html

@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+:host{display:block}.heading{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between}.heading h2,.heading p{margin:0}.services{display:grid;gap:.75rem}.service{display:grid;gap:.65rem;padding:1rem;border:1px solid var(--border-color,#ccd4df);border-radius:.7rem}.service-head{align-items:flex-start;display:flex;gap:.75rem}.service-head input{height:1.25rem;width:1.25rem}.service-copy{flex:1}.service-copy strong{display:block}.service-copy p{color:var(--muted-text-color,#607080);margin:.2rem 0 0}.fields{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}.status{border-radius:999px;padding:.2rem .55rem;background:var(--secondary-color,#e8edf4);font-size:.72rem}.actions{display:flex;gap:.5rem;justify-content:flex-end}.notice{padding:.75rem;border-left:.25rem solid var(--focus-color,#7657d5);background:var(--secondary-color,#e8edf4)}
+</style>
+<section class="arcane-card"><header class="arcane-card__header heading"><div><h2 id="title" class="arcane-section-heading">Connected services</h2><p id="description" class="arcane-help">Choose the services that appear in this application.</p></div><button id="close" class="arcane-button arcane-button--tertiary" type="button">Close</button></header><div class="arcane-card__body"><p class="notice">Passwords and API secrets are never stored here. Arcane delegates credentials to the local communications bridge or the provider's authorization flow.</p><div id="services" class="services"></div></div><footer class="arcane-card__footer"><p id="message" class="arcane-help" role="status" aria-live="polite"></p><button id="save" class="arcane-button" type="button">Save services</button></footer></section>
+<script type="module">
+const host=this,root=host.shadowRoot,services=root.querySelector('#services'),message=root.querySelector('#message');let descriptors=[],values={};
+host.configure=options=>{descriptors=Array.from(options?.services||[]);values={...(options?.values||{})};root.querySelector('#title').textContent=options?.title||'Connected services';root.querySelector('#description').textContent=options?.description||'Choose the services that appear in this application.';render();return host};host.getValues=()=>read();host.setStatus=value=>message.textContent=String(value||'');
+root.querySelector('#close').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('integration-settings-close',{bubbles:true,composed:true})));root.querySelector('#save').addEventListener('click',()=>host.dispatchEvent(new CustomEvent('integration-settings-save',{bubbles:true,composed:true,detail:{values:read()}})));
+function render(){services.replaceChildren(...descriptors.map(item=>{const section=document.createElement('section');section.className='service';section.dataset.id=item.id;const head=document.createElement('div');head.className='service-head';const enabled=document.createElement('input');enabled.type='checkbox';enabled.name='enabled';enabled.checked=Boolean(values[item.id]?.enabled);enabled.setAttribute('aria-label',`Enable ${item.label}`);const copy=document.createElement('div');copy.className='service-copy';const label=document.createElement('strong');label.textContent=item.label;const description=document.createElement('p');description.textContent=item.description||'';const state=document.createElement('span');state.className='status';state.textContent=values[item.id]?.status||item.defaultStatus||'Disconnected';copy.append(label,description);head.append(enabled,copy,state);section.append(head);const fields=document.createElement('div');fields.className='fields';if(item.acceptsEndpoint){fields.append(field('Bridge URL','endpoint',values[item.id]?.endpoint||item.defaultEndpoint||'http://127.0.0.1:8020'),item.id)}if(item.acceptsAccountLabel!==false)fields.append(field('Account label','accountLabel',values[item.id]?.accountLabel||'',item.id));if(fields.childElementCount)section.append(fields);if(item.actionLabel){const actions=document.createElement('div');actions.className='actions';const action=document.createElement('button');action.type='button';action.className='arcane-button arcane-button--secondary';action.textContent=item.actionLabel;action.addEventListener('click',()=>host.dispatchEvent(new CustomEvent('integration-action',{bubbles:true,composed:true,detail:{service:item,values:read()[item.id]}})));actions.append(action);section.append(actions)}return section}))}
+function field(labelText,name,value,id){const label=document.createElement('label');label.className='arcane-field';const span=document.createElement('span');span.textContent=labelText;const input=document.createElement('input');input.name=name;input.value=value;input.dataset.service=id;input.autocomplete='off';label.append(span,input);return label}
+function read(){return Object.fromEntries(descriptors.map(item=>{const section=services.querySelector(`[data-id="${CSS.escape(item.id)}"]`);return [item.id,{enabled:section.querySelector('[name="enabled"]').checked,endpoint:section.querySelector('[name="endpoint"]')?.value.trim()||'',accountLabel:section.querySelector('[name="accountLabel"]')?.value.trim()||'',status:values[item.id]?.status||item.defaultStatus||'Disconnected'}]}))}
+host.ready=true;host.dispatchEvent(new CustomEvent('integration-settings-ready',{bubbles:true,composed:true}));
+</script>

package/runtime/arcane/components/local-ai-status.html

@@ -0,0 +1,360 @@
+<link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
+<style>
+    :host{
+        display:block;
+        inset-block-start:4.5rem;
+        inset-inline-end:1rem;
+        max-width:min(34rem,calc(100vw - 2rem));
+        position:fixed;
+        width:max-content;
+        z-index:120;
+    }
+    :host([hidden]){display:none}
+    .panel{
+        background:var(--arcane-surface-raised,var(--modal-background));
+        border:1px solid var(--arcane-border,var(--border-color));
+        border-radius:var(--arcane-radius-3,.7rem);
+        box-shadow:0 .7rem 2rem var(--shadow-color);
+        color:var(--arcane-text,var(--text-color));
+        display:grid;
+        gap:var(--arcane-space-3,.75rem);
+        max-height:calc(100vh - 6rem);
+        overflow:auto;
+        padding:var(--arcane-space-4,1rem);
+    }
+    .heading{align-items:start;display:flex;gap:var(--arcane-space-3,.75rem);justify-content:space-between}
+    h2,p{margin:0}
+    h2{font-size:1.05rem;line-height:1.3}
+    .dismiss{
+        background:transparent;
+        border:0;
+        color:inherit;
+        cursor:pointer;
+        font:inherit;
+        min-height:2.5rem;
+        min-width:2.5rem;
+        padding:.35rem;
+    }
+    .dismiss:focus-visible,.action:focus-visible,summary:focus-visible{
+        outline:3px solid var(--arcane-focus,var(--focus-color));
+        outline-offset:2px;
+    }
+    .services{display:grid;gap:.45rem;list-style:none;margin:0;padding:0}
+    .service{align-items:start;display:grid;gap:.25rem;grid-template-columns:minmax(7.5rem,auto) 1fr}
+    .service-name{font-weight:700}
+    .service-state{color:var(--arcane-muted,var(--muted-text-color));overflow-wrap:anywhere}
+    .service[data-state="ready"] .service-state{color:var(--success-color)}
+    .service[data-state="unavailable"] .service-state{color:var(--danger-color)}
+    .actions{display:flex;flex-wrap:wrap;gap:.55rem}
+    .action{
+        align-items:center;
+        background:var(--arcane-action,var(--button-background));
+        border:1px solid var(--arcane-border,var(--border-color));
+        border-radius:.5rem;
+        color:var(--arcane-action-text,var(--button-text-color));
+        cursor:pointer;
+        display:inline-flex;
+        font:inherit;
+        font-weight:700;
+        justify-content:center;
+        min-height:2.75rem;
+        padding:.65rem .9rem;
+        text-decoration:none;
+    }
+    .action.secondary{background:transparent;color:inherit}
+    details{border-block-start:1px solid var(--arcane-border,var(--border-color));padding-block-start:.7rem}
+    summary{cursor:pointer;font-weight:700;min-height:2.5rem;padding:.45rem 0}
+    details p{color:var(--arcane-muted,var(--muted-text-color));line-height:1.45}
+    @media(max-width:36rem){
+        :host{inset-block-start:auto;inset-block-end:1rem;inset-inline:1rem;max-width:none;width:auto}
+        .service{grid-template-columns:1fr}
+        .actions{display:grid}
+    }
+    @media(forced-colors:active){.panel,.action{border:1px solid CanvasText}}
+</style>
+
+<section id="panel" class="panel" aria-labelledby="localAIStatusTitle" aria-busy="false">
+    <header class="heading">
+        <div>
+            <h2 id="localAIStatusTitle">Checking local AI</h2>
+            <p id="summary" role="status" aria-live="polite">Checking the selected local services.</p>
+        </div>
+        <button id="dismiss" class="dismiss" type="button" aria-label="Dismiss local AI status">&#x2715;</button>
+    </header>
+    <ul id="services" class="services" aria-label="Selected local AI services"></ul>
+    <div id="actions" class="actions" hidden>
+        <button id="retry" class="action" type="button">Retry</button>
+        <button id="settings" class="action secondary" type="button">Open Arcane Settings</button>
+        <a id="profile" class="action secondary">Open Profile</a>
+    </div>
+    <p id="nativeHelp" role="status" tabindex="-1" hidden>From the Arcane OS Home screen, open Settings, choose Local AI, review the signed service diagnostics, and then return here to Retry.</p>
+    <details id="manual" hidden>
+        <summary>Start local services manually</summary>
+        <p id="manualText">Open the Ollama application or run <code>ollama serve</code>. If local transcription or speech is selected, also start your installed Arcane speech runtime. Then return here and choose Retry.</p>
+    </details>
+</section>
+
+<script type="module">
+    const host=this;
+    const root=host.shadowRoot;
+    const panel=root.querySelector('#panel');
+    const title=root.querySelector('#localAIStatusTitle');
+    const summary=root.querySelector('#summary');
+    const services=root.querySelector('#services');
+    const actions=root.querySelector('#actions');
+    const retry=root.querySelector('#retry');
+    const settings=root.querySelector('#settings');
+    const profile=root.querySelector('#profile');
+    const nativeHelp=root.querySelector('#nativeHelp');
+    const manual=root.querySelector('#manual');
+    const manualText=root.querySelector('#manualText');
+    const dismiss=root.querySelector('#dismiss');
+    const labels=Object.freeze({
+        llm:'Language model',
+        stt:'Transcription',
+        tts:'Spoken responses'
+    });
+    const readyDismissDelay=5000;
+    let options={};
+    let readyDismissTimer=null;
+    let readyForDismiss=false;
+
+    host.begin=begin;
+    host.configure=configure;
+    host.present=present;
+
+    retry.addEventListener('click',function dispatchRetryRequest(){
+        host.dispatchEvent(new CustomEvent('local-ai-retry',{
+            bubbles:true,
+            composed:true
+        }));
+    });
+    settings.addEventListener('click',function showNativeRecoveryHelp(){
+        nativeHelp.hidden=false;
+        nativeHelp.focus?.();
+    });
+    dismiss.addEventListener('click',function dismissStatusManually(){
+        hideStatus('manual');
+    });
+    host.addEventListener('pointerenter',cancelReadyDismiss);
+    host.addEventListener('pointerleave',scheduleReadyDismiss);
+    host.addEventListener('focusin',cancelReadyDismiss);
+    host.addEventListener('focusout',scheduleReadyDismiss);
+
+    function cancelReadyDismiss(){
+        if(readyDismissTimer!==null){
+            clearTimeout(readyDismissTimer);
+            readyDismissTimer=null;
+        }
+    }
+
+    function scheduleReadyDismiss(){
+        cancelReadyDismiss();
+        if(!readyForDismiss){
+            return;
+        }
+        readyDismissTimer=setTimeout(autoDismissReadyStatus,readyDismissDelay);
+    }
+
+    function autoDismissReadyStatus(){
+        readyDismissTimer=null;
+        if(!readyForDismiss){
+            return;
+        }
+        if(host.matches(':hover')||root.activeElement){
+            return;
+        }
+        hideStatus('ready-timeout');
+    }
+
+    function hideStatus(reason){
+        cancelReadyDismiss();
+        readyForDismiss=false;
+        host.hidden=true;
+        host.dispatchEvent(new CustomEvent('local-ai-status-dismissed',{
+            bubbles:true,
+            composed:true,
+            detail:{reason}
+        }));
+    }
+
+    function configure(input={}){
+        options={
+            profileHref:host.dataset.profileHref||null,
+            ...options,
+            ...input
+        };
+        if(options.profileHref){
+            profile.href=new URL(options.profileHref,document.baseURI).href;
+        }else{
+            profile.removeAttribute('href');
+        }
+        return {...options};
+    }
+
+    function begin(requirements={}){
+        readyForDismiss=false;
+        cancelReadyDismiss();
+        host.hidden=false;
+        panel.setAttribute('aria-busy','true');
+        title.textContent='Checking local AI';
+        summary.setAttribute('role','status');
+        summary.textContent='Checking the selected local services.';
+        actions.hidden=true;
+        manual.hidden=true;
+        nativeHelp.hidden=true;
+        renderServices(requirements,'checking');
+    }
+
+    function present(report={}){
+        const runtime=report.runtime||{};
+        const results=report.slots||report.results||report;
+        const requiredEntries=Object.keys(labels).map(function createRequiredEntry(key){
+            return [
+                key,
+                normalizeResult(results?.[key])
+            ];
+        }).filter(function entryIsRequired(entry){
+            return entry[1].required;
+        });
+        const unavailable=requiredEntries.filter(function entryIsUnavailable(entry){
+            return !entry[1].ready;
+        });
+        const userManaged=report.mode==='user-managed-loopback';
+        const guidanceMessage=String(report?.guidance?.message||'').trim();
+        const browser=runtime.managedLocalAI===false||runtime.native===false||report.mode==='browser';
+        const manualRecovery=browser||userManaged;
+
+        if(requiredEntries.length===0){
+            readyForDismiss=false;
+            cancelReadyDismiss();
+            host.hidden=true;
+            return report;
+        }
+
+        host.hidden=false;
+        panel.setAttribute('aria-busy','false');
+        renderEntries(requiredEntries);
+        actions.hidden=unavailable.length===0;
+        manual.hidden=!manualRecovery||unavailable.length===0;
+        settings.hidden=manualRecovery;
+        profile.hidden=!manualRecovery;
+        nativeHelp.hidden=true;
+        manualText.textContent=userManaged
+            ?guidanceMessage
+                ||'Review the unavailable user-managed Android service, then return here and choose Retry. Arcane does not install, start, repair, pull, or otherwise manage local AI services or models.'
+            :'Open the Ollama application or run ollama serve. If local transcription or speech is selected, also start your installed Arcane speech runtime. Then return here and choose Retry.';
+
+        if(unavailable.length===0){
+            title.textContent='Local AI is ready';
+            summary.setAttribute('role','status');
+            summary.textContent=userManaged
+                ?'The Android host admitted the selected model through your reachable Android Linux Terminal/Ollama service. Arcane does not manage its lifecycle.'
+                :'The selected local model and speech services are available.';
+            readyForDismiss=true;
+            scheduleReadyDismiss();
+            return report;
+        }
+
+        readyForDismiss=false;
+        cancelReadyDismiss();
+        title.textContent='Local AI needs attention';
+        summary.setAttribute('role','alert');
+        summary.textContent=userManaged
+            ?guidanceMessage
+                ||'Review the unavailable user-managed Android service, then Retry or open Profile and switch the affected option to OpenAI.'
+            :browser
+            ?'Start the unavailable local service yourself and Retry, or open Profile, switch each affected option to OpenAI, and enter your OpenAI API key.'
+            :'Arcane could not recover every selected managed local service. Retry or open Arcane Settings > Local AI.';
+        return report;
+    }
+
+    function positiveSafeInteger(value){
+        return Number.isSafeInteger(value)&&value>0
+            ?value
+            :null;
+    }
+
+    function normalizeResult(value={}){
+        if(typeof value==='boolean'){
+            return {
+                required:true,
+                ready:value,
+                activeParallelRequests:null,
+                message:''
+            };
+        }
+        return {
+            required:Boolean(value?.required),
+            ready:Boolean(value?.ready),
+            activeParallelRequests:positiveSafeInteger(
+                value?.activeParallelRequests
+            ),
+            message:String(value?.message||value?.reason||value?.errorCode||'')
+        };
+    }
+
+    function renderServices(requirements,state){
+        const entries=Object.keys(labels).map(function createCheckingEntry(key){
+            return [
+                key,
+                {
+                    required:Boolean(requirements?.[key]?.required??requirements?.[key]),
+                    ready:false,
+                    activeParallelRequests:null,
+                    message:''
+                }
+            ];
+        }).filter(function checkingEntryIsRequired(entry){
+            return entry[1].required;
+        });
+        renderEntries(entries,state);
+    }
+
+    function serviceStatusText(result={},base=''){
+        const parallelRequests=positiveSafeInteger(
+            result.activeParallelRequests
+        );
+
+        if(parallelRequests===null){
+            return base;
+        }
+
+        return `${base} — numParallel ${parallelRequests}`;
+    }
+
+    function renderEntries(entries,state=''){
+        const fragment=document.createDocumentFragment();
+        for(const [key,result] of entries){
+            const item=document.createElement('li');
+            const name=document.createElement('span');
+            const status=document.createElement('span');
+            const itemState=state==='checking'
+                ?'checking'
+                :result.ready
+                    ?'ready'
+                    :'unavailable';
+            item.className='service';
+            item.dataset.state=itemState;
+            name.className='service-name';
+            name.textContent=labels[key];
+            status.className='service-state';
+            status.textContent=state==='checking'
+                ?'Checking...'
+                :result.ready
+                    ?serviceStatusText(result,'Ready')
+                    :serviceStatusText(
+                        result,
+                        result.message||'Unavailable'
+                    );
+            item.append(name,status);
+            fragment.append(item);
+        }
+        services.replaceChildren(fragment);
+    }
+
+    configure();
+    host.hidden=true;
+    host.ready=true;
+    host.dispatchEvent(new CustomEvent('local-ai-status-ready',{bubbles:true,composed:true}));
+</script>