arcane-os 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arcane-os",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Arcane OS JavaScript SDK, project-local CLI, browser runtime, and repository-portable application packager.",
   "type": "module",
   "main": "./src/index.mjs",

package/runtime/ARCANE_RUNTIME_RELEASE.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
   "builder": "arcane-sdk-runtime-v1",
-  "sdkVersion": "0.2.0",
+  "sdkVersion": "0.2.2",
   "source": {
     "authority": "sdk-canonical",
     "repository": "https://github.com/TheWizardNexus/arcane-os-sdk.git",
@@ -14,8 +14,8 @@
     }
   },
   "fileCount": 160,
-  "totalBytes": 3549207,
-  "contentSha256": "fa3bcddb5479817971a400049dbeff8431c6499d708e9a8b714176715c5a015a",
+  "totalBytes": 3643083,
+  "contentSha256": "0b09b1fd548152416f583d5e117197c7886b5a9e63071e43493577b4090e4a8c",
   "files": [
     {
       "path": "arcane/components/app-bar.html",
@@ -39,8 +39,8 @@
     },
     {
       "path": "arcane/components/chat.html",
-      "bytes": 52132,
-      "sha256": "42d4769a074e70b5c2768e850eaf29a25c93ee9e8734724b72b2ad585e19b2ca"
+      "bytes": 60478,
+      "sha256": "2f3a7f454c1e3da64c9eaeedb0869d49f04636b20ff59e5116a671e0d0a17973"
     },
     {
       "path": "arcane/components/conversation-view.html",
@@ -159,8 +159,8 @@
     },
     {
       "path": "arcane/components/speech.html",
-      "bytes": 38217,
-      "sha256": "61786685b7f4f257da77db2cbbe8230b379c56292ad635081f5b0763d5f48e1e"
+      "bytes": 49596,
+      "sha256": "2a8b2929d28699ab9011f358b09b5fd2d53a0703542b2fee5cda8334261c6c86"
     },
     {
       "path": "arcane/components/summary-strip.html",
@@ -374,8 +374,8 @@
     },
     {
       "path": "arcane/modules/AI.js",
-      "bytes": 81061,
-      "sha256": "8e34445ad394064dae970583147b635de81d878a6caebb8a60d64b34dbc9e658"
+      "bytes": 120607,
+      "sha256": "703a5342ed0c0758cccdfd8469fbae6d86e91de8c43ec01c893619daf97c2d34"
     },
     {
       "path": "arcane/modules/AIPreferenceRuntime.js",
@@ -389,8 +389,8 @@
     },
     {
       "path": "arcane/modules/AIProviderRuntime.js",
-      "bytes": 83261,
-      "sha256": "32aa65b464ea9a9317d47f382063fc052e1f47e63e6c65c28e58898e0ab4911a"
+      "bytes": 93507,
+      "sha256": "d1b33f678431128cefe6f43daabe177794e758c770394098871cf4ac726926b8"
     },
     {
       "path": "arcane/modules/AIResponseLength.js",
@@ -404,8 +404,8 @@
     },
     {
       "path": "arcane/modules/AIRuntimeState.js",
-      "bytes": 24783,
-      "sha256": "8b9bfaf208eb44455b581d8e700cec785044f81595dcf839dcdfa3e06ed0f5fa"
+      "bytes": 25379,
+      "sha256": "492162cec5e6a8b9e9b437833172905b2cb4e352ca1ef30104c65ec29cf3fa29"
     },
     {
       "path": "arcane/modules/AnsiText.js",
@@ -499,8 +499,8 @@
     },
     {
       "path": "arcane/modules/ConfiguredAIChatSession.js",
-      "bytes": 21462,
-      "sha256": "12e02b169be6867d82ef8be75bcb1c2b367e778609e8d065389ed109d896c4c8"
+      "bytes": 24501,
+      "sha256": "f95c3421bf07397e987f77fc3d02166cf780059dd3d6de90ceaded990752f51b"
     },
     {
       "path": "arcane/modules/ConversationActionItems.js",
@@ -534,8 +534,8 @@
     },
     {
       "path": "arcane/modules/DBOPFSDocumentLibrary.js",
-      "bytes": 29977,
-      "sha256": "4c551b5917d1577b8b46b08457cf762d7ab7548222abd6f4a72c7c7ab5c697b7"
+      "bytes": 50695,
+      "sha256": "2831470ce54c3393595bf068d60c2e774804cbd51dba7491ad734bbfbea7f32f"
     },
     {
       "path": "arcane/modules/DBOPFSWorker.js",
@@ -599,8 +599,8 @@
     },
     {
       "path": "arcane/modules/LocalAIReadinessController.js",
-      "bytes": 4334,
-      "sha256": "32d4ce2639557b89a283754a67435226777b56df696ce7a76231ec6c0274b25c"
+      "bytes": 4340,
+      "sha256": "f80d51d0ad499664f265b4f2d52a46ede521a78d56714fecb0e13b939b261007"
     },
     {
       "path": "arcane/modules/MD.js",

package/runtime/arcane/components/chat.html

@@ -100,6 +100,7 @@
     }
 
     .chat_area[data-conversation-complete="true"] .conversation_timebox,
+    .chat_area[data-conversation-complete="true"] .ai_activation,
     .chat_area[data-conversation-complete="true"] .chat_input_area,
     .chat_area[data-conversation-complete="true"] > #speech,
     .chat_area[data-conversation-complete="true"] > .controls{
@@ -209,6 +210,63 @@
         box-shadow: var(--arcane-shadow-small, 0 .35rem 1rem var(--shadow-color));
     }
 
+    .ai_activation {
+        display:flex;
+        flex:0 0 auto;
+        box-sizing:border-box;
+        width:100%;
+        padding:var(--arcane-space-3, .75rem);
+        align-items:center;
+        justify-content:space-between;
+        gap:var(--arcane-space-3, .75rem);
+        border:1px solid var(--arcane-border, var(--border-color));
+        border-radius:var(--arcane-chat-radius);
+        background:var(--arcane-surface-raised, var(--modal-background));
+        color:var(--text-color);
+    }
+
+    .ai_activation[hidden] {
+        display:none;
+    }
+
+    .ai_activation_copy {
+        min-width:0;
+    }
+
+    .ai_activation_copy strong,
+    .ai_activation_copy span {
+        display:block;
+        overflow-wrap:anywhere;
+    }
+
+    .ai_activation_copy span {
+        margin-block-start:.22rem;
+        font-size:.9rem;
+    }
+
+    .ai_activation button {
+        flex:0 0 auto;
+        min-height:2.65rem;
+        padding:.55rem .8rem;
+        border:1px solid var(--arcane-action, var(--primary-color));
+        border-radius:var(--arcane-radius-medium, .7rem);
+        background:var(--arcane-action, var(--primary-color));
+        color:var(--arcane-action-text, var(--button-text-color, var(--text-color)));
+        font:inherit;
+        font-weight:600;
+        cursor:pointer;
+    }
+
+    .ai_activation button:focus-visible {
+        outline:.2rem solid var(--arcane-focus, var(--focus-color));
+        outline-offset:.18rem;
+    }
+
+    .ai_activation button:disabled {
+        cursor:not-allowed;
+        opacity:.65;
+    }
+
     .chat_input {
         box-sizing: border-box;
         width: 100%;
@@ -421,6 +479,20 @@
         >Starting the elapsed timer.</span>
     </section>
     <ul type='text' class='chat_output' id='chat_output' tabindex='-1' aria-label='Conversation transcript'></ul>
+    <section
+        id="ai_activation"
+        class="ai_activation"
+        role="status"
+        aria-live="polite"
+        aria-busy="false"
+        hidden
+    >
+        <span class="ai_activation_copy">
+            <strong id="ai_activation_title">Language model not active</strong>
+            <span id="ai_activation_status">Start the selected language model to enable chat.</span>
+        </span>
+        <button type="button" id="ai_activation_button">Start language model</button>
+    </section>
     <div class="chat_input_area">
         <textarea type='text' class='chat_input' id='chat_input'></textarea>
         <button type="button" id="chat_upload" class="chat_upload" title="Upload files" aria-label="Upload files">
@@ -624,11 +696,15 @@
     const conversationTimeboxPanel=shadowRoot.querySelector('#conversation_timebox');
     const conversationTimeboxElapsed=shadowRoot.querySelector('#conversation_timebox_elapsed');
     const conversationTimeboxStatus=shadowRoot.querySelector('#conversation_timebox_status');
+    const aiActivationPanel=shadowRoot.querySelector('#ai_activation');
+    const aiActivationTitle=shadowRoot.querySelector('#ai_activation_title');
+    const aiActivationStatus=shadowRoot.querySelector('#ai_activation_status');
+    const aiActivationButton=shadowRoot.querySelector('#ai_activation_button');
     const [
         {default:MD},
         {default:FileEntity},
         {ConversationSubmissionBarrier,requireConversationTimeboxDelivery},
-        {subscribeAIRuntimeState}
+        {requestAIRuntimeIntent,subscribeAIRuntimeState}
     ]=await Promise.all([
         import('../modules/MD.js'),
         import('../entities/File.js'),
@@ -643,8 +719,7 @@
         ?speech.initialMuted
         :true;
     let initialSpeechMuteListenerInstalled=false;
-    let pendingSpeechAvailability=null;
-    let speechAvailabilityListenerInstalled=false;
+    let latestAIRuntimeRoles=null;
     const hostSubmissionBarrier=new ConversationSubmissionBarrier();
     const aiRuntimeStateAbortController=new AbortController();
     let programmaticSubmissionQueue=Promise.resolve(true);
@@ -663,6 +738,18 @@
         console.warn('html-import chat.html `host.languageChanged` method not implemented.\n\nThis can also be done by listening for the "chat-language-changed" event.\n\nIt is still best practice to implement the `.languageChanged` method atleast with an empty function.\n\n')
     }
 
+    host.requestAIActivation=host.requestAIActivation||function requestAIActivation(intent){
+        return requestAIRuntimeIntent(intent);
+    }
+
+    const aiActivationController=createAIActivationController({
+        host,
+        panel:aiActivationPanel,
+        title:aiActivationTitle,
+        status:aiActivationStatus,
+        button:aiActivationButton
+    });
+
     host.streamMessage=streamMessage;
     host.setMessageProgress=setMessageProgress;
     host.setAIAvailability=setAIAvailability;
@@ -822,36 +909,32 @@
     }
 
     function setAIAvailability(input={}){
-        const explicitSpeechAvailability={};
         const availability={
-            llm:Object.prototype.hasOwnProperty.call(input,'llm')
+            llm:hasSelectedAIRuntimeRole('llm')
+                ?latestAIRuntimeRoles.llm.state==='ready'
+                :Object.prototype.hasOwnProperty.call(input,'llm')
                 ?Boolean(input.llm)
                 :host.aiAvailability.llm,
-            stt:Object.prototype.hasOwnProperty.call(input,'stt')
-                ?Boolean(input.stt)
+            stt:latestAIRuntimeRoles
+                ?latestAIRuntimeRoles.stt.state==='ready'
                 :host.aiAvailability.stt,
-            tts:Object.prototype.hasOwnProperty.call(input,'tts')
-                ?Boolean(input.tts)
+            tts:latestAIRuntimeRoles
+                ?latestAIRuntimeRoles.tts.state==='ready'
                 :host.aiAvailability.tts
         };
 
-        if(Object.prototype.hasOwnProperty.call(input,'stt')){
-            explicitSpeechAvailability.stt=availability.stt;
-        }
-        if(Object.prototype.hasOwnProperty.call(input,'tts')){
-            explicitSpeechAvailability.tts=availability.tts;
-        }
         applyAIAvailability(availability);
-        if(Object.keys(explicitSpeechAvailability).length){
-            pendingSpeechAvailability={
-                ...(pendingSpeechAvailability||{}),
-                ...explicitSpeechAvailability
-            };
-            synchronizeSpeechCompatibilityAvailability();
-        }
         return {...availability};
     }
 
+    function hasSelectedAIRuntimeRole(role){
+        const record=latestAIRuntimeRoles?.[role];
+        return typeof record?.providerId==='string'
+            &&record.providerId.length>0
+            &&typeof record?.modelId==='string'
+            &&record.modelId.length>0;
+    }
+
     function applyAIAvailability(availability){
         host.aiAvailability={...availability};
         send.disabled=host.conversationComplete||!availability.llm;
@@ -861,43 +944,195 @@
         send.setAttribute('aria-label',send.title);
     }
 
-    function synchronizeAIRuntimeState(snapshot){
-        applyAIAvailability({
-            llm:snapshot.roles.llm.state==='ready',
-            stt:snapshot.roles.stt.state==='ready',
-            tts:snapshot.roles.tts.state==='ready'
-        });
-    }
+    function createAIActivationController({host,panel,title,status,button,EventClass=CustomEvent}){
+        let role=null;
+        let requestPending=false;
+        let requestError='';
+        let destroyed=false;
 
-    function synchronizeSpeechCompatibilityAvailability(){
-        if(!pendingSpeechAvailability){
-            return;
+        function visibleError(error,fallback){
+            const message=typeof error?.message==='string'
+                ?error.message.trim()
+                :'';
+            return (message||fallback).slice(0,240);
         }
-        if(speech.componentReady){
-            const availability=pendingSpeechAvailability;
-            pendingSpeechAvailability=null;
-            speech.setAvailability?.({...availability});
-            return;
+
+        function cancellation(error){
+            return error?.name==='AbortError'
+                ||['ARCANE_AI_REQUEST_ABORTED','AI_CHAT_ABORTED'].includes(error?.code);
         }
-        if(speechAvailabilityListenerInstalled){
-            return;
+
+        function selected(){
+            return typeof role?.providerId==='string'
+                &&role.providerId.length>0
+                &&typeof role?.modelId==='string'
+                &&role.modelId.length>0;
         }
 
-        speechAvailabilityListenerInstalled=true;
-        speech.addEventListener(
-            'speech-ready',
-            applyPendingSpeechAvailability,
-            {once:true}
-        );
-    }
+        function progressMessage(){
+            if(!role?.progress){
+                return 'The selected language model is loading.';
+            }
+            const progress=role.progress;
+            const amount=progress.total===null
+                ?`${progress.completed} ${progress.unit}`
+                :`${progress.completed} of ${progress.total} ${progress.unit}`;
+            return `${progress.phase}, ${amount}${progress.heartbeat?', active heartbeat':''}.`;
+        }
+
+        function render(){
+            const visible=selected()&&role.state!=='ready';
+            panel.hidden=!visible;
+            panel.setAttribute(
+                'aria-busy',
+                String(requestPending||['loading','unloading'].includes(role?.state))
+            );
+            if(!visible){
+                return;
+            }
+            if(requestPending){
+                title.textContent='Requesting language model activation';
+                status.textContent='Waiting for the selected language model runtime.';
+                button.textContent='Requesting…';
+                button.disabled=true;
+                return;
+            }
+            if(role.state==='loading'){
+                title.textContent='Starting language model';
+                status.textContent=progressMessage();
+                button.textContent='Cancel loading';
+                button.disabled=false;
+                return;
+            }
+            if(role.state==='unloading'){
+                title.textContent='Canceling language model load';
+                status.textContent='Waiting for the selected language model runtime to stop.';
+                button.textContent='Canceling…';
+                button.disabled=true;
+                return;
+            }
+            if(role.state==='error'||requestError){
+                title.textContent='Language model activation failed';
+                status.textContent=requestError||visibleError(
+                    role.error,
+                    'The selected language model could not start.'
+                );
+                button.textContent='Try again';
+                button.disabled=false;
+                return;
+            }
+            if(role.state==='unloaded'){
+                title.textContent='Language model not active';
+                status.textContent='Start the selected language model to enable chat.';
+                button.textContent='Start language model';
+                button.disabled=false;
+                return;
+            }
+            title.textContent='Language model unavailable';
+            status.textContent='The selected language model cannot be activated in this state.';
+            button.textContent='Unavailable';
+            button.disabled=true;
+        }
 
-    function applyPendingSpeechAvailability(){
-        speechAvailabilityListenerInstalled=false;
-        if(pendingSpeechAvailability){
-            const availability=pendingSpeechAvailability;
-            pendingSpeechAvailability=null;
-            speech.setAvailability?.({...availability});
+        async function request(action){
+            if(destroyed||requestPending||!selected()){
+                return false;
+            }
+            const permitted=action==='load'
+                ?['unloaded','error'].includes(role.state)
+                :action==='unload'&&role.state==='loading';
+            if(!permitted){
+                return false;
+            }
+            requestError='';
+            const intent=Object.freeze({role:'llm',action,reason:'user'});
+            const request=Object.freeze({intent,state:role});
+            const activationEvent=new EventClass(
+                'chat-ai-activation-request',
+                {
+                    bubbles:true,
+                    composed:true,
+                    cancelable:true,
+                    detail:request
+                }
+            );
+            if(!host.dispatchEvent(activationEvent)){
+                render();
+                return false;
+            }
+            requestPending=true;
+            render();
+            try{
+                await host.requestAIActivation(intent);
+                return true;
+            }catch(error){
+                if(action==='load'
+                    &&cancellation(error)
+                    &&['unloaded','unloading'].includes(role?.state)){
+                    return false;
+                }
+                const message=visibleError(
+                    error,
+                    `The language model ${action} request failed.`
+                );
+                requestError=message;
+                host.dispatchEvent(
+                    new EventClass(
+                        'chat-ai-activation-error',
+                        {
+                            bubbles:true,
+                            composed:true,
+                            detail:Object.freeze({request,error,message})
+                        }
+                    )
+                );
+                return false;
+            }finally{
+                requestPending=false;
+                render();
+            }
+        }
+
+        function activateSelectedAI(){
+            const action=role?.state==='loading'?'unload':'load';
+            void request(action);
+        }
+
+        function synchronize(nextRole){
+            if(destroyed){
+                return;
+            }
+            if(role?.state!==nextRole.state
+                ||role?.providerId!==nextRole.providerId
+                ||role?.modelId!==nextRole.modelId){
+                requestError='';
+                requestPending=false;
+            }
+            role=nextRole;
+            render();
         }
+
+        function destroy(){
+            if(destroyed){
+                return;
+            }
+            destroyed=true;
+            button.removeEventListener('click',activateSelectedAI);
+            panel.hidden=true;
+        }
+
+        button.addEventListener('click',activateSelectedAI);
+        return Object.freeze({request,synchronize,destroy});
+    }
+
+    function synchronizeAIRuntimeState(snapshot){
+        latestAIRuntimeRoles=snapshot.roles;
+        aiActivationController.synchronize(snapshot.roles.llm);
+        applyAIAvailability({
+            llm:snapshot.roles.llm.state==='ready',
+            stt:snapshot.roles.stt.state==='ready',
+            tts:snapshot.roles.tts.state==='ready'
+        });
     }
 
     function formatConversationTime(milliseconds=0){
@@ -1432,6 +1667,7 @@
 
     function destroy(){
         aiRuntimeStateAbortController.abort();
+        aiActivationController.destroy();
         window.removeEventListener('pagehide',destroy);
         speech.destroy?.();
         host.ready=false;