fix: make Laya status consistent between Settings and ChannelList (#12)

The model was reported as ready while the AI runtime was actually
unreachable, and the Download action stayed visible afterwards.
Distinguish model-downloaded from runtime-available in
layaStatusPresentation, derive the Download action from the real
combined state, and align Settings and ChannelList rendering on that
single source of truth. Cover the combined status cases with tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/css/main.css

@@ -776,6 +776,30 @@ h4 {
   gap: var(--space-sm);
 }
 
+.laya-component-status {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-xs);
+  margin-top: var(--space-sm);
+}
+
+#laya-service-state {
+  margin-top: 4px;
+}
+
+.laya-start-command {
+  padding: var(--space-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-secondary);
+  overflow-x: auto;
+  user-select: all;
+}
+
+.laya-notice-action {
+  margin-left: var(--space-sm);
+  padding: 2px var(--space-xs);
+}
+
 .laya-progress {
   margin-top: var(--space-md);
 }

public/index.html

@@ -10,7 +10,7 @@
   <title>nodecast-tv | IPTV Player</title>
   <meta name="description" content="Stream live TV, movies, and series with EPG support">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-  <link rel="stylesheet" href="css/main.css?v=4">
+  <link rel="stylesheet" href="css/main.css?v=5">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@800&display=swap"
@@ -485,9 +485,10 @@
                 </div>
                 <div class="laya-model-panel" id="laya-model-panel">
                   <div class="laya-model-heading">
-                    <div><strong>Local AI model · Laya</strong><div id="laya-model-status" class="setting-hint" role="status">Checking status…</div></div>
+                    <div><strong>Local AI · Laya</strong><div id="laya-model-status" class="setting-hint" role="status">Checking status…</div></div>
-                    <span id="laya-model-size" class="setting-hint"></span>
                   </div>
+                  <div class="laya-component-status"><span id="laya-model-state">Model: Checking…</span><span id="laya-model-size" class="setting-hint"></span></div>
+                  <div id="laya-service-state">Local AI service: Checking…</div>
                   <div id="laya-model-message" class="setting-hint"></div>
                   <div id="laya-download-progress" class="laya-progress" hidden>
                     <div id="laya-progress-track" class="laya-progress-track" role="progressbar" aria-label="Local AI model download progress">
@@ -500,8 +501,11 @@
                   <div class="laya-model-actions">
                     <button type="button" class="btn btn-primary" id="laya-download-model">Download model</button>
                     <button type="button" class="btn btn-ghost" id="laya-remove-model">Remove downloaded model</button>
+                    <button type="button" class="btn btn-ghost" id="laya-check-again" hidden>Check again</button>
+                    <button type="button" class="btn btn-ghost" id="laya-copy-command" hidden>Copy start command</button>
                     <button type="button" class="btn btn-ghost" id="laya-use-standard" hidden>Use Standard</button>
                   </div>
+                  <div id="laya-start-command" class="laya-start-command" hidden><code>docker compose --profile laya up -d</code></div>
                   <p class="setting-hint">The model runs on this server. Channel names and metadata are not sent to an AI service.</p>
                 </div>
               </div>
@@ -1180,9 +1184,9 @@
   <script src="/js/components/VideoPlayer.js?v=5"></script>
   <script src="/js/services/channelLanguageDetection.js?v=1"></script>
   <script src="/js/services/channelLanguageFusion.js?v=1"></script>
-  <script src="/js/services/layaStatusPresentation.js?v=1"></script>
+  <script src="/js/services/layaStatusPresentation.js?v=2"></script>
   <script src="/js/services/channelVariantGrouping.js?v=4"></script>
-  <script src="/js/components/ChannelList.js?v=7"></script>
+  <script src="/js/components/ChannelList.js?v=8"></script>
   <script src="/js/components/SourceManager.js?v=2"></script>
   <script src="/js/components/EpgGuide.js?v=2"></script>
   <script src="/js/pages/HomePage.js?v=2"></script>
@@ -1190,7 +1194,7 @@
   <script src="/js/pages/Guide.js?v=2"></script>
   <script src="/js/pages/MoviesPage.js?v=4"></script>
   <script src="/js/pages/SeriesPage.js?v=1"></script>
