Function BinaryStatusBar

src/components/LocalModelManager.js:22–94

(onStatusChange)

// ─── Binary Status Bar ────────────────────────────────────────────────────────
function BinaryStatusBar(onStatusChange) {
    const bar = document.createElement('div');
    bar.className = 'flex items-center justify-between gap-3 p-3 rounded-xl bg-white/3 border border-white/5';

    const label = document.createElement('div');
    label.className = 'flex flex-col gap-0.5';
    label.innerHTML = `
        <span class="text-xs font-bold text-white">sd.cpp inference engine</span>
        <span id="binary-status-text" class="text-[11px] text-muted">${t('localModels.checking')}</span>
    `;

    const btn = document.createElement('button');
    btn.id = 'binary-action-btn';
    btn.className = 'px-3 py-1.5 rounded-lg text-xs font-bold transition-all hidden';
    btn.textContent = t('localModels.installEngine');

    bar.appendChild(label);
    bar.appendChild(btn);

    const progressBar = document.createElement('div');
    progressBar.className = 'h-1 rounded-full bg-white/5 mt-2 hidden overflow-hidden';
    progressBar.id = 'binary-progress-bar';
    progressBar.innerHTML = `<div id="binary-progress-fill" class="h-full bg-primary transition-all" style="width:0%"></div>`;
    bar.appendChild(progressBar);

    const refresh = async () => {
        const status = await localAI.getBinaryStatus();
        const text = bar.querySelector('#binary-status-text');
        if (status.exists) {
            text.textContent = t('localModels.installed');
            text.className = 'text-[11px] text-green-400';
            btn.classList.add('hidden');
        } else {
            text.textContent = t('localModels.notInstalled');
            text.className = 'text-[11px] text-yellow-400';
            btn.textContent = t('localModels.installEngine');
            btn.className = 'px-3 py-1.5 rounded-lg text-xs font-bold bg-primary text-black transition-all';
            btn.classList.remove('hidden');
        }
        if (onStatusChange) onStatusChange(status.exists);
    };

    btn.onclick = async () => {
        btn.disabled = true;
        btn.textContent = t('localModels.downloading');
        progressBar.classList.remove('hidden');

        const unsub = localAI.onDownloadProgress(({ id, phase, progress }) => {
            if (id !== '__binary__') return;
            const fill = document.getElementById('binary-progress-fill');
            const text = bar.querySelector('#binary-status-text');
            if (fill) fill.style.width = `${Math.round(progress * 100)}%`;
            if (text) text.textContent = phase === 'extracting' ? t('localModels.extracting') : `${t('localModels.downloading')} ${Math.round(progress * 100)}%`;
        });

        try {
            await localAI.downloadBinary();
            unsub();