mirror of
https://github.com/smittix/intercept.git
synced 2026-04-24 22:59:59 -07:00
40acca20b2
- Check for new releases from GitHub API with 6-hour cache - Show toast notification when updates are available - Add Updates tab in settings for manual checks and preferences - Support git-based updates with stash handling for local changes - Persist dismissed versions to avoid repeated notifications Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
499 lines
19 KiB
JavaScript
499 lines
19 KiB
JavaScript
/**
|
|
* Updater Module - GitHub update checking and notification system
|
|
*/
|
|
|
|
const Updater = {
|
|
// State
|
|
_checkInterval: null,
|
|
_toastElement: null,
|
|
_modalElement: null,
|
|
_updateData: null,
|
|
|
|
// Configuration
|
|
CHECK_INTERVAL_MS: 6 * 60 * 60 * 1000, // 6 hours in milliseconds
|
|
|
|
/**
|
|
* Initialize the updater module
|
|
*/
|
|
init() {
|
|
// Create toast container if it doesn't exist
|
|
this._ensureToastContainer();
|
|
|
|
// Check for updates on page load
|
|
this.checkForUpdates();
|
|
|
|
// Set up periodic checks
|
|
this._checkInterval = setInterval(() => {
|
|
this.checkForUpdates();
|
|
}, this.CHECK_INTERVAL_MS);
|
|
},
|
|
|
|
/**
|
|
* Ensure toast container exists in DOM
|
|
*/
|
|
_ensureToastContainer() {
|
|
if (!document.getElementById('toastContainer')) {
|
|
const container = document.createElement('div');
|
|
container.id = 'toastContainer';
|
|
document.body.appendChild(container);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Check for updates from the server
|
|
* @param {boolean} force - Bypass cache and check GitHub directly
|
|
*/
|
|
async checkForUpdates(force = false) {
|
|
try {
|
|
const url = force ? '/updater/check?force=true' : '/updater/check';
|
|
const response = await fetch(url);
|
|
const data = await response.json();
|
|
|
|
if (data.success && data.show_notification) {
|
|
this._updateData = data;
|
|
this.showUpdateToast(data);
|
|
}
|
|
|
|
return data;
|
|
} catch (error) {
|
|
console.warn('Failed to check for updates:', error);
|
|
return { success: false, error: error.message };
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Get cached update status without triggering a check
|
|
*/
|
|
async getStatus() {
|
|
try {
|
|
const response = await fetch('/updater/status');
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.warn('Failed to get update status:', error);
|
|
return { success: false, error: error.message };
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Show update toast notification
|
|
* @param {Object} data - Update data from server
|
|
*/
|
|
showUpdateToast(data) {
|
|
// Remove existing toast if present
|
|
this.hideToast();
|
|
|
|
const toast = document.createElement('div');
|
|
toast.className = 'update-toast';
|
|
toast.innerHTML = `
|
|
<div class="update-toast-indicator"></div>
|
|
<div class="update-toast-content">
|
|
<div class="update-toast-header">
|
|
<span class="update-toast-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
|
<polyline points="7 10 12 15 17 10"/>
|
|
<line x1="12" y1="15" x2="12" y2="3"/>
|
|
</svg>
|
|
</span>
|
|
<span class="update-toast-title">Update Available</span>
|
|
<button class="update-toast-close" onclick="Updater.dismissUpdate()">×</button>
|
|
</div>
|
|
<div class="update-toast-body">
|
|
Version <strong>${data.latest_version}</strong> is ready
|
|
</div>
|
|
<div class="update-toast-actions">
|
|
<button class="update-toast-btn update-toast-btn-primary" onclick="Updater.showUpdateModal()">
|
|
View Details
|
|
</button>
|
|
<button class="update-toast-btn update-toast-btn-secondary" onclick="Updater.hideToast()">
|
|
Later
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const container = document.getElementById('toastContainer');
|
|
if (container) {
|
|
container.appendChild(toast);
|
|
} else {
|
|
document.body.appendChild(toast);
|
|
}
|
|
|
|
this._toastElement = toast;
|
|
|
|
// Trigger animation
|
|
requestAnimationFrame(() => {
|
|
toast.classList.add('show');
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Hide the update toast
|
|
*/
|
|
hideToast() {
|
|
if (this._toastElement) {
|
|
this._toastElement.classList.remove('show');
|
|
setTimeout(() => {
|
|
if (this._toastElement && this._toastElement.parentNode) {
|
|
this._toastElement.parentNode.removeChild(this._toastElement);
|
|
}
|
|
this._toastElement = null;
|
|
}, 300);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Dismiss update notification for this version
|
|
*/
|
|
async dismissUpdate() {
|
|
this.hideToast();
|
|
|
|
if (this._updateData && this._updateData.latest_version) {
|
|
try {
|
|
await fetch('/updater/dismiss', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ version: this._updateData.latest_version })
|
|
});
|
|
} catch (error) {
|
|
console.warn('Failed to dismiss update:', error);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Show the full update modal with details
|
|
*/
|
|
showUpdateModal() {
|
|
this.hideToast();
|
|
|
|
if (!this._updateData) {
|
|
console.warn('No update data available');
|
|
return;
|
|
}
|
|
|
|
// Remove existing modal if present
|
|
this.hideModal();
|
|
|
|
const data = this._updateData;
|
|
const releaseNotes = this._formatReleaseNotes(data.release_notes || 'No release notes available.');
|
|
|
|
const modal = document.createElement('div');
|
|
modal.className = 'update-modal-overlay';
|
|
modal.onclick = (e) => {
|
|
if (e.target === modal) this.hideModal();
|
|
};
|
|
|
|
modal.innerHTML = `
|
|
<div class="update-modal">
|
|
<div class="update-modal-header">
|
|
<div class="update-modal-title">
|
|
<span class="update-modal-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
|
<polyline points="7 10 12 15 17 10"/>
|
|
<line x1="12" y1="15" x2="12" y2="3"/>
|
|
</svg>
|
|
</span>
|
|
Update Available
|
|
</div>
|
|
<button class="update-modal-close" onclick="Updater.hideModal()">×</button>
|
|
</div>
|
|
<div class="update-modal-body">
|
|
<div class="update-version-info">
|
|
<div class="update-version-current">
|
|
<span class="update-version-label">Current</span>
|
|
<span class="update-version-value">v${data.current_version}</span>
|
|
</div>
|
|
<div class="update-version-arrow">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
<polyline points="12 5 19 12 12 19"/>
|
|
</svg>
|
|
</div>
|
|
<div class="update-version-latest">
|
|
<span class="update-version-label">Latest</span>
|
|
<span class="update-version-value update-version-new">v${data.latest_version}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="update-section">
|
|
<div class="update-section-title">Release Notes</div>
|
|
<div class="update-release-notes">${releaseNotes}</div>
|
|
</div>
|
|
|
|
<div class="update-warning" id="updateWarning" style="display: none;">
|
|
<div class="update-warning-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
|
|
<line x1="12" y1="9" x2="12" y2="13"/>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
|
</svg>
|
|
</div>
|
|
<div class="update-warning-text">
|
|
<strong>Local changes detected</strong>
|
|
<p id="updateWarningText"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="update-options" id="updateOptions" style="display: none;">
|
|
<label class="update-option">
|
|
<input type="checkbox" id="stashChanges">
|
|
<span>Stash local changes before updating</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="update-progress" id="updateProgress" style="display: none;">
|
|
<div class="update-progress-spinner"></div>
|
|
<span id="updateProgressText">Updating...</span>
|
|
</div>
|
|
|
|
<div class="update-result" id="updateResult" style="display: none;"></div>
|
|
</div>
|
|
<div class="update-modal-footer">
|
|
<a href="${data.release_url || '#'}" target="_blank" class="update-modal-link" ${!data.release_url ? 'style="display:none"' : ''}>
|
|
View on GitHub
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
|
<polyline points="15 3 21 3 21 9"/>
|
|
<line x1="10" y1="14" x2="21" y2="3"/>
|
|
</svg>
|
|
</a>
|
|
<div class="update-modal-actions">
|
|
<button class="update-modal-btn update-modal-btn-secondary" onclick="Updater.hideModal()">
|
|
Cancel
|
|
</button>
|
|
<button class="update-modal-btn update-modal-btn-primary" id="updateNowBtn" onclick="Updater.performUpdate()">
|
|
Update Now
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
this._modalElement = modal;
|
|
|
|
// Trigger animation
|
|
requestAnimationFrame(() => {
|
|
modal.classList.add('show');
|
|
});
|
|
},
|
|
|
|
/**
|
|
* Hide the update modal
|
|
*/
|
|
hideModal() {
|
|
if (this._modalElement) {
|
|
this._modalElement.classList.remove('show');
|
|
setTimeout(() => {
|
|
if (this._modalElement && this._modalElement.parentNode) {
|
|
this._modalElement.parentNode.removeChild(this._modalElement);
|
|
}
|
|
this._modalElement = null;
|
|
}, 200);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Perform the update
|
|
*/
|
|
async performUpdate() {
|
|
const progressEl = document.getElementById('updateProgress');
|
|
const progressText = document.getElementById('updateProgressText');
|
|
const resultEl = document.getElementById('updateResult');
|
|
const updateBtn = document.getElementById('updateNowBtn');
|
|
const warningEl = document.getElementById('updateWarning');
|
|
const optionsEl = document.getElementById('updateOptions');
|
|
const stashCheckbox = document.getElementById('stashChanges');
|
|
|
|
// Show progress
|
|
if (progressEl) progressEl.style.display = 'flex';
|
|
if (progressText) progressText.textContent = 'Checking repository status...';
|
|
if (updateBtn) updateBtn.disabled = true;
|
|
if (resultEl) resultEl.style.display = 'none';
|
|
|
|
try {
|
|
const stashChanges = stashCheckbox ? stashCheckbox.checked : false;
|
|
|
|
if (progressText) progressText.textContent = 'Fetching and applying updates...';
|
|
|
|
const response = await fetch('/updater/update', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ stash_changes: stashChanges })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (progressEl) progressEl.style.display = 'none';
|
|
|
|
if (data.success) {
|
|
this._showResult(resultEl, true, data);
|
|
} else {
|
|
// Handle specific error cases
|
|
if (data.error === 'local_changes') {
|
|
if (warningEl) {
|
|
warningEl.style.display = 'flex';
|
|
const warningText = document.getElementById('updateWarningText');
|
|
if (warningText) {
|
|
warningText.textContent = data.message;
|
|
}
|
|
}
|
|
if (optionsEl) optionsEl.style.display = 'block';
|
|
if (updateBtn) updateBtn.disabled = false;
|
|
} else if (data.manual_update) {
|
|
this._showResult(resultEl, false, data, true);
|
|
} else {
|
|
this._showResult(resultEl, false, data);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
if (progressEl) progressEl.style.display = 'none';
|
|
this._showResult(resultEl, false, { error: error.message });
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Show update result
|
|
*/
|
|
_showResult(resultEl, success, data, isManual = false) {
|
|
if (!resultEl) return;
|
|
|
|
resultEl.style.display = 'block';
|
|
|
|
if (success) {
|
|
if (data.updated) {
|
|
let message = '<strong>Update successful!</strong><br>Please restart the application to complete the update.';
|
|
|
|
if (data.requirements_changed) {
|
|
message += '<br><br><strong>Dependencies changed!</strong> Run:<br><code>pip install -r requirements.txt</code>';
|
|
}
|
|
|
|
resultEl.className = 'update-result update-result-success';
|
|
resultEl.innerHTML = `
|
|
<div class="update-result-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
|
<polyline points="22 4 12 14.01 9 11.01"/>
|
|
</svg>
|
|
</div>
|
|
<div class="update-result-text">${message}</div>
|
|
`;
|
|
} else {
|
|
resultEl.className = 'update-result update-result-info';
|
|
resultEl.innerHTML = `
|
|
<div class="update-result-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="12" y1="16" x2="12" y2="12"/>
|
|
<line x1="12" y1="8" x2="12.01" y2="8"/>
|
|
</svg>
|
|
</div>
|
|
<div class="update-result-text">${data.message || 'Already up to date.'}</div>
|
|
`;
|
|
}
|
|
} else {
|
|
if (isManual) {
|
|
resultEl.className = 'update-result update-result-warning';
|
|
resultEl.innerHTML = `
|
|
<div class="update-result-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
|
|
<line x1="12" y1="9" x2="12" y2="13"/>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
|
</svg>
|
|
</div>
|
|
<div class="update-result-text">
|
|
<strong>Manual update required</strong><br>
|
|
${data.message || 'Please download the latest release from GitHub.'}
|
|
</div>
|
|
`;
|
|
} else {
|
|
resultEl.className = 'update-result update-result-error';
|
|
resultEl.innerHTML = `
|
|
<div class="update-result-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<line x1="15" y1="9" x2="9" y2="15"/>
|
|
<line x1="9" y1="9" x2="15" y2="15"/>
|
|
</svg>
|
|
</div>
|
|
<div class="update-result-text">
|
|
<strong>Update failed</strong><br>
|
|
${data.message || data.error || 'An error occurred during the update.'}
|
|
${data.details ? '<br><code style="font-size: 10px; margin-top: 8px; display: block;">' + data.details.substring(0, 200) + '</code>' : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Format release notes (basic markdown to HTML)
|
|
*/
|
|
_formatReleaseNotes(notes) {
|
|
if (!notes) return '<p>No release notes available.</p>';
|
|
|
|
// Escape HTML
|
|
let html = notes
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>');
|
|
|
|
// Convert markdown-style formatting
|
|
html = html
|
|
// Headers
|
|
.replace(/^### (.+)$/gm, '<h4>$1</h4>')
|
|
.replace(/^## (.+)$/gm, '<h3>$1</h3>')
|
|
.replace(/^# (.+)$/gm, '<h2>$1</h2>')
|
|
// Bold
|
|
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
|
// Italic
|
|
.replace(/\*(.+?)\*/g, '<em>$1</em>')
|
|
// Code
|
|
.replace(/`(.+?)`/g, '<code>$1</code>')
|
|
// Lists
|
|
.replace(/^- (.+)$/gm, '<li>$1</li>')
|
|
.replace(/^(\d+)\. (.+)$/gm, '<li>$2</li>')
|
|
// Paragraphs
|
|
.replace(/\n\n/g, '</p><p>')
|
|
// Line breaks
|
|
.replace(/\n/g, '<br>');
|
|
|
|
// Wrap list items
|
|
html = html.replace(/(<li>.*<\/li>)+/g, '<ul>$&</ul>');
|
|
|
|
return '<p>' + html + '</p>';
|
|
},
|
|
|
|
/**
|
|
* Manual trigger for settings panel
|
|
*/
|
|
async checkNow() {
|
|
return await this.checkForUpdates(true);
|
|
},
|
|
|
|
/**
|
|
* Clean up on page unload
|
|
*/
|
|
destroy() {
|
|
if (this._checkInterval) {
|
|
clearInterval(this._checkInterval);
|
|
this._checkInterval = null;
|
|
}
|
|
this.hideToast();
|
|
this.hideModal();
|
|
}
|
|
};
|
|
|
|
// Initialize on DOM ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
Updater.init();
|
|
});
|
|
|
|
// Clean up on page unload
|
|
window.addEventListener('beforeunload', () => {
|
|
Updater.destroy();
|
|
});
|