-  <script src="/js/pages/Settings.js?v=5"></script>
+  <script src="/js/pages/Settings.js?v=6"></script>
   <script src="/js/pages/WatchPage.js?v=1"></script>
   <script src="/js/app.js?v=4"></script>
   <script>

public/js/components/ChannelList.js

@@ -33,6 +33,7 @@ class ChannelList {
         this.channelLanguagePreferences = this.loadChannelLanguagePreferences();
         this.layaLanguageResults = new Map();
         this.languageDetectionNotice = '';
+        this.languageDetectionFallback = false;
         this._languageDetectionRequest = 0;
 
         this.loadCollapsedState();
@@ -335,6 +336,7 @@ class ChannelList {
         const safeMode = ['algo', 'laya', 'hybrid'].includes(mode) ? mode : 'algo';
         this.layaLanguageResults.clear();
         this.languageDetectionNotice = '';
+        this.languageDetectionFallback = false;
         if (this.channels.length > 0) {
             this.render();
             void this.refreshLayaLanguages(safeMode);
@@ -346,6 +348,7 @@ class ChannelList {
         if (mode === 'algo') {
             this.layaLanguageResults.clear();
             this.languageDetectionNotice = '';
+            this.languageDetectionFallback = false;
             return;
         }
 
@@ -359,6 +362,15 @@ class ChannelList {
         });
         const results = new Map();
         try {
+            const status = await API.laya.getStatus();
+            if (!status?.modelPresent || !status?.runtimeAvailable) {
+                if (requestId !== this._languageDetectionRequest) return;
+                this.layaLanguageResults.clear();
+                this.languageDetectionFallback = true;
+                this.languageDetectionNotice = 'Local AI service is unavailable. Standard channel matching is being used.';
+                this.render();
+                return;
+            }
             for (let index = 0; index < descriptors.length; index += 64) {
                 const response = await API.laya.detectLanguages(descriptors.slice(index, index + 64));
                 (response.results || []).forEach(result => results.set(String(result.id), result));
@@ -366,12 +378,12 @@ class ChannelList {
             if (requestId !== this._languageDetectionRequest) return;
             this.layaLanguageResults = results;
             this.languageDetectionNotice = '';
+            this.languageDetectionFallback = false;
         } catch (err) {
             if (requestId !== this._languageDetectionRequest) return;
             this.layaLanguageResults.clear();
-            this.languageDetectionNotice = mode === 'hybrid'
+            this.languageDetectionFallback = true;
-                ? 'Local AI is unavailable; using standard channel matching.'
+            this.languageDetectionNotice = 'Local AI service is unavailable. Standard channel matching is being used.';
-                : 'Local AI is unavailable. Download or start the model in Settings.';
             console.warn('[ChannelList] Local AI language detection unavailable:', err.message);
         }
         this.render();
@@ -405,7 +417,9 @@ class ChannelList {
             selectedVariants: this.selectedVariants,
             preferredLanguage: this.preferredLanguage,
             languagePreferences: this.channelLanguagePreferences,
-            languageMode: window.app?.player?.settings?.languageDetectionMode || 'algo',
+            languageMode: this.languageDetectionFallback
+                ? 'algo'
+                : (window.app?.player?.settings?.languageDetectionMode || 'algo'),
             languageResults: this.layaLanguageResults,
             isFavorite: channel => this.isFavorite(channel.sourceId, channel.id),
             isHidden: channel => this.isHidden('channel', channel.sourceId, channel.streamId || channel.id)
@@ -420,6 +434,15 @@ class ChannelList {
             notice.className = 'laya-language-notice';
             notice.setAttribute('role', 'status');
             notice.textContent = this.languageDetectionNotice;
+            const settingsButton = document.createElement('button');
+            settingsButton.type = 'button';
+            settingsButton.className = 'btn btn-ghost laya-notice-action';
+            settingsButton.textContent = 'Open settings';
+            settingsButton.addEventListener('click', () => {
+                window.app?.navigateTo?.('settings');
+                window.app?.pages?.settings?.switchTab?.('player');
+            });
+            notice.appendChild(settingsButton);
             this.container.appendChild(notice);
         }
 

public/js/pages/Settings.js

@@ -126,6 +126,8 @@ class SettingsPage {
             }
         });
         document.getElementById('laya-use-standard')?.addEventListener('click', () => this.useStandardLanguageDetection());
+        document.getElementById('laya-check-again')?.addEventListener('click', () => void this.loadLayaStatus());
+        document.getElementById('laya-copy-command')?.addEventListener('click', () => void this.copyLayaStartCommand());
         document.getElementById('laya-show-details')?.addEventListener('click', () => {
             const details = document.getElementById('laya-error-details');
             const button = document.getElementById('laya-show-details');
@@ -149,11 +151,16 @@ class SettingsPage {
 
     renderLayaStatus(status = {}) {
         const statusElement = document.getElementById('laya-model-status');
+        const modelStateElement = document.getElementById('laya-model-state');
+        const serviceStateElement = document.getElementById('laya-service-state');
         const sizeElement = document.getElementById('laya-model-size');
         const messageElement = document.getElementById('laya-model-message');
         const downloadButton = document.getElementById('laya-download-model');
         const removeButton = document.getElementById('laya-remove-model');
         const useStandardButton = document.getElementById('laya-use-standard');
+        const checkAgainButton = document.getElementById('laya-check-again');
+        const copyCommandButton = document.getElementById('laya-copy-command');
+        const startCommand = document.getElementById('laya-start-command');
         const progress = document.getElementById('laya-download-progress');
         const progressTrack = document.getElementById('laya-progress-track');
         const progressBar = document.getElementById('laya-progress-bar');
@@ -165,12 +172,17 @@ class SettingsPage {
         const mode = this.app.player?.settings?.languageDetectionMode || 'algo';
         const presentation = LayaStatusPresentation.presentLayaStatus(status, mode);
         statusElement.textContent = presentation.statusLabel;
+        modelStateElement.textContent = presentation.modelLabel;
+        serviceStateElement.textContent = presentation.serviceLabel;
         const size = status.sizeBytes || status.runtime?.modelSizeBytes;
-        sizeElement.textContent = size ? this.formatBytes(size) : '';
+        sizeElement.textContent = size ? `· ${this.formatBytes(size)}` : '';
         downloadButton.hidden = !presentation.showDownload;
         downloadButton.textContent = presentation.downloadLabel;
         removeButton.hidden = !presentation.showRemove;
         useStandardButton.hidden = !presentation.showUseStandard;
+        checkAgainButton.hidden = !presentation.showCheckAgain;
+        copyCommandButton.hidden = !presentation.showStartCommand;
+        startCommand.hidden = !presentation.showStartCommand;
         downloadButton.disabled = presentation.busy || Boolean(this.layaOperationPending);
         removeButton.disabled = presentation.busy || Boolean(this.layaOperationPending);
 
@@ -199,6 +211,7 @@ class SettingsPage {
         details.hidden = true;
         details.textContent = presentation.errorDetail;
         if (presentation.errorMessage) messageElement.textContent = presentation.errorMessage;
+        else if (presentation.availabilityMessage) messageElement.textContent = presentation.availabilityMessage;
         else if (this.layaOperationPending) messageElement.textContent = this.layaOperationPending;
         else if (mode !== 'algo' && (!status.modelPresent || !status.runtimeAvailable)) {
             messageElement.textContent = 'Local AI is not ready. Download the model and ensure the runtime is running. Live TV will remain available.';
@@ -266,6 +279,24 @@ class SettingsPage {
         this.renderLayaStatus(this.layaStatus);
     }
 
+    async copyLayaStartCommand() {
+        const command = 'docker compose --profile laya up -d';
+        const button = document.getElementById('laya-copy-command');
+        try {
+            await navigator.clipboard.writeText(command);
+            button.textContent = 'Copied';
+        } catch {
+            const code = document.querySelector('#laya-start-command code');
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(code);
+            selection.removeAllRanges();
+            selection.addRange(range);
+            button.textContent = 'Command selected';
+        }
+        setTimeout(() => { button.textContent = 'Copy start command'; }, 2000);
+    }
+
     async initTranscodingSettings() {
         // Encoder settings
         const hwEncoderSelect = document.getElementById('setting-hw-encoder');

public/js/services/layaStatusPresentation.js

@@ -37,11 +37,24 @@
         const progressPercent = determined ? Math.max(0, Math.min(100, Math.round(percentValue))) : null;
         const error = errorParts(status);
         const failed = phase === 'failed';
+        const modelPresent = status.modelPresent === true;
+        const runtimeAvailable = status.runtimeAvailable === true;
+        const ready = modelPresent && runtimeAvailable && !busy && !failed;
+        const statusLabel = ready
+            ? 'Ready'
+            : failed || busy
+                ? PHASE_LABELS[phase]
+                : modelPresent && !runtimeAvailable
+                    ? 'Local AI service unavailable'
+                    : !modelPresent
+                        ? 'Model not downloaded'
+                        : PHASE_LABELS[phase];
         return {
             phase,
-            statusLabel: status.modelPresent && phase === 'idle'
+            ready,
-                ? (status.runtimeAvailable ? 'Model ready' : 'Model downloaded · runtime unavailable')
+            statusLabel,
-                : PHASE_LABELS[phase],
+            modelLabel: `Model: ${modelPresent ? 'Downloaded' : 'Not downloaded'}`,
+            serviceLabel: `Local AI service: ${runtimeAvailable ? 'Available' : 'Unavailable'}`,
             busy,
             showProgress: phase === 'downloading',
             progressIndeterminate: phase === 'downloading' && progressPercent === null,
@@ -53,9 +66,14 @@
             errorMessage: failed ? (error.message || 'The local AI model could not be downloaded.') : '',
             errorDetail: failed ? error.detail : '',
             downloadLabel: failed ? 'Retry download' : 'Download model',
-            showDownload: !busy && !status.modelPresent && (phase === 'idle' || failed),
+            showDownload: !busy && !modelPresent && (phase === 'idle' || failed),
-            showRemove: !busy && Boolean(status.modelPresent) && !failed,
+            showRemove: !busy && modelPresent,
-            showUseStandard: failed && mode !== 'algo'
+            showUseStandard: failed && mode !== 'algo',
+            showCheckAgain: !busy && modelPresent && !runtimeAvailable,
+            showStartCommand: !busy && modelPresent && !runtimeAvailable,
+            availabilityMessage: modelPresent && !runtimeAvailable
+                ? 'The model is installed, but the Local AI service is not running. Standard channel matching is being used.'
+                : ''
         };
     }
 

test/layaStatusPresentation.test.js

@@ -41,3 +41,28 @@ test('ready models expose removal without download actions', () => {
     assert.equal(view.showRemove, true);
     assert.equal(view.showDownload, false);
 });
+
+test('installed model with unavailable service is not reported ready', () => {
+    const view = presentLayaStatus({
+        phase: 'idle',
+        modelPresent: true,
+        runtimeAvailable: false,
+        sizeBytes: 10
+    }, 'hybrid');
+    assert.equal(view.ready, false);
+    assert.equal(view.statusLabel, 'Local AI service unavailable');
+    assert.equal(view.modelLabel, 'Model: Downloaded');
+    assert.equal(view.serviceLabel, 'Local AI service: Unavailable');
+    assert.equal(view.showDownload, false);
+    assert.equal(view.showRemove, true);
+    assert.equal(view.showCheckAgain, true);
+    assert.equal(view.showStartCommand, true);
+    assert.equal(view.availabilityMessage, 'The model is installed, but the Local AI service is not running. Standard channel matching is being used.');
+});
+
+test('missing model keeps download available', () => {
+    const view = presentLayaStatus({ phase: 'idle', modelPresent: false, runtimeAvailable: false });
+    assert.equal(view.showDownload, true);
+    assert.equal(view.showRemove, false);
+    assert.equal(view.showCheckAgain, false);
+